/* ============ CI FOUNDATIONS ============ */
:root{
  --creme:#F7F4F0; --ink:#1A1A1A; --dunkel:#1A1A18; --tief:#141413; --tile:#24231F;
  --gedaempft:#948B82; --rot:#F33920; --saum:#EAE3DC; --koerper:#C8BCB2; --kern:#A3958A;
  --weiss:#FFFFFF; --blush:#F4D7CA;
  --rand:30px; --radius:5px; --fuge:10px;
  /* Produkt-Tokens (BI) */
  --bi-bg:#FBFAF8; --bi-line:#E8E5DF; --bi-fg:#0E0E0C; --bi-mut:#6E6A63;
  --font-h:'Archivo',sans-serif; --font-b:'Inter',sans-serif;
  --font-ui:'Geist',sans-serif; --font-mono:'Geist Mono',monospace;
  --font-z:'EB Garamond',Georgia,serif; /* Zitate (CI), Schrift lädt die Seite selbst */
  /* Design-Pixel für alle Seiten (Figma 1440 = 1 px); unter 1101 px fix */
  --u:1px;
}
/* Skalierung auf großen Bildschirmen, zentral für alle Seiten — wie Skinn (12.10.): relativ zu 1440 → 1920: 1,1 · ab 2560: 1,3 (Deckel).
   Zwei Geraden (1440→1920, 1920→2560), max() wählt die passende, min() deckelt. Seiten rechnen ihre Desktop-Maße als calc(N * var(--u)). */
@media (min-width:1101px){:root{--u:min(max(calc(.7px + .0208333vw),calc(.5px + .03125vw)),1.3px);--rand:calc(30 * var(--u));--radius:calc(5 * var(--u))}}
/* mobil: Seitenrand 20 (M-1 v3); Ecken 3 statt 5 (Artur 13.10.: 5 wirkt auf den kleineren Bildern zu rund; Skinn nutzt 4) */
@media (max-width:760px){:root{--rand:20px;--radius:3px}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--ink);font-family:var(--font-b);font-size:16px;line-height:1.625;-webkit-font-smoothing:antialiased}
/* Bilder nicht herausziehen (Artur 14.10.: Klicken und Halten zog versehentlich Bilder auf den Schreibtisch); Firefox: dragstart in Base.astro */
img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
section{position:relative;padding-left:var(--rand);padding-right:var(--rand)}

/* Typo-Ebenen */
.h2{font-family:var(--font-h);font-weight:500;font-size:40px;line-height:1.2;letter-spacing:.03em;text-transform:uppercase;max-width:900px}
.body{font-size:16px;line-height:26px;max-width:620px;opacity:.78}
.teaser{font-family:var(--font-h);font-weight:500;font-size:20px;line-height:28px}

/* Sektions-Label: Rubrik in der Kerbe der ersten Headline-Zeile (x=30, Headline-Erstzeile auf 200) */
.label{font:600 12px/15px var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0}
.bi .label,.wwci .label{color:rgba(255,255,255,.9)}
.label.kerbe{float:left;width:170px;margin-top:7px}
.wwci .label.kerbe{margin-top:clamp(6px,.62vw,9px)}
.kerbe + .statement{text-indent:0;margin-top:0}
.zaehler{font:600 12px/1 var(--font-b);letter-spacing:.05em;color:var(--gedaempft);vertical-align:top;margin-left:10px;position:relative;top:6px}
.dot{width:10px;height:10px;display:inline-block;border-radius:50%;background:var(--ink)}

