/* ------------------------------------------------------------------
   site.css - gemeinsames Stylesheet fuer punchline studio
   Design v2 (Okt. 2026): Schwarz / Papier / Akzent, Archivo + Newsreader.
   Wird von _worker.js VOR dem seiteneigenen <style> eingebunden.

   SO IST DAS AUFGEBAUT
   1. PALETTE   - die einzige Stelle mit Farbwerten. Zehn Variablen.
                  Weitere Paletten ueberschreiben nur den Akzent.
                  Umschalten: Konstante PALETTE oben in _worker.js
                  (setzt <html data-palette="...">). Pruefen:
                  node .preview/palette-check.mjs site.css
   2. ROLLEN    - die alten Token-Namen (--bg, --off-white, --gold ...)
                  haengen an rund 3.300 Aufrufen und bleiben deshalb.
                  Sie zeigen jetzt auf die Palette.
   3. EBENEN    - @layer base  = der bisherige Bestand dieser Datei
                  @layer page  = die <style>-Bloecke der Seiten (der
                                 Worker legt sie beim Ausliefern dorthin)
                  ohne Ebene   = Design v2 (unten). Gewinnt gegen beide.
                  So greift das neue Design zentral, ohne dass jede Seite
                  einzeln umgeschrieben werden muss. Inline-style="" schlaegt
                  weiterhin alles - deshalb nutzen die Seiten nur var(--...).
   4. FLAECHEN  - .sec--night / .sec--paper / .sec--accent setzen die
                  Rollen lokal um. Alles darin dreht sich von selbst mit.
   ------------------------------------------------------------------ */

@layer base, page;

:root {
  /* ---- PALETTE: hier aendern, sonst nirgends ---- */
  --pal-ink:          #0d0c0b;  /* Text auf Papier */
  --pal-paper:        #ece6d8;  /* helle Flaeche */
  --pal-card:         #f6f2e8;  /* Karten auf Papier */
  --pal-muted:        #5a5448;  /* Nebentext auf Papier */
  --pal-night:        #0d0c0b;  /* dunkle Flaeche */
  --pal-bone:         #f1ece0;  /* Text auf dunkel */
  --pal-night-muted:  #b9b2a3;  /* Nebentext auf dunkel */
  --pal-accent:       #c9a45c;  /* Akzent: Flaechen, Knoepfe, Schrift auf dunkel */
  --pal-accent-deep:  #755a13;  /* Akzent als Schrift auf Papier */
  --pal-on-accent:    #0d0c0b;  /* Schrift auf Akzentflaeche */
}
/* Weitere Paletten: nur die Akzentwerte ueberschreiben */
:root[data-palette="rot"]  { --pal-accent:#ef5b4f; --pal-accent-deep:#a8362f; }
:root[data-palette="teal"] { --pal-accent:#3fc1b0; --pal-accent-deep:#176a5f; }
/* Stil "plugin": komplette dunkle Palette (Software-Oberflaeche), Akzent Rot.
   Die Rollen bleiben gleich - "paper" ist hier das dunkle Panel-Grau, "ink" die helle Schrift. */
:root[data-palette="plugin-hell"] {
  --pal-ink:#14161a; --pal-paper:#e9ecef; --pal-card:#ffffff; --pal-muted:#4e545c;
  --pal-night:#f4f5f7; --pal-bone:#14161a; --pal-night-muted:#4e545c;
  --pal-accent:#b42a20; --pal-accent-deep:#b42a20; --pal-on-accent:#ffffff;
}
/* Variante "analog": verblasste Pult-Farben, dunkel und hell */
:root[data-palette="analog"] {
  --pal-ink:#ece2cf; --pal-paper:#1d1a16; --pal-card:#27231e; --pal-muted:#b8ab95;
  --pal-night:#13110e; --pal-bone:#ece2cf; --pal-night-muted:#b0a48e;
  --pal-accent:#e66b56; --pal-accent-deep:#e9806d; --pal-on-accent:#13110e;
}
:root[data-palette="analog-hell"] {
  --pal-ink:#1a1a1a; --pal-paper:#f3f2ef; --pal-card:#ffffff; --pal-muted:#5a5a58;
  --pal-night:#eceae6; --pal-bone:#1a1a1a; --pal-night-muted:#5a5a58;
  --pal-accent:#a32f22; --pal-accent-deep:#a32f22; --pal-on-accent:#ffffff;
}
/* Variante "ruhig": warme Toene, dunkel und hell */
:root[data-palette="ruhig"] {
  --pal-ink:#efe9df; --pal-paper:#181512; --pal-card:#221e1a; --pal-muted:#b5ab9c;
  --pal-night:#110f0d; --pal-bone:#efe9df; --pal-night-muted:#b5ab9c;
  --pal-accent:#ec6152; --pal-accent-deep:#f07a6c; --pal-on-accent:#110f0d;
}
:root[data-palette="ruhig-hell"] {
  --pal-ink:#1c1814; --pal-paper:#f0ebe3; --pal-card:#fbf8f3; --pal-muted:#5d554b;
  --pal-night:#f7f3ec; --pal-bone:#1c1814; --pal-night-muted:#5d554b;
  --pal-accent:#ad3326; --pal-accent-deep:#ad3326; --pal-on-accent:#ffffff;
}
:root[data-palette="plugin"] {
  --pal-ink:#eceef1; --pal-paper:#121418; --pal-card:#1b1e23; --pal-muted:#a3a9b2;
  --pal-night:#0a0b0d; --pal-bone:#eceef1; --pal-night-muted:#a3a9b2;
  --pal-accent:#ff5a4e; --pal-accent-deep:#ff7468; --pal-on-accent:#0a0b0d;
}

/* ---- ROLLEN: Standard = Papierflaeche ---- */
:root {
  --bg:         var(--pal-paper);
  --bg-warm:    var(--pal-card);
  --bg-card:    var(--pal-card);
  --bg-sunk:    color-mix(in srgb, var(--pal-ink) 6%, var(--pal-paper));
  --off-white:  var(--pal-ink);          /* heisst so aus dem dunklen Design, ist die Tinte */
  --muted:      var(--pal-muted);
  --border:     color-mix(in srgb, var(--pal-ink) 28%, var(--pal-paper));
  --gold:       var(--pal-accent);       /* Flaechen, Knoepfe, Linien - NIE Schrift auf Papier */
  --gold-text:  var(--pal-accent-deep);  /* Akzent als Schrift auf der jeweiligen Flaeche */
  --gold-dim:   var(--pal-accent-deep);
  --on-accent:  var(--pal-on-accent);
  --media-bg:   var(--pal-night);
  /* Altnamen aus frueheren Paletten - zeigen auf den Akzent */
  --accent:     var(--pal-accent);
  --red:        var(--pal-accent);
  --red-dim:    var(--pal-accent-deep);
  --welive-red: var(--pal-accent-deep);

  /* Schrift-Rollen */
  --font-display: 'Archivo', 'Archivo Fallback', 'Arial Narrow', Impact, sans-serif;
  --font-text:    'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --font-label:   'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-hand:    'Covered By Your Grace', 'Segoe Script', 'Bradley Hand', cursive;
  --fs-text:      clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);   /* 18-20 px Fliesstext */
  --fs-lead:      clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
  --fs-label:     0.75rem;                                       /* 12 px Mono */

  /* Papierfaser (liegt ueber allem, Multiply) und Filmkorn (ueber Fotos) */
  --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");
  --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");
  /* Korn fuer Nachtflaechen: helles Rauschen mit 10 % Deckkraft */
  --night-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
  /* Fotos: auf Papier leicht ins Papier gezogen */
  --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: 77.5rem;   /* 1240px bei 16px - waechst ab 1600px mit, siehe html */
  --r: 0px;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
}

/* ==================================================================
   BESTAND (Papier-Design bis Sept. 2026) - in @layer base, damit
   Seiten-Styles und Design v2 dagegen gewinnen
   ================================================================== */
@layer base {

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

/* Grosse Bildschirme: bis 1600px ist 1rem = 16px, darueber waechst die
   Grundgroesse linear bis 28px bei 3840px (4K). Weil fast alles in rem
   steht, wachsen Schrift, Rasterbreite und Textspalten gemeinsam - sonst
   steht der Inhalt auf 32 Zoll als schmaler Streifen in der Mitte.
   Prozent statt px, damit eine eigene Browser-Schriftgroesse erhalten bleibt. */
html { scroll-behavior: smooth; font-size: clamp(100%, 46.4% + 0.5357vw, 175%); }

body { background: var(--bg); color: var(--off-white); font-family: var(--font-text); font-size: 1rem; 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: var(--font-text); font-weight: 400; font-style: italic; }

/* Monospace fuer Kleinkram: Nummern, Labels, Kategorien */
.mono, .section-label, .nav-mobile-label { font-family: var(--font-label); 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-text); 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: color-mix(in srgb, var(--bg) 88%, transparent); 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: 1.1875rem; font-weight: 700; letter-spacing: -0.045em; }
.nav-word sup { font-family: var(--font-label); font-size: 0.5rem; font-weight: 500; letter-spacing: 0; vertical-align: super; color: var(--muted); margin-left: 1px; }
.nav-studio { font-family: var(--font-label); font-size: 0.625rem; 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: 0.8438rem; 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-text); }
.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: var(--font-label); }
.nav-lang a { font-size: 0.6875rem; 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: 0.5625rem; 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: 0.875rem; 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-text); }
.nav-dd-menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dd-spez { font-family: var(--font-label); font-style: normal; font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-text); 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-text); }
.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-text) !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: 1rem; 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-text); }
.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: var(--font-label); font-size: 0.75rem; 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: 0.6875rem; font-weight: 500; letter-spacing: 0.09em; color: var(--muted); padding: 20px 0 7px; border-bottom: 1px solid var(--off-white); }
/* Auf Deutsch sind die Rubriken "Filmstudio"/"Tonstudio" Links auf die Uebersichtsseiten */
.nav-mobile a.nav-mobile-label { font-size: 0.6875rem; padding: 20px 0 7px; color: var(--muted); border-bottom: 1px solid var(--off-white); letter-spacing: 0.09em; }
.nav-mobile a.nav-mobile-label:hover { color: var(--gold-text); }

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: 0.8125rem; 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: var(--font-text); 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-text); background: transparent; }
.btn-sm { padding: 10px 14px; font-size: 0.7812rem; }
/* 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; overflow: hidden; }

.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; transition: opacity 0.45s;
}
/* Beim Hovern verschwindet das Korn mit - zusammen mit der vollen Farbe
   zeigt das Bild dann ungefiltert, wie es wirklich aussieht. */
.yt-facade:hover::before, .thumb:hover::before, .photo-item:hover::before,
.case-photo:hover::before, .poster-frame:hover::before, .ph-img-wrap:hover::before,
.hero-img:hover::before, .grain:hover::before { opacity: 0; }
/* 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); transform: scale(1.04); }
/* Einheitlich fuer alle Fotos: Hovern = leichter Zoom, volle Farbe, kein Korn.
   Der Container schneidet den Zoom ab (overflow oben). */
@media (prefers-reduced-motion: reduce) {
  .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 { transform: none; }
}

/* 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% + 1.625rem); top: -0.9em;
    font: 400 3.625rem/1 var(--font-text);
    letter-spacing: -0.04em; color: var(--muted); pointer-events: none;
  }
  /* Steht das Label in einer Rasterspalte (Bild links, Text rechts), soll
     die Nummer trotzdem im linken Rand des Containers haengen wie ueberall
     sonst - nicht zwischen Bild und Text. */
  .intro-grid, .engineer-grid { position: relative; }
  .intro-grid .section-label, .engineer-grid .section-label { position: static; }
}
/* Seiten mit nur einem Label im Kopf (Artikel, Case Studies, Uebersichten)
   zaehlen nichts - dort stand immer nur eine einsame "01". */
.page-hero .section-label::before { content: none; counter-increment: none; }
/* Zentrierte Labels (Abschluss-CTA) laufen ueber die volle Breite - die
   Randnummer landete dort ausserhalb des Bildschirms. */
.cta-section .section-label::before, .section-label[style*="justify-content:center"]::before { content: none; counter-increment: none; }
/* Gleicher Abstand ueber jeder nummerierten Sektion: die Randnummer ragt
   ueber das Label hinaus und klebte bei knapperen Sektionen (48-72px) fast
   an der Kante darueber. Nur dort, wo die Nummern auch sichtbar sind. */
@media (min-width: 1200px) {
  main section:has(.section-label) { padding-top: 5rem !important; }
}
/* Preise: brutto gross, netto + Steuer klein darunter (seitenweit einheitlich) */
.price-net { display: block; font-family: var(--font-text); font-size: 0.75rem; font-weight: 400; color: var(--muted); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; text-transform: none; line-height: 1.5; margin-top: 0.2rem; }
.price-row.net { justify-content: flex-end; text-align: right; background: transparent; padding: 0 1rem 0.7rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.price-row.total + .price-row.net { background: var(--bg-card); }
.price-row:has(+ .price-row.net) { border-bottom: none; padding-bottom: 0.2rem; }
.price-row.net span { color: var(--muted) !important; font-weight: 400; }
.price-row.net span:empty { display: 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,
.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: 0.6875rem; 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: var(--font-label); font-size: 0.6875rem; 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: kein Rahmen, kein Schatten, eckig wie der Rest der
   Seite. Spotify zeichnet im iframe selbst runde Ecken (12px), die lassen
   sich nicht abschalten - deshalb wird der Player 12px ueber den Rand
   hinaus gezogen und die Rundung samt Kantenflimmern weggeschnitten. */
.spotify-wrap, .arbeit-audio {
  border: none !important;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}
.spotify-wrap iframe, .arbeit-audio iframe {
  margin: -12px; width: calc(100% + 24px) !important; max-width: none;
}
.arbeit-audio iframe:not([style*="display:none"]) { height: calc(100% + 24px) !important; }
/* Platzhalter vor der Cookie-Zustimmung braucht eine eigene Kontur */
.spotify-facade { border: 1px solid var(--border); }
.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. */

/* 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: var(--font-label); font-size: 0.6875rem;
  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: color-mix(in srgb, var(--pal-bone) 94%, transparent);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--pal-ink) 22%, transparent); 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: var(--on-accent); }
.welive-cap { font-family: var(--font-label); font-size: 0.6875rem; 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-text); font-size: 1rem; letter-spacing: 0.14em; }
.rating-meta { font-family: var(--font-label); font-size: 0.6875rem; 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-text); 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: var(--font-label);
  font-size: 0.625rem; 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: var(--font-label);
  font-size: 0.6875rem; 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-text); 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: var(--font-label); font-size: 0.6875rem; 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: 0.875rem; line-height: 1; }
details.mehr[open] > summary::after { content: '\2212'; }
details.mehr > summary:hover { color: var(--gold-text); 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-text); 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-text); }

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-text); }
/* 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: 0.625rem; }
  .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.
   ------------------------------------------------------------------ */
/* (Startseiten-Hero auf Tablets: jetzt in index.html, Design v2) */

@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. */
/* (Abstand unter Wellenform/Filmstreifen: jetzt im v2-Teil, ohne Ebene) */
@media (max-width: 620px) {

  .hero-waveform, .hero-filmstrip { height: 64px !important; bottom: 20px !important; }
}
.waveform-divider, .filmstrip-divider { fill: var(--gold-dim); opacity: 0.9; }

/* Bewegte Wellenform (assets/wave.js). Die Canvas ersetzt das statische
   SVG und uebernimmt dessen Position; die Deckkraft steckt in der
   Zeichnung selbst, damit die Balken unter dem Zeiger voll aufleuchten. */
.hero-waveform--live, .hero-filmstrip--live { opacity: 1 !important; display: block; width: 100%; pointer-events: none; }
.live-wave { display: block; width: 100%; height: 5.5rem; }
.live-wave--hero { margin-top: -1px; }
.live-wave--contact { height: clamp(5rem, 9vw, 9rem); margin-bottom: 3rem; }
@media (max-width: 620px) {
  .live-wave { height: 4rem; }
  .live-wave--contact { margin-bottom: 2rem; }
}


/* 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; } }


/* ------------------------------------------------------------------
   Startseiten-Hero am Schreibtisch: Bild bis an den rechten Rand
   Vorher sass ein kleines Hochformat mittig in einem bildschirmhohen
   Kasten; auf grossen Monitoren wirkte die erste Ansicht leer. Jetzt
   fuellt das Bild die rechte Haelfte bis zum Rand und in voller Hoehe,
   der Text bleibt links an der Rasterkante (gleiche Flucht wie Kopfzeile).
   Nur mit Maus/Trackpad - Tablets behalten ihre eigene Regel oben.
   body davor aus demselben Grund wie oben: die Seitenregel heisst #hero.
   ------------------------------------------------------------------ */
/* (Startseiten-Hero am Schreibtisch: jetzt in index.html, Design v2) */

/* Autor: Byline + Box in Im-Detail-Artikeln */
.article-byline { font-size: 0.875rem; color: var(--muted); margin-top: 0.75rem; }
.article-byline a { color: var(--off-white); text-decoration: underline; text-underline-offset: 2px; }
.author-box { display: flex; gap: 1.1rem; align-items: flex-start; border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.75rem; }
.author-box img { width: 72px; height: 76px; object-fit: cover; border-radius: var(--r, 3px); flex-shrink: 0; }
.author-box p { margin: 0 0 0.35rem; font-size: 0.9375rem; color: var(--muted); line-height: 1.6; }
.author-box .author-name { font-weight: 700; color: var(--off-white); margin-bottom: 0.25rem; }
.author-box .author-name a { color: inherit; text-decoration: none; }

} /* Ende @layer base */


/* ==================================================================
   DESIGN V2 - ohne Ebene, gewinnt gegen @layer base und @layer page
   Reihenfolge: Flaechen, Basis, Schrift, Bausteine, Zustaende, Umbrueche
   ================================================================== */

/* ---- Flaechen-Scopes ------------------------------------------------
   Eine Flaechenklasse setzt die Rollen lokal um. Komponenten darin
   benutzen nur var(--...) und drehen sich deshalb von selbst mit.
   Kopf, mobiles Menue und Fuss sind immer Nacht. */
.sec--night, body > nav, nav:has(> .nav-top), .nav-mobile, footer, .site-footer {
  --bg: var(--pal-night);
  --bg-warm: color-mix(in srgb, var(--pal-night) 90%, white);
  --bg-card: color-mix(in srgb, var(--pal-night) 82%, white);
  --bg-sunk: color-mix(in srgb, var(--pal-night) 94%, white);
  --off-white: var(--pal-bone);
  --muted: var(--pal-night-muted);
  --border: color-mix(in srgb, var(--pal-bone) 22%, var(--pal-night));
  --gold-text: var(--pal-accent);
  --gold-dim: var(--pal-accent);
  --photo: none;
  --photo-hover: none;
  background-color: var(--bg); color: var(--off-white);
}
.sec--night { background-image: var(--night-grain); background-size: 220px 220px; }
.sec--accent {                         /* Kontaktflaeche, Preiskarte, Spezialitaetenband */
  --bg: var(--pal-accent);
  --bg-warm: var(--pal-accent);
  --bg-card: color-mix(in srgb, var(--pal-on-accent) 7%, var(--pal-accent));
  --bg-sunk: color-mix(in srgb, var(--pal-on-accent) 10%, var(--pal-accent));
  --off-white: var(--pal-on-accent);
  --muted: var(--pal-on-accent);
  --border: var(--pal-on-accent);
  --gold: var(--pal-on-accent);        /* Knoepfe kehren sich um */
  --on-accent: var(--pal-accent);
  --gold-text: var(--pal-on-accent);
  --gold-dim: var(--pal-on-accent);
  background-color: var(--bg); color: var(--off-white);
}
.sec--paper { background-color: var(--bg); color: var(--off-white); }
/* Der Seitenhintergrund ist Papier; Abschnitte ohne eigene Flaeche bleiben transparent. */
html { background: var(--pal-night); }
body { background: var(--bg); color: var(--off-white); }

/* Fokusring: immer in der Schriftfarbe der Flaeche, damit er ueberall sichtbar ist */
:focus-visible { outline: 2px solid var(--off-white); outline-offset: 3px; }

/* ---- Schrift ------------------------------------------------------ */
body { font-family: var(--font-text); font-size: var(--fs-text); line-height: 1.55;
  font-optical-sizing: auto; }
h1, h2, h3, h4, .t-display {
  font-family: var(--font-display); font-stretch: 66%; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0; line-height: 0.94;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 7.5rem); }
