/* ISTARIUM — AI Enabled Executives, Landing Page.
   Ergänzt istarium.css; erfindet keine neuen Farben, Schriften oder Gesten.
   Alles hier baut auf den Tokens der Hauptseite auf (--ember, --navy, --sky-*, --gutter).
   Neue Bausteine: Kennzahlen-Reihe, Stufen-Liste, Leistungsliste, Preisband, FAQ. */

/* ---- Hero-Variante: kein Vollbild, die Seite soll scrollen wollen ---- */
.hero--aee{min-height:auto;padding-block:clamp(120px,20vh,210px) clamp(80px,12vh,140px);}
.hero--aee .promise{max-width:26ch;}
/* Hero-Absatz so breit wie der Titel „AI Enabled Executive" (Titel-Text ≈ 34ch
   bei der Absatz-Fontgröße) — weniger Zeilen; auf Mobil volle Breite. */
.hero--aee p.promise{max-width:34ch;}
@media (max-width:640px){
  .hero--aee p.promise{max-width:100%;}
  /* Die Kopf-Leiste (Sprache/Kontrast/Schriftgröße) liegt absolut über dem Hero und
     bricht am Handy in eine zweite Zeile um. Mehr Kopf-Abstand, damit diese zweite
     Zeile Platz hat und nicht in den Hero-Inhalt ragt. */
  .hero--aee{padding-top:clamp(158px,20vh,190px);}
}


/* ---- Störer: Aktions-Siegel als Gedankenwolke, über den Hero gelegt ----
   Gezackte Wolken-Silhouette (SVG-Pfad, gleiche Instanz Hero + Preis) mit unten-links
   auslaufender Denk-Blasen-Spur — die „Gedankenwolke". Von oben-links beleuchteter Grund,
   Ember-Kontur; Schlagschatten folgt der Wolkenform (drop-shadow auf das SVG). Bewegung:
   leise atmender Ember-Halo (ambient), sanftes Schweben (idle) und Scroll-Parallaxe (JS).
   Mail-Adresse wie überall per JS zusammengesetzt (NICHT im Quelltext). Farbe aus --ember. */
.stoerer{
  position:absolute; z-index:5;
  width:clamp(182px,20vw,236px); aspect-ratio:1;
  animation:st-in .7s var(--ease) both;   /* nur Opazität — Transform gehört der Parallaxe */
}
@media (prefers-reduced-motion:reduce){ .stoerer{animation:none;} }

/* Sanfter Ember-Halo hinter der Wolke — der „magische" Bewegungsanteil, atmet leise.
   Weicher Glow, muss die Kontur nicht treffen (deshalb rund + blur). */
.stoerer__ring{
  position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 40% 34%,
    color-mix(in srgb,var(--ember) 40%,transparent) 0%, transparent 68%);
  filter:blur(10px);
  animation:st-breathe 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .stoerer__ring{animation:none;} }

/* Positionier-/Bewegungs-Rahmen: zentriert Text auf der Wolke, trägt Neigung + Schweben. */
.stoerer__disc{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(7px,1vw,11px); padding:clamp(30px,4.6vw,42px); text-align:center;  /* padding = Mindestabstand zum Wolkenrand */
  transform:rotate(-7deg);
  animation:st-float 7s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .stoerer__disc{animation:none;transform:rotate(-7deg);} }

/* Die Wolke selbst: SVG-Silhouette hinter dem Text, Schatten folgt der Alpha-Form. */
.stoerer__cloud{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  overflow:visible; pointer-events:none;
  filter:
    drop-shadow(0 20px 26px rgba(0,0,0,.5))
    drop-shadow(0 0 15px color-mix(in srgb,var(--ember) 40%,transparent));
}
.stoerer__cloud .cloud-body,
.stoerer__cloud .cloud-dots circle{ stroke:var(--ember); stroke-width:2.4; }
.stoerer__cloud .cloud-dots circle{ stroke-width:2.2; }

