/* ============================================================
   LEISTUNGEN — Seiten-Design „Blueprint" (v16.1)
   Erbe der Signal-Variante, farblich auf die Marke normiert:
   Navy + Gold-Grid, KEIN Electric Blue, KEIN Violett.
   Space Grotesk (Display, normale Schreibweise seit v16.1 —
   Dauer-Uppercase war anstrengend zu lesen) + Inter.
   Grundton seit v16.1 aufgehellt (#0A1A33) — der Hell-Dunkel-
   Sprung zwischen den Seiten war zu hart für die Augen.
   Signaturen: ① Stacked Cards (4 Leistungsbereiche)
   ② ScrambleText (genau 2 Einsätze) ③ Rechner-Dashboard.
   Wird NACH base.css geladen und stellt die Kopf-Vermittler
   auf die dunkle Farbwelt um.
   ============================================================ */

:root{
  --bg:#0A1A33;                     /* navy-2 — bewusst heller als navy-deep */
  --panel:#10254A;
  --panel-2:#16335C;
  --text:#E8EEF9;
  --text-soft:#C7D3E6;
  --seiten-muted:#9AA8BF;
  --grid:rgba(196,154,59,.06);
  --line-dunkel:rgba(196,154,59,.22);
  --line-soft-dunkel:rgba(147,161,184,.18);
  --fokus:var(--gold);
  /* --font-display / --font-body kommen zentral aus base.css */
  --radius:2px;

  /* Kopfleiste auf dunkel stellen (Logo bekommt helle Plakette) */
  --kopf-bg:rgba(10,26,51,.82);
  --kopf-ink:#E8EEF9;
  --kopf-tag:var(--gold-bright);
  --kopf-line:var(--line-dunkel);
  --kopf-toggle:#E8EEF9;
  --logo-gold:var(--gold-bright);
  --akzent-ink:var(--gold-bright);
  --calc-track:rgba(147,161,184,.25);
}

