/* =========================================================================
   KernelGrow, Landing im NexaCore-Aufbau

   Nachgebaut nach dem Template von Mohammad Shehadeh (21st.dev), eigener
   Code und eigene Inhalte. Die drei Videoflaechen des Originals sind hier
   CSS und SVG: der Strahlenfaecher im Hero, die Kugel im Split und die
   Wellenschar unter der Treppe.

   Farbe:  dunkles Blauschwarz und Weiss, ein Verlauf blau/violett/magenta/
           amber als einziger Akzent, Indigo als Flaeche fuer Buttons.
   Aufbau: dunkel (Hero, Combs) -> hell (Rest) -> dunkel (CTA, Footer).
           Ein bewusster Wechsel, keine springende Abfolge.
   ========================================================================= */

:root {
  /* Verlauf, der ueberall den Akzent traegt */
  --g1: #3b82f6;
  --g2: #8b5cf6;
  --g3: #d946a6;
  --g4: #f59e0b;
  --grad: linear-gradient(100deg, var(--g1), var(--g2) 34%, var(--g3) 64%, var(--g4));

  --brand:      #4f46e5;
  --brand-2:    #4338ca;   /* Hover dunkelt ab: heller waere 4.47:1 unter Weiss, zu wenig */

  /* Der Verlauf traegt nur noch Hero und CTA. Ueberall sonst steht diese
     eine Volltonfarbe fuer die Betonung, auf Hell wie auf Dunkel lesbar. */
  --accent-ink:   #a78bfa;   /* auf dunkel,  7.5:1 */
  --accent-paper: #4f46e5;   /* auf hell,    6.3:1 */

  /* dunkel. Drei Stufen, alle ueber 4.5:1 gegen --ink:
     18.9:1 / 9.7:1 / 6.3:1 */
  --ink:        #08080f;
  --ink-2:      #0d0d18;
  --ink-line:   rgba(255, 255, 255, .10);
  --ink-fg:     #ffffff;
  --ink-fg-2:   rgba(255, 255, 255, .70);
  --ink-fg-3:   rgba(255, 255, 255, .55);

  /* hell. Dieselben drei Stufen gegen --paper: 19.2:1 / 8.1:1 / 4.9:1.
     Die dritte Stufe steht auch auf --paper-2 noch bei 4.6:1. */
  --paper:      #ffffff;
  --paper-2:    #f6f6fa;
  --paper-line: #e7e7ef;
  --paper-fg:   #0d0d1a;
  --paper-fg-2: #4e4e66;
  --paper-fg-3: #6e6e88;

  /* Statusfarben: je eine Fassung pro Untergrund. Dieselbe Farbe auf beiden
     faellt immer auf einer Seite durch. */
  --ok:         #15803d;   /* Text auf hell,   5.0:1 */
  --ok-ink:     #4ade80;   /* Text auf dunkel, 11.7:1 */
  --part:       #b02e86;   /* „ergaenzt“ auf hell, 5.9:1 */
  --no:         #7c7c96;   /* Symbol auf hell,  3.8:1 */

  /* Outfit und IBM Plex Mono lagen beide auf der Reflex-Reject-Liste:
     Standardgriffe, die man an jeder generierten Seite wiedererkennt.
     Schibsted Grotesk ist eine Zeitungs-Grotesk, sachlich und mit eigenem
     kleinen a und g. Spline Sans Mono bleibt ueber lange Terminalausgabe
     ruhig lesbar, statt wie ein Kostuem zu wirken. */
  --sans: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(20px, 5vw, 48px);
  --maxw: 1200px;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  background: var(--ink);
  color: var(--ink-fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--g2); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--g2); outline-offset: 3px; border-radius: 4px; }

#nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.center { text-align: center; }
.center .sub { margin-inline: auto; }

.band { position: relative; padding-block: clamp(72px, 10vw, 140px); }
.dark  { background: var(--ink);  color: var(--ink-fg); }
.light { background: var(--paper); color: var(--paper-fg); }

