/* =========================================================
   Fab 41 – main.css
   Lokales Designsystem: Fonts, Custom Properties, Reset,
   Typografie, Buttons, Container/Layout.
   ========================================================= */

/* ---------------------------------------------------------
   1. Lokale Fonts (kein Google-Fonts-CDN, keine externen Requests)
   --------------------------------------------------------- */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/kanit-v300.woff2") format("woff2");
}

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kanit-v400.woff2") format("woff2");
}

/* Syne wird als Variable Font ausgeliefert und deckt 600–700 in einer Datei ab */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/syne-var.woff2") format("woff2");
}

/* ---------------------------------------------------------
   2. Designsystem – CSS Custom Properties
   --------------------------------------------------------- */
:root {
  /* Farben */
  --color-accent-1: #536dfe;
  --color-accent-2: #f7f7fa;
  --color-accent-3: #000000b3;
  --color-accent-4: #eef0ff;
  --color-accent-5: #ffffff;
  --color-accent-6: #000000;
  --color-accent-7: #e2e2e2;
  --color-accent-8: #ffbe11;
  --color-sticky-header-bg: #ffffff;
  --color-custom-1: #b0a7ef;
  --color-custom-2: #b0a7ef61;
  --color-custom-3: #233491b8;
  --color-button-hover: #6754e9;

  /* Fonts */
  --font-heading: "Syne", sans-serif;
  --font-body: "Kanit", sans-serif;

  /* Layout */
  --container-max: 1280px;
  --breakpoint-tablet: 1025px;
  --breakpoint-mobile: 768px;

  /* Radien */
  --radius-button: 18px;
  --radius-input: 18px;
}

/* ---------------------------------------------------------
   3. Reset / Basis
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-accent-6);
  background-color: var(--color-accent-5);
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   4. Typografie
   --------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5em;
}

h1,
.h1 {
  font-size: 66px;
  font-weight: 700;
  line-height: 1.1;
}

h2,
.h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
}

h3,
.h3 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

h4,
.h4 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

h5,
.h5 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

h6,
.h6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

p {
  margin: 0 0 1em;
}

.body-lg {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
}

.body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
}

.button-text {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}

/* Zurückhaltende, konservative Skalierung für kleinere Breakpoints */
@media (max-width: 1025px) {
  h1,
  .h1 {
    font-size: 52px;
  }

  h2,
  .h2 {
    font-size: 38px;
  }

  h3,
  .h3 {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: 38px;
  }

  h2,
  .h2 {
    font-size: 30px;
  }

  h3,
  .h3 {
    font-size: 26px;
  }

  h4,
  .h4 {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------
   5. Formularelemente (Basis)
   --------------------------------------------------------- */
input,
textarea,
select {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  border: 1px solid var(--color-accent-7);
  border-radius: var(--radius-input);
  padding: 13px 22px;
  background-color: var(--color-accent-5);
}

label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
}

/* ---------------------------------------------------------
   6. Button-System
   --------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  border-radius: var(--radius-button);
  padding: 13px 29px;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-accent-6);
  color: var(--color-accent-5);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-button-hover);
  color: var(--color-accent-5);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-accent-6);
  border-color: var(--color-accent-6);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: var(--color-accent-5);
}

@media (max-width: 1025px) {
  .btn {
    padding: 12px 28px;
  }
}

/* ---------------------------------------------------------
   7. Container / Layout
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

main {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   8. Site-Header / Hauptnavigation
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-sticky-header-bg);
  width: 100%;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* P1.9: Live-Messung (1440px) – der weiße Header-Streifen ist auf Live
   80px hoch (Logo 55px + 12,5px Innenabstand oben/unten), lokal vorher
   87px (16px/16px). Nur ab 1025px wirksam, damit die Mobile-Kopfzeile
   (kleineres 40px-Logo, siehe unten) unverändert bleibt. */
@media (min-width: 1025px) {
  .site-header__inner {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
  }
}

.site-header__logo {
  display: inline-flex;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 55px;
  width: auto;
  display: block;
}

/* Hauptnavigation (Desktop) */
/* P1.4: Live-Messung (1440px) – Gap zwischen den Hauptlinks 24px
   (vorher 32px). Wirkt sich auf Mobile NICHT aus, da die Mobile-
   Media-Query weiter unten .main-nav__list bereits vollständig auf
   gap:0/flex-direction:column umstellt. */
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 24px;
}

.main-nav__link {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  /* Nur Basis für die absolut positionierte Active-Unterstreichung
     (s. Desktop/Tablet-Block unten) – ohne visuelle Auswirkung sonst. */
  position: relative;
}

.main-nav__item {
  position: relative;
}

.main-nav__item--dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.submenu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

.submenu-toggle__chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.main-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background-color: var(--color-accent-5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  /* Kein margin-top: eine Lücke zwischen Trigger und Dropdown würde beim
     Hover eine unhoverbare Totzone erzeugen, in der :hover verloren geht.
     Der optische Abstand wird stattdessen über padding-top innerhalb der
     (weiterhin hoverbaren) Dropdown-Box erzeugt. */
  padding: 16px 0 8px;
  margin-top: 0;
}

.main-nav__dropdown li a {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
}

.main-nav__dropdown li a:hover,
.main-nav__dropdown li a:focus-visible {
  background-color: var(--color-accent-2);
}

@media (min-width: 1025px) {
  .main-nav__item--dropdown:hover .main-nav__dropdown,
  .main-nav__item--dropdown:focus-within .main-nav__dropdown {
    display: block;
  }

  /* P1.4: Live-Messung (1440px) – Hauptlinks sind großgeschrieben
     (text-transform:uppercase), mit line-height 19,6px (1,4) und
     letter-spacing -0,17px, statt lokal vorher normale Groß-/
     Kleinschreibung, line-height 21px (1,5) und letter-spacing
     normal. Bewusst nur ab 1025px (Desktop/Tablet) gesetzt – die
     Mobile-Navigation bleibt dadurch unverändert (s. P1.4-Bericht). */
  /* P1.10: Root Cause des Header-Versatzes – als reines Inline-Element
     nutzte .main-nav__link nicht die volle line-height als Boxhöhe
     (17px statt 19,6px), während der Link innerhalb von
     .main-nav__item--dropdown (Flex-Kind, dadurch Block-Level) bereits
     die volle Boxhöhe hatte. Ergebnis: "Leistungen" saß exakt auf der
     Header-Mittelachse (40px), "Über Uns"/"Equipment"/"Kontakt" dagegen
     1,5px tiefer (41,5px). display:block gleicht alle Hauptlinks auf
     dieselbe Boxhöhe/-Mitte an, ohne Typografie/Gap/Underline-Stil zu
     verändern. */
  .main-nav__link {
    display: block;
    line-height: 1.4;
    letter-spacing: -0.17px;
    text-transform: uppercase;
  }

  /* Live zeigt beim aktiven Hauptpunkt KEINE Textfarbänderung,
     sondern eine 3px starke Unterstreichung in Accent 1 über die
     volle Linkbreite (Text bleibt schwarz) – ersetzt die vorherige
     reine Farbänderung (s. Basis-Regel .main-nav__link.is-active
     weiter unten, die für Mobile unverändert bestehen bleibt). */
  .main-nav__link.is-active {
    color: var(--color-accent-6);
  }

  .main-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background-color: var(--color-accent-1);
  }
}

.site-header__cta {
  flex-shrink: 0;
}

.btn-arrow {
  display: inline-block;
  margin-left: 8px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  flex-shrink: 0;
}