html{background:var(--bg)}   /* kein Weiß-Blitz beim Seitenwechsel */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.03rem;
}
/* Signatur-Fond: Blueprint-Raster mit Lichtführung —
   Feinraster (24px) + Hauptraster (120px) + Kreuzmarker an den
   Hauptkreuzungen; die radiale Maske hält das Raster im Hero präsent
   und löst es zu den Rändern auf (Zeichnung statt Tapete). */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23C49A3B' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E") -6px -6px/120px 120px,
    repeating-linear-gradient(0deg,rgba(196,154,59,.08) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(90deg,rgba(196,154,59,.08) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(0deg,rgba(196,154,59,.03) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(196,154,59,.03) 0 1px,transparent 1px 24px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 18%,#000 40%,transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 18%,#000 40%,transparent 85%);
}
main{position:relative;z-index:1}
::selection{background:var(--gold);color:#0A1A33}

/* Schrift bewusst EINFACH: normale Schreibweise, klare Gewichte —
   kein Dauer-Uppercase (v16.1, Wunsch des Gründers) */
h1,h2,h3{
  font-family:var(--font-display);font-weight:600;line-height:1.12;color:var(--text);
  letter-spacing:-.01em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2rem,4.6vw + .4rem,3.6rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:1.18rem}

.section{padding-block:clamp(4.5rem,9vw,8rem);position:relative}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:42rem;color:var(--text-soft)}
.muted{color:var(--seiten-muted)}
.section-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head h2{margin-bottom:1rem}
.section-intro{color:var(--seiten-muted);margin-top:14px}

.eyebrow{color:var(--gold-bright)}
.eyebrow::before{background:var(--gold)}

a{color:var(--gold-bright)}
a:hover{color:var(--text)}
[data-todo]{outline-color:rgba(227,192,106,.55)}

/* Buttons in der Blueprint-Sprache nachschärfen (eckig, aber normale Schrift) */
.btn{border-radius:var(--radius);font-family:var(--font-display);font-size:.95rem}
.btn-outline{--fg:var(--gold-bright);--bd:var(--gold)}
.btn-outline:hover{--bg:rgba(196,154,59,.14);--fg:var(--gold-bright)}
.btn-primary{--bg:var(--gold);--fg:#131108;--bd:var(--gold);font-weight:600}
.btn-primary:hover{--bg:var(--gold-bright);--bd:var(--gold-bright)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(4rem,9vw,7rem) clamp(3rem,6vw,5rem);position:relative;z-index:1}
.hero .status{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);margin-top:26px;min-height:1.3em;
}
.hero .lead{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- Hero-Video: nebel-loop als leise Tiefe unter dem Raster ----------
   Schichtung im Hero (unten → oben): .videoszene (z0) · .hero-raster (z1) ·
   Inhalt (z2). Das Video bleibt nur Textur DAHINTER — das Blueprint-Raster
   liegt darüber und dominiert klar. */
#leistungenHero{overflow:hidden}
#leistungenHero > .container{position:relative;z-index:2}
/* Deckkraft stark gedrückt: sehr niedrige Wirkung (Grid muss dominant bleiben) */
#leistungenHero .videoszene-clip{opacity:.3}
/* Hero-eigenes Blueprint-Raster ÜBER der Video-Ebene — dieselbe Zeichnung wie
   body::before (Fein-/Hauptraster + Kreuzmarker), hier gezielt vor das Video
   gelegt, damit die technische Zeichnung über der Tiefe steht. Radiale Maske
   hält es im Hero-Zentrum präsent und löst es zu den Rändern auf. */
#leistungenHero .hero-raster{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23C49A3B' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E") -6px -6px/120px 120px,
    repeating-linear-gradient(0deg,rgba(196,154,59,.08) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(90deg,rgba(196,154,59,.08) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(0deg,rgba(196,154,59,.03) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(196,154,59,.03) 0 1px,transparent 1px 24px);
  -webkit-mask-image:radial-gradient(125% 105% at 50% 40%,#000 46%,transparent 90%);
  mask-image:radial-gradient(125% 105% at 50% 40%,#000 46%,transparent 90%);
}

/* Entrance-Andockpunkte (motion.js tweent --linie; Grundzustand = 1, voll da) */
#leistungenHero .eyebrow::before{transform:scaleX(var(--linie,1));transform-origin:left center}
/* Masken-Zeilen des SplitText (H1) */
.line-mask{overflow:hidden}
/* Scramble: noch nicht aufgelöste Geisterzeichen stehen gedimmt */
.scr-geist{opacity:.45}

/* ---------- Signatur 1: Stacked Cards ---------- */
.stackwrap{display:flex;flex-direction:column;gap:26px}
.stackcard{
  position:sticky;top:calc(96px + var(--stapel,0) * 16px);
  background:var(--panel);border:1px solid var(--line-soft-dunkel);border-radius:var(--radius);
  padding:clamp(26px,3.4vw,46px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,4vw,56px);align-items:center;
  will-change:transform;
}
/* Tiefenstaffel-Andockpunkte (motion.js tweent --hebt und --dim):
   ::before = vorgerenderter Schatten + Goldkante der ANKOMMENDEN Karte
   (nur opacity — kein box-shadow-Tween auf großer Fläche),
   ::after = Abdunklung des ZURÜCKTRETENDEN Blatts. */
.stackcard::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1px solid var(--line-dunkel);
  box-shadow:0 24px 60px rgba(4,10,22,.5);
  opacity:var(--hebt,0);
}
.stackcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--navy-2);
  opacity:var(--dim,0);
}
.stackcard .sc-nr{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;color:var(--gold-bright);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
}
.stackcard .sc-nr::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.stackcard h3{font-size:clamp(1.35rem,2.2vw,1.85rem);margin-bottom:10px}
.stackcard .card-benefit{color:var(--gold-bright);font-family:var(--font-display);font-size:1.05rem;text-transform:none;letter-spacing:0;margin-bottom:12px}
.stackcard p:not(.card-benefit){color:var(--text-soft);line-height:1.6}
.stackcard .ticks{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.stackcard .ticks li{position:relative;padding-left:24px;font-size:.94rem;color:var(--text-soft)}
.stackcard .ticks li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:7px;border-left:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);transform:rotate(-45deg)}
.stackcard.gold{
  background:linear-gradient(160deg,rgba(196,154,59,.16),rgba(196,154,59,.04) 55%),var(--panel-2);
  border-color:var(--line-dunkel);
}
.sc-visual{display:grid;place-items:center}

/* ---------- Mini-Mocks (Visuals der Karten 02–04, Machart wie Karte 01) ---------- */
.mini-mock{
  position:relative;width:100%;max-width:340px;
  background:var(--panel-2);border:1px solid var(--line-dunkel);border-radius:var(--radius);
  overflow:hidden;
}
/* Blueprint-Signatur: zwei Eckwinkel um jedes Karten-Visual */
.mini-mock::before,.mini-mock::after,
.chat-mock::before,.chat-mock::after{
  content:"";position:absolute;width:14px;height:14px;z-index:2;pointer-events:none;
  border:1px solid rgba(196,154,59,.55);
}
.mini-mock::before,.chat-mock::before{top:0;left:0;border-right:0;border-bottom:0}
.mini-mock::after,.chat-mock::after{bottom:0;right:0;border-left:0;border-top:0}
.mock-head{
  display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--navy);border-bottom:1px solid var(--line-soft-dunkel);
}
.mock-head .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.mock-head .dot:first-child{background:var(--gold)}
.mock-url{margin-left:auto;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:#9fb0ca}
/* 02: Website-Wireframe (Strokes zeichnet motion.js beim Enter) */
.mock-draw{display:block;width:100%;height:auto;padding:4px 0 2px}
.mock-draw .linie{stroke:rgba(147,161,184,.5);stroke-width:1.5}
.mock-draw .linie.gold{stroke:var(--gold)}
.mock-draw .fuellung{fill:var(--gold)}
/* 03: App-Screen */
.phone-mock{max-width:176px;border-radius:14px;padding:10px 9px}
.phone-screen{
  display:flex;flex-direction:column;gap:9px;min-height:264px;
  background:var(--navy-2);border:1px solid var(--line-soft-dunkel);border-radius:8px;padding:12px 10px;
}
.app-head{height:30px;background:var(--panel);border:1px solid var(--line-soft-dunkel);border-radius:3px;display:flex;align-items:center;padding:0 9px}
.app-head span{width:52%;height:6px;border-radius:1px;background:var(--gold)}
.app-row{
  height:32px;background:var(--panel);border:1px solid var(--line-soft-dunkel);border-radius:3px;position:relative;
}
.app-row::before{
  content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:rgba(196,154,59,.55);
}
.app-row::after{
  content:"";position:absolute;left:26px;right:12px;top:50%;transform:translateY(-50%);height:6px;
  background:linear-gradient(90deg,rgba(147,161,184,.45) 62%,transparent 62%);border-radius:1px;
}
.app-cta{height:26px;background:var(--gold);border-radius:3px;opacity:.9}
.app-nav{margin-top:auto;height:24px;border-top:1px solid var(--line-soft-dunkel);display:flex;align-items:center;justify-content:space-around}
.app-nav span{width:7px;height:7px;border-radius:50%;background:rgba(147,161,184,.5)}
.app-nav span:nth-child(2){background:var(--gold-bright)}
/* 04: Terminal */
.term-mock{max-width:320px;background:var(--navy-deep)}
.term-body{display:flex;flex-direction:column;gap:10px;padding:16px 14px 14px}
.tline{height:7px;border-radius:1px;background:rgba(147,161,184,.38);transform-origin:left center}
.tline.gold{background:rgba(196,154,59,.75)}
.tline.einzug{margin-left:18px}
.tline.w35{width:35%}.tline.w45{width:45%}.tline.w55{width:55%}
.tline.w60{width:60%}.tline.w70{width:70%}.tline.w80{width:80%}
.term-prompt{font-family:var(--font-mono);font-size:.8rem;line-height:1;color:var(--gold-bright);margin-top:2px}

/* Chat-Mockup (Visual der KI-Karte — Inhalte 1:1 aus v15).
   Schatten dunkel getönt (der navy-getönte --sh-lg war auf dem Panel
   unsichtbar) + Hauch Goldkante — das Fenster hebt sich jetzt ab. */
.chat-mock{
  position:relative;background:#fff;border:1px solid rgba(196,154,59,.32);border-radius:10px;
  box-shadow:0 24px 48px rgba(4,10,22,.5);overflow:hidden;width:100%;max-width:400px;
}
.chat-mock-head{display:flex;align-items:center;gap:7px;padding:13px 16px;background:var(--navy)}
.chat-mock-head .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.chat-mock-head .dot:first-child{background:var(--gold)}
.chat-mock-title{margin-left:auto;color:#cdd9ec;font-size:.8rem;font-family:var(--font-body)}
.chat-mock-body{padding:18px 16px;display:flex;flex-direction:column;gap:11px;background:linear-gradient(180deg,#fbfcfe,#f6f8fb)}
.bubble{max-width:84%;padding:10px 14px;border-radius:14px;font-size:.92rem;line-height:1.45;color:var(--ink)}
.bubble.user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.bubble.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
/* Tipp-Blase: standardmäßig AUS — ohne Motion (No-JS, reduced-motion)
   zeigt das Mockup das abgeschlossene Gespräch (.final), kein Endlos-Blinken.
   Nur die Chat-Loop in motion.js blendet sie zeitweise ein. */
.bubble.typing{display:none;gap:4px;align-items:center;width:auto}
.bubble.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted-light);animation:blink 1.2s infinite}
.bubble.typing span:nth-child(2){animation-delay:.2s}
.bubble.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- Nutzen: Use-Cases ---------- */
.usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:clamp(36px,5vw,56px)}
.uc{background:var(--panel);border:1px solid var(--line-soft-dunkel);border-radius:var(--radius);padding:24px}
.uc-tag{
  display:inline-block;font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);
  background:rgba(196,154,59,.12);padding:5px 12px;border-radius:var(--radius);margin-bottom:16px;
}
.uc-before,.uc-after{font-size:.95rem;line-height:1.5;margin-bottom:10px;padding-left:24px;position:relative}
.uc-before{color:var(--seiten-muted)}
.uc-after{color:var(--text);margin-bottom:0}
/* „Vorher" = hohler Punkt, „Nachher" = gefüllter Goldpunkt —
   leer/gefüllt erzählt den Wechsel, ohne die Navy/Gold-Welt zu brechen */
.uc-before::before{content:"";position:absolute;left:2px;top:6px;width:10px;height:10px;border-radius:50%;background:transparent;border:2px solid var(--seiten-muted);box-sizing:border-box}
.uc-after::before{content:"";position:absolute;left:2px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.uc strong{color:var(--text);font-weight:600}

/* ---------- Signatur 3: Rechner als Dashboard ---------- */
.calc{
  display:grid;grid-template-columns:1.05fr .95fr;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-dunkel);max-width:980px;margin:0 auto;
  background:var(--panel);
}
.calc-controls{padding:clamp(24px,3vw,38px)}
.calc-row{margin-bottom:24px}
.calc-row:last-child{margin-bottom:0}
.calc-row label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:12px;font-family:var(--font-display)}
.calc-row output{font-family:var(--font-mono);font-size:1.2rem;color:var(--gold-bright);white-space:nowrap}
/* Slider in der Blueprint-Sprache: eckiger Thumb mit Goldrahmen,
   Tick-Marken alle 10 % legt site-widgets.js in den Track-Verlauf */