/* Text sitzt über der Wolke. */
.stoerer__eyebrow,
.stoerer__pct,
.stoerer__cta{ position:relative; z-index:1; }
.stoerer__eyebrow{
  margin:0; font-weight:600; line-height:1.1; max-width:12ch;
  font-size:clamp(10px,1.15vw,12px); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ember-soft);
}
.stoerer__cta{
  display:block; max-width:15ch; margin:0 auto;
  color:var(--text); text-decoration:none; font-weight:700;
  line-height:1.28; font-size:clamp(13px,1.7vw,17px);
  overflow-wrap:break-word; hyphens:auto;   /* automatischer Umbruch, bricht auch lange Wörter */
  transition:color .3s var(--ease);
}
.stoerer__cta:hover{ color:var(--ember-soft); }
.stoerer__cta svg{ display:inline; vertical-align:baseline; margin-left:4px; transition:transform .3s var(--ease); }
.stoerer__cta:hover svg{ transform:translateX(3px); }

/* Platzierung Hero: rechts neben dem Hero-Text, überlappend „aufgelegt". */
.hero__inner{ position:relative; }
.hero--aee .stoerer{ top:clamp(20px,7vh,84px); right:clamp(-4px,0vw,10px); }

/* Platzierung Preis: rechts am Preisblock. */
.band--price .price{ position:relative; }
.band--price .stoerer{ top:clamp(-26px,-2vw,-8px); right:clamp(-4px,0vw,8px); }

/* Enger: Orb schrumpft in die obere rechte Ecke (weiterhin „aufgelegt"). */
@media (max-width:900px){
  .stoerer{ width:clamp(128px,30vw,168px); }
  .hero--aee .stoerer{ top:0; right:0; }
  .band--price .stoerer{ top:-16px; right:0; }
}
/* Auf dem Handy ausblenden (Wolke braucht Platz, den es hier nicht gibt). */
@media (max-width:560px){
  .stoerer{ display:none; }
}

@keyframes st-in{ from{opacity:0;} to{opacity:1;} }
@keyframes st-breathe{
  0%,100%{ transform:scale(.94); opacity:.5; }
  50%{ transform:scale(1.06); opacity:.85; }
}
@keyframes st-float{
  0%,100%{ transform:rotate(-7deg) translateY(0); }
  50%{ transform:rotate(-5.5deg) translateY(-7px); }
}

/* Kernversprechen direkt unter dem Hero: drei Zahlen, keine Erklärung */
.facts{
  display:grid;gap:clamp(26px,4vw,54px);
  grid-template-columns:1fr;margin-top:clamp(46px,7vw,80px);
  max-width:min(100%,860px);
}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr);}}
.facts div{border-top:1px solid var(--line);padding-top:clamp(16px,2vw,22px);}
.facts dt{
  font-weight:300;color:var(--ember-soft);
  font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:.004em;
}
.facts dd{
  margin:10px 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(14px,1.6vw,16px);line-height:1.5;max-width:26ch;
}

/* "Das Programm in Zahlen" — Faktenleiste: nachprüfbare Strukturzahlen, keine
   Wirkungszahlen. Gleiche Optik wie .facts (große Zahl + kleine Bildunterschrift),
   aber fünfspaltig. */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,3vw,34px) clamp(24px,4vw,44px);
  margin-top:clamp(34px,5vw,60px);max-width:min(100%,980px);
}
@media (min-width:560px){.stats{grid-template-columns:repeat(3,1fr);}}
@media (min-width:860px){.stats{grid-template-columns:repeat(5,1fr);}}
.stats div{border-top:1px solid var(--line);padding-top:clamp(14px,1.8vw,20px);}
.stats dt{
  font-weight:300;color:var(--ember-soft);
  font-size:clamp(30px,4vw,46px);line-height:1.02;letter-spacing:.004em;white-space:nowrap;
}
.stats dd{
  margin:8px 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(13px,1.5vw,15px);line-height:1.45;max-width:20ch;
}

/* Stufen — nummeriert, sparsam, wie .uses aber mit Ordnungszahl */
.steps{list-style:none;margin:0;padding:0;max-width:min(94%,760px);counter-reset:s;}
/* Ziffer und Überschrift teilen sich Zeile 1 des Rasters und sind über
   align-items:baseline grundlinien-gleich — unabhängig von der Fontgröße
   (behebt das leichte vertikale Verrutschen der Zahl). */