.menu-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-accent-6);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile-Navigation (unterhalb Tablet-Breakpoint) */
@media (max-width: 1024px) {
  .menu-toggle {
    display: flex;
  }

  .site-header__logo img {
    height: 40px;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-accent-5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }

  .main-nav__item {
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--color-accent-2);
  }

  .main-nav__item--dropdown {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .main-nav__link {
    display: block;
    padding: 14px 24px;
    flex: 1;
  }

  .submenu-toggle {
    display: flex;
    margin-right: 16px;
  }

  .main-nav__dropdown {
    display: none;
    position: static;
    box-shadow: none;
    margin-top: 0;
    padding: 0 0 8px;
    width: 100%;
  }

  .main-nav__item--dropdown.is-open .main-nav__dropdown {
    display: block;
  }

  .main-nav__dropdown li a {
    padding: 10px 40px;
  }

  .site-header__cta {
    display: none;
  }

  .main-nav__cta-item {
    padding: 16px 24px;
  }

  .main-nav__cta-item .btn {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 1025px) {
  .main-nav__cta-item {
    display: none;
  }
}

/* ---------------------------------------------------------
   8a. Hauptseiten-Top-Band (Startseite, Über Uns, Equipment)
   --------------------------------------------------------- */
/* P1.12: Live-Messung (1440px) – zwischen dem weißen Header und dem
   Hero liegt auf den vier Hauptseiten (Startseite, Über Uns, Equipment,
   Kontakt) ein heller, lavendelfarbener Streifen. Live erzeugt ihn über
   einen body-weiten Farbverlauf (linear-gradient(#eef0ff 0%, #fff
   80vh)); der hier sichtbare Ausschnitt liegt aber nur in den obersten
   ~10–16% dieses Verlaufs und ist optisch von einer flächigen Farbe
   praktisch nicht zu unterscheiden – deshalb hier bewusst als
   flächiger Block umgesetzt, exakt in --color-accent-4 (= gemessener
   Live-Startwert #eef0ff). Nur auf den drei bereits vollständig
   aufgebauten Hauptseiten ergänzt (Kontakt ist noch nicht aufgebaut,
   separates Arbeitspaket). Leistungs-Unterseiten erhalten dieses
   Element nicht (dort beginnt der Hero-Hintergrund auf Live direkt
   hinter dem Header, ohne sichtbaren Zwischenraum).
   Nur ab 1025px wirksam: die bestehenden Hero-Abstände (margin-top),
   die dieses Band einnimmt, sind mobil bereits anders/eingefroren
   (siehe jeweilige Hero-Sections) – keine Änderung an deren Mobile-
   Verhalten in diesem Arbeitspaket. */
.page-top-band {
  display: none;
}

@media (min-width: 1025px) {
  .page-top-band {
    display: block;
    background-color: var(--color-accent-4);
  }

  .page-top-band--80 {
    height: 80px;
  }

  .page-top-band--50 {
    height: 50px;
  }

  /* P3.3: Kontakt-Seite hat auf Live einen deutlich größeren Intro-
     Bereich vor dem eigentlichen Content als Home/Über Uns/Equipment
     (120px statt 50px, separat live gemessen, nicht blind übernommen –
     siehe Abschlussbericht P3.3). */
  .page-top-band--120 {
    height: 120px;
  }
}

/* ---------------------------------------------------------
   9. Startseiten-Hero
   --------------------------------------------------------- */

/* Verifiziert (Elementor-Originaldaten, Home-Hero-Container):
   margin-top 80px (Desktop) / 0 (Tablet+Mobile), padding 50px 30px
   (Desktop) / 40px 20px (Mobile), border-radius nur untere Ecken 40px,
   min-height 50vh / 30vh / auto. Der sichtbare helle Abstand zwischen
   Header und Hero im Referenz-Screenshot entspricht exakt diesem
   margin-top. .hero bleibt overflow:visible, damit das untere
   Collage-Bild wie im Original über die Hero-Unterkante hinausragen
   kann; Video/Overlay werden dafür in einen eigenen, maskierten
   .hero__media-Wrapper mit dem verifizierten Radius ausgelagert. */
.hero {
  position: relative;
  overflow: visible;
  min-height: 50vh;
  display: flex;
  align-items: center;
  color: var(--color-accent-5);
  margin-top: 80px;
}

/* P1.12: Der 80px-Abstand vor dem Hero wird ab 1025px durch das neue,
   farbige .page-top-band ersetzt (siehe Abschnitt 8a) – die Hero-
   Position bleibt dadurch exakt identisch (Band-Höhe = vorheriger
   margin-top). Mobil/Tablet (≤1024px) bleibt unverändert (eigene
   Regel weiter unten setzt dort bereits margin-top:0). */
@media (min-width: 1025px) {
  .hero {
    margin-top: 0;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  z-index: 0;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-custom-3) 100%);
  opacity: 0.75;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hero-content__text {
  flex: 1 1 480px;
  max-width: 640px;
  /* verifiziert: linke Spalte hat 10% rechtes Innenpadding zur
     Collage (statt eines festen gap-Werts) */
  padding-right: 10%;
}

.hero-content h1 {
  color: var(--color-accent-5);
  /* Schmalere Messbreite ausschließlich für die H1: im Original bricht
     "360° Multimedia-Agentur" (ein durchgehender String, keine <br>)
     rein durch die verfügbare Spaltenbreite in drei Zeilen um. */
  max-width: 460px;
}

.hero__subtext {
  max-width: 560px;
  color: var(--color-accent-5);
  margin-bottom: 32px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
}

/* Rechte Hero-Collage: vertikal gestaffelte, überlappende 3er-Bildgruppe.
   Bildreihenfolge, Border-Radius (30px) und Schattenwerte sind aus dem
   Original verifiziert (siehe P1.1a). Die Positionsprozente unten sind
   eine visuelle Annäherung an den Referenz-Screenshot (relative
   Containergeometrie, keine Elementor-1:1-Werte, da dort abweichende
   prozentuale Bezugsgrößen je Bild verwendet werden). Das dritte Bild
   liegt bewusst außerhalb der collage-eigenen Höhe und wird von keinem
   Vorfahren geclippt, wodurch es wie im Original über die Hero-
   Unterkante hinausragt. */
.hero-collage {
  position: relative;
  flex: 0 0 340px;
  width: 340px;
  /* Höhe bewusst deutlich größer als die reine Bildgröße: sie bildet den
     "Rahmen" für Team- und Kamera-Bild und bestimmt zugleich (über die
     Flex-Zentrierung mit dem Textblock) die insgesamt größere Hero-Höhe.
     Das Arbeitsplatzbild wird bewusst außerhalb davon positioniert. */
  height: 650px;
  margin-right: 4%;
}

.hero-collage__img {
  position: absolute;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 0 14px 16px rgba(35, 22, 119, 0.36);
}

.hero-collage__img--1 {
  top: 0;
  left: 0;
  width: 58%;
  z-index: 1;
}

.hero-collage__img--2 {
  top: 29%;
  left: 36%;
  width: 63%;
  z-index: 2;
}

.hero-collage__img--3 {
  /* liegt bewusst im unteren Bereich des Collage-Rahmens und ragt mit
     dem größten Teil seiner eigenen Höhe darüber hinaus – entsprechend
     dem großen Überstand des Arbeitsplatzbildes im Original. */
  top: 78%;
  left: 4%;
  width: 62%;
  z-index: 3;
  box-shadow: 0 14px 16px rgba(70, 63, 116, 0.1);
}

/* P1.5: Live-Messung (1440px) – Abstand Collage-Unterkante -> Kicker-
   Oberkante ist auf Live praktisch 0px (Kicker beginnt exakt dort, wo
   das dritte/unterste Collagebild endet), Hero-Unterkante -> Kicker
   90px. Lokal überragt das dritte Collagebild die Hero-Unterkante
   konstant um 88,06px (frozen, s. .hero-collage__img--3), also:
   padding-top = 0 (Ziel-Gap) + 88,06 ≈ 88px, statt der vorherigen
   260px (deutlich zu groß, s. P1.5-Bericht). */
.philosophy {
  padding-top: 88px;
}

@media (max-width: 1025px) {
  .hero {
    min-height: 30vh;
    margin-top: 0;
  }

  .hero-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .hero-content__text {
    padding-right: 0;
  }

  .hero-collage {
    align-self: center;
    width: 260px;
    height: 480px;
  }

  /* P1.5: gleiche Herleitung wie bei 1440px (Collage-Überhang + ~0px
     Ziel-Gap) für diesen Breakpoint neu berechnet: 90,09px -> 90px
     (vorher 190px, proportional zu groß, s. P1.5-Bericht). */
  .philosophy {
    padding-top: 90px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
  }

  .hero-content {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero-content__text {
    max-width: 100%;
  }

  .hero-content h1 {
    max-width: 320px;
  }

  .hero-collage {
    width: 210px;
    height: 380px;
  }

  /* P1.5: gleiche Herleitung, für diesen Breakpoint (gilt auch für
     390px, da keine weitere Philosophy-Regel darunter existiert):
     58,77px -> 59px (vorher 150px, proportional zu groß). */
  .philosophy {
    padding-top: 59px;
  }
}

/* ---------------------------------------------------------
   10. Philosophie
   --------------------------------------------------------- */
.philosophy {
  padding-bottom: 96px;
}

.philosophy__inner {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

/* P1.8: korrigiert P1.7 (hatte fälschlich nur .philosophy__text
   versetzt, statt die gesamte zweispaltige Contentgruppe). Der
   ca. 3cm/113px-Versatz nach unten gilt jetzt für den gemeinsamen
   Wrapper beider Spalten (.philosophy__inner), sodass Kicker, H2,
   Fließtext und Link gemeinsam als Einheit wandern – die interne
   Geometrie (Kicker→H2, Fließtext→Link, Spaltenbreiten/-gap) bleibt
   dadurch unverändert. Nur Desktop/Tablet (>=1025px, deckt sich mit
   dem Stacking-Breakpoint weiter unten) – bei gestapeltem Layout
   (<=1024px) bliebe der Versatz unnatürlich groß, s. P1.8-Bericht. */
@media (min-width: 1025px) {
  .philosophy__inner {
    margin-top: 113px;
  }
}

.philosophy__heading,
.philosophy__text {
  flex: 1 1 0;
  max-width: 560px;
}

.kicker {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-1);
  margin: 0 0 12px;
}

/* P1.5: Live-Messung (1440px) – der Kicker "Unsere Philosophie" weicht
   von den übrigen .kicker-Instanzen (Expertise/Insights, unverändert
   eingefroren) ab: 16px statt 14px, line-height 22,4px (1,4) statt
   vererbter 21px, letter-spacing -1px statt 0,05em, gedämpftes Schwarz
   (--color-accent-3 = #000000b3, deckt sich mit dem live gemessenen
   rgba(0,0,0,0.7)) statt Accent-1-Blau, Abstand zur H2 20px statt 12px.
   Bewusst nur für die Philosophie-Section überschrieben. */
.philosophy__heading .kicker {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-accent-3);
  margin-bottom: 20px;
}

.philosophy__heading h2 {
  margin: 0;
}

/* P1.6: Live-Messung (1440px) – rechter Fließtext ist deutlich
   kleiner/leichter/gedämpfter als das lokal verwendete .body-lg
   (20px/400/schwarz): 16px, Gewicht 300, line-height 24px (1,5,
   gleiches Verhältnis), gedämpftes Schwarz (--color-accent-3,
   identisch zum Kicker-Farbton). Abstand zum Link 30px statt 24px.
   Bewusst nur für die Philosophie-Spalte überschrieben (.body-lg
   selbst bleibt für die Why-Us-Sektion unverändert eingefroren). */
.philosophy__text p {
  margin: 0 0 26px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-accent-3);
}

.text-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-accent-6);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* P1.6: Live-Messung (1440px) – der Philosophie-Link "Mehr über uns"
   nutzt (anders als die übrigen .text-link-Instanzen, unverändert
   eingefroren) die Headline-Schrift, ist deutlich kleiner/enger
   gesperrt und wird über eine 2px-Border statt text-decoration
   unterstrichen. Bewusst nur hier überschrieben. */
.philosophy__text .text-link {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.2px;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent-1);
}

@media (max-width: 1024px) {
  .philosophy__inner {
    flex-direction: column;
    gap: 24px;
  }

  .philosophy__heading,
  .philosophy__text {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   11. 3er-Nutzenbereich
   Werte direkt aus der Live-Seite gemessen (P1.2a): Karte mit
   1px-Rahmen #E2E2E2, Radius 50px, Padding 30px, Icon-Kreis 70px
   oben rechts (Accent 2 Hintergrund, Accent 1 Icon), Gap 45px.
   --------------------------------------------------------- */
.benefits {
  padding: 64px 0 96px;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}

.benefit {
  position: relative;
  border: 1px solid var(--color-accent-7);
  border-radius: 50px;
  padding: 30px;
}

.benefit__icon {
  position: absolute;
  top: 30px;
  right: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.benefit__icon svg {
  width: 32px;
  height: 32px;
}

.benefit h3 {
  font-size: 28px;
  max-width: 75%;
  margin: 0 0 16px;
}

.benefit p {
  margin: 0;
}

@media (max-width: 768px) {
  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---------------------------------------------------------
   12. Expertise + Leistungen (inkl. #leistungen)
   Leistungs-Karten laut Live-Seite: 3 Spalten (nicht 4), weiße
   Karte, Radius 34px, Padding 40/50/30/30px, Icon-Kreis 64px
   oben links, Gap 20px.
   --------------------------------------------------------- */
.expertise {
  padding: 96px 0;
  /* verifizierter Original-Gradient: Accent 1 -> transparent */
  background-image: linear-gradient(180deg, var(--color-accent-1) 0%, transparent 100%);
  color: var(--color-accent-5);
}

.expertise__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 50px;
  margin: 0 auto 48px;
}

.expertise__heading {
  max-width: 65%;
  margin: 0 0 56px;
  text-align: left;
}

.expertise__heading .kicker {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--color-accent-3);
  text-align: left;
}

.expertise__heading h2 {
  color: var(--color-accent-6);
  text-align: left;
}

@media (max-width: 1024px) {
  .expertise__heading {
    max-width: 80%;
  }
}

.services__anchor {
  display: block;
  scroll-margin-top: 100px;
}

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service {
  background-color: var(--color-accent-5);
  color: var(--color-accent-6);
  border-radius: 34px;
  padding: 40px 50px 30px 30px;
}

.service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
  margin-bottom: 20px;
}

.service__icon svg {
  width: 26px;
  height: 26px;
}

.service h3 {
  font-size: 20px;
  margin: 0 0 12px;
}

.service p {
  font-size: 16px;
  margin: 0 0 16px;
}

.service__link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-6);
}

@media (max-width: 1024px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services {
    grid-template-columns: 1fr;
  }

  .service {
    padding: 32px 24px;
  }

  .expertise__heading {
    text-align: left;
  }
}

/* ---------------------------------------------------------
   13. Warum wir der richtige Partner sind
   Live-Messung (P1.2b, 1440px): Heading, Text, CTA und Tabs
   liegen NICHT nebeneinander, sondern alle auf derselben linken
   Achse und nahezu voller Containerbreite übereinander gestapelt
   (h2/p/tabs jeweils left:83px, width~1260px innerhalb der
   1425px-Section) – kein Zweispalter. Live nutzt echte
   horizontale Tabs (kein Akkordeon): 3 gleich breite Tab-Titel,
   aktiver Tab mit Accent-4-Hintergrund, 16px/700/uppercase.
   Als schlankes Vanilla-JS umgesetzt.
   --------------------------------------------------------- */
.why-us {
  padding: 96px 0;
}

.why-us__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.why-us__text h2 {
  margin: 0 0 20px;
}

.why-us__text p {
  margin: 0 0 28px;
  max-width: 800px;
}

.tabs {
  /* Live-Messung (P1.2c, getComputedStyle): weder Border noch
     Border-Radius auf dem Gesamt-Container – bewusst entfernt. */
}

.tabs__nav {
  display: flex;
}

.tabs__tab {
  flex: 1 1 0;
  background: transparent;
  border: 0;
  padding: 20px 25px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent-6);
  cursor: pointer;
}

.tabs__tab.is-active {
  background-color: var(--color-accent-4);
}

/* Live-Messung: der Content-Panel-Bereich (elementor-tabs-content-wrapper)
   trägt IMMER die helle Accent-4-Fläche, unabhängig davon, welches
   Panel gerade sichtbar ist – nicht nur der aktive Tab. Da je Zustand
   ohnehin nur ein einzelnes .tabs__panel sichtbar ist (die anderen
   [hidden]), reicht die Hintergrundfarbe direkt auf .tabs__panel,
   ohne zusätzlichen Wrapper – kein Farbblitzer beim Umschalten. */
.tabs__panel {
  background-color: var(--color-accent-4);
  padding: 20px;
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel h4 {
  margin: 0 0 8px;
}

.tabs__panel p {
  margin: 0;
}

@media (max-width: 1024px) {
  .why-us__inner {
    gap: 32px;
  }
}

/* Live-Verhalten geprüft: bei 768px bleiben die Tabs horizontal,
   erst darunter (Elementor-Mobile-Breakpoint) wechseln sie zu
   akkordeonartig gestapelten Titeln mit Inhalt direkt darunter.
   Per CSS `order` nachgebaut (Button+Panel abwechselnd), ohne die
   bestehende Tab-JS-Logik zu ändern. */
@media (max-width: 767px) {
  .tabs {
    display: flex;
    flex-direction: column;
  }

  .tabs__nav {
    display: contents;
  }

  .tabs__tab {
    text-align: left;
    border-top: 1px solid var(--color-accent-7);
  }

  #tab-klarheit {
    order: 1;
  }

  #panel-klarheit {
    order: 2;
  }

  #tab-handwerk {
    order: 3;
  }

  #panel-handwerk {
    order: 4;
  }

  #tab-qualitaet {
    order: 5;
  }

  #panel-qualitaet {
    order: 6;
  }
}

/* ---------------------------------------------------------
   14. Insights & Expertise
   3 sichtbare Teaser von der Live-Seite (Bild, Datum, Titel),
   statisch übernommen. Keine Detail-Links (siehe Bericht).
   --------------------------------------------------------- */