.calc-row input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:2px;background:var(--calc-track);cursor:pointer}
.calc-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:3px;background:#0A1A33;border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(10,26,51,.55);cursor:pointer}
.calc-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:3px;background:#0A1A33;border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(10,26,51,.55);cursor:pointer}
.calc-row input[type=range]:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.calc-row input[type=range]:focus-visible::-webkit-slider-thumb{border-color:var(--gold-bright);background:var(--gold)}
.calc-row input[type=range]:focus-visible::-moz-range-thumb{border-color:var(--gold-bright);background:var(--gold)}
@media (pointer:coarse){.calc-row input[type=range]{height:8px}.calc-row input[type=range]::-webkit-slider-thumb{width:28px;height:28px}.calc-row input[type=range]::-moz-range-thumb{width:28px;height:28px}}
.calc-result{
  background:var(--panel-2);border-left:1px solid var(--line-dunkel);
  padding:clamp(28px,3vw,38px);display:flex;flex-direction:column;justify-content:center;
}
.calc-big{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;color:var(--text)}
.calc-big .calc-unit{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--gold-bright);margin-top:10px;letter-spacing:.12em;text-transform:uppercase}
.calc-sub{color:var(--seiten-muted);font-size:.92rem;margin-top:12px}
.calc-euro{font-family:var(--font-display);font-size:1.6rem;color:var(--gold-bright);margin-top:18px}
.calc-note{color:var(--seiten-muted);font-size:.78rem;line-height:1.5;margin-top:18px}
/* Live-Balken (reagieren auf ki:calc) */
.calc-gauges{margin-top:1.6rem;border-top:1px solid var(--line-soft-dunkel);padding-top:1.3rem}
.gauge{margin-bottom:1rem}
.gauge:last-child{margin-bottom:0}
.gauge-label{
  display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--seiten-muted);margin-bottom:6px;
}
/* Gauge: clip-path statt scaleX (der Gold-Verlauf wird nicht mehr gestaucht),
   Tick-Marken alle 10 % geben dem Balken die Skala, ::after = heller Tip
   am Füllstand (--p setzt site-widgets.js — Anzeige läuft auch ohne Motion) */