h2 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 5.25rem); }
h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1; }
h4 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.05; }
/* Akzentwort in einer Display-Zeile: gleiche Schrift, Akzentfarbe */
:is(h1, h2, h3, h4, .t-display, .hero-slogan) :is(em, i) {
  font-family: inherit; font-style: normal; font-weight: inherit; color: var(--gold-text); }
em, i, .serif { font-family: var(--font-text); font-style: italic; font-weight: 400; }

/* Fliesstext: Newsreader 18-20 px. Gilt fuer Absaetze und Listen im Inhalt,
   gegen die kleineren Groessen der alten Seiten-Stylesheets. */
main :where(p, li, dd, td, blockquote, .faq-a, .section-intro, .hero-sub) { font-size: var(--fs-text); line-height: 1.6; }
.t-lead, .section-intro, .hero-sub { font-size: var(--fs-lead) !important; line-height: 1.5; }
.t-lead { font-family: var(--font-text); }

/* Label: DM Mono, Versalien. Nav, Kategorien, Knoepfe, Meta. */
.t-label, .mono, .section-label, .nav-mobile-label, .offer-tag, .welive-cap, .rating-meta,
.review-translated, .price-net, .dd-spez, .breadcrumb, [class*="-eyebrow"], .service-num,
.tag, .tags span, [class$="-meta"], [class*="-meta "], .ep-meta {
  font-family: var(--font-label); font-weight: 500; font-style: normal;
  letter-spacing: 0.12em; text-transform: uppercase; }
.t-label, .section-label { font-size: var(--fs-label); }
main :where(.t-label, .mono, .section-label, .offer-tag, .welive-cap, .rating-meta, .price-net, .breadcrumb, [class$="-meta"], .ep-meta, .service-num, .tag) { font-size: var(--fs-label); line-height: 1.5; }
.price-net { text-transform: none; letter-spacing: 0.02em; }

/* Handschrift: nur Randnotizen. Nie Fliesstext, nie einziger Traeger einer Information. */
.t-hand { font-family: var(--font-hand); font-weight: 400; line-height: 1.05;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); display: inline-block; transform: rotate(-4deg); }

/* Links im Fliesstext */
p a, .faq-a a, .honest-banner a, .article-body a, .included-list a {
  color: var(--gold-text); border-bottom: 1px solid currentColor; }
p a:hover, .faq-a a:hover, .honest-banner a:hover, .article-body a:hover, .included-list a:hover {
  color: var(--off-white); border-bottom-color: var(--off-white); }

/* ---- Knoepfe ------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.95rem 1.6rem; border-radius: 0;
  font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;
  background: transparent; color: var(--off-white); border: 2px solid currentColor;
  transition: transform 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s; }
.btn:hover { transform: translateY(-3px); background: transparent; color: var(--gold-text); border-color: currentColor; }
.btn-primary, .btn.btn-primary { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.btn-primary:hover, .btn.btn-primary:hover { background: var(--gold); color: var(--on-accent); border-color: var(--gold); opacity: 1; }
.btn-secondary { background: transparent; color: var(--off-white); border-color: var(--off-white); }
.btn-sm { min-height: 2.75rem; padding: 0.75rem 1.1rem; }
/* Pfeil rutscht beim Hovern */
.btn .arr, a .arr { display: inline-block; transition: transform 0.15s; }
.btn:hover .arr, a:hover .arr { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---- Kopfzeile: schwarz ------------------------------------------- */
body > nav, nav:has(> .nav-top) { background: var(--pal-night); backdrop-filter: none; border-bottom: 1px solid var(--border); }
.nav-logo img { filter: none; opacity: 1; }
.nav-word { align-items: baseline; gap: 0.6rem; }
.nav-word b { font-family: var(--font-display); font-stretch: 66%; font-weight: 800; text-transform: uppercase;
  font-size: 2rem; line-height: 1; letter-spacing: 0; }
.nav-word sup { color: var(--muted); }
.nav-studio { font-family: var(--font-label); font-size: 0.625rem; letter-spacing: 0.14em; color: var(--gold-text); }
.nav-links a, .nav-dd > span, .nav-dd-link > a {
  font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--off-white); }
.nav-links a:hover, .nav-links a.active, .nav-dd:hover > span, .nav-dd:focus-within > span,
.nav-dd-link > a.active, .nav-dd-link > a:hover { color: var(--gold-text); }
.nav-links a.active::after, .nav-dd-menu a.active .dd-label::after, .nav-dd-link > a.active .dd-label::after { background: var(--gold); height: 2px; }
.nav-dd-menu { background: var(--bg-warm); border: 1px solid var(--border); box-shadow: 6px 8px 0 color-mix(in srgb, black 35%, transparent); }
.nav-dd-menu a { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; }
.nav-dd-menu a:hover, .nav-dd-menu a.active { background: var(--bg-card); color: var(--gold-text); }
.dd-spez { color: var(--gold-text); border-color: var(--gold); letter-spacing: 0.08em; }
.nav-highlight::after { background: var(--gold); }
.nav-highlight:hover, .nav-highlight.active { color: var(--gold-text) !important; }
.nav-mobile .nav-highlight { border-left-color: var(--gold); }
.nav-lang a { font-family: var(--font-label); color: var(--muted); }
.nav-lang a.active, .nav-lang a:hover { color: var(--off-white); }
.nav-cta-desk.btn-primary { border-radius: 0; }
.nav-mobile a { font-family: var(--font-label); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-mobile a:hover { color: var(--gold-text); }
.hamburger span { background: var(--off-white); }

/* ---- Fuss: schwarz ------------------------------------------------ */
footer { border-top: 1px solid var(--border); }
footer .footer-wordmark { font-family: var(--font-display); font-stretch: 66%; font-weight: 800;
  text-transform: uppercase; font-size: 1.9rem; line-height: 1; color: var(--off-white); }
footer .footer-wordmark-studio { font-family: var(--font-label); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-text); margin-left: 0.4rem; }
footer .footer-head { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
footer .footer-link:hover { color: var(--gold-text); }
footer p a, footer p a:hover { border-bottom: 0; }
footer .footer-head a { color: var(--off-white); }

/* ---- Filmkorn ueber Fotos (Bestand), auf Nacht ohne Papierfilter --- */
.sec--night :is(.yt-facade, .thumb, .photo-item, .case-photo, .poster-frame, .ph-img-wrap, .hero-img, .grain)::before { opacity: 0.35; }

/* ---- FAQ ------------------------------------------------------------
   Bleibt im ausgelieferten HTML. Frage in Display-Schrift, Plus in
   Akzent, dreht sich beim Oeffnen. */
.faq-item { border-bottom: 0; border-top: 1px solid var(--border); }
.faq-list > .faq-item:last-child, .faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q { font-family: var(--font-display); font-stretch: 66%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.05; letter-spacing: 0;
  padding: 1.4rem 0; align-items: baseline; color: var(--off-white); }
.faq-q::after { content: '+'; font-family: var(--font-label); font-weight: 400; font-size: 2rem; line-height: 0.6;
  color: var(--gold-text); transition: transform 0.2s; flex-shrink: 0; }
.faq-item.open .faq-q::after { content: '+'; transform: rotate(45deg); }
.faq-a { color: var(--off-white); max-width: 44rem; }
details > summary .pl, .fq[open] .pl { transition: transform 0.2s; }
.fq[open] .pl { transform: rotate(45deg); }

/* ---- Abschnittsnummern im Rand: Display statt Serife ---------------- */
@media (min-width: 1200px) {
  .section-label::before { font: 800 3.25rem/1 var(--font-display); font-stretch: 66%; color: var(--muted); letter-spacing: 0; }
}

/* ---- Preise -------------------------------------------------------- */
.price-net { font-family: var(--font-label); font-size: 0.6875rem; color: var(--muted); }

/* ---- Sprungmarke + mitlaufender Knopf ------------------------------ */
.skip-link { background: var(--gold); color: var(--on-accent); font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--fs-label); }
.sticky-cta { background: var(--gold); color: var(--on-accent); font-family: var(--font-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--fs-label); min-height: 3rem;
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--pal-ink) 35%, transparent); }

/* ---- Neue Bausteine ------------------------------------------------ */
/* Unterstreichungs-Link in Label-Schrift */
.t-ul { border-bottom: 2px solid currentColor; padding-bottom: 3px; text-decoration: none; color: inherit; }
/* Video-Kachel: Play-Ring, beim Hovern mit Akzent gefuellt */
.play-ring { width: 3rem; height: 3rem; border: 2px solid var(--pal-bone); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--pal-bone);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
a:hover .play-ring, .yt-facade:hover .play-ring { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
/* Mono-Zeilen einer Leistungsliste: Titel links (darf umbrechen), Meta rechts (nowrap) */
.srow { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  padding: 0.95rem 0; border-top: 1px solid var(--border); color: var(--off-white); text-decoration: none;
  font-family: var(--font-label); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  transition: padding 0.15s, color 0.15s; }
.srow:hover { padding-left: 0.6rem; color: var(--gold-text); }
.srow > :first-child { min-width: 0; }
.srow > :last-child { white-space: nowrap; color: var(--muted); }
.srow:hover > :last-child { color: inherit; }

/* Raster- und Flexkinder duerfen schrumpfen (zentral, siehe auch base) */
:where(.sec--night, .sec--paper, .sec--accent) :where([class*="grid"], [class*="-cols"]) > * { min-width: 0; }

/* ---- Ueberschriften: Display auch gegen Inline-Schriftangaben ---------
   Viele Seiten tragen font-family direkt am Element (style=""). Nur die
   Familie, Breite und Versalien werden erzwungen; Groesse und Abstand
   bleiben bei der Seite. */
h1, h2, h3, h4 { font-family: var(--font-display) !important; font-stretch: 66% !important; text-transform: uppercase !important; }

/* ---- Video-Vorschau (YouTube-Fassade): Play-Ring ----------------------
   Die Fassaden tragen ihre Masse inline, deshalb mit Nachdruck. Das
   Dreieck nimmt die Farbe aus CSS, nicht aus dem fill-Attribut. */
.yt-facade .play-btn, .welive-video .play-btn { background: color-mix(in srgb, var(--pal-night) 35%, transparent) !important;
  border: 2px solid var(--pal-bone) !important; width: 3.5rem !important; height: 3.5rem !important; box-shadow: none !important;
  transition: background-color 0.15s, border-color 0.15s !important; }
.yt-facade .play-btn svg, .yt-facade .play-btn polygon, .welive-video .play-btn svg, .welive-video .play-btn polygon { fill: var(--pal-bone) !important; }
.yt-facade:hover .play-btn, .welive-video:hover .play-btn { background: var(--gold) !important; border-color: var(--gold) !important; transform: translate(-50%, -50%) !important; }
.yt-facade:hover .play-btn svg, .yt-facade:hover .play-btn polygon,
.welive-video:hover .play-btn svg, .welive-video:hover .play-btn polygon { fill: var(--on-accent) !important; }

/* ==================================================================
   UNTERSEITEN - kraeftiger, ohne eine Zeile Text zu aendern
   Die Seiten wechseln ihre Abschnitte bisher per Inline-Hintergrund
   zwischen var(--bg) und var(--bg-warm). Das wird hier zentral zu
   Papier und Nacht; Preis-/Paket-Abschnitte und der Abschluss-CTA
   werden Akzentflaechen. Kein HTML wird dafuer angefasst.
   ================================================================== */

/* ---- Seitenkopf: Nacht, volle Breite, optional mit Foto ---------- */
.page-hero, .hero-wrap-legacy,
main > section[style*="var(--bg-warm)"] {
  --bg: var(--pal-night);
  --bg-warm: var(--pal-night);
  --bg-card: color-mix(in srgb, var(--pal-night) 86%, white);
  --bg-sunk: color-mix(in srgb, var(--pal-night) 92%, white);
  --off-white: var(--pal-bone);
  --muted: var(--pal-night-muted);
  --border: color-mix(in srgb, var(--pal-bone) 22%, var(--pal-night));
  --gold-text: var(--pal-accent);
  --gold-dim: var(--pal-accent);
  --photo: none;
  --photo-hover: none;
  color: var(--off-white);
}
main > section[style*="var(--bg-warm)"] { background-image: var(--night-grain); background-size: 220px 220px; }

.page-hero, .hero-wrap-legacy {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: none !important; margin: 0 !important;
  background: var(--pal-night) var(--night-grain);
  padding: clamp(3.5rem, 7vw, 7rem) var(--gutter) clamp(3rem, 6vw, 5.5rem) !important;
}
.page-hero > *, .hero-wrap-legacy > * { position: relative; z-index: 2; max-width: min(100%, 58rem); }
.page-hero > .container { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.page-hero:has(.hero-waveform), .page-hero:has(.hero-filmstrip),
.hero-wrap-legacy:has(.hero-waveform), .hero-wrap-legacy:has(.hero-filmstrip) { padding-bottom: clamp(8rem, 12vw, 10rem) !important; }
.hero-waveform, .hero-filmstrip { left: 0; right: 0; width: 100% !important; max-width: none !important; z-index: 1 !important; }

/* Foto hinten (Seite setzt style="--hero-photo:url(...)"), Schutzverlauf von links */
.page-hero[style*="--hero-photo"], .hero-wrap-legacy[style*="--hero-photo"] {
  min-height: clamp(34rem, 56vw, 50rem); display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero[style*="--hero-photo"]::before, .hero-wrap-legacy[style*="--hero-photo"]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pal-night) 94%, transparent) 0%,
      color-mix(in srgb, var(--pal-night) 74%, transparent) 48%, color-mix(in srgb, var(--pal-night) 18%, transparent) 92%),
    linear-gradient(0deg, color-mix(in srgb, var(--pal-night) 80%, transparent) 0%, transparent 45%),
    var(--hero-photo) center 40% / cover no-repeat; }
@media (max-width: 700px) {
  .page-hero[style*="--hero-photo"]::before, .hero-wrap-legacy[style*="--hero-photo"]::before {
    background:
      linear-gradient(0deg, color-mix(in srgb, var(--pal-night) 92%, transparent) 30%, color-mix(in srgb, var(--pal-night) 55%, transparent) 100%),
      var(--hero-photo) center 35% / cover no-repeat; }
  .page-hero[style*="--hero-photo"], .hero-wrap-legacy[style*="--hero-photo"] { min-height: 0; }
}

/* Schrift im Kopf: SEO-H1 als Zeile darueber, Slogan riesig */
.page-hero .breadcrumb, .hero-wrap-legacy .breadcrumb { color: var(--muted); font-size: 0.6875rem; margin-bottom: 1.75rem; }
.page-hero .breadcrumb a, .hero-wrap-legacy .breadcrumb a { color: var(--muted); border: 0; }
.page-hero .breadcrumb a:hover, .hero-wrap-legacy .breadcrumb a:hover { color: var(--off-white); }
h1.seo-h1 { font-family: var(--font-label) !important; font-stretch: normal !important; font-weight: 500 !important;
  font-size: var(--fs-label) !important; letter-spacing: 0.12em !important; line-height: 1.5 !important;
  color: var(--gold-text) !important; margin: 0 0 1.25rem !important; display: flex; align-items: center; gap: 0.75rem; hyphens: manual; }
h1.seo-h1::before { content: ''; width: 1.75rem; height: 2px; background: var(--gold); flex-shrink: 0; position: static; }
.page-hero .hero-slogan, .hero-wrap-legacy .hero-slogan {
  font-family: var(--font-display); font-stretch: 66%; font-weight: 800; text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(3rem, 1.4rem + 7vw, 8.75rem) !important; line-height: 0.9 !important; color: var(--off-white) !important;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) !important; hyphens: auto; overflow-wrap: break-word; }
.page-hero h1:not(.seo-h1) { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem); line-height: 0.94; margin-bottom: 1.5rem; color: var(--off-white); }
.page-hero p, .hero-wrap-legacy p { color: var(--muted) !important; }
.page-hero p strong, .hero-wrap-legacy p strong { color: var(--off-white) !important; }
.page-hero .page-intro, .hero-wrap-legacy > p { font-size: var(--fs-lead) !important; max-width: 40rem; }
.page-hero .section-label { color: var(--gold-text); }
.page-hero .article-byline a { color: var(--off-white); }

/* ---- Vertrauensleiste der Unterseiten: Kuenstler in Display ------ */
.trust-bar-sub {
  --bg: var(--pal-night); --bg-warm: var(--pal-night); --off-white: var(--pal-bone); --muted: var(--pal-night-muted);
  --border: color-mix(in srgb, var(--pal-bone) 22%, var(--pal-night)); --gold-text: var(--pal-accent);
  background: var(--pal-night) !important; color: var(--off-white); }
