/* ------------------------------------------------------------------
   site.css - gemeinsames Stylesheet fuer punchline studio
   Helles Papier-Design. Wird von _worker.js VOR dem seiteneigenen
   <style> eingebunden.

   WICHTIG - so ist die Farbsteuerung aufgebaut:
   Die ganze Website arbeitet mit rund 3.300 var(--token)-Aufrufen.
   Die Tokens werden ausschliesslich hier unten in :root definiert.
   Die Seiten selbst definieren KEINE Farb-Tokens mehr. Wer die
   Palette aendern will, aendert diese eine Stelle - sonst nichts.

   Die Token-NAMEN stammen noch aus dem dunklen Design (--gold,
   --off-white, --bg ...). Sie bleiben, weil daran 3.300 Aufrufe
   haengen; umbenennen waere reines Risiko ohne Gewinn. Was sie
   heute bedeuten, steht als Kommentar an der Definition.
   ------------------------------------------------------------------ */

:root {
  /* Flaechen */
  --bg:         #f4f1e9;   /* Papier - eine Spur heller, die Faser nimmt es zurueck */
  /* Weisse Kaesten auf getoentem Grund sind der Agentur-Look. Hier gibt es
     ein Papier; Kaesten entstehen durch die Tintenkante, nicht durch Weiss.
     --bg-warm ist nur eine Spur heller und gibt den Abschnitten Rhythmus. */
  --bg-warm:    #f8f5ee;   /* abgesetzter Abschnitt */
  --bg-card:    #f4f1e9;   /* Karten: dasselbe Papier, die Kante trennt */
  --bg-sunk:    #eceadf;   /* eingelassene Flaeche, z.B. Formularfelder */

  /* Papierfaser: dasselbe Rauschen wie das Filmkorn, viel feiner. Man sieht
     sie nicht bewusst - sie nimmt der Flaeche das Bildschirmhafte. */
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  --border:     #c8c2b7;   /* Haarlinie */

  /* Schrift */
  --off-white:  #171715;   /* Haupttext (frueher: hell auf dunkel) */
  --muted:      #6e6a61;   /* Nebentext - 5.4:1 auf Papier, AA sicher */

  /* Akzent: WeLive-Rot, fuer Papier abgedunkelt */
  --gold:       #b33f37;   /* Akzentflaeche und Akzentschrift, 4.9:1 */
  --gold-text:  #8c312b;   /* Akzentschrift in Fliesstext, 7.9:1 */
  --gold-dim:   #a0564e;   /* gedaempfter Akzent - 4.6:1, taugt auch als Schrift */
  --accent:     #b33f37;
  --red:        #b33f37;
  --red-dim:    #8c312b;
  --welive-red: #b33f37;
  --on-accent:  #ffffff;   /* Schrift auf Akzentflaeche */

  /* Dunkle Restflaechen: Video-Platzhalter bleiben dunkel */
  --media-bg:   #1f1e1b;

  /* Filmkorn - liegt als Ebene ueber jedem Foto */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Fotos: leicht ins Papier gezogen, nicht ausgewaschen */
  --photo:       grayscale(20%) sepia(7%) saturate(90%) contrast(92%) brightness(1.06);
  --photo-hover: grayscale(0%) sepia(0%) saturate(104%) contrast(100%) brightness(1);

  --max: 1240px;
  --r: 0px;   /* eckig statt abgerundet - passt zum Papier/Handsatz-Look */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { background: var(--bg); color: var(--off-white); font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

img { max-width: 100%; display: block; }

/* Die Faser liegt als eine Ebene ueber allem, ohne Klicks abzufangen.
   28 % im Multiply-Modus: spuerbar, nicht sichtbar. */
body::before { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background-image: var(--fibre); background-size: 300px 300px; opacity: 0.17; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { body::before { opacity: 0.14; } }

h1, h2, h3, h4 { letter-spacing: -0.04em; line-height: 1.02; overflow-wrap: break-word; }

/* Die Schlagzeile ist ein <p>, also greift auf den Unterseiten das
   seiteneigene "p { color: var(--muted) }" und laesst sie blass wirken.
   Die Klasse sticht das Element, unabhaengig von der Reihenfolge. */
.hero-slogan { color: var(--off-white); }
/* Das kursive Wort traegt die Akzentfarbe - das einzige Rot in der Schlagzeile.
   gold-text statt gold: gemessen 7,2:1 auf Papier, deutlich ueber AA. */
.hero-slogan em { color: var(--gold-text); }

/* Kursiv-Serife ist im Papier-Design das einzige Zierelement */
.serif, em, i { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; }

/* Monospace fuer Kleinkram: Nummern, Labels, Kategorien */
.mono, .section-label, .nav-mobile-label { font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; }

p a, .faq-a a, .honest-banner a, .article-body a, .included-list a { color: var(--gold-text); text-decoration: none; border-bottom: 1px solid var(--gold-dim); transition: color 0.2s, border-color 0.2s; }

p a:hover, .faq-a a:hover, .honest-banner a:hover, .article-body a:hover, .included-list a:hover { color: var(--gold); border-bottom-color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* ==================================================================
   Kopfzeile - eine Reihe, 74px, klebt oben
   ================================================================== */
nav { position: sticky; top: 0; z-index: 200; display: block; background: rgba(244,241,233,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }

.nav-top { height: 74px; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 22px; position: relative; }

/* Die zweite Reihe des alten Designs entfaellt; die Links sind hochgewandert. */
.nav-bottom, .nav-claim { display: none; }

/* Bildmarke + Schriftzug */
.nav-logo { display: flex; align-items: center; gap: 11px; line-height: 1; text-decoration: none; color: inherit; }
.nav-logo img { height: 34px; width: 34px; display: block; filter: brightness(0); opacity: 0.9; transition: opacity 0.18s; }
.nav-logo:hover img { opacity: 1; }
.nav-word { display: flex; align-items: baseline; gap: 7px; }
.nav-word b { font-size: 19px; font-weight: 700; letter-spacing: -0.045em; }
.nav-word sup { font-family: 'DM Mono', monospace; font-size: 8px; font-weight: 500; letter-spacing: 0; vertical-align: super; color: var(--muted); margin-left: 1px; }
.nav-studio { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.nav-links { display: flex; gap: 24px; list-style: none; align-items: center; }
.nav-links a, .nav-dd > span, .nav-dd-link > a { color: var(--off-white); text-decoration: none; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active, .nav-dd:hover > span, .nav-dd:focus-within > span { color: var(--gold); }
.nav-links a.active { position: relative; }
.nav-links a.active::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 1px; background: var(--gold); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-lang { display: flex; gap: 5px; font-family: 'DM Mono', monospace; }
.nav-lang a { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 0; border: none; transition: color 0.2s; }
.nav-lang a.active, .nav-lang a:hover { color: var(--off-white); border: none; }

.nav-cta-desk { white-space: nowrap; }

/* Aufklappmenues */
.nav-dd { position: relative; }
.nav-dd > span, .nav-dd-link > a { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-dd > span::after, .nav-dd-link > a::after { content: '\25BE'; font-size: 9px; color: var(--muted); }
.nav-dd::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 13px; }
.nav-dd-menu { display: none; position: absolute; top: calc(100% + 13px); left: -16px; transform: none; margin-top: 0; min-width: 272px; list-style: none; padding: 6px 0; background: var(--bg); border: 1px solid var(--off-white); box-shadow: 5px 6px 0 rgba(0,0,0,0.14); z-index: 30; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: block; }
.nav-dd-menu li { display: block; }
.nav-dd-menu a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--off-white); text-decoration: none; border-bottom: 1px solid var(--border); transition: color 0.2s, background 0.2s; }
.nav-dd-menu li:last-child a { border-bottom: none; }
.nav-dd-menu a:hover, .nav-dd-menu a.active { background: var(--bg-card); color: var(--gold); }
.nav-dd-menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dd-spez { font-family: 'DM Mono', monospace; font-style: normal; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 2px 5px; flex-shrink: 0; }
.nav-dd-menu a .dd-label, .nav-dd-link > a .dd-label { position: relative; display: inline-block; }
.nav-dd-menu a.active .dd-label::after, .nav-dd-link > a.active .dd-label::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background: var(--gold); }
.nav-dd-link > a.active { color: var(--gold); }
.nav-dd-link > a.active::after { content: '\25BE'; position: static; width: auto; height: auto; background: none; }

/* Hinweis-Pillen fuer die beiden Spezialgebiete */
.nav-highlight { color: var(--off-white) !important; position: relative; }
.nav-highlight::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--gold); }
.nav-highlight:hover, .nav-highlight.active { color: var(--gold) !important; }
.nav-mobile .nav-highlight { border-left: 3px solid var(--gold); padding-left: 12px !important; }
.nav-mobile .nav-highlight::after { display: none; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px 0 10px 12px; flex-shrink: 0; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--off-white); border-radius: 0; transition: all 0.22s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobiles Menue */
/* fixed, nicht absolute: das Menue ist ein Geschwister von <nav>, kein Kind.
   Als absolute haengt es an der Seite und bleibt beim Herunterscrollen ganz
   oben im Dokument stehen. Fixed haelt es immer unter der klebenden Leiste -
   dafuer war auch max-height: calc(100dvh - 74px) schon gedacht. */
.nav-mobile { display: none; position: fixed; top: 74px; left: 0; right: 0; z-index: 199; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-direction: column; padding: 10px 22px 26px; max-height: calc(100dvh - 74px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.nav-mobile.is-open { display: flex; }
.nav-mobile a { display: block; padding: 12px 0; color: var(--off-white); text-decoration: none; font-size: 16px; font-weight: 400; border-bottom: 1px solid var(--border); transition: color 0.2s; letter-spacing: 0; cursor: pointer; }
.nav-mobile a:hover { color: var(--gold); }
.nav-mobile a.nav-mobile-sub { padding-left: 0; }
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; }
.nav-mobile-lang { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.nav-mobile-lang a { display: inline; padding: 0; border: none; color: var(--muted); }
.nav-mobile-lang a.active { color: var(--off-white); font-weight: 500; }
.nav-mobile-foot .btn { padding: 12px 18px; }
.nav-mobile-label { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; color: var(--muted); padding: 20px 0 7px; border-bottom: 1px solid var(--off-white); }

nav a, .nav-mobile a { border-bottom-width: 0; }
.nav-mobile a { border-bottom: 1px solid var(--border); }


/* ==================================================================
   Schaltflaechen
   ================================================================== */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: var(--r); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; transition: all 0.18s; cursor: pointer; border: 1px solid var(--off-white); background: transparent; color: var(--off-white); font-family: 'DM Sans', system-ui, sans-serif; letter-spacing: 0.02em; }
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.btn-primary { background: var(--off-white); color: var(--bg); border-color: var(--off-white); }
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); opacity: 1; }
.btn-secondary { background: transparent; color: var(--off-white); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn-sm { padding: 10px 14px; font-size: 12.5px; }
/* Die Anfrage-Schaltflaeche im Kopf bleibt die auffaelligste der Seite */
.nav-cta-desk.btn-primary { border-radius: 999px; padding: 11px 16px; }


/* ==================================================================
   Fotos: Filmkorn und Papier-Ton

   Das Korn liegt als ::before-Ebene ueber jedem Bildcontainer. Es ist
   bewusst ueber die Container-Klassen geloest und nicht ueber eine
   zusaetzliche Klasse im Markup: so gilt es fuer alle 121 Bilder der
   Website, ohne dass eine einzige Seite angefasst werden muss - und
   ein neues Bild bekommt es automatisch mit.
   ::before, nicht ::after: bei .hero-img traegt ::after schon den Verlauf.
   ================================================================== */
.grain,
.yt-facade, .thumb, .photo-item, .case-photo,
.poster-frame, .ph-img-wrap, .hero-img { position: relative; }

.grain::before,
.yt-facade::before, .thumb::before, .photo-item::before, .case-photo::before,
.poster-frame::before, .ph-img-wrap::before, .hero-img::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background-image: var(--grain); background-size: 160px 160px;
  opacity: 0.55; mix-blend-mode: overlay;
}
/* Laeuft das Video, verschwindet das Korn - sonst liegt es ueber dem iframe */
.yt-facade.is-playing::before, .yt-facade.loaded::before,
.yt-facade:has(iframe)::before, .grain.is-playing::before { display: none; }

/* Bilder ins Papier ziehen; beim Hovern kommt die volle Farbe zurueck */
.yt-facade img, .thumb img, .photo-item img, .case-photo img,
.poster-frame img, .ph-img-wrap img, .hero-img img, .grain img, .photo {
  filter: var(--photo); transition: filter 0.45s, transform 0.8s;
}
.yt-facade:hover img, .thumb:hover img, .photo-item:hover img,
.case-photo:hover img, .poster-frame:hover img, .ph-img-wrap:hover img,
.hero-img:hover img, .grain:hover img { filter: var(--photo-hover); }

/* Logos sind keine Fotos: kein Korn, kein Filter */
.welive-logo::before, .nav-logo::before { display: none; }
.welive-logo img, .nav-logo img, .footer-logo { filter: none; }
.nav-logo img, .footer-logo { filter: brightness(0); }


/* Abschnittsnummern im linken Rand - die redaktionelle Zaehlung aus dem
   Entwurf. Per CSS-Zaehler, damit keine Seite Nummern im Markup braucht
   und eine neue Sektion sich automatisch einreiht. Erst ab 1200px, darunter
   fehlt der Platz im Rand. */
main { counter-reset: abschnitt; }
@media (min-width: 1200px) {
  .section-label { position: relative; }
  .section-label::before {
    counter-increment: abschnitt;
    content: counter(abschnitt, decimal-leading-zero);
    position: absolute; right: calc(100% + 26px); top: -0.9em;
    font: 400 58px/1 'Instrument Serif', Georgia, serif;
    letter-spacing: -0.04em; color: var(--line); pointer-events: none;
  }
}

/* Kaesten bekommen die Tintenkante. Sie heben sich jetzt durch die Linie
   ab, nicht durch eine hellere Flaeche - das ist der Unterschied zwischen
   "Karte auf Website" und "Feld auf Papier". */
.offer-card, .price-card, .review-card, .testimonial, .service-card,
.award-card, .case-card, .tier, .preis, .spotify-wrap, .arbeit-audio,
.arbeit-film, .faq-box, .honest-banner, .niche-banner {
  border-color: var(--off-white) !important;
}
/* Raster, die vorher ueber Flaechenfarbe getrennt haben, trennen jetzt ueber
   die Linie: kraeftige Kante oben, Haarlinie zwischen den Zeilen. */
.pricing-grid, .offer-grid, .tiers, .preise, .lx, .article-list, .episode-list {
  border-top: 2px solid var(--off-white);
}
/* Eingelassene Felder - Formular, Zitate - duerfen eine Spur tiefer liegen */
.field, textarea.field, blockquote, .quote { background: transparent; }

/* ==================================================================
   Wiederkehrende Bausteine
   ================================================================== */
.section-label { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.875rem; }

/* Regie-Referenz: die staerkste Einzelreferenz der Website, deshalb als
   eigener Block mit Akzentkante statt als Nebensatz. */
.regie-credit { display: flex; flex-direction: column; gap: 5px; max-width: 620px;
  margin: 0 0 2.25rem; padding: 1rem 0 1rem 1.25rem; border-left: 3px solid var(--gold); }
.regie-credit .mono { font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-text); }
.regie-credit strong { font-size: 1.125rem; letter-spacing: -0.025em; font-weight: 700; }
.regie-credit > span:last-child { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }

