/* =====================================================================
   Klarkidigital — Redesign "Scharfstellen"
   Ein dunkler Abstieg im Hero, eine helle klare Seite darunter.
   Alle Werte laufen über Tokens. Wer einen Wert direkt in eine Regel
   schreibt statt einen Token zu benutzen, hat das System verlassen.
   ===================================================================== */

/* ---------- Schriften, lokal ---------- */
@font-face{
  font-family:'Clash Display';
  src:url('../fonts/ClashDisplay-Variable.woff2') format('woff2-variations');
  font-weight:200 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fragment Mono';
  src:url('../fonts/FragmentMono-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Farbwelt: die offenbarte Klarheit (Seite) und der Rauch (Hero) */
  --canvas:#f4efe8;
  --panel:#fbf8f3;
  --panel-deep:#ede6dc;
  --ink:#241c1e;
  --ink-2:#5d5355;
  --ink-3:#79706f;
  --line:rgba(36,28,30,.10);
  --line-2:rgba(36,28,30,.18);
  --accent:#8e1c2e;
  --accent-2:#a72639;
  --accent-deep:#5f0f1e;
  --accent-muted:rgba(142,28,46,.14);
  --logo-red:#8e1c2e;

  /* Der Rauch des Heros */
  --smoke:#151011;
  --smoke-2:#241b18;
  --seam:#dccfbf;   /* der Bodenton des Endframes: die Naht zwischen Film und Seite */
  --hero-text:#f3ece2;
  --hero-dim:rgba(243,236,226,.72);

  /* Text über Footage: das Drei-Ebenen-Schatten-Token */
  --tshadow:0 1px 2px rgba(10,7,6,.95),0 3px 12px rgba(10,7,6,.78),0 10px 44px rgba(10,7,6,.8);

  /* Form */
  --radius:22px;--radius-lg:30px;--pill:980px;
  --shadow-soft:0 1px 2px rgba(24,16,18,.04),0 14px 40px rgba(24,16,18,.06);
  --shadow-lift:0 2px 4px rgba(24,16,18,.05),0 26px 60px rgba(24,16,18,.10);

  /* Bewegung */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-io:cubic-bezier(0.65,0,0.35,1);
  --t-fast:0.18s;--t-mid:0.5s;

  /* Typografie */
  --font-display:'Clash Display',system-ui,sans-serif;
  --font-body:'Switzer',system-ui,sans-serif;
  --font-mono:'Fragment Mono',ui-monospace,monospace;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  font-family:var(--font-body);
  font-size:clamp(.95rem,.9rem + .2vw,1.02rem);
  line-height:1.62;
  color:var(--ink-2);
  /* Ein durchgehender Verlauf in der Welt des Films: beginnt exakt im
     Nahtton, hält ihn kurz, und wandert dann unmerklich langsam durch
     die ganze Seite bis in den vertieften Fußton. Keine Kante, nirgends. */
  background:linear-gradient(180deg,var(--seam) 0%,var(--seam) 3%,#e8ddcd 10%,var(--canvas) 24%,var(--canvas) 74%,#e6dac8 92%,#d8c9b4 100%);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);line-height:1.06;font-weight:560}
p{max-width:68ch}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-muted)}

main{position:relative}
/* Der Gegenpart der Naht: die Seite beginnt im selben Ton und atmet ihn
   über fast einen halben Bildschirm weich aus. Beide Seiten der Grenze
   sind damit dieselbe fließende Fläche, eine Kante kann nicht entstehen. */
main::before{content:"";position:absolute;top:-2px;left:0;right:0;height:46vh;pointer-events:none;z-index:0;background:radial-gradient(150% 100% at 50% -10%,var(--seam) 45%,rgba(220,207,191,0) 100%),linear-gradient(180deg,var(--seam) 0%,rgba(220,207,191,.55) 30%,rgba(220,207,191,0) 100%)}
.container{width:min(1160px,92vw);margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:10px;left:10px;z-index:200;background:var(--ink);color:var(--panel);padding:10px 18px;border-radius:var(--pill);transform:translateY(-64px);transition:transform var(--t-fast) var(--ease-out)}
.skip-link:focus{transform:none;color:var(--panel)}

/* Die feste Umgebungsebene: langsames warmes Licht, feines Korn */
body::before{
  content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 46% at 22% 8%,rgba(142,28,46,.05),transparent 70%),
    radial-gradient(52% 40% at 82% 92%,rgba(178,132,64,.07),transparent 70%),
    var(--canvas);
  animation:env-drift 90s var(--ease-io) infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@keyframes env-drift{from{transform:translate3d(-1.5%,-1%,0)}to{transform:translate3d(1.5%,1.2%,0)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.nav{position:fixed;inset-inline:0;top:0;z-index:120;transition:background var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.nav-inner{display:flex;align-items:center;gap:26px;padding:14px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:560;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.brand .ki{color:var(--accent)}
.brand-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);padding:4px;color:var(--ink)}
.brand-mark svg{width:100%;height:100%}
.nav-links{display:none;gap:22px;margin-left:auto}
.nav-links a{color:var(--ink-2);font-size:.92rem}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;background:var(--accent);color:#fff;padding:9px 18px;border-radius:var(--pill);font-size:.9rem;font-weight:500;white-space:nowrap;transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
@media (max-width:420px){.nav-cta{padding:8px 14px;font-size:.84rem}}
.nav-cta:hover{background:var(--accent-2);color:#fff;transform:translateY(-1px)}
.nav-toggle{display:inline-grid;gap:5px;place-content:center;width:40px;height:40px;background:none;border:0;cursor:pointer}
.nav-toggle i{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t-fast) var(--ease-out),opacity var(--t-fast)}
.nav-sheet{display:grid;gap:4px;padding:8px 4vw 18px;background:var(--panel);border-bottom:1px solid var(--line);transform:translateY(-110%);visibility:hidden;transition:transform var(--t-mid) var(--ease-out),visibility 0s var(--t-mid);position:absolute;inset-inline:0;top:100%;z-index:-1}
.nav.is-open .nav-sheet{visibility:visible;transition:transform var(--t-mid) var(--ease-out)}
.nav-sheet a{padding:11px 12px;border-radius:12px;color:var(--ink);min-height:30px}
.nav-sheet a:hover{background:var(--canvas)}
.nav-sheet .btn{justify-content:center;margin-top:8px}
.nav.is-open .nav-sheet{transform:none}
.nav.is-open .nav-toggle i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav-toggle i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav.is-solid{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}

/* Über dem dunklen Hero trägt die Nav helle Farben */
.nav.is-over-hero:not(.is-solid){background:linear-gradient(rgba(12,9,8,.5),transparent)}
.nav.is-over-hero:not(.is-solid) .brand,
.nav.is-over-hero:not(.is-solid) .nav-links a{color:var(--hero-text);text-shadow:0 1px 3px rgba(10,7,6,.6)}
.nav.is-over-hero:not(.is-solid) .nav-links a:hover{color:#fff}
.nav.is-over-hero:not(.is-solid) .brand-mark{background:rgba(243,236,226,.12);box-shadow:inset 0 0 0 1px rgba(243,236,226,.25);color:var(--hero-text)}
.nav.is-over-hero:not(.is-solid) .nav-toggle i{background:var(--hero-text)}

@media (min-width:768px){
  .nav-links{display:flex}
  .nav-cta{margin-left:0}
  .nav-toggle,.nav-sheet{display:none}
}

/* =====================================================================
   HERO: der Abstieg. 3 Kapitel, 18 s Film, ~1000vh Scrollstrecke.
   ===================================================================== */
/* Der Hero-Kasten endet unten bereits im Nahtton: selbst ein Subpixel-
   Spalt an der Bühnenkante kann so nie als dunkle Linie durchblitzen */
.hero{position:relative;height:1000vh;background:linear-gradient(180deg,var(--smoke) 0%,var(--smoke) 90%,var(--seam) 100%)}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--smoke)}
.hero-poster{position:absolute;inset:0;background-size:cover;background-position:center}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-out);will-change:transform;transform:translateZ(0)}
.hero-stage.video-ready #hero-video{opacity:1}
.hero-stage.video-failed #hero-video{display:none}

/* Ebene 1 der Lesbarkeit: die globale Grundabdunklung.
   Sie blendet mit der Naht aus, sonst springt der Ton an der Kante. */
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(12,9,8,0) 35%,rgba(12,9,8,.62) 100%);opacity:calc(1 - var(--seamk,0))}

