/* 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);}
/* Hervorhebung MITTEN im Fließtext eines .incl-Punkts. Ohne das erbt sie das
   display:block der Punkt-Überschrift und reißt die Zeile auf (Owner 2026-09-02). */
.incl b.inl{display:inline;margin:0;}

/* 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;}
/* Hervorgehobener Link im FAQ-Text (Owner 2026-09-02: cert.aiee.eu soll ins Auge fallen).
   Ember + Medium statt Unterstreichung — dieselbe Sprache wie die übrigen Akzente. */
.q__body a.strong{color:var(--ember);font-weight:500;}

/* Vorbehalt im Fuß (Owner 2026-09-02: „klar und deutlich"). Bewusst NICHT im Format von
   .ai-note (11px, --faint) — das ist die Zeile, die man überliest. Gleiche Größe wie die
   Copyline, aber in --muted und ohne Versalien, damit sie als Aussage gelesen wird und
   nicht als Ornament. Steht in _inc/footer-de|en.php, gilt damit für Dach, Workshop und
   Programm gleichzeitig. */
.reservation{margin-top:14px;font-size:12px;line-height:1.6;color:var(--muted);max-width:60ch;}
.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 (Login + LinkedIn + 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;}

/* Beschriftung, die beim Hover nach LINKS aus dem Knopf faehrt (Owner 2026-09-11).
   Ein Piktogramm ist nicht fuer jeden selbsterklaerend; das Wort kostet nichts,
   solange es nur bei Maus-Hover erscheint.
   NUR @media (hover:hover) — auf Touch gibt es kein Hover: das Wort waere dort
   entweder unerreichbar oder es blitzte bei jeder Beruehrung auf. Deshalb wird es
   dort gar nicht erst angelegt. Der Zugang bleibt ueber das aria-label des Knopfes. */
.cfab__lbl{display:none;}
@media (hover:hover) and (pointer:fine){
  .cfab__btn{position:relative;}
  .cfab__lbl{
    display:block;
    position:absolute;top:50%;right:calc(100% + 8px);
    padding:11px 14px;white-space:nowrap;line-height:1;
    font-size:clamp(13px,1.4vw,15px);font-weight:400;letter-spacing:.01em;
    background:var(--sky-low);border:1px solid var(--ember);color:var(--ember);
    box-shadow:0 10px 26px rgba(0,0,0,.4);
    /* translateY(-50%) haelt die Mitte, translateX ist die Bewegung — beides in
       EINEM transform, sonst faellt die Zentrierung beim Hover weg. */
    opacity:0;transform:translate(12px,-50%);pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease),
               background .3s var(--ease),color .3s var(--ease);
  }
  .cfab__btn:hover .cfab__lbl,
  .cfab__btn:focus-visible .cfab__lbl{
    opacity:1;transform:translate(0,-50%);background:var(--ember);color:var(--sky-top);
  }
}
@media (prefers-reduced-motion:reduce){
  .cfab__lbl{transition-duration:.01ms;}
}

/* ============ FÖRDER-SCHALTER ============
   Zwei Aktivierungsschalter (KOMPASS/DE, Skills-Scheck/AT), gegenseitig exklusiv.
   Bewusst KEIN "Listenpreis"-Schalter: beide aus = Listenpreis. Ist einer an,
   zeigen Rigel/Vega den Eigenanteil und der CTA wird zur ANFRAGE — Förderprogramme
   verlangen die Bewilligung VOR jeder verbindlichen Buchung. */
/* Kompakt gehalten (Owner 2026-08-26): nur Schalter + eine Kurzzeile. Die ausführliche
   Erklärung steht im Anfrage-Dialog, nicht hier. */
.fund{ margin:clamp(18px,2.2vw,26px) 0 0;padding:clamp(12px,1.4vw,15px) clamp(14px,1.7vw,18px);
  border:1px solid color-mix(in srgb,var(--ember) 26%,var(--line));border-radius:14px;
  background:color-mix(in srgb,var(--ember) 5%,transparent); }
.fund__lead{ margin:0 0 10px;font-weight:300;color:var(--muted);font-size:clamp(13px,1.4vw,14px);line-height:1.45; }
.fund__row{ display:flex;flex-wrap:wrap;gap:10px 26px; }
.fund__sw{ display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none; }
.fund__sw input{ position:absolute;opacity:0;width:1px;height:1px; }
.fund__track{ position:relative;flex:none;width:44px;height:24px;border-radius:999px;
  background:color-mix(in srgb,var(--muted) 26%,transparent);border:1px solid var(--line);
  transition:background .2s var(--ease),border-color .2s var(--ease); }
.fund__knob{ position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s var(--ease); }
.fund__sw input:checked+.fund__track{ background:var(--ember);border-color:var(--ember); }
.fund__sw input:checked+.fund__track .fund__knob{ transform:translateX(20px); }
.fund__sw input:focus-visible+.fund__track{ outline:2px solid var(--ember);outline-offset:3px; }
.fund__txt{ display:flex;flex-direction:column;gap:1px;line-height:1.3; }
.fund__name{ font-weight:500;color:var(--text);font-size:clamp(14px,1.5vw,15px); }
.fund__meta{ font-weight:300;color:var(--faint);font-size:clamp(12px,1.25vw,12.5px); }
.fund__note{ margin:10px 0 0;font-weight:300;color:var(--muted);font-size:clamp(12px,1.3vw,13px);line-height:1.5; }
.fund__note b{ color:var(--text);font-weight:500; }
.fund__note a{ color:var(--ember);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent); }
.fund__note a:hover{ border-bottom-color:var(--ember); }

/* Eigenanteil in der Karte: Listenpreis bleibt sichtbar (durchgestrichen, gedämpft),
   der Eigenanteil tritt in Ember hervor. Förderung ist KEIN Rabatt — der Listenpreis
   verschwindet deshalb nie. */
.tier__fig--struck{ color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px;
  font-size:clamp(20px,2.2vw,26px); }
.tier__own{ margin:10px 0 0;font-weight:300;color:var(--muted);font-size:clamp(13px,1.4vw,14px);line-height:1.45; }
.tier__own b{ display:block;margin-top:1px;font-weight:600;color:var(--ember);
  font-size:clamp(24px,2.9vw,34px);line-height:1.08;letter-spacing:.004em; }