/* Spotify-Einbettungen sind innen schwarz. Eine helle Haarlinie darum
   sieht aus wie ein Fehler - es braucht denselben Tintenrahmen wie bei
   den Bildkacheln, mit dem versetzten Schatten des Papier-Designs. */
.spotify-wrap, .arbeit-audio {
  border: 1px solid var(--off-white) !important;
  box-shadow: 5px 6px 0 rgba(23,23,21,0.14);
  background: var(--media-bg);
  overflow: hidden;
}
.spotify-wrap iframe, .arbeit-audio iframe { display: block; }
/* Spotify entscheidet anhand der Hoehe, ob es den vollen oder den
   Kompaktspieler zeigt. Ohne feste Hoehe kommt der kleine - und darunter
   bleibt eine leere weisse Flaeche stehen. */
.arbeit-audio iframe:not([style*="display:none"]) { height: 100% !important; }

/* Format-Kaesten (Portraet / Reportage / Kurzdoku und Verwandte).
   Sie standen als nackter Text ueber die volle Breite - bei 1400px sind
   das rund 140 Zeichen pro Zeile, doppelt so viel wie lesbar ist.
   Jetzt: Zeilenlaenge gedeckelt, Haarlinie als Trenner, Etikett in Mono. */
.offer-card { background: var(--bg-card); padding: 2rem 2rem 2.25rem; border-top: 2px solid var(--off-white); }
.offer-card > * { max-width: 62ch; }
.offer-card p { font-size: 0.9375rem; line-height: 1.75; color: var(--muted); margin-bottom: 1rem; }
.offer-card p:last-child { margin-bottom: 0; }
.offer-card h3 { font-size: 1.35rem; letter-spacing: -0.035em; margin: 0 0 1rem; font-weight: 700; }
.offer-tag { display: inline-block; font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px;
  font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-text);
  background: transparent; border: none; padding: 0 0 0.5rem; margin: 0; border-radius: 0; }