.insights {
  padding: 64px 0 96px;
  text-align: center;
}

.insights h2 {
  margin: 0;
}

.insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
  text-align: left;
}

.insight-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 50px 50px 0 0;
  margin-bottom: 16px;
}

.insight-card__date {
  display: block;
  font-size: 16px;
  color: var(--color-accent-3);
  margin-bottom: 8px;
}

.insight-card h3 {
  font-size: 20px;
  margin: 0;
}

@media (max-width: 1024px) {
  .insights__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   15. Kennzahlen
   Live-Messung (P1.3b, 1440px): heller Container (#F7F7FA,
   nur oben gerundet, 50px) mit Heading + 3-Spalten-Grid,
   darunter eigener CTA-Block (#EEF0FF, 50px Radius) mit
   schwarzem Standard-Button.
   --------------------------------------------------------- */
.stats {
  padding-top: 64px;
}

.stats__box {
  background-color: var(--color-accent-2);
  border-radius: 50px 50px 0 0;
  padding: 80px 60px 0;
}

.stats h4 {
  text-align: center;
  margin: 0 0 40px;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
  text-align: center;
}

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat p {
  margin: 0;
}

.stats__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 44px;
  padding: 58px 0;
  background-color: var(--color-accent-4);
  border-radius: 50px;
}

@media (max-width: 767px) {
  .stats__box {
    padding: 48px 32px 0;
  }

  .stats__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .stats__cta {
    margin-top: 32px;
    padding: 40px 24px;
  }
}

/* ---------------------------------------------------------
   16. (entfernt in P3.1 – anonymer/generischer Testimonial-
   Slider-Bereich der Startseite vollständig entfernt, siehe
   Abschlussbericht P3.1. Nummerierung der Folgeabschnitte
   bewusst unverändert belassen, um Verweise in anderen
   Kommentaren nicht zu verfälschen.)
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   17. Footer
   Live-Messung (P1.3a, 1440px): EINE große blaue Fläche mit
   stark gerundeten oberen Ecken (40px), randnah/fast volle
   Seitenbreite. Darin gestapelt:
     1. Intro-Text | weiße Formular-Karte (Schatten-Versatz)
     2. eine gemeinsame weiße, stark gerundete Kontakt-/
        Bewertungskarte (3 Spalten: Telefon / Adresse / Bewertungen)
     3. Navigation (3 gleich breite Spalten)
   Darunter: weiße Bottom-Bar (obere Ecken gerundet).
   --------------------------------------------------------- */
.site-footer {
  color: var(--color-accent-5);
}

.footer-blue {
  background-color: var(--color-accent-1);
  border-radius: 40px 40px 0 0;
  padding: 60px 0;
}

.footer-main__grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-intro {
  flex: 1 1 0;
  max-width: 480px;
}

.footer-intro h2 {
  color: var(--color-accent-5);
  margin: 0 0 16px;
}

.footer-intro p {
  margin: 0;
}

.footer-form-card {
  flex: 1 1 0;
  max-width: 500px;
  background-color: var(--color-accent-5);
  color: var(--color-accent-6);
  border-radius: 40px;
  padding: 55px;
  box-shadow: 10px 7px 0 0 var(--color-accent-6);
}

.footer-form-card h3 {
  font-size: 28px;
  margin: 0 0 16px;
}

.form-progress {
  height: 4px;
  border-radius: 7px;
  background-color: var(--color-accent-4);
  overflow: hidden;
  margin-bottom: 24px;
}

.form-progress__bar {
  height: 100%;
  border-radius: 7px;
  background-color: var(--color-accent-8);
  transition: width 0.2s ease;
}

.form-field {
  margin-bottom: 16px;
}

.form-field input,
.form-field textarea {
  width: 100%;
}

.form-field textarea {
  resize: vertical;
}

.form-field--hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.form-step__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.form-step__nav--end {
  justify-content: flex-end;
}

.form-status {
  margin-top: 16px;
  font-size: 14px;
}

.form-status[data-state="error"] {
  color: #c0392b;
}

.form-status[data-state="success"] {
  color: #1e7e34;
}

.field-error {
  display: block;
  color: #c0392b;
  font-size: 13px;
  margin-top: 4px;
}

/* --- Weiße Kontakt-/Bewertungs-Karte (Bereich 2) --- */
.footer-contact-card {
  display: flex;
  background-color: var(--color-accent-5);
  color: var(--color-accent-6);
  border-radius: 40px;
  padding: 40px 65px 45px;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-contact-col {
  flex: 1 1 0;
  min-width: 0;
}

.footer-contact-col__label {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-accent-3);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.footer-phone {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-accent-6);
}

.footer-address-icon {
  display: inline-flex;
  color: var(--color-accent-1);
  margin-bottom: 12px;
}

.footer-address-text {
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-accent-6);
  margin-bottom: 4px;
}

/* Live-Messung (P2.2a): schwarzer Text, blaue Akzentuierung nicht per
   text-decoration, sondern als 2px solid Accent-1-border-bottom direkt
   an der Schrift (kein Live-Hover-/Focus-Wechsel gemessen). Gilt für
   den global wiederverwendeten Footer auf allen Seiten. */
.footer-maps-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent-6);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent-1);
  margin-top: 6px;
}

.footer-contact-col--reviews {
  border-left: 1px solid var(--color-accent-7);
  padding-left: 40px;
}

.footer-reviews__stars {
  display: block;
  color: #ff3d2e;
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.footer-reviews__logo {
  height: 34px;
  width: auto;
  margin-bottom: 8px;
}

.footer-reviews__score {
  margin: 0;
  font-weight: 300;
  color: var(--color-accent-3);
}

/* --- Navigation (Bereich 3) --- */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-col h4 {
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

/* Live-Messung (P2.1a): Elementor-Nav-Menu-Hover-Pointer "underline/fade" –
   Textfarbe + eine 3px starke, volle Linienbreite in Accent 8 (#FFBE11),
   beides per Opacity-Fade (0.3s) statt der vorherigen dünnen
   text-decoration-Unterstreichung. */
.footer-col a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  transition: color 0.3s ease;
}

.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background-color: var(--color-accent-8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--color-accent-8);
  text-decoration: none;
}

.footer-col a:hover::after,
.footer-col a:focus-visible::after {
  opacity: 1;
}

/* --- Bottom-Bar --- */
.footer-bottom {
  background-color: var(--color-accent-5);
  color: var(--color-accent-3);
}

.footer-bottom .container {
  padding-top: 30px;
  padding-bottom: 30px;
}

.footer-bottom p {
  margin: 0;
  font-size: 14px;
  text-align: left;
}

@media (max-width: 1024px) {
  .footer-main__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .footer-intro,
  .footer-form-card {
    max-width: 100%;
  }

  .footer-contact-card {
    flex-direction: column;
    gap: 32px;
  }

  .footer-contact-col--reviews {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-accent-7);
    padding-top: 24px;
  }

  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-blue {
    padding: 48px 0;
  }

  .footer-contact-card {
    padding: 32px;
  }
}

/* ---------------------------------------------------------
   18. Über-Uns-Seite
   Live-Messung (P2.1, 1440px): eigener, gekapselter Namensraum
   .about-* – keine Beeinflussung von index.html oder anderen
   Unterseiten. Reihenfolge: Hero (Video+Bild) → Intro-Text →
   Werte-Karten (mit Teamfoto) → Full-Service-Zweispalter.
   --------------------------------------------------------- */

/* Aktiver Menüpunkt (auf ueber-uns.html/equipment.html gesetzt).
   P1.4: Live zeigt beim aktiven Hauptpunkt auf Desktop/Tablet eine
   Unterstreichung statt Textfarbe (s. @media(min-width:1025px) oben
   bei .main-nav__link) – diese reine Farbänderung bleibt deshalb nur
   noch für Mobile (<=1024px) aktiv, wo das bestehende Erscheinungsbild
   unverändert erhalten bleibt. */
@media (max-width: 1024px) {
  .main-nav__link.is-active {
    color: var(--color-accent-1);
  }
}

/* --- About-Hero --- */
.about-hero {
  position: relative;
  overflow: visible;
  color: var(--color-accent-5);
  margin-top: 80px;
  padding: 50px 0;
  background-color: var(--color-accent-1);
}

/* P1.12: siehe .hero oben – der 80px-Abstand wird ab 1025px durch
   .page-top-band ersetzt, Hero-Position bleibt unverändert. Mobil
   bleibt der bestehende margin-top:80px (bislang keine eigene Mobile-
   Regel vorhanden) unverändert bestehen. */
@media (min-width: 1025px) {
  .about-hero {
    margin-top: 0;
  }
}

.about-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  z-index: 0;
}

.about-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fab41-CI-Überlagerung auf dem Video (nicht auf dem rechten Bild) –
   identischer Farbverlauf/Opazität wie die bereits freigegebene
   .hero-overlay der Startseite, hier nur auf .about-hero__media
   gescoped. */
.about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-custom-3) 100%);
  opacity: 0.75;
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 40px;
}

.about-hero__text {
  flex: 1 1 0;
}

.about-hero__text h1 {
  color: var(--color-accent-5);
}

.about-hero__text p {
  color: var(--color-accent-5);
  max-width: 500px;
  margin: 0 0 32px;
}

.about-hero__image {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

.about-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 630 / 470;
  object-fit: cover;
  border-radius: 50px;
}

@media (max-width: 767px) {
  .about-hero__inner {
    flex-direction: column;
  }

  .about-hero__media {
    display: none;
  }

  .about-hero {
    background-color: var(--color-accent-1);
  }
}

/* --- About-Intro --- */
.about-intro {
  padding: 64px 0;
}

.about-intro__text {
  max-width: 780px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-accent-6);
}

/* --- About-Werte ---
   Live-Messung (P2.1b): kein isolierter Innenkasten mehr, sondern
   Verlauf über die GESAMTE Sectionbreite (wie .expertise auf der
   Startseite) – Teamfoto/Heading/Cards liegen frei auf der Fläche,
   kein sichtbarer Rahmen mehr ums Foto. Heading jetzt dunkel (live:
   #000 = --color-accent-6), Cards bleiben weiß mit sichtbarem
   Kontrast zum Verlauf. */
.about-values {
  background-image: linear-gradient(180deg, var(--color-accent-1) 0%, var(--color-accent-4) 100%);
  padding: 64px 0 96px;
}

.about-values__image {
  display: block;
  width: 100%;
  aspect-ratio: 1260 / 528;
  object-fit: cover;
  border-radius: 50px;
  margin: 0 0 56px;
}

.about-values__heading {
  color: var(--color-accent-6);
  text-align: center;
  margin: 0 0 40px;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-value {
  background-color: var(--color-accent-5);
  border-radius: 34px;
  padding: 40px 30px 30px;
}

.about-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
  margin-bottom: 24px;
}

.about-value__icon svg {
  width: 28px;
  height: 28px;
}

.about-value h3 {
  font-size: 20px;
  margin: 0 0 12px;
}

.about-value p {
  margin: 0;
}

@media (max-width: 1024px) {
  .about-values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .about-values {
    padding: 48px 0 64px;
  }

  .about-values__grid {
    grid-template-columns: 1fr;
  }
}

/* --- About-Story (Full-Service Multimedia Partner) --- */
.about-story {
  padding: 64px 0 96px;
}

.about-story__grid {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

.about-story__heading {
  flex: 1 1 0;
}

.about-story .kicker {
  font-size: 16px;
  letter-spacing: -1px;
  color: var(--color-accent-3);
}

.about-story__heading h2 {
  margin: 0;
}

.about-story__text {
  flex: 1 1 0;
  max-width: 530px;
}

.about-story__text p {
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 767px) {
  .about-story__grid {
    flex-direction: column;
    gap: 24px;
  }

  .about-story__heading,
  .about-story__text {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   19. Equipment-Seite
   Live-Messung (P2.2, 1440px): eigener, gekapselter Namensraum
   .equipment-* – keine Beeinflussung anderer Seiten. Reihenfolge:
   Hero (Video+3er-Bildcollage) → Intro-Zweispalter → Bildergalerie
   (11 Bilder, Masonry via CSS-Columns) → freigegebener Footer.
   --------------------------------------------------------- */

/* --- Equipment-Hero ---
   Gleiches Muster wie .about-hero (Video-Hintergrund, Radius
   0 0 40px 40px, Fab41-CI-Überlagerung), rechts jedoch eine
   gestaffelte 3er-Bildcollage statt eines einzelnen Bilds. */
/* P2.2d: Live-Messung (1440px) zeigt nur 50px Abstand zwischen
   Header-Unterkante und Hero-Oberkante (nicht 80px wie beim About-
   Hero-Muster) – margin-top entsprechend korrigiert. Radius zusätzlich
   auf den äußeren Hero-Container übertragen (live: sowohl äußerer
   Container als auch innere Video-Ebene sind gerundet), damit die
   blaue Fallback-Fläche an den unteren Ecken nicht eckig durch die
   gerundete Video-Ebene durchscheinen kann. */
.equipment-hero {
  position: relative;
  overflow: visible;
  color: var(--color-accent-5);
  margin-top: 50px;
  padding: 50px 0;
  background-color: var(--color-accent-1);
  border-radius: 0 0 40px 40px;
}

/* P1.12: siehe .hero oben – der 50px-Abstand wird ab 1025px durch
   .page-top-band ersetzt, Hero-Position bleibt unverändert. Mobil
   bleibt der bestehende margin-top:50px (bislang keine eigene Mobile-
   Regel vorhanden) unverändert bestehen. */
@media (min-width: 1025px) {
  .equipment-hero {
    margin-top: 0;
  }
}

.equipment-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  z-index: 0;
}

.equipment-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipment-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-custom-3) 100%);
  opacity: 0.75;
}

