/* ═══════════ LINKS DER ISAR - Projektseiten (Template)
   Baut auf legal.css auf (Kopf-/Fussleiste, Basistypo) und ergaenzt
   Case-Hero, Inhaltssektionen, Bild-Figuren, CTA und Next-Navigation. ═══════════ */

/* ── Case-Kopf ── */
.cs-head { padding:clamp(36px,7vh,84px) 0 clamp(30px,4vh,48px); }
.cs-eyebrow { margin:0; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(11,12,14,.45); }
.cs-eyebrow em { font-style:normal; color:var(--acc); }
.cs-head h1 { margin:14px 0 20px; max-width:1000px; font-family:'Helvetica Now Display','Helvetica Now Text','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:clamp(34px,4.8vw,64px); line-height:1.05; letter-spacing:-.03em; }
.cs-head h1 em { font-style:normal; color:var(--acc); }
.cs-lead { margin:0; max-width:760px; font-size:clamp(15.5px,1.3vw,18px); line-height:1.7; color:rgba(11,12,14,.68); }

/* Meta-Zeile */
.cs-meta { display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,56px); margin:clamp(26px,3.6vh,40px) 0 0; padding-top:clamp(18px,2.4vh,26px); border-top:1px solid rgba(11,12,14,.1); }
.cs-meta div { display:flex; flex-direction:column; gap:5px; }
.cs-meta dt { margin:0; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,12,14,.4); }
.cs-meta dd { margin:0; font-size:14px; font-weight:500; color:rgba(11,12,14,.85); }

/* ── Hero-Bild ── */
.cs-hero { margin:clamp(28px,4vh,48px) 0 0; }
.cs-hero img { display:block; width:100%; height:clamp(260px,52vh,560px); object-fit:cover; border-radius:8px; }

/* ── Inhalt ── */
.cs-main { padding:clamp(40px,6vh,72px) 0 clamp(70px,9vh,110px); }
.cs-copy { max-width:820px; }
.cs-copy h2 { margin:clamp(44px,5.5vw,68px) 0 14px; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif; font-weight:700; font-size:clamp(22px,2.2vw,32px); line-height:1.18; letter-spacing:-.02em; }
.cs-copy h2:first-child { margin-top:0; }
.cs-copy p { margin:0 0 16px; font-size:15.5px; line-height:1.78; color:rgba(11,12,14,.72); }
.cs-copy a { color:var(--acc); text-decoration:underline; text-decoration-color:rgba(5,51,43,.35); text-underline-offset:3px; }

/* Bild-Figuren duerfen breiter laufen als der Text */
.cs-fig { margin:clamp(26px,3.6vh,40px) 0; max-width:1000px; }
.cs-fig img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid rgba(11,12,14,.08); background:#FFFFFF; }
.cs-fig-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,24px); max-width:1000px; margin:clamp(26px,3.6vh,40px) 0; }
.cs-fig-row .cs-fig { margin:0; }