/* Weicher Uebergang dunkel -> hell und zurueck */
.light + .dark, .dark + .light { position: relative; }
.dark.cta-band { border-top: 1px solid var(--paper-line); }

/* Stossen zwei Abschnitte derselben Helligkeit aneinander, addieren sich
   zwei volle Innenabstaende zu ueber 250 px Leere ohne jede Kante. Die
   Seite liest sich dort, als waere sie zu Ende. Also: halber Abstand und
   eine Haarlinie als Fuge. Der Wechsel dunkel/hell braucht beides nicht,
   dort macht der Farbsprung die Trennung. */
.dark + .dark, .light + .light { padding-top: clamp(48px, 6vw, 84px); }
/* Dieselbe Kuerzung auf der Gegenseite, sonst sitzt die Fuge schief:
   160 px Luft darueber, 85 px darunter. Faellt :has() aus, steht dort
   wieder der volle Abstand, also nur mehr Luft, kein kaputtes Layout. */
.dark:has(+ .dark), .light:has(+ .light) { padding-bottom: clamp(48px, 6vw, 84px); }
.dark + .dark::before, .light + .light::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--pad), var(--maxw));
  border-top: 1px solid currentColor;
  opacity: .10;
}

/* --------------------------------------------------------------- Schrift

   Kein Label-System aus gesperrten Versalien. Die winzige Versalzeile mit
   weiter Laufweite stand vorher an acht Stellen: Zahlenstreifen, Karten-Tag,
   Fensterleiste, Lernfeldgruppen, Paketnamen, Phasen, Organisatorisches,
   Erfolgskasten. Einmal ist das Stimme, achtmal ist es Geruest, und zwar
   genau das Geruest, an dem man generierte Seiten erkennt. Auszeichnung
   laeuft jetzt ueber Schriftschnitt, Groesse und Farbe.                     */

h1, h2, h3 { font-weight: 600; letter-spacing: -.021em; line-height: 1.07; }

h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 4.1vw, 3rem); font-weight: 500; margin-bottom: 20px; }
h3 { font-size: 1.1rem; letter-spacing: -.012em; }

.h2--left { max-width: 20ch; }

/* Verlaufstext, bewusst auf zwei Stellen begrenzt: Hero-Headline und
   CTA-Headline, beide auf Dunkel. Dort liegt jeder Stop ueber 4.7:1.
   Auf Hell war derselbe Verlauf unlesbar: der Amber-Stop kommt gegen Weiss
   nur auf 2.2:1, das Wortende verschwand buchstaeblich. Ueberall sonst
   traegt jetzt --accent-ink bzw. --accent-paper die Betonung. */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Betonte zweite Headline-Zeile ausserhalb von Hero und CTA */
.hi { color: var(--accent-paper); }
.dark .hi { color: var(--accent-ink); }

.kicker {
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: 22px;
}

.sub {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  max-width: 62ch;
  color: var(--paper-fg-2);
}
.dark .sub, .hero__sub { color: var(--ink-fg-2); }
.sub--left { margin-inline: 0; }

.note {
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.8;
  color: var(--paper-fg-3);
  max-width: 78ch;
  margin-top: 28px;
}

strong { font-weight: 600; }
.light strong { color: var(--paper-fg); }
.dark strong { color: var(--ink-fg); }

/* Pille als Kapitelmarke, wie im Original */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .85rem;
  font-weight: 500;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
  background: var(--paper-2);
  color: var(--paper-fg);
  margin-bottom: 22px;
}
.pill__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
}

/* ------------------------------------------------- Navbar, Pille, schrumpft */