.gauge-track{height:8px;position:relative;overflow:hidden;border-radius:2px;background:rgba(147,161,184,.18)}
.gauge-fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  clip-path:inset(0 100% 0 0);
  transition:clip-path .45s var(--ease-premium);
}
/* Skalen-Ticks alle 10 % — liegen ÜBER der Füllung, der Balken wird ablesbar */
.gauge-track::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(10,26,51,.7) calc(10% - 1px),rgba(10,26,51,.7) 10%);
}
/* heller Tip am Füllstand (--p setzt site-widgets.js) */
.gauge-track::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(100% - 2px),var(--gold-bright) 0);
  transform:translateX(calc(var(--p,0%) - 100%));
  transition:transform .45s var(--ease-premium);
}

/* ---------- Vorgehen ---------- */
.timeline{max-width:840px;margin:0 auto;position:relative;display:flex;flex-direction:column;gap:14px}
/* Gold-Faden: zeichnet sich mit dem Scroll (motion.js tweent --faden per scrub;
   Grundzustand = 1, ohne Motion steht die Linie fertig da) */
.timeline::before{
  content:"";position:absolute;left:23px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(var(--gold),rgba(196,154,59,.12));
  transform:scaleY(var(--faden,1));transform-origin:top center;
}
.tl-step{display:flex;gap:22px;align-items:flex-start;position:relative}
.tl-num{
  flex:none;width:48px;height:48px;border-radius:var(--radius);background:var(--panel-2);
  border:1px solid var(--line-dunkel);color:var(--gold-bright);display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.2rem;z-index:1;
  transition:border-color .5s var(--ease-premium), background .5s var(--ease-premium), color .5s var(--ease-premium);
}
/* Etappe „zündet", wenn der Faden sie erreicht (Klasse setzt motion.js) */
.tl-step.is--an .tl-num{border-color:var(--gold);background:rgba(196,154,59,.16);color:var(--gold-bright)}
.tl-card{background:var(--panel);border:1px solid var(--line-soft-dunkel);border-radius:var(--radius);padding:20px 24px;flex:1}
.tl-card h3{margin-bottom:6px}
.tl-card p{color:var(--text-soft);font-size:.96rem}
.tl-result{
  display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);
  background:rgba(196,154,59,.1);padding:5px 12px;border-radius:var(--radius);
}