.trust-bar-sub .trust-inner { max-width: none !important; padding: 1.25rem var(--gutter) !important; justify-content: space-between !important; }
.trust-bar-sub .trust-items { font-family: var(--font-display); font-stretch: 66%; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.75rem); line-height: 1.1; }
.trust-bar-sub .trust-label, .trust-bar-sub-reviews { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-label) !important; }
.trust-bar-sub .mini-review p { font-size: 1.1875rem !important; }

/* ---- Akzentflaechen: Preise, Pakete, Abschluss-CTA ---------------- */
main > section#preise, main > section#pakete, main > section#pricing, main > section#packages, main > section.cta-section {
  --bg: var(--pal-accent);
  --bg-warm: var(--pal-accent);
  --bg-card: color-mix(in srgb, var(--pal-on-accent) 7%, var(--pal-accent));
  --bg-sunk: color-mix(in srgb, var(--pal-on-accent) 10%, var(--pal-accent));
  --off-white: var(--pal-on-accent);
  --muted: var(--pal-on-accent);
  --border: var(--pal-on-accent);
  --gold: var(--pal-on-accent);
  --on-accent: var(--pal-accent);
  --gold-text: var(--pal-on-accent);
  --gold-dim: var(--pal-on-accent);
  --photo: none;
  background: var(--pal-accent) !important; background-image: none; color: var(--off-white);
}
/* Die Faser liegt bereits global ueber allem (body::before) - Akzent hat damit sein Korn. */

/* ---- Abschnitte allgemein: mehr Luft, groessere Kontraste ---------- */
main > section[style*="padding:5rem 2.5rem"] { padding-top: clamp(4rem, 8vw, 7.5rem) !important; padding-bottom: clamp(4rem, 8vw, 7.5rem) !important; }
main > section[style*="2.5rem"] { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
main > section h2 { margin-bottom: clamp(1rem, 2vw, 1.75rem); }
main > section .section-intro { color: var(--muted); max-width: 44rem; }
main > section .section-label { color: var(--gold-text); }
/* Karten auf Flaechen: Tintenkante statt Kasten */
main > section :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box) { border-radius: 0 !important; }

/* ---- Abschluss-CTA: riesige Zeile ---------------------------------- */
.cta-section h2 { font-size: clamp(2.75rem, 1.4rem + 6vw, 8rem); line-height: 0.92; }
.cta-section p { color: var(--off-white) !important; }

/* ---- Artikel: Lesespalte bleibt Papier ----------------------------- */
main > article { font-size: var(--fs-text); }
main > article h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); margin-top: 3.5rem; }
main > article h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); margin-top: 2rem; }

/* Das WeLive-Logo gibt es nur dunkel. Auf Nacht- und Akzentflaechen bekommt es
   eine helle Unterlage statt eines Filters. */
:is(.sec--night, .sec--accent, main > section[style*="var(--bg-warm)"], main > section#preise, main > section#pakete, main > section#pricing, main > section#packages, main > .cta-section, .page-hero, .hero-wrap-legacy) img[src*="logo-welive-dark"] {
  background: var(--pal-bone); padding: 0.35rem 0.6rem; box-sizing: content-box; }

/* Karten-Raster: Kinder duerfen schrumpfen (Mono-Labels in Versalien sind breiter
   als die alte Schrift und haben sonst die Spalte gesprengt, z.B. /projekte/ bei 390 px) */
[class*="-card"] > *, [class*="card-"] > * { min-width: 0; overflow-wrap: break-word; }

/* ---- Bewegung reduzieren ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .srow:hover { padding-left: 0; }
  .faq-q::after, .play-ring { transition: none; }
}

/* ==================================================================
   STIL "PLUGIN" (data-stil="plugin"; Farben: data-palette="plugin" dunkel / "plugin-hell")
   Dunkle Oberflaeche wie eine Audio-Software: Panels mit feiner Kante,
   Analyzer-Raster im Kopf, LED-Punkte an den Modul-Labels, rote
   Akzente mit leichtem Glimmen. Schrift: Archivo in normaler Breite,
   gemischte Schreibung; DM Mono fuer alle Parameter-Labels.
   Alles haengt an :root[data-stil="plugin"] - ohne das Attribut
   gilt das Papier-Design unveraendert.
   ================================================================== */
:root[data-stil="plugin"] {
  --font-display: 'Archivo UI', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text:    'Archivo UI', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --line: color-mix(in srgb, var(--pal-bone) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--pal-bone) 16%, transparent);
  --panel: linear-gradient(180deg, color-mix(in srgb, var(--pal-card) 100%, white 3%) 0%, var(--pal-card) 100%);
  --panel-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent), 0 12px 32px color-mix(in srgb, black 40%, transparent);
  --glow: 0 0 0 1px color-mix(in srgb, var(--pal-accent) 60%, transparent), 0 8px 28px color-mix(in srgb, var(--pal-accent) 32%, transparent);
  --radius: 12px;
  --radius-sm: 8px;
  --border: var(--line-strong);
  --photo: saturate(92%) contrast(102%);
  --photo-hover: none;
  --fs-text: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
}
:root[data-stil="plugin"] body { background: var(--pal-paper); -webkit-font-smoothing: antialiased; }
/* Papierfaser aus, stattdessen ein kaum sichtbarer Verlauf */
:root[data-stil="plugin"] body::before { opacity: 0.05; mix-blend-mode: screen; }

/* ---- Flaechen: Papier wird Panel-Grau, Nacht noch dunkler, Akzent wird Panel mit roter Kante */
:root[data-stil="plugin"] :is(.sec--night, main > section[style*="var(--bg-warm)"], .page-hero, .hero-wrap-legacy, .trust-bar-sub) {
  background-image: none; }
:root[data-stil="plugin"] :is(.sec--accent, main > section#preise, main > section#pakete, main > section#pricing, main > section#packages, main > section.cta-section) {
  --bg: var(--pal-night);
  --bg-warm: var(--pal-night);
  --bg-card: var(--pal-card);
  --bg-sunk: var(--pal-paper);
  --off-white: var(--pal-bone);
  --muted: var(--pal-night-muted);
  --border: var(--line-strong);
  --gold: var(--pal-accent);
  --on-accent: var(--pal-on-accent);
  --gold-text: var(--pal-accent-deep);
  --gold-dim: var(--pal-accent-deep);
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--pal-accent) 14%, var(--pal-night)) 0%, var(--pal-night) 60%) !important;
  border-top: 1px solid color-mix(in srgb, var(--pal-accent) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--pal-accent) 25%, transparent);
}

/* ---- Schrift: modern, gemischte Schreibung -------------------------- */
:root[data-stil="plugin"] :is(h1, h2, h3, h4, .t-display) {
  font-family: var(--font-display) !important; font-stretch: 100% !important; text-transform: none !important;
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; }
:root[data-stil="plugin"] h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 6rem); }
:root[data-stil="plugin"] h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem); }
:root[data-stil="plugin"] h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); letter-spacing: -0.015em; }
:root[data-stil="plugin"] :is(.hero-slogan, .page-hero .hero-slogan, .hero-wrap-legacy .hero-slogan, #hero .hero-slogan) {
  font-family: var(--font-display) !important; font-stretch: 100% !important; text-transform: none !important;
  font-weight: 800; letter-spacing: -0.04em !important; line-height: 0.95 !important; }
:root[data-stil="plugin"] #hero .hero-slogan { font-size: clamp(3rem, 1.4rem + 6.4vw, 8rem); }
:root[data-stil="plugin"] :is(.page-hero, .hero-wrap-legacy) .hero-slogan { font-size: clamp(2.75rem, 1.3rem + 5.6vw, 7rem) !important; }
:root[data-stil="plugin"] :is(h1, h2, h3, .hero-slogan) :is(em, i) { color: var(--pal-accent); text-shadow: 0 0 28px color-mix(in srgb, var(--pal-accent) 45%, transparent); }
:root[data-stil="plugin"] em, :root[data-stil="plugin"] i { font-family: var(--font-text); }
:root[data-stil="plugin"] :is(.review-text, .mini-review p) { font-style: normal !important; }
/* Grosse Zahlen und Preise: Tabellenziffern wie auf einem Display */
:root[data-stil="plugin"] :is(.preis-wert, .lx-preis, .lx-n, .stat-num, .rating-value, .ablauf-n, .arbeit-cap strong, .trust-items, .trust-bar .trust-items) {
  font-family: var(--font-display) !important; font-stretch: 100% !important; text-transform: none !important;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:root[data-stil="plugin"] :is(.lx-name) { font-family: var(--font-display); font-stretch: 100%; text-transform: none; letter-spacing: -0.02em; font-weight: 700; }

/* ---- Modul-Labels mit LED ------------------------------------------- */
:root[data-stil="plugin"] :is(.section-label, h1.seo-h1, #hero h1, .welive-eyebrow) { color: var(--pal-night-muted) !important; }
:root[data-stil="plugin"] :is(.section-label, .welive-eyebrow)::after { content: none; }
:root[data-stil="plugin"] .section-label { display: inline-flex; align-items: center; gap: 0.6rem; }
:root[data-stil="plugin"] .section-label::before,
:root[data-stil="plugin"] h1.seo-h1::before, :root[data-stil="plugin"] #hero h1::before {
  content: '' !important; counter-increment: none !important; position: static !important;
  width: 0.5rem !important; height: 0.5rem !important; border-radius: 50%; background: var(--pal-accent) !important;
  box-shadow: 0 0 10px var(--pal-accent), 0 0 2px var(--pal-accent); flex-shrink: 0; font-size: 0; }

/* ---- Kopfzeile: dunkles Glas ---------------------------------------- */
:root[data-stil="plugin"] :is(body > nav, nav:has(> .nav-top)) {
  background: color-mix(in srgb, var(--pal-night) 82%, transparent); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line); }
:root[data-stil="plugin"] .nav-word b { font-family: var(--font-display); font-stretch: 100%; text-transform: none; font-weight: 800; letter-spacing: -0.04em; font-size: 1.5rem; }
:root[data-stil="plugin"] .nav-dd-menu { border-radius: var(--radius); background: var(--pal-card); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px color-mix(in srgb, black 55%, transparent); overflow: hidden; }
:root[data-stil="plugin"] .nav-mobile { background: var(--pal-night); }

/* ---- Knoepfe: abgerundet, Akzent glimmt ----------------------------- */
:root[data-stil="plugin"] .btn { border-radius: var(--radius-sm); border-width: 1px; border-color: var(--line-strong); background: color-mix(in srgb, var(--pal-bone) 4%, transparent); color: var(--off-white); }
:root[data-stil="plugin"] .btn:hover { border-color: var(--pal-bone); color: var(--off-white); background: color-mix(in srgb, var(--pal-bone) 8%, transparent); }
:root[data-stil="plugin"] :is(.btn-primary, .btn.btn-primary, .sticky-cta, .pl-pop-send, #cookie-accept) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pal-accent) 100%, white 12%), var(--pal-accent)) !important;
  color: var(--pal-on-accent) !important; border-color: transparent !important; box-shadow: var(--glow); border-radius: var(--radius-sm); }
:root[data-stil="plugin"] :is(.btn-primary, .btn.btn-primary):hover { box-shadow: 0 0 0 1px var(--pal-accent), 0 10px 36px color-mix(in srgb, var(--pal-accent) 50%, transparent); }

/* ---- Panels: Karten, Kaesten, FAQ, Preise --------------------------- */
:root[data-stil="plugin"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .clients-bar, .honest-banner, .niche-banner,
  #blog-preview a[style*="border"], .standards-grid > *, .lx-row, .faq-item, .spotify-facade, .arbeit-film, .arbeit-audio, .welive-video, .yt-facade) {
  border-radius: var(--radius) !important; overflow: hidden; }
:root[data-stil="plugin"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .clients-bar, .honest-banner, .niche-banner,
  #blog-preview a[style*="border"], .standards-grid > *) {
  background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: var(--panel-shadow);
  padding: clamp(1.25rem, 2vw, 1.75rem) !important; }
:root[data-stil="plugin"] :is(.preis-zeilen, .ablauf-steps, .reviews-grid, .awards-list) { gap: 1rem !important; }
:root[data-stil="plugin"] .preis-zeile:hover, :root[data-stil="plugin"] #blog-preview a[style*="border"]:hover,
:root[data-stil="plugin"] .project-card:hover { border-color: color-mix(in srgb, var(--pal-accent) 55%, transparent) !important; transform: translateY(-2px); }
:root[data-stil="plugin"] .preis-wert { color: var(--off-white); }
:root[data-stil="plugin"] .preis-was { color: var(--pal-night-muted); }

/* Leistungsliste als Kanalzug-Zeilen */
:root[data-stil="plugin"] .lx-row { background: var(--panel); border: 1px solid var(--line) !important; margin-bottom: 0.6rem; padding: 1.25rem 1.5rem !important; }
:root[data-stil="plugin"] .lx-row:hover { border-color: color-mix(in srgb, var(--pal-accent) 55%, transparent) !important; }
:root[data-stil="plugin"] .lx-n { font-family: var(--font-label) !important; font-size: 0.875rem !important; color: var(--pal-accent) !important; }
:root[data-stil="plugin"] .lx-spez { border-radius: 999px; border-color: color-mix(in srgb, var(--pal-accent) 60%, transparent); color: var(--pal-accent-deep); }

/* FAQ als Panels */
:root[data-stil="plugin"] .faq-item { background: var(--panel); border: 1px solid var(--line) !important; margin-bottom: 0.6rem; padding: 0 1.25rem; }
:root[data-stil="plugin"] .faq-q { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); letter-spacing: -0.01em; font-weight: 600; }
:root[data-stil="plugin"] .faq-item.open { border-color: color-mix(in srgb, var(--pal-accent) 45%, transparent) !important; }
:root[data-stil="plugin"] .faq-a { color: var(--muted); }

/* Tags und Chips als Pillen */
:root[data-stil="plugin"] :is(.tag, .clients-tags .tag, .dd-spez, .offer-tag) { border-radius: 999px !important; }

/* Formularfelder wie Eingabefelder einer Software */
:root[data-stil="plugin"] :is(#contact input, #contact textarea, #contact select, .popup-body input, .popup-body textarea, .popup-body select, .pl-pop-body input, .pl-pop-body textarea, .pl-pop-body select) {
  background: var(--pal-paper) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important;
  padding: 0.85rem 1rem !important; color: var(--pal-bone) !important; font-family: var(--font-text) !important; font-size: 1rem !important; }
:root[data-stil="plugin"] :is(#contact input, #contact textarea, #contact select):focus { border-color: var(--pal-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-accent) 25%, transparent); }
:root[data-stil="plugin"] #contact :is(input, textarea)::placeholder { color: var(--pal-night-muted); }

/* ---- Kopf: Analyzer-Raster ueber dem Foto --------------------------- */
:root[data-stil="plugin"] :is(#hero, .page-hero, .hero-wrap-legacy)::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--pal-bone) 6%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--pal-bone) 4%, transparent) 0 1px, transparent 1px 96px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 45%, black 100%); mask-image: linear-gradient(90deg, transparent 0%, black 45%, black 100%); }
:root[data-stil="plugin"] #hero .hero-img::after { z-index: 1; }
:root[data-stil="plugin"] #hero > div:first-child { z-index: 3; }
:root[data-stil="plugin"] #hero .hero-badge { border-radius: var(--radius); background: color-mix(in srgb, var(--pal-card) 80%, transparent); backdrop-filter: blur(10px); border-color: var(--line-strong); }
/* Wellenform / Filmstreifen glimmen */
:root[data-stil="plugin"] :is(.hero-waveform--live, .hero-filmstrip--live, .live-wave) { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pal-accent) 55%, transparent)); }

/* ---- Vertrauensleisten ---------------------------------------------- */
:root[data-stil="plugin"] :is(.trust-bar, .trust-bar-sub) { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
:root[data-stil="plugin"] :is(.trust-bar, .trust-bar-sub) .trust-items { font-weight: 600 !important; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem) !important; letter-spacing: -0.01em; }

/* ---- Fuss ----------------------------------------------------------- */
:root[data-stil="plugin"] footer { border-top: 1px solid var(--line); }
:root[data-stil="plugin"] footer .footer-wordmark { font-stretch: 100%; text-transform: none; letter-spacing: -0.04em; font-size: 1.5rem; }

/* ---- Fotos: abgerundet, ohne Papierfilter --------------------------- */
:root[data-stil="plugin"] :is(.photo-item, .case-photo, .poster-frame, .ph-img-wrap, .grain, .thumb) { border-radius: var(--radius); }
:root[data-stil="plugin"] .photos-strip { gap: 0.6rem; padding: 0 var(--gutter); }

/* ---- Play-Ring mit Glimmen ------------------------------------------ */
:root[data-stil="plugin"] :is(.yt-facade, .welive-video):hover .play-btn { box-shadow: var(--glow) !important; }
:root[data-stil="plugin"] .spotify-facade { background: var(--panel) !important; border: 1px solid var(--line); }
:root[data-stil="plugin"] :is(.arbeit-film, .yt-facade) { background: var(--pal-card) !important; }

/* ---- Plugin, Stufe 2: Analyzer, Pegel, Lichtkegel, LCD-Preise -------- */
:root[data-stil="plugin"] .pl-analyzer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, black 72%); mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, black 72%); }
:root[data-stil="plugin"] .pl-meter { position: absolute; z-index: 2; right: var(--gutter); top: clamp(5rem, 9vw, 7.5rem); pointer-events: none;
  padding: 10px 8px; background: color-mix(in srgb, var(--pal-night) 70%, transparent); border: 1px solid var(--line); border-radius: 10px; box-sizing: content-box; }
@media (max-width: 860px) { :root[data-stil="plugin"] .pl-meter { display: none; } }
/* Waveform/Filmstreifen der Unterseiten treten zurueck, der Analyzer uebernimmt */
:root[data-stil="plugin"] :is(.page-hero, .hero-wrap-legacy) :is(.hero-waveform--live, .hero-filmstrip--live) { opacity: 0.45 !important; }
:root[data-stil="plugin"] :is(#hero, .page-hero, .hero-wrap-legacy) > :not(canvas):not(svg):not(.hero-img) { z-index: 3; }

/* Lichtkegel auf Panels (Position setzt plugin-ui.js) */
:root[data-stil="plugin"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .lx-row, .faq-item, .standards-grid > *) {
  position: relative; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
:root[data-stil="plugin"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .lx-row, .faq-item, .standards-grid > *)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pal-accent) 16%, transparent), transparent 70%); }
:root[data-stil="plugin"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .lx-row, .faq-item, .standards-grid > *):hover::after { opacity: 1; }
/* Oberkante leuchtet beim Hovern wie ein aktives Modul */
:root[data-stil="plugin"] :is(.preis-zeile, .lx-row, .project-card, .review-card, .tier, .preis, .price-card):hover {
  box-shadow: inset 0 2px 0 var(--pal-accent), 0 18px 40px color-mix(in srgb, black 50%, transparent), 0 0 32px color-mix(in srgb, var(--pal-accent) 14%, transparent); }