.tier__own-note{ display:block;margin-top:5px;color:var(--faint);font-size:clamp(11px,1.2vw,12px);line-height:1.45; }
.tier__own--no{ color:var(--faint); }
.tier__own--no b{ display:inline;margin:0;font-size:inherit;line-height:inherit;color:var(--muted);font-weight:500; }

/* ============ 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); }
/* Zielgruppe direkt unter dem Kartentitel, in der Markenfarbe (Owner 2026-08-30):
   wer die Karte anschaut, soll in einer Zeile lesen, ob er gemeint ist. */
.tier__aud{ margin:7px 0 0;font-weight:500;color:var(--ember);
  font-size:clamp(13px,1.45vw,15px);line-height:1.45; }
.tier__aud + .tier__sub{ margin-top:9px; }
.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 Rigel & Vega — 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; }
/* Link im Rasterpunkt (bisher nur der EU-AI-Act-Punkt, seit 2026-08-28 der sechste):
   gleiche Optik wie in .actnote, damit der Verweis nicht als Fremdkörper im Raster sitzt. */
.facts--grid dd a{ color:var(--ember);text-decoration:none;white-space:nowrap;border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent); }
.facts--grid dd a:hover{ border-bottom-color:var(--ember); }

/* ============ 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;
}
/* PDF-Verweis am Fuß des Leistungs-Ausklappers (Teilnahmebedingungen). Optik wie
   .price__doc, nur innerhalb des Ausklappers eingerückt. */
.incl__doc{ margin:clamp(14px,1.8vw,20px) 0 0;font-weight:300;font-size:clamp(14px,1.6vw,16px); }
.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); }

/* ============ 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; }

/* ============ ROLLEN-SCHALTER („Was passt zu Ihnen?") ============
   Drei Arbeitsweisen, EIN Block statt drei Seitenvarianten — der Rest der Seite bleibt
   stabil, nur Empfehlung und Begründung tauschen. Pflegeaufwand: drei kurze Texte.
   Beschriftet wird der Arbeitsalltag, nicht der Titel (niemand klickt „Leitender
   Angestellter"). Ohne JS stehen alle drei Panels untereinander (noscript im Kopf). */
.role{ margin:clamp(26px,3.4vw,42px) 0 0; }
.role__lead{ margin:clamp(16px,2vw,24px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(15px,1.7vw,18px);line-height:1.6;max-width:62ch; }
.role__row{ display:flex;flex-wrap:wrap;gap:10px; }
.role__sw{ cursor:pointer;-webkit-user-select:none;user-select:none; }
.role__sw input{ position:absolute;opacity:0;width:1px;height:1px; }
.role__pill{
  display:inline-block;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 55%,transparent);
  font-weight:300;color:var(--muted);font-size:clamp(13.5px,1.5vw,15px);line-height:1.3;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.role__sw:hover .role__pill{ color:var(--text);border-color:color-mix(in srgb,var(--ember) 40%,var(--line)); }
.role__sw input:checked+.role__pill{
  color:var(--text);font-weight:500;
  border-color:color-mix(in srgb,var(--ember) 60%,transparent);
  background:color-mix(in srgb,var(--ember) 10%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ember) 22%,transparent);
}
.role__sw input:focus-visible+.role__pill{ outline:2px solid var(--ember);outline-offset:3px; }
.role__panel{
  margin:clamp(20px,2.6vw,30px) 0 0;
  padding:clamp(20px,2.6vw,30px);border-radius:14px;
  border:1px solid var(--line);border-left:2px solid var(--ember);
  background:color-mix(in srgb,var(--panel) 45%,transparent);
  max-width:74ch;
}
.role__who{ margin:0;font-weight:300;color:var(--faint);font-size:clamp(13px,1.4vw,14px);line-height:1.6; }
.role__pick{ margin:clamp(12px,1.6vw,18px) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-size:clamp(17px,2vw,22px);font-weight:300;color:var(--text);line-height:1.3; }
.role__pick b{ font-weight:500; }
.role__tag{ flex:none;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); }
.role__why{ margin:clamp(12px,1.5vw,16px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(14px,1.55vw,16px);line-height:1.65; }
.role__why b{ color:var(--text);font-weight:500; }
.role__alt{ margin:clamp(14px,1.8vw,20px) 0 0;padding-top:clamp(12px,1.6vw,16px);
  border-top:1px solid var(--line);font-weight:300;color:var(--faint);
  font-size:clamp(13px,1.4vw,14.5px);line-height:1.6; }
.role__alt b{ color:var(--muted);font-weight:500; }
.role__cta{ margin:clamp(16px,2vw,22px) 0 0;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center; }
.role__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);
}
.role__cta a:hover{ transform:translateY(-2px);background:var(--ember-soft); }
.role__cta a.role__cta--soft{ background:transparent;color:var(--ember);
  border:1px solid color-mix(in srgb,var(--ember) 45%,transparent); }
.role__cta a.role__cta--soft:hover{ background:color-mix(in srgb,var(--ember) 12%,transparent); }

/* ============ EINSTIEG: INTENSIV-WORKSHOP ============
   Eigener Panel-Block UNTER den drei Programm-Stufen: das Programm ist das Angebot,
   der Workshop der Einstieg. Voran gestellt zöge er den Preisanker auf 890 €.
   Die beiden Preiskarten recyceln .tier (schmale Variante, ohne Leistungsliste —
   die gilt für beide gleich und steht darunter einmal). */
.entry{
  margin:clamp(30px,4vw,48px) 0 0;
  padding:clamp(22px,2.8vw,32px);border-radius:14px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 40%,transparent);
}
.entry__eyebrow{ margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--ember); }
.entry__title{ margin:8px 0 0;font-weight:400;color:var(--text);
  font-size:clamp(21px,2.5vw,28px);letter-spacing:.005em;line-height:1.2; }