/* ---------- Preise ---------- */
.preis-kicker{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:10px;min-height:1.3em;
}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{
  position:relative;background:var(--panel);border:1px solid var(--line-soft-dunkel);border-radius:var(--radius);
  padding:34px 28px;display:flex;flex-direction:column;
  transition:transform .3s var(--ease-premium), border-color .3s var(--ease-premium);
}
.price-card:hover{transform:translateY(-4px);border-color:var(--line-dunkel)}
/* Signatur-Hover: vier Blueprint-Eckwinkel fahren gestaffelt aus den Ecken ein,
   der Tiefenschatten liegt vorgerendert auf .ecken (nur opacity — günstig) */
.price-card .ecken{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 18px 40px rgba(4,10,22,.45);
  opacity:0;transition:opacity .3s var(--ease-premium);
}
.price-card:hover .ecken{opacity:1}
.price-card::before,.price-card::after,
.price-card .ecken::before,.price-card .ecken::after{
  content:"";position:absolute;width:10px;height:10px;border:2px solid var(--gold);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease-premium), transform .25s var(--ease-premium);
}
.price-card::before{top:-5px;left:-5px;border-right:0;border-bottom:0;transform:translate(4px,4px)}
.price-card::after{top:-5px;right:-5px;border-left:0;border-bottom:0;transform:translate(-4px,4px);transition-delay:.04s}
.price-card .ecken::before{bottom:-5px;left:-5px;border-right:0;border-top:0;transform:translate(4px,-4px);transition-delay:.08s}
.price-card .ecken::after{bottom:-5px;right:-5px;border-left:0;border-top:0;transform:translate(-4px,-4px);transition-delay:.12s}
.price-card:hover::before,.price-card:hover::after,
.price-card:hover .ecken::before,.price-card:hover .ecken::after{opacity:1;transform:translate(0,0)}
.price-card.featured{background:linear-gradient(165deg,rgba(196,154,59,.14),rgba(196,154,59,.03) 60%),var(--panel-2);border-color:var(--line-dunkel)}
.price-badge{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-bright);
}
.price-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);transition:transform .3s var(--ease-premium), background .3s var(--ease-premium)}
/* Badge-Mikrobewegung beim Karten-Hover */
.price-card:hover .price-badge::before{transform:scale(1.3);background:var(--gold-bright)}
.price-card h3{margin-bottom:4px}
.price-sub{color:var(--seiten-muted);font-size:.92rem;margin-bottom:22px}
.price-main{font-family:var(--font-display);font-size:2.2rem;color:var(--text);line-height:1.05;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-rec{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-bright);margin-top:4px;display:flex;align-items:baseline;gap:6px}
.price-from{font-family:var(--font-mono);font-size:.72rem;color:var(--seiten-muted);text-transform:uppercase;letter-spacing:.08em}
.price-unit{font-family:var(--font-body);font-size:.8rem;color:var(--seiten-muted)}
.price-card .ticks{margin:24px 0 28px;flex:1}
.price-card .ticks li{position:relative;padding-left:24px;margin-bottom:9px;font-size:.93rem;color:var(--text-soft)}
.price-card .ticks li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:7px;border-left:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);transform:rotate(-45deg)}
.price-card .btn{width:100%}
/* Ausbaupfad-Zeile am Kartenfuß (macht Land-and-Expand sichtbar) */
.price-ausbau{margin:0 0 18px;padding-top:14px;border-top:1px solid var(--line-soft-dunkel);font-size:.82rem;line-height:1.5;color:var(--seiten-muted)}
.price-card.featured .price-ausbau{color:var(--gold-bright);border-top-color:var(--line-dunkel)}
.price-note{max-width:760px;margin:34px auto 0;text-align:center;color:var(--seiten-muted);font-size:.9rem;line-height:1.6}