.equipment-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 40px;
}

.equipment-hero__text {
  flex: 1 1 0;
}

.equipment-hero__text h1 {
  color: var(--color-accent-5);
}

.equipment-hero__text p {
  color: var(--color-accent-5);
  max-width: 500px;
  margin: 0 0 32px;
}

/* Live-Messung (P2.2a, 1440px): 3 Bilder je 219×250px (Seitenverhältnis
   219/250, nicht 3/4), Breite ≈33,5% der Spalte, gestaffelt bei
   top 0% / 28% / 80% – drittes Bild ragt bewusst wie beim Hero-Collage-
   Muster der Startseite/Über-Uns-Seite über die Hero-Unterkante hinaus.
   Rahmenhöhe an die live gemessene Content-Höhe (≈559px) angeglichen,
   wodurch auch die Gesamt-Hero-Höhe näher an Live (≈659px) liegt. */
.equipment-hero__collage {
  position: relative;
  flex: 1 1 0;
  height: 560px;
}

.equipment-hero__collage-img {
  position: absolute;
  aspect-ratio: 219 / 250;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 0 14px 16px rgba(35, 22, 119, 0.36);
}

/* P2.2b: nur die horizontalen Offsets (left) um +20 Prozentpunkte nach
   rechts verschoben, damit die Gruppe den live gemessenen Abstand zum
   Textblock (330px bei 1440px) erreicht – Frame, Bildbreite/-höhe,
   vertikale Staffelung (top), Radius und Schatten bleiben unverändert. */
.equipment-hero__collage-img--1 {
  top: 0;
  left: 49%;
  width: 34%;
  z-index: 1;
}

.equipment-hero__collage-img--2 {
  top: 28%;
  left: 69%;
  width: 34%;
  z-index: 2;
}

.equipment-hero__collage-img--3 {
  top: 80%;
  left: 51%;
  width: 34%;
  z-index: 3;
  box-shadow: 0 14px 16px rgba(70, 63, 116, 0.1);
}

@media (max-width: 767px) {
  .equipment-hero__inner {
    flex-direction: column;
  }

  .equipment-hero__media {
    display: none;
  }

  .equipment-hero {
    background-color: var(--color-accent-1);
  }

  /* Live stapelt die Collage bei Mobile OHNE Überhang (Bild 3 bleibt
     vollständig innerhalb der Fläche) – eigene, kompaktere Positionen
     statt der Desktop-Werte, damit kein Overlap mit dem Intro-Text
     entsteht. */
  .equipment-hero__collage {
    flex: none;
    width: 100%;
    height: 460px;
  }

  .equipment-hero__collage-img--1 {
    top: 0;
    left: 8%;
    width: 40%;
  }

  .equipment-hero__collage-img--2 {
    top: 25%;
    left: 32%;
    width: 40%;
  }

  .equipment-hero__collage-img--3 {
    top: 60%;
    left: 12%;
    width: 40%;
  }
}

/* --- Equipment-Intro (Zweispalter wie .about-story) --- */
/* P2.2e: Referenzpunkt korrigiert – nicht mehr die Hero-Unterkante,
   sondern die Unterkante des untersten (dritten) Collagebilds, das
   die Hero-Box bewusst überragt (Live-Muster wie bei Startseite/
   Über-Uns). Live-Messung (1440px, scrollstabil, transform:none):
   Abstand Collage-Unterkante -> Intro-H2 / rechter Intro-Text = 80px
   (beide Spalten oben bündig). Lokal überragt das dritte Collagebild
   die Hero-Unterkante konstant um 69,3px (frozen, s. .equipment-hero__
   collage-img--3), also: padding-top = 80 + 69,3 ≈ 149px, damit auch
   lokal ein 80px-Abstand zwischen Collage-Unterkante und Intro-Inhalt
   entsteht (vorher: 64px -> ca. 5px Overlap, s. P2.2d-Historie). */
.equipment-intro {
  padding: 149px 0 96px;
}

/* Live-Messung (P2.2a, 1440px): beide Spalten ähnlich schmal (~500px,
   nicht die volle Flex-Breite) mit großzügigem Zwischenraum (~250px),
   statt einer sehr breiten Heading-Spalte mit knappem Gap. */
.equipment-intro__grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.equipment-intro__heading {
  flex: 1 1 0;
  max-width: 500px;
}

.equipment-intro__heading h2 {
  margin: 0;
}

.equipment-intro__text {
  flex: 1 1 0;
  max-width: 500px;
}

.equipment-intro__text p {
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 767px) {
  /* Mobile hat KEINEN Collage-Überhang über die Hero-Unterkante hinaus
     (drittes Bild bleibt vollständig innerhalb der Box, s. Hero-Mobile-
     Regeln oben) – der auf den Desktop-Überhang bezogene Wert von
     .equipment-intro (149px) ist hier nicht anwendbar und würde die
     Sektion unnötig aufblähen. Restauriert den bereits überlappungs-
     freien Vorher-Wert (64px), unverändert seit P2.2d. */
  .equipment-intro {
    padding-top: 64px;
  }

  .equipment-intro__grid {
    flex-direction: column;
    gap: 24px;
  }

  .equipment-intro__text {
    max-width: 100%;
  }
}

/* --- Equipment-Galerie ---
   Live-Messung: 11 Bilder, Masonry-Layout (3 Spalten Desktop,
   2 Tablet, 1 Mobile), 10px Gap, volle Sectionbreite. Als
   bibliotheksfreies CSS-Columns-Masonry nachgebaut (kein JS,
   keine Lightbox-Bibliothek). */
.equipment-gallery {
  padding: 0 0 96px;
}

.equipment-gallery__grid {
  column-count: 3;
  column-gap: 10px;
  padding: 0 10px;
}

/* P2.2f: .equipment-gallery__img bleibt strukturell unverändert
   (Bilddateien/Reihenfolge/Zuschnitt/Masonry-Grundstruktur
   eingefroren) – margin-bottom und break-inside sind lediglich vom
   Bild auf den neuen, technisch notwendigen Link-Wrapper
   .equipment-gallery__item verschoben, da dieser jetzt das direkte
   Masonry-Kind ist (kein visueller Unterschied). */
.equipment-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Live-Messung: Hover zeigt ausschließlich ein 50%-schwarzes
   Overlay (kein Zoom/Scale, kein Icon, kein Schatten-/Radius-
   wechsel), Transition 0.8s ease auf background-color. Wrapper
   erhält denselben Radius wie das Bild + overflow:hidden, damit
   das Overlay sauber geclippt wird und keine Nachbarkachel springt. */
.equipment-gallery__item {
  position: relative;
  display: block;
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  break-inside: avoid;
  cursor: pointer;
}

.equipment-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.8s ease;
}

.equipment-gallery__item:hover::after,
.equipment-gallery__item:focus-visible::after {
  background-color: rgba(0, 0, 0, 0.5);
}

/* P2.2g: einmalige Scroll-Reveal-Animation, komplett unabhängig vom
   Hover-Overlay oben (kein :hover/:focus im Selektor). Live-Messung:
   die GESAMTE Galerie animiert als eine Gruppe (nicht pro Bild
   einzeln – alle 11 Kacheln wechseln gleichzeitig), Startzustand
   transform:scale(0.5) + opacity:0 (Live: filter:opacity(0), hier
   die gleichwertige Standard-opacity-Eigenschaft), Endzustand
   transform:none + opacity:1, Transition 0.8s ease, kein Delay/kein
   Stagger. Trigger per IntersectionObserver auf dem gemeinsamen
   Grid-Container mit distanzbasiertem rootMargin (nicht threshold-
   Prozentsatz der Containerhöhe, da diese bei wenigen Spalten/
   Tablet-Mobile die Viewporthöhe stark übersteigt und ein reiner
   Sichtbarkeits-Threshold dort rechnerisch nie erreichbar wäre –
   s. main.js für Details/exakte Werte). Sitzt bewusst auf
   .equipment-gallery__img (nicht auf .equipment-gallery__item),
   damit kein transform mit dem Hover-Overlay (der nur die
   ::after-background-color ändert) kollidiert.
   Nur unter html.js aktiv (s. Kommentar in equipment.html) – ohne
   JavaScript bleiben die Bilder reduziert normal sichtbar. */
html.js .equipment-gallery__item .equipment-gallery__img {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

html.js .equipment-gallery__item.is-revealed .equipment-gallery__img {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .equipment-gallery__item .equipment-gallery__img {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .equipment-gallery__grid {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  .equipment-gallery__grid {
    column-count: 1;
  }
}

/* --- Equipment-Lightbox (eigene Vanilla-JS-Umsetzung, keine
   Elementor-/Fremd-Library) ---
   Live-Messung: dunkles Overlay rgba(0,0,0,0.8), Bild object-fit:
   contain mit 2px Radius + weichem Glow-Schatten, Zähler oben links,
   Dateiname/Caption unten, Close oben rechts, Pfeile links/rechts
   (zyklisch). Farbe der Bedienelemente rgba(237,237,237,0.9). Klick
   auf den Hintergrund schließt NICHT auf Live – hier bewusst als
   zusätzliche, saubere Bedienbarkeit ergänzt (s. P2.2f-Bericht). */
.equipment-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.equipment-lightbox[hidden] {
  display: none;
}

.equipment-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.equipment-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.equipment-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), 0 0 8px -5px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.equipment-lightbox__caption {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(237, 237, 237, 0.9);
  text-align: center;
}

.equipment-lightbox__close,
.equipment-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  color: rgba(237, 237, 237, 0.9);
  cursor: pointer;
}

.equipment-lightbox__close {
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
}

.equipment-lightbox__nav {
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
}

.equipment-lightbox__nav:hover,
.equipment-lightbox__nav:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}

.equipment-lightbox__nav--prev {
  left: 20px;
}

.equipment-lightbox__nav--next {
  right: 20px;
}

.equipment-lightbox__counter {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(237, 237, 237, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .equipment-gallery__item::after,
  .equipment-lightbox__nav {
    transition: none;
  }
}

@media (max-width: 767px) {
  .equipment-lightbox__content {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
  }

  .equipment-lightbox__img {
    max-height: calc(100vh - 160px);
  }

  .equipment-lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .equipment-lightbox__nav--prev {
    left: 8px;
  }

  .equipment-lightbox__nav--next {
    right: 8px;
  }

  .equipment-lightbox__close {
    top: 8px;
    right: 8px;
  }

  .equipment-lightbox__counter {
    top: 12px;
    left: 12px;
  }
}

/* ---------------------------------------------------------
   20. Branding & Design-Seite
   Live-Messung (P2.3, 1440px): eigener, gekapselter Namensraum
   (.branding-*). Live-URL: /leistungen/branding-und-design/.
   Hero nutzt EIN eigenes Layout (kein Video, kein Collage-Muster
   wie Hero/Equipment/About) – Verlauf Accent-1 -> transparent
   (0-Radius), einzelnes Bild rechts (50px-Radius). Nachfolgende
   Sections: Kicker/H2/Text+Checkliste, zentrierte Zwischen-
   überschrift, zwei Bild+Text-Wechsel (Radius 40px), 3 Feature-
   Karten auf Verlaufshintergrund (Accent-4 -> Weiß), 3 Kennzahlen-
   Karten (Radius 50px, Accent-7-Border), FAQ als natives
   <details>/<summary> (kein JS nötig). Icons als eigene Inline-SVGs
   (kein WordPress-/Theme-Iconfont). */
.branding-hero {
  position: relative;
  margin-top: 50px;
  padding: 80px 0;
  background-image: linear-gradient(var(--color-accent-1) 0%, rgba(83, 109, 254, 0) 100%);
}

/* P1.13: Live-Messung (1440px) – bei Leistungs-Unterseiten beginnt der
   farbige Hero-Hintergrund auf Live direkt hinter dem weißen Header
   (Gap = 0px, kein Top-Band wie auf den Hauptseiten). Der bisherige
   margin-top:50px (historischer Spacer aus P2.3, ursprünglich analog
   zu den Hauptseiten-Heros übernommen) erzeugte hier fälschlich eine
   sichtbare weiße Lücke. Gemeinsame, wiederverwendbare Klasse für alle
   künftigen Leistungs-Unterseiten-Heros – nur ab 1025px wirksam, da
   Live mobil einen abweichenden Abstand (~60px) zeigt und das
   bestehende, unveränderte lokale Mobile-Verhalten (margin-top:50px
   aus der Basis-Regel oben) hier bewusst nicht angetastet wird. */
@media (min-width: 1025px) {
  .service-hero {
    margin-top: 0;
  }
}

.branding-hero__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.branding-hero__text {
  flex: 1 1 0;
}

/* P2.3a: Live-Messung (1440px) – H1 nutzt letter-spacing -1px
   (wie das globale Site-Hero-H1-Muster), bislang lokal auf dieser
   Seite nicht gesetzt gewesen. */
.branding-hero__text h1 {
  letter-spacing: -1px;
}

.branding-hero__text p {
  max-width: 440px;
  margin: 0 0 32px;
}

.branding-hero__media {
  flex: 0 0 630px;
  max-width: 630px;
}

.branding-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 470;
  object-fit: cover;
  border-radius: 50px;
}