/* Preise als LCD-Anzeige mit Pegelbalken darunter */
:root[data-stil="plugin"] :is(.preis-wert, .lx-preis) { color: var(--pal-bone) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--pal-accent) 35%, transparent); }
:root[data-stil="plugin"] .preis-zeile .price-net::after {
  content: ''; display: block; height: 6px; margin: 0.9rem 0 0.4rem; border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, var(--pal-card) 7px 9px),
    linear-gradient(90deg, color-mix(in srgb, var(--pal-bone) 55%, transparent) 0%, color-mix(in srgb, var(--pal-bone) 70%, transparent) 70%, var(--pal-accent) 88%, var(--pal-accent) 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0%, black var(--lvl, 72%), color-mix(in srgb, black 12%, transparent) var(--lvl, 72%));
  mask-image: linear-gradient(90deg, black 0%, black var(--lvl, 72%), color-mix(in srgb, black 12%, transparent) var(--lvl, 72%)); }
:root[data-stil="plugin"] .preis-zeile:nth-child(2) .price-net::after { --lvl: 80%; }
:root[data-stil="plugin"] .preis-zeile:nth-child(3) .price-net::after { --lvl: 94%; }
:root[data-stil="plugin"] .preis-zeile:nth-child(4) .price-net::after { --lvl: 86%; }

/* Anfrage-Knopf im Kopf als Aufnahmeknopf */
:root[data-stil="plugin"] .nav-cta-desk::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--pal-on-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pal-on-accent) 25%, transparent); animation: pl-rec 1.6s ease-in-out infinite; }
@keyframes pl-rec { 50% { opacity: 0.25; } }

/* Abschnitte: Lichtpfuetze von oben, Modulrahmen um den Inhalt */
:root[data-stil="plugin"] main > section:not(#hero):not(#studio-photos) {
  background-image: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--pal-bone) 4%, transparent), transparent 70%) !important; }
:root[data-stil="plugin"] main > section h2 { text-shadow: 0 1px 0 color-mix(in srgb, black 60%, transparent); }

/* Einblenden beim Scrollen (nur mit JS, nicht bei "Bewegung reduzieren").
   Bewusst "fail-open": Ohne Klasse ist alles sichtbar; erst .is-in spielt eine
   kurze Einblendung ab. Faellt das Skript aus, fehlt nur die Animation. */
:root.pl-reveal[data-stil="plugin"] main .is-in { animation: pl-in 0.55s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both; }
@keyframes pl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :root[data-stil="plugin"] .nav-cta-desk::before { animation: none; } }

/* ---- Plugin: helle Fassung (data-palette="plugin-hell") --------------- */
:root[data-stil="plugin"][data-palette$="-hell"] {
  --panel: linear-gradient(180deg, #ffffff00 0%, #ffffff00 100%), var(--pal-card);
  --panel-shadow: inset 0 1px 0 color-mix(in srgb, white 80%, transparent), 0 1px 2px color-mix(in srgb, var(--pal-ink) 8%, transparent), 0 10px 28px color-mix(in srgb, var(--pal-ink) 8%, transparent);
  --glow: 0 0 0 1px color-mix(in srgb, var(--pal-accent) 50%, transparent), 0 8px 24px color-mix(in srgb, var(--pal-accent) 25%, transparent);
}
:root[data-stil="plugin"][data-palette$="-hell"] body::before { opacity: 0.08; mix-blend-mode: multiply; }
:root[data-stil="plugin"][data-palette$="-hell"] .nav-logo img { filter: brightness(0); }
:root[data-stil="plugin"][data-palette$="-hell"] main > section:not(#hero):not(#studio-photos) {
  background-image: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, white 70%, transparent), transparent 70%) !important; }
:root[data-stil="plugin"][data-palette$="-hell"] :is(h1, h2, h3, .hero-slogan) :is(em, i) { text-shadow: none; }
:root[data-stil="plugin"][data-palette$="-hell"] main > section h2 { text-shadow: none; }
:root[data-stil="plugin"][data-palette$="-hell"] :is(.preis-wert, .lx-preis) { text-shadow: none; }
:root[data-stil="plugin"][data-palette$="-hell"] .pl-meter { background: color-mix(in srgb, var(--pal-card) 85%, transparent); }
:root[data-stil="plugin"][data-palette$="-hell"] .carousel-btn { background: color-mix(in srgb, var(--pal-card) 85%, transparent); }

/* ---- Umschalter Hell/Dunkel in der Kopfzeile -------------------------- */
.skin-toggle { display: none; }
:root[data-stil="plugin"] .skin-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 999px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--pal-bone) 5%, transparent);
  color: var(--off-white); cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color 0.2s, background-color 0.2s; }
:root[data-stil="plugin"] .skin-toggle:hover { border-color: var(--pal-accent); }
:root[data-stil="plugin"] .skin-toggle svg { width: 1.1rem; height: 1.1rem; }
:root[data-stil="plugin"] .skin-toggle .i-sonne { display: none; }
:root[data-stil="plugin"]:not([data-palette$="-hell"]) .skin-toggle .i-sonne { display: block; }
:root[data-stil="plugin"]:not([data-palette$="-hell"]) .skin-toggle .i-mond { display: none; }

/* Analyzer nicht von der Inhaltsbreite des Kopfs begrenzen */
:root[data-stil="plugin"] :is(.pl-analyzer, .pl-meter) { max-width: none !important; }
:root[data-stil="plugin"] .pl-analyzer { opacity: 0.7; }

/* ---- Plugin, Stufe 3: Rundungen, Abstaende, Drehregler, Film-Kopf ------ */

/* Ueberall runde Ecken: Bilder, Videos, Karten, Kaesten */
:root[data-stil="plugin"] main :is(img, iframe, video):not(.nav-logo img):not(.welive-logo img):not([src*="logo"]) { border-radius: var(--radius-sm); }
:root[data-stil="plugin"] main :is(.blog-card, .workflow-step, .factor, .price-box, .hub-card, .press-badge, .step, .problem-card, .audience-card,
  .gear-cat, .process-step, .compare-player, .ref-card, .rate, .handle-col, .photo-frame, .welive-banner, .tier, .price-card, .formula, .idea,
  .crosslink, .welive-quote, .ton-box, div.cta-section, details.mehr, .compare-list, .episode, .spotify-wrap, .arbeit-audio,
  a[style*="border:1px"], a[style*="border: 1px"], div[style*="border:1px"], div[style*="border: 1px"], div[style*="background:var(--bg-card)"], div[style*="background: var(--bg-card)"]) {
  border-radius: var(--radius) !important; overflow: hidden; }
:root[data-stil="plugin"] main :is(.niche-tag, .compare-tab, .tag, .lx-spez) { border-radius: 999px !important; }
:root[data-stil="plugin"] main summary { border-radius: var(--radius-sm); }
/* Panel-Optik fuer Karten, die bisher flach waren (ohne Innenabstand zu erzwingen) */
:root[data-stil="plugin"] main :is(.blog-card, .workflow-step, .factor, .price-box, .hub-card, .press-badge, .step, .problem-card, .audience-card,
  .gear-cat, .process-step, .ref-card, .rate, .handle-col, .formula, .idea, .crosslink, .welive-quote, .ton-box, .welive-banner, .compare-player) {
  background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: var(--panel-shadow); }

/* Luft zwischen den Feldern: Raster, die frueher per 1-px-Fuge getrennt waren,
   bekommen echte Abstaende; die Fugenfarbe dahinter entfaellt. */
:root[data-stil="plugin"] main :is(.pricing-grid, .workflow-steps, .offer-grid, .compare-list, .tiers, .handle-grid, .rates, .steps, .hub-grid,
  .guide-steps, .problem-grid, .process-steps, .ref-video-grid, .video-grid3, .preis-zeilen, .ablauf-steps, .standards-grid, .reviews-grid,
  .audience-grid, .factor-grid, .gear-grid, .ref-grid, .press-grid, .blog-grid, .project-grid, .awards-list, .contact-details) {
  gap: clamp(0.9rem, 1.6vw, 1.25rem) !important; background: transparent !important; border: 0 !important; }
:root[data-stil="plugin"] main [style*="gap:8px"], :root[data-stil="plugin"] main [style*="gap: 8px"],
:root[data-stil="plugin"] main [style*="gap:1px"], :root[data-stil="plugin"] main [style*="gap: 1px"] { gap: clamp(0.9rem, 1.6vw, 1.25rem) !important; }
:root[data-stil="plugin"] main :is(.faq-list) { display: flex; flex-direction: column; gap: 0.75rem !important; }
:root[data-stil="plugin"] main .faq-item { margin-bottom: 0 !important; }
:root[data-stil="plugin"] main .lx-row { margin-bottom: 0.85rem; }
:root[data-stil="plugin"] main :is(.preis-zeile, .tier, .price-card, .price-box, .review-card, .award-item, .contact-row) + :is(.preis-zeile, .tier, .price-card, .price-box, .review-card, .award-item, .contact-row) { margin-top: 0; }
/* Innenabstand fuer Karten, die bisher ohne Rand bis an die Kante gingen */
:root[data-stil="plugin"] main :is(.workflow-step, .factor, .step, .problem-card, .audience-card, .gear-cat, .process-step, .ref-card, .rate, .hub-card, .blog-card, .idea, .crosslink, .ton-box) {
  padding: clamp(1.1rem, 2vw, 1.6rem) !important; }

/* ---- Listen mit Haken/Pfeil: Zeichen haengt links, Text daneben ----------
   Gilt fuer alle Stile. Das Zeichen steht absolut in einer eigenen Spalte,
   damit es nie mehr in den Text ragt - egal wie gross die Schrift ist. */
main :is(.included-list, .price-includes, .tier-includes, .spectrum-list) > li {
  display: block !important; position: relative; padding-left: 1.75em !important; text-indent: 0 !important; gap: 0 !important; }
main :is(.included-list, .price-includes, .tier-includes, .spectrum-list) > li::before {
  position: absolute; left: 0.1em; top: auto; width: 1.2em; margin: 0 !important; text-indent: 0 !important; display: inline-block;
  line-height: inherit; text-align: center; }

/* ---- Drehregler ---------------------------------------------------------- */
.pl-knob { display: none; }
:root[data-stil="plugin"] .pl-knob { display: block; position: absolute; top: 0.9rem; right: 0.9rem; width: 3rem; height: 3rem; z-index: 4;
  cursor: ns-resize; touch-action: none; filter: drop-shadow(0 4px 8px color-mix(in srgb, black 35%, transparent)); }
:root[data-stil="plugin"] .pl-knob svg { width: 100%; height: 100%; overflow: visible; }
:root[data-stil="plugin"] .pl-knob .k-track, :root[data-stil="plugin"] .pl-knob .k-val { fill: none; stroke-width: 3.5; stroke-linecap: round;
  transform: rotate(135deg); transform-origin: 32px 32px; }
:root[data-stil="plugin"] .pl-knob .k-track { stroke: color-mix(in srgb, var(--pal-bone) 14%, transparent); stroke-dasharray: 127.2 169.6; }
:root[data-stil="plugin"] .pl-knob .k-val { stroke: var(--pal-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pal-accent) 70%, transparent)); transition: stroke-dasharray 0.25s ease; }
:root[data-stil="plugin"] .pl-knob .k-cap { fill: var(--pal-card); stroke: var(--line-strong); stroke-width: 1;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, white 8%, transparent)); }
:root[data-stil="plugin"] .pl-knob .k-ptr { fill: var(--pal-bone); transition: transform 0.25s ease; }
:root[data-stil="plugin"] :is(.preis-zeile, .tier, .preis, .price-card, .price-box, .rate, .offer-card) { position: relative; }
@media (prefers-reduced-motion: reduce) { :root[data-stil="plugin"] .pl-knob :is(.k-val, .k-ptr) { transition: none; } }

/* ---- Film-Kopf: Timeline unten statt Spektrum, Histogramm statt Pegel ---- */
:root[data-stil="plugin"] .pl-film .pl-timeline { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, black 55%); mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, black 55%); opacity: 0.9; }
:root[data-stil="plugin"] .pl-film .hero-filmstrip--live { opacity: 0 !important; }
:root[data-stil="plugin"] .pl-scope { width: auto; }
/* Film-Kopf: Filmstreifen weicht der Timeline, Inhalt endet ueber der Timeline */
:root[data-stil="plugin"] .pl-film :is(.hero-filmstrip--live, .hero-waveform--live) { display: none !important; }
/* Hinweis-Schilder auf Karten als Pillen */
:root[data-stil="plugin"] :is(.price-badge, .tier-badge, .service-specialty-badge, .niche-tag) {
  border-radius: 999px !important; padding: 0.3rem 0.8rem !important; box-shadow: var(--glow); }

/* Einige Seiten setzen den Kopf-Abstand mobil mit !important. Wichtige Regeln
   einer frueheren Ebene gewinnen gegen spaetere - darum stehen diese
   Korrekturen bewusst in @layer base. */