.entry__lead{ margin:clamp(12px,1.6vw,16px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(14px,1.55vw,16px);line-height:1.65;max-width:70ch; }
.entry__lead b{ color:var(--text);font-weight:500; }
/* Owner 2026-09-02: die beiden Preiskarten stehen genau so breit wie die
   Leistungsliste (.entry__list) darunter — deshalb ab 760px KEINE eigene max-width. */
.tiers--pair{ grid-template-columns:repeat(2,1fr);max-width:44rem;margin-top:clamp(18px,2.4vw,26px); }
@media (min-width:821px){ .tiers--pair{max-width:none;gap:26px;} }
@media (max-width:820px){ .tiers--pair{grid-template-columns:1fr;max-width:34rem;} }
.tier--slim{ padding:clamp(16px,2vw,22px); }
.tier--slim .tier__fig{ margin-top:clamp(8px,1.2vw,12px);font-size:clamp(24px,2.8vw,32px); }
.tier--slim .tier__sub{ margin-top:10px; }
.entry__list{ list-style:none;margin:clamp(20px,2.4vw,26px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:9px;max-width:70ch; }
@media (min-width:760px){ .entry__list{grid-template-columns:1fr 1fr;gap:9px 26px;max-width:none;} }
.entry__list li{ position:relative;padding-left:20px;font-weight:300;color:var(--muted);
  font-size:clamp(13.5px,1.45vw,14.5px);line-height:1.55; }
.entry__list li::before{ content:"\203A";position:absolute;left:0;top:-1px;color:var(--ember);font-weight:500; }
.entry__list b{ color:var(--text);font-weight:500; }
.entry__note{ margin:clamp(18px,2.2vw,24px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(13px,1.4vw,14px);line-height:1.6;max-width:74ch; }
.entry__note b{ color:var(--text);font-weight:500; }
.entry__note--quiet{ margin-top:10px;color:var(--faint); }
.entry__note--quiet b{ color:var(--muted); }
.entry__note a{ color:var(--ember);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent); }
.entry__note a:hover{ border-bottom-color:var(--ember); }

/* EU-AI-Act-Hinweis unter den Programm-Zahlen. Nüchterner Merkkasten, kein Alarm-Look:
   die Aussage ist „wir liefern die Dokumentation", nicht „sonst droht ein Bußgeld". */
.actnote{
  margin:clamp(28px,3.6vw,44px) 0 0;
  padding:clamp(13px,1.7vw,18px) clamp(15px,2vw,22px);
  border:1px solid var(--line);border-left:2px solid var(--ember);border-radius:2px;
  max-width:78ch;font-weight:300;color:var(--muted);
  font-size:clamp(13px,1.5vw,15px);line-height:1.65;
}
.actnote b{ color:var(--text);font-weight:500; }
.actnote a{ color:var(--ember);text-decoration:none;white-space:nowrap;border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent); }
.actnote a:hover{ border-bottom-color:var(--ember); }

/* ============ BESTELL-DIALOG („Platz sichern" / verbindliche Bestellung) ============
   Natives <dialog>: Fokus-Falle, ESC-zu, ::backdrop gratis. Öffnet aus den CTAs der
   Stufen A (Rigel) und B (Vega); 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); }

/* Aufklapp-Schalter im Bestellformular (Owner 2026-09-03): zwei Kästchen nebeneinander,
   darunter erscheinen die optionalen Blöcke. Auf schmalen Geräten untereinander — zwei
   Beschriftungen dieser Länge passen nebeneinander sonst nicht. */
.order__toggles{ display:flex;flex-wrap:wrap;gap:10px 28px;margin:2px 0 2px; }
.order__toggle{ display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);
  line-height:1.4;font-weight:400;cursor:pointer; }
.order__toggle input{ flex:none;width:15px;height:15px;accent-color:var(--ember);cursor:pointer; }
@media (max-width:560px){ .order__toggles{ flex-direction:column;gap:10px; } }
.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); }

/* Anfrage-Modus des Bestell-Dialogs: erklärender Hinweis über dem Formular.
   Sichtbar nur, wenn ein Förder-Schalter aktiv war (JS setzt data-mode="anfrage"). */
.order__fund{ margin:0 0 18px;padding:14px 16px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--ember) 30%,var(--line));
  background:color-mix(in srgb,var(--ember) 6%,transparent);
  font-size:13px;line-height:1.6;font-weight:300;color:var(--muted); }
.order__fund b{ color:var(--text);font-weight:500; }
.order__fund a{ color:var(--ember); }
.order__fund p{ margin:0; }
.order__fund p+p{ margin-top:9px; }

/* ============ DACH: GABELUNG, SPRUNGMARKE, GESCHWISTER-VERWEIS (ab 2026-08-28) ============
   aiee.eu/ ist seit dem Umbau das Angebots-Dach: Hero, Gabelung, Anspruch, Person,
   gemeinsame Fragen. Die drei Bausteine hier gibt es nur dort bzw. am Fuß der
   Produktseiten — sie recyceln bewusst .tier statt eigener Karten-Optik, damit die
   Gabelung wie die Preiskarten der Produktseiten aussieht (ein System, kein zweites). */

/* Zwei gleichrangige Karten statt drei Stufen. Breiter und luftiger als .tiers, weil
   hier nur ZWEI stehen und jede vier Zeilen trägt: bei 3-Spalten-Breite wirkten sie
   wie ein abgeschnittenes Trio. */
/* LINKSBÜNDIG (Owner 2026-08-30): zentriert saß das Kartenpaar 112px weiter innen als
   Eyebrow und Fließtext darüber — die Kante darunter „biss sich". Die Textspalte des
   Abschnitts ist jetzt durchgehend 56rem: Lead-Absatz und Karten beginnen und enden
   an derselben Linie. Nicht wieder auf `auto` stellen. */
.tiers--fork{ grid-template-columns:repeat(2,1fr);max-width:56rem;margin-left:0;margin-right:0;
  margin-top:clamp(28px,3.4vw,42px); }
@media (max-width:820px){ .tiers--fork{grid-template-columns:1fr;max-width:34rem;} }
.tiers--fork .tier{ padding:clamp(24px,2.8vw,34px); }
.tiers--fork .tier__fig{ margin-top:clamp(10px,1.4vw,14px); }

/* Sprungmarke im Hero auf die Gabelung. Kein Knopf: der Hero hat schon den Störer,
   ein zweiter Vollton-CTA machte zwei konkurrierende Aktionen daraus. */
.hero__jump{ margin:clamp(20px,2.6vw,30px) 0 0;font-weight:300;font-size:clamp(14px,1.5vw,16px); }
.hero__jump a{ color:var(--ember);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--ember) 40%,transparent);
  padding-bottom:2px;transition:border-color .2s var(--ease); }
.hero__jump a:hover{ border-bottom-color:var(--ember); }
.hero__jump a::after{ content:" \2193";letter-spacing:.04em; }

/* Geschwister-Verweis am Fuß jeder Produktseite (_inc/sibling.php). Bewusst RUHIG:
   er ist der Rückweg für den, der auf der falschen Seite gelandet ist — keine
   Zweitwerbung. Deshalb kein Vollton-Knopf, keine Zahlen, kein Preis. */