/* ── CTA-Band ── */
.cs-cta { background:var(--acc); color:#F4F6F3; border-radius:8px; padding:clamp(30px,4vw,56px); display:flex; align-items:center; justify-content:space-between; gap:22px 40px; flex-wrap:wrap; margin:clamp(30px,5vh,60px) 0 0; }
.cs-cta h2 { margin:0; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif; font-weight:700; font-size:clamp(22px,2.4vw,34px); letter-spacing:-.02em; line-height:1.2; }
.cs-cta p { margin:8px 0 0; font-size:14px; line-height:1.6; color:rgba(244,246,243,.75); max-width:520px; }
.cs-cta-btn { flex:0 0 auto; display:inline-block; background:#F4F4F2; color:#05332B; font-size:13px; font-weight:600; letter-spacing:.01em; padding:14px 26px; border-radius:8px; text-decoration:none; white-space:nowrap; transition:background .3s; }
.cs-cta-btn:hover { background:#1a663f; }

/* ── Next-Navigation ── */
.cs-next { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:clamp(26px,4vh,44px) 0 0; padding-top:clamp(20px,3vh,30px); border-top:1px solid rgba(11,12,14,.1); }
.cs-next a { text-decoration:none; }
.cs-next .cs-next-back { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(11,12,14,.55); transition:color .3s; }
.cs-next .cs-next-back:hover { color:var(--acc); }
.cs-next .cs-next-proj { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.cs-next .cs-next-proj small { font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,12,14,.4); }
.cs-next .cs-next-proj strong { font-family:'Helvetica Now Display',sans-serif; font-weight:700; font-size:clamp(18px,1.8vw,26px); letter-spacing:-.015em; color:#0B0C0E; transition:color .3s; }
.cs-next a:hover .cs-next-proj strong, .cs-next a:hover strong { color:var(--acc); }

@media (max-width:720px) {
  .cs-fig-row { grid-template-columns:1fr; }
  .cs-hero img { height:clamp(200px,34vh,320px); }
}

/* ── SEO-/Leistungsseiten: Ergaenzungen zum Case-Template ── */
.cs-copy h3 { margin:24px 0 8px; font-size:16px; font-weight:650; letter-spacing:-.005em; }
.cs-copy ul { margin:0 0 16px; padding-left:20px; font-size:15.5px; line-height:1.78; color:rgba(11,12,14,.72); }
.cs-copy li { margin:0 0 7px; }
/* 24px statt 10px (10.08.2026): mit dem 14px-margin der h1 fiel der
   Abstand vorher auf 14px zusammen - jetzt ueberall einheitlich 24px. */
.sv-breadcrumb { margin:0 0 24px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(11,12,14,.4); }
.sv-breadcrumb a { color:inherit; text-decoration:none; }
.sv-breadcrumb a:hover { color:var(--acc); }
.sv-related { max-width:1000px; margin:clamp(30px,5vh,54px) 0 0; }
.sv-related h2 { margin:0 0 16px; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif; font-weight:700; font-size:clamp(19px,1.8vw,26px); letter-spacing:-.015em; }
.sv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(14px,1.8vw,24px); }
.sv-card { display:flex; flex-direction:column; gap:8px; background:#FFFFFF; border:1px solid rgba(11,12,14,.08); border-radius:8px; padding:clamp(18px,2vw,26px); text-decoration:none; color:inherit; transition:border-color .25s, transform .25s; }
.sv-card:hover { border-color:var(--acc); transform:translateY(-2px); }
.sv-card strong { font-size:15.5px; font-weight:650; letter-spacing:-.01em; color:#0B0C0E; line-height:1.3; }
.sv-card span { font-size:13px; line-height:1.55; color:rgba(11,12,14,.55); }
.sv-card em { font-style:normal; margin-top:auto; padding-top:6px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); }

/* Leistungen-Hub: Zeilen-Hover wie auf der Startseite (dort via JS) */
.lg-root a[style-hover]:hover { background:#FFFFFF !important; }
html.dark .lg-root a[style-hover]:hover { background:#16181B !important; }

/* Leistungen-Hub: Headlines wie auf der Startseite (Display-Schnitt) -
   die index-Regel haengt an #ldi-root und greift hier sonst nicht */
.lg-root main h1, .lg-root main h2, .lg-root main h3 {
  font-family:'Helvetica Now Display','Helvetica Now Text','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ═══════════ Projekt-Detail: Cinematic-Sektionen (Mercedes) ═══════════
   Ergaenzt das Case-Template um Kopf-Grid, Bild-Galerie mit Entrance-
   Reveal, Fullscreen-BG-Slider und scrollgesteuerte Icon-Sektion.
   Animationen: nur opacity/transform (GPU), reduced-motion beachtet. */

/* Kopf: Akzent-Subline + zweispaltiges Meta/Copy-Grid */
.cs-sub { margin:6px 0 0; font-size:clamp(17px,1.6vw,22px); font-weight:600; letter-spacing:-.01em; color:var(--acc); }
.cs-head-grid { display:grid; grid-template-columns:minmax(190px,260px) minmax(0,1fr); gap:clamp(24px,4vw,64px); margin-top:clamp(26px,3.6vh,40px); padding-top:clamp(18px,2.4vh,26px); border-top:1px solid rgba(11,12,14,.1); }
.cs-meta.cs-meta-col { flex-direction:column; gap:18px; margin:0; padding:0; border-top:none; }
.cs-head-copy p { margin:0 0 16px; font-size:15.5px; line-height:1.78; color:rgba(11,12,14,.72); }
.cs-head-copy p:last-child { margin-bottom:0; }
@media (max-width:720px) { .cs-head-grid { grid-template-columns:1fr; gap:22px; } }

/* Galerie: ein Breitbild + Bildpaar */
.cs-gallery { padding-top:clamp(10px,2vh,24px); }
.cs-gal-wide, .cs-gal-row figure { margin:0; }
.cs-gallery img { display:block; width:100%; object-fit:cover; border-radius:8px; }
.cs-gal-wide img { height:clamp(300px,56vh,640px); }
.cs-gal-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,24px); margin-top:clamp(14px,1.8vw,24px); }
.cs-gal-row img { height:clamp(170px,30vh,360px); }
@media (max-width:720px) { .cs-gal-row { grid-template-columns:1fr; } }

/* Natuerliche Proportionen statt fester Hoehe/Beschnitt (Passngr):
   Banner in Original-Seitenverhaeltnis; Bildpaar 1.88:1 geteilt, so
   rendern beide Motive unbeschnitten mit exakt gleicher Hoehe */
.cs-gal-natural img { height:auto; }
.cs-gal-row--split { grid-template-columns:2.04fr 1fr; }   /* 1758x1240 + 860x1240: gleiche Hoehe, unbeschnitten */
@media (max-width:720px) { .cs-gal-row--split { grid-template-columns:1fr; } }

/* Entrance-Reveal: fade + leichte Aufwaertsbewegung + Scale 1.05 -> 1;
   .csx-fade = Textvariante ohne Scale (nur fade + up) */
.csx-reveal { opacity:0; transform:translateY(26px) scale(1.05); transition:opacity .9s cubic-bezier(.22,.7,.2,1), transform 1.1s cubic-bezier(.22,.7,.2,1); transition-delay:var(--rvd,0s); will-change:opacity,transform; }
.csx-fade { opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.22,.7,.2,1), transform .9s cubic-bezier(.22,.7,.2,1); transition-delay:var(--rvd,0s); will-change:opacity,transform; }
.csx-reveal.csx-in, .csx-fade.csx-in { opacity:1; transform:none; }

/* Parallax: Bild bewegt sich sanft im maskierten Rahmen (JS setzt --plxy) */
.cs-gallery figure { overflow:hidden; border-radius:8px; }
.cs-plx { transform:translate3d(0, var(--plxy, 0px), 0) scale(1.08); will-change:transform; }

/* Text-Zwischensektionen (Typo identisch zu .cs-copy); einheitliches
   vertikales Pacing: gleicher Abstand VOR und NACH jeder Textsektion */
.cs-txt { max-width:820px; padding:clamp(60px,11vh,160px) 0; }
.cs-txt .cs-eyebrow { margin:0 0 14px; }
.cs-txt h2 { margin:0 0 14px; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif; font-weight:700; font-size:clamp(22px,2.2vw,32px); line-height:1.18; letter-spacing:-.02em; }
.cs-txt p { margin:0; font-size:15.5px; line-height:1.78; color:rgba(11,12,14,.72); }
.cs-txt p + p { margin-top:14px; }

/* Fullscreen-Basisbausteine (auch von der Scroll-Sektion genutzt) */
.cs-fs-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.07); transition:opacity 1.6s ease, transform 7s linear; will-change:opacity,transform; }
.cs-fs-bg.act { opacity:1; transform:scale(1); }
.cs-fs-text { position:relative; z-index:2; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 clamp(20px,6vw,80px); }
.cs-fs-text p { max-width:860px; margin:0; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,34px); line-height:1.4; letter-spacing:-.015em; color:#F4F6F3; text-shadow:0 2px 24px rgba(5,10,9,.45); }
/* Variante: Text im unteren Frame-Bereich (wenn die Buehnenmitte belegt ist) */
.cs-fs-text.cs-fs-text--low { align-items:flex-end; padding-bottom:clamp(90px,17vh,170px); box-sizing:border-box; }
.cs-fs-text.cs-fs-text--low p { font-size:clamp(18px,1.9vw,27px); }
/* robodocxs-Showcase: Flow-Szene kompakter - Eingangs- und System-Boxen
   naeher an die Mitte (nur in der Fullscreen-Sektion, Home-Karte bleibt) */
.cs-fs2-frame .rd-scene { left:16%; right:16%; }

/* Scrollgesteuerter BG-Slider: startet in Grid-Breite (clip-path),
   expandiert beim Scrollen auf Fullscreen, pinnt, Motive wechseln
   scroll-getrieben per Crossfade, schrumpft am Ende zurueck.
   JS steuert --fsx/--fsy (Insets) und die Motiv-Opazitaeten. */
/* Negative Margins = initialer Vertikal-Beschnitt des Frames (10vh, max 96px):
   so misst der SICHTBARE Abstand zur Textsektion exakt das Standard-Pacing */
.cs-fs2-track { height:340vh; margin:calc(-1 * min(10vh, 96px)) 0; }
.cs-fs2-sticky { position:sticky; top:0; height:100vh; min-height:540px; overflow:hidden; }
.cs-fs2-frame { position:absolute; inset:0; background:#0B0C0E; color:#F4F6F3;
  clip-path:inset(var(--fsy,0px) var(--fsx,0px) round var(--fsr,0px));
  -webkit-clip-path:inset(var(--fsy,0px) var(--fsx,0px) round var(--fsr,0px)); }
.cs-fs2-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; will-change:opacity,transform; }
.cs-fs2-bg video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Statischer Hintergrund hinter den wechselnden Ebenen (Passngr);
   ::after = dunkles Overlay (#000, 14%) fuer bessere Lesbarkeit */
.cs-fs2-base { position:absolute; inset:0; background-size:cover; background-position:center; }
.cs-fs2-base::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.14); }