/* ---------- Einzeln dazubuchbar (Modul-Leiste) ---------- */
.module-liste{margin-top:30px;text-align:center}
.module-kicker{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.03em;color:var(--gold-bright);margin-bottom:18px}
.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.modul{
  display:flex;flex-direction:column;gap:7px;padding:18px 16px;
  background:var(--panel);border:1px solid var(--line-soft-dunkel);border-radius:var(--radius);
  transition:transform .28s var(--ease-premium),border-color .28s var(--ease-premium);
}
.modul:hover{transform:translateY(-3px);border-color:var(--gold)}
.modul-name{font-size:.95rem;color:var(--text-soft)}
.modul-preis{font-family:var(--font-display);font-size:1.28rem;color:var(--gold-bright)}
.module-note{max-width:660px;margin:18px auto 0;color:var(--seiten-muted);font-size:.88rem;line-height:1.6}
@media (max-width:900px){.module-grid{grid-template-columns:1fr 1fr}}
.price-individual{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,48px);
  margin-top:24px;padding:clamp(24px,3vw,34px) clamp(24px,3.5vw,42px);
  background:var(--panel);border:1px solid var(--line-dunkel);border-radius:var(--radius);
}
.price-individual h3{margin:0 0 8px}
.price-individual p:not(.price-badge){color:var(--text-soft);font-size:.96rem;line-height:1.6;max-width:64ch}
.price-individual .btn{flex:none;white-space:nowrap}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--line-soft-dunkel);border-radius:var(--radius);background:var(--panel);overflow:hidden;transition:border-color .25s}
.faq-item[open]{border-color:var(--line-dunkel)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--font-display);
  font-size:1.08rem;font-weight:600;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-body);font-size:1.6rem;font-weight:300;color:var(--gold);transition:transform .3s var(--ease-premium);line-height:1;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