@media (max-width: 1024px) {
  .branding-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .branding-hero__media {
    flex: none;
    max-width: 100%;
  }

  .branding-hero__text p {
    max-width: 100%;
  }
}

/* --- Warum-Section (Text + Checkliste) --- */
/* P2.3a: Live-Messung (1440px) – Abstand Hero-Unterkante bis zum
   ersten Inhalt (H2) liegt bei ca. 70px, nicht 96px+96px. Padding
   entsprechend reduziert. */
.branding-why {
  padding: 72px 0;
}

.branding-why h2 {
  max-width: 543px;
  letter-spacing: -2px;
}

.branding-why__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.branding-why__text {
  flex: 1 1 0;
  max-width: 563px;
}

.branding-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* P2.3c: Live-Messung (1440px) – die Checkliste ist kein gestreckter
   Flex-Block, sondern eine feste Breite (441px, live gemessen), die über
   justify-content:space-between rechtsbündig an der Container-Kante
   sitzt und innerhalb der Zeile vertikal zentriert ist (align-self
   überschreibt das Stretch der Grid-Zeile). Nur ab 1025px wirksam,
   damit die gestapelte Mobile-Ansicht (volle Breite) unverändert bleibt. */
@media (min-width: 1025px) {
  .branding-checklist {
    flex: 0 1 auto;
    width: 441px;
    align-self: center;
  }
}

.branding-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
}

.branding-checklist__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-accent-1);
}

.branding-checklist__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .branding-why__grid {
    flex-direction: column;
    gap: 32px;
  }

  .branding-why__text,
  .branding-checklist {
    max-width: 100%;
  }
}

/* --- Zentrierte Zwischenüberschrift --- */
/* P2.3a: Live-Messung (1440px) – Gesamtabstand von der Warum-Section
   bis zu dieser Überschrift liegt bei ca. 110px, Padding entsprechend
   reduziert (Warum-padding-bottom 72px + hier 40px ≈ 112px). */
.branding-split-intro {
  padding: 40px 0 0;
  text-align: center;
}

/* Live-Messung: H2-Box ca. 845px breit (kein fester max-width-Wert
   im Live-DOM auffindbar, aber empirisch reproduzierbarer Umbruch
   "Branding trifft auf digitale" / "Performance" bei dieser Breite +
   letter-spacing -2px), zentriert. */
.branding-split-intro h2 {
  max-width: 845px;
  margin: 0 auto;
  letter-spacing: -2px;
}

/* --- Bild+Text-Wechsel (2x: Bild links / Bild rechts) --- */
.branding-split {
  padding: 48px 0;
}

/* P2.3a: Live-Messung (1440px) – Gap zwischen Bild und Textspalte
   liegt bei ca. 90-97px (nicht 60px), Textspalte ca. 490-520px. */
.branding-split__grid {
  display: flex;
  align-items: center;
  gap: 90px;
}

.branding-split__img {
  flex: 0 0 594px;
  width: 594px;
  height: auto;
  aspect-ratio: 594 / 371;
  object-fit: cover;
  border-radius: 40px;
}

.branding-split__text {
  flex: 1 1 0;
  max-width: 500px;
}

.branding-split__text h3 {
  letter-spacing: -2px;
}

@media (max-width: 1024px) {
  .branding-split__grid {
    flex-direction: column;
    gap: 32px;
  }

  .branding-split--image-right .branding-split__grid {
    flex-direction: column;
  }

  .branding-split__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .branding-split__text {
    max-width: 100%;
  }
}

/* --- Feature-Karten (3 Spalten, Verlaufshintergrund) --- */
.branding-features {
  padding: 96px 0;
  background-image: linear-gradient(var(--color-accent-4) 0%, var(--color-accent-5) 100%);
}

/* P2.3a: Live-Messung (1440px) – Umbruch "Was unser Branding &
   Design" / "so effektiv macht" entsteht bei dieser Breite NUR in
   Kombination mit letter-spacing -2px (fehlte bislang, s. Bericht –
   war die eigentliche Ursache des falschen Umbruchs, nicht die
   Breite selbst). */
.branding-features h2 {
  text-align: center;
  max-width: 756px;
  margin: 0 auto 64px;
  letter-spacing: -2px;
}

.branding-features__grid {
  display: flex;
  gap: 20px;
}

.branding-feature {
  flex: 1 1 0;
  background-color: var(--color-accent-5);
  border-radius: 34px;
  padding: 40px 50px 30px 30px;
}

.branding-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.branding-feature__icon svg {
  width: 28px;
  height: 28px;
}

.branding-feature h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.branding-feature p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .branding-features__grid {
    flex-direction: column;
  }
}

/* --- Kennzahlen-Beweis-Section --- */
.branding-proof {
  padding: 64px 0 96px;
}

.branding-proof__kicker,
.branding-faq__heading .kicker {
  text-align: center;
  margin: 0 auto 12px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-accent-3);
}

/* P2.3a: Live-Messung – Umbruch "Warum starkes Branding messbare" /
   "Ergebnisse liefert" entsteht mit letter-spacing -2px (fehlte
   bislang) bei ca. 896px Breite. */
.branding-proof h2 {
  text-align: center;
  max-width: 896px;
  margin: 0 auto 48px;
  letter-spacing: -2px;
}

.branding-stats {
  display: flex;
  gap: 24px;
}

.branding-stat {
  flex: 1 1 0;
  border: 1px solid var(--color-accent-7);
  border-radius: 50px;
  padding: 32px;
}

.branding-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.branding-stat__number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
}

.branding-stat__icon {
  color: var(--color-accent-1);
}

.branding-stat__icon svg {
  width: 32px;
  height: 32px;
}

.branding-stat p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .branding-stats {
    flex-direction: column;
  }
}

/* --- FAQ (natives <details>/<summary>, ohne JS) --- */
.branding-faq {
  padding: 96px 0;
}

.branding-faq__heading {
  text-align: center;
  margin: 0 auto 48px;
}

/* P2.3a: Live-Messung – "Fragen rund um Branding & Design" steht auf
   Live einzeilig bei ca. 896px Breite + letter-spacing -2px (fehlte
   bislang, war Ursache des falschen Umbruchs). */
.branding-faq__heading h2 {
  max-width: 896px;
  margin: 0 auto 16px;
  letter-spacing: -2px;
}

/* Live-Messung: Intro-Text ca. 896px breit (nicht 600px), dadurch auf
   Live praktisch einzeilig statt lokal zweizeilig. */
.branding-faq__intro {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  max-width: 896px;
  margin: 0 auto;
}

/* Live-Messung: FAQ-Accordion ca. 980px breit (nicht 900px). */
.branding-accordion {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--color-accent-7);
}

.branding-accordion__item {
  border-bottom: 1px solid var(--color-accent-7);
}

.branding-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-3);
  cursor: pointer;
  list-style: none;
}

.branding-accordion__item summary::-webkit-details-marker {
  display: none;
}

.branding-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.branding-accordion__toggle::before,
.branding-accordion__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--color-accent-1);
}

.branding-accordion__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.branding-accordion__toggle::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

.branding-accordion__item[open] .branding-accordion__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.branding-accordion__item p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
  padding: 0 0 24px;
}

@media (max-width: 767px) {
  .branding-hero {
    padding: 48px 0;
  }

  .branding-why,
  .branding-features,
  .branding-faq {
    padding: 64px 0;
  }

  .branding-split-intro {
    padding: 64px 0 0;
  }

  .branding-feature {
    padding: 32px 24px;
  }

  .branding-stat {
    padding: 24px;
  }

  .branding-accordion__item summary {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   21. Planning & Strategy-Seite
   Live-Messung (P2.4, 1440px): eigener, gekapselter Namensraum
   (.planning-*). Live-URL: /leistungen/planning-strategy/.
   Selbe Elementor-Vorlage wie Branding & Design (identische Spalten-
   breiten, Bildradien, Kickertexte, Icon-Slots), aber mit eigenen,
   direkt gemessenen Live-Werten – insbesondere abweichende
   Section-Abstände (CSS-margin-collapse-basiert, nicht Padding-
   basiert wie bei .branding-*) und ein asymmetrisches Hero-Padding
   (140px/20px statt 80px/80px). Icons als eigene Inline-SVGs (kein
   WordPress-/Theme-Iconfont); die drei Feature-Icons entsprechen
   denselben Icon-Slots wie bei Branding & Design (Suche/Idee/Ziel)
   und wurden von dort übernommen. */
.planning-hero {
  position: relative;
  margin-top: 60px;
  padding: 140px 0 20px;
  background-image: linear-gradient(var(--color-accent-1) 0%, rgba(83, 109, 254, 0) 100%);
}

/* Eigener Desktop-Override statt sich auf die Kaskadenreihenfolge der
   weiter oben stehenden, generischen .service-hero-Regel zu verlassen
   (die an dieser Stelle im Dokument sonst von der unconditional
   .planning-hero-Basisregel überschrieben würde). */
@media (min-width: 1025px) {
  .planning-hero {
    margin-top: 0;
  }
}

.planning-hero__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.planning-hero__text {
  flex: 1 1 0;
}

.planning-hero__text h1 {
  letter-spacing: -1px;
}

.planning-hero__text p {
  max-width: 440px;
  margin: 0 0 32px;
}

.planning-hero__media {
  flex: 0 0 630px;
  max-width: 630px;
}

.planning-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 470;
  object-fit: cover;
  border-radius: 50px;
}

@media (max-width: 1024px) {
  .planning-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .planning-hero__media {
    flex: none;
    max-width: 100%;
  }

  .planning-hero__text p {
    max-width: 100%;
  }
}

/* --- Warum-Section (Text + Checkliste) --- */
.planning-why {
  margin-top: 50px;
  margin-bottom: 100px;
}

.planning-why h2 {
  max-width: 543px;
  letter-spacing: -2px;
}

.planning-why__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.planning-why__text {
  flex: 1 1 0;
  max-width: 563px;
}

.planning-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1025px) {
  .planning-checklist {
    flex: 0 1 auto;
    width: 441px;
    align-self: center;
  }
}

.planning-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
}

.planning-checklist__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-accent-1);
}

.planning-checklist__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .planning-why__grid {
    flex-direction: column;
    gap: 32px;
  }

  .planning-why__text,
  .planning-checklist {
    max-width: 100%;
  }
}

/* --- Zentrierte Zwischenüberschrift --- */
.planning-split-intro {
  margin: 0;
  text-align: center;
}

.planning-split-intro h2 {
  max-width: 845px;
  margin: 0 auto;
  letter-spacing: -2px;
}

/* --- Bild+Text-Wechsel (2x: Bild links / Bild rechts) --- */
.planning-split {
  margin: 80px 0;
}

.planning-split__grid {
  display: flex;
  align-items: center;
  gap: 90px;
}

.planning-split__img {
  flex: 0 0 594px;
  width: 594px;
  height: auto;
  aspect-ratio: 594 / 371;
  object-fit: cover;
  border-radius: 40px;
}

.planning-split__text {
  flex: 1 1 0;
  max-width: 512px;
}

.planning-split__text h3 {
  letter-spacing: -2px;
}

@media (max-width: 1024px) {
  .planning-split__grid {
    flex-direction: column;
    gap: 32px;
  }

  .planning-split--image-right .planning-split__grid {
    flex-direction: column;
  }

  .planning-split__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .planning-split__text {
    max-width: 100%;
  }
}

/* --- Feature-Karten (3 Spalten, Verlaufshintergrund) --- */
.planning-features {
  margin-top: 180px;
  margin-bottom: 80px;
  padding: 70px 0 96px;
  background-image: linear-gradient(var(--color-accent-4) 0%, var(--color-accent-5) 100%);
}