/* Passngr-Showcase: Phone steht fix, Screens crossfaden darauf,
   Airport-Zeilen und Departure/Arrival fliegen scroll-getrieben ein/aus.
   Feste Anker: Phone und Panel sitzen immer am selben Punkt der Buehne.
   Masse aus den Assets: Zeile 322x56, Panel A 644x626, Panel B 644x772. */
.cs-fs2-track--long { height:520vh; }
.cs-fs3-canvas { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:min(62vh,560px,56vw); aspect-ratio:1.6; }
.fs3-phone, .fs3-screen { position:absolute; left:16%; top:2%; height:120%; width:auto; }
.fs3-phone { filter:drop-shadow(0 24px 60px rgba(5,10,9,.35)); }
.fs3-panel { position:absolute; right:12%; top:56%; transform:translateY(-50%); width:40%; aspect-ratio:644/772; }
.fs3-panel-a { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); aspect-ratio:644/626; }
.fs3-panel-b { position:absolute; inset:0; }
.fs3-row { position:absolute; left:0; width:100%; height:17.9%; top:calc(var(--i,0) * 20.53%); }
.fs3-da { position:absolute; left:0; width:100%; height:48.7%; }
/* Frosted-Glass: Hintergrundfoto hinter den Panels weich zeichnen.
   Radius exakt an die SVG-Rundung (rx=7.5 bei 322 Breite) angepasst,
   proportional in %, damit er bei jeder Rendergroesse deckungsgleich ist */