@layer base {
  :root[data-stil="plugin"] :is(.page-hero, .hero-wrap-legacy) { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  :root[data-stil="plugin"] :is(.page-hero, .hero-wrap-legacy):not(.pl-film):has(.hero-waveform) { padding-bottom: clamp(8rem, 12vw, 10rem) !important; }
}
/* Kopfzeile am Handy: Platz fuer den Hell/Dunkel-Knopf */
@media (max-width: 440px) {
  :root[data-stil="plugin"] .nav-studio { display: none !important; }
  :root[data-stil="plugin"] .skin-toggle { width: 2.25rem; height: 2.25rem; }
}
/* Pfeile in Preis-/Paketlisten: gleiche Groesse wie der Text, damit sie auf der Zeile sitzen */
main :is(.price-includes, .tier-includes, .spectrum-list) > li::before { font-size: 0.85em !important; line-height: inherit; }
/* Hoervergleich: Umschalter Vorher/Mix/Master als eine runde Leiste ohne eckigen Rahmen */
:root[data-stil="plugin"] .compare-tabs { border-radius: 999px !important; padding: 3px; gap: 2px; border: 1px solid var(--line-strong) !important; background: color-mix(in srgb, var(--pal-bone) 4%, transparent); }
:root[data-stil="plugin"] .compare-tab + .compare-tab { border-left: 0 !important; }
/* Startseite, Vertrauensleiste: Kuenstler in der ersten Zeile ueber die volle
   Breite, darunter Bewertungen und Auszeichnungen nebeneinander von links -
   statt Auszeichnungen ganz rechts aussen. */
.trust-bar .trust-inner { justify-content: flex-start !important; column-gap: 2.5rem !important; row-gap: 0.6rem !important; }
.trust-bar .trust-inner > .trust-group:first-child { flex: 1 1 100%; }
.trust-bar .trust-award { position: relative; padding-left: 2.5rem; margin-left: -2.5rem; }
.trust-bar .trust-award::before { content: ''; position: absolute; left: 1.2rem; top: 50%; width: 1px; height: 0.9em; transform: translateY(-50%); background: var(--border); }

/* ==================================================================
   VARIANTE "RUHIG" (data-variante="ruhig")
   Gleiches Geruest wie der Plugin-Stil (Panels, Rundungen, Hell/Dunkel),
   aber ohne Software-Spielzeug: kein Analyzer, keine Pegel, kein Raster,
   kein Glimmen, kein Blinken, keine Einblend-Animation. Waermere Toene,
   Fliesstext in Newsreader (Serife) fuer eine handgemachte Anmutung.
   Vergleich im Browser: ?variante=ruhig bzw. ?variante=laut an die Adresse.
   ================================================================== */
:root[data-variante="ruhig"] {
  --font-text: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --fs-text: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --glow: 0 1px 2px color-mix(in srgb, black 20%, transparent);
  --panel: var(--pal-card);
  --panel-shadow: 0 1px 2px color-mix(in srgb, black 12%, transparent);
  --radius: 14px;
}
:root[data-variante="ruhig"][data-palette="ruhig"] { --panel-shadow: 0 1px 0 color-mix(in srgb, white 4%, transparent) inset, 0 8px 24px color-mix(in srgb, black 25%, transparent); }
/* Papierfaser leise zurueck - das Korn passt zum Handgemachten */
:root[data-variante="ruhig"] body::before { opacity: 0.07; mix-blend-mode: multiply; }
:root[data-variante="ruhig"][data-palette="ruhig"] body::before { opacity: 0.05; mix-blend-mode: screen; }

/* Kein Raster, kein Glimmen, kein Blinken */
:root[data-variante="ruhig"] :is(#hero, .page-hero, .hero-wrap-legacy)::after { content: none !important; }
:root[data-variante="ruhig"] :is(h1, h2, h3, .hero-slogan) :is(em, i),
:root[data-variante="ruhig"] main > section h2,
:root[data-variante="ruhig"] :is(.preis-wert, .lx-preis) { text-shadow: none !important; }
:root[data-variante="ruhig"] :is(.section-label, h1.seo-h1, #hero h1)::before { box-shadow: none !important; width: 0.4rem !important; height: 0.4rem !important; }
:root[data-variante="ruhig"] .nav-cta-desk::before { content: none !important; }
:root[data-variante="ruhig"] :is(.hero-waveform--live, .hero-filmstrip--live, .live-wave) { filter: none !important; }
:root[data-variante="ruhig"] :is(.btn-primary, .btn.btn-primary, .sticky-cta, .pl-pop-send, #cookie-accept) { background: var(--pal-accent) !important; box-shadow: none !important; }
:root[data-variante="ruhig"] :is(.btn-primary, .btn.btn-primary):hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--pal-accent) 22%, transparent) !important; }
:root[data-variante="ruhig"] :is(.price-badge, .tier-badge, .service-specialty-badge, .niche-tag) { box-shadow: none !important; }
:root[data-variante="ruhig"] main > section:not(#hero):not(#studio-photos) { background-image: none !important; }
:root[data-variante="ruhig"] :is(.sec--accent, main > section#preise, main > section#pakete, main > section#pricing, main > section#packages, main > section.cta-section) {
  background: var(--pal-night) !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Pegelbalken unter den Preisen und Lichtkegel auf Panels entfallen */
:root[data-variante="ruhig"] .preis-zeile .price-net::after { content: none !important; }
:root[data-variante="ruhig"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .lx-row, .faq-item, .standards-grid > *)::after { content: none !important; }
:root[data-variante="ruhig"] :is(.preis-zeile, .lx-row, .project-card, .review-card, .tier, .preis, .price-card):hover {
  box-shadow: var(--panel-shadow), 0 0 0 1px color-mix(in srgb, var(--pal-accent) 40%, transparent) !important; transform: none !important; }
:root[data-variante="ruhig"] .preis-zeile:hover, :root[data-variante="ruhig"] #blog-preview a[style*="border"]:hover,
:root[data-variante="ruhig"] .project-card:hover { transform: none !important; }

/* Schrift: Ueberschriften etwas weniger gedraengt, Zitate wieder kursiv */
:root[data-variante="ruhig"] :is(h1, h2, h3, h4, .t-display) { letter-spacing: -0.02em; font-weight: 700; }
:root[data-variante="ruhig"] :is(.hero-slogan, .page-hero .hero-slogan, .hero-wrap-legacy .hero-slogan, #hero .hero-slogan) { letter-spacing: -0.03em !important; font-weight: 700; }
:root[data-variante="ruhig"] :is(.review-text, .mini-review p) { font-style: italic !important; font-family: var(--font-text); }
:root[data-variante="ruhig"] :is(.faq-q, .lx-name) { letter-spacing: -0.01em; }

/* Fotos im Kopf: etwas mehr Bild, etwas weniger Abdunkelung */
:root[data-variante="ruhig"] .page-hero[style*="--hero-photo"]::before, :root[data-variante="ruhig"] .hero-wrap-legacy[style*="--hero-photo"]::before { filter: saturate(0.92); }

/* ==================================================================
   VARIANTE "ANALOG" (data-variante="analog")
   Wie ein altes Mischpult mit Notizen drauf: flach (2D), verblasste
   Farben, Papier- und Siebdruck-Korn, Kreppband-Beschriftungen in
   Handschrift, Dymo-Praegeband als Knoepfe, leicht unregelmaessige
   Kanten. Bewegung nur leise: ein VU-Zeiger bzw. eine Filmspule im
   Kopf und die bestehende Wellenform, verblasst.
   Vergleich im Browser: ?variante=analog | ruhig | laut
   ================================================================== */
:root[data-variante="analog"] {
  --font-display: 'Archivo', 'Archivo Fallback', 'Arial Narrow', Impact, sans-serif;
  --font-text: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --fs-text: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --radius: 16px 22px 14px 24px / 22px 14px 20px 16px;   /* leicht schief, wie von Hand */
  --radius-sm: 6px 9px 5px 10px / 9px 5px 8px 6px;
  --ink-line: color-mix(in srgb, var(--pal-ink) 78%, transparent);
  --panel: var(--pal-card);
  --panel-shadow: 3px 4px 0 color-mix(in srgb, var(--pal-ink) 70%, transparent);
  --glow: 3px 3px 0 color-mix(in srgb, var(--pal-ink) 75%, transparent);
  --line: color-mix(in srgb, var(--pal-ink) 30%, transparent);
  --line-strong: var(--ink-line);
  --photo: sepia(28%) saturate(78%) contrast(104%) brightness(0.98);
  --photo-hover: sepia(10%) saturate(92%);
}
/* Korn: Papierfaser deutlich, wie Siebdruck */
:root[data-variante="analog"] body::before { opacity: 0.32; mix-blend-mode: multiply; background-size: 260px 260px; }
:root[data-variante="analog"]:not([data-palette$="-hell"]) body::before { opacity: 0.1; mix-blend-mode: screen; }
:root[data-variante="analog"] main > section:not(#hero):not(#studio-photos) { background-image: none !important; }

/* ---- Schrift: Ueberschriften wie Pult-Beschriftung (schmal, Versalien) ---- */
:root[data-variante="analog"] :is(h1, h2, h3, h4, .t-display) {
  font-family: var(--font-display) !important; font-stretch: 66% !important; text-transform: uppercase !important;
  font-weight: 800; letter-spacing: 0.005em; line-height: 0.95; }
:root[data-variante="analog"] :is(.hero-slogan, .page-hero .hero-slogan, .hero-wrap-legacy .hero-slogan, #hero .hero-slogan) {
  font-family: var(--font-display) !important; font-stretch: 66% !important; text-transform: uppercase !important;
  letter-spacing: 0 !important; line-height: 0.9 !important; font-weight: 800; }
:root[data-variante="analog"] :is(h1, h2, h3, .hero-slogan) :is(em, i) {
  text-shadow: none !important; position: relative; display: inline-block; }
/* Handgemalte Unterstreichung unter dem Akzentwort */
:root[data-variante="analog"] :is(h1, h2, .hero-slogan) :is(em, i)::after {
  content: ''; position: absolute; left: -2%; right: -3%; bottom: -0.08em; height: 0.16em; background: var(--pal-accent); opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 7' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 7' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
:root[data-variante="analog"] :is(.preis-wert, .lx-preis, .stat-num, .rating-value, .ablauf-n, .lx-n) {
  font-family: var(--font-display) !important; font-stretch: 66% !important; text-transform: uppercase !important; text-shadow: none !important; letter-spacing: 0; }
:root[data-variante="analog"] :is(.lx-name, .faq-q) { font-family: var(--font-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: 0.01em; font-weight: 800; }
:root[data-variante="analog"] .faq-q { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
:root[data-variante="analog"] :is(.review-text, .mini-review p) { font-style: italic !important; font-family: var(--font-text); }
:root[data-variante="analog"] .nav-word b { font-stretch: 66%; text-transform: uppercase; letter-spacing: 0; font-size: 1.85rem; }
:root[data-variante="analog"] footer .footer-wordmark { font-stretch: 66%; text-transform: uppercase; letter-spacing: 0; font-size: 1.9rem; }

/* ---- Kreppband-Beschriftung (Handschrift auf Tape) -------------------- */
:root[data-variante="analog"] :is(.section-label, h1.seo-h1, #hero h1, .welive-eyebrow) {
  display: inline-block !important; font-family: var(--font-hand) !important; font-weight: 400 !important; font-stretch: normal !important;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem) !important; letter-spacing: 0.02em !important; text-transform: none !important; line-height: 1.15 !important;
  color: var(--pal-night) !important; background: var(--pal-bone); padding: 0.3rem 0.9rem 0.25rem !important; transform: rotate(-1.6deg);
  clip-path: polygon(0 6%, 2% 0, 30% 4%, 60% 0, 98% 3%, 100% 0, 99% 48%, 100% 96%, 97% 100%, 62% 96%, 30% 100%, 3% 97%, 0 100%, 1% 52%);
  box-shadow: none !important; }
:root[data-variante="analog"][data-palette$="-hell"] :is(.section-label, h1.seo-h1, #hero h1, .welive-eyebrow) {
  color: var(--pal-ink) !important; background: color-mix(in srgb, var(--pal-card) 70%, var(--pal-night)); }
:root[data-variante="analog"] :is(.section-label, h1.seo-h1, #hero h1)::before { content: none !important; display: none !important; }
:root[data-variante="analog"] .section-label:nth-of-type(even) { transform: rotate(1.2deg); }

/* ---- Panels: flach, Tintenkante, leicht schief ------------------------ */
:root[data-variante="analog"][data-stil="plugin"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .clients-bar, .honest-banner, .niche-banner,
  #blog-preview a[style*="border"], .standards-grid > *, .lx-row, .faq-item, .workflow-step, .factor, .price-box, .hub-card, .step, .problem-card,
  .audience-card, .gear-cat, .process-step, .ref-card, .rate, .blog-card, .compare-player, .spotify-facade, .formula, .idea, .crosslink, .welive-quote, .ton-box) {
  background: var(--panel) !important; border: 2px solid var(--ink-line) !important; box-shadow: var(--panel-shadow) !important;
  border-radius: var(--radius) !important; }
:root[data-variante="analog"] :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .lx-row, .faq-item, .standards-grid > *)::after { content: none !important; }
:root[data-variante="analog"] :is(.preis-zeile, .lx-row, .project-card, .review-card, .tier, .preis, .price-card, #blog-preview a[style*="border"]):hover {
  transform: translate(-2px, -2px) !important; box-shadow: 5px 6px 0 color-mix(in srgb, var(--pal-ink) 75%, transparent) !important; }
:root[data-variante="analog"] .preis-zeile .price-net::after { content: none !important; }
:root[data-variante="analog"] main :is(img, iframe, video):not([src*="logo"]) { border-radius: var(--radius-sm); }
:root[data-variante="analog"] :is(.price-badge, .tier-badge, .service-specialty-badge, .niche-tag, .tag, .lx-spez, .dd-spez) {
  border-radius: 3px !important; box-shadow: none !important; }

/* ---- Knoepfe: Dymo-Praegeband ---------------------------------------- */
:root[data-variante="analog"] .btn { border-radius: 4px; border: 2px solid var(--ink-line); background: transparent; color: var(--off-white);
  letter-spacing: 0.18em; box-shadow: 3px 3px 0 color-mix(in srgb, var(--pal-ink) 70%, transparent); }
:root[data-variante="analog"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 color-mix(in srgb, var(--pal-ink) 75%, transparent); background: transparent; }
:root[data-variante="analog"] :is(.btn-primary, .btn.btn-primary, .sticky-cta, .pl-pop-send, #cookie-accept) {
  background: var(--pal-accent) !important; color: var(--pal-on-accent) !important; border: 2px solid var(--ink-line) !important; border-radius: 4px !important;
  text-shadow: 0 1px 0 color-mix(in srgb, black 25%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, black 22%, transparent), 3px 3px 0 color-mix(in srgb, var(--pal-ink) 70%, transparent) !important; }
:root[data-variante="analog"] .nav-cta-desk::before { content: none !important; }
:root[data-variante="analog"] .skin-toggle { border: 2px solid var(--ink-line); }

/* ---- Kopf: Foto vergilbt, kein Raster, Wellenform verblasst ----------- */
:root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy)::after { content: none !important; }
:root[data-variante="analog"] .page-hero[style*="--hero-photo"]::before, :root[data-variante="analog"] .hero-wrap-legacy[style*="--hero-photo"]::before { filter: sepia(0.35) saturate(0.75) contrast(1.05); }
:root[data-variante="analog"] #hero .hero-img img { filter: sepia(0.35) saturate(0.75) contrast(1.05) !important; }
:root[data-variante="analog"] :is(.hero-waveform--live, .hero-filmstrip--live, .live-wave) { filter: none !important; opacity: 0.55 !important; }
:root[data-variante="analog"] #hero .hero-badge { border-radius: var(--radius); border: 2px solid var(--ink-line); background: color-mix(in srgb, var(--pal-card) 88%, transparent); backdrop-filter: none; transform: rotate(1.5deg); }
:root[data-variante="analog"] .pl-meter { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* ---- Flaechen: Akzent-Abschnitte als dunkles Pult ---------------------- */
:root[data-variante="analog"] :is(.sec--accent, main > section#preise, main > section#pakete, main > section#pricing, main > section#packages, main > section.cta-section) {
  background: var(--pal-night) !important; border-top: 2px solid var(--ink-line); border-bottom: 2px solid var(--ink-line); }
:root[data-variante="analog"] :is(body > nav, nav:has(> .nav-top)) { backdrop-filter: none; background: var(--pal-night); border-bottom: 2px solid var(--ink-line); }
:root[data-variante="analog"] footer { border-top: 2px solid var(--ink-line); }
:root[data-variante="analog"] .faq-q::after { font-family: var(--font-hand); font-size: 2rem; }
/* Haken in Listen in Handschrift */
:root[data-variante="analog"] main :is(.included-list) > li::before { font-family: var(--font-hand); font-size: 1.25em; font-weight: 400; }
/* Analog: Akzentwort bleibt in der Pult-Schrift; Tape im hellen Modus kraeftiger */
:root[data-variante="analog"] :is(h1, h2, h3, h4, .hero-slogan) :is(em, i) { font-family: inherit !important; font-style: normal !important; font-stretch: inherit; }
:root[data-variante="analog"][data-palette$="-hell"] :is(.section-label, h1.seo-h1, #hero h1, .welive-eyebrow) {
  background: color-mix(in srgb, var(--pal-night), var(--pal-muted) 24%) !important; }

/* ==================================================================
   Stufe 4: Abstaende, Schriftgroessen, Hintergrundkacheln (alle
   Plugin-Varianten) und Analog-Ausbau (Film, Tonband, Korn, Klebeband)
   ================================================================== */

/* ---- Enge Raster (Klasse setzt plugin-ui.js) ------------------------ */
:root[data-stil="plugin"] main .pl-spaced { gap: clamp(0.9rem, 1.6vw, 1.25rem) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
:root[data-stil="plugin"] main .pl-spaced > * { border-radius: var(--radius) !important; }

/* ---- Hintergrund-Kacheln: der Lichtverlauf wurde mit der Korn-Kachel
   (220 px) wiederholt und ergab Streifen. Verlauf jetzt nur einmal. ---- */
:root[data-stil="plugin"] main > section:not(#hero):not(#studio-photos) { background-size: auto !important; background-repeat: no-repeat !important; }
:root[data-variante="analog"] main > section:not(#hero):not(#studio-photos),
:root[data-variante="ruhig"] main > section:not(#hero):not(#studio-photos) { background-image: none !important; }
/* Klebeband-Label im FAQ-Raster nicht ueber die ganze Breite ziehen */
:root[data-stil="plugin"] .section-label { justify-self: start; width: max-content; max-width: 100%; }

/* ---- Schriftgroessen: kleiner, keine Trennung mitten im Wort ---------- */
:root[data-stil="plugin"] h1:not(.seo-h1) { font-size: clamp(2.1rem, 1.3rem + 3vw, 4.25rem); }
:root[data-stil="plugin"] h2 { font-size: clamp(1.75rem, 1.15rem + 2vw, 3rem); }
:root[data-stil="plugin"] h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem); }
:root[data-stil="plugin"] #hero .hero-slogan { font-size: clamp(2.6rem, 1.3rem + 5vw, 6.25rem) !important; }
:root[data-stil="plugin"] :is(.page-hero, .hero-wrap-legacy) .hero-slogan { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5.25rem) !important; }
:root[data-stil="plugin"] main > section.cta-section h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); }
:root[data-stil="plugin"] #about h2, :root[data-stil="plugin"] .home-team h2, :root[data-stil="plugin"] #welive h2, :root[data-stil="plugin"] #contact h2 { font-size: clamp(1.75rem, 1.15rem + 1.8vw, 2.75rem); }
:root[data-stil="plugin"] .lx-name { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); }
:root[data-stil="plugin"] .preis-wert { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.25rem); }
:root[data-stil="plugin"] :is(h1, h2, h3, h4, .hero-slogan, .lx-name, .faq-q, .preis-wert) {
  hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; text-wrap: balance; }
/* Nur als Netz auf sehr schmalen Schirmen: lieber umbrechen als ueberlaufen */
@media (max-width: 480px) {
  :root[data-stil="plugin"] :is(h1, h2, h3, h4, .hero-slogan, .lx-name, .faq-q) { overflow-wrap: break-word !important; }
  :root[data-stil="plugin"] h2 { font-size: clamp(1.6rem, 1rem + 3.4vw, 2rem); }
  :root[data-stil="plugin"] :is(.page-hero, .hero-wrap-legacy) .hero-slogan { font-size: clamp(2.1rem, 1.2rem + 5vw, 2.6rem) !important; }
  :root[data-stil="plugin"] #hero .hero-slogan { font-size: clamp(2.4rem, 1.4rem + 6vw, 3rem) !important; }
}

/* ==================================================================
   ANALOG: mehr Film, mehr Band, mehr Hand
   ================================================================== */
:root[data-variante="analog"] {
  --an-photo: sepia(30%) saturate(70%) contrast(104%) brightness(0.97);
  --an-photo-hover: sepia(14%) saturate(88%) contrast(102%);
  --tape: color-mix(in srgb, var(--pal-bone) 62%, transparent);
}
:root[data-variante="analog"][data-palette$="-hell"] { --tape: color-mix(in srgb, color-mix(in srgb, var(--pal-night), var(--pal-muted) 28%) 85%, transparent); }

/* Alle Fotos: entsaettigt, leicht vergilbt - auch auf dunklen Flaechen */
:root[data-variante="analog"] main img:not([src*="logo"]):not([src^="data:"]) { filter: var(--an-photo) !important; transition: filter 0.6s ease !important; }
:root[data-variante="analog"] main :is(a, div, figure):hover > img:not([src*="logo"]) { filter: var(--an-photo-hover) !important; }
:root[data-variante="analog"] :is(.page-hero, .hero-wrap-legacy)[style*="--hero-photo"]::before { filter: sepia(0.35) saturate(0.68) contrast(1.05) !important; }

/* Filmkorn, das sich bewegt (wie projizierter Film), sehr leise */
:root[data-variante="analog"] body::after {
  content: ''; position: fixed; inset: -50%; z-index: 9997; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px; opacity: 0.09; mix-blend-mode: overlay;
  animation: an-grain 0.9s steps(6) infinite; }
@keyframes an-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Projektor-Flackern auf den Film-Koepfen */
:root[data-variante="analog"] .pl-film[style*="--hero-photo"]::before { animation: an-flicker 5s steps(1) infinite; }
@keyframes an-flicker { 0% { opacity: 1; } 12% { opacity: 0.94; } 13% { opacity: 1; } 47% { opacity: 0.97; } 48% { opacity: 1; } 71% { opacity: 0.92; } 72% { opacity: 1; } }

/* Laufender Filmstreifen im Kopf der Film-Seiten (Bilder = Kopffoto) */
.pl-strip { display: none; }
:root[data-variante="analog"] .pl-film .pl-strip {
  display: block; position: absolute; z-index: 1; top: -12%; bottom: -12%; right: clamp(1rem, 9vw, 10rem);
  width: clamp(70px, 7vw, 100px); rotate: 5deg; pointer-events: none; opacity: 0.88;
  background-color: color-mix(in srgb, black 84%, var(--pal-accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, black 60%, transparent), 6px 8px 0 color-mix(in srgb, black 35%, transparent);
  clip-path: polygon(0 0, 100% 0.4%, 99.2% 100%, 0.8% 99.6%); }
:root[data-variante="analog"] .pl-film .pl-strip::before, :root[data-variante="analog"] .pl-film .pl-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 7px;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, color-mix(in srgb, white 82%, var(--pal-accent)) 7px 14px, transparent 14px 20px);
  border-radius: 2px; animation: an-holes 20s linear infinite; }
:root[data-variante="analog"] .pl-film .pl-strip::before { left: 4px; }
:root[data-variante="analog"] .pl-film .pl-strip::after { right: 4px; }
:root[data-variante="analog"] .pl-film .pl-strip-frames {
  position: absolute; inset: 0 15px; background-image: var(--strip-img, var(--hero-photo)); background-size: auto 100px; background-repeat: repeat-y; background-position: center 0;
  filter: sepia(0.5) saturate(0.6) contrast(1.1) brightness(0.9);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 86px, transparent 86px 100px); mask-image: repeating-linear-gradient(to bottom, black 0 86px, transparent 86px 100px);
  animation: an-frames 20s linear infinite; }
@keyframes an-frames { to { background-position: center 1000px; -webkit-mask-position: 0 1000px; mask-position: 0 1000px; } }
@keyframes an-holes { to { background-position: 0 1000px; } }
@media (max-width: 760px) { :root[data-variante="analog"] .pl-film .pl-strip { right: -20px; opacity: 0.5; width: 60px; } }
/* Text bleibt vor dem Streifen */
:root[data-variante="analog"] :is(.page-hero, .hero-wrap-legacy) > :not(.pl-strip):not(canvas):not(svg) { z-index: 3; }

/* Kopf-Instrument (Tonband/Projektor) etwas absetzen */
:root[data-variante="analog"] .pl-meter { rotate: -1.5deg; filter: drop-shadow(4px 5px 0 color-mix(in srgb, black 35%, transparent)); }
:root[data-variante="analog"] .pl-film .pl-meter { top: auto; bottom: clamp(2rem, 4vw, 3.5rem); right: calc(clamp(1rem, 9vw, 10rem) + clamp(90px, 9vw, 130px)); rotate: 1.5deg; }

/* Karten: leicht schief wie aufgelegt, Klebestreifen oben, gerade beim Hovern */
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .process-step, .blog-card, .project-card, .ablauf-step, .workflow-step, .factor, .price-box, .problem-card, .audience-card, .hub-card, .ref-card, #blog-preview a[style*="border"]):nth-child(odd) { rotate: -0.4deg; }
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .process-step, .blog-card, .project-card, .ablauf-step, .workflow-step, .factor, .price-box, .problem-card, .audience-card, .hub-card, .ref-card, #blog-preview a[style*="border"]):nth-child(even) { rotate: 0.35deg; }
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .process-step, .blog-card, .project-card, .ablauf-step, .workflow-step, .factor, .price-box, .problem-card, .audience-card, .hub-card, .ref-card, #blog-preview a[style*="border"]):hover { rotate: 0deg; }
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .price-box) { position: relative; overflow: visible !important; }
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .price-box)::before {
  content: ''; position: absolute; top: -11px; left: 50%; width: 78px; height: 22px; translate: -50% 0; rotate: -3deg; z-index: 2; pointer-events: none;
  background: var(--tape); clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 3% 94%, 0 48%); }
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .price-box):nth-child(even)::before { rotate: 4deg; left: 38%; }