.planning-features h2 {
  text-align: center;
  max-width: 756px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.planning-features__grid {
  display: flex;
  gap: 20px;
}

.planning-feature {
  flex: 1 1 0;
  background-color: var(--color-accent-5);
  border-radius: 34px;
  padding: 40px 50px 30px 30px;
}

.planning-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.planning-feature__icon svg {
  width: 28px;
  height: 28px;
}

.planning-feature h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.planning-feature p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .planning-features__grid {
    flex-direction: column;
  }
}

/* --- Kennzahlen-Beweis-Section --- */
.planning-proof {
  margin-top: 130px;
  margin-bottom: 0;
  padding: 64px 0 96px;
}

.planning-proof__kicker {
  text-align: center;
  margin: 0 auto 12px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-accent-3);
}

.planning-proof h2 {
  text-align: center;
  max-width: 896px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.planning-stats {
  display: flex;
  gap: 24px;
}

.planning-stat {
  flex: 1 1 0;
  border: 1px solid var(--color-accent-7);
  border-radius: 50px;
  padding: 32px;
}

.planning-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.planning-stat__number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
}

.planning-stat__icon {
  color: var(--color-accent-1);
}

.planning-stat__icon svg {
  width: 32px;
  height: 32px;
}

.planning-stat p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .planning-stats {
    flex-direction: column;
  }
}

/* --- FAQ (natives <details>/<summary>, ohne JS) --- */
.planning-faq {
  margin-top: 130px;
  margin-bottom: 60px;
  padding: 0 0 96px;
}

.planning-faq__heading {
  text-align: center;
  margin: 0 auto 48px;
}

.planning-faq__heading h2 {
  max-width: 896px;
  margin: 0 auto 16px;
  letter-spacing: -2px;
}

.planning-faq__intro {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  max-width: 896px;
  margin: 0 auto;
}

.planning-accordion {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--color-accent-7);
}

.planning-accordion__item {
  border-bottom: 1px solid var(--color-accent-7);
}

.planning-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-3);
  cursor: pointer;
  list-style: none;
}

.planning-accordion__item summary::-webkit-details-marker {
  display: none;
}

.planning-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.planning-accordion__toggle::before,
.planning-accordion__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--color-accent-1);
}

.planning-accordion__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.planning-accordion__toggle::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

.planning-accordion__item[open] .planning-accordion__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.planning-accordion__item p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
  padding: 0 0 24px;
}

@media (max-width: 767px) {
  .planning-hero {
    padding: 48px 0;
  }

  .planning-why,
  .planning-features,
  .planning-faq {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .planning-split-intro {
    margin: 32px 0;
  }

  .planning-split {
    margin: 32px 0;
  }

  .planning-feature {
    padding: 32px 24px;
  }

  .planning-stat {
    padding: 24px;
  }

  .planning-accordion__item summary {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   22. Video Production & Actors-Seite
   Live-Messung (P2.5, 1440px): eigener, gekapselter Namensraum
   (.video-production-*). Live-URL: /leistungen/video-production-actors/.
   Selbe Elementor-Vorlage wie Planning & Strategy (identische
   Spaltenbreiten, Section-Abstände, Kickertexte, Icon-Slots) – direkt
   Live-verifiziert, nicht blind übernommen. Einziger struktureller
   Unterschied: Hero-Medium ist ein Hintergrundvideo (autoplay, muted,
   loop) statt eines statischen Bildes, thematisch passend zur
   Videoproduktion. Live-Fehler (FAQ-Überschrift lautete fälschlich
   "Fragen rund um Planning & Strategy") in P3.1 korrigiert. */
.video-production-hero {
  position: relative;
  margin-top: 60px;
  padding: 140px 0 20px;
  background-image: linear-gradient(var(--color-accent-1) 0%, rgba(83, 109, 254, 0) 100%);
}

@media (min-width: 1025px) {
  .video-production-hero {
    margin-top: 0;
  }
}

.video-production-hero__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* P2.5: Live-Messung – die Textspalte ist auf Live 630px breit
   (identisch zur Medienspalte, Live-Container erreicht die vollen
   1280px). Lokal reduziert das bekannte, bereits aus P2.3a
   akzeptierte 24px-.container-Padding die verfügbare Breite auf
   1232px – bei Branding/Planning fiel das nicht auf (kürzere H1),
   hier zerstört es den Umbruch "Video Production &" / "Actors"
   (612,53px Zeilenbreite nötig). Deshalb hier abweichend von den
   anderen Service-Heros: Textspalte fix auf 630px, Medienspalte
   übernimmt stattdessen den Restplatz (582px statt 630px) – der
   Video-Größenunterschied ist optisch unauffällig, der korrekte
   Textumbruch dagegen pflichtgemäß zu erhalten. */
.video-production-hero__text {
  flex: 0 0 630px;
  max-width: 630px;
}

.video-production-hero__text h1 {
  letter-spacing: -1px;
}

.video-production-hero__text p {
  max-width: 440px;
  margin: 0 0 32px;
}

.video-production-hero__media {
  flex: 1 1 0;
}

/* Live-Messung: Video-Spalte 630 x 437,59px (Verhältnis ≈ 1,44:1),
   dadurch schmaler/breiter als das 630x470-Seitenverhältnis der
   Bild-Heros bei Branding/Planning. */
.video-production-hero__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 437.59;
  object-fit: cover;
  border-radius: 50px;
}

@media (max-width: 1024px) {
  .video-production-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .video-production-hero__media {
    flex: none;
    max-width: 100%;
  }

  .video-production-hero__text p {
    max-width: 100%;
  }
}

/* --- Warum-Section (Text + Checkliste) --- */
.video-production-why {
  margin-top: 50px;
  margin-bottom: 100px;
}

.video-production-why h2 {
  max-width: 543px;
  letter-spacing: -2px;
}

.video-production-why__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.video-production-why__text {
  flex: 1 1 0;
  max-width: 563px;
}

.video-production-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1025px) {
  .video-production-checklist {
    flex: 0 1 auto;
    width: 441px;
    align-self: center;
  }
}

.video-production-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
}

.video-production-checklist__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-accent-1);
}

.video-production-checklist__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .video-production-why__grid {
    flex-direction: column;
    gap: 32px;
  }

  .video-production-why__text,
  .video-production-checklist {
    max-width: 100%;
  }
}

/* --- Zentrierte Zwischenüberschrift --- */
.video-production-split-intro {
  margin: 0;
  text-align: center;
}

.video-production-split-intro h2 {
  max-width: 845px;
  margin: 0 auto;
  letter-spacing: -2px;
}

/* --- Bild+Text-Wechsel (2x: Bild links / Bild rechts) --- */
.video-production-split {
  margin: 80px 0;
}

.video-production-split__grid {
  display: flex;
  align-items: center;
  gap: 90px;
}

.video-production-split__img {
  flex: 0 0 594px;
  width: 594px;
  height: auto;
  aspect-ratio: 594 / 371;
  object-fit: cover;
  border-radius: 40px;
}

.video-production-split__text {
  flex: 1 1 0;
  max-width: 512px;
}

.video-production-split__text h3 {
  letter-spacing: -2px;
}

@media (max-width: 1024px) {
  .video-production-split__grid {
    flex-direction: column;
    gap: 32px;
  }

  .video-production-split--image-right .video-production-split__grid {
    flex-direction: column;
  }

  .video-production-split__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .video-production-split__text {
    max-width: 100%;
  }
}

/* --- Feature-Karten (3 Spalten, Verlaufshintergrund) --- */
.video-production-features {
  margin-top: 180px;
  margin-bottom: 80px;
  padding: 70px 0 96px;
  background-image: linear-gradient(var(--color-accent-4) 0%, var(--color-accent-5) 100%);
}

.video-production-features h2 {
  text-align: center;
  max-width: 756px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.video-production-features__grid {
  display: flex;
  gap: 20px;
}

.video-production-feature {
  flex: 1 1 0;
  background-color: var(--color-accent-5);
  border-radius: 34px;
  padding: 40px 50px 30px 30px;
}

.video-production-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.video-production-feature__icon svg {
  width: 28px;
  height: 28px;
}

.video-production-feature h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.video-production-feature p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .video-production-features__grid {
    flex-direction: column;
  }
}

/* --- Kennzahlen-Beweis-Section --- */
.video-production-proof {
  margin-top: 130px;
  margin-bottom: 0;
  padding: 64px 0 96px;
}

.video-production-proof__kicker {
  text-align: center;
  margin: 0 auto 12px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-accent-3);
}

.video-production-proof h2 {
  text-align: center;
  max-width: 896px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.video-production-stats {
  display: flex;
  gap: 24px;
}

.video-production-stat {
  flex: 1 1 0;
  border: 1px solid var(--color-accent-7);
  border-radius: 50px;
  padding: 32px;
}

.video-production-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.video-production-stat__number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
}

.video-production-stat__icon {
  color: var(--color-accent-1);
}

.video-production-stat__icon svg {
  width: 32px;
  height: 32px;
}

.video-production-stat p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .video-production-stats {
    flex-direction: column;
  }
}

/* --- FAQ (natives <details>/<summary>, ohne JS) --- */
.video-production-faq {
  margin-top: 130px;
  margin-bottom: 60px;
  padding: 0 0 96px;
}

.video-production-faq__heading {
  text-align: center;
  margin: 0 auto 48px;
}

.video-production-faq__heading h2 {
  max-width: 896px;
  margin: 0 auto 16px;
  letter-spacing: -2px;
}

.video-production-faq__intro {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  max-width: 896px;
  margin: 0 auto;
}

.video-production-accordion {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--color-accent-7);
}

.video-production-accordion__item {
  border-bottom: 1px solid var(--color-accent-7);
}

.video-production-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-3);
  cursor: pointer;
  list-style: none;
}

.video-production-accordion__item summary::-webkit-details-marker {
  display: none;
}

.video-production-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.video-production-accordion__toggle::before,
.video-production-accordion__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--color-accent-1);
}

.video-production-accordion__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.video-production-accordion__toggle::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

.video-production-accordion__item[open] .video-production-accordion__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.video-production-accordion__item p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
  padding: 0 0 24px;
}

@media (max-width: 767px) {
  .video-production-hero {
    padding: 48px 0;
  }

  .video-production-why,
  .video-production-features,
  .video-production-faq {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .video-production-split-intro {
    margin: 32px 0;
  }

  .video-production-split {
    margin: 32px 0;
  }

  .video-production-feature {
    padding: 32px 24px;
  }

  .video-production-stat {
    padding: 24px;
  }

  .video-production-accordion__item summary {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   23. Production-Seite
   Live-Messung (P2.6, 1440px): eigener, gekapselter Namensraum
   (.production-*). Live-URL: /leistungen/production/. Selbe
   Elementor-Vorlage wie Planning & Strategy / Video Production &
   Actors (identische Spaltenbreiten, Section-Abstände, Kickertexte,
   Icon-Slots) – direkt Live-verifiziert. Hero-Medium ist wie bei
   Branding/Planning ein statisches Bild (kein Video); H1 "Production"
   ist einzeilig, daher keine Sonderbehandlung der Hero-Spaltenbreiten
   nötig (anders als bei Video Production & Actors). Live-Fehler 1:1
   übernommen: die FAQ-Überschrift lautet auch hier fälschlich "Fragen
   rund um Planning & Strategy" (derselbe Copy-Paste-Fehler wie bei
   Video Production & Actors, siehe Bericht). */
.production-hero {
  position: relative;
  margin-top: 60px;
  padding: 140px 0 20px;
  background-image: linear-gradient(var(--color-accent-1) 0%, rgba(83, 109, 254, 0) 100%);
}

@media (min-width: 1025px) {
  .production-hero {
    margin-top: 0;
  }
}

.production-hero__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.production-hero__text {
  flex: 1 1 0;
}

.production-hero__text h1 {
  letter-spacing: -1px;
}

.production-hero__text p {
  max-width: 440px;
  margin: 0 0 32px;
}

.production-hero__media {
  flex: 0 0 630px;
  max-width: 630px;
}

.production-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 470;
  object-fit: cover;
  border-radius: 50px;
}

@media (max-width: 1024px) {
  .production-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .production-hero__media {
    flex: none;
    max-width: 100%;
  }

  .production-hero__text p {
    max-width: 100%;
  }
}

/* --- Warum-Section (Text + Checkliste) --- */
.production-why {
  margin-top: 50px;
  margin-bottom: 100px;
}

.production-why h2 {
  max-width: 543px;
  letter-spacing: -2px;
}

.production-why__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.production-why__text {
  flex: 1 1 0;
  max-width: 563px;
}

.production-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1025px) {
  .production-checklist {
    flex: 0 1 auto;
    width: 441px;
    align-self: center;
  }
}

.production-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
}

.production-checklist__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-accent-1);
}

.production-checklist__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .production-why__grid {
    flex-direction: column;
    gap: 32px;
  }

  .production-why__text,
  .production-checklist {
    max-width: 100%;
  }
}