/* Der ehrliche Ladering */
.hero-ring{position:absolute;right:26px;bottom:26px;width:34px;height:34px;color:var(--hero-dim);transform:rotate(-90deg);transition:opacity var(--t-mid)}
.hero-ring circle{transition:stroke-dashoffset .2s linear}
.hero-stage.video-ready .hero-ring{opacity:0}

/* Die Naht: blendet den Bühnenrand gegen Ende weich in den Seitenton.
   Die letzten Prozent sind VOLL deckend, damit die Kante mathematisch
   verschwindet: Bühnenrand und Seitenanfang sind derselbe Ton. */
.hero-seam{position:absolute;inset-inline:0;bottom:-2px;height:48vh;pointer-events:none;background:radial-gradient(150% 95% at 50% 108%,var(--seam) 52%,rgba(220,207,191,0) 100%),linear-gradient(180deg,rgba(220,207,191,0) 0%,var(--seam) 74%,var(--seam) 100%);opacity:var(--seamk,0)}

/* Scroll-Hinweis */
.hero-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:grid;justify-items:center;gap:2px;color:var(--hero-dim);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-shadow:var(--tshadow)}
.hero-cue svg{width:16px;height:16px;animation:cue-dip 2.6s var(--ease-io) -1.2s infinite}
@keyframes cue-dip{0%,100%{transform:none;opacity:.7}50%{transform:translateY(5px);opacity:1}}

/* ---------- Die Bänder ---------- */
.band{position:absolute;top:50%;transform:translateY(-50%);max-width:min(40vw,520px);opacity:0;color:var(--hero-text);text-shadow:var(--tshadow);z-index:3}
.band.b-left{left:6vw}
.band.b-right{right:6vw}
.band-line{font-family:var(--font-display);font-weight:560;font-size:clamp(1.7rem,1rem + 2.6vw,3.1rem);line-height:1.12;letter-spacing:-.02em;max-width:none}
.band-line.is-dim{color:var(--hero-dim)}
.band-line.is-accent{color:#e88a97}
/* Die Zahl ist der Fang: groß, hell rotstichig, die Zeilen darunter ruhig */
.band-line.is-num{font-size:clamp(2.9rem,1.6rem + 5vw,5.8rem);color:#ef9aa6;letter-spacing:-.035em;line-height:1}
.band-line.is-sub{font-size:clamp(1.15rem,.9rem + 1.2vw,1.7rem);line-height:1.3}

/* Ebene 2: das Band-Scrim, reitet auf --k und der Bandopazität */
.band::before{content:"";position:absolute;inset:-18% -14%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(10,7,6,var(--peak,.66)) 0%,rgba(10,7,6,calc(var(--peak,.66)*.66)) 46%,rgba(10,7,6,0) 76%)}

/* ---------- Auftritte: alle nur transform und opacity, alle über --k ---------- */
.band .w{display:inline-block;white-space:nowrap}
.band .c{display:inline-block}

/* (a) Scatter: Zeichen sammeln sich wie Funken */
.band[data-entrance="scatter"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}

/* (b) Raster-Einrasten: Zeichen gleiten in Leserichtung ein */
.band[data-entrance="grid"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,24px)))}

/* (c) Blur-zu-scharf: zwei Kopien, nur Opacity wird animiert */
.band[data-entrance="blur"] .band-line{position:relative}
.band[data-entrance="blur"] .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));pointer-events:none}
.band[data-entrance="blur"] .sharp{opacity:var(--k,0)}

/* (f) Drift-hinab: Worte sinken an ihren Platz */
.band[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}

/* (g) Aus der Tiefe: die Zeile wächst heran */
.band[data-entrance="approach"] .band-line{opacity:var(--k,0);transform:scale(calc(0.84 + 0.16*var(--k,0)))}

/* (e) Settle: Wort-für-Wort-Aufstieg, dann Subline, dann Knöpfe */
/* Das Settle lebt in der hellen Welt des Finales: dunkle Tinte, helles Scrim */
.band-settle{left:50%;right:auto;top:50%;transform:translate(-50%,-54%);max-width:min(88vw,760px);text-align:center;display:grid;justify-items:center;gap:18px;color:var(--ink);text-shadow:none}
.band-settle::before{inset:-24% -30%;background:radial-gradient(ellipse 82% 72% at 50% 44%,rgba(244,239,232,var(--lift,.55)) 0%,rgba(244,239,232,calc(var(--lift,.55)*.6)) 52%,rgba(244,239,232,0) 78%);opacity:calc(.25 + .75*var(--k,1))}
.band-settle .eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);opacity:var(--k,0)}
.band-settle h1{font-size:clamp(2.85rem,7vw,6.15rem);letter-spacing:-.042em;font-weight:560;color:var(--ink);line-height:1.02}
.band-settle h1 .line{display:block}
.band-settle h1 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}
.band-settle h1 .line:last-child .w{color:var(--accent)}
.band-settle .sub{--ks:clamp(0,(var(--k,0) - .58)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px));color:var(--ink-2);font-size:clamp(1rem,.9rem + .5vw,1.18rem);max-width:46ch}
.band-settle .btn-row{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px));justify-content:center}
.band-settle .trust-row{--kt:clamp(0,(var(--k,0) - .84)*6,1);opacity:var(--kt)}

.trust-row{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;font-size:.86rem;color:var(--ink-3)}
.trust-row svg{width:15px;height:15px;color:var(--accent);margin-right:6px;vertical-align:-2px;display:inline}
.trust-row span{display:inline-flex;align-items:center}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#fff;padding:14px 26px;border-radius:var(--pill);font-weight:500;font-size:.98rem;border:0;cursor:pointer;text-shadow:none;transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.btn:hover{background:var(--accent-2);color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px rgba(142,28,46,.28)}
.btn svg{width:17px;height:17px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost:hover{background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.btn-row.center{justify-content:center;margin-bottom:34px}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:.95rem}
.link-arrow svg{width:16px;height:16px;transition:transform var(--t-fast) var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}
.band-settle .link-arrow{color:var(--ink);text-shadow:none}
.band-settle .link-arrow:hover{color:var(--accent)}

/* =====================================================================
   DIE FÜNF STATIK-TORE (müssen zeichengenau zu hero.js passen)
   1  (max-width: 720px)
   2  (orientation: portrait) and (max-width: 1024px)
   3  (orientation: portrait) and (pointer: coarse)
   4  (orientation: landscape) and (pointer: coarse) and (max-height: 560px)
   5  (prefers-reduced-motion: reduce)
   ===================================================================== */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:100vh;height:100svh}
  #hero-video,.hero-ring,.hero-cue{display:none}
  .band{display:none}
  .band.band-settle{display:grid;opacity:1;--k:1}
  .hero-poster{background-image:var(--static-hero,none)}
  .hero-seam{opacity:1}
  .mobile-stats{display:block}
  /* Unter der Nav durchatmen: das Settle sitzt tiefer, damit die
     Kennzeichnung oben nie unter der Leiste klebt */
  .band.band-settle{top:calc(50% + 30px);transform:translate(-50%,-50%);width:min(88vw,760px)}
}
/* Statischer Hero: Poster kommt trotzdem nur über JS (Gate), CSS zeigt die Bühne */

/* ---------- Mobile Zahlen-Sektion: die vier Fakten aus dem Film,
   ruhig über dem Filmposter, nur in der statischen Ansicht ---------- */