/* Link L */
.link-l{font-family:var(--font-h);font-weight:500;font-size:20px;line-height:28px;letter-spacing:.01em;display:inline-flex;align-items:baseline;position:relative}
.link-l .arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.link-l:hover .arrow{transform:translateX(4px)}
.link-l.primary{background:linear-gradient(currentColor,currentColor) left calc(100% - -7px)/100% 1.5px no-repeat;background-position-y:calc(100% );padding-bottom:7px;background-size:100% 1.5px}
.link-l.primary{background:none;border-bottom:none}
/* Unterstrich direkt unter der 28-px-Textbox (Figma: Unterstreichung Offset 7 / Stärke 1,5 sitzt bei Box + 28); padding-bottom 7 bleibt, die Abstände darunter sind darauf abgestimmt */
.link-l.primary::after{content:"";position:absolute;left:0;top:28px;height:1.5px;width:100%;background:currentColor;transform-origin:left;transition:transform .25s ease}
.link-l:not(.primary)::after{content:"";position:absolute;left:0;top:28px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.link-l:not(.primary):hover::after{transform:scaleX(1)}
.link-l.weiss{color:var(--weiss)}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Grain */

/* ============ HERO ============ */
.hero{height:100vh;height:100svh;min-height:620px;overflow:hidden}
.hero>*{position:relative;z-index:3}
.nav{display:flex;justify-content:space-between;align-items:center;padding:44px 0 0;position:relative}
.nav.fixed-bar{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px var(--rand);background:rgba(247,244,240,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:translateY(-100%);transition:transform .35s ease}
.nav.fixed-bar.show{transform:none}
.wortmarke{font-family:var(--font-h);font-weight:600;font-size:19.28px;letter-spacing:-.015em;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-family:var(--font-b);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--gedaempft);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.lang{font:600 12px/1.2 var(--font-b);letter-spacing:.05em;background:none;border:none;color:var(--ink);display:inline-flex;align-items:center;gap:5px;cursor:pointer}
/* Manifest M-2 (06.10.): Archivo Medium 54/57 bei 1440, Sperrung −3 %, volle Breite */
.manifest{font-family:var(--font-h);font-weight:500;font-size:clamp(32px,3.75vw,80px);line-height:1.05;letter-spacing:-.03em;max-width:none;margin-top:max(18vh,150px);text-indent:170px}
.manifest span{transition:color .5s ease}
.m-ink{color:var(--ink)}.m-rot{color:var(--rot)}.m-grau{color:var(--gedaempft)}
[data-manifest].pending span{color:var(--gedaempft)}
.hero-ctas{display:flex;gap:56px;margin-top:52px}
/* H1 und Showreel-Start am Viewport-Boden verankert, gleiche Kante (Skinn-Muster) */
.hero > h1.hero-label.label{position:absolute;left:var(--rand);bottom:var(--rand);z-index:3}

/* weiche Hero-Kante: Fog läuft in Creme aus statt hart zu schneiden */
.manifest,.hero-ctas{will-change:filter,opacity}

/* ============ SHOWREEL (Skinn-Muster: startet klein unten rechts IM Hero-Viewport, 16:9, wächst auf Full-Bleed) ============ */
.reel{height:200vh;margin-top:-100vh;padding:0;position:relative;z-index:4;pointer-events:none}
.reel-pin{position:sticky;top:0;height:100vh;display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}
.reel-media{position:relative;width:22.6vw;aspect-ratio:16/9;margin:0 var(--rand) var(--rand) 0;border-radius:var(--radius);overflow:hidden;will-change:width,margin-bottom;pointer-events:auto}
.reel-media img{width:100%;height:100%;object-fit:cover}
.reel-media video{display:block;width:100%;height:100%;object-fit:cover}
/* Showreel wächst über die ersten 100vh Scroll von 22,6vw auf volle Breite – als CSS-Scroll-Animation, damit es sofort ab dem ersten Scroll mitläuft
   (vorher erst, wenn main.js geladen war). Browser ohne Unterstützung: main.js übernimmt wie bisher. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes reel-wachsen{from{width:22.6vw;margin-bottom:var(--rand)}to{width:calc(100vw - 2 * var(--rand));margin-bottom:max(calc((100vh - (100vw - 2 * var(--rand)) * 9 / 16) / 2), var(--rand))}}
    .reel-media{animation:reel-wachsen linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
/* BS-04: Wo der Browser mit Längen rechnen kann (calc(a / b) mit Längen), wächst das Showreel per transform statt width/margin-bottom:
   gleiche Lage und Größe in jedem Scroll-Moment, aber ohne Layout-Verschiebung (CLS beim Scrollen am Desktop ≈ 0,25–0,3 → 0).
   Das Element steht in Endgröße im Layout und wird von unten rechts skaliert; translateY gleicht den wachsenden unteren Abstand aus,
   border-radius wird in 10-%-Schritten gegenskaliert, damit die Ecke sichtbar 5 px bleibt. Sonst gilt die width-Animation oben. */
@supports (animation-timeline: scroll()) and (scale: calc(1px / 1px)){
  @media (prefers-reduced-motion: no-preference){
    @keyframes reel-skalieren{
      0%{transform:translateY(calc(max(calc((100vh - (100vw - 2 * var(--rand)) * 9 / 16) / 2), var(--rand)) - var(--rand))) scale(calc(22.6vw / (100vw - 2 * var(--rand))));border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.0))}
      10%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.1))}
      20%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.2))}
      30%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.3))}
      40%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.4))}
      50%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.5))}
      60%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.6))}
      70%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.7))}
      80%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.8))}
      90%{border-radius:calc(var(--radius) * (100vw - 2 * var(--rand)) / (22.6vw + ((100vw - 2 * var(--rand)) - 22.6vw) * 0.9))}
      100%{transform:none;border-radius:var(--radius)}
    }
    .reel-media{width:calc(100vw - 2 * var(--rand));margin-bottom:max(calc((100vh - (100vw - 2 * var(--rand)) * 9 / 16) / 2), var(--rand));transform-origin:right bottom;will-change:transform;animation-name:reel-skalieren}
  }
}
.reel-tag{position:absolute;left:18px;bottom:14px;font:600 10px/1.3 var(--font-b);letter-spacing:.08em;color:rgba(255,255,255,.85)}