.steps li{
  counter-increment:s;
  display:grid;grid-template-columns:clamp(46px,6vw,72px) 1fr;row-gap:8px;
  align-items:baseline;
  padding:clamp(22px,3vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.steps li:first-child{padding-top:0;}
.steps li:last-child{border-bottom:0;}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  grid-column:1;grid-row:1;
  font-weight:500;font-size:13px;letter-spacing:.18em;color:var(--ember);
}
.steps__name{grid-column:2;grid-row:1;font-weight:500;color:var(--text);font-size:clamp(18px,2.2vw,24px);letter-spacing:.005em;}
.steps__line{grid-column:2;grid-row:2;font-weight:300;color:var(--muted);font-size:clamp(15px,1.7vw,18px);line-height:1.55;max-width:52ch;}

/* Praxistage als Akkordeon — Nummer bleibt, Beschreibung klappt auf (spart Platz).
   Nutzt die .plus-Mechanik der FAQ (details.q), damit beides gleich aussieht. */
.steps--fold li > details{grid-column:2;grid-row:1;min-width:0;}
.steps--fold summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  transition:color .3s var(--ease);
}
.steps--fold summary:hover{color:var(--onhover);}
.steps--fold summary::-webkit-details-marker{display:none;}
.steps--fold summary .plus{color:var(--ember);font-weight:500;font-size:20px;line-height:1;flex:0 0 auto;transition:transform .3s var(--ease);}
.steps--fold details[open] summary .plus{transform:rotate(45deg);}
.steps--fold .steps__line{display:block;margin-top:10px;}

/* Leistungsliste — je Leistung eine Zeile über die volle Breite, Haarlinien wie überall */
.incl{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:0;grid-template-columns:1fr;}
.incl li{
  padding-block:clamp(16px,2.2vw,22px);border-bottom:1px solid var(--line);
  font-weight:300;color:var(--muted);font-size:clamp(15px,1.7vw,17px);line-height:1.55;
  display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:baseline;
}
/* Ueber dem ersten Punkt steht keine Linie — also auch keine unter dem letzten. */
.incl li:last-child{border-bottom:0;}
.incl li::before{content:"\203A";color:var(--ember);font-weight:500;}
/* Mehr Platz hier: kleine Überschrift auf eigene Zeile, Beschreibung darunter. */
.incl b{display:block;margin-bottom:3px;font-weight:500;color:var(--text);}

/* Kleiner Hinweis + Link auf die Leistungsbeschreibung (PDF), unter der Liste. */
.incl__doc{margin:clamp(20px,2.6vw,30px) 0 0;font-weight:300;color:var(--muted);font-size:clamp(14px,1.5vw,15px);line-height:1.6;max-width:60ch;}
.incl__doc a{color:var(--ember);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent);padding-bottom:1px;}
.incl__doc a:hover{border-bottom-color:var(--ember);}

/* Preisband — die einzige Stelle mit gefülltem Navy-Feld */
/* Preisband trägt seinen Verlauf als GANZES Token, damit der Hellmodus ihn aus
   EINER Stelle kippt — der alte hart kodierte #0e1024/#12143a-Verlauf blieb unter
   [data-theme="light"] dunkel und schluckte den (dort dunklen) Text. */