/* Höhen-Übergang macht motion.js (GSAP height-Tween beim Toggle);
   overflow:hidden hält den Inhalt während der Bewegung in der Box.
   Ohne Motion bleibt der native Sofort-Schnitt von <details>. */
.faq-answer{padding:0 24px 22px;color:var(--text-soft);font-size:.98rem;line-height:1.65;overflow:hidden}

/* ---------- Abschluss-CTA ---------- */
.cta-band{
  text-align:center;padding-block:clamp(56px,8vw,100px);position:relative;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(196,154,59,.06));
  border-top:1px solid var(--line-soft-dunkel);
}
.cta-band h2{max-width:22ch;margin:0 auto 16px}
.cta-band p{color:var(--seiten-muted);max-width:560px;margin:0 auto 30px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .stackcard{grid-template-columns:1fr}
  .sc-visual{order:-1;justify-content:flex-start}
  .chat-mock{max-width:100%}
  .mini-mock{margin-inline:0}
  .phone-mock{max-width:160px}
  .phone-screen{min-height:228px}
  .usecases{grid-template-columns:1fr;max-width:440px;margin-inline:auto;margin-bottom:36px}
  .calc{grid-template-columns:1fr}
  .calc-result{border-left:0;border-top:1px solid var(--line-dunkel)}
  .cards-3{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .price-individual{flex-direction:column;align-items:flex-start}
}
@media (max-width:768px){
  /* Stacking mobil auflösen: normale Karten untereinander */
  .stackcard{position:static}
}
@media (max-width:520px){
  .stackcard .ticks{grid-template-columns:1fr}
}