.fs3-row, .fs3-da { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.fs3-row { border-radius:2.33% / 13.39%; }
.fs3-da { border-radius:2.33% / 3.99%; }
.fs3-da1 { top:0; }
.fs3-da2 { top:51.3%; }
.cs-fs3-canvas [data-io] { opacity:0; will-change:opacity,transform; }

/* Zeppelin-Showcase: Frosted-Glass-Visitenkarten skalieren scroll-
   getrieben nacheinander ein/aus (JS: data-io + data-fx="scale") */
.zp-bc { position:absolute; opacity:0; transform:scale(0); will-change:opacity,transform;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow:hidden; box-shadow:0 18px 50px rgba(5,10,9,.18); }
.zp-bc img { display:block; width:100%; height:auto; }

/* Zeppelin: kurzer Scrollweg - Karten rein/raus ohne Leerlauf */
.cs-fs2-track--short { height:280vh; }

/* Festzelt OS: Flow-Animation als Kachel (iframe, eigenstaendig) */
.cs-gallery figure.fz-flow { position:relative; margin:0; aspect-ratio:1000/633; border-radius:8px; overflow:hidden;
  background:url("../images/projects/festzeltos-img-3.jpg") center/cover no-repeat #F5F5F3; border:1px solid rgba(11,12,14,.08); }
.fz-flow iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }

/* Festzelt OS: Drei-Tools-Animation als breite Kachel (iframe, eigenstaendig) */
.cs-gallery figure.fz-tools { position:relative; margin:0; aspect-ratio:1600/760; border-radius:8px; overflow:hidden;
  background:#F5F5F3; border:1px solid rgba(11,12,14,.08); }
.fz-tools iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }

/* robodocxs: Scan-Extraktions-Animation als breite Kachel (iframe, eigenstaendig) */
.cs-gallery figure.rd-scan { position:relative; margin:0; aspect-ratio:1600/760; border-radius:8px; overflow:hidden;
  background:#dceafa; border:1px solid rgba(11,12,14,.08); }
.rd-scan iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }

/* Balluff: Ecosystem-Animation als breite Kachel (iframe, eigenstaendig) */
.cs-gallery figure.bl-eco { position:relative; margin:0; aspect-ratio:1760/900; border-radius:8px; overflow:hidden;
  background:#05070f; border:1px solid rgba(11,12,14,.08); }
.bl-eco iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }

/* robodocxs: Counter-Animation als breite Kachel (iframe, eigenstaendig) */
.cs-gallery figure.rd-counter { position:relative; margin:0; aspect-ratio:938/420; border-radius:8px; overflow:hidden; }
.rd-counter iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }

/* Zeppelin: Scan-Animation als Kachel. Das Phone (550px hoch, im iframe
   vertikal zentriert) beginnt 24px unter der Kachel-Oberkante und wird
   unten beschnitten: top = 24px + 275px - 100% Kachelhoehe. */
.cs-gallery figure.zp-anim { position:relative; aspect-ratio:1400/880; border-radius:32px; overflow:hidden;
  background:#FFFFFF; border:1px solid rgba(11,12,14,.08); }
.zp-anim iframe { position:absolute; left:0; top:calc(316px - 100%); width:100%; height:200%; border:0; pointer-events:none; }
/* Buehne fuer wechselnde Kompositionen: Phone + Info-Panel zentriert */
.cs-fs2-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,90px); padding:0 clamp(16px,4vw,60px); }
.cs-fs2-stage .pn-ph { height:min(62vh,560px); max-width:44vw; width:auto; object-fit:contain; filter:drop-shadow(0 24px 60px rgba(5,10,9,.35)); }
.cs-fs2-stage .pn-tx { height:min(36vh,330px); max-width:42vw; width:auto; object-fit:contain; }
.cs-fs2-frame .cs-fs-text { opacity:var(--fst,0); }

/* Scroll-Sektion: Sticky-Buehne, BG + Mittelbild + Text wechseln synchron */
.cs-scrolly-track { height:280vh; }
.cs-scrolly-sticky { position:sticky; top:0; height:100vh; min-height:540px; overflow:hidden; background:#0B0C0E; color:#F4F6F3; }
.cs-sc-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(52vh,440px,78vw); aspect-ratio:1; z-index:2; }
.cs-sc-img { position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.22,.7,.2,1); will-change:opacity,transform; border-radius:8px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.cs-sc-img img { display:block; width:100%; height:100%; object-fit:cover; }
.cs-sc-img.act { opacity:1; transform:scale(1); }
.cs-sc-txt { position:absolute; z-index:3; left:clamp(20px,6vw,90px); top:50%; transform:translateY(calc(-50% + 14px)); max-width:300px; opacity:0; transition:opacity .9s ease, transform .9s cubic-bezier(.22,.7,.2,1); will-change:opacity,transform; }
.cs-sc-txt.act { opacity:1; transform:translateY(-50%); }
.cs-sc-txt h3 { margin:0 0 8px; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif; font-weight:700; font-size:clamp(20px,1.9vw,28px); line-height:1.2; letter-spacing:-.02em; color:#F4F6F3; }
.cs-sc-txt p { margin:0; font-size:13px; line-height:1.6; letter-spacing:.04em; color:rgba(244,246,243,.65); }
@media (max-width:720px) {
  .cs-sc-txt { top:auto; bottom:clamp(24px,6vh,48px); transform:translateY(10px); max-width:none; right:clamp(20px,6vw,90px); }
  .cs-sc-txt.act { transform:none; }
}

/* Zitat: gleicher Vor-Abstand wie die Textsektionen */
.cs-quote { max-width:1000px; padding:clamp(60px,11vh,160px) 0 0; }
.cs-quote .cs-eyebrow { margin:0 0 18px; }
/* Sublines ueberall gleich gross (die Textsektionen erben 15.5px aus
   .cs-txt p - Zitat und CTA ziehen hier nach) */
.cs-quote .cs-eyebrow, .cs-cta .cs-eyebrow { font-size:15.5px; }
/* Zitat-Quelle (Testimonials) */
.cs-quote-src { margin:18px 0 0; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(11,12,14,.45); }
html.dark .cs-quote-src { color:rgba(244,244,242,.45); }
.cs-quote blockquote { margin:0; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif; font-weight:700; font-size:clamp(22px,2.6vw,38px); line-height:1.3; letter-spacing:-.02em; color:#0B0C0E; }

/* CTA-Variante: schwarz statt gruen (Projektseite Mercedes) */
.cs-cta--dark { background:#0B0C0E; }
.cs-cta--dark .cs-eyebrow { margin:0 0 12px; color:rgba(244,246,243,.5); }
.cs-cta--dark .cs-cta-btn { color:#0B0C0E; }
.cs-cta--dark .cs-cta-btn:hover { background:#1a663f; color:#F4F4F2; }

/* Projekt-Navigation: Label und Projektname in einer Zeile */
.cs-next-proj.cs-next-proj--inline { flex-direction:row; align-items:baseline; gap:14px; }

/* Projekt-Navigation ohne Trennlinie + mehr Luft vor dem Footer */
.cs-next.cs-next--plain { border-top:none; padding-top:0; }
.cs-main.cs-main--roomy { padding-bottom:clamp(120px,16vh,220px); }

/* Dark Mode: Flaechen/Text der neuen Sektionen ans dunkle Theme angleichen */
html.dark .cs-head-grid { border-top-color:rgba(244,244,242,.2); }
html.dark .cs-head-copy p, html.dark .cs-txt p { color:rgba(244,244,242,.7); }
html.dark .cs-quote blockquote { color:#F4F4F2; }

/* Reduced Motion: alles sofort sichtbar, keine Bewegtanimationen */
@media (prefers-reduced-motion: reduce) {
  .csx-reveal, .csx-fade { opacity:1; transform:none; transition:none; }
  .cs-fs-bg, .cs-sc-img, .cs-sc-txt { transition:opacity .3s ease; transform:none; }
  .cs-plx { transform:none; }
  .cs-fs2-track { height:auto; margin:0; }
  .cs-fs2-sticky { position:relative; }
  .cs-fs2-frame { clip-path:none; -webkit-clip-path:none; position:relative; height:100vh; }
  .cs-fs2-bg:first-of-type, .cs-fs2-bg--first { opacity:1; }
  .cs-fs2-frame .cs-fs-text { opacity:1; }
  .cs-fs3-canvas [data-io] { opacity:1; transform:none; }
  .cs-fs3-canvas [data-rm-hide] { display:none; }
  .zp-bc { opacity:1; transform:none; }
  .cs-fs2-track--long, .cs-fs2-track--short { height:auto; }
}