/* Einblenden: wie ein Blatt, das hingelegt wird */
:root.pl-reveal[data-variante="analog"] main .is-in { animation: an-in 0.6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both !important; }
@keyframes an-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* Knoepfe: geben beim Druecken nach */
:root[data-variante="analog"] .btn:active, :root[data-variante="analog"] .btn-primary:active { translate: 2px 2px; box-shadow: 1px 1px 0 color-mix(in srgb, var(--pal-ink) 70%, transparent) !important; }

/* Filmstreifen-Trenner unter Ueberschriften laufen langsam */
:root[data-variante="analog"] .filmstrip-divider rect { animation: an-hole 2.4s ease-in-out infinite; }
:root[data-variante="analog"] .filmstrip-divider rect:nth-child(3n+2) { animation-delay: 0.4s; }
:root[data-variante="analog"] .filmstrip-divider rect:nth-child(3n) { animation-delay: 0.8s; }
@keyframes an-hole { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  :root[data-variante="analog"] body::after, :root[data-variante="analog"] .pl-film[style*="--hero-photo"]::before,
  :root[data-variante="analog"] .pl-film .pl-strip::before, :root[data-variante="analog"] .pl-film .pl-strip::after,
  :root[data-variante="analog"] .pl-film .pl-strip-frames, :root[data-variante="analog"] .filmstrip-divider rect { animation: none !important; }
}

/* Kopffoto nur rechts (data-foto="rechts"): Personen/Motiv verschwinden nicht hinter
   dem Text, und kleinere Fotos werden weniger stark vergroessert. */
:is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"]::before {
  left: 46% !important;
  background:
    linear-gradient(90deg, var(--pal-night) 0%, color-mix(in srgb, var(--pal-night) 0%, transparent) 22%),
    linear-gradient(0deg, color-mix(in srgb, var(--pal-night) 55%, transparent) 0%, transparent 30%),
    var(--hero-photo) center 30% / cover no-repeat !important; }
:is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"] > :not(canvas):not(svg) { max-width: min(100%, 44%) !important; }
@media (max-width: 900px) {
  :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"]::before { left: 0 !important;
    background: linear-gradient(0deg, color-mix(in srgb, var(--pal-night) 92%, transparent) 35%, color-mix(in srgb, var(--pal-night) 45%, transparent) 100%), var(--hero-photo) center 30% / cover no-repeat !important; }
  :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"] > :not(canvas):not(svg) { max-width: 100% !important; }
}

/* Projekt-Karten: Vorschaubild immer vollstaendig in 16:9 (Titel im Bild nicht abschneiden) */
.project-card .thumb { aspect-ratio: 16 / 9; min-height: 0 !important; align-self: start; height: auto !important; }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important; align-items: start; }
@media (max-width: 780px) { .project-card { grid-template-columns: 1fr !important; } }

/* Koepfe schneiden Deko (Filmstreifen, Instrumente) hart ab - kein Querscrollen */
:root[data-stil="plugin"] :is(#hero, .page-hero, .hero-wrap-legacy) { overflow: clip !important; }
/* Kopfzeile: mit Hell/Dunkel-Knopf und englischen Labels reicht der Platz erst ab 1024 px */
@media (max-width: 1024px) {
  :root[data-stil="plugin"] .nav-links { display: none !important; }
  :root[data-stil="plugin"] .hamburger { display: flex !important; }
  :root[data-stil="plugin"] .nav-cta-desk { display: none !important; }
}
@media (min-width: 721px) and (max-width: 1024px) { :root[data-stil="plugin"] .nav-mobile.is-open { display: flex !important; } }
@media (min-width: 721px) and (max-width: 1024px) { :root[data-stil="plugin"] .nav-mobile:not(.is-open) { display: none !important; } }
/* Sehr schmale Schirme: lange Woerter lieber sauber mit Bindestrich trennen als mitten drin abbrechen */
@media (max-width: 480px) {
  :root[data-stil="plugin"] :is(h1, h2, h3, h4, .hero-slogan, .lx-name, .faq-q) { hyphens: auto !important; -webkit-hyphens: auto !important; }
  :root[data-stil="plugin"] h1:not(.seo-h1) { font-size: clamp(1.8rem, 1rem + 4vw, 2.2rem); }
  :root[data-stil="plugin"] h3 { font-size: 1.15rem; }
}

/* ==================================================================
   Kopf: Wort-/Bildmarke "punchline studio" (DPMA) als EINE unveraenderte
   Einheit wie auf der Live-Seite - Bild ueber Wort, festes Verhaeltnis
   893:618, nie neu gesetzt, kein Zusatz. Weisse Fassung auf dunklem Kopf,
   schwarze Fassung auf hellem Kopf. Kein Filter auf der Marke.
   ================================================================== */
.nav-logo .marke { height: 52px; width: auto; aspect-ratio: 893 / 618; filter: none !important; opacity: 1; display: block; }
.nav-logo .marke--dunkel { display: none; }
:root[data-palette$="-hell"] .nav-logo .marke--hell { display: none; }
:root[data-palette$="-hell"] .nav-logo .marke--dunkel { display: block; }
:root:not([data-stil]) .nav-logo .marke--hell { display: none; }
:root:not([data-stil]) .nav-logo .marke--dunkel { display: block; }
.nav-logo:hover .marke { opacity: 0.85; }
@media (max-width: 720px) { .nav-logo .marke { height: 44px; } }

/* Fuss: Bildzeichen links, Schriftzug mit (R) rechts daneben */
footer .footer-brand { display: inline-flex; align-items: center; gap: 0.7rem; }
footer .footer-brand img { width: 34px; height: 34px; filter: none !important; }
:root[data-palette$="-hell"] footer .footer-brand img, :root:not([data-stil]) footer .footer-brand img { filter: brightness(0) !important; }
footer .footer-wordmark sup { font-family: var(--font-label); font-size: 0.4em; vertical-align: super; margin-left: 1px; color: var(--muted); }

/* ---- Analog: Filmstreifen waagerecht unten, Bilder schwarz-weiss -------- */
:root[data-variante="analog"] .pl-film .pl-strip {
  top: auto !important; bottom: clamp(1.25rem, 3vw, 2.25rem); left: -2%; right: -2% !important; width: auto !important; height: 92px;
  rotate: -1deg; opacity: 0.9; clip-path: none; }
:root[data-variante="analog"] .pl-film .pl-strip::before, :root[data-variante="analog"] .pl-film .pl-strip::after {
  top: 4px; bottom: auto; left: 0 !important; right: 0 !important; width: auto; height: 7px;
  background: repeating-linear-gradient(to right, transparent 0 7px, color-mix(in srgb, white 82%, var(--pal-accent)) 7px 15px, transparent 15px 20px);
  animation: an-holes-x 30s linear infinite; }
:root[data-variante="analog"] .pl-film .pl-strip::after { top: auto; bottom: 4px; }
:root[data-variante="analog"] .pl-film .pl-strip-frames {
  inset: 15px 0; background-size: 112px auto; background-repeat: repeat-x; background-position: 0 center;
  filter: grayscale(1) contrast(1.15) brightness(0.92);
  -webkit-mask-image: repeating-linear-gradient(to right, black 0 104px, transparent 104px 112px); mask-image: repeating-linear-gradient(to right, black 0 104px, transparent 104px 112px);
  animation: an-frames-x 30s linear infinite; }
@keyframes an-frames-x { to { background-position: -1120px center; -webkit-mask-position: -1120px 0; mask-position: -1120px 0; } }
@keyframes an-holes-x { to { background-position: -1000px 0; } }
@media (max-width: 760px) { :root[data-variante="analog"] .pl-film .pl-strip { right: -2% !important; opacity: 0.85; width: auto !important; height: 72px; } }
/* Projektor-Spulen oben rechts statt unten (ueberlagerten den Streifen) */
:root[data-variante="analog"] .pl-film .pl-meter { top: clamp(5rem, 9vw, 7.5rem) !important; bottom: auto !important; right: var(--gutter) !important; rotate: 1.5deg; }
/* Fotos rechts mit Personen: kein Instrument darueber */
:root[data-variante="analog"] [data-foto="rechts"] .pl-meter { display: none !important; }

/* ---- Analog: Magnetband statt Wellenform -------------------------------- */
.pl-tape { display: none; }
:root[data-variante="analog"] :is(canvas[data-wave], .hero-waveform--live, svg.hero-waveform) { display: none !important; }
:root[data-variante="analog"] .pl-tape { display: block; position: relative; height: 3rem; overflow: hidden; pointer-events: none; }
:root[data-variante="analog"] .pl-tape--hero { position: absolute !important; left: 0; right: 0; bottom: 2.5rem; z-index: 1 !important; }
:root[data-variante="analog"] .live-wave--hero, :root[data-variante="analog"] .pl-tape:not(.pl-tape--hero):not(.pl-tape--contact) { background: var(--pal-night); }
:root[data-variante="analog"] .pl-tape--contact { margin-bottom: 2.5rem; }
:root[data-variante="analog"] .pl-tape-band {
  position: absolute; left: -2%; right: -2%; top: 50%; height: 15px; translate: 0 -50%; rotate: -0.6deg;
  background:
    repeating-linear-gradient(to right, transparent 0 380px, color-mix(in srgb, white 80%, var(--pal-accent)) 380px 392px, transparent 392px 900px),
    repeating-linear-gradient(to right, transparent 0 640px, var(--pal-accent) 640px 646px, transparent 646px 1300px),
    linear-gradient(to bottom, #3a2a1d 0%, #5b4330 35%, #2f2117 60%, #4a3524 100%);
  background-size: 900px 100%, 1300px 100%, 100% 100%;
  box-shadow: 0 1px 0 color-mix(in srgb, white 10%, transparent) inset, 0 3px 6px color-mix(in srgb, black 35%, transparent);
  animation: an-tape 24s linear infinite; }
:root[data-variante="analog"] .pl-tape-band::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to right, color-mix(in srgb, white 6%, transparent) 0 1px, transparent 1px 5px); mix-blend-mode: overlay; }
@keyframes an-tape { to { background-position: -900px 0, -1300px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-variante="analog"] .pl-tape-band, :root[data-variante="analog"] .pl-film .pl-strip-frames,
  :root[data-variante="analog"] .pl-film .pl-strip::before, :root[data-variante="analog"] .pl-film .pl-strip::after { animation: none !important; }
}

/* ---- Analog, Fassung 3: kein Foto-Filmstreifen, kein Magnetband.
   Stattdessen die bekannten laufenden Linien - Ton: Wellenform, Film:
   Filmstreifen von rechts nach links - aber verblasst und entsaettigt,
   ohne Glimmen. ------------------------------------------------------ */
:root[data-variante="analog"] :is(.pl-strip, .pl-tape) { display: none !important; }
:root[data-variante="analog"] canvas[data-wave], :root[data-variante="analog"] .hero-waveform--live,
:root[data-variante="analog"] .pl-film .hero-filmstrip--live, :root[data-variante="analog"] .pl-film .hero-waveform--live {
  display: block !important; filter: grayscale(1) sepia(0.45) brightness(1.35) !important; opacity: 0.55 !important; }
:root[data-variante="analog"][data-palette$="-hell"] :is(canvas[data-wave], .hero-waveform--live, .hero-filmstrip--live) { filter: grayscale(1) sepia(0.5) brightness(0.55) !important; }
/* Film-Koepfe: Filmstreifen statt Wellenform (falls beides im Kopf steht) */
:root[data-variante="analog"] .pl-film:has(.hero-filmstrip--live) .hero-waveform--live { display: none !important; }
/* Episodenlisten: Meta-Spalte darf umbrechen (lief bei 768 px ueber) */
@media (max-width: 1024px) { .ep-meta, .episode-list span, [class*="-meta"] { white-space: normal !important; } .ep-meta a { overflow-wrap: anywhere; } }
/* Klebestreifen nur einmal pro Karte: verschachtelte Kaesten (z. B. Preisbox in der Paketkarte) bekommen keinen eigenen */
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .price-box) :is(.review-card, .tier, .price-card, .preis-zeile, .price-box)::before { content: none !important; }
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .price-box) :is(.review-card, .tier, .price-card, .preis-zeile, .price-box) { rotate: 0deg !important; }
/* FAQ-Fragen: normale Schreibung statt Versalien - lange Fragen sind so besser lesbar */
:root[data-stil="plugin"] .faq-q, .faq-q {
  font-family: var(--font-text) !important; font-stretch: normal !important; text-transform: none !important;
  font-weight: 600 !important; letter-spacing: 0 !important; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem) !important; line-height: 1.35 !important; }

/* Video-Karte mit Infoleiste (3sat/Gauthier): auf schmalen Screens Leiste unter das Bild statt darueber */
@media (max-width: 700px) {
  a.grain > div[style*="bottom:0"] { position: static !important; background: var(--panel, var(--pal-card)) !important; padding: 1rem 1.25rem !important; }
  a.grain > div[style*="inset:0"] { inset: 0 0 auto 0 !important; aspect-ratio: 16 / 9; }
}

/* Touch-Geraete (Handy/Tablet): ruhiges Scrollen.
   - Papierkorn ohne Mischmodus: ein fester Vollbild-Layer mit mix-blend-mode
     muss bei jedem Scrollschritt (und beim Ein-/Ausblenden der Adressleiste)
     neu mit der ganzen Seite verrechnet werden - das ruckelt und flackert.
   - Keine Filter-Uebergaenge an Fotos (Tippen loest sonst :hover aus).
   - Sicherheitsnetz: falls doch eine Einblend-Klasse gesetzt ist, sofort sichtbar. */
@media (hover: none), (pointer: coarse) {
  :root body::before { mix-blend-mode: normal !important; opacity: 0.05 !important; }
  :root[data-palette$="-hell"] body::before { opacity: 0.08 !important; }
  :root main img { transition: none !important; }
  :root main :is(a, div, figure):hover > img, .hero-img:hover img, .grain:hover img { transform: none !important; }
  :root.pl-reveal main .is-in { animation: none !important; }
}


/* ---- Analog, Fassung 4: Film-Seiten wie Ton-Seiten ------------------------
   Kein Filmstreifen mehr unten im Kopf (ueberlagerte sich mit der
   Pegelanzeige). Film- und Ton-Seiten haben dieselbe schlichte Pegelanzeige
   am rechten Rand. */
:root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy, .pl-film) :is(.hero-filmstrip, .hero-filmstrip--live, svg.hero-filmstrip),
:root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy).pl-film :is(.hero-waveform, .hero-waveform--live) { display: none !important; }
/* Play-Knoepfe: kein versetzter Schatten (sah aus wie ein zweiter Knopf) */
:root[data-variante="analog"] :is(.yt-facade, .welive-video, .grain, a) :is(.play-btn, .play-ring),
:root[data-variante="analog"] :is(.yt-facade, .welive-video, .grain, a):hover :is(.play-btn, .play-ring) { box-shadow: none !important; filter: none !important; }

/* Klebeband-Beschriftung nur so breit wie ihr Text (Seiten-Styles setzten
   display:block, dadurch lief der helle Streifen ueber die ganze Breite).
   Zusaetzlich in @layer base, weil !important in Ebenen sonst gewinnt. */