:root{--band-price:linear-gradient(180deg,#0e1024 0%, #12143a 100%);}
html[data-theme="light"]{--band-price:linear-gradient(180deg,#eef0f8 0%, #e4e7f3 100%);}
.band--price{background:var(--band-price);border-top:1px solid var(--line);}
/* Absicherung: `.band` setzt zwar kein `display`, also greift das UA-`hidden` heute.
   Käme später ein `display` auf .band dazu, würde ein `hidden`-Abschnitt wieder
   sichtbar — deshalb hier explizit. */
[hidden]{display:none!important;}

/* Einspaltig, seit der optionale Weiterbetriebspreis entfallen ist. */
.price{max-width:min(100%,900px);}
.price__fig{
  margin:0;font-weight:300;color:var(--text);
  font-size:clamp(46px,7vw,84px);line-height:1;letter-spacing:.004em;
}
.price__fig em{font-style:normal;font-size:clamp(15px,1.8vw,19px);color:var(--muted);letter-spacing:.1em;margin-left:14px;}
.price__fig em+em{margin-left:0;}
/* Rabattaktion — abgesetztes Feld unter dem Regelpreis, optional. */
.price__promo{display:inline-flex;flex-direction:column;gap:10px;margin:clamp(20px,2.6vw,30px) 0 0;padding:clamp(16px,2vw,22px) clamp(20px,2.4vw,26px);border:1px solid color-mix(in srgb,var(--ember) 34%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--ember) 7%,transparent);}
.price__promo-tag{align-self:flex-start;font-size:clamp(12px,1.4vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--ember-soft);}
.price__promo-fig{margin:0;font-weight:300;color:var(--text);font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:.004em;}
.price__was{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;font-size:.56em;margin-right:.4em;letter-spacing:0;}
.price__now{color:var(--text);}
.price__promo-fig em{font-style:normal;font-size:clamp(13px,1.6vw,16px);color:var(--muted);letter-spacing:.1em;margin-left:12px;}
.price__note{margin:clamp(16px,2.2vw,24px) 0 0;font-weight:300;color:var(--muted);font-size:clamp(15px,1.7vw,17px);line-height:1.6;max-width:60ch;}
.price__doc{margin:clamp(18px,2.4vw,28px) 0 0;font-weight:300;font-size:clamp(15px,1.7vw,17px);}
.price__doc a{color:var(--ember);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent);padding-bottom:1px;}
.price__doc a:hover{border-bottom-color:var(--ember);}
/* FAQ — dieselbe Mechanik wie die Rechtstexte im Footer der Hauptseite */
/* Offen nach oben und unten: keine Linie ueber dem ersten und keine unter dem
   letzten Punkt — die Linien trennen nur noch, sie rahmen nicht mehr ein. */
.faq{max-width:min(100%,820px);}
details.q{border-bottom:1px solid var(--line);}
details.q:last-child{border-bottom:0;}
details.q > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(20px,2.6vw,26px) 2px;
  font-size:clamp(16px,1.9vw,19px);font-weight:300;color:var(--text);
  transition:color .3s var(--ease);
}
details.q > summary:hover{color:var(--onhover);}
details.q > summary::-webkit-details-marker{display:none;}
details.q > summary .plus{color:var(--ember);font-weight:500;font-size:20px;line-height:1;transition:transform .3s var(--ease);}
details.q[open] > summary .plus{transform:rotate(45deg);}
.q__body{padding:0 20px 26px 2px;font-weight:300;font-size:clamp(14px,1.6vw,16px);line-height:1.7;color:var(--muted);}
.q__body p{margin:0 0 1em;}
.q__body p:last-child{margin-bottom:0;}
.q__body ul{margin:0 0 1em;padding:0;list-style:none;}
.q__body ul:last-child{margin-bottom:0;}
.q__body li{position:relative;padding-left:1.1em;margin:0 0 .5em;}
.q__body li:last-child{margin-bottom:0;}
.q__body li::before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:1px;background:var(--accent,currentColor);opacity:.6;}

/* Abschluss-Aufforderung */
.close__lead{
  font-weight:300;color:var(--text);
  font-size:clamp(22px,3.2vw,38px);line-height:1.3;max-width:20ch;
  margin:0 0 clamp(28px,4vw,44px);
}

/* ---- Mitlaufende Kontakt-Buttons (Telefon + E-Mail) ----
   Unten rechts, ganze Seite inkl. Hero. Erscheinen erst nach dem Turnstile-Check
   (Fragment „cfab" aus verify.php). Dezent: oranger Rand, dunkelblaue Fuellung,
   oranges Symbol; beim Hover gefuellt. */