.mobile-stats{display:none;position:relative;z-index:1;padding:0;
  background:linear-gradient(180deg,#d8cbbd 0%,rgba(21,16,17,.86) 12%,rgba(21,16,17,.88) 84%,var(--seam) 100%),url('../img/hero-poster.jpg') center/cover no-repeat;
  color:var(--hero-text)}
.mobile-stats .container{padding:86px 0 92px;display:grid;gap:44px}
.ms-item{display:grid;gap:6px;padding-left:18px;border-left:2px solid rgba(224,38,69,.55)}
.ms-num{font-family:var(--font-display);font-weight:560;font-size:clamp(2.4rem,10vw,3.4rem);letter-spacing:-.03em;line-height:1;color:#ef9aa6}
.ms-text{color:var(--hero-text);font-size:1.02rem;line-height:1.45;max-width:30ch}
.ms-text.ms-dim{color:var(--hero-dim);font-size:.92rem}
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .mobile-stats{display:block}
}

/* Flache Desktop-Fenster: Scrub bleibt, kleine Overlays weichen */
@media (max-height:560px){.hero-cue{display:none}}

/* =====================================================================
   DIE KLARLINIE: die Signatur. Läuft vom Hero bis zum Absenden-Knopf.
   ===================================================================== */
.klarlinie{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}
/* Inhalt liegt über dem Strahl: Panels decken ihn, Text bleibt lesbar,
   weil der Kern des Strahls hell ist */
.container{position:relative;z-index:1}

/* =====================================================================
   ABSCHNITTE
   ===================================================================== */
section{position:relative;padding:110px 0}
@media (min-width:768px){section{padding:140px 0}}
/* Kein harter Streifenwechsel mehr: die Welt läuft durch,
   Tiefe kommt aus Karten und Schatten, nicht aus Querbändern */
.band-canvas{background:transparent}
.band-paper{background:transparent}

.kicker{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.kicker.center{justify-content:center;display:flex}
.kicker .num{color:var(--accent);font-size:.7rem}
.kicker::before{content:"";width:9px;height:9px;background:var(--accent-muted);clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateY(1px)}
.section-head{max-width:720px;margin-bottom:56px}
/* Unterblöcke verschmolzener Abschnitte: eigene Ruhe, kleinere Köpfe */
.subblock{margin-top:110px;scroll-margin-top:96px}
.subhead{font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem);letter-spacing:-.025em;margin-bottom:14px}
.subhead-lead{margin-bottom:40px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .kicker{display:inline-flex}
.display-lg{font-size:clamp(2.1rem,5.4vw,3.6rem);letter-spacing:-.035em;font-weight:560;margin-bottom:18px}
.lead{font-size:clamp(1.02rem,.95rem + .4vw,1.16rem);color:var(--ink-2)}
.lead.long{max-width:56ch}
.note{color:var(--ink-3);font-size:.95rem;max-width:56ch}

/* Auftritts-Choreografie */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
.js .bento .tile:nth-child(2){transition-delay:.08s}
.js .bento .tile:nth-child(3){transition-delay:.16s}
.js .bento .tile:nth-child(4){transition-delay:.24s}
.js .bento .tile:nth-child(5){transition-delay:.32s}
.js .care-grid .care:nth-child(2){transition-delay:.1s}
.js .care-grid .care:nth-child(3){transition-delay:.2s}
.js .pledges .pledge:nth-child(2){transition-delay:.08s}
.js .pledges .pledge:nth-child(3){transition-delay:.16s}
.js .pledges .pledge:nth-child(4){transition-delay:.24s}
/* Nach dem Auftritt gehen die Staffel-Verzögerungen in Rente, sonst
   verspätet sich jeder Hover um die Staffelung. Die done-Klasse setzt
   das JS nach abgeschlossenem Auftritt; !important schlägt jede Staffel. */
.js [data-reveal].done{transition-delay:0s !important}

/* ---------- 01 Ausgangslage ---------- */
.problem-statement{font-size:clamp(2.3rem,5.6vw,3.8rem);letter-spacing:-.03em;max-width:22ch;margin-bottom:46px}
.problem-statement .dim{color:var(--ink-3)}
.problem-rows{display:grid;gap:0;border-top:1px solid var(--line)}
.problem-row{display:grid;gap:6px;padding:26px 0;border-bottom:1px solid var(--line);grid-template-columns:1fr}
.problem-row h3{font-size:1.18rem;letter-spacing:-.01em}
@media (min-width:768px){.problem-row{grid-template-columns:280px 1fr;gap:30px;align-items:baseline}}

/* ---------- 02 Leistungen: Bento mit handgebauten Miniaturen ---------- */
.bento{display:grid;gap:18px}
.tile{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-soft);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out);position:relative;overflow:hidden}
.band-paper .tile{background:var(--panel)}
.tile{background:var(--panel)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tile .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:12px}
.tile h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.65rem);letter-spacing:-.02em;margin-bottom:10px}
.tile p{font-size:.95rem}
.tile-action{margin-top:12px}
.tile-visual{margin-top:22px;border-radius:14px;background:var(--panel-deep);min-height:120px;position:relative;overflow:hidden;display:grid;place-items:center}
.tile-img{width:100%;height:100%;object-fit:cover;display:block}
.tile-visual--video{min-height:0;background:#0e0b0c}
.tile-video{width:100%;aspect-ratio:16/9;display:block;background:#0e0b0c}
.tile-note{margin-top:10px;font-size:.85rem;color:var(--ink-2)}
.tile .inner{display:grid;gap:12px}
@media (min-width:980px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .tile.t1{grid-column:span 4}
  .tile.t2{grid-column:span 2}
  .tile.t3{grid-column:span 2}
  .tile.t4{grid-column:span 2}
  .tile.t5{grid-column:span 2}
  .tile.t1 .inner{grid-template-columns:1fr 1fr;align-items:center}
  .tile.t1 .tile-visual{margin-top:0}
}
@media (min-width:620px) and (max-width:979px){.bento{grid-template-columns:1fr 1fr}.tile.t1{grid-column:span 2}}

/* Miniatur: Browser */
.mock-browser{display:grid;align-content:start;gap:8px;padding:14px;width:100%;min-height:150px}
.mock-browser .mb-bar{display:flex;gap:5px}
.mock-browser .mb-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.mock-browser .mb-hero{height:44px;border-radius:8px;background:linear-gradient(120deg,var(--accent-muted),rgba(178,132,64,.12))}
.mock-browser .mb-row{display:flex;gap:6px}
.mock-browser .mb-row i{height:9px;border-radius:5px;background:var(--line-2)}
.mock-browser .w60{width:60%}.mock-browser .w30{width:30%}.mock-browser .w40{width:40%}.mock-browser .w50{width:50%}
/* Miniatur: Netz */
.mock-net{color:var(--ink-3);padding:10px}
.mock-net svg{width:100%;height:auto}
.mock-net circle{fill:var(--ink-3)}
.mock-net .net-accent{fill:var(--accent)}
.mock-net .net-line{opacity:.55}
/* Miniatur: Reels */
.mock-reels{display:flex;gap:10px;align-items:center;padding:16px}
.mock-reels .reel{width:38px;height:64px;border-radius:9px;background:linear-gradient(160deg,var(--panel),var(--panel-deep));box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center}
.mock-reels .reel.is-mid{width:44px;height:76px;box-shadow:inset 0 0 0 1px var(--accent-muted),var(--shadow-soft)}
.mock-reels .reel-play{width:0;height:0;border-left:8px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
/* Miniatur: Chat */
.mock-chat{display:grid;gap:8px;padding:16px;width:100%}
.mock-chat .mc-bubble{justify-self:start;background:var(--panel);border:1px solid var(--line-2);border-radius:12px 12px 12px 4px;padding:6px 11px;font-size:.78rem;color:var(--ink-2)}
.mock-chat .mc-bubble.is-bot{justify-self:end;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:12px 12px 4px 12px}
/* Miniatur: Rangbalken */
.mock-rank{display:flex;align-items:flex-end;gap:10px;padding:18px;height:130px;width:100%;justify-content:center}
.mock-rank i{width:22px;height:var(--h,40%);border-radius:6px 6px 2px 2px;background:var(--line-2)}
.mock-rank i.is-accent{background:var(--accent)}

/* ---------- 03 Ablauf ---------- */
.ablauf-wrap{display:grid;gap:16px}
.ablauf-step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 30px 76px;box-shadow:var(--shadow-soft)}
.ablauf-step .num{position:absolute;left:26px;top:30px;font-family:var(--font-mono);color:var(--accent);font-size:.8rem}
.ablauf-step h3{font-size:1.24rem;margin-bottom:8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ablauf-step .hint{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width:860px){.ablauf-wrap{grid-template-columns:repeat(3,1fr)}}

/* ---------- 04 Pakete ---------- */
.pakete-head{max-width:720px;margin-bottom:46px}
.compare{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(16px,3vw,40px);box-shadow:var(--shadow-soft)}
.tier-bar{display:grid;gap:10px;margin-bottom:18px}
.tier-chip{border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tier-chip .p-name{font-family:var(--font-display);font-weight:560;font-size:1.05rem;color:var(--ink)}
.tier-chip .p-price{font-family:var(--font-mono);color:var(--accent);font-size:.92rem}
.tier-chip .p-flag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);flex-basis:100%}
.tier-chip.tier-standard{border-color:var(--accent-muted);box-shadow:0 0 0 1px var(--accent-muted)}
.compare-table{width:100%;border-collapse:collapse;font-size:.93rem}
.compare-table thead .tier{text-align:left;padding:14px 14px 18px;vertical-align:bottom}
.compare-table thead .p-name{display:block;font-family:var(--font-display);font-weight:560;font-size:1.2rem;color:var(--ink)}
.compare-table thead .p-price{display:block;font-family:var(--font-mono);color:var(--accent);margin-top:4px}
.compare-table thead .p-desc{display:block;color:var(--ink-3);font-size:.8rem;margin-top:4px;font-weight:400}
.compare-table thead .p-flag{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.compare-table .is-highlight{background:linear-gradient(180deg,var(--accent-muted),transparent 70%);border-radius:14px 14px 0 0}
.compare-table th[scope="row"]{text-align:left;font-weight:450;color:var(--ink-2);padding:12px 14px;border-top:1px solid var(--line);max-width:340px}
.compare-table td{padding:12px 14px;border-top:1px solid var(--line);color:var(--ink-2)}
.compare-table .group-row th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:26px 14px 8px;border-top:0;text-align:left}
.compare-table .yes::before{content:"";display:inline-block;width:16px;height:16px;background:var(--accent);clip-path:polygon(38% 66%,14% 44%,4% 55%,38% 88%,96% 24%,85% 14%);opacity:.9}
.compare-table .no::before{content:"";display:inline-block;width:12px;height:2px;background:var(--line-2);border-radius:2px;vertical-align:4px}
.compare-table .txt{font-size:.86rem}
.compare-foot{color:var(--ink-3);font-size:.85rem;margin-top:18px;max-width:none}
.compare-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
/* Schmalbildschirme: Tabelle und Chips weichen den drei Paketkarten */
@media (min-width:860px){.tier-bar{display:none}.pkg-cards{display:none}}
@media (max-width:859px){
  .tier-bar{display:none}
  .compare-table{display:none}
  .pkg-cards{display:grid;gap:16px}
  .pkg{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:var(--panel)}
  .pkg .p-name{font-family:var(--font-display);font-weight:560;font-size:1.35rem;color:var(--ink)}
  .pkg .p-price{font-family:var(--font-mono);color:var(--accent);font-size:1rem;margin-left:10px}
  .pkg .p-desc{display:block;color:var(--ink-3);font-size:.85rem;margin:4px 0 16px}
  .pkg .p-flag{position:absolute;top:-11px;left:22px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:var(--pill)}
  .pkg-standard{border-color:var(--accent-muted);box-shadow:0 0 0 1px var(--accent-muted);background:linear-gradient(180deg,rgba(142,28,46,.07),rgba(142,28,46,.015)),var(--panel)}
  .pkg-premium{background:linear-gradient(180deg,#241b18,#2c211d);border-color:#241b18}
  .pkg-premium .p-name{color:#f3ece2}
  .pkg-premium .p-price{color:#ef9aa6}
  .pkg-premium .p-desc{color:rgba(243,236,226,.55)}
  .pkg-premium .care-list{color:rgba(243,236,226,.85)}
  .pkg-premium .care-list li::before{background:#ef9aa6}
}

/* ---------- 05 Konfigurator ---------- */
.cfg{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3.4vw,44px);box-shadow:var(--shadow-soft);max-width:860px;margin-inline:auto;position:relative}
.cfg-hp{position:absolute;left:-9999px}
.cfg-progress{display:flex;gap:6px;list-style:none;margin-bottom:30px;flex-wrap:wrap}
.cfg-progress li{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-3);padding:7px 13px;border-radius:var(--pill);border:1px solid var(--line);min-height:30px}
.cfg-progress li span{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--panel-deep);font-family:var(--font-mono);font-size:.66rem;color:var(--ink-2)}
.cfg-progress li.is-active{border-color:var(--accent-muted);color:var(--ink);box-shadow:0 0 0 1px var(--accent-muted)}
.cfg-progress li.is-active span{background:var(--accent);color:#fff}
.cfg-progress li.is-done{color:var(--ink-2)}
.cfg-progress li.is-done span{background:var(--accent-muted);color:var(--accent)}
.cfg-step{border:0}
.js .cfg.is-enhanced .cfg-step{display:none}
.js .cfg.is-enhanced .cfg-step.is-active{display:block;animation:step-in .45s var(--ease-out)}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cfg-legend{font-family:var(--font-display);font-weight:560;font-size:1.35rem;color:var(--ink);margin-bottom:18px;letter-spacing:-.015em}
.cfg-hint{color:var(--ink-3);font-size:.86rem;margin-bottom:14px}
.cfg-options{display:grid;gap:10px;margin-bottom:18px}
.cfg-options.cols-2{grid-template-columns:1fr}
.cfg-options.cols-3{grid-template-columns:1fr}
@media (min-width:620px){.cfg-options.cols-2{grid-template-columns:1fr 1fr}.cfg-options.cols-3{grid-template-columns:repeat(3,1fr)}}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0}
.opt-body{display:block;border:1.5px solid var(--line-2);border-radius:14px;padding:13px 15px;transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);min-height:44px}
.opt-body strong{display:block;color:var(--ink);font-weight:520;font-size:.96rem}
.opt-body em{display:block;font-style:normal;color:var(--ink-3);font-size:.82rem;margin-top:2px}
.opt:hover .opt-body{border-color:var(--accent-muted)}
.opt input:checked + .opt-body{border-color:var(--accent);background:var(--accent-muted);box-shadow:0 0 0 1px var(--accent)}
.opt input:focus-visible + .opt-body{outline:2px solid var(--accent);outline-offset:3px}
.cfg-field{display:block;margin-bottom:16px}
.cfg-field > span{display:block;font-size:.88rem;color:var(--ink);margin-bottom:7px;font-weight:500}
.cfg-field > span em{color:var(--ink-3);font-style:normal;font-weight:400}
.cfg-field input,.cfg-field textarea{width:100%;border:1.5px solid var(--line-2);border-radius:12px;background:var(--canvas);padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink);min-height:44px;transition:border-color var(--t-fast)}
.cfg-field input:focus,.cfg-field textarea:focus{outline:0;border-color:var(--accent)}
.cfg-two{display:grid;gap:0 16px}
@media (min-width:620px){.cfg-two{grid-template-columns:1fr 1fr}}
.cfg-summary{background:var(--canvas);border:1px dashed var(--line-2);border-radius:14px;padding:16px 18px;margin:6px 0 16px}
.cfg-summary-title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:8px}
.cfg-summary ul{list-style:none;display:grid;gap:5px}
.cfg-summary li{display:flex;gap:12px;font-size:.9rem}
.cfg-summary .k{color:var(--ink-3);min-width:96px}
.cfg-summary .v{color:var(--ink)}
.cfg-summary .is-empty{color:var(--ink-3)}
.cfg-consent{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);margin-bottom:10px;cursor:pointer}
.cfg-consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);flex:none}
.cfg-promise{color:var(--ink-3);font-size:.82rem}
.cfg-nav{display:flex;gap:12px;margin-top:24px;align-items:center}
.cfg-nav .btn.ghost{margin-right:auto}
.cfg-step.has-error{animation:cfg-shake .3s var(--ease-io)}
@keyframes cfg-shake{0%,100%{transform:none}30%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
.no-js-note{display:none}

/* ---------- 06 Betreuung ---------- */
.care-grid{display:grid;gap:16px}
.care{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-soft);position:relative;transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.band-paper .care{background:var(--panel)}
.care:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.care.is-highlight{border-color:var(--accent-muted);box-shadow:0 0 0 1px var(--accent-muted),var(--shadow-soft)}
.care-flag{position:absolute;top:-11px;left:26px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:var(--pill)}
.care-name{font-family:var(--font-display);font-weight:560;font-size:1.3rem;color:var(--ink)}
.care-price{display:block;font-family:var(--font-mono);color:var(--accent);font-size:.92rem;margin-top:4px}
.care-claim{color:var(--ink-3);font-size:.9rem;margin:6px 0 18px}
.care-list{list-style:none;display:grid;gap:9px;font-size:.93rem}
.care-list li{padding-left:24px;position:relative}
.care-list li::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:13px;background:var(--accent);clip-path:polygon(38% 66%,14% 44%,4% 55%,38% 88%,96% 24%,85% 14%);opacity:.8}
.care-note{color:var(--ink-3);font-size:.9rem;margin-top:26px}
@media (min-width:860px){.care-grid{grid-template-columns:repeat(2,1fr);max-width:880px;margin-inline:auto}}