:root[data-variante="analog"] :is(.section-label, h1.seo-h1, #hero h1, .welive-eyebrow) { width: fit-content !important; max-width: 100% !important; }
@layer base { :root[data-variante="analog"] :is(.section-label, h1.seo-h1, #hero h1, .welive-eyebrow) { width: fit-content !important; max-width: 100% !important; } }

/* ---- Analog, Fassung 5: Spur unten im Kopf statt Pegel am Rand ----------
   Ton-Seiten: verblasste Audio-Wellenform. Film-Seiten: Waveform-Monitor
   (Helligkeitsverteilung des Bildes, wie im Schnittprogramm). Beides
   zeichnet plugin-ui.js; kurze Koepfe (Artikel) bleiben ohne Spur. */
.pl-wave { display: none; }
:root[data-variante="analog"] .pl-meter { display: none !important; }
:root[data-variante="analog"] .pl-wave { display: block; position: absolute; left: 0; right: 0; bottom: clamp(1rem, 2.2vw, 2rem); width: 100%; height: 96px; z-index: 1; pointer-events: none; }
:root[data-variante="analog"][data-palette$="-hell"] .pl-wave { filter: brightness(0.35); }
:root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy).pl-has-wave { padding-bottom: clamp(8rem, 11vw, 10rem) !important; }
@layer base { :root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy).pl-has-wave { padding-bottom: clamp(8rem, 11vw, 10rem) !important; } }
@media (max-width: 699px) {
  :root[data-variante="analog"] .pl-wave { height: 64px; bottom: 0.75rem; }
  :root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy).pl-has-wave { padding-bottom: 6rem !important; }
}
:root[data-variante="analog"] .pl-wave { max-width: none !important; margin: 0 !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
@layer base { :root[data-variante="analog"] .pl-wave { max-width: none !important; } }

/* FAQ und andere untereinander gestapelte Kaesten: Luft dazwischen
   (Rahmen und Schatten sassen sonst direkt aufeinander) */
:root[data-variante="analog"] main :is(.faq-item, .faq-box, details.faq) + :is(.faq-item, .faq-box, details.faq) { margin-top: 0.9rem !important; }
@layer base { :root[data-variante="analog"] main :is(.faq-item, .faq-box, details.faq) + :is(.faq-item, .faq-box, details.faq) { margin-top: 0.9rem !important; } }
:root[data-stil="plugin"] main .offer-grid { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }

/* ---- Referenzleiste wie ein Filmabspann ------------------------------
   Zentriert: kleine Ueberschrift, Namen in gesperrten Versalien, darunter
   Sterne/Bewertungen (und auf der Startseite die Auszeichnungen). */
:root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-inner { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; padding: clamp(1.5rem, 3vw, 2.25rem) var(--gutter) !important; gap: 0.9rem !important; max-width: none !important; }
:root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-group { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.65rem !important; flex: 0 1 auto !important; white-space: normal !important; }
:root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-label { display: block !important; font-family: var(--font-label) !important; font-size: 0.7rem !important; font-weight: 500 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: var(--muted) !important; }
:root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-items { font-family: var(--font-display) !important; font-stretch: 66% !important; text-transform: none !important; font-weight: 500 !important; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem) !important; letter-spacing: 0.14em !important; line-height: 1.9 !important; color: var(--off-white) !important; opacity: 0.88; max-width: 62rem; }
:root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .tn { white-space: nowrap; }
:root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .tsep { color: var(--gold-text); padding: 0 0.35em 0 0.15em; }
:root[data-variante="analog"] :is(.trust-reviews, .trust-bar-sub-reviews) { flex-direction: row !important; gap: 0.6rem !important; font-family: var(--font-label); font-size: var(--fs-label, 0.75rem) !important; letter-spacing: 0.12em; text-transform: uppercase; }
:root[data-variante="analog"] .trust-bar .trust-award { padding-left: 0 !important; margin-left: 0 !important; font-family: var(--font-label); font-size: var(--fs-label, 0.75rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:root[data-variante="analog"] .trust-bar .trust-award::before { content: none !important; }
@layer base {
  :root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-label { display: block !important; font-family: var(--font-label) !important; font-size: 0.7rem !important; letter-spacing: 0.3em !important; color: var(--muted) !important; }
  :root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-items { font-family: var(--font-display) !important; font-stretch: 66% !important; text-transform: none !important; font-weight: 500 !important; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem) !important; letter-spacing: 0.14em !important; line-height: 1.9 !important; }
  :root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-inner { flex-direction: column !important; align-items: center !important; padding: clamp(1.5rem, 3vw, 2.25rem) var(--gutter) !important; gap: 0.9rem !important; }
  :root[data-variante="analog"] :is(.trust-bar, .trust-bar-sub) .trust-group { flex-direction: column !important; align-items: center !important; }
  :root[data-variante="analog"] :is(.trust-reviews, .trust-bar-sub-reviews) { flex-direction: row !important; }
}

/* Freistehende Kopffotos rechts liegen ohne Abdunklung frei - dort staerker
   entsaettigen, damit sie zum verblassten Analog-Look passen */
:root[data-variante="analog"] :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"]::before { filter: sepia(0.42) saturate(0.5) contrast(1.04) brightness(0.86) !important; }

/* Hub-Karten: eine ueberzaehlige Karte im Zweier-Raster geht ueber die ganze Breite */
.hub-grid .hub-card--wide { grid-column: 1 / -1; }

/* ==================================================================
   Analog, Fassung 6: "Studio-Geraet" - zwischen analog und modern.
   Panels ohne dicken hellen Rahmen und ohne Versatz-Schatten: feine
   Haarlinie, leichter Verlauf wie gebuerstetes Blech, weicher
   Tiefenschatten, gerade Ecken. Karten mit Inhalt bekommen eine rote
   Markierung am Rand, Etiketten werden Pillen mit leuchtendem Punkt,
   Zwischenueberschriften in Karten in normaler Schreibweise.
   Klebestreifen, Handschrift-Etiketten und Korn bleiben.
   ================================================================== */
:root[data-variante="analog"] {
  --radius: 14px; --radius-sm: 8px;
  --sg-line: color-mix(in srgb, var(--pal-bone) 14%, transparent);
  --sg-panel: linear-gradient(180deg, color-mix(in srgb, var(--pal-bone) 6%, var(--pal-card)) 0%, var(--pal-card) 60%);
  --sg-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --sg-shadow-hover: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 24px 48px -22px rgba(0, 0, 0, 0.75);
}
:root[data-variante="analog"][data-palette$="-hell"] {
  --sg-line: color-mix(in srgb, var(--pal-ink) 13%, transparent);
  --sg-panel: linear-gradient(180deg, color-mix(in srgb, white 45%, var(--pal-card)) 0%, var(--pal-card) 70%);
  --sg-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 16px 36px -22px rgba(60, 40, 20, 0.35);
  --sg-shadow-hover: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 22px 44px -20px rgba(60, 40, 20, 0.42);
}
:root[data-variante="analog"][data-stil="plugin"] main :is(.review-card, .service-card, .offer-card, .case-card, .tier, .preis, .price-card, .faq-box, .award-item,
  .preis-zeile, .ablauf-step, .info-box, .project-card, .contact-row, .guide-step, .clients-bar, .honest-banner, .niche-banner,
  #blog-preview a[style*="border"], .standards-grid > *, .lx-row, .faq-item, .workflow-step, .factor, .price-box, .hub-card, .step, .problem-card,
  .audience-card, .gear-cat, .process-step, .ref-card, .rate, .blog-card, .compare-player, .spotify-facade, .formula, .idea, .crosslink, .welive-quote, .ton-box) {
  background: var(--sg-panel) !important; border: 1px solid var(--sg-line) !important; box-shadow: var(--sg-shadow) !important;
  border-radius: var(--radius) !important; rotate: 0deg !important; }
:root[data-variante="analog"][data-stil="plugin"] main :is(.preis-zeile, .lx-row, .project-card, .review-card, .tier, .preis, .price-card, .hub-card, .offer-card, #blog-preview a[style*="border"]):hover {
  transform: translateY(-2px) !important; box-shadow: var(--sg-shadow-hover) !important; }
/* rote Markierung am linken Rand (nur Inhaltskarten) */
:root[data-variante="analog"][data-stil="plugin"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor) { position: relative; overflow: hidden; }
:root[data-variante="analog"][data-stil="plugin"][data-palette] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor)::after {
  content: '' !important; display: block !important; position: absolute !important; left: 0 !important; top: 1.6rem !important; right: auto !important; bottom: auto !important;
  width: 3px !important; height: 2.2rem !important; background: var(--pal-accent) !important; border-radius: 0 3px 3px 0; opacity: 1 !important;
  inset: 1.6rem auto auto 0 !important; mix-blend-mode: normal !important; filter: none !important; transform: none !important; pointer-events: none; }
/* Etikett als Pille mit Punkt */
:root[data-variante="analog"] main .offer-tag { display: inline-flex !important; align-items: center; gap: 0.5rem; border: 1px solid color-mix(in srgb, var(--pal-accent) 45%, transparent) !important;
  border-radius: 999px !important; padding: 0.3rem 0.7rem !important; background: transparent !important; box-shadow: none !important; }
:root[data-variante="analog"] main .offer-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pal-accent); box-shadow: 0 0 8px var(--pal-accent); flex-shrink: 0; }
/* Ueberschriften in Karten: normale Schreibweise, etwas breiter */
:root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor, .step, .process-step, .workflow-step, .guide-step, .ablauf-step, .blog-card, .gear-cat, .info-box, .tier, .price-card) :is(h3, h4) {
  text-transform: none !important; font-stretch: 80% !important; letter-spacing: -0.01em !important; line-height: 1.12 !important; }
@layer base {
  :root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor, .step, .process-step, .workflow-step, .guide-step, .ablauf-step, .blog-card, .gear-cat, .info-box, .tier, .price-card) :is(h3, h4) {
    text-transform: none !important; font-stretch: 80% !important; letter-spacing: -0.01em !important; }
}
/* Knoepfe und Kleinteile im selben Stil: kein Versatz-Schatten, feine Kante */
:root[data-variante="analog"] .btn { border-radius: 8px !important; border: 1px solid color-mix(in srgb, var(--off-white) 55%, transparent) !important; box-shadow: none !important; }
:root[data-variante="analog"] .btn:hover { transform: translateY(-1px) !important; border-color: var(--off-white) !important; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6) !important; }
:root[data-variante="analog"] :is(.btn-primary, .btn.btn-primary, .sticky-cta, .pl-pop-send, #cookie-accept, .nav-cta-desk) {
  border-radius: 8px !important; border: 1px solid color-mix(in srgb, var(--pal-accent) 70%, black) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--pal-accent) 70%, black) !important; }
:root[data-variante="analog"] :is(.btn, .btn-primary):active { translate: 0 0 !important; transform: translateY(0) !important; }
:root[data-variante="analog"] .skin-toggle { border: 1px solid var(--sg-line) !important; }
:root[data-variante="analog"] #hero .hero-badge { border: 1px solid var(--sg-line) !important; border-radius: 12px !important; box-shadow: var(--sg-shadow) !important; rotate: 0deg; transform: none !important; }
:root[data-variante="analog"] main :is(img, iframe, video):not([src*="logo"]) { border-radius: 10px; }
:root[data-variante="analog"] main :is(.yt-facade, .grain, .poster-frame, .ph-img-wrap) { border-radius: 12px !important; border: 1px solid var(--sg-line) !important; box-shadow: var(--sg-shadow) !important; overflow: hidden; }

/* ---- Studio-Geraet, Feinschliff ----------------------------------------
   1) Alte Regel in @layer base setzte Kartenrahmen hell mit !important
      (Ebenen-!important schlaegt ungeschichtetes) - hier gleich stark zurueck.
   2) Rote Randmarkierung sitzt jetzt exakt auf Hoehe des Etiketts.
   3) Etikett-Pillen: einheitliche Groesse, Abstand zur Ueberschrift. */
@layer base {
  :root[data-variante="analog"][data-stil="plugin"] main :is(.offer-card, .price-card, .review-card, .testimonial, .service-card, .award-card, .case-card, .tier, .preis, .arbeit-film, .faq-box, .honest-banner, .niche-banner) {
    border-color: var(--sg-line) !important; }
}
:root[data-variante="analog"][data-stil="plugin"][data-palette] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor)::after { content: none !important; }
:root[data-variante="analog"][data-stil="plugin"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor):has(> .offer-tag) {
  padding: 1.75rem 2rem 2rem !important; }
:root[data-variante="analog"] main .offer-tag {
  position: relative; font-family: var(--font-label) !important; font-size: 0.68rem !important; font-weight: 500 !important; letter-spacing: 0.12em !important;
  line-height: 1 !important; padding: 0.45rem 0.8rem 0.42rem 0.7rem !important; margin: 0 0 1.1rem !important; color: var(--gold-text) !important; white-space: nowrap; }
:root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor) > .offer-tag::after {
  content: ''; position: absolute; left: calc(-2rem - 1px); top: 50%; translate: 0 -50%; width: 3px; height: 1.4rem; background: var(--pal-accent); border-radius: 0 3px 3px 0; }
:root[data-variante="analog"] main .offer-tag + :is(h3, h4) { margin-top: 0 !important; }
:root[data-variante="analog"] main :is(.offer-card, .hub-card) h3 { margin-bottom: 0.75rem !important; }
@media (max-width: 600px) {
  :root[data-variante="analog"][data-stil="plugin"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor):has(> .offer-tag) { padding: 1.5rem 1.4rem 1.6rem !important; }
  :root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor) > .offer-tag::after { left: calc(-1.4rem - 1px); }
}
/* Studio-Geraet: Trennlinien und Innenrahmen leise statt hell */
:root[data-variante="analog"] { --line-strong: color-mix(in srgb, var(--pal-bone) 18%, transparent); --border: color-mix(in srgb, var(--pal-bone) 18%, transparent); --ink-line: color-mix(in srgb, var(--pal-bone) 22%, transparent); }
:root[data-variante="analog"][data-palette$="-hell"] { --line-strong: color-mix(in srgb, var(--pal-ink) 16%, transparent); --border: color-mix(in srgb, var(--pal-ink) 16%, transparent); --ink-line: color-mix(in srgb, var(--pal-ink) 22%, transparent); }
:root[data-variante="analog"] main :is(.tier, .price-card, .preis) .price-box { background: color-mix(in srgb, var(--pal-night) 35%, transparent) !important; box-shadow: none !important; border-radius: 10px !important; overflow: hidden; }
:root[data-variante="analog"] main .tier-tagline { border-radius: 0 !important; border-width: 0 0 1px !important; }
/* Klebestreifen: Platz nach oben, damit sie nicht auf dem Kasten darueber kleben */
:root[data-variante="analog"] main :is(.tiers, .pricing-grid) { margin-top: 2.25rem !important; }
:root[data-variante="analog"] main .rates + .tiers, :root[data-variante="analog"] main .rates { margin-bottom: 0.5rem; }
/* Leere Klebestreifen auf Kacheln entfallen (beschriftete Etiketten bleiben) */
:root[data-variante="analog"] main :is(.review-card, .tier, .price-card, .preis-zeile, .price-box)::before { content: none !important; display: none !important; }
:root[data-variante="analog"] main :is(.tiers, .pricing-grid) { margin-top: 0 !important; }

/* Startseite "Arbeit": Beschriftung ueber Film und Playlist, beide Medien starten auf gleicher Hoehe */
.arbeit-grid > div > .arbeit-cap { order: -1; margin: 0 0 1rem !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 0.5rem 1.5rem; flex-wrap: wrap; min-height: 3.6rem; }
.arbeit-grid > div > .arbeit-cap > span { display: block; }
.arbeit-grid > div > .arbeit-cap strong { margin-bottom: 0.3rem !important; line-height: 1 !important; }
.arbeit-grid > div > .arbeit-cap a { margin-bottom: 0.15rem; white-space: nowrap; }

/* Heller Modus "Warmweiss": Fotos schwarz-weiss statt sepia (kein Gelbstich) */
:root[data-variante="analog"][data-palette$="-hell"] :is(.page-hero, .hero-wrap-legacy)[style*="--hero-photo"]::before { filter: grayscale(0.85) contrast(1.05) !important; }
:root[data-variante="analog"][data-palette$="-hell"] #hero .hero-img img { filter: grayscale(0.85) contrast(1.05) !important; }
:root[data-variante="analog"][data-palette$="-hell"] main img:not([src*="logo"]):not([src^="data:"]) { filter: grayscale(0.6) contrast(1.02) !important; }
:root[data-variante="analog"][data-palette$="-hell"] main :is(a, div, figure):hover > img:not([src*="logo"]) { filter: grayscale(0.2) !important; }
/* "Wie das entsteht" unter den Film statt oben rechts neben die Ueberschrift */
.arbeit-grid > div > .arbeit-cap:has(> a) { display: contents !important; }
.arbeit-grid > div > .arbeit-cap:has(> a) > span { order: -1; display: block; margin: 0 0 1rem; min-height: 3.6rem; display: flex; flex-direction: column; justify-content: flex-end; }
.arbeit-grid > div > .arbeit-cap > a { order: 2; align-self: flex-start; margin: 0.9rem 0 0 !important; }
/* Heller Modus: alle Fotos komplett schwarz-weiss (auch beim Drueberfahren) */
:root[data-variante="analog"][data-palette$="-hell"] main img:not([src*="logo"]):not([src^="data:"]),
:root[data-variante="analog"][data-palette$="-hell"] main :is(a, div, figure):hover > img:not([src*="logo"]),
:root[data-variante="analog"][data-palette$="-hell"] #hero .hero-img img { filter: grayscale(1) contrast(1.08) brightness(1.02) !important; }
:root[data-variante="analog"][data-palette$="-hell"] :is(.page-hero, .hero-wrap-legacy)[style*="--hero-photo"]::before { filter: grayscale(1) contrast(1.08) !important; }
/* Heller Modus: Spotify-Player passend zum hellen S/W-Look.
   Spotify bietet nur "dunkel" oder "Coverfarbe" - deshalb den dunklen Player
   per Filter umkehren und entsaettigen: helles Grau, dunkle Schrift. */
:root[data-variante="analog"][data-palette$="-hell"] main iframe[src*="spotify.com"],
:root[data-variante="analog"][data-palette$="-hell"] main iframe[data-src*="spotify.com"] { filter: grayscale(1) invert(0.92) contrast(0.95); border-radius: 12px; }

/* ---- Handy-Feinschliff ------------------------------------------------- */
/* Restliche Kaesten mit altem Versatz-Schatten auf Studio-Geraet-Stil */
:root[data-variante="analog"][data-stil="plugin"] main :is(.welive-banner, .handle-col, .press-badge) {
  background: var(--sg-panel) !important; border: 1px solid var(--sg-line) !important; box-shadow: var(--sg-shadow) !important; border-radius: var(--radius) !important; }