.cfab{
  position:fixed;z-index:60;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);
  display:flex;flex-direction:column;gap:12px;
}
.cfab__btn{
  width:clamp(46px,6vw,54px);height:clamp(46px,6vw,54px);
  display:grid;place-items:center;
  background:var(--sky-low);border:1px solid var(--ember);color:var(--ember);
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.cfab__btn:hover{background:var(--ember);color:var(--sky-top);transform:translateY(-2px);}
.cfab__btn svg{width:22px;height:22px;}

/* ============ DREI-STUFEN A/B/C (nur aiee / Variante A) ============
   Ein Programm, drei Durchführungsformen. Karten adaptieren hell/dunkel über
   die Theme-Tokens (--text/--muted/--ember/--line/--panel). Stufe C ist bewusst
   gedämpft (.tier--muted): sichtbar, aber ohne Buchungs-CTA und optisch zurück-
   genommen — nicht als Angebot an deutsche Besucher gerahmt. */
.tiers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);
  margin:clamp(24px,3vw,38px) 0 0;align-items:stretch;
}
@media (max-width:820px){ .tiers{grid-template-columns:1fr;max-width:34rem;} }
.tier{
  display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,28px);border-radius:14px;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  border:1px solid var(--line);
}
.tier--lead{
  border-color:color-mix(in srgb,var(--ember) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ember) 22%,transparent);
}
.tier--muted{ opacity:.72;border-style:dashed;background:transparent; }
.tier__badge{
  margin:0 0 12px;align-self:flex-start;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ember);padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--ember) 14%,transparent);
}
.tier__badge--soon{ color:var(--muted);background:color-mix(in srgb,var(--muted) 12%,transparent); }
.tier__badge--quiet{ color:var(--faint);background:transparent;border:1px solid var(--line); }
.tier__name{ margin:0;font-weight:500;color:var(--text);font-size:clamp(20px,2.3vw,26px);letter-spacing:.005em; }
.tier__sub{ margin:2px 0 0;font-weight:300;color:var(--muted);font-size:clamp(13px,1.5vw,15px); }
.tier__fig{ margin:clamp(14px,1.8vw,20px) 0 0;font-weight:300;color:var(--text);font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:.004em; }
.tier__unit{ margin:6px 0 0;font-weight:300;color:var(--faint);font-size:clamp(12px,1.3vw,13px);letter-spacing:.02em; }
.tier__list{ list-style:none;margin:clamp(16px,2vw,22px) 0 0;padding:0;display:flex;flex-direction:column;gap:9px; }
.tier__list li{ position:relative;padding-left:20px;font-weight:300;color:var(--muted);font-size:clamp(14px,1.5vw,15px);line-height:1.5; }
.tier__list li::before{ content:"\203A";position:absolute;left:0;top:-1px;color:var(--ember);font-weight:500; }
.tier--muted .tier__list li::before{ color:var(--faint); }
.tier__list li.tier__hl{ color:var(--text);margin-top:3px;padding:11px 14px 11px 32px;border-radius:9px;background:color-mix(in srgb,var(--ember) 8%,transparent);border:1px solid color-mix(in srgb,var(--ember) 22%,transparent); }
.tier__list li.tier__hl::before{ left:14px;top:11px; }
.tier__accent{ color:var(--ember);font-weight:600; }
/* Nur orange, nicht fett — erbt das leichte Listengewicht. */
.tier__accent--plain{ font-weight:inherit; }
.tier__cta{ margin:auto 0 0;padding-top:clamp(16px,2vw,22px); }
.tier__cta a{
  display:inline-block;font-weight:500;font-size:15px;color:var(--sky-top);text-decoration:none;
  background:var(--ember);padding:11px 20px;border-radius:9px;transition:transform .2s var(--ease),background .2s var(--ease);
}
.tier__cta a:hover{ transform:translateY(-2px);background:var(--ember-soft); }
.tier__cta--soft a{ background:transparent;color:var(--ember);border:1px solid color-mix(in srgb,var(--ember) 45%,transparent); }
.tier__cta--soft a:hover{ background:color-mix(in srgb,var(--ember) 12%,transparent); }
.tier__note{ margin:auto 0 0;padding-top:clamp(16px,2vw,22px);font-weight:300;color:var(--faint);font-size:clamp(13px,1.4vw,14px);line-height:1.55; }
/* Platz-Zähler in den Paketen Fix & Flex — kleiner Ember-Punkt + Hinweis, unter dem Preis. */
.tier__seats{ margin:12px 0 0;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:clamp(12px,1.3vw,13px);letter-spacing:.03em;color:var(--ember); }
.tier__seats::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 22%,transparent); }

/* ============ HERO-FAKTEN als 8er-Raster ============
   Acht knappe Punkte statt drei Kennzahlen: kleinere dt, Beschreibung ≤2 Zeilen,
   4 Spalten breit / 2 mittel / 1 mobil. Haarlinie oben wie bei .facts. */