/* Chips, die auf eine Mediathek verweisen */
.mediathek-chip, [href*="mediathek"] > div, [href*="ardmediathek"] div, [href*="3sat"] div { }
a[href*="mediathek"] div[style*="--bg-card"], a[href*="3sat"] div[style*="--bg-card"] {
  border: 1px solid var(--off-white) !important; }

/* WeLive: Text links, Trailer rechts */
.welive-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.welive-media { min-width: 0; }
@media (max-width: 900px) { .welive-inner { grid-template-columns: 1fr !important; gap: 2rem; } }

.welive-video { position: relative; aspect-ratio: 16/9; width: 100%; margin: 0 0 0.75rem;
  background: var(--media-bg); overflow: hidden; cursor: pointer; border: 1px solid var(--off-white); }
.welive-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welive-video .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%; background: rgba(241,238,230,0.94);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  box-shadow: 3px 4px 0 rgba(23,23,21,0.22); transition: transform 0.2s, background 0.2s; z-index: 5; }
.welive-video:hover .play-btn { transform: translate(-50%,-50%) scale(1.07); background: var(--gold); }
.welive-video:hover .play-btn svg polygon { fill: #fff; }
.welive-cap { font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.5rem; }
.welive-cap strong { color: var(--off-white); font-weight: 500; }
/* Das WeLive-Logo traegt jetzt ein dunkles "We" - kein Filter noetig */
.welive-logo img { height: 48px; width: auto; filter: none; }

/* Bewertungen: Kopfzeile mit Gesamtnote, Karten, Aufklapper.
   Die Gesamtnote steht so auch in der maschinenlesbaren Auszeichnung -
   ratingCount 15 ist die Zahl, die Google oeffentlich anzeigt. */
.rating-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px;
  margin: 0 0 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.rating-value { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.rating-stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.14em; }
.rating-meta { font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.rating-meta a { color: var(--gold-text); border-bottom: 1px solid var(--gold-dim); }
.rating-meta a:hover { color: var(--gold); border-color: var(--gold); }

/* Uebersetzte Bewertungen werden als solche ausgewiesen - ein Zitat in
   einer Sprache, in der es nie geschrieben wurde, braucht den Hinweis. */
.review-translated { display: block; margin-top: 6px; font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.reviews-note { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); max-width: 62ch; }

.reviews-more { margin-top: 1.25rem; }
.reviews-more > summary { list-style: none; cursor: pointer; background: var(--bg-card);
  border: 1px solid var(--border); padding: 0.9rem 1.25rem; font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-text); text-align: center; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.reviews-more > summary::-webkit-details-marker { display: none; }
.reviews-more > summary:hover { color: var(--gold); border-color: var(--gold); }
.reviews-more[open] > summary { color: var(--muted); }
.reviews-more .reviews-grid { margin-top: 1.25rem; }
/* Auf Englisch verfasste Bewertungen bleiben im Original stehen */
.review-text[lang="en"] { quotes: '\201C' '\201D'; }

/* Aufklapper im Hero: nimmt den langen Erklaertext auf, ohne ihn zu
   verstecken. Der Text steht vollstaendig im HTML - Google und die
   KI-Crawler lesen ihn, der Mensch sieht zuerst nur die Kernaussage. */
details.mehr { margin: 0 0 2.25rem; max-width: 640px; }
details.mehr > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gold-text); border-bottom: 1px solid var(--gold-dim); padding-bottom: 3px; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::after { content: '+'; font-size: 14px; line-height: 1; }
details.mehr[open] > summary::after { content: '\2212'; }
details.mehr > summary:hover { color: var(--gold); border-color: var(--gold); }
details.mehr > p { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.75; color: var(--muted); }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { font-size: 1rem; font-weight: 600; color: var(--off-white); padding: 1.25rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-q::after { content: '+'; color: var(--gold); font-size: 1.2rem; font-weight: 300; }
.faq-item.open .faq-q::after { content: '\2212'; }
.faq-a { font-size: 0.9375rem; color: var(--muted); padding-bottom: 1.25rem; line-height: 1.7; display: none; }
.faq-item.open .faq-a { display: block; }

.breadcrumb a:hover { color: var(--gold); }

footer { background: var(--bg); border-top: 1px solid var(--border); padding: 2rem 2.5rem; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-copy { font-size: 0.8125rem; color: var(--muted); }
.footer-copy a { color: var(--muted); text-decoration: none; }
.footer-link { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-link:hover { color: var(--gold); }
/* Im Fuss bleibt die vollstaendige Wortmarke stehen */
.footer-logo { height: 52px; width: auto; filter: brightness(0); opacity: 0.9; }


/* ==================================================================
   Umbrueche
   ================================================================== */
/* Die Leiste braucht real 633px. Der Hamburger springt deshalb erst
   bei 720px an - iPad hoch (768px) behaelt das volle Menue. */
@media (max-width: 940px) and (min-width: 721px) {
  .nav-links { gap: 17px; }
  .nav-studio { display: none; }
  .nav-lang a { font-size: 10px; }
  .nav-cta-desk.btn-primary { padding: 10px 13px; }
}
@media (max-width: 720px) {
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-top { padding: 0 18px; }
  /* Sobald der Burger da ist, verschwindet der Anfrage-Knopf aus dem Kopf.
     Sonst stehen zwei identische Knoepfe auf einem Schirm: dieser und der
     mitlaufende unten rechts. Die Anfrage bleibt dreifach erreichbar -
     im Hero, im aufgeklappten Menue und ueber den mitlaufenden Knopf. */
  .nav-cta-desk { display: none !important; }
  /* Der gewonnene Platz geht zurueck an Schriftzug und Sprachschalter */
  .nav-studio, .nav-right .nav-lang { display: inline-flex; }
}
@media (max-width: 360px) { .nav-studio { display: none; } }
@media (min-width: 721px) { .nav-mobile { display: none !important; } }

/* ------------------------------------------------------------------
   Abstand unter der Kopfzeile auf dem Telefon
   Der Hero der Startseite ist am Schreibtisch zweispaltig und 100vh hoch,
   damit Text und Bild nebeneinander mittig stehen. Auf dem Telefon faellt
   das Bild weg - der kurze Text bleibt aber in einem bildschirmhohen
   Kasten mittig haengen, also klafft ueber der Ueberschrift ein Loch.
   Ohne Mindesthoehe und linksbuendig oben beginnt der Text direkt.
   Die Seitenkoepfe der Unterseiten hatten aus demselben Grund 96px.
   Die Regeln stehen in den Seiten selbst, deshalb hier mit Nachdruck.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Zweispaltige Kacheln auf dem Telefon
   Zwei Spalten auf einem 390px-Schirm lassen pro Kachel rund 155px, davon
   gehen 48px Innenabstand ab - es bleiben etwa 107px Textbreite, also
   ein bis zwei Woerter pro Zeile. Unterhalb von 560px waere eine Spalte
   schmaler als 260px, und dort brechen wir auf eine Spalte um.
   div.workflow-steps sticht die Seitenregel ueber die hoehere Spezifitaet,
   ohne dass in acht Dateien etwas geaendert werden muss.
   ------------------------------------------------------------------ */
.standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
/* ------------------------------------------------------------------
   Startseiten-Hero auf Tablets
   Der Hero ist einen Bildschirm hoch und vertikal mittig - am Schreibtisch
   sieht das nach Absicht aus, weil Text und Bild dort nebeneinander wirken.
   Auf einem Tablet ist der Text nur ~354px hoch, das Bild aber 747px: die
   Schlagzeile schwebt dann fast 300px unter der Kopfzeile, und darueber
   steht nichts. Oben ausgerichtet und mit gedeckelter Bildhoehe sitzt die
   Schlagzeile direkt unter der Kopfzeile, und man sieht, dass es weitergeht.
   pointer: coarse trennt Tablet von Notebook sauberer als jede Breite -
   ein 1366px-iPad und ein 1366px-Notebook sind sonst nicht zu unterscheiden.
   ------------------------------------------------------------------ */
@media (min-width: 701px) and (pointer: coarse) {
  /* body davor, weil die Seitenregel ebenfalls #hero heisst und spaeter
     geladen wird - ohne das zusaetzliche Element gewinnt sie ueber die
     Reihenfolge. */
  body #hero { align-items: start; min-height: 0; }
  #hero .hero-img { max-height: min(78vh, 620px); }
}

@media (max-width: 560px) {
  div.workflow-steps { grid-template-columns: 1fr; }
  .standards-grid { grid-template-columns: 1fr; }
  /* Bildunterschrift und Link standen nebeneinander; fuer den Link blieben
     88px, also "Wie das / entsteht". Untereinander hat beides volle Breite. */
  div.arbeit-cap { flex-direction: column; gap: 0.35rem; }
}

/* ------------------------------------------------------------------
   Haken-Listen: haengender Einzug statt Flexbox
   Als Flex-Zeile wird jedes Textstueck im <li> ein eigenes Flex-Element.
   Steht neben dem Text noch ein Link, liegen beide nebeneinander in einer
   Reihe, die nicht umbrechen kann - der Link haengt dann aus der Kachel.
   Im normalen Textfluss umbricht die Zeile wie jeder andere Satz; der
   Haken haelt ueber text-indent seine eigene Spalte.
   ------------------------------------------------------------------ */
ul.included-list > li { display: block; padding-left: 1.4rem; text-indent: -1.4rem; }
ul.included-list > li::before { display: inline-block; width: 1.4rem; text-indent: 0; margin: 0; }

@media (max-width: 700px) {
  #hero { min-height: 0 !important; align-items: start !important; padding-top: 32px !important; }
  .page-hero { padding-top: 32px !important; }
}

/* Wellenform und Filmstreifen im Hero sind als Textur gedacht: absolut
   positioniert, unten im Hero, hinter dem Text. Die spaetere Regel
   ".page-hero > * { position: relative }" hat sie bei gleicher Spezifitaet
   in den Textfluss gezogen - im dunklen Design fiel das kaum auf, auf
   Papier stand da ein 120px hohes rosa Band ueber der Ueberschrift. */
.hero-waveform, .hero-filmstrip { position: absolute !important; z-index: 0 !important;
  fill: var(--gold); opacity: 0.13; height: 92px !important;
  /* Nicht buendig auf der Abschnittskante aufsetzen - die untere Lochreihe
     klebte sonst an der Naht zum naechsten Abschnitt. */
  bottom: 28px !important; }
/* Der Streifen sitzt unten im Hero. Die Seiten geben ihm dort aber nur
   2 bis 6 rem Platz, also schneidet er quer durch die Schaltflaechen.
   Nur Heros mit Streifen bekommen den noetigen Abstand - die ohne bleiben
   so eng, wie sie waren. */
.page-hero:has(.hero-waveform), .page-hero:has(.hero-filmstrip),
.hero-wrap-legacy:has(.hero-waveform), .hero-wrap-legacy:has(.hero-filmstrip) {
  padding-bottom: 8.5rem !important;
}
@media (max-width: 620px) {
  .page-hero:has(.hero-waveform), .page-hero:has(.hero-filmstrip),
  .hero-wrap-legacy:has(.hero-waveform), .hero-wrap-legacy:has(.hero-filmstrip) {
    padding-bottom: 6.5rem !important;
  }
  .hero-waveform, .hero-filmstrip { height: 64px !important; bottom: 20px !important; }
}
.waveform-divider, .filmstrip-divider { fill: var(--gold-dim); opacity: 0.9; }


/* Raster- und Flex-Kinder muessen schrumpfen duerfen. Ohne min-width:0
   behalten sie ihre inhaltsbedingte Mindestbreite (der Vorgabewert ist
   min-width:auto) und sprengen die Spalte - und mit ihr den Viewport.
   Das ist die Ursache praktisch jedes Ueberlaufs auf schmalen Displays,
   und es laesst sich nur hier zentral loesen, nicht Raster fuer Raster. */
[class*="grid"] > *, [class*="-list"] > *, [class*="-row"] > *,
[class*="cards"] > *, [class*="tiers"] > *, [class*="-cols"] > *,
[class*="columns"] > *, [style*="grid-template-columns"] > * { min-width: 0; }

/* Zweispaltige Raster brechen auf Telefonen auf eine Spalte um. Die Seiten
   hatten das teils erst ab 360px - zu spaet, der Bruch passiert frueher. */
@media (max-width: 620px) {
  .offer-grid, .episode-list, .pricing-grid, .tiers, .guide-steps,
  .ref-video-grid, .reviews-grid, .clients-grid { grid-template-columns: 1fr !important; }
}

/* white-space:nowrap auf laengeren Textzeilen sprengt schmale Displays -
   die Zeile kann dann per Definition nicht umbrechen. Auf Telefonen
   darf sie das. */
@media (max-width: 720px) {
  .ep-meta, .episode-list span, [class*="-meta"] { white-space: normal !important; }
}

/* Lange deutsche Komposita sprengen schmale Displays: "Konzertmitschnitte"
   ist bei 35px fett rund 360px breit und passt auf kein Telefon.
   Silbentrennung zuerst (schoener), erzwungener Umbruch als Netz darunter. */
h1, h2, h3, h4, .hero-slogan { overflow-wrap: break-word; }
@media (max-width: 560px) {
  h1, h2, h3, h4, .hero-slogan { hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 400px) {
  .hero-slogan { font-size: clamp(1.9rem, 9vw, 2.4rem); }
}
.ep-meta { white-space: normal; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .grain::before { opacity: 0.5; } }