/* ---------- 07 Unterschied + Scharfstellen ---------- */
.focus-moment{display:grid;gap:10px;justify-items:start;margin-bottom:36px}
.focus-btn{touch-action:manipulation;user-select:none;-webkit-user-select:none;display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:500;font-size:.95rem;color:var(--ink);background:var(--panel);border:1.5px solid var(--line-2);border-radius:var(--pill);padding:13px 24px;cursor:pointer;min-height:44px;transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);position:relative;overflow:hidden}
.focus-btn::before{content:"";position:absolute;inset:0;background:var(--accent-muted);transform:scaleX(var(--fp,0));transform-origin:left;transition:none}
.focus-btn svg{width:18px;height:18px;color:var(--accent);position:relative}
.focus-btn:hover{border-color:var(--accent)}
.focus-btn.is-done{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.focus-hint{color:var(--ink-3);font-size:.86rem}
.warum-list{display:grid;gap:0;border-top:1px solid var(--line);transition:filter .7s var(--ease-out),opacity .7s var(--ease-out)}
.js .warum-list.is-blurred{filter:blur(7px) saturate(.85);opacity:.55;pointer-events:none}
.warum-item{display:grid;gap:6px;padding:24px 0;border-bottom:1px solid var(--line);grid-template-columns:52px 1fr;align-items:baseline}
.warum-item .idx{font-family:var(--font-mono);color:var(--accent);font-size:.78rem}
.warum-item h3{font-size:1.12rem;grid-column:2}
.warum-item p{grid-column:2;font-size:.94rem}
.warum-item h3{grid-row:1;grid-column:2}
.warum-item .idx{grid-row:1}
.js .warum-list .warum-item{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .warum-list.lit .warum-item{opacity:1;transform:none}

/* ---------- 08 Zusagen ---------- */
.pledges{display:grid;gap:16px}
.pledge{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-soft);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.pledge:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pledge-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--accent-muted);color:var(--accent);margin-bottom:16px}
.pledge-icon svg{width:22px;height:22px}
.pledge h3{font-size:1.16rem;margin-bottom:8px}
.pledge p{font-size:.93rem}
@media (min-width:620px){.pledges{grid-template-columns:1fr 1fr}}