.facts--grid{ grid-template-columns:1fr;gap:clamp(20px,3vw,30px) clamp(26px,4vw,46px);max-width:min(100%,980px); }
@media (min-width:600px){ .facts--grid{grid-template-columns:1fr 1fr;} }
@media (min-width:900px){ .facts--grid{grid-template-columns:repeat(3,1fr);} }
.facts--grid dt{ font-size:clamp(17px,2vw,21px);line-height:1.15;color:var(--ember);font-weight:400;letter-spacing:.004em; }
.facts--grid dd{ margin-top:7px;font-size:clamp(13px,1.4vw,14px);line-height:1.45;max-width:24ch; }

/* ============ NUTZEN-SPALTE in „Was Sie erwartet" ============
   Rechte Spalte je Schritt: „Ihr Nutzen" + max. 2 Stichpunkte. Auf breit als
   dritte Rasterspalte mit Trennlinie, mobil unter der Schrittbeschreibung. */
.steps__intro{ font-weight:300;color:var(--muted);font-size:clamp(15px,1.7vw,18px);line-height:1.6;max-width:62ch;margin:clamp(18px,2.4vw,28px) 0 clamp(30px,4vw,48px); }
.steps__intro--full{ max-width:none; }
.steps--gain{ max-width:min(100%,1000px); }
.steps__gain{ grid-column:2;grid-row:3;margin:14px 0 0;display:flex;flex-direction:column;gap:6px; }
.steps__gain-h{ font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);font-weight:500; }
.steps__gain > span:not(.steps__gain-h){ position:relative;padding-left:17px;font-weight:300;color:var(--muted);font-size:clamp(13px,1.4vw,14px);line-height:1.5; }
.steps__gain > span:not(.steps__gain-h)::before{ content:"\203A";position:absolute;left:0;top:-1px;color:var(--ember);font-weight:500; }
@media (min-width:820px){
  .steps--gain > li{ grid-template-columns:clamp(46px,6vw,72px) minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(24px,3vw,44px); }
  .steps--gain .steps__gain{ grid-column:3;grid-row:2 / -1;align-self:start;margin:0;border-left:1px solid var(--line);padding-left:clamp(18px,2vw,28px); }
}

/* ============ Enthaltene Leistungen — ausklappbar, gilt für alle Varianten ============
   Unter den drei Stufen. Nutzt die FAQ-Mechanik (details.q); Haarlinie oben zur
   Abgrenzung, die Liste .incl steht einspaltig über die volle Breite. */
.incl-fold{ margin:clamp(28px,3.6vw,44px) 0 0;border-top:1px solid var(--line); }
.incl-fold > summary{ padding-top:clamp(18px,2.2vw,24px); }
.incl-fold__all{ color:var(--faint);font-weight:300;font-size:.72em;letter-spacing:.02em; }
.incl-fold .incl{ margin-top:8px; }
/* .incl liegt in einem details.q → .q__body li / li::before (Z. 241–243) greifen mit
   und machen das ::before position:absolute + content:"". Damit verliert die .incl-Grid
   (Spalten 18px 1fr) ihren Markerinhalt, der <span> rutscht in die 18px-Markerspalte →
   Text nur ganz links in schmaler Spalte. Hier die .incl-Regeln spezifischer wiederherstellen. */
.incl-fold .q__body li{ position:static; padding-left:0; margin:0; }
.incl-fold .incl li::before{
  content:"\203A"; position:static; width:auto; height:auto; background:none; opacity:1;
}

/* ============ Fußnote „KI-Server" ============
   Marker: kleiner Ember-Stern hoch; Definition einmalig unten im Preisband. */
.fn{ font-size:.62em;font-weight:600;line-height:0;vertical-align:super; }
.fn a{ color:inherit;text-decoration:none;padding:0 .12em; }
.fn a:hover{ text-decoration:underline; }
.fn-def{ margin:clamp(26px,3.2vw,40px) 0 0;padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line);max-width:none;font-weight:300;color:var(--faint);font-size:clamp(12px,1.3vw,13px);line-height:1.6; }
.fn-def b{ color:var(--muted);font-weight:500; }
.fn-def sup{ color:inherit;font-weight:600;margin-right:.15em; }