/* ============ WORK ============ */
.work{padding-top:110px;padding-bottom:110px}
.work .h2,.news .h2{max-width:none}
/* 3 Spuren 450/420/450 (+2×30 Gutter): groß = 2 Spuren = 900, klein = 1 Spur = 450 — exakt Figma, skaliert fluide, Seiten wechseln je Reihe */
.case-grid{display:grid;grid-template-columns:450fr 420fr 450fr;grid-template-areas:"a a b" "c d d" "e e f";align-items:start;column-gap:var(--rand);row-gap:90px;margin-top:100px;margin-bottom:90px}
.case-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:900/570}
.case.sm .case-img{aspect-ratio:450/317}
.case-img :is(img,video){transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case:hover .case-img :is(img,video){transform:scale(1.04)}
/* Kachel = Link zur Case-Seite; Bild- bzw. Video-Ausschnitt je Kachel aus --pos (mobil --pos-m, start.css) */
.case > a{display:block}
.case-img video{display:block;width:100%;height:100%;object-fit:cover}
.case-img :is(img,video){object-position:var(--pos,50% 50%)}
.case-meta{display:flex;justify-content:space-between;margin-top:24px;font:600 12px/1.25 var(--font-b);letter-spacing:.075em;text-transform:uppercase}
.work-link{display:inline-flex;align-items:center;gap:8px}
.case-titel{font-family:var(--font-h);font-weight:500;font-size:16px;line-height:22px;letter-spacing:.06em;text-transform:uppercase;margin-top:14px;max-width:520px}
.case-titel .grau{color:var(--gedaempft)}

/* ============ BI ============ */
.bi{background:var(--dunkel);color:var(--weiss);padding-top:110px;padding-bottom:96px}
.bi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.bi .body{color:var(--weiss);opacity:.6}
.bi .h2{color:var(--weiss)}
.bi .teaser{margin-top:26px}
.bi .body{margin-top:26px}
.pills{display:flex;gap:10px;margin-top:48px}
.pill{font:500 13px/1.4 var(--font-b);letter-spacing:.01em;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:none;color:rgba(255,255,255,.75);cursor:pointer;transition:all .2s}
.pill:hover{border-color:rgba(255,255,255,.6);color:#fff}
.pill.active{background:var(--creme);color:var(--ink);border-color:var(--creme)}
.karussell{display:flex;gap:30px;margin:40px calc(-1 * var(--rand)) 0;padding:0 var(--rand) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.karussell::-webkit-scrollbar{display:none}
.tile{flex:0 0 980px;scroll-snap-align:center;background:var(--tile);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:36px 32px 32px}
.tile h3{font-family:var(--font-h);font-weight:500;font-size:24px;line-height:1.3;letter-spacing:.01em}
.tile>p{font-size:14px;line-height:22px;opacity:.6;margin-top:8px;max-width:640px}
.preview{background:var(--bi-bg);border-radius:var(--radius);margin-top:28px;height:460px;padding:24px;color:var(--bi-fg);font-family:var(--font-ui);overflow:hidden}
/* Data Dashboard */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--bi-bg);border:1px solid var(--bi-line);border-radius:10px;padding:12px;min-height:78px}
.kpi em{font:600 9px/1.3 var(--font-b);letter-spacing:.06em;color:var(--bi-mut);font-style:normal;display:block}
.kpi strong{font:600 17px/1.2 var(--font-mono);letter-spacing:-.01em;display:block;margin-top:6px}
.kpi small{font:500 10.5px/1.3 var(--font-mono);display:block;margin-top:6px}
.pos{color:#186A23}.neg{color:#B32228}
.heat{width:100%;border-collapse:collapse;margin-top:24px;font-family:var(--font-mono)}
.heat th{font:600 9px/1.3 var(--font-b);letter-spacing:.07em;color:var(--bi-mut);text-align:left;padding:8px 10px}
.heat td{font:500 11px/1.3 var(--font-mono);padding:9px 10px;border-top:1px solid var(--bi-line)}
.heat td:first-child{color:var(--bi-mut)}
td.h1{background:#FDEAE6}td.h2{background:#FDF1E6}td.h3{background:#FBF6EB}td.h4{background:#F1F8E9}td.h5{background:#DFF8E2}
.pv-note{font:400 10.5px/1.4 var(--font-ui);color:var(--bi-mut);display:block;margin-top:18px}
/* Products */
.prod-row{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--bi-line)}
.prod-row:last-child{border-bottom:none}
.thumb{width:34px;height:44px;border-radius:4px;background:#E0DEDA;flex:none}
.prod-row b{font:500 12.5px/1.3 var(--font-ui);display:block}
.prod-row>div{flex:1}
.chips{display:flex;gap:6px;margin-top:6px}
.score,.status,.tag{font:500 9.5px/1.3 var(--font-ui);padding:2px 8px;border-radius:999px;white-space:nowrap}
.score{font-family:var(--font-mono);font-weight:600}
.t1{background:#AEF1BB;color:#004B0C}.t2{background:#CFF3AC;color:#2A4E00}.t3{background:#FFDDA1;color:#713600}.t4{background:#FFCBC3;color:#90101A}
.status{background:#EDE6FF;color:#473571}
.tag.green{background:#EFF8EF;color:#005307}.tag.blue{background:#EFF6FD;color:#00488F}
.mono{font:500 12px/1.3 var(--font-mono)}
/* Action Plan */
.ap-row{display:flex;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid var(--bi-line)}
.ap-row:last-child{border-bottom:none}
.check{width:16px;height:16px;flex:none}
.blitz{color:#B06800;font-size:12px}
.ap-row b{font:500 12.5px/1.3 var(--font-ui);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appill{font:500 11px/1.5 var(--font-ui);padding:3px 9px;border-radius:999px;white-space:nowrap}
.appill.area{background:#F4F2EE;border:1px solid var(--bi-line);display:inline-flex;align-items:center;gap:6px}
.appill.area i{width:8px;height:8px;border-radius:50%;display:inline-block}
.st-done{background:#D9F3DD;color:#235430}.st-wip{background:#C7E9FF;color:#003A8C}.st-plan{background:#F4F2EE;color:#6E6A63;border:1px solid var(--bi-line)}
.avatars{display:inline-flex}
.avatars u{width:22px;height:22px;border-radius:50%;color:var(--bi-bg);font:600 9px/22px var(--font-mono);text-align:center;text-decoration:none;letter-spacing:-.01em}
.avatars u+u{margin-left:-6px;box-shadow:0 0 0 1.5px var(--bi-bg)}
.appill.kw{background:#F3F1EE;border:1px solid var(--bi-line);font-family:var(--font-mono);font-size:11.5px}
/* Inventory */
.inv-head{display:grid;grid-template-columns:1fr 150px 190px 130px;gap:16px;font:600 9px/1.3 var(--font-b);letter-spacing:.07em;color:var(--bi-mut);padding:6px 4px}
.inv-row{display:grid;grid-template-columns:1fr 150px 190px 130px;gap:16px;align-items:center;padding:14px 4px;border-top:1px solid var(--bi-line)}
.inv-row b{font:500 12.5px/1.3 var(--font-ui)}
.vormerken{font:500 11px/1.4 var(--font-ui);color:#1D4ED8;background:#E3F0FD;border-radius:6px;padding:5px 12px;justify-self:start}
.rw{display:inline-flex;align-items:center;gap:4px}
.seg{width:18px;height:4px;border-radius:2px;background:var(--bi-line);display:inline-block}
.seg.on{background:#C43F3E}
.rw em{font:500 10px/1.3 var(--font-ui);color:#B32228;font-style:normal;margin-left:8px}
.r{text-align:right;justify-self:end}
.bi .link-l{margin-top:48px;display:inline-flex}

/* Fuge */
/* Methodik (P-3): Bühne pinnt, die Grafik zeichnet sich über die Stufen; Höhe der Strecke = Scroll-Dauer */
.methodik{position:relative;height:260vh;margin-top:64px}
.methodik-pin{position:sticky;top:0;height:100vh;padding-top:60px;display:flex;align-items:center}
.methodik-buehne{width:min(100%,calc((100vh - 120px) * 1380 / 760))}
.methodik-svg svg{display:block;width:100%;height:auto}
.methodik-svg text{transition:opacity .5s ease}
.methodik-stufen{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px}
.methodik-stufen li{font-size:16px;line-height:26px;color:rgba(255,255,255,.6);padding:0 6% 0 6.96%;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.methodik-stufen li.an{opacity:1;transform:none}
/* W-1: unter dem Bild Fließtext → Haltungssatz → Link, alles links (wie die anderen Sektionen) */
.bi-fuss{margin-top:72px}
.bi-fuss .body{max-width:620px}
.bi-fuss .teaser{margin-top:40px}
.bi-fuss .link-l{margin-top:32px;display:inline-flex}
.fuge{height:var(--fuge);background:var(--creme)}

/* ============ WWCI ============ */
.wwci{background:var(--dunkel);color:var(--weiss);padding-top:180px;padding-bottom:96px}
.statement{font-family:var(--font-h);font-weight:500;font-size:clamp(30px,3.05vw,44px);line-height:1.27;letter-spacing:.01em;max-width:1160px;margin-top:62px;text-indent:170px}
.statement .g{color:rgba(255,255,255,.45)}
.situ{display:grid;grid-template-columns:170px 650fr 560fr;align-items:start;padding:34px 0 0}
.statement + .situ{margin-top:54px}
.situ em{font:600 12px/1.25 var(--font-b);letter-spacing:.05em;color:rgba(255,255,255,.4);font-style:normal;padding-top:12px}
.situ h3{font-family:var(--font-h);font-weight:500;font-size:36px;line-height:44px;letter-spacing:.01em;max-width:560px}
.situ p{font-size:16px;line-height:26px;color:rgba(255,255,255,.55);padding-top:8px}
.wwci .link-l{margin-top:44px;display:inline-flex}

/* ============ NEWS ============ */
.news{padding-top:100px;padding-bottom:110px}
.news-row{display:grid;grid-template-columns:670fr 590fr 60px;grid-template-rows:1fr auto;gap:0 30px;border-top:1px solid rgba(26,26,26,.25);padding:24px 0;align-items:start}
.news-row .news-img{grid-row:1 / span 2;border-radius:var(--radius);overflow:hidden;aspect-ratio:670/394}
.news-row img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.news-row:hover img{transform:scale(1.03)}
.news-row h3{font-family:var(--font-h);font-weight:500;font-size:24px;line-height:33px;letter-spacing:.02em;text-transform:uppercase;padding-top:4px;max-width:540px}
.news-row .arrow.big{font-family:var(--font-h);font-size:28px;line-height:1;justify-self:end;padding-top:6px;transition:transform .25s ease}
.news-row:hover .arrow.big{transform:translateX(6px)}
.news-row time{font:600 11px/1.35 var(--font-b);letter-spacing:.08em;color:var(--gedaempft);align-self:end}
.news .h2{margin-bottom:80px}
.news .link-l{margin-top:36px;display:inline-flex}

/* ============ TRACK RECORD ============ */
.kunden{background:var(--saum);padding-top:110px;padding-bottom:110px} /* T-1: Tonfläche setzt die Sektion von News ab */
.kunden .label.kerbe{margin-top:clamp(6px,.62vw,9px)}
.kunden-liste{margin:56px 0 0 170px;max-width:1210px;font-family:var(--font-h);font-weight:500;font-size:26px;line-height:40px;letter-spacing:.01em}
.kunden-liste span{white-space:nowrap}
.kunden-liste i{font-style:normal;color:var(--gedaempft);white-space:pre-wrap}

/* Footer: siehe src/components/Footer.astro (Vorhang-Effekt, Figma „🧩 Vorlage · Footer“) */

/* Grobes Fallback unter 1100px — Mobile ist noch nicht designt */
@media (max-width:1100px){
  .case-grid{grid-template-columns:1fr;grid-template-areas:none}
  .case{grid-area:auto !important;max-width:none !important}
  .news-row{grid-template-columns:1fr;grid-template-rows:auto}
  .news-row .news-img{grid-row:auto}
  .situ{grid-template-columns:60px 1fr}
  .situ p{grid-column:2}
  .label.kerbe{float:none;width:auto;margin:0 0 24px}
  .statement{text-indent:0}
  .tile{flex-basis:86vw}
  .kunden-liste{margin-left:0;font-size:20px;line-height:32px}
  .methodik{height:auto}
  .methodik-pin{position:static;height:auto;padding-top:0}
  .nav-links{gap:18px}
}


/* ============ BILDER KLAPPEN BEIM HEREINSCROLLEN AUF — alle Seiten (Skinn-Muster, dort vermessen, 12.10.) ============
   Jeder Container mit data-aufklappen: sobald ~10 % im Viewport (Skript in Base.astro), öffnet sich der Ausschnitt von unten nach oben
   (0,8 s, Quart-out) und das Bild darin zoomt von 150 % auf 100 % zurück (0,9 s, Cubic-out). Texte bleiben stehen.
   Ohne Skript oder bei reduzierter Bewegung fehlt html.bild-reveal → Bilder sofort sichtbar. */
html.bild-reveal [data-aufklappen]{clip-path:inset(100% 0 0 0);transition:clip-path .8s cubic-bezier(.25,1,.5,1)}
html.bild-reveal [data-aufklappen] :is(img,video){scale:1.5;transition:scale .9s cubic-bezier(.33,1,.68,1),transform .6s cubic-bezier(.2,.7,.2,1)}
html.bild-reveal [data-aufklappen].offen{clip-path:inset(0 0 0 0)}
html.bild-reveal [data-aufklappen].offen :is(img,video){scale:1}

/* Formular-Versand (functions/api/anfrage.js; Kontakt, Pop-up-Anfrage, Test-Shooting): Meldung unter dem Formular, nach Erfolg nur noch der Dank */
.formular-meldung{margin-top:24px;font-size:var(--fs-text-l);line-height:var(--lh-text-l)}
.formular-meldung a{text-decoration:underline;text-underline-offset:3px}
.ist-gesendet > :not(.formular-meldung){display:none !important}
.ist-gesendet .formular-meldung{margin-top:0}