/* Tabellen in Artikeln: seitlich wischbar statt ueber den Rand */
main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  /* Startseite "Arbeit": Beschriftung linksbuendig, ohne Mindesthoehe */
  .arbeit-grid > div > .arbeit-cap, .arbeit-grid > div > .arbeit-cap:has(> a) > span { min-height: 0 !important; justify-content: flex-start !important; text-align: left !important; }
  .arbeit-grid { gap: 2.5rem !important; }
  /* Mehrspaltige Schritt-/Karten-Raster mit Text: auf dem Handy einspaltig */
  :root[data-stil="plugin"] main :is(.workflow-steps, .process-steps, .steps, .ablauf, .guide-steps) { grid-template-columns: 1fr !important; }
  /* verschachtelte Kaesten (Kasten im Kasten) weniger Innenabstand */
  :root[data-variante="analog"] main :is(.price-box, .tier, .factor, .info-box) :is(.factor, .info-box, .price-box) { padding: 1rem 1.1rem !important; }
}
@media (max-width: 700px) { .arbeit-grid > div > .arbeit-cap { align-items: flex-start !important; } }

/* Tablet (721-1024 px): Burger-Menue klappt auf. Die alte Regel
   ".nav-mobile { display:none !important }" ab 721 px liegt in @layer base -
   dort gewinnt !important gegen ungeschichtete Regeln, darum hier ebenfalls
   in der Ebene. */
@layer base {
  @media (min-width: 721px) and (max-width: 1024px) {
    .nav-mobile.is-open { display: flex !important; }
  }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .nav-mobile.is-open { max-height: calc(100vh - 74px); overflow-y: auto; }
}

/* ---- Handy-Menue: drei Kategorien rot, Spezialgebiete in ihrer Kategorie ---- */
.nav-mobile { padding-top: 0.5rem !important; padding-bottom: 1.25rem !important; }
.nav-mobile a.nav-mobile-label.nav-mobile-hub {
  display: flex !important; align-items: center; justify-content: space-between;
  font-family: var(--font-display) !important; font-stretch: 66%; font-weight: 800; text-transform: uppercase;
  font-size: 1.35rem !important; letter-spacing: 0.01em !important; line-height: 1 !important;
  color: var(--gold-text) !important; padding: 1.3rem 0 0.55rem !important; border-bottom: 1px solid var(--line) !important; }
.nav-mobile a.nav-mobile-label.nav-mobile-hub:first-child { padding-top: 0.6rem !important; }
.nav-mobile a.nav-mobile-label.nav-mobile-hub::after { content: '→'; font-family: var(--font-label); font-size: 0.9rem; font-weight: 400; opacity: 0.8; }
.nav-mobile a.nav-mobile-sub { padding: 0.62rem 0 0.62rem 0.9rem !important; font-size: 0.78rem !important; border-bottom: 0 !important; }
.nav-mobile a.nav-mobile-spez { display: flex !important; align-items: center; gap: 0.6rem; color: var(--off-white) !important; box-shadow: inset 2px 0 0 var(--pal-accent); }
.nav-mobile a.nav-mobile-spez em { font-style: normal; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--gold-text); border: 1px solid color-mix(in srgb, var(--pal-accent) 50%, transparent); border-radius: 999px; padding: 0.18rem 0.5rem; }
.nav-mobile-foot { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem !important; }
/* Kopf-Wellenform der Unterseiten im selben Look wie die Startseite */
:root[data-variante="analog"] .pl-wave { filter: grayscale(1) sepia(0.45) brightness(1.35) !important; opacity: 0.55 !important; -webkit-mask-image: none; mask-image: none; bottom: 0 !important; }
:root[data-variante="analog"][data-palette$="-hell"] .pl-wave { filter: grayscale(1) sepia(0.5) brightness(0.55) !important; }
/* Pegelanzeige (Mischpult): Farbe aus dem Skript, nur leicht entsaettigt; hoeher als die Welle */
:root[data-variante="analog"] .pl-wave.pl-desk { filter: saturate(0.75) !important; opacity: 0.85 !important; height: 124px; bottom: 0.6rem !important; }
@media (max-width: 699px) { :root[data-variante="analog"] .pl-wave.pl-desk { height: 70px; } }
:root[data-variante="analog"] .pl-wave.pl-desk--inline { position: relative !important; display: block; bottom: auto !important; width: 100%; height: 124px; padding: 0; background: var(--pal-night); }
:root[data-variante="analog"][data-palette$="-hell"] .pl-wave.pl-desk { filter: none !important; opacity: 0.8 !important; }
@media (max-width: 699px) { :root[data-variante="analog"] .pl-wave.pl-desk--inline { height: 70px; } }
/* Startseite: Pegelanzeige statt Wellenform - auch die Wellenform im Kontaktbereich entfaellt */
:root[data-variante="analog"] canvas[data-wave] { display: none !important; }
/* Startseite: Pegel liegt unter dem Kopf - selbst Mausereignisse empfangen, damit das Uebersteuern fluessig folgt */
:root[data-variante="analog"] .pl-wave.pl-desk--inline { pointer-events: auto !important; cursor: default; }

/* ---- Kachel-LED: aus im Ruhezustand, "on" beim Drueberfahren -------------
   Wie die Kontroll-LED an einem Geraet: gedimmt, beim Hover geht sie an
   (leuchtet mit kurzem Aufflackern), Etikett und Randmarkierung ziehen mit. */
:root[data-variante="analog"] main .offer-tag::before {
  background: color-mix(in srgb, var(--pal-accent) 32%, var(--pal-card)) !important; box-shadow: none !important;
  transition: background 0.18s, box-shadow 0.25s; }
:root[data-variante="analog"] main .offer-tag { transition: border-color 0.25s, color 0.25s; }
:root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor) > .offer-tag::after { opacity: 0.45; transition: opacity 0.25s, box-shadow 0.25s; }
:root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor, a, div):hover > .offer-tag::before {
  background: var(--pal-accent) !important;
  box-shadow: 0 0 6px var(--pal-accent), 0 0 14px color-mix(in srgb, var(--pal-accent) 60%, transparent) !important;
  animation: led-on 0.35s steps(1, end) 1; }
:root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor, a, div):hover > .offer-tag { border-color: var(--pal-accent) !important; }
:root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor):hover > .offer-tag::after { opacity: 1; box-shadow: 0 0 10px var(--pal-accent); }
@keyframes led-on { 0% { opacity: 1; } 30% { opacity: 0.35; } 55% { opacity: 1; } 75% { opacity: 0.6; } 100% { opacity: 1; } }
/* Touch-Geraete haben kein Hover: LED dort einfach an */
@media (hover: none) {
  :root[data-variante="analog"] main .offer-tag::before { background: var(--pal-accent) !important; box-shadow: 0 0 6px color-mix(in srgb, var(--pal-accent) 70%, transparent) !important; }
  :root[data-variante="analog"] main :is(.offer-card, .service-card, .hub-card, .case-card, .audience-card, .problem-card, .ref-card, .idea, .factor) > .offer-tag::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { :root[data-variante="analog"] main .offer-tag::before { animation: none !important; } }
/* WeLive-Logo: keine helle Unterlage mehr - es gibt jetzt die weiss/rote Fassung fuer dunkle Flaechen */
:root[data-variante="analog"] img[src*="logo-welive"] { background: none !important; padding: 0 !important; filter: none !important; }
/* Heller Modus: Fotos wieder in Farbe, warm und leicht verblasst wie im dunklen Modus (statt S/W) */
:root[data-variante="analog"][data-palette$="-hell"] main img:not([src*="logo"]):not([src^="data:"]),
:root[data-variante="analog"][data-palette$="-hell"] #hero .hero-img img { filter: sepia(0.18) saturate(0.85) contrast(1.02) !important; }
:root[data-variante="analog"][data-palette$="-hell"] main :is(a, div, figure):hover > img:not([src*="logo"]) { filter: sepia(0.05) saturate(1) !important; }
:root[data-variante="analog"][data-palette$="-hell"] :is(.page-hero, .hero-wrap-legacy)[style*="--hero-photo"]::before { filter: sepia(0.22) saturate(0.8) contrast(1.02) !important; }
:root[data-variante="analog"][data-palette$="-hell"] main iframe[src*="spotify.com"],
:root[data-variante="analog"][data-palette$="-hell"] main iframe[data-src*="spotify.com"] { filter: none; }
/* Startseite: wechselnder Slogan - Schreibmaschinen-Cursor */
.hero-slogan .rot-cursor { display: inline-block; width: 0.08em; height: 0.82em; margin-left: 0.04em; vertical-align: -0.04em; background: currentColor; animation: rot-blink 0.9s steps(1, end) infinite; }
.hero-slogan .rot-c + .rot-cursor, .hero-slogan .rot-c .rot-cursor { background: var(--gold-text); }
@keyframes rot-blink { 50% { opacity: 0; } }
.hero-slogan .rot-c:empty::after { opacity: 0; }
/* Cursor nimmt keinen Platz in der Zeilenhoehe ein (verhindert Springen) */
.hero-slogan .rot-cursor { height: 0.75em; vertical-align: baseline; margin-bottom: -0.05em; }
.hero-slogan .rot-a + .rot-cursor { background: currentColor; }
/* Startseite: Inhalt im Kopf oben ausrichten wie auf den Unterseiten (statt unten in einem bildschirmhohen Kopf) */
:root[data-variante="analog"] #hero { align-items: flex-start !important; min-height: 0 !important; }
@layer base { :root[data-variante="analog"] #hero { align-items: flex-start !important; min-height: 0 !important; } }
/* Seitenkoepfe ueberall nur so hoch wie der Inhalt (wie die Startseite), damit die Pegel
   frueher im Bild sind; einheitlicher Abstand unter den Knoepfen. */
:root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy) { min-height: 0 !important; padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
@layer base { :root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy) { min-height: 0 !important; padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; } }
:root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy):is(.pl-film, .pl-has-wave) { padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
@layer base { :root[data-variante="analog"] :is(#hero, .page-hero, .hero-wrap-legacy):is(.pl-film, .pl-has-wave) { padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; } }
/* (Abstand unter dem Pegel regelt jetzt plugin-ui.js einheitlich) */
/* Abstand nach FAQ-Bloecken (Artikel u. a.): folgender Text klebte direkt unter der letzten Frage */
main :is(.faq-list, .faq, .faq-box, .faq-items, [class*="faq-wrap"]) + :not(.faq-item):not(script):not(style) { margin-top: clamp(2rem, 4vw, 3rem) !important; }
main .faq-item + :not(.faq-item):not(.faq-a):not(script):not(style) { margin-top: clamp(2rem, 4vw, 3rem) !important; }
/* Projekt-/Case-Study-Karten: Bild vertikal mittig neben dem Text statt oben angeheftet */
.project-card { align-items: center !important; }
.project-card .thumb { align-self: center !important; margin: clamp(1rem, 2vw, 1.75rem) 0 clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem); border-radius: 10px; }
@media (max-width: 780px) { .project-card .thumb { margin: 1rem 1rem 0; } }
@media (max-width: 780px) {
  .project-card h2 { font-size: clamp(1.35rem, 6vw, 1.75rem) !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: auto; }
  .project-card .body { padding: 1.4rem 1.25rem 1.6rem !important; }
}
/* Foto rechts im Kopf (z. B. Wie wir arbeiten): unten weich in den Grund auslaufen lassen,
   damit es nicht hart auf den Pegelstreifen stoesst */
html:root[data-variante="analog"] body :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"]::before {
  background:
    linear-gradient(90deg, var(--pal-night) 0%, color-mix(in srgb, var(--pal-night) 0%, transparent) 22%),
    linear-gradient(0deg, var(--pal-night) 0%, color-mix(in srgb, var(--pal-night) 0%, transparent) 35%),
    var(--hero-photo) center 30% / cover no-repeat !important; }
@layer base { html:root[data-variante="analog"] body :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"]::before {
  background: linear-gradient(90deg, var(--pal-night) 0%, transparent 22%), linear-gradient(0deg, var(--pal-night) 0%, transparent 35%), var(--hero-photo) center 30% / cover no-repeat !important; } }
/* Pegelstreifen etwas flacher */
:root[data-variante="analog"] .pl-wave.pl-desk--inline { height: 104px !important; }
@media (max-width: 699px) { :root[data-variante="analog"] .pl-wave.pl-desk--inline { height: 64px !important; } }

/* Trennlinie unter dem Pegel, wenn keine Referenzleiste folgt (Im-Detail-Seiten, Projekte, Artikel) */
:root[data-variante="analog"] .pl-wave.pl-desk--inline.pl-desk--line { border-bottom: 1px solid var(--line-strong, var(--border)); box-sizing: content-box; }

/* Handy/Tablet: Kopffoto rechts (Wie wir arbeiten, Filmstudio) als Bildstreifen OBEN,
   Text darunter auf ruhigem Grund statt quer uebers Foto (war schwer lesbar) */
@media (max-width: 900px) {
  html:root body :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"] { padding-top: calc(clamp(220px, 64vw, 400px) - 28px) !important; }
  html:root body :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"]::before {
    inset: 0 0 auto 0 !important; left: 0 !important; height: clamp(220px, 64vw, 400px) !important;
    background: linear-gradient(0deg, var(--pal-night) 0%, color-mix(in srgb, var(--pal-night) 0%, transparent) 45%), var(--hero-photo) center 28% / cover no-repeat !important; }
}
@layer base { @media (max-width: 900px) {
  html:root body :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"] { padding-top: calc(clamp(220px, 64vw, 400px) - 28px) !important; }
  html:root body :is(.page-hero, .hero-wrap-legacy)[data-foto="rechts"]::before {
    inset: 0 0 auto 0 !important; left: 0 !important; height: clamp(220px, 64vw, 400px) !important;
    background: linear-gradient(0deg, var(--pal-night) 0%, transparent 45%), var(--hero-photo) center 28% / cover no-repeat !important; }
} }

/* Handy: Projekt-Karten breiter - Abstaende stapelten sich (Container + Raster + Karte + Text) */
@media (max-width: 700px) {
  html:root body .container:has(> .project-grid) { padding-left: 1rem !important; padding-right: 1rem !important; }
  html:root body .project-grid { padding-left: 0 !important; padding-right: 0 !important; }
  html:root body .project-card { padding: 0 !important; overflow: hidden; }
  html:root body .project-card .thumb { margin: 0 !important; width: 100% !important; border-radius: 0 !important; }
  html:root body .project-card .body { padding: 1.25rem 1.15rem 1.4rem !important; }
}
@layer base { @media (max-width: 700px) {
  html:root body .container:has(> .project-grid) { padding-left: 1rem !important; padding-right: 1rem !important; }
  html:root body .project-grid { padding-left: 0 !important; padding-right: 0 !important; }
  html:root body .project-card { padding: 0 !important; overflow: hidden; }
  html:root body .project-card .thumb { margin: 0 !important; width: 100% !important; border-radius: 0 !important; }
  html:root body .project-card .body { padding: 1.25rem 1.15rem 1.4rem !important; }
} }

/* Alle Kopffotos einheitlich wie auf der Startseite: Foto vollflaechig hinten, Verlauf von links,
   und unten komplett in den Grund auslaufen, damit das Bild nicht hart am Pegelstreifen anliegt */
html:root body :is(.page-hero, .hero-wrap-legacy)[style*="--hero-photo"]:not([data-foto])::before {
  background:
    linear-gradient(0deg, var(--pal-night) 0%, color-mix(in srgb, var(--pal-night) 0%, transparent) 38%),
    linear-gradient(90deg, color-mix(in srgb, var(--pal-night) 94%, transparent) 0%,
      color-mix(in srgb, var(--pal-night) 74%, transparent) 48%, color-mix(in srgb, var(--pal-night) 18%, transparent) 92%),
    var(--hero-photo) center 40% / cover no-repeat !important; }
@media (max-width: 700px) {
  html:root body :is(.page-hero, .hero-wrap-legacy)[style*="--hero-photo"]:not([data-foto])::before {
    background:
      linear-gradient(0deg, var(--pal-night) 0%, color-mix(in srgb, var(--pal-night) 90%, transparent) 30%, color-mix(in srgb, var(--pal-night) 60%, transparent) 100%),
      var(--hero-photo) center 35% / cover no-repeat !important; }
}

/* ---- Kachel-LED nur auf anklickbaren Kacheln (Klassen setzt plugin-ui.js) ---- */
:root[data-variante="analog"] main .pl-led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.6em; vertical-align: 0.12em; flex-shrink: 0;
  background: color-mix(in srgb, var(--pal-accent) 32%, var(--pal-card)); transition: background 0.18s, box-shadow 0.25s; }
:root[data-variante="analog"] main .pl-click:hover .pl-led {
  background: var(--pal-accent); box-shadow: 0 0 6px var(--pal-accent), 0 0 14px color-mix(in srgb, var(--pal-accent) 60%, transparent); animation: led-on 0.35s steps(1, end) 1; }
/* nicht anklickbar: Etikett bleibt, LED-Punkt verschwindet, kein Aufleuchten */
html:root[data-variante="analog"] body main .pl-noclick > .offer-tag::before { display: none !important; }
html:root[data-variante="analog"] body main .pl-noclick > .offer-tag { gap: 0 !important; }
html:root[data-variante="analog"] body main .pl-noclick:hover > .offer-tag { border-color: color-mix(in srgb, var(--pal-accent) 45%, transparent) !important; }
html:root[data-variante="analog"] body main .pl-noclick:hover > .offer-tag::after { opacity: 0.45 !important; box-shadow: none !important; }
@layer base {
  html:root[data-variante="analog"] body main .pl-noclick > .offer-tag::before { display: none !important; }
  html:root[data-variante="analog"] body main .pl-noclick > .offer-tag { gap: 0 !important; }
}
@media (hover: none) {
  :root[data-variante="analog"] main .pl-click .pl-led { background: var(--pal-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--pal-accent) 70%, transparent); }
}

/* ---- Menue-LEDs: gedimmt, beim Hover an, aktuelle Seite leuchtet dauerhaft ---- */
:root[data-variante="analog"] .nav-dd-menu a .dd-label::before,
:root[data-variante="analog"] .nav-mobile a.nav-mobile-sub::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.7em; vertical-align: 0.15em; flex-shrink: 0;
  background: color-mix(in srgb, var(--pal-accent) 30%, var(--pal-card)); transition: background 0.18s, box-shadow 0.25s; }
:root[data-variante="analog"] .nav-dd-menu a:is(:hover, :focus-visible) .dd-label::before,
:root[data-variante="analog"] .nav-mobile a.nav-mobile-sub:is(:hover, :focus-visible)::before {
  background: var(--pal-accent); box-shadow: 0 0 6px var(--pal-accent), 0 0 12px color-mix(in srgb, var(--pal-accent) 55%, transparent); animation: led-on 0.35s steps(1, end) 1; }
:root[data-variante="analog"] .nav-dd-menu a.active .dd-label::before,
:root[data-variante="analog"] .nav-mobile a.nav-mobile-sub.active::before {
  background: var(--pal-accent); box-shadow: 0 0 6px var(--pal-accent); }