.sibling{ margin:clamp(34px,4.5vw,56px) auto 0;max-width:60rem;
  padding:clamp(20px,2.4vw,28px);border-radius:14px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 32%,transparent);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,26px);justify-content:space-between; }
.sibling__text{ margin:0;font-weight:300;color:var(--muted);
  font-size:clamp(14px,1.5vw,16px);line-height:1.6;max-width:56ch; }
.sibling__text b{ color:var(--text);font-weight:500; }
.sibling__cta{ margin:0;flex:0 0 auto; }
.sibling__cta a{ display:inline-block;font-weight:500;font-size:15px;color:var(--ember);
  text-decoration:none;padding:10px 18px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--ember) 45%,transparent);
  transition:background .2s var(--ease); }
.sibling__cta a:hover{ background:color-mix(in srgb,var(--ember) 12%,transparent); }

/* Rückweg aufs Dach in der Eyebrow der Produktseiten. Bewusst dezent — er ist die
   Orientierung („ich bin hier unten"), nicht die Hauptaktion. Ohne diese Regel erbt
   der Link die Standard-Linkfarbe und schreit lauter als die Überschrift darunter. */
.eyebrow a{ color:inherit;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent);
  transition:border-color .2s var(--ease),color .2s var(--ease); }
.eyebrow a:hover{ color:var(--ember);border-bottom-color:var(--ember); }

/* ============ COACHES (Owner 2026-09-08) ============
   Zwei Kacheln auf `/workshop/` und `/programm/` (Partial `_inc/coaches-*.php`): wer im
   Raum steht. Das Dach traegt weiter den langen Text von Michael Mai als Initiator, mit
   seinem FARBIGEN Hochformat — hier stehen beide quadratisch und schwarzweiss, weil sie
   nur so als Paar lesen. Der Graustufen-Filter bleibt auch beim Hover: Tillmanns Datei ist
   echtes Graustufen-JPEG, Michaels RGB — ein Farb-Hover faerbte genau eine von zwei.
   `1fr` statt einer festen Maximalbreite, damit die beiden Kacheln die Textspalte teilen. */
.coaches{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(28px,4vw,56px);margin:clamp(26px,3.4vw,40px) 0 0; }
.coach{ display:grid;grid-template-columns:minmax(0,104px) 1fr;
  gap:clamp(16px,2vw,24px);align-items:start; }
.coach img{ width:100%;height:auto;display:block;border:1px solid var(--line);
  filter:grayscale(1) contrast(1.06) brightness(.96); }
.coach__name{ margin:0;font-weight:500;color:var(--text);font-size:16px;line-height:1.35; }
.coach__name span{ display:block;font-weight:300;color:var(--faint);font-size:13px;
  letter-spacing:.02em;margin-top:3px; }
.coach__bio{ margin:10px 0 0;font-weight:300;color:var(--muted);
  font-size:14.5px;line-height:1.6; }
@media(max-width:520px){
  .coach{ grid-template-columns:1fr; }
  .coach img{ max-width:132px; }
}

/* ============ KI-PROJEKT-SELBSTCHECK (ab 2026-09-09) ============
   Bogen, Ergebnis und Druckansicht der Seiten /selbstcheck/ und /en/selfcheck/.
   Erfindet — wie der Rest dieser Datei — keine eigenen Farben und keine eigene
   Schrift: alles zieht aus den Tokens von istarium.css.

   ZWEI BESONDERHEITEN, die kein anderer Block hier hat:

   1) KEIN .reveal. Die Selbstcheck-Seite laeuft ohne JavaScript, und .reveal setzt
      opacity:0, bis eine IntersectionObserver-Schleife die Klasse `is-in` nachtraegt.
      Ohne das Skript bliebe die halbe Seite unsichtbar. Wer hier .reveal ergaenzt,
      macht die Seite fuer jeden ohne JS leer.

   2) EINE DRUCKANSICHT (@media print, ganz unten). Sie ist kein Extra, sondern der
      ERSATZ fuer das frueher versprochene „ausgefuellter Bogen per Mail": das
      persoenliche Ergebnis bleibt auf dem Schirm und geht von dort aufs Papier oder
      ins Datei-PDF. So bleibt die Zusage „Ihre Antworten speichern wir nicht"
      (leadstrecke.md § 7.3) woertlich wahr.
   ================================================================ */

/* Der Hero traegt hier Vorspann statt Marke: kleinere Kopfzeile, engere Spalte. */
.sc-hero__h{ margin:0;font-weight:300;color:var(--text);
  font-size:clamp(30px,5.4vw,60px);line-height:1.08;letter-spacing:-.01em; }
.sc-hero__sub{ margin:clamp(14px,1.8vw,20px) 0 0;font-weight:300;color:var(--ember-soft);
  font-size:clamp(17px,2.2vw,24px);line-height:1.35;max-width:34ch; }
.sc-hero__p{ margin:clamp(18px,2.4vw,28px) 0 0;max-width:56ch; }

/* ---- Der Bogen ---- */
.sc-form{ display:block; }

.sc-vorhaben-field{ max-width:56rem;margin:0 0 clamp(34px,4.4vw,56px); }
.sc-vorhaben-field label{ display:block;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:8px; }
.sc-vorhaben-field input{ font:inherit;color:var(--text);background:var(--sky-top);
  border:1px solid var(--line-strong);border-radius:9px;padding:13px 15px;width:100%;
  font-size:clamp(15px,1.7vw,18px);transition:border-color .2s var(--ease); }
.sc-vorhaben-field input:focus{ outline:none;border-color:var(--ember); }
.sc-hint{ margin:9px 0 0;font-weight:300;color:var(--faint);
  font-size:clamp(12.5px,1.35vw,13.5px);line-height:1.6;max-width:60ch; }

.sc-part{ margin:0 0 clamp(10px,1.4vw,14px);font-weight:300;color:var(--text);
  font-size:clamp(22px,3.2vw,34px);line-height:1.2;letter-spacing:-.005em; }
.sc-part__lead{ margin:0 0 clamp(20px,2.6vw,30px);font-weight:300;color:var(--muted);
  font-size:clamp(15px,1.7vw,18px);line-height:1.65;max-width:62ch; }