/* ---------- 09 Person ---------- */
.person{display:grid;gap:44px;align-items:start}
.person-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--panel-deep);box-shadow:var(--shadow-lift);margin:0}
.person-frame img{width:100%;height:auto;display:block}
.person-placeholder{aspect-ratio:3/4;display:grid;place-items:center;background:linear-gradient(160deg,var(--panel) 0%,var(--panel-deep) 100%)}
.person-initials{font-family:var(--font-display);font-weight:560;font-size:clamp(3.4rem,6vw,5.2rem);color:var(--accent-muted);letter-spacing:-.02em;-webkit-text-stroke:1.5px var(--accent)}
.person-caption{position:absolute;left:0;right:0;bottom:0;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;color:rgba(255,255,255,.85);background:linear-gradient(transparent,rgba(20,14,15,.72));padding:26px 16px 12px}
.person-copy p{margin-bottom:14px}
.person-facts{display:grid;gap:12px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.person-facts span{display:grid;font-size:.88rem;color:var(--ink-3)}
.person-facts strong{color:var(--ink);font-weight:560;font-family:var(--font-display);font-size:1.02rem}
@media (min-width:980px){.person{grid-template-columns:380px 1fr}.person-facts{grid-template-columns:repeat(3,1fr)}}

/* ---------- 10 Arbeitsprobe ---------- */
.proof-head{text-align:center;max-width:640px;margin:0 auto 52px}
.proof-head .kicker{display:inline-flex}
.proof-grid{display:grid;gap:16px;text-align:center}
.proof-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 18px;box-shadow:var(--shadow-soft)}
.proof-value{font-family:var(--font-display);font-weight:560;font-size:clamp(2rem,4.6vw,2.9rem);color:var(--accent);letter-spacing:-.03em;display:block}
.proof-label{display:block;color:var(--ink);font-weight:520;margin-top:6px}
.proof-label em{display:block;font-style:normal;color:var(--ink-3);font-weight:400;font-size:.82rem;margin-top:5px}
.proof-foot{text-align:center;color:var(--ink-3);font-size:.88rem;margin:30px auto 0;max-width:60ch}
@media (min-width:620px){.proof-grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.proof-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- 11 FAQ ---------- */
.faq-list{max-width:760px;margin-inline:auto;display:grid;gap:12px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 52px 18px 22px;font-weight:520;color:var(--ink);position:relative;min-height:30px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform var(--t-fast) var(--ease-out)}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item summary:hover{color:var(--accent)}
.faq-body{padding:0 22px 20px}
.faq-body p{font-size:.94rem}

/* ---------- Referenzen ---------- */
.ref-panel{background:var(--canvas);border:1px dashed var(--line-2);border-radius:var(--radius-lg);padding:clamp(24px,4vw,44px);text-align:center;max-width:720px;margin-inline:auto}
.band-paper .ref-panel{background:var(--panel)}
.ref-panel .status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.ref-panel .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dot-pulse 3.2s var(--ease-io) -1.2s infinite}
@keyframes dot-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.ref-panel h3{font-size:1.5rem;margin-bottom:12px}
.ref-panel p{margin-inline:auto;font-size:.94rem;margin-bottom:8px}
.reviews{margin-top:26px}