/* --- Zentrierte Zwischenüberschrift --- */
.production-split-intro {
  margin: 0;
  text-align: center;
}

.production-split-intro h2 {
  max-width: 845px;
  margin: 0 auto;
  letter-spacing: -2px;
}

/* --- Bild+Text-Wechsel (2x: Bild links / Bild rechts) --- */
.production-split {
  margin: 80px 0;
}

.production-split__grid {
  display: flex;
  align-items: center;
  gap: 90px;
}

.production-split__img {
  flex: 0 0 594px;
  width: 594px;
  height: auto;
  aspect-ratio: 594 / 371;
  object-fit: cover;
  border-radius: 40px;
}

.production-split__text {
  flex: 1 1 0;
  max-width: 512px;
}

.production-split__text h3 {
  letter-spacing: -2px;
}

@media (max-width: 1024px) {
  .production-split__grid {
    flex-direction: column;
    gap: 32px;
  }

  .production-split--image-right .production-split__grid {
    flex-direction: column;
  }

  .production-split__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .production-split__text {
    max-width: 100%;
  }
}

/* --- Feature-Karten (3 Spalten, Verlaufshintergrund) --- */
.production-features {
  margin-top: 180px;
  margin-bottom: 80px;
  padding: 70px 0 96px;
  background-image: linear-gradient(var(--color-accent-4) 0%, var(--color-accent-5) 100%);
}

.production-features h2 {
  text-align: center;
  max-width: 756px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.production-features__grid {
  display: flex;
  gap: 20px;
}

.production-feature {
  flex: 1 1 0;
  background-color: var(--color-accent-5);
  border-radius: 34px;
  padding: 40px 50px 30px 30px;
}

.production-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.production-feature__icon svg {
  width: 28px;
  height: 28px;
}

.production-feature h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.production-feature p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .production-features__grid {
    flex-direction: column;
  }
}

/* --- Kennzahlen-Beweis-Section --- */
.production-proof {
  margin-top: 130px;
  margin-bottom: 0;
  padding: 64px 0 96px;
}

.production-proof__kicker {
  text-align: center;
  margin: 0 auto 12px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-accent-3);
}

/* P2.6a: Live-Messung (1440px) – abweichend von den anderen
   Leistungsseiten (896px) ist die Kennzahlen-Überschrift hier auf
   Live 1024px breit (kein max-width im Live-DOM, sondern natürliche
   Spaltenbreite), wodurch "Warum hochwertige Print-Produktion" /
   "messbare Ergebnisse liefert" zweizeilig statt dreizeilig umbricht. */
.production-proof h2 {
  text-align: center;
  max-width: 1024px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.production-stats {
  display: flex;
  gap: 24px;
}

.production-stat {
  flex: 1 1 0;
  border: 1px solid var(--color-accent-7);
  border-radius: 50px;
  padding: 32px;
}

.production-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.production-stat__number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
}

.production-stat__icon {
  color: var(--color-accent-1);
}

.production-stat__icon svg {
  width: 32px;
  height: 32px;
}

.production-stat p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .production-stats {
    flex-direction: column;
  }
}

/* --- FAQ (natives <details>/<summary>, ohne JS) --- */
.production-faq {
  margin-top: 130px;
  margin-bottom: 60px;
  padding: 0 0 96px;
}

.production-faq__heading {
  text-align: center;
  margin: 0 auto 48px;
}

.production-faq__heading h2 {
  max-width: 896px;
  margin: 0 auto 16px;
  letter-spacing: -2px;
}

.production-faq__intro {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  max-width: 896px;
  margin: 0 auto;
}

.production-accordion {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--color-accent-7);
}

.production-accordion__item {
  border-bottom: 1px solid var(--color-accent-7);
}

.production-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-3);
  cursor: pointer;
  list-style: none;
}

.production-accordion__item summary::-webkit-details-marker {
  display: none;
}

.production-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.production-accordion__toggle::before,
.production-accordion__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--color-accent-1);
}

.production-accordion__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.production-accordion__toggle::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

.production-accordion__item[open] .production-accordion__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.production-accordion__item p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
  padding: 0 0 24px;
}

@media (max-width: 767px) {
  .production-hero {
    padding: 48px 0;
  }

  .production-why,
  .production-features,
  .production-faq {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .production-split-intro {
    margin: 32px 0;
  }

  .production-split {
    margin: 32px 0;
  }

  .production-feature {
    padding: 32px 24px;
  }

  .production-stat {
    padding: 24px;
  }

  .production-accordion__item summary {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   24. Live-Event & Streaming-Seite
   Live-Messung (P2.7, 1440px): eigener, gekapselter Namensraum
   (.live-event-*). Live-URL: /leistungen/live-event-streaming/.
   Selbe Elementor-Vorlage wie Planning & Strategy / Video Production
   & Actors / Production (identische Spaltenbreiten, Section-Abstände,
   Icon-Slots) – direkt Live-verifiziert. Kennzahlen-Heading hier
   896px breit (nicht 1024px wie bei Production – gemäß P2.6a-Lehre
   separat gemessen, nicht automatisch übernommen). Kein Testimonial-/
   Slider-Bereich auf Live vorhanden (per DOM-Suche bestätigt) – daher
   entfällt diese Section vollständig, kein Platzhalter nötig.
   Live-Fehler (FAQ-Überschrift lautete auch hier fälschlich
   "Fragen rund um Planning & Strategy", derselbe Copy-Paste-Fehler
   wie bei Video Production & Actors und Production) in P3.1
   korrigiert. */
.live-event-hero {
  position: relative;
  margin-top: 60px;
  padding: 140px 0 20px;
  background-image: linear-gradient(var(--color-accent-1) 0%, rgba(83, 109, 254, 0) 100%);
}

@media (min-width: 1025px) {
  .live-event-hero {
    margin-top: 0;
  }
}

.live-event-hero__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.live-event-hero__text {
  flex: 1 1 0;
}

.live-event-hero__text h1 {
  letter-spacing: -1px;
}

.live-event-hero__text p {
  max-width: 440px;
  margin: 0 0 32px;
}

.live-event-hero__media {
  flex: 0 0 630px;
  max-width: 630px;
}

.live-event-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 470;
  object-fit: cover;
  border-radius: 50px;
}

@media (max-width: 1024px) {
  .live-event-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .live-event-hero__media {
    flex: none;
    max-width: 100%;
  }

  .live-event-hero__text p {
    max-width: 100%;
  }
}

/* --- Warum-Section (Text + Checkliste) --- */
.live-event-why {
  margin-top: 50px;
  margin-bottom: 100px;
}

.live-event-why h2 {
  max-width: 543px;
  letter-spacing: -2px;
}

.live-event-why__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.live-event-why__text {
  flex: 1 1 0;
  max-width: 563px;
}

.live-event-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1025px) {
  .live-event-checklist {
    flex: 0 1 auto;
    width: 441px;
    align-self: center;
  }
}

.live-event-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
}

.live-event-checklist__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-accent-1);
}

.live-event-checklist__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .live-event-why__grid {
    flex-direction: column;
    gap: 32px;
  }

  .live-event-why__text,
  .live-event-checklist {
    max-width: 100%;
  }
}

/* --- Zentrierte Zwischenüberschrift --- */
.live-event-split-intro {
  margin: 0;
  text-align: center;
}

.live-event-split-intro h2 {
  max-width: 845px;
  margin: 0 auto;
  letter-spacing: -2px;
}

/* --- Bild+Text-Wechsel (2x: Bild links / Bild rechts) --- */
.live-event-split {
  margin: 80px 0;
}

.live-event-split__grid {
  display: flex;
  align-items: center;
  gap: 90px;
}

.live-event-split__img {
  flex: 0 0 594px;
  width: 594px;
  height: auto;
  aspect-ratio: 594 / 371;
  object-fit: cover;
  border-radius: 40px;
}

.live-event-split__text {
  flex: 1 1 0;
  max-width: 512px;
}

.live-event-split__text h3 {
  letter-spacing: -2px;
}

@media (max-width: 1024px) {
  .live-event-split__grid {
    flex-direction: column;
    gap: 32px;
  }

  .live-event-split--image-right .live-event-split__grid {
    flex-direction: column;
  }

  .live-event-split__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .live-event-split__text {
    max-width: 100%;
  }
}

/* --- Feature-Karten (3 Spalten, Verlaufshintergrund) --- */
.live-event-features {
  margin-top: 180px;
  margin-bottom: 80px;
  padding: 70px 0 96px;
  background-image: linear-gradient(var(--color-accent-4) 0%, var(--color-accent-5) 100%);
}

.live-event-features h2 {
  text-align: center;
  max-width: 756px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.live-event-features__grid {
  display: flex;
  gap: 20px;
}

.live-event-feature {
  flex: 1 1 0;
  background-color: var(--color-accent-5);
  border-radius: 34px;
  padding: 40px 50px 30px 30px;
}

.live-event-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.live-event-feature__icon svg {
  width: 28px;
  height: 28px;
}

.live-event-feature h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.live-event-feature p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .live-event-features__grid {
    flex-direction: column;
  }
}

/* --- Kennzahlen-Beweis-Section --- */
.live-event-proof {
  margin-top: 130px;
  margin-bottom: 0;
  padding: 64px 0 96px;
}

.live-event-proof__kicker {
  text-align: center;
  margin: 0 auto 12px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-accent-3);
}

.live-event-proof h2 {
  text-align: center;
  max-width: 896px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.live-event-stats {
  display: flex;
  gap: 24px;
}

.live-event-stat {
  flex: 1 1 0;
  border: 1px solid var(--color-accent-7);
  border-radius: 50px;
  padding: 32px;
}

.live-event-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.live-event-stat__number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
}

.live-event-stat__icon {
  color: var(--color-accent-1);
}

.live-event-stat__icon svg {
  width: 32px;
  height: 32px;
}

.live-event-stat p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .live-event-stats {
    flex-direction: column;
  }
}

/* --- FAQ (natives <details>/<summary>, ohne JS) --- */
.live-event-faq {
  margin-top: 130px;
  margin-bottom: 60px;
  padding: 0 0 96px;
}

.live-event-faq__heading {
  text-align: center;
  margin: 0 auto 48px;
}

.live-event-faq__heading h2 {
  max-width: 896px;
  margin: 0 auto 16px;
  letter-spacing: -2px;
}

.live-event-faq__intro {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  max-width: 896px;
  margin: 0 auto;
}

.live-event-accordion {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--color-accent-7);
}

.live-event-accordion__item {
  border-bottom: 1px solid var(--color-accent-7);
}

.live-event-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-3);
  cursor: pointer;
  list-style: none;
}

.live-event-accordion__item summary::-webkit-details-marker {
  display: none;
}

.live-event-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.live-event-accordion__toggle::before,
.live-event-accordion__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--color-accent-1);
}

.live-event-accordion__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.live-event-accordion__toggle::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

.live-event-accordion__item[open] .live-event-accordion__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.live-event-accordion__item p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
  padding: 0 0 24px;
}

@media (max-width: 767px) {
  .live-event-hero {
    padding: 48px 0;
  }

  .live-event-why,
  .live-event-features,
  .live-event-faq {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .live-event-split-intro {
    margin: 32px 0;
  }

  .live-event-split {
    margin: 32px 0;
  }

  .live-event-feature {
    padding: 32px 24px;
  }

  .live-event-stat {
    padding: 24px;
  }

  .live-event-accordion__item summary {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   25. Social Media & Marketing-Seite
   Live-Messung (P2.8, 1440px): eigener, gekapselter Namensraum
   (.social-media-*). Live-URL: /leistungen/social-media-marketing/.
   Selbe Elementor-Vorlage wie die übrigen Leistungs-Unterseiten
   (identische Spaltenbreiten, Section-Abstände, Icon-Slots) – direkt
   Live-verifiziert. Abweichend vom sonstigen Muster: die beiden
   Bild+Text-Sections nutzen hier NICHT das Standard-Seitenverhältnis
   594/371, sondern die jeweils eigenen, größeren/kleineren Live-
   gemessenen Verhältnisse der Quellbilder (445,44px bzw. 362,28px
   Höhe bei 593,92px Breite) – seitenspezifisch per Modifier-Klasse
   gesetzt, um keine willkürliche Crop-Anpassung vorzunehmen. Live
   markiert die dritte Feature-Card-Überschrift fälschlich als <h2>
   statt <h3> (font-size dort identisch 20px, rein visuell nicht
   unterscheidbar) – hier bewusst konsistent als <h3> umgesetzt wie
   bei allen anderen Leistungsseiten (gleiche, bereits etablierte
   Heading-Hierarchie), da es sich um eine reine, nicht sichtbare
   Markup-Inkonsistenz auf Live handelt, keinen Inhaltsunterschied.
   Kein Testimonial-/Slider-Bereich auf Live vorhanden. FAQ-Überschrift
   ist hier – anders als bei den zuvor umgesetzten Leistungsseiten –
   korrekt "Fragen rund um Social Media & Marketing" (kein Live-
   Copy-Paste-Fehler auf dieser Seite). */
.social-media-hero {
  position: relative;
  margin-top: 60px;
  padding: 140px 0 20px;
  background-image: linear-gradient(var(--color-accent-1) 0%, rgba(83, 109, 254, 0) 100%);
}

@media (min-width: 1025px) {
  .social-media-hero {
    margin-top: 0;
  }
}

.social-media-hero__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-media-hero__text {
  flex: 1 1 0;
}

.social-media-hero__text h1 {
  letter-spacing: -1px;
}

.social-media-hero__text p {
  max-width: 440px;
  margin: 0 0 32px;
}

.social-media-hero__media {
  flex: 0 0 630px;
  max-width: 630px;
}

.social-media-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 470;
  object-fit: cover;
  border-radius: 50px;
}

@media (max-width: 1024px) {
  .social-media-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .social-media-hero__media {
    flex: none;
    max-width: 100%;
  }

  .social-media-hero__text p {
    max-width: 100%;
  }
}

/* --- Warum-Section (Text + Checkliste) --- */
.social-media-why {
  margin-top: 50px;
  margin-bottom: 100px;
}

.social-media-why h2 {
  max-width: 543px;
  letter-spacing: -2px;
}

.social-media-why__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.social-media-why__text {
  flex: 1 1 0;
  max-width: 563px;
}

.social-media-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1025px) {
  .social-media-checklist {
    flex: 0 1 auto;
    width: 441px;
    align-self: center;
  }
}

.social-media-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
}