.nav {
  position: fixed;
  top: 14px; left: 0; right: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding-inline: var(--pad);
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  width: 100%;
  max-width: 940px;
  padding: 9px 9px 9px 20px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 2px rgba(10, 10, 30, .06), 0 12px 34px -14px rgba(10, 10, 40, .35);
  /* Nur max-width animiert. Die Pille liegt position:fixed, also ausserhalb
     des Flusses: der Reflow bleibt auf die Navbar beschraenkt und laeuft
     einmalig beim Zustandswechsel, nicht pro Scroll-Frame. */
  transition: max-width .5s var(--ease), box-shadow .4s;
}
.nav[data-stuck="true"] .nav__pill {
  max-width: 700px;
  box-shadow: 0 1px 2px rgba(10, 10, 30, .08), 0 16px 40px -16px rgba(10, 10, 40, .5);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--paper-fg);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.nav__mark {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%);
  mask: radial-gradient(circle, transparent 40%, #000 42%);
}

.nav__links { display: flex; gap: clamp(14px, 2vw, 26px); }
.nav__links a {
  font-size: .88rem;
  font-weight: 500;
  color: var(--paper-fg-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.nav__links a:hover { color: var(--paper-fg); }

/* Klickflaeche statt reiner Textzeile: 23 px hohe Links reissen die
   24-px-Mindestgroesse aus WCAG 2.5.8. */
.nav__links a { display: inline-flex; align-items: center; min-height: 32px; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__pill { max-width: 100%; }
  .nav[data-stuck="true"] .nav__pill { max-width: 100%; }
}
/* Unter 400 px ragte die Pille ueber den Viewport hinaus und der
   Haupt-CTA war rechts abgeschnitten. Gemessen bei 320 px: 40 px zu breit. */
@media (max-width: 400px) {
  .nav { top: 10px; }
  .nav__pill { gap: 10px; padding: 7px 7px 7px 14px; }
  .nav__brand { font-size: .95rem; gap: 8px; }
  .nav__mark { width: 15px; height: 15px; }
  .nav__pill .btn--sm { padding: 9px 12px; font-size: .8rem; }
}

/* --------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.btn--sm { padding: 9px 16px; font-size: .85rem; border-radius: 10px; }

.btn--brand {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 26px -12px rgba(79, 70, 229, .95);
}
.btn--brand:hover { background: var(--brand-2); transform: translateY(-1px); }
.btn--brand:active { transform: translateY(0) scale(.985); }

.btn--glass {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255,255,255,.32); transform: translateY(-1px); }

.row-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.row-cta--center { justify-content: center; }

/* ------------------------------------------- Strahlenfaecher, CSS statt Video */

.rays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* Der Faecher selbst: feine Speichen aus einem Punkt unterhalb der Mitte */
.rays span {
  position: absolute;
  left: 50%; top: 8%;
  width: 190vw; height: 150vh;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 202deg at 50% 100%,
    rgba(255,255,255,0) 0deg 1.9deg,
    rgba(255,255,255,.07) 1.9deg 2.6deg,
    rgba(255,255,255,0) 2.6deg 4.5deg);
  filter: blur(.4px);
  -webkit-mask-image: radial-gradient(64% 70% at 50% 100%, #000 6%, rgba(0,0,0,.5) 40%, transparent 68%);
  mask-image: radial-gradient(64% 70% at 50% 100%, #000 6%, rgba(0,0,0,.5) 40%, transparent 68%);
}

/* Farbwaesche darueber: blau links, amber rechts, violett in der Mitte */
.rays i {
  position: absolute;
  inset: -10% -5% 0;
  background:
    radial-gradient(48% 60% at 12% 42%, rgba(59, 130, 246, .40), transparent 68%),
    radial-gradient(46% 58% at 88% 40%, rgba(245, 158, 11, .34), transparent 68%),
    radial-gradient(60% 70% at 50% 96%, rgba(139, 92, 246, .38), transparent 70%);
  filter: blur(28px);
}

.rays--soft span { opacity: .55; }
.rays--soft i { opacity: .75; }

/* ----------------------------------------------------------------- Hero */

.hero {
  position: relative;
  padding-top: clamp(140px, 17vw, 210px);
  padding-bottom: clamp(60px, 8vw, 96px);
  overflow: hidden;
}
.hero__in { position: relative; z-index: 1; text-align: center; }
.hero h1 { margin-bottom: 22px; }
.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  max-width: 54ch;
  margin: 0 auto 30px;
}
.hero .row-cta { justify-content: center; }
.hero .shell:last-child { position: relative; z-index: 1; }

/* Zahlenstreifen */
.stats {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border-block: 1px solid var(--ink-line);
}
.stats > div { background: var(--ink); padding: 18px 22px 18px 0; }
/* Ohne Innenabstand links klebte der Wert an der Trennlinie der Nachbarzelle. */
.stats > div + div { padding-left: 22px; }
.stats > div { display: flex; flex-direction: column-reverse; }
/* Wert oben, Erklaerung darunter: die Tatsache fuehrt, das Etikett
   erklaert. Andersherum war es die uebliche Kennzahlen-Kachel. */
.stats dt {
  font-size: .84rem;
  color: var(--ink-fg-3);
  margin-top: 6px;
}
.stats dd { font-family: var(--mono); font-size: 1.02rem; color: var(--ink-fg); font-weight: 500; }
.stats dd b { font-weight: 600; }
@media (max-width: 700px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div, .stats > div + div { padding: 14px 0; }
}

/* --------------------------------------------------- Split-View, Terminal */

.demo {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(139, 92, 246, .10);
}
@media (max-width: 900px) { .demo { grid-template-columns: minmax(0, 1fr); } }

.pane { background: var(--ink-2); display: flex; flex-direction: column; min-width: 0; }

.pane__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .01em;
  color: var(--ink-fg-3);
}
.pane__bar .spacer { margin-left: auto; }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g2);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
  flex: none;
  transition: background .3s, box-shadow .3s;
}
.dot--ok { background: var(--ok-ink); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }

.ticket { padding: 20px 20px 4px; }
.ticket__id {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .01em;
  color: var(--accent-ink);
  margin-bottom: 9px;
}
.ticket__txt { font-size: .95rem; color: var(--ink-fg); line-height: 1.55; }
.ticket__txt em { font-style: italic; color: var(--ink-fg-2); }
.ticket__from { margin-top: 12px; font-family: var(--mono); font-size: .72rem; color: var(--ink-fg-3); }

.checks { list-style: none; padding: 18px 20px 6px; display: grid; gap: 2px; }
.checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 9px 10px 9px 6px;
  border-radius: var(--r-xs);
  font-size: .89rem;
  color: var(--ink-fg-2);
  transition: background .25s, color .25s;
}
.checks li .box {
  width: 15px; height: 15px;
  margin-top: 3px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .68rem;
  color: transparent;
  transition: all .3s var(--ease);
}
.checks li code { font-family: var(--mono); font-size: .84em; color: var(--ink-fg); }
.checks li[data-done="true"] { color: var(--ink-fg); background: rgba(74, 222, 128, .09); }
.checks li[data-done="true"] .box {
  background: var(--ok-ink); border-color: var(--ok-ink); color: #05230f; transform: scale(1.06);
}
.checks li[data-done="true"] code { color: var(--ok-ink); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1.06); } }
.checks li[data-just="true"] .box { animation: pop .4s var(--ease); }

.pane__foot {
  margin-top: auto;
  padding: 14px 20px 18px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border-top: 1px solid var(--ink-line);
}
/* Als nackte Textzeile war der Hinweis kaum vom Kleingedruckten zu
   unterscheiden, und ein Klick auf „Hinweis anfordern“ sah nach nichts
   aus. Jetzt ist es ein sichtbares Feld, das vorher nicht da war. */