/* ---------- 12 Kontakt ---------- */
.kontakt{text-align:center}
.kontakt .kicker{display:inline-flex}
.closing{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.04em;margin-bottom:14px}
.kontakt .lead{margin:0 auto 30px}
.kontakt-methods{display:flex;justify-content:center;margin-bottom:22px}
.kontakt-card{display:grid;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 44px;box-shadow:var(--shadow-soft);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.kontakt-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.kontakt-card .label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kontakt-card .value{font-family:var(--font-display);font-weight:560;font-size:1.3rem;color:var(--ink)}
.kontakt-card:hover .value{color:var(--accent)}
.micro{color:var(--ink-3);font-size:.84rem;margin-inline:auto}

/* ---------- Footer ---------- */
.footer-rich{background:var(--smoke);color:rgba(243,236,226,.66);padding:70px 0 34px;position:relative;margin-top:120px}
.footer-rich::before{content:"";position:absolute;inset-inline:0;top:-120px;height:120px;pointer-events:none;background:linear-gradient(180deg,rgba(21,16,17,0) 0%,var(--smoke) 100%)}
.footer-rich a{color:rgba(243,236,226,.82)}
.footer-rich a:hover{color:#fff}
.footer-cols{display:grid;gap:36px;margin-bottom:48px}
.footer-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:560;color:#f3ece2;font-size:1.05rem;margin-bottom:12px}
.footer-brand .brand-mark{width:22px;height:22px;border-radius:7px;background:rgba(243,236,226,.1);box-shadow:inset 0 0 0 1px rgba(243,236,226,.2);color:#f3ece2;padding:3px}
.footer-col h2{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(243,236,226,.5);margin-bottom:14px;font-weight:400}
.footer-col ul{list-style:none;display:grid;gap:8px}
.footer-col ul a{font-size:.92rem;min-height:30px;display:inline-flex;align-items:center}
.footer-col p{font-size:.9rem;margin-bottom:10px}
.footer-note{font-size:.8rem;color:rgba(243,236,226,.45)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;border-top:1px solid rgba(243,236,226,.14);padding-top:22px;font-size:.85rem}
.footer-links{display:flex;gap:20px}
.footer-ai-note{font-size:.76rem;color:rgba(243,236,226,.45);margin-top:16px;max-width:none}
@media (min-width:768px){.footer-cols{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}

/* ---------- Sticky-CTA (mobil) ---------- */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:110;display:flex;gap:10px;transform:translateY(140%);transition:transform var(--t-mid) var(--ease-out)}
.sticky-cta.is-on{transform:none}
.sticky-cta-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;padding:15px 18px;border-radius:16px;font-weight:500;box-shadow:0 14px 40px rgba(20,10,12,.35)}
.sticky-cta-btn svg{width:16px;height:16px}
.sticky-cta-alt{display:inline-grid;place-items:center;width:52px;border-radius:16px;background:var(--ink);color:var(--panel);box-shadow:0 14px 40px rgba(20,10,12,.3)}
.sticky-cta-alt svg{width:20px;height:20px}
@media (min-width:768px){.sticky-cta{display:none}}

/* ---------- Chat-Widget ---------- */
.kd-chat{position:fixed;right:18px;bottom:18px;z-index:130;font-size:.93rem}
@media (max-width:767px){.kd-chat{bottom:78px}}
.kd-launch{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--panel);border:0;border-radius:var(--pill);padding:12px 20px;font:inherit;font-weight:500;cursor:pointer;box-shadow:var(--shadow-lift);transition:transform var(--t-fast) var(--ease-out),background var(--t-fast)}
.kd-launch:hover{transform:translateY(-2px);background:var(--smoke-2)}
.kd-launch-icon{display:inline-grid;place-items:center;width:19px;height:19px}
.kd-panel{position:absolute;right:0;bottom:calc(100% + 14px);width:min(370px,calc(100vw - 36px));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lift);display:grid;grid-template-rows:auto 1fr auto auto auto;max-height:min(560px,calc(100vh - 120px));overflow:hidden}
.kd-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.kd-avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--canvas);padding:5px;color:var(--ink)}
.kd-head-text{display:grid}
.kd-head-text strong{font-size:.92rem;color:var(--ink)}
.kd-head-text em{font-style:normal;font-size:.74rem;color:var(--ink-3)}
.kd-close{margin-left:auto;background:none;border:0;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);border-radius:10px}
.kd-close:hover{background:var(--canvas);color:var(--ink)}
.kd-close svg{width:16px;height:16px}
.kd-log{padding:16px;overflow-y:auto;display:grid;gap:10px;align-content:start;min-height:140px}
.kd-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.5}
.kd-bot{background:var(--canvas);color:var(--ink-2);justify-self:start;border-bottom-left-radius:4px}
.kd-user{background:var(--accent);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.kd-typing{display:inline-flex;gap:4px;align-items:center}
.kd-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:kd-blink 1.2s infinite}
.kd-typing i:nth-child(2){animation-delay:.2s}
.kd-typing i:nth-child(3){animation-delay:.4s}
@keyframes kd-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.kd-suggest{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.kd-suggest button{font:inherit;font-size:.76rem;background:var(--canvas);border:1px solid var(--line-2);color:var(--ink-2);border-radius:var(--pill);padding:6px 12px;cursor:pointer;min-height:30px}
.kd-suggest button:hover{border-color:var(--accent);color:var(--accent)}
.kd-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.kd-form input{flex:1;border:1.5px solid var(--line-2);border-radius:12px;padding:10px 13px;font:inherit;font-size:.88rem;background:var(--canvas);color:var(--ink);min-height:44px}
.kd-form input:focus{outline:0;border-color:var(--accent)}
.kd-form button{width:44px;height:44px;border:0;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer}
.kd-form button:hover{background:var(--accent-2)}
.kd-form button svg{width:18px;height:18px}
.kd-form button:disabled,.kd-form input:disabled{opacity:.5}
.kd-legal{font-size:.66rem;color:var(--ink-3);padding:0 16px 12px;line-height:1.5;max-width:none}
.kd-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Nebenseiten: Impressum, Datenschutz, Danke, 404 ---------- */
.doc-main{padding:150px 0 90px}
.crumbs ol{list-style:none;display:flex;gap:8px;font-size:.82rem;color:var(--ink-3);margin-bottom:26px;flex-wrap:wrap}
.crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line-2)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}
.doc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,4.5vw,56px);box-shadow:var(--shadow-soft);max-width:820px}
.doc h1{font-size:clamp(2rem,4.6vw,3rem);letter-spacing:-.03em;margin-bottom:14px}
.doc .intro{color:var(--ink-2);font-size:1.04rem;margin-bottom:34px}
.doc section{padding:22px 0;border-top:1px solid var(--line)}
.doc h2{font-size:1.14rem;margin-bottom:10px;letter-spacing:-.01em}
.doc p,.doc address{font-size:.94rem;font-style:normal;line-height:1.7;margin-bottom:10px}
.doc ul{margin:10px 0 10px 20px;font-size:.94rem;display:grid;gap:6px}
.doc .hinweis{color:var(--ink-3);font-size:.86rem}
.doc .stand{color:var(--ink-3);font-size:.84rem;margin-top:22px}
.doc .back{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-weight:500;min-height:30px}
.doc-center{text-align:center;margin-inline:auto}
.doc-center p{margin-inline:auto}
.danke-mark{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--accent-muted);color:var(--accent);margin-bottom:20px}
.danke-mark svg{width:28px;height:28px}
.danke-next{text-align:left;background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:26px auto;max-width:560px}
.danke-next h2{font-size:.78rem;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.danke-next ol{margin-left:20px;display:grid;gap:10px;font-size:.94rem}
.danke-mail{color:var(--ink-2);font-size:.94rem}
.err-code{font-family:var(--font-display);font-weight:600;font-size:clamp(4rem,10vw,6.5rem);color:var(--accent-muted);display:block;line-height:1;margin-bottom:8px;letter-spacing:-.04em}
.err-links{display:grid;gap:12px;margin:28px auto;max-width:560px;text-align:left}
.err-links a{display:grid;gap:3px;background:var(--canvas);border:1px solid var(--line);border-radius:14px;padding:15px 18px;transition:border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.err-links a:hover{border-color:var(--accent);transform:translateY(-2px)}
.err-links strong{color:var(--ink);font-weight:520}
.err-links span{color:var(--ink-3);font-size:.84rem}
@media (min-width:620px){.err-links{grid-template-columns:1fr 1fr}}
.footer-simple{background:var(--smoke);color:rgba(243,236,226,.66);padding:30px 0}
.footer-simple a{color:rgba(243,236,226,.82)}
.footer-simple a:hover{color:#fff}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;font-size:.85rem}
.subpage .doc-main{scroll-margin-top:90px}

/* ---------- Der wandernde Lichtschein (Hover-Flair) ----------
   Ein Streiflicht in Markenrot läuft am Kartenrand entlang, solange
   die Maus auf der Karte liegt. Nur Verlauf plus Maske, kein Filter. */
@property --ga{syntax:'<angle>';inherits:false;initial-value:0deg}
.tile::after,.ablauf-step::after,.care::after,.compare::after,.opt-body::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;
  background:conic-gradient(from var(--ga,0deg),transparent 0deg 244deg,rgba(142,28,46,.85) 288deg,#f2aab5 310deg,rgba(142,28,46,.85) 332deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none}
.tile:hover::after,.ablauf-step:hover::after,.care:hover::after,.compare:hover::after,
.opt:hover .opt-body::after,.opt input:focus-visible + .opt-body::after{
  opacity:1;animation:ga-spin 3s linear infinite}
@keyframes ga-spin{to{--ga:360deg}}
.compare{position:relative}
.opt-body{position:relative}

/* ---------- Die Stufen-Farben: hell, weinrot, dunkel ----------
   Einstieg bleibt hell, Standard trägt den Weinrot-Hauch, Premium
   das dunkle Finish. Ein ehrlicher Anker, keine Tricks. */
.tier-chip.tier-standard{background:linear-gradient(180deg,rgba(142,28,46,.09),rgba(142,28,46,.02))}
.tier-chip.tier-premium{background:linear-gradient(180deg,#241b18,#2e2320);border-color:#241b18}
.tier-chip.tier-premium .p-name{color:#f3ece2}
.tier-chip.tier-premium .p-price{color:#ef9aa6}
@media (min-width:860px){
  .compare-table thead th.tier-standard{background:linear-gradient(180deg,rgba(142,28,46,.08),rgba(142,28,46,.02));border-radius:14px 14px 0 0}
  .compare-table td[data-p="Standard"]{background:rgba(142,28,46,.045)}
  .compare-table thead th.tier-premium{background:linear-gradient(180deg,#241b18,#2c211d);border-radius:14px 14px 0 0}
  .compare-table thead th.tier-premium .p-name{color:#f3ece2}
  .compare-table thead th.tier-premium .p-price{color:#ef9aa6}
  .compare-table thead th.tier-premium .p-desc{color:rgba(243,236,226,.55)}
  .compare-table td[data-p="Premium"]{background:#241b18;color:rgba(243,236,226,.85);border-top-color:rgba(243,236,226,.08)}
  .compare-table td[data-p="Premium"] .yes::before{background:#ef9aa6}
  .compare-table td[data-p="Premium"] .no::before{background:rgba(243,236,226,.3)}
  .compare-table tbody tr:last-child td[data-p="Premium"]{border-radius:0 0 14px 14px}
}
.care.care-plus.is-highlight{background:linear-gradient(180deg,rgba(142,28,46,.07),rgba(142,28,46,.015)),var(--panel)}
.care.care-full{background:linear-gradient(180deg,#241b18,#2c211d);border-color:#241b18}
.care-full .care-name{color:#f3ece2}
.care-full .care-price{color:#ef9aa6}
.care-full .care-claim{color:rgba(243,236,226,.6)}
.care-full .care-list{color:rgba(243,236,226,.85)}
.care-full .care-list li::before{background:#ef9aa6}

/* ---------- Touch-Ziele ---------- */
@media (pointer:coarse){
  .btn,.nav-cta,.link-arrow,.focus-btn{min-height:44px}
  .nav-links a,.footer-col ul a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Reduced Motion: Endzustände sichtbar, Antriebe aus ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .warum-list.is-blurred{filter:none;opacity:1;pointer-events:auto}
  .band{opacity:1;--k:1}
  .band:not(.band-settle){display:none}
  .hero-cue{display:none}
  .klarlinie path{stroke-dashoffset:0 !important}
  html{scroll-behavior:auto}
}

/* Zusagen-Chips unter der Preistabelle: Risiko-Umkehr am Ort der Entscheidung */
.compare-zusagen{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0}
.compare-zusagen a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:.86rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--pill);padding:8px 16px;
  transition:border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.compare-zusagen a::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.compare-zusagen a:hover{border-color:var(--accent);color:var(--ink)}

/* Paket-Einschätzung am Ende des Konfigurators */
.cfg-summary .cfg-paket{border-top:1px solid var(--line-2);margin-top:10px;padding-top:12px}
.cfg-summary .cfg-paket .v{font-weight:700;color:var(--accent-deep)}
.cfg-summary .cfg-paket-note{font-size:.82rem;color:var(--ink-3)}

/* Waschtöne hinter den Verkaufsblöcken: Tiefe ohne Kanten.
   Negative z-Ebene: liegt über dem Seitengrund, unter Inhalt und Klarlinie. */
#leistungen::before,#pakete::before,#beweis::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
}
#leistungen::before{background:radial-gradient(140% 90% at 50% 8%,rgba(251,248,243,.75),rgba(251,248,243,0) 70%)}
#pakete::before{background:radial-gradient(130% 85% at 50% 18%,rgba(237,230,220,.55),rgba(237,230,220,0) 72%)}
#beweis::before{background:radial-gradient(140% 90% at 50% 12%,rgba(220,207,191,.4),rgba(220,207,191,0) 70%)}

/* =========================================================
   Startseiten-Umbau 23.08.2026: vier Probleme, Betriebs-Check,
   dritte Betreuungskarte, lange Hero-Überschrift
   ========================================================= */
.band-settle h1.is-long{font-size:clamp(2.2rem,5.8vw,4.6rem)}
.section-head--wide{max-width:820px}
.section-head--wide .lead{margin-bottom:14px}

/* Vier Probleme */
.probleme{display:grid;gap:18px}
.probleme .tile{display:flex;flex-direction:column}
.probleme .tile > p{font-size:.95rem}
.problem-service{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--canvas);border:1px solid var(--line)}
.problem-service-label{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.problem-service strong{display:block;font-weight:560;color:var(--ink);font-size:1.02rem;margin-bottom:6px;letter-spacing:-.01em}
.problem-service p{font-size:.9rem;color:var(--ink-2)}
.probleme .tile-action{margin-top:14px}
.probleme .tile-visual{margin-top:auto;padding-top:0}
.probleme .tile-action + .tile-visual{margin-top:22px}
.probleme .tile--wide .inner{display:grid;gap:14px}
.probleme .tile--wide .tile-visual{margin-top:12px}
@media (min-width:860px){
  .probleme{grid-template-columns:1fr 1fr}
  .probleme .tile--wide{grid-column:1/-1}
}
@media (min-width:980px){
  .probleme .tile--wide .inner{grid-template-columns:1fr 1fr;align-items:center;gap:30px}
  .probleme .tile--wide .tile-visual{margin-top:0}
}

/* Stellenkarten-Mockup (rein gestalterisch, aria-hidden) */
.tile-visual--job{min-height:0;padding:22px;background:linear-gradient(180deg,#241b18,#2c211d);display:block}
.jobcard-demo{display:grid;gap:8px;background:#fbf8f3;border-radius:14px;padding:18px 18px 16px;max-width:340px;margin-inline:auto;box-shadow:0 14px 40px rgba(0,0,0,.25)}
.jobcard-meta{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.jobcard-title{font-family:var(--font-display);font-weight:560;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink)}
.jobcard-pay{font-family:var(--font-mono);font-size:.86rem;color:var(--accent)}
.jobcard-btn{margin-top:6px;display:inline-block;background:var(--accent);color:#fff;font-weight:520;font-size:.88rem;padding:10px 14px;border-radius:var(--pill);text-align:center}
.jobcard-alt{font-size:.78rem;color:var(--ink-3);text-align:center}

/* Betriebs-Check */
.check{max-width:820px;margin-inline:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,4vw,40px);box-shadow:var(--shadow-soft)}
.check-list{list-style:none;display:grid;gap:0;counter-reset:check}
.check-item{display:grid;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);counter-increment:check}
.check-item:first-child{padding-top:0}
.check-q{font-size:1.02rem;color:var(--ink);position:relative;padding-left:38px}
.check-q::before{content:"0" counter(check);position:absolute;left:0;top:.2em;font-family:var(--font-mono);font-size:.72rem;color:var(--accent)}
.check-btns{display:flex;gap:8px;flex-wrap:wrap;padding-left:38px}
.check-btn{font:inherit;font-size:.9rem;font-weight:520;color:var(--ink-2);background:var(--canvas);border:1.5px solid var(--line-2);border-radius:var(--pill);padding:9px 16px;cursor:pointer;min-height:40px;transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.check-btn:hover{border-color:var(--accent-muted);color:var(--ink)}
.check-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-muted);color:var(--ink);box-shadow:0 0 0 1px var(--accent)}
.check-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.check-progress{margin-top:16px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.check-result{margin-top:22px;padding:clamp(20px,3vw,30px);border-radius:var(--radius);background:var(--canvas);border:1px solid var(--accent-muted);box-shadow:0 0 0 1px var(--accent-muted)}
.check-result .kicker{margin-bottom:10px}
.check-result h3{font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);letter-spacing:-.025em;margin-bottom:10px}
.check-result p{font-size:.96rem;margin-bottom:10px}
.check-result .check-offer{font-weight:520;color:var(--ink)}
.check-result .check-more{font-size:.86rem;color:var(--ink-3)}
.check-result .check-more a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.check-result .btn-row{margin-top:16px}
.js .check-result.is-in{animation:step-in .45s var(--ease-out)}
@media (min-width:620px){
  .check-item{grid-template-columns:1fr auto;align-items:center}
  .check-btns{padding-left:0}
}

/* Dritte Betreuungskarte */
@media (min-width:980px){.care-grid.has-3{grid-template-columns:repeat(3,1fr);max-width:none}}
.care-jobs .care-claim{color:var(--accent)}

/* Konfigurator: breite Option */
@media (min-width:620px){.opt-wide{grid-column:1/-1}}

/* Arbeitsprobe: Knopf zur Musterseite */
.ref-panel .ref-action{margin-top:18px}
.ref-panel .ref-action .btn{display:inline-flex}
.js .faq-list .faq-item:nth-child(9),.js .faq-list .faq-item:nth-child(10){transition-delay:0s}
.section-head--wide .problem-statement{max-width:26ch}
.section-head--wide .problem-statement .dim{display:block}
.tile-video{height:auto}
.probleme .tile{scroll-margin-top:96px}

/* Vergleichstabelle: vier Wege zu einer Website (23.08.2026) */
.vgl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-soft)}
.vgl-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px}
.vgl-table th,.vgl-table td{padding:12px 14px;vertical-align:top;text-align:left;border-top:1px solid var(--line)}
.vgl-table thead th{border-top:0;padding-top:18px;font-family:var(--font-display);font-weight:560;font-size:1.02rem;color:var(--ink)}
.vgl-table thead th em{display:block;font-style:normal;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.vgl-table thead th.is-me{background:linear-gradient(180deg,var(--accent-muted),transparent 80%);border-radius:14px 14px 0 0}
.vgl-table tbody th{font-weight:450;color:var(--ink-2);width:22%}
.vgl-table td{color:var(--ink-2)}
.vgl-table td:last-child{color:var(--ink);background:rgba(142,28,46,.045)}
.vgl-table .vgl-fazit th,.vgl-table .vgl-fazit td{border-top:2px solid var(--line-2);padding-top:16px;padding-bottom:18px}
.vgl-table .vgl-fazit td:last-child{font-weight:520}
@media (max-width:859px){
  .vgl-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  .vgl-table{min-width:0;display:block}
  .vgl-table thead{display:none}
  .vgl-table tbody,.vgl-table tr{display:block}
  .vgl-table tr{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-soft)}
  .vgl-table tbody th{display:block;width:auto;padding:0 0 10px;border:0;font-family:var(--font-display);font-weight:560;color:var(--ink);font-size:1.02rem}
  .vgl-table td{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line);background:transparent}
  .vgl-table td::before{content:attr(data-col);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
  .vgl-table td:last-child{background:transparent;color:var(--ink);font-weight:520}
  .vgl-table td:last-child::before{color:var(--accent)}
  .vgl-table .vgl-fazit th,.vgl-table .vgl-fazit td{border-top-width:1px;padding-top:7px;padding-bottom:7px}
  .vgl-table .vgl-fazit th{padding:0 0 10px;border:0}
}
@media (min-width:620px){.pledges .pledge-wide{grid-column:1/-1}}
.js .pledges .pledge:nth-child(5){transition-delay:.32s}
.cfg-small{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-3)}

/* Branchenseiten (23.08.2026, Generator bausteine/branchen/bau_branchen.py) */
.branche-main{padding-top:120px}
.branche-hero{padding:10px 0 40px;max-width:820px}
.branche-hero .problem-statement{max-width:26ch}
.branche-hero .problem-statement .dim{display:block}
.branche-hero .btn-row{margin-top:28px}
.branche .kicker .num{font-size:.7rem}
.branche-sec{padding:90px 0}
@media (min-width:768px){.branche-sec{padding:110px 0}}
.branche-probleme .tile{padding:28px}
@media (min-width:860px){.branche-probleme{grid-template-columns:repeat(3,1fr)}}
.branche-features .care-name{display:block;margin-bottom:8px}
.branche-features .care-claim{margin:0;color:var(--ink-2);font-size:.95rem}
@media (min-width:860px){.care-grid.branche-features{max-width:none}}
.branche-paket{display:grid;gap:32px}
.branche-paket .care-note{margin:18px 0 22px}
.branche-paket .btn-row{flex-wrap:wrap}
@media (min-width:980px){.branche-paket{grid-template-columns:1.3fr 1fr;align-items:start}}
.branche-muster{text-align:left;max-width:none}
.branche-muster .status{margin-bottom:10px}
.branche .footer-simple{margin-top:0}
.branche .kontakt{padding-bottom:110px}

/* Für wen: Branchen-Zeile unter den Problem-Kacheln */
.branchen-row{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.branchen-label{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.branchen-list{list-style:none;display:grid;gap:10px}
.branchen-list a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow-soft);transition:border-color var(--t-fast) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.branchen-list a:hover{border-color:var(--accent-muted);transform:translateY(-2px);color:var(--ink)}
.branchen-list strong{display:block;font-weight:560;font-size:.98rem}
.branchen-list em{display:block;font-style:normal;font-size:.82rem;color:var(--ink-3);margin-top:2px}
.branchen-list svg{width:16px;height:16px;color:var(--accent);grid-row:1/3;grid-column:2}
.branchen-note{margin-top:14px;font-size:.88rem;color:var(--ink-3)}
@media (min-width:620px){.branchen-list{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.branchen-list{grid-template-columns:repeat(4,1fr)}}

.muster-list{list-style:none;display:grid;gap:10px;margin-top:20px;text-align:left}
.muster-list a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--canvas);color:var(--ink);transition:border-color var(--t-fast) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.muster-list a:hover{border-color:var(--accent-muted);transform:translateY(-2px);color:var(--ink)}
.muster-list strong{display:block;font-weight:560}
.muster-list em{display:block;font-style:normal;font-size:.84rem;color:var(--ink-3);margin-top:2px}
.muster-list svg{width:16px;height:16px;color:var(--accent);grid-row:1/3;grid-column:2}
@media (min-width:620px){.muster-list{grid-template-columns:1fr 1fr}}
.ref-panel{max-width:860px}

/* Rechner: Rechnet sich das? (23.08.2026) */
.rechner{display:grid;gap:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,4vw,36px);box-shadow:var(--shadow-soft)}
@media (min-width:900px){.rechner{grid-template-columns:1.1fr 1fr;gap:36px;align-items:start}}
.rechner .cfg-field{margin-bottom:18px}
.rechner-range input[type=range]{width:100%;accent-color:var(--accent);margin-top:6px;min-height:32px}
.rechner-range output{font-family:var(--font-mono);color:var(--accent)}
.rechner-paket{border:0;padding:0;margin:0;display:grid;gap:8px}
.rechner-paket legend{font-size:.92rem;font-weight:520;margin-bottom:8px}
.rechner-paket label{display:flex;align-items:center;gap:10px;font-size:.95rem;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:12px;cursor:pointer;min-height:44px}
.rechner-paket label:has(input:checked){border-color:var(--accent);background:var(--accent-muted)}
.rechner-paket input{accent-color:var(--accent)}
.rechner-out{display:grid;gap:16px;background:var(--canvas);border:1px solid var(--accent-muted);box-shadow:0 0 0 1px var(--accent-muted);border-radius:var(--radius);padding:clamp(18px,3vw,28px)}
.rechner-kpi{display:grid;gap:2px}
.rechner-num{font-family:var(--font-display);font-weight:560;font-size:clamp(1.6rem,1.2rem+1.6vw,2.3rem);letter-spacing:-.03em;color:var(--ink)}
.rechner-kpi:first-child .rechner-num{color:var(--accent)}
.rechner-label{font-size:.88rem;color:var(--ink-3)}
.rechner-note{font-size:.84rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px}
.rechner-out .btn-row{margin-top:4px}
.kontakt-methods{flex-wrap:wrap;gap:14px}
[hidden]{display:none !important}

/* ---------- 23.08. (d): Klappblöcke für Check, Rechner, Vergleich ---------- */
.fold{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden}
.fold>summary{list-style:none;cursor:pointer;padding:22px 64px 22px 26px;position:relative;display:grid;gap:4px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";position:absolute;right:26px;top:50%;width:12px;height:12px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform var(--t-fast) var(--ease-out)}
.fold[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fold .fold-title{font-family:var(--font-display);font-weight:560;font-size:clamp(1.15rem,1rem + .8vw,1.5rem);letter-spacing:-.02em;color:var(--ink)}
.fold .fold-sub{color:var(--ink-2);font-size:.95rem;max-width:70ch}
.fold .fold-body{padding:4px 26px 28px;border-top:1px solid var(--line)}
.fold.subblock{margin-top:64px}
.fold-check{margin:0 auto 40px;max-width:880px}
.fold-check .check{margin-top:18px}
@media (max-width:640px){.fold>summary{padding:18px 48px 18px 18px}.fold .fold-body{padding:4px 18px 22px}.fold>summary::after{right:18px}}

/* Satz an der Naht: der Film ist Premium */
.hero-premium-note{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:22px 24px 0;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.hero-premium-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;margin-left:6px}
.hero-premium-note a:hover{color:var(--ink)}
#zusagen.subblock{margin-top:48px}
/* Statik-Hero (dieselben fünf Tore wie oben): dort läuft kein Film, also kein Film-Satz */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero-premium-note{display:none}
}

/* ---- Bewegung, Klarkidigital 06.09.2026: die Kante zündet. Branchen-Seiten.
   Hover auf allem Klickbaren: Kante zuerst (200 ms), weicher Glow 120 ms später,
   dazu zwei Pixel Anheben. Nur mit Maus; Tastaturfokus behält seinen Ring,
   Reduced Motion schaltet alles ab. */
.btn,.tile,.care,.pledge,.kontakt-card,.nav-cta{outline:1px solid transparent;outline-offset:-1px}
@media (hover:hover) and (pointer:fine){
  .btn,.tile,.care,.pledge,.kontakt-card,.nav-cta{transition:outline-color .2s ease,box-shadow .45s cubic-bezier(.16,1,.3,1) .12s,transform .35s cubic-bezier(.16,1,.3,1) .05s,border-color .25s ease,background .25s ease,color .2s ease}
  .btn:hover,.tile:hover,.care:hover,.pledge:hover,.kontakt-card:hover,.nav-cta:hover{outline-color:color-mix(in srgb, var(--accent) 62%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),0 0 22px -4px color-mix(in srgb, var(--accent) 30%, transparent),0 14px 34px -18px color-mix(in srgb, var(--accent) 60%, transparent),0 18px 40px -22px rgba(0,0,0,.28);transform:translateY(-2px)}
  .faq-item summary{transition:box-shadow .35s cubic-bezier(.16,1,.3,1) .08s,color .2s ease}
  .faq-item summary:hover{box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 55%, transparent),0 8px 20px -14px color-mix(in srgb, var(--accent) 50%, transparent)}
}
@media (prefers-reduced-motion:reduce){.btn,.tile,.care,.pledge,.kontakt-card,.nav-cta,.faq-item summary{transition:none!important;transform:none!important}}
/* Nachtrag: die Einblend-Regel (.js [data-reveal].in) wiegt mehr als ein Hover, darum hier ausdrücklich. */
@media (hover:hover) and (pointer:fine){.js [data-reveal].in:is(.btn,.tile,.care,.pledge,.kontakt-card):hover{transform:translateY(-2px)}}