/* ============ BESTELL-DIALOG („Platz sichern" / verbindliche Bestellung) ============
   Natives <dialog>: Fokus-Falle, ESC-zu, ::backdrop gratis. Öffnet aus den CTAs der
   Stufen A (Fix) und B (Flex); ohne JS bleibt der #kontakt-Fallback (href). */
dialog.order{
  width:min(660px,calc(100vw - 28px));max-height:calc(100dvh - 40px);
  padding:0;border:1px solid var(--line-strong);border-radius:16px;
  background:var(--panel);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.5);
}
dialog.order::backdrop{ background:rgba(4,5,15,.62); }
.order__head{ display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(22px,3vw,30px) clamp(20px,3vw,32px) 0; }
.order__title{ margin:0;font-weight:300;font-size:clamp(20px,2.6vw,26px);line-height:1.25; }
.order__sub{ margin:6px 0 0;font-size:13px;color:var(--muted);font-weight:300; }
.order__actions{ flex:none;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;justify-content:flex-end; }
/* Sitzt jetzt im Fuß, unten rechts neben dem Bestell-Button (margin-left:auto). */
.order__agb{ margin-left:auto;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--muted);text-decoration:none;
  border:1px solid var(--line-strong);border-radius:9px;padding:9px 12px;line-height:1.2;
  display:inline-flex;align-items:center;transition:border-color .2s var(--ease),color .2s var(--ease); }
.order__agb:hover{ border-color:var(--ember);color:var(--ember); }
.order__x{ flex:none;width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:20px;line-height:1;
  background:transparent;border:1px solid var(--line-strong);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s var(--ease),color .2s var(--ease); }
.order__x:hover{ border-color:var(--ember);color:var(--ember); }
.order__body{ padding:clamp(16px,2.4vw,22px) clamp(20px,3vw,32px) clamp(22px,3vw,30px);overflow:auto; }
.order__grid{ display:grid;gap:14px 18px; }
@media (min-width:560px){ .order__grid{grid-template-columns:1fr 1fr;} .order__grid .col-2{grid-column:1/-1;} }
.field{ display:flex;flex-direction:column;gap:6px;min-width:0; }
.field > label{ font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:500; }
.field > label .req{ color:var(--ember); }
.field input,.field select,.field textarea{ font:inherit;color:var(--text);background:var(--sky-top);
  border:1px solid var(--line-strong);border-radius:9px;padding:11px 13px;width:100%;
  transition:border-color .2s var(--ease); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--ember); }
.field input:invalid:not(:placeholder-shown),.field select:invalid{ border-color:color-mix(in srgb,var(--ember) 55%,var(--line-strong)); }
.field textarea{ min-height:82px;resize:vertical; }
.field .hint{ font-size:12px;color:var(--muted);font-weight:300; }
.order__consent{ display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13px;color:var(--muted);line-height:1.55;font-weight:300; }
.order__consent input{ margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--ember); }
.order__consent a{ color:var(--ember); }
.order__foot{ display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:20px; }
.order__submit{ font:inherit;font-weight:500;color:#fff;background:var(--ember);border:0;border-radius:9px;
  padding:13px 26px;cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease); }
.order__submit:hover{ transform:translateY(-2px);background:var(--ember-soft); }
.order__submit:disabled{ opacity:.55;cursor:progress;transform:none; }
.order__msg{ font-size:13px;line-height:1.55;font-weight:300; }
.order__msg[data-state="error"]{ color:var(--ember-soft); }
.order__hp{ position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden; }

/* Zitat-Band (Musashi) — schlanke Zäsur zwischen Hero und Programm. */
.creed .wrap{ padding-block:clamp(52px,8vw,104px); }
.creed__fig{ margin:0;max-width:780px; }
.creed__quote{ margin:0;font-weight:300;font-size:clamp(24px,3.6vw,40px);line-height:1.28;letter-spacing:-.01em;color:var(--text); }
.creed__cite{ margin-top:clamp(16px,2vw,26px);font-size:clamp(12px,1.4vw,14px);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--faint); }
.creed__cite cite{ font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted); }