.sc-part__lead b{ color:var(--text);font-weight:500; }
/* Der Merksatz „ein Wunsch mit einer Einheit dran" — Zaesur, kein Fliesstext. */
.sc-part__quote{ margin:0 0 clamp(20px,2.6vw,30px);padding-left:clamp(14px,1.8vw,20px);
  border-left:2px solid color-mix(in srgb,var(--ember) 55%,transparent);
  font-weight:300;font-style:italic;color:var(--muted);
  font-size:clamp(15px,1.7vw,18px);line-height:1.6;max-width:58ch; }

/* Eine Frage. <fieldset> ohne UA-Rahmen: die Gruppierung braucht der Screenreader,
   die Optik traegt die Haarlinie oben. */
.sc-q{ border:0;border-top:1px solid var(--line);margin:0;padding:clamp(22px,2.8vw,32px) 0 0;
  max-width:62rem; }
.sc-q + .sc-q{ margin-top:clamp(22px,2.8vw,32px); }
.sc-q__head{ display:flex;align-items:baseline;gap:clamp(10px,1.4vw,16px);padding:0; }
.sc-q__no{ flex:none;font-weight:300;color:var(--ember);font-size:clamp(20px,2.6vw,28px);
  line-height:1;font-variant-numeric:tabular-nums; }
.sc-q__marke{ font-weight:500;color:var(--text);font-size:clamp(17px,2vw,22px);
  line-height:1.25;letter-spacing:.004em; }
.sc-q__ask{ margin:clamp(10px,1.3vw,14px) 0 0;font-weight:400;color:var(--text);
  font-size:clamp(15.5px,1.8vw,19px);line-height:1.5;max-width:58ch; }
.sc-q__hint{ margin:7px 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(13.5px,1.5vw,15px);line-height:1.6;max-width:60ch; }
.sc-q__hint b{ color:var(--text);font-weight:500; }

/* Antwortoptionen: eigene Pillen statt UA-Radios, damit die Trefferflaeche gross
   genug ist. Der echte Radio-Knopf bleibt sichtbar — er ist die Zustandsanzeige
   ohne JavaScript, und ein rein per CSS gebauter waere im Kontrastmodus tot. */
.sc-opts{ display:flex;flex-wrap:wrap;gap:10px;margin:clamp(14px,1.8vw,18px) 0 0; }
.sc-opt{ display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:11px 16px;border-radius:11px;border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--sky-top) 55%,transparent);
  max-width:min(100%,34ch);
  transition:border-color .2s var(--ease),background .2s var(--ease); }
.sc-opt:hover{ border-color:color-mix(in srgb,var(--ember) 55%,var(--line-strong)); }
.sc-opt input{ flex:none;margin-top:2px;width:16px;height:16px;accent-color:var(--ember); }
.sc-opt__lbl{ font-weight:300;color:var(--muted);font-size:clamp(13.5px,1.5vw,15px);
  line-height:1.45; }
.sc-opt:has(input:checked){ border-color:var(--ember);
  background:color-mix(in srgb,var(--ember) 10%,transparent); }
.sc-opt:has(input:checked) .sc-opt__lbl{ color:var(--text);font-weight:400; }
.sc-opt:has(input:focus-visible){ outline:2px solid var(--ember);outline-offset:3px; }

/* Fussnoten des Bogens (Faktor 2, die vier Zahlen). */
.sc-foot{ margin:clamp(18px,2.2vw,26px) 0 0;font-weight:300;color:var(--faint);
  font-size:clamp(13px,1.4vw,14.5px);line-height:1.65;max-width:62ch; }
.sc-foot b{ color:var(--muted);font-weight:500; }

.sc-submit{ margin:clamp(34px,4.4vw,56px) 0 0; }
.sc-submit__btn{ font:inherit;font-weight:500;color:#fff;background:var(--ember);border:0;
  border-radius:10px;padding:15px 30px;cursor:pointer;font-size:clamp(15px,1.6vw,17px);
  transition:transform .2s var(--ease),background .2s var(--ease); }
.sc-submit__btn:hover{ transform:translateY(-2px);background:var(--ember-soft); }
.sc-submit__note{ margin:12px 0 0;font-weight:300;color:var(--faint);
  font-size:clamp(12.5px,1.35vw,13.5px);line-height:1.6;max-width:56ch; }

/* ---- Das Ergebnis ---- */
.sc-score{ margin:0 0 clamp(22px,2.8vw,32px); }
.sc-score__fig{ margin:0;font-weight:300;color:var(--text);
  font-size:clamp(30px,5vw,54px);line-height:1;letter-spacing:.004em; }
.sc-score__fig b{ color:var(--ember);font-weight:400; }
.sc-score__split{ margin:12px 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(13.5px,1.5vw,15px);letter-spacing:.02em; }
.sc-score__split b{ color:var(--text);font-weight:500; }

/* Das zurueckgespiegelte Vorhaben. Es kommt AUS DEM REQUEST und geht nirgendwo
   hin — deshalb steht es hier gross und ohne Formularfeld drumherum. */
.sc-vorhaben{ margin:0 0 clamp(26px,3.4vw,40px);padding:clamp(18px,2.2vw,26px);
  border-left:2px solid var(--ember);border-radius:0 12px 12px 0;
  background:color-mix(in srgb,var(--panel) 34%,transparent);max-width:60rem; }
.sc-vorhaben figcaption{ font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);font-weight:500; }
.sc-vorhaben blockquote{ margin:10px 0 0;font-weight:300;color:var(--text);
  font-size:clamp(17px,2.2vw,23px);line-height:1.45; }
.sc-vorhaben--leer{ font-weight:300;color:var(--muted);
  font-size:clamp(14px,1.6vw,16px);line-height:1.65; }

.sc-band__h{ margin:0;font-weight:300;color:var(--text);
  font-size:clamp(24px,3.8vw,40px);line-height:1.15;letter-spacing:-.006em;max-width:24ch; }
.sc-band__range{ display:block;font-weight:500;color:var(--ember);
  font-size:clamp(12px,1.4vw,14px);letter-spacing:.16em;margin-bottom:10px; }