.social-media-checklist__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-accent-1);
}

.social-media-checklist__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .social-media-why__grid {
    flex-direction: column;
    gap: 32px;
  }

  .social-media-why__text,
  .social-media-checklist {
    max-width: 100%;
  }
}

/* --- Zentrierte Zwischenüberschrift --- */
.social-media-split-intro {
  margin: 0;
  text-align: center;
}

.social-media-split-intro h2 {
  max-width: 845px;
  margin: 0 auto;
  letter-spacing: -2px;
}

/* --- Bild+Text-Wechsel (2x: Bild links / Bild rechts) --- */
.social-media-split {
  margin: 80px 0;
}

.social-media-split__grid {
  display: flex;
  align-items: center;
  gap: 90px;
}

.social-media-split__img {
  flex: 0 0 594px;
  width: 594px;
  height: auto;
  object-fit: cover;
  border-radius: 40px;
}

/* Live-Messung: seitenspezifische Seitenverhältnisse (siehe Kommentar
   oben), nicht das sonst übliche 594/371. */
.social-media-split__img--strategy {
  aspect-ratio: 593.92 / 445.44;
}

.social-media-split__img--ads {
  aspect-ratio: 593.92 / 362.28;
}

.social-media-split__text {
  flex: 1 1 0;
  max-width: 512px;
}

.social-media-split__text h3 {
  letter-spacing: -2px;
}

@media (max-width: 1024px) {
  .social-media-split__grid {
    flex-direction: column;
    gap: 32px;
  }

  .social-media-split--image-right .social-media-split__grid {
    flex-direction: column;
  }

  .social-media-split__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .social-media-split__text {
    max-width: 100%;
  }
}

/* --- Feature-Karten (3 Spalten, Verlaufshintergrund) --- */
.social-media-features {
  margin-top: 180px;
  margin-bottom: 80px;
  padding: 70px 0 96px;
  background-image: linear-gradient(var(--color-accent-4) 0%, var(--color-accent-5) 100%);
}

.social-media-features h2 {
  text-align: center;
  max-width: 756px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.social-media-features__grid {
  display: flex;
  gap: 20px;
}

.social-media-feature {
  flex: 1 1 0;
  background-color: var(--color-accent-5);
  border-radius: 34px;
  padding: 40px 50px 30px 30px;
}

.social-media-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.social-media-feature__icon svg {
  width: 28px;
  height: 28px;
}

.social-media-feature h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.social-media-feature p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .social-media-features__grid {
    flex-direction: column;
  }
}

/* --- Kennzahlen-Beweis-Section --- */
.social-media-proof {
  margin-top: 130px;
  margin-bottom: 0;
  padding: 64px 0 96px;
}

.social-media-proof__kicker {
  text-align: center;
  margin: 0 auto 12px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-accent-3);
}

.social-media-proof h2 {
  text-align: center;
  max-width: 896px;
  margin: 0 auto 40px;
  letter-spacing: -2px;
}

.social-media-stats {
  display: flex;
  gap: 24px;
}

.social-media-stat {
  flex: 1 1 0;
  border: 1px solid var(--color-accent-7);
  border-radius: 50px;
  padding: 32px;
}

.social-media-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.social-media-stat__number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
}

.social-media-stat__icon {
  color: var(--color-accent-1);
}

.social-media-stat__icon svg {
  width: 32px;
  height: 32px;
}

.social-media-stat p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .social-media-stats {
    flex-direction: column;
  }
}

/* --- FAQ (natives <details>/<summary>, ohne JS) --- */
.social-media-faq {
  margin-top: 130px;
  margin-bottom: 60px;
  padding: 0 0 96px;
}

.social-media-faq__heading {
  text-align: center;
  margin: 0 auto 48px;
}

.social-media-faq__heading h2 {
  max-width: 896px;
  margin: 0 auto 16px;
  letter-spacing: -2px;
}

.social-media-faq__intro {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  max-width: 896px;
  margin: 0 auto;
}

.social-media-accordion {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--color-accent-7);
}

.social-media-accordion__item {
  border-bottom: 1px solid var(--color-accent-7);
}

.social-media-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-3);
  cursor: pointer;
  list-style: none;
}

.social-media-accordion__item summary::-webkit-details-marker {
  display: none;
}

.social-media-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.social-media-accordion__toggle::before,
.social-media-accordion__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--color-accent-1);
}

.social-media-accordion__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.social-media-accordion__toggle::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

.social-media-accordion__item[open] .social-media-accordion__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.social-media-accordion__item p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-accent-3);
  margin: 0;
  padding: 0 0 24px;
}

@media (max-width: 767px) {
  .social-media-hero {
    padding: 48px 0;
  }

  .social-media-why,
  .social-media-features,
  .social-media-faq {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .social-media-split-intro {
    margin: 32px 0;
  }

  .social-media-split {
    margin: 32px 0;
  }

  .social-media-feature {
    padding: 32px 24px;
  }

  .social-media-stat {
    padding: 24px;
  }

  .social-media-accordion__item summary {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   26. Kontakt-Seite
   Live-Messung (P3.3, 1440px): Kontakt ist eine Hauptseite (farbiger
   Top-Bereich unter dem Header wie Home/Über Uns/Equipment), ABER mit
   einem deutlich größeren Intro-Bereich: gemessener Abstand
   Header-Unterkante -> erste Content-Oberkante = 120px (nicht 50px wie
   bei den übrigen Hauptseiten – siehe .page-top-band--120 oben).
   Textblock: H1 66px/700/-1px, Subtext 16px/24px, 3 Kontakt-Pillen mit
   Icon-Kreis + Text 20px, "Auf Google Maps zeigen"-Link 12px/700.
   P3.3a: Das ursprünglich zusätzlich vorhandene zweite Formular im
   Hauptinhalt (redundant zum bestehenden Footer-Terminformular) wurde
   entfernt – das Footer-Formular ist die einzige Instanz auf dieser
   Seite. Der obere Bereich ist dadurch einspaltig; der Textblock erhält
   eine max-width, damit er nicht unbalanciert über die volle
   Container-Breite läuft (kein neues Ersatzelement, nur Neuausgleich
   des vorhandenen Inhalts).
   Mobile-Gap (390px, separat live gemessen): 60px – deckt sich mit dem
   bereits etablierten Leistungsseiten-Wert, nicht blind von Home/Über
   Uns (dort 0px) übernommen. Die zusätzliche schwarze mobile CTA-Leiste
   der Live-Seite (nicht Teil des eingefrorenen lokalen Headers) wurde
   dabei bewusst nicht mitgerechnet/repliziert. Kein Testimonial-/
   Slider-Bereich auf Live vorhanden. Unter dem Hero folgt ein einzelnes
   großes Bild (radius 50px, Container 1280px). */
.contact-hero {
  margin-top: 60px;
  padding-bottom: 40px;
}

@media (min-width: 1025px) {
  .contact-hero {
    margin-top: 0;
    padding-bottom: 60px;
  }
}

.contact-hero__text {
  max-width: 700px;
}

.contact-hero__text h1 {
  letter-spacing: -1px;
}

.contact-hero__text p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-accent-6);
  margin: 0 0 25px;
}

.contact-info-list {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: var(--color-accent-5);
  border-radius: 34px;
  height: 50px;
  padding: 0 20px 0 0;
}

.contact-info-item__icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-item__icon svg {
  width: 20px;
  height: 20px;
}

.contact-info-item a,
.contact-info-item span {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-accent-6);
  text-decoration: none;
}

.contact-hero__maps-link {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-6);
  text-decoration: underline;
}

.contact-hero__image {
  border-radius: 50px;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
}

@media (max-width: 768px) {
  .contact-hero {
    padding-bottom: 32px;
  }

  .contact-info-item {
    height: auto;
    min-height: 50px;
    padding: 8px 16px 8px 0;
  }

  .contact-info-item a,
  .contact-info-item span {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   27. Rechtsseiten (Datenschutz)
   Live-Messung (P3.4, 1440px): Datenschutz ist strukturell keine
   Leistungs-Unterseite (kein .service-hero, kein Gap=0-Header-
   Anschluss), sondern nutzt exakt dieselbe Hauptseiten-Geometrie wie
   Kontakt: Header 80px, dann 120px Intro-Abstand bis zur ersten
   Content-Oberkante (body-Verlauf #eef0ff→#fff, .page-top-band--120
   aus Abschnitt 8a wiederverwendet), mobil (390px) 60px Gap – separat
   für diese Seite live gemessen, nicht blind angenommen.
   H1 48px/700 (kleiner als der 66px-Hero-H1 anderer Hauptseiten,
   Live-verifiziert). Fließtext 16px, dessen Absatzbreite auf Live
   nicht eingeschränkt ist (volle 1280px-Containerbreite) – hier
   bewusst auf max-width 900px begrenzt (wie vom Arbeitspaket als
   bevorzugte Zielgröße genannt), da eine 1280px breite Fließtextzeile
   der Lesbarkeit klar schadet und dies eine rein layouttechnische,
   nicht inhaltliche Entscheidung ist. Keine Akkordeons, Karten, Tabs
   oder sonstigen neuen Layoutelemente – reine Absatz-/Listenstruktur
   wie auf Live. */
.legal-hero {
  margin-top: 60px;
  padding-bottom: 60px;
}

@media (min-width: 1025px) {
  .legal-hero {
    margin-top: 0;
    padding-bottom: 96px;
  }
}

.legal-hero h1 {
  margin-bottom: 40px;
}

.legal-content {
  max-width: 900px;
}

.legal-content h2 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* P3.5: Auf Live sind die 5 nummerierten Unterabschnitte des Impressums
   ("1. Inhalt des Onlineangebotes" usw.) keine echten Überschriften,
   sondern nur fettgesetzte Absatzanfänge (<strong>) innerhalb des
   Fließtexts – analog zur bereits in P3.4 bei der Datenschutzseite
   angewandten, technischen Korrektur (echte Headings statt reiner
   Fett-Optik) hier als <h3> ausgezeichnet. Die globale h3-Größe (40px)
   ist für diese Unterebene deutlich zu groß und würde visuell kaum
   von der übergeordneten <h2> "Haftungsausschluss" (48px) zu
   unterscheiden sein – daher hier bewusst kleiner skaliert. */
.legal-content h3 {
  font-size: 22px;
  margin: 0 0 12px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.legal-content p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-accent-6);
  margin: 0 0 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content ul {
  list-style: disc;
  margin: 0 0 20px;
  padding-left: 24px;
}

.legal-content li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-accent-6);
  margin-bottom: 6px;
}

.legal-content li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .legal-hero {
    padding-bottom: 40px;
  }
}

/* ---------------------------------------------------------
   28. 404-Fehlerseite
   Bewusst schlicht gehalten (P4.1): kein übergroßer "404"-Schriftzug,
   keine neue Illustration – nur bestehender Header/Footer,
   bestehende Typografie/Button-Stile, ausreichend vertikaler Raum
   zwischen Header und Footer, damit die Seite ruhig wirkt. */
.error-page {
  padding: 160px 0;
  text-align: center;
}

.error-page__content h1 {
  margin-bottom: 16px;
}

.error-page__content p {
  font-size: 18px;
  color: var(--color-accent-6);
  margin: 0 0 40px;
}

.error-page__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.error-page__link {
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .error-page {
    padding: 96px 0;
  }

  .error-page__actions {
    flex-direction: column;
    gap: 16px;
  }
}