.pane__foot .hintline {
  width: 100%;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.6;
  color: var(--accent-ink);
  background: rgba(167, 139, 250, .10);
  border: 1px solid rgba(167, 139, 250, .30);
  border-radius: var(--r-xs);
  padding: 9px 12px;
  margin-bottom: 10px;
}
.pane__foot .hintline:empty { display: none; }

.term { background: #05050b; display: flex; flex-direction: column; min-height: 430px; cursor: text; }
.term__out {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 6px;
  font-family: var(--mono);
  font-size: .855rem;
  line-height: 1.68;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.term__out::-webkit-scrollbar { width: 9px; }
.term__out::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 9px; }

.term__out .l { display: block; min-height: 1.68em; }
.term__out .sys  { color: var(--accent-ink); }
.term__out .dim  { color: var(--ink-fg-3); }
.term__out .err  { color: #f87171; }
.term__out .good { color: var(--ok-ink); }
.term__out .cmd  { color: var(--ink-fg); }
.term__out .cmd b { color: var(--accent-ink); font-weight: 400; }

.term__form { display: flex; align-items: center; gap: 9px; padding: 12px 20px 16px; }
.term__ps { font-family: var(--mono); font-size: .855rem; color: var(--accent-ink); flex: none; }
.term__in {
  flex: 1; background: none; border: 0; outline: 0;
  color: var(--ink-fg); font-family: var(--mono); font-size: .855rem;
  caret-color: var(--accent-ink); min-width: 0;
}
.term__in::placeholder { color: var(--ink-fg-3); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 16px; }
.chip {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-fg-2);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-xs);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.chip:hover { border-color: rgba(139,92,246,.6); color: #c4b5fd; background: rgba(139,92,246,.12); }

.won {
  margin: 0 20px 16px;
  border: 1px solid rgba(74, 222, 128, .3);
  background: rgba(74, 222, 128, .08);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: none;
}
.won[data-on="true"] { display: block; animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.won b { color: var(--ok-ink); font-family: var(--mono); font-size: .84rem; display: block; margin-bottom: 6px; }
.won p { color: var(--ink-fg); font-size: .88rem; }
.won code { font-family: var(--mono); color: var(--ok-ink); }

/* ------------------------------------------ Kartenreihe, klappt bei Hover auf */

.deck-band .sub { margin-bottom: 0; }

.deck {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  perspective: 1400px;
}
@media (max-width: 980px) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .deck { grid-template-columns: minmax(0, 1fr); } }

.card {
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  padding: 22px 20px 24px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .4s, background .4s, box-shadow .4s;
  cursor: default;
}
/* Die Reihe steht leicht gefaechert, die berührte Karte richtet sich auf */
.deck .card:nth-child(1) { transform: rotate(-1.6deg) translateY(6px); }
.deck .card:nth-child(2) { transform: rotate(-.5deg); }
.deck .card:nth-child(3) { transform: rotate(.5deg); }
.deck .card:nth-child(4) { transform: rotate(1.6deg) translateY(6px); }

.card:hover, .card:focus-visible {
  transform: rotate(0deg) translateY(-8px) scale(1.015);
  border-color: rgba(139, 92, 246, .45);
  background: linear-gradient(170deg, rgba(139,92,246,.14), rgba(255,255,255,.02));
  box-shadow: 0 30px 60px -30px rgba(88, 40, 200, .8);
  z-index: 2;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .01em;
  color: var(--ink-fg-2);
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  margin-bottom: 18px;
}
.tag__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: none; }

.card h3 { font-size: 1.3rem; font-weight: 500; margin-top: auto; }

/* Aufklappen: Hoehe 0 -> auto ueber grid-template-rows, animierbar */
.card__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease), opacity .35s ease;
}
.card__more > * { overflow: hidden; }
.card__more p { padding-top: 14px; }
.card:hover .card__more,
.card:focus-visible .card__more,
.card:focus-within .card__more { grid-template-rows: 1fr; opacity: 1; }