.sc-band__text{ margin:clamp(16px,2vw,24px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(15.5px,1.8vw,19px);line-height:1.7;max-width:62ch; }

/* Der persoenliche Teil: was als Naechstes traegt. Ruhig gehalten — er benennt,
   er mahnt nicht. */
.sc-next{ margin:clamp(30px,4vw,46px) 0 0;padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--panel) 28%,transparent);max-width:60rem; }
.sc-next__h{ margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);font-weight:500; }
.sc-next__h ~ .sc-next__h{ margin-top:clamp(22px,2.6vw,30px); }
.sc-next__lead{ margin:9px 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(14px,1.6vw,16px);line-height:1.65;max-width:58ch; }
.sc-next__list{ list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px; }
.sc-next__list li{ font-weight:300;color:var(--text);
  font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.5;padding-left:1px; }
.sc-next__list li b{ color:var(--ember);font-weight:400;
  font-variant-numeric:tabular-nums;margin-right:2px; }
.sc-next__part{ color:var(--faint);font-size:.86em; }
.sc-next__note{ margin:14px 0 0;font-weight:300;color:var(--faint);
  font-size:clamp(13px,1.4vw,14.5px);line-height:1.65;max-width:60ch; }
.sc-next__note b{ color:var(--muted);font-weight:500; }

.sc-keep{ margin:clamp(26px,3.4vw,40px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(15px,1.7vw,17.5px);line-height:1.65;max-width:58ch;font-style:italic; }

.sc-actions{ margin:clamp(24px,3vw,34px) 0 0;display:flex;flex-wrap:wrap;gap:12px 16px; }
.sc-actions__link{ display:inline-block;font-weight:500;font-size:15px;color:var(--ember);
  text-decoration:none;padding:11px 20px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--ember) 45%,transparent);
  transition:background .2s var(--ease); }
.sc-actions__link:hover{ background:color-mix(in srgb,var(--ember) 12%,transparent); }
.sc-actions__link--quiet{ color:var(--muted);border-color:var(--line-strong); }
.sc-actions__link--quiet:hover{ background:color-mix(in srgb,var(--muted) 10%,transparent); }

.sc-printhint{ margin:clamp(16px,2vw,22px) 0 0;font-weight:300;color:var(--faint);
  font-size:clamp(12.5px,1.35vw,13.5px);line-height:1.6;max-width:56ch; }
.sc-printhint b{ color:var(--muted);font-weight:500; }

/* ---- Zustaende nach dem 303 (bestaetigen / bestaetigt / Fehler) ---- */
.sc-note__h{ margin:0;font-weight:300;color:var(--text);
  font-size:clamp(26px,4.2vw,44px);line-height:1.15;letter-spacing:-.006em; }
.sc-note__text{ margin:clamp(16px,2vw,24px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(15.5px,1.8vw,19px);line-height:1.7;max-width:60ch; }
.sc-note__text b{ color:var(--text);font-weight:500; }
.sc-note__text--err{ color:var(--ember-soft); }
.sc-note__dev{ margin:clamp(16px,2vw,22px) 0 0;padding:13px 16px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--ember) 30%,var(--line));
  background:color-mix(in srgb,var(--ember) 6%,transparent);
  font-weight:300;color:var(--muted);font-size:13px;line-height:1.6;max-width:56ch; }
.sc-note__dev b{ color:var(--text);font-weight:500; }
.sc-note__dev code{ font-size:.92em; }

/* ---- Der Kasten fuer die Mailadresse. Steht IMMER unter dem Ergebnis. ---- */
.sc-mail__h{ margin:0;font-weight:300;color:var(--text);
  font-size:clamp(22px,3.2vw,34px);line-height:1.2;letter-spacing:-.005em;max-width:26ch; }
.sc-mail__lead{ margin:clamp(14px,1.8vw,20px) 0 0;font-weight:300;color:var(--muted);
  font-size:clamp(15px,1.7vw,17.5px);line-height:1.7;max-width:58ch; }
.sc-mail__form{ margin:clamp(22px,2.8vw,32px) 0 0;max-width:38rem; }
.sc-mail__row label{ display:block;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:7px; }
.sc-mail__row input{ font:inherit;color:var(--text);background:var(--sky-top);
  border:1px solid var(--line-strong);border-radius:9px;padding:13px 15px;width:100%;
  transition:border-color .2s var(--ease); }
.sc-mail__row input:focus{ outline:none;border-color:var(--ember); }
/* VORAB LEER und bleibt es — die zweite, eigene Einwilligung (§ 7.2). */
.sc-mail__opt{ display:flex;gap:11px;align-items:flex-start;margin:clamp(16px,2vw,20px) 0 0;
  font-weight:300;color:var(--muted);font-size:13.5px;line-height:1.6;cursor:pointer; }
.sc-mail__opt input{ margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--ember); }
.sc-mail__go{ margin:clamp(18px,2.2vw,24px) 0 0; }
.sc-mail__note{ margin:clamp(14px,1.8vw,18px) 0 0;font-weight:300;color:var(--faint);
  font-size:12.5px;line-height:1.65;max-width:52ch; }
.sc-mail__note a{ color:var(--ember); }

/* Honeypot — fuer Menschen unsichtbar, fuer Bots ein Feld wie jedes andere.
   Bewusst NICHT display:none: manche Bots ueberspringen genau das. */
.sc-hp{ position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden; }

/* ============ DRUCKANSICHT ============
   Gedruckt wird GENAU EIN Ding: das Ergebnis. Alles, was auf Papier nichts
   entscheidet — Kopfleiste, Fussbereich, Knoepfe, der Mail-Kasten —, faellt weg.
   Dunkler Grund auf Papier waere eine halbe Druckerpatrone: hier deshalb schwarz
   auf weiss, unabhaengig davon, ob der Leser hell oder dunkel liest.
   Der Bogen selbst (Zustand 1) bleibt druckbar — dann kommt der leere Bogen. */