.card__more p { font-size: .9rem; color: var(--ink-fg-2); }
.card__more ul { list-style: none; margin-top: 10px; display: grid; gap: 5px; }
.card__more li {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-fg-3);
  padding-left: 14px;
  position: relative;
}
.card__more li::before { content: "+"; position: absolute; left: 0; color: var(--g2); }

.card--accent { background: linear-gradient(170deg, rgba(139,92,246,.16), rgba(245,158,11,.05)); }

/* Auf Touch gibt es kein Hover. Vorher stand dort eine 250 px hohe Karte
   mit nichts als der Ueberschrift darin, der ganze Inhalt blieb verborgen.
   Also: aufgeklappt ausliefern und den Faecher weglassen. */
@media (hover: none) {
  .card { min-height: 0; }
  .deck .card:nth-child(n) { transform: none; }
  .card__more { grid-template-rows: 1fr; opacity: 1; }
  .card h3 { margin-top: 0; }
}

.deckfoot {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.8;
  color: var(--ink-fg-3);
  max-width: 74ch;
}

/* ------------------------------------------------- Split mit Kugel in der Mitte */

.split {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 320px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .orb { order: -1; margin-inline: auto; }
}

.sidelist { list-style: none; display: grid; gap: 10px; }
.sidelist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: .93rem;
  line-height: 1.5;
  padding: 15px 17px;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.sidelist li:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(15, 15, 50, .5); }
.sidelist li i { font-style: normal; font-size: .95rem; line-height: 1.4; }

.sidelist--bad li { color: var(--paper-fg-3); background: var(--paper-2); }
.sidelist--bad li i { color: var(--no); }
.sidelist--good li { color: var(--paper-fg); }
.sidelist--good li i { color: var(--ok); font-weight: 700; }
.sidelist--good li:hover { border-color: rgba(139, 92, 246, .45); }

.orb { position: relative; display: grid; place-items: center; }
.orb svg { width: 100%; max-width: 320px; height: auto; }
.orb::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.20), rgba(245,158,11,.10) 55%, transparent 72%);
  filter: blur(18px);
}
@keyframes spin { to { transform: rotate(360deg); } }
.orb__mesh { transform-origin: 150px 150px; animation: spin 64s linear infinite; }
@media (prefers-reduced-motion: reduce) { .orb__mesh { animation: none; } }

/* --------------------------------------------------- Treppe mit Wellenschar */

.stair-band { overflow: hidden; }
.stairwrap { position: relative; margin-top: clamp(40px, 5vw, 70px); padding-bottom: 40px; }

.stair {
  list-style: none;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 26px);
  align-items: end;
}
.stair > li { position: relative; padding-left: 18px; border-left: 1px solid var(--paper-line); }
/* Die Treppe: jede Saeule steht hoeher als die vorige */
.stair > li:nth-child(1) { padding-bottom: 0; }
.stair > li:nth-child(2) { padding-bottom: 46px; }
.stair > li:nth-child(3) { padding-bottom: 92px; }
.stair > li:nth-child(4) { padding-bottom: 138px; }

.stair__dot {
  position: absolute;
  left: -5.5px; top: 4px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--g2);
}
.stair > li:nth-child(1) .stair__dot { border-color: var(--g1); }
.stair > li:nth-child(3) .stair__dot { border-color: var(--g3); }
.stair > li:nth-child(4) .stair__dot { border-color: var(--g4); }

.stair h3 { margin-bottom: 14px; font-size: 1.15rem; font-weight: 600; }
.stair ul { list-style: none; display: grid; gap: 7px; }
.stair ul li { font-size: .88rem; color: var(--paper-fg-2); }

@media (max-width: 820px) {
  .stair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; align-items: start; }
  .stair > li:nth-child(n) { padding-bottom: 0; }
}
@media (max-width: 460px) { .stair { grid-template-columns: minmax(0, 1fr); } }

.wave {
  position: absolute;
  left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: 130%;
  height: clamp(140px, 20vw, 260px);
  z-index: 1;
  pointer-events: none;
}

.stairfoot {
  position: relative;
  z-index: 2;
  margin-top: clamp(60px, 9vw, 120px);
  font-size: .95rem;
  color: var(--paper-fg-2);
  max-width: 70ch;
}
.stairfoot b { font-weight: 600; color: var(--paper-fg); }

/* ---------------------------------------------------------- Lernfelder */

.lfgroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(22px, 3.5vw, 44px);
  margin-top: 44px;
}
.lfgroup { border-top: 2px solid var(--paper-line); padding-top: 18px; }
.lfgroup h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}
.lfgroup--yes  { border-top-color: var(--ok); }
.lfgroup--yes h3  { color: var(--ok); }
.lfgroup--part { border-top-color: var(--part); }
.lfgroup--part h3 { color: var(--part); }
/* Die Luecke bekommt dieselbe Strichstaerke wie die Staerken daneben.
   Vorher stand hier die fast unsichtbare --paper-line, das las sich wie
   Kleingedrucktes statt wie eine gleichberechtigte Aussage. */
.lfgroup--no { border-top-color: var(--paper-fg-3); }
.lfgroup--no h3   { color: var(--paper-fg-3); }

.lfgroup ul { list-style: none; display: grid; gap: 10px; }
.lfgroup li { font-size: .92rem; color: var(--paper-fg-2); line-height: 1.45; }
.lfgroup li i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--paper-fg-3);
  display: inline-block;
  min-width: 4.1em;   /* „LF 10b" ist breiter als „LF 03", sonst rutscht der Titel */
}
.lfgroup--no li { color: var(--paper-fg-3); }

/* ------------------------------------------------------------ Bento */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 52px;
  align-items: start;
}
.bcell {
  grid-column: span 1;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  padding: 26px 24px;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.bcell:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -26px rgba(15, 15, 50, .55); }
.bcell--wide { grid-column: span 2; }
.bcell--accent {
  background: linear-gradient(150deg, rgba(139,92,246,.12), rgba(59,130,246,.05));
  border-color: rgba(139, 92, 246, .3);
}
.bcell h3 { margin-bottom: 10px; }
.bcell p { font-size: .93rem; color: var(--paper-fg-2); }

@media (max-width: 820px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bcell, .bcell--wide { grid-column: span 1; }
}

/* Ehrlicher Platzhalter, keine gebaute Attrappe */
.shot {
  margin-top: 20px;
  aspect-ratio: 16 / 9;   /* wie der zugesagte Screenshot, 1600x900 */
  border: 1px dashed #cfcfe0;
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(-45deg, rgba(15,15,50,.025) 0 10px, transparent 10px 20px);
  display: grid;
  place-items: center;
  text-align: center;
}
.shot span { font-family: var(--mono); font-size: .72rem; line-height: 1.7; color: var(--paper-fg-3); }