@media print{
  .topbar,.foot,.cfab,.sc-noprint,.sc-mail,.fn-def{ display:none!important; }
  html,body{ background:#fff!important;color:#111!important; }
  html[data-theme="light"] body,body{ background:#fff!important; }
  .band,.hero{ background:none!important;border:0!important;
    padding-block:0!important;min-height:0!important; }
  .hero__glow,.hero__fog,.hero::after{ display:none!important; }
  .wrap{ max-width:none;padding-inline:0; }
  .sc-result{ padding:0!important; }
  /* Farbige Marken bleiben lesbar, wenn der Drucker Farbe kann; sonst grau. */
  .eyebrow,.sc-band__range,.sc-next__h,.sc-vorhaben figcaption{ color:#b3400f!important; }
  .sc-score__fig,.sc-score__fig b,.sc-band__h,.sc-vorhaben blockquote,
  .sc-next__list li,.sc-next__list li b{ color:#111!important; }
  .sc-band__text,.sc-score__split,.sc-next__lead,.sc-next__note,.sc-keep,
  .sc-vorhaben--leer{ color:#333!important; }
  .sc-vorhaben,.sc-next{ background:none!important;border-color:#bbb!important; }
  .sc-next{ break-inside:avoid; }
  .sc-band__h,.sc-score{ break-after:avoid; }
  a[href]::after{ content:""; }   /* keine ausgedruckten URLs im Ergebnis */
  @page{ margin:18mm 16mm; }
}

/* ============ CONTEXT — Artikelstrecke (2026-09-10) =========================
   Die Klassen `ctx-lead`, `ctx-fig`, `ctx-note`, `ctx-disclaimer` sind der
   TYPOGRAFIE-VERTRAG mit site/_shared/context/: nur was hier (und auf den anderen
   Sites gleichnamig) existiert, darf im Artikeltext vorkommen. Kommt eine Klasse
   dazu, gehoert sie in REGELN.md UND in die CSS jeder Site, sonst bricht ein
   kopierter Artikel drueben auseinander.
   Bewusst KEIN .reveal in diesem Block: Artikel sind Lesestoff und muessen auch
   ohne JavaScript vollstaendig dastehen (KI-Crawler fuehren keins aus). */
/* Kopfleiste im FLUSS statt absolut (nur hier, Klasse kommt aus _inc/topbar.php).
   Ueberall sonst liegt sie ueber dem Hero, der ihr Platz schafft; CONTEXT hat keinen.
   Am Handy bricht die Leiste in zwei Zeilen um, absolut gesetzt landete der erste
   Text darunter. Im Fluss nimmt sie sich ihre Hoehe selbst — egal wie oft sie
   umbricht. Kein fester Offset: der waere beim naechsten Umbruch wieder falsch. */
.topbar--flow{ position:static; }
.ctx__wrap{ padding-block:clamp(56px,8vw,110px);max-width:min(100%,780px); }
.topbar--flow + main .ctx__wrap{ padding-top:clamp(18px,3vw,34px); }
.ctx__h1{
  margin-top:14px;font-size:clamp(34px,5vw,54px);font-weight:300;line-height:1.12;
  letter-spacing:.004em;color:var(--text);
}
.ctx__teaser{ margin-top:18px;font-size:clamp(19px,2.3vw,23px);font-weight:300;line-height:1.55; }
.ctx__meta{ margin-top:22px;font-size:15px;color:var(--muted);letter-spacing:.02em; }
.ctx__body{ margin-top:clamp(34px,5vw,54px); }
.ctx__body > * + *{ margin-top:1.15em; }
.ctx__body h2{
  margin-top:1.9em;font-size:clamp(23px,2.8vw,29px);font-weight:500;line-height:1.25;
  letter-spacing:.004em;
}
.ctx__body h3{ margin-top:1.6em;font-size:clamp(19px,2.2vw,22px);font-weight:500; }
.ctx__body p,.ctx__body li{ font-size:clamp(17px,1.9vw,19px);font-weight:300;line-height:1.68; }
.ctx__body ul,.ctx__body ol{ padding-left:1.3em; }
.ctx__body li + li{ margin-top:.5em; }
.ctx__body a{ color:var(--ember);text-decoration:none;border-bottom:1px solid transparent; }
.ctx__body a:hover{ border-bottom-color:var(--ember); }
.ctx__body b{ font-weight:500; }
.ctx-lead{ font-size:clamp(19px,2.2vw,22px)!important;line-height:1.55!important; }
/* Headerbild: steht zwischen Vorspann und Text, bewusst breiter als die Textspalte
   waere es nicht, sondern genau so breit — die Ruhe der Seite lebt von EINER Kante. */
.ctx-header{ margin:clamp(30px,4.5vw,48px) 0 0; }
/* Dieselbe feine Kante wie bei den Inline-Grafiken. Ohne sie verschwimmt ein dunkles
   Motiv mit dem Seitenhintergrund und das Bild wirkt randlos statt textbreit. */
.ctx-header img{ width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px; }
.ctx-header__cap{ margin-top:8px;font-size:13px;letter-spacing:.02em;color:var(--muted); }
.ctx-header__cap a{ color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line); }
.ctx-header__cap a:hover{ color:var(--ember);border-bottom-color:var(--ember); }
.ctx-fig{ margin:clamp(28px,4vw,44px) 0; }
.ctx-fig img{ width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px; }
/* Klickbar in Originalgroesse: eine Grafik mit Text darin ist auf Spaltenbreite
   unlesbar. Der Link zeigt auf die Bilddatei selbst, ohne JS-Lightbox. */
.ctx-fig__zoom{ display:block;cursor:zoom-in; }
.ctx-fig__zoom:hover img{ border-color:var(--ember); }
.ctx-fig__cap{ margin-top:8px;font-size:13px;letter-spacing:.02em;color:var(--muted); }
.ctx-note,.ctx-disclaimer{
  margin-top:1.6em;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px!important;line-height:1.55!important;color:var(--muted);
}
.ctx-disclaimer b{ color:var(--text); }
.ctx__body blockquote{
  margin-left:0;padding-left:20px;border-left:3px solid var(--ember);
  font-size:clamp(19px,2.2vw,22px);font-weight:300;
}

/* Artikel-Fuss: Teil des RAHMENS, nie des Inhalts. Steht unter jedem Artikel und
   verbindet die Gruppe (Owner 2026-09-10). */
.ctx-foot{
  margin-top:clamp(44px,6vw,72px);padding-top:24px;border-top:1px solid var(--line);
}
.ctx-foot__lead{ font-size:16px;font-weight:300;line-height:1.6;color:var(--muted); }
.ctx-foot__lead b{ color:var(--text);font-weight:500; }
.ctx-foot__links{ margin-top:14px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px; }
.ctx-foot__links a{ font-size:15px;color:var(--ember);text-decoration:none;border-bottom:1px solid transparent; }
.ctx-foot__links a:hover{ border-bottom-color:var(--ember); }
.ctx-foot__ai{ margin-top:14px;font-size:14px;font-weight:300;color:var(--muted); }
.ctx__back{ margin-top:28px; }
.ctx__back a{ color:var(--ember);text-decoration:none;font-weight:500; }

/* Uebersicht. Gelistet wird nur Status 2; Status 1 ist erreichbar, aber nicht hier. */
.ctx-list__mark{ margin:0;font-size:inherit;font-weight:inherit; }
.ctx-list__lead{ margin-top:16px;max-width:62ch; }
.ctx-items{ margin-top:clamp(34px,5vw,54px);padding:0;list-style:none; }
.ctx-item{ padding-block:clamp(22px,3vw,32px);border-top:1px solid var(--line); }
.ctx-item__meta{ font-size:14px;letter-spacing:.02em;color:var(--muted); }
.ctx-item__h{ margin-top:8px;font-size:clamp(22px,2.8vw,28px);font-weight:400;line-height:1.25; }
.ctx-item__h a{ color:var(--ember);text-decoration:none;border-bottom:1px solid transparent; }
.ctx-item__h a:hover{ border-bottom-color:var(--ember); }
.ctx-item__teaser{ margin-top:10px;font-size:17px;font-weight:300;line-height:1.6;color:var(--muted); }

/* ============ TEILNEHMER-LOGIN (2026-09-10) ================================
   Erbt die Mechanik des Bestell-Dialogs (natives <dialog>, Fokus-Falle, ::backdrop)
   und macht daraus eine schmale Karte. Bewusst KEIN eigenes Formular-Layout:
   zwei Dialoge mit zwei Gestaltungen waeren zwei Baustellen.

   Korrektur 2026-09-11: das Formular trug bis hierher .f/.f__lbl/.f__in — Klassen, die es
   in diesem Stylesheet nie gab. Feld und Knopf standen also im Browser-Rohzustand. Jetzt
   liegt dieselbe Vokabel an wie im Bestell-Dialog (.field, .order__submit); dieser Block
   stimmt nur noch die Groessen ab. Keine zweiten Formularregeln anlegen. */
.order--login{ max-width:min(100%,460px); }
.order--login .order__body{ padding-block:clamp(20px,3vw,28px); }
.order--login .order__sub{ max-width:36ch;line-height:1.55; }
/* Ein einziges Feld traegt die ganze Karte — groesser gesetzt als im Bestellformular,
   mit Ziffernabstand, damit eine Teilnehmernummer auch am Telefon ablesbar bleibt. */
.order--login .field > input{ font-size:clamp(16px,2.2vw,18px);padding:14px 15px;
  letter-spacing:.05em;font-variant-numeric:tabular-nums; }
.order--login .order__note{ margin-top:18px;font-size:13px;font-weight:300;line-height:1.6;color:var(--muted);text-align:center; }
.order--login .order__err{ margin-top:10px;font-size:14px;color:var(--ember);font-weight:500; }
.order--login .order__foot{ margin-top:22px;justify-content:flex-start; }
/* Der Knopf ist hier das Ziel der Seite, nicht eine Option unter mehreren: volle Breite
   der Karte, groesser als im Bestell-Dialog. Farbe bleibt --ember, ein System. */
.order--login .order__submit{ width:100%;padding:16px 28px;border-radius:11px;
  font-size:clamp(15px,1.9vw,17px);letter-spacing:.01em; }

/* ============ FOOTER: MARKEN-ZEILE + DOKUMENTE-POPUP (Owner 2026-09-11) ============
   Links unten LINKSBUENDIG in EINER Zeile unter der Firmenzeile, rechts bleiben nur
   noch drei Punkte (AIEE CONTEXT · Kontakt · LinkedIn). Markup in _inc/footer-{de,en}.php.

   Trennzeichen als ::before am FOLGENDEN Punkt, nicht als ::after am vorigen: der
   letzte Punkt ist der Slot fuer den Dokumente-Knopf und bleibt ohne JavaScript
   `hidden` — ein ::after am vorletzten Punkt stuende dann als Waisenkind da.

   li[hidden] muss explizit display:none tragen: die Regel darunter setzt inline-flex
   und schlaegt das display:none des UA-Stylesheets sonst. */
.foot__links{ margin:22px 0 0;padding:0;list-style:none;max-width:none;
  display:flex;flex-wrap:wrap;align-items:baseline;font-size:13px;line-height:1.7;color:var(--faint); }
.foot__links li{ display:inline-flex;align-items:baseline; }
.foot__links li[hidden]{ display:none; }
.foot__links li + li::before{ content:"\\";margin:0 10px;color:var(--line-strong); }
.foot__links a,.foot__linkbtn{ color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);transition:border-color .4s var(--ease),color .4s var(--ease); }
.foot__links a:hover,.foot__linkbtn:hover{ border-bottom-color:var(--ember);color:var(--text); }
/* Der Dokumente-Knopf ist ein <button> (er oeffnet ein <dialog>, er navigiert nicht) und
   muss sich in der Zeile wie die Links daneben lesen. */
.foot__linkbtn{ font:inherit;font-size:inherit;background:none;border:0;
  border-bottom:1px solid var(--line);padding:0;cursor:pointer; }

/* Das Popup selbst — dieselbe Karte wie Bestellung und Login (.order), nur schmaler.
   KEINE zweite Dialog-Familie. Je Dokument eine Zeile, rechts die Sprachfassungen als
   kleine Kaestchen in der Optik von .order__agb. Inhalt kommt aus dl/downloads.php. */
.order--docs{ max-width:min(100%,520px); }
.order--docs .order__body{ padding-block:clamp(18px,2.6vw,24px); }
.docs{ margin:0;padding:0;list-style:none; }
.docs__row{ display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line); }
.docs__row:first-child{ padding-top:0; }
.docs__row:last-child{ border-bottom:0;padding-bottom:0; }
.docs__name{ font-weight:300;font-size:clamp(14px,1.8vw,16px);line-height:1.4;color:var(--text); }
.docs__langs{ flex:none;display:flex;gap:8px; }
/* Die Sprach-Kaestchen sind der EINE orange Akzent der Karte (Owner 2026-09-11) und
   tragen ihn im Ruhezustand, nicht erst im Hover — dieselbe Optik wie .cfab__btn:
   oranger Rand, oranges Label, dunkle Fuellung; beim Hover gefuellt. */
.docs__dl{ font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ember);text-decoration:none;
  background:var(--sky-low);border:1px solid var(--ember);border-radius:9px;padding:8px 12px;line-height:1.2;
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease); }
.docs__dl:hover{ background:var(--ember);color:var(--sky-top); }
.order--docs .order__note{ margin:18px 0 0;font-size:12px;font-weight:300;line-height:1.6;color:var(--faint); }