.orgrow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--paper-line);
  border-block: 1px solid var(--paper-line);
  margin-top: 44px;
}
.orgrow li { background: var(--paper); padding: 20px 22px 20px 0; font-size: .9rem; color: var(--paper-fg-2); line-height: 1.5; }
.orgrow b {
  display: block;
  font-size: .95rem;
  color: var(--paper-fg);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------- Preise */

.freebar {
  margin-top: 44px;
  border: 1px solid rgba(139, 92, 246, .3);
  border-radius: var(--r-md);
  background: linear-gradient(105deg, rgba(139,92,246,.09), rgba(59,130,246,.03) 45%, transparent 70%), var(--paper);
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
}
@media (max-width: 760px) { .freebar { grid-template-columns: minmax(0, 1fr); } }
.freebar h3 { margin-bottom: 9px; }
.freebar p { font-size: .93rem; color: var(--paper-fg-2); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  padding: 28px 24px 30px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -28px rgba(15, 15, 50, .55); }
.plan--lead {
  border-color: rgba(139, 92, 246, .45);
  background: linear-gradient(180deg, rgba(139,92,246,.07), transparent 55%), var(--paper);
  box-shadow: 0 20px 44px -30px rgba(88, 40, 200, .7);
}

.plan__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--paper-fg);
  margin-bottom: 14px;
}
.plan--lead .plan__name { color: var(--accent-paper); }
.plan__price { font-size: 2rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.plan__unit { font-family: var(--mono); font-size: .74rem; color: var(--paper-fg-3); margin-top: 6px; margin-bottom: 20px; }
.plan ul { list-style: none; display: grid; gap: 9px; font-size: .89rem; color: var(--paper-fg-2); }
.plan li { padding-left: 17px; position: relative; }
.plan li::before { content: "+"; position: absolute; left: 0; color: var(--g2); font-family: var(--mono); font-size: .82em; top: .15em; }

/* --------------------------------------------------------------- Status */

.phases { display: grid; margin-top: 44px; }
.phase {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 48px);
  padding: 28px 0;
  border-top: 1px solid var(--paper-line);
  align-items: start;
}
.phase:last-child { border-bottom: 1px solid var(--paper-line); }
@media (max-width: 700px) { .phase { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

.phase__label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--paper-fg-2);
}
.phase--now { background: linear-gradient(100deg, rgba(139,92,246,.10), transparent 60%); }
.phase--now .phase__label { color: var(--accent-paper); }
.phase--now .phase__label, .phase--now .phase__body { padding-left: 18px; }
.phase--now, .phase--now + .phase { border-top-color: rgba(139, 92, 246, .35); }

.phase__body h3 { font-size: 1rem; margin-bottom: 6px; }
.phase__body h3 + p { margin-bottom: 20px; }
.phase__body h3 + p:last-child { margin-bottom: 0; }
.phase__body p { font-size: .92rem; color: var(--paper-fg-2); }

/* ------------------------------------------------------------------ CTA */

.cta-band { overflow: hidden; }
.cta-band .shell { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 22px; }
.cta-band .sub { margin-bottom: 30px; }
.ctanote { margin-top: 20px; font-family: var(--mono); font-size: .76rem; color: var(--ink-fg-3); }

/* --------------------------------------------------------------- Footer */

.foot { border-top: 1px solid var(--ink-line); padding-block: 44px 60px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline; justify-content: space-between; }
.foot p, .foot a { font-family: var(--mono); font-size: .76rem; color: var(--ink-fg-3); line-height: 1.85; }
.foot a { text-decoration: none; transition: color .2s; display: inline-flex; align-items: center; min-height: 28px; }
.foot a:hover { color: var(--ink-fg); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* -------------------------------------------------------- Scroll-Reveal
   Rein in CSS ueber scroll-driven animations. Kein JavaScript: faellt die
   Unterstuetzung weg, steht der Inhalt einfach sofort da, statt unsichtbar
   zu bleiben. Der Hero ist ausgenommen, er liegt ueber der Falz. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes reveal {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: none; }
    }
    /* Ende absolut, nicht relativ zur Elementhoehe. Mit „cover 26%“ zog
       sich das Einblenden bei der 1500 px hohen Betriebe-Sektion ueber
       rund 560 px Scrollweg hin, die Ueberschrift stand dort lange
       halbtransparent. 260 px gelten fuer jeden Abschnitt gleich. */
    .band .shell {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 24px entry 260px;
    }
  }
}

/* ----------------------------------------------------------------- Schmal */

@media (max-width: 700px) {
  .hide-xs { display: none; }
  .pane__bar { font-size: .66rem; letter-spacing: .08em; gap: 8px; padding: 11px 15px; }
  .ticket, .checks, .pane__foot, .term__out, .term__form, .chips { padding-inline: 16px; }
  .won { margin-inline: 16px; }
  .h2--left, h2 { max-width: none; }
}