/* Hebby Memories — Stylesheet. Grundfarbe Koenigsblau, technisch-modern. */
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: light;
  --blau: #1d4ed8;
  --blau-hell: #3b6cf6;
  --blau-hover: #1740b4;
  --koenig: #2347c9;
  --nacht: #060f2e;
  --nacht-2: #0b1a4a;
  --nacht-3: #12266b;
  --glut: #5ad8ff;
  --glut-2: #8fb3ff;
  --rosa: #ff9db0;
  --gold: #f5c84c;
  --papier: #f5f7fd;
  --papier-2: #eaf0ff;
  --weiss: #ffffff;
  --text: #0d1633;
  --text-2: #46506e;
  --text-3: #6b7594;
  --linie: #dbe3f5;
  --linie-dunkel: rgba(143, 179, 255, .18);
  --radius: 16px;
  --radius-s: 10px;
  --schatten: 0 1px 2px rgba(13, 22, 51, .06), 0 8px 28px rgba(13, 22, 51, .07);
  --schatten-blau: 0 10px 40px rgba(29, 78, 216, .28);
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fliess: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-mini: .8125rem;
  --fs-klein: .9375rem;
  --fs-text: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.375rem);
  --fs-h2: clamp(1.9rem, 1.1rem + 2.4vw, 3rem);
  --fs-h1: clamp(2.3rem, 1.2rem + 4.2vw, 4.4rem);
  --rand: clamp(1.1rem, 4.5vw, 4rem);
  --breite: 1180px;
  --abschnitt: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --leiste-h: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--leiste-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--fliess); font-size: var(--fs-text); line-height: 1.65; color: var(--text); background: var(--papier); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blau-hover); }
:focus-visible { outline: 3px solid var(--glut); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .6em; color: inherit; font-weight: 650; }
h1 { font-size: var(--fs-h1); letter-spacing: -.035em; font-weight: 700; }
h2 { font-size: var(--fs-h2); letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
code, kbd { font-family: var(--mono); font-size: .9em; background: var(--papier-2); padding: .1em .35em; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--weiss); padding: .6rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.wrap-schmal { width: min(100% - 2 * var(--rand), 760px); margin-inline: auto; }
.abschnitt { padding-block: var(--abschnitt); position: relative; }
.abschnitt--hell { background: var(--weiss); }
.abschnitt--blass { background: var(--papier-2); }
.abschnitt--nacht { background: radial-gradient(1200px 600px at 80% -10%, rgba(59, 108, 246, .35), transparent 60%), linear-gradient(180deg, var(--nacht) 0%, var(--nacht-2) 100%); color: #e8eeff; }
.abschnitt--nacht p, .abschnitt--nacht li { color: #c3cff2; }
.abschnitt--nacht h2, .abschnitt--nacht h3 { color: #fff; }

/* Kennzeile im Code-Stil */
.kenn { font-family: var(--mono); font-size: var(--fs-mini); letter-spacing: .08em; text-transform: uppercase; color: var(--blau); display: inline-flex; align-items: center; gap: .55em; margin-bottom: 1.1rem; font-weight: 600; }
.kenn::before { content: ""; width: 1.6em; height: 2px; background: currentColor; border-radius: 2px; }
.abschnitt--nacht .kenn, .held .kenn { color: var(--glut); }
.lead { font-size: var(--fs-lead); color: var(--text-2); line-height: 1.6; max-width: 42em; }
.abschnitt--nacht .lead { color: #c3cff2; }
.kopf-abschnitt { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.kopf-abschnitt--mitte { margin-inline: auto; text-align: center; }
.kopf-abschnitt--mitte .kenn { justify-content: center; }
.verlauf { background: linear-gradient(92deg, #fff 0%, var(--glut-2) 45%, var(--glut) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.verlauf-blau { background: linear-gradient(92deg, var(--blau) 0%, #4f7bff 60%, #2bb7e8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Knoepfe */
.knopf { --k-bg: var(--blau); --k-fg: #fff; display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.35rem; border-radius: 999px; background: var(--k-bg); color: var(--k-fg); font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; text-decoration: none; border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; box-shadow: var(--schatten-blau); white-space: nowrap; }
.knopf:hover { background: var(--blau-hover); color: #fff; transform: translateY(-1px); }
.knopf svg { width: 1.05em; height: 1.05em; }
.knopf--hell { --k-bg: #fff; --k-fg: var(--nacht); box-shadow: 0 10px 34px rgba(90, 216, 255, .22); }
.knopf--hell:hover { background: #eaf3ff; color: var(--nacht); }
.knopf--rand { --k-bg: transparent; --k-fg: currentColor; border-color: currentColor; box-shadow: none; }
.knopf--rand:hover { background: rgba(255, 255, 255, .08); color: inherit; }
.abschnitt--hell .knopf--rand:hover, .abschnitt--blass .knopf--rand:hover, main > .knopf--rand:hover { background: var(--papier-2); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Kopfleiste */
.leiste { position: sticky; top: 0; z-index: 50; height: var(--leiste-h); background: rgba(5, 12, 38, .92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--linie-dunkel); color: #fff; }
.leiste .wrap { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.marke { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; margin-right: auto; }
.marke img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(90, 216, 255, .35)); }
.marke span b { color: var(--glut); font-weight: 700; }
.marke:hover { color: #fff; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a { color: #c9d5fa; text-decoration: none; font-size: .95rem; padding: .45rem .75rem; border-radius: 999px; transition: background .15s, color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgba(143, 179, 255, .14); }
.nav .knopf { padding: .55rem 1.05rem; font-size: .92rem; margin-left: .5rem; color: #fff; box-shadow: none; }
.nav .knopf:hover { background: var(--blau-hell); }
.menue-knopf { display: none; background: none; border: 1px solid var(--linie-dunkel); color: #fff; border-radius: 10px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.menue-knopf svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
  .menue-knopf { display: inline-flex; }
  .nav { position: fixed; inset: var(--leiste-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: .15rem; padding: 1rem var(--rand) 1.5rem; background: rgba(6, 15, 46, .97); border-bottom: 1px solid var(--linie-dunkel); transform: translateY(-120%); transition: transform .25s ease; visibility: hidden; }
  .nav.offen { transform: none; visibility: visible; }
  .nav a { padding: .8rem 1rem; font-size: 1.05rem; }
  .nav .knopf { margin: .6rem 0 0; justify-content: center; }
}

/* Held (Hero) */
.held { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 520px at 78% 30%, rgba(59, 108, 246, .55), transparent 65%), radial-gradient(700px 500px at 10% 110%, rgba(90, 216, 255, .18), transparent 60%), linear-gradient(180deg, #050c26 0%, var(--nacht-2) 100%); padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(4rem, 2rem + 6vw, 8rem); isolation: isolate; }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(143, 179, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 179, 255, .07) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); }
.held canvas.netz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.held-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.held h1 { margin-bottom: .45em; }
.held .lead { color: #c9d5fa; margin-bottom: 2rem; }
.held-figur { position: relative; justify-self: center; width: min(100%, 300px); }
.held-figur img { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); position: relative; z-index: 2; animation: schweben 6s ease-in-out infinite; }
.held-figur::before { content: ""; position: absolute; inset: 12% 6% 0; border-radius: 50%; background: radial-gradient(circle, rgba(90, 216, 255, .45), rgba(29, 78, 216, .15) 55%, transparent 70%); filter: blur(10px); z-index: 1; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.held-chip { position: absolute; z-index: 3; font-family: var(--mono); font-size: .76rem; color: #dfe8ff; background: rgba(11, 26, 74, .78); border: 1px solid rgba(143, 179, 255, .35); padding: .45rem .7rem; border-radius: 10px; backdrop-filter: blur(6px); white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.held-chip b { color: var(--glut); font-weight: 600; }
.held-chip--1 { top: 10%; left: -14%; animation: schweben 7s ease-in-out infinite .5s; }
.held-chip--2 { top: 46%; right: -12%; animation: schweben 8s ease-in-out infinite 1s; }
.held-chip--3 { bottom: 8%; left: -6%; animation: schweben 7.5s ease-in-out infinite 1.6s; }
.siegel { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.2rem; padding: 0; list-style: none; }
.siegel li { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: #dfe8ff; background: rgba(143, 179, 255, .1); border: 1px solid rgba(143, 179, 255, .22); padding: .38rem .8rem; border-radius: 999px; }
.siegel svg { width: 1em; height: 1em; color: var(--glut); flex: none; }
@media (max-width: 900px) {
  .held-raster { grid-template-columns: 1fr; }
  .held-figur { width: min(72%, 300px); order: -1; }
  .held-chip--1 { left: -22%; } .held-chip--2 { right: -26%; } .held-chip--3 { left: -18%; }
}
@media (max-width: 520px) { .held-chip { display: none; } }

/* Unterseiten-Kopf */
.seitenkopf { color: #fff; background: radial-gradient(800px 400px at 85% 0%, rgba(59, 108, 246, .5), transparent 65%), linear-gradient(180deg, #050c26, var(--nacht-2)); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.8rem, 2rem + 3vw, 4.5rem); position: relative; overflow: hidden; }
.seitenkopf::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(143, 179, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 179, 255, .06) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.seitenkopf .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.seitenkopf h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); margin-bottom: .35em; max-width: 18em; }
.seitenkopf .lead { color: #c9d5fa; margin: 0; }
.seitenkopf .kenn { color: var(--glut); }
.seitenkopf img { width: clamp(90px, 12vw, 150px); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .4)); }
@media (max-width: 700px) { .seitenkopf .wrap { grid-template-columns: 1fr; } .seitenkopf img { display: none; } }
.brotkrumen { font-size: var(--fs-mini); font-family: var(--mono); color: #93a5d8; margin-bottom: 1.4rem; }
.brotkrumen a { color: #c9d5fa; text-decoration: none; }
.brotkrumen a:hover { color: #fff; }
.meta-zeile { font-family: var(--mono); font-size: var(--fs-mini); color: #93a5d8; margin-top: 1.2rem; }

/* Raster und Karten */
.raster { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .raster-2, .raster-3, .raster-4 { grid-template-columns: 1fr; } }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.3rem, 2.2vw, 1.8rem); box-shadow: var(--schatten); position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.karte h3 { margin-bottom: .45em; }
.karte p { color: var(--text-2); font-size: var(--fs-klein); margin: 0; }
.karte p + p { margin-top: .7em; }
a.karte { text-decoration: none; color: inherit; display: block; }
a.karte:hover { transform: translateY(-3px); border-color: #b9c9f5; box-shadow: 0 16px 40px rgba(29, 78, 216, .14); }
.karte .mehr { display: inline-block; margin-top: 1rem; font-family: var(--display); font-weight: 600; color: var(--blau); font-size: .95rem; }
.karte--nacht { background: linear-gradient(180deg, rgba(143, 179, 255, .09), rgba(143, 179, 255, .03)); border-color: var(--linie-dunkel); box-shadow: none; color: #fff; }
.karte--nacht p { color: #b7c5ee; }
.symbol { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #e3ebff, #f3f7ff); color: var(--blau); margin-bottom: 1.1rem; border: 1px solid #d3defb; }
.symbol svg { width: 24px; height: 24px; }
.karte--nacht .symbol { background: linear-gradient(135deg, rgba(90, 216, 255, .18), rgba(59, 108, 246, .22)); color: var(--glut); border-color: rgba(143, 179, 255, .3); }
.nummer { font-family: var(--mono); font-size: .8rem; color: var(--blau); font-weight: 600; letter-spacing: .06em; }
.karte--nacht .nummer { color: var(--glut); }

/* Problem-Liste */
.schmerz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.schmerz .karte { border-top: 3px solid var(--rosa); }
@media (max-width: 860px) { .schmerz { grid-template-columns: 1fr; } }

/* Gegenueberstellung Modell vs Hebby */
.zwei-seiten { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; align-items: stretch; }
.zwei-seiten .karte ul { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.zwei-seiten .karte li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-klein); color: var(--text-2); }
.zwei-seiten .karte li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: .55em; background: #a8b6dc; }
.zwei-seiten .karte--hebby { border: 1.5px solid var(--blau); background: linear-gradient(180deg, #f3f6ff, #fff); }
.zwei-seiten .karte--hebby li::before { background: var(--blau); box-shadow: 0 0 0 4px rgba(29, 78, 216, .14); }
.plus { display: grid; place-items: center; font-family: var(--display); font-size: 2.6rem; font-weight: 300; color: var(--blau); }
@media (max-width: 820px) { .zwei-seiten { grid-template-columns: 1fr; } .plus { font-size: 2rem; } }
.merksatz { margin-top: 2rem; padding: 1.3rem 1.5rem; border-radius: var(--radius); background: var(--nacht); color: #fff; font-family: var(--display); font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); line-height: 1.4; letter-spacing: -.01em; display: flex; gap: 1rem; align-items: center; }
.merksatz img { width: 64px; height: auto; flex: none; }
.merksatz b { color: var(--glut); font-weight: 600; }

/* Ablauf */
.ablauf { counter-reset: schritt; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; position: relative; }
.ablauf .karte { padding-top: 2.2rem; }
.ablauf .karte::before { counter-increment: schritt; content: "0" counter(schritt); position: absolute; top: -1rem; left: 1.5rem; font-family: var(--mono); font-weight: 700; font-size: .9rem; background: var(--blau); color: #fff; padding: .35rem .65rem; border-radius: 8px; box-shadow: var(--schatten-blau); }
@media (max-width: 860px) { .ablauf { grid-template-columns: 1fr; gap: 2rem; } }

/* Terminal / Einblick */
.terminal { background: #050b22; border: 1px solid rgba(143, 179, 255, .25); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); font-family: var(--mono); font-size: .82rem; line-height: 1.7; color: #c9d5fa; }
.terminal-kopf { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; background: rgba(143, 179, 255, .07); border-bottom: 1px solid rgba(143, 179, 255, .15); font-size: .75rem; color: #8fa2d6; }
.terminal-kopf i { width: 11px; height: 11px; border-radius: 50%; background: #2a3a70; display: inline-block; }
.terminal-kopf i:nth-child(1) { background: #ff6b81; } .terminal-kopf i:nth-child(2) { background: #f5c84c; } .terminal-kopf i:nth-child(3) { background: #4ade80; }
.terminal-kopf span { margin-left: .6rem; }
.terminal pre { margin: 0; padding: 1.1rem 1.2rem 1.3rem; white-space: pre-wrap; word-break: break-word; font: inherit; }
.t-k { color: #8fa2d6; } .t-b { color: var(--glut); } .t-g { color: #7ee2a8; } .t-r { color: #ff9db0; } .t-y { color: var(--gold); } .t-w { color: #fff; font-weight: 600; }
.einblick { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .einblick { grid-template-columns: 1fr; } }
.karten-bild { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(143, 179, 255, .25); background: radial-gradient(circle at 50% 45%, #10235f, #050b22 70%); aspect-ratio: 4 / 3; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.karten-bild canvas { width: 100%; height: 100%; }
.karten-bild figcaption, .bildunterschrift { font-family: var(--mono); font-size: .72rem; color: #8fa2d6; }
.karten-bild figcaption { position: absolute; left: 1rem; bottom: .8rem; }
.bildunterschrift { margin-top: .6rem; }

/* Gehirn-Prinzipien */
.prinzip { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.prinzip .symbol { margin: 0; }
.prinzip h3 { font-size: 1.15rem; }
.prinzip small { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--glut); margin-bottom: .35rem; }

/* Feature-Liste kompakt */
.merkmale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--weiss); box-shadow: var(--schatten); }
.merkmale > div { padding: 1.5rem 1.5rem 1.6rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.merkmale > div:nth-child(3n) { border-right: 0; }
.merkmale h3 { font-size: 1.05rem; display: flex; gap: .55rem; align-items: center; margin-bottom: .4em; }
.merkmale h3 svg { width: 20px; height: 20px; color: var(--blau); flex: none; }
.merkmale p { font-size: var(--fs-klein); color: var(--text-2); margin: 0; }
@media (max-width: 900px) { .merkmale { grid-template-columns: 1fr 1fr; } .merkmale > div:nth-child(3n) { border-right: 1px solid var(--linie); } .merkmale > div:nth-child(2n) { border-right: 0; } }
@media (max-width: 600px) { .merkmale { grid-template-columns: 1fr; } .merkmale > div { border-right: 0 !important; } }

/* Zahlenleiste */
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.zahlen div { border-left: 2px solid var(--glut); padding-left: 1rem; }
.zahlen b { display: block; font-family: var(--display); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); color: #fff; line-height: 1.1; letter-spacing: -.03em; }
.zahlen span { font-size: var(--fs-klein); color: #b7c5ee; }
@media (max-width: 760px) { .zahlen { grid-template-columns: 1fr 1fr; } }

/* Maskottchen */
.maskottchen { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.maskottchen-bilder { display: flex; gap: .6rem; align-items: flex-end; }
.maskottchen-bilder img { height: clamp(150px, 18vw, 230px); width: auto; filter: drop-shadow(0 16px 26px rgba(13, 22, 51, .22)); }
.maskottchen-bilder img:nth-child(2) { height: clamp(120px, 14vw, 180px); }
@media (max-width: 800px) { .maskottchen { grid-template-columns: 1fr; } .maskottchen-bilder { justify-content: center; } }

/* CTA */
.cta { border-radius: calc(var(--radius) * 1.5); padding: clamp(2rem, 5vw, 3.8rem); background: radial-gradient(600px 300px at 90% 10%, rgba(90, 216, 255, .35), transparent 60%), linear-gradient(135deg, var(--koenig) 0%, #1a3aa8 50%, var(--nacht-2) 100%); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; box-shadow: var(--schatten-blau); overflow: hidden; position: relative; }
.cta h2 { margin-bottom: .35em; }
.cta p { color: #d6e0ff; margin: 0; max-width: 36em; }
.cta img { width: clamp(110px, 14vw, 170px); height: auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .35)); }
.cta .knopf-reihe { margin-top: 1.6rem; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } .cta img { display: none; } }

/* FAQ */
.faq { display: grid; gap: .75rem; }
.faq details { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 0 1.3rem; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: #b9c9f5; box-shadow: var(--schatten); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.2rem 1.1rem 0; font-family: var(--display); font-weight: 600; font-size: 1.08rem; position: relative; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .2rem; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 1.2rem; color: var(--text-2); }
.faq details > div p:last-child { margin-bottom: 0; }
.faq-gruppe { margin-top: 3rem; }
.faq-gruppe:first-child { margin-top: 0; }
.faq-gruppe > h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 1rem; }

/* Fliesstext / Artikel */
.artikel { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--abschnitt); }
.prosa { font-size: 1.075rem; }
.prosa h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); margin-top: 2.4em; }
.prosa h3 { margin-top: 1.8em; }
.prosa p, .prosa li { color: #26304f; }
.prosa li { margin-bottom: .4em; }
.prosa blockquote { margin: 2rem 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--blau); background: var(--papier-2); border-radius: 0 12px 12px 0; font-family: var(--display); font-size: 1.2rem; line-height: 1.45; color: var(--text); }
.prosa blockquote p { margin: 0; color: inherit; }
.kurz { background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--blau); border-radius: 12px; padding: 1.1rem 1.3rem; margin: 0 0 2.2rem; box-shadow: var(--schatten); }
.kurz strong { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blau); display: block; margin-bottom: .3rem; }
.kurz p { margin: 0; }
.kasten { background: var(--nacht); color: #dfe8ff; border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 2rem 0; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; }
.kasten img { width: 72px; height: auto; }
.kasten p { color: #c9d5fa !important; margin: 0; }
.kasten a { color: var(--glut); }
.kasten strong { color: #fff; }
@media (max-width: 560px) { .kasten { grid-template-columns: 1fr; } .kasten img { display: none; } }
.weiterlesen { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.weiterlesen h2 { font-size: 1.3rem; margin-top: 0; }
.artikel-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (max-width: 720px) { .artikel-liste { grid-template-columns: 1fr; } }
.artikel-liste .karte h3, .artikel-liste .karte h2 { font-size: 1.2rem; margin-bottom: .5em; }
.etikett { display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blau); background: var(--papier-2); border: 1px solid #d3defb; padding: .2rem .55rem; border-radius: 6px; margin-bottom: .9rem; }

/* Quellen */
.quellen-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.quellen-filter a { font-size: .88rem; text-decoration: none; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss); color: var(--text-2); }
.quellen-filter a:hover { border-color: var(--blau); color: var(--blau); }
.quellen-gruppe { margin-bottom: 3.5rem; }
.quellen-gruppe > h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); margin-bottom: .3em; }
.quellen-gruppe > p { color: var(--text-2); max-width: 46em; }
.quelle { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.5rem; padding: 1.15rem 0; border-top: 1px solid var(--linie); }
.quelle:last-child { border-bottom: 1px solid var(--linie); }
.quelle-titel { font-family: var(--display); font-weight: 600; font-size: 1.04rem; line-height: 1.35; color: var(--text); letter-spacing: -.01em; }
.quelle-autoren { font-size: var(--fs-klein); color: var(--text-2); }
.quelle-wo { font-size: var(--fs-klein); color: var(--text-3); margin-top: .25rem; }
.quelle-wo b { color: var(--text-2); font-weight: 600; }
.quelle-doi { grid-column: 2; grid-row: 1 / span 3; align-self: start; text-align: right; font-family: var(--mono); font-size: .78rem; }
.quelle-doi a { display: inline-block; text-decoration: none; background: var(--papier-2); border: 1px solid #d3defb; padding: .3rem .6rem; border-radius: 8px; color: var(--blau); word-break: break-all; max-width: 22ch; text-align: left; }
.quelle-doi a:hover { background: var(--blau); color: #fff; border-color: var(--blau); }
.status { display: inline-block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .45rem; border-radius: 5px; margin-left: .4rem; vertical-align: .12em; font-weight: 600; }
.status--ein { background: #dcfce7; color: #166534; }
.status--grund { background: #e0e9ff; color: #1e3a8a; }
.status--pruef { background: #fef3c7; color: #92400e; }
@media (max-width: 680px) { .quelle { grid-template-columns: 1fr; } .quelle-doi { grid-column: 1; grid-row: auto; text-align: left; } .quelle-doi a { max-width: none; } }

/* Rechtstexte */
.recht h2 { font-size: 1.35rem; margin-top: 2em; }
.recht p, .recht li { font-size: 1rem; color: #26304f; }

/* Fusszeile */
.fuss { background: var(--nacht); color: #9fb0e0; padding-block: 3.5rem 2rem; font-size: var(--fs-klein); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fuss h2 { font-size: .8rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 1rem; font-weight: 600; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.fuss a { color: #c9d5fa; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss .marke { margin-bottom: 1rem; }
.fuss-unten { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie-dunkel); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--fs-mini); color: #7f90c4; }
@media (max-width: 860px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss-raster { grid-template-columns: 1fr; } }

/* Einblend-Animation */
.auftauchen { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.auftauchen.da { opacity: 1; transform: none; }
.no-js .auftauchen { opacity: 1; transform: none; }

/* 404 */
.leer-seite { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 4rem var(--rand); }
.leer-seite img { width: 160px; margin: 0 auto 1.5rem; }


/* ---- Anschluss direkt unter dem Held ---- */
.abschnitt--anschluss { background: radial-gradient(900px 500px at 15% 0%, rgba(59, 108, 246, .22), transparent 60%), linear-gradient(180deg, var(--nacht-2) 0%, var(--nacht) 100%); border-top: 1px solid rgba(143, 179, 255, .12); }

/* ---- Idee: Gehirn-Grafik ---- */
.idee { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .idee { grid-template-columns: 1fr; } }
.idee-bild { margin: 0; }
.idee-bild figcaption { margin-top: .8rem; font-family: var(--mono); font-size: .78rem; color: var(--text-3); text-align: center; }
.gehirn { width: 100%; height: auto; display: block; }
.g-pille rect { stroke-width: 1; }
.g-pille text { font-family: var(--mono); font-size: 13px; text-anchor: middle; font-weight: 600; }
.g-pille--m rect { fill: #fff; stroke: #c9d4ee; }
.g-pille--m text { fill: #5b6788; }
.g-pille--h rect { fill: var(--blau); stroke: #4f7bff; filter: drop-shadow(0 4px 10px rgba(29, 78, 216, .35)); }
.g-pille--h text { fill: #fff; }
.g-grenze { stroke: var(--blau); stroke-width: 2; stroke-dasharray: 6 6; }
.g-titel { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .06em; }
.g-titel--m { fill: #8a96b8; }
.g-titel--h { fill: var(--blau); }
.idee-text p { color: var(--text-2); }
.idee-text p b { color: var(--text); }
.haken { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.haken li { position: relative; padding-left: 2rem; color: var(--text-2); }
.haken li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat; box-shadow: 0 0 0 4px rgba(29, 78, 216, .12); }
.haken b { color: var(--text); }

/* ---- Skalierung ---- */
.skala { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
@media (max-width: 900px) { .skala { grid-template-columns: 1fr; } }
.skala-bild { margin: 0; padding: clamp(.8rem, 2vw, 1.4rem); }
.skalierung { width: 100%; height: auto; display: block; }
.s-raster line { stroke: #e4eaf8; stroke-width: 1; }
.s-achse { stroke: #9aa7c8; stroke-width: 1.5; }
.s-achsentext { font-family: var(--mono); font-size: 12px; fill: var(--text-3); }
.s-linie { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 0; }
.s-linie--alt { stroke: #f26d8a; }
.s-linie--hebby { stroke: var(--blau); }
.da .s-linie { animation: s-zeichnen 1.8s ease-out both; }
.da .s-linie--hebby { animation-delay: .4s; }
@keyframes s-zeichnen { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
.s-flaeche { opacity: 1; }
.da .s-flaeche { animation: s-ein 1s ease 1.2s both; }
@keyframes s-ein { from { opacity: 0; } }
.s-etikett { font-family: var(--display); font-weight: 700; font-size: 14px; }
.s-etikett--alt { fill: #d94f6e; }
.s-etikett--hebby { fill: var(--blau); font-size: 17px; }
.s-ersparnis { font-family: var(--mono); font-size: 13px; font-weight: 600; fill: #b5405c; letter-spacing: .04em; }
.skala-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.skala-punkte li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.skala-punkte .symbol { margin: 0; }
.skala-punkte h3 { font-size: 1.1rem; margin-bottom: .3em; }
.skala-punkte p { margin: 0; font-size: var(--fs-klein); color: var(--text-2); }
.mythos { margin-top: clamp(2rem, 4vw, 3rem); display: flex; gap: 1.4rem; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius); background: linear-gradient(135deg, var(--nacht) 0%, var(--nacht-3) 100%); color: #c3cff2; box-shadow: var(--schatten-blau); }
.mythos img { width: 64px; height: auto; flex: none; }
.mythos p { margin: 0; }
.mythos b { color: var(--glut); }
.mythos-zitat { font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); color: #fff; line-height: 1.3; margin-bottom: .7rem !important; letter-spacing: -.01em; text-decoration: line-through; text-decoration-color: rgba(255, 157, 176, .85); text-decoration-thickness: 2px; }
@media (max-width: 600px) { .mythos { flex-direction: column; } .mythos img { width: 52px; } }

/* ---- Token-Band ---- */
.token-band { border-radius: calc(var(--radius) * 1.5); padding: clamp(1.6rem, 4vw, 3.2rem); color: #c3cff2; background: radial-gradient(700px 380px at 0% 0%, rgba(90, 216, 255, .18), transparent 60%), radial-gradient(800px 420px at 100% 100%, rgba(59, 108, 246, .45), transparent 60%), linear-gradient(160deg, var(--nacht) 0%, var(--nacht-2) 100%); box-shadow: var(--schatten-blau); }
.token-band h2, .token-band h3 { color: #fff; }
.token-band .kenn { color: var(--glut); }
.token-band .lead { color: #c3cff2; }
.token-kopf { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.token-zahl { display: grid; justify-items: center; text-align: center; padding: 1.4rem 1.8rem; border-radius: var(--radius); border: 1px solid rgba(143, 179, 255, .28); background: rgba(143, 179, 255, .07); }
.token-zahl span, .token-zahl small { font-family: var(--mono); font-size: .8rem; color: var(--glut-2); text-transform: uppercase; letter-spacing: .08em; }
.token-zahl b { font-family: var(--display); font-size: clamp(3.4rem, 2rem + 5vw, 6rem); line-height: 1; letter-spacing: -.05em; background: linear-gradient(92deg, #fff 0%, var(--glut-2) 50%, var(--glut) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .1em 0; }
.token-punkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.token-punkte > div { padding: 1.3rem; border-radius: var(--radius); border: 1px solid var(--linie-dunkel); background: rgba(143, 179, 255, .06); }
.token-punkte .symbol { background: linear-gradient(135deg, rgba(90, 216, 255, .18), rgba(59, 108, 246, .22)); color: var(--glut); border-color: rgba(143, 179, 255, .3); }
.token-punkte h3 { font-size: 1.08rem; margin-bottom: .35em; }
.token-punkte p { margin: 0; font-size: var(--fs-klein); color: #b7c5ee; }
.token-fuss { margin: 1.6rem 0 0; font-size: var(--fs-klein); color: #93a3d4; max-width: 52rem; }
@media (max-width: 860px) { .token-kopf { grid-template-columns: 1fr; } .token-zahl { justify-self: start; } .token-punkte { grid-template-columns: 1fr; } }

/* ---- Wechsel hell/dunkel: helle Prinzipien, dunkles Token-Band ---- */
.prinzip:not(.karte--nacht) small { color: var(--blau); }
.zahlen--hell div { border-left-color: var(--blau); }
.zahlen--hell b { color: var(--text); }
.zahlen--hell span { color: var(--text-2); }
.abschnitt--token .token-band { background: none; box-shadow: none; padding: 0; border-radius: 0; }

/* ---- Ueberschriften ausgewogen umbrechen ---- */
h1, h2 { text-wrap: balance; }

/* ---- Multi-Agent ---- */
.multi { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .multi { grid-template-columns: 1fr; } }
.multi-punkte { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.multi-punkte li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.multi-punkte .symbol { margin: 0; background: linear-gradient(135deg, rgba(90, 216, 255, .18), rgba(59, 108, 246, .22)); color: var(--glut); border-color: rgba(143, 179, 255, .3); }
.multi-punkte h3 { font-size: 1.1rem; margin-bottom: .3em; }
.multi-punkte p { margin: 0; font-size: var(--fs-klein); }
.multi-grafik { width: 100%; height: auto; display: block; overflow: visible; }
.m-ring { fill: none; stroke: rgba(143, 179, 255, .18); stroke-width: 1.5; stroke-dasharray: 3 7; }
.m-linie { stroke: rgba(143, 179, 255, .45); stroke-width: 2; }
.m-linie--teil { stroke-dasharray: 6 6; }
.m-puls { fill: var(--glut); filter: drop-shadow(0 0 6px rgba(90, 216, 255, .9)); }
.m-kern { fill: #0b1a4a; stroke: var(--glut-2); stroke-width: 2; }
.m-kern-text { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; fill: var(--glut); text-anchor: middle; }
.m-agent rect { fill: rgba(11, 26, 74, .92); stroke: rgba(143, 179, 255, .5); stroke-width: 1.2; }
.m-agent text { font-family: var(--display); font-weight: 600; font-size: 15px; fill: #fff; text-anchor: middle; }
.m-led { fill: #5ee6a0; }
.m-schloss rect { fill: var(--gold); }
.m-schloss path { stroke: var(--gold); stroke-width: 3; }

/* ---- Ergaenzt-Abschnitt auf dunklem Grund ---- */
.abschnitt--nacht .idee-text p { color: #c3cff2; }
.abschnitt--nacht .idee-text p b, .abschnitt--nacht .haken b { color: #fff; }
.abschnitt--nacht .haken li { color: #c3cff2; }
.abschnitt--nacht .haken li::before { background-color: var(--blau-hell); box-shadow: 0 0 0 4px rgba(90, 216, 255, .15); }
.abschnitt--nacht .idee-bild figcaption { color: #93a3d4; }
.abschnitt--nacht .gehirn { filter: drop-shadow(0 20px 50px rgba(59, 108, 246, .35)); }
.abschnitt--nacht .g-titel--h { fill: var(--glut); }
.abschnitt--nacht .g-titel--m { fill: #c3cff2; }

/* ---- Token-Seite ---- */
.token-zahl b { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); white-space: nowrap; }
.token-fuss .knopf svg { width: 18px; height: 18px; }
.last-kenn { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--glut); }
.last-zahl { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.03em; color: #fff !important; margin: .3rem 0 .6rem; }
.rechnung { max-width: 44rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); box-shadow: var(--schatten); overflow: hidden; }
.rechnung-zeile { display: grid; grid-template-columns: 1fr auto 9.5rem; gap: 1rem; align-items: baseline; padding: .95rem 1.4rem; border-bottom: 1px solid var(--linie); }
.rechnung-zeile span { color: var(--text-2); }
.rechnung-zeile b { font-family: var(--display); font-size: 1.5rem; letter-spacing: -.02em; color: var(--text); text-align: right; }
.rechnung-zeile small { font-family: var(--mono); font-size: .75rem; color: var(--text-3); }
.rechnung-zeile--summe { background: linear-gradient(90deg, #eef3ff, #fff); border-bottom: 0; }
.rechnung-zeile--summe span { color: var(--text); font-weight: 600; }
.rechnung-zeile--summe b { color: var(--blau); }
@media (max-width: 600px) { .rechnung-zeile { grid-template-columns: 1fr auto; } .rechnung-zeile small { grid-column: 1 / -1; margin-top: -.6rem; } }
.mythos-fakt { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: #fff; line-height: 1.3; margin-bottom: .7rem !important; }
.zwei-spalten-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.zwei-spalten-text p { color: var(--text-2); }
@media (max-width: 860px) { .zwei-spalten-text { grid-template-columns: 1fr; } }
.methode { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.methode li { padding: 1.3rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--linie-dunkel); background: rgba(143, 179, 255, .06); color: #c3cff2; font-size: var(--fs-klein); }
.methode b { display: block; color: #fff; font-family: var(--display); font-size: 1.08rem; margin-bottom: .35rem; }
@media (max-width: 760px) { .methode { grid-template-columns: 1fr; } }
.methode-fuss { margin-top: 1.6rem; font-family: var(--mono); font-size: .76rem; line-height: 1.7; color: #93a3d4 !important; max-width: 60rem; }

/* ---- Schlanker Kontext: Vergleichsbalken ---- */
.kontext-vergleich { display: grid; gap: 1.1rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--radius); border: 1px solid var(--linie-dunkel); background: rgba(143, 179, 255, .05); }
.kv-zeile { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; }
.kv-titel { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #93a3d4; }
.kv-titel--hebby { color: var(--glut); }
.kv-balken { display: flex; height: 3.1rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(143, 179, 255, .25); }
.kv-balken i { flex: 0 0 var(--b); display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--mono); font-size: .74rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .4rem; border-right: 1px solid rgba(6, 15, 46, .5); }
.kv-claude { background: #c0476a; } .kv-memory { background: #9a3d68; } .kv-regeln { background: #6c3a6e; }
.kv-aufgabe { background: var(--blau); } .kv-hebby { background: linear-gradient(135deg, var(--glut), #3b6cf6); color: #06122f !important; }
.kv-frei { background: repeating-linear-gradient(135deg, rgba(143, 179, 255, .06) 0 8px, transparent 8px 16px); color: #93a3d4 !important; border-right: 0 !important; }
.kv-frei--hebby { color: var(--glut) !important; }
@media (max-width: 640px) { .kv-zeile { grid-template-columns: 1fr; gap: .4rem; } .kv-balken i { font-size: .62rem; } }
.karte .last-zahl, .karte--nacht .last-zahl { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1.1; color: #fff; margin: .4rem 0 .7rem; }

/* ---- Bilanz (Token-Seite) ---- */
.bilanz { padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--radius); border: 1px solid var(--linie); background: var(--weiss); box-shadow: var(--schatten); }
.bilanz-titel { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 1.2rem; }
.bilanz-zeile { display: grid; grid-template-columns: 7.5rem 1fr 5rem; gap: 1rem; align-items: center; margin-bottom: .9rem; }
.bilanz-name { font-family: var(--display); font-weight: 600; color: var(--text-2); }
.bilanz-name--hebby { color: var(--blau); }
.bilanz-balken { display: flex; height: 3rem; border-radius: 12px; overflow: hidden; background: #f1f4fb; }
.bilanz-balken i, .bilanz-legende i { display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--mono); font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.bilanz-balken i { flex: 0 0 var(--b); }
.bb-arbeit { background: #8794b8; }
.bilanz-name--hebby + .bilanz-balken .bb-arbeit { background: var(--blau); }
.bb-hebby { background: linear-gradient(135deg, var(--glut), #3b6cf6); }
.bb-gespart { background: repeating-linear-gradient(135deg, #d6f5e4 0 7px, #f3fcf7 7px 14px); border-left: 2px dashed #2fa36b; }
.bilanz-wert { font-family: var(--display); font-size: 1.5rem; letter-spacing: -.02em; color: var(--text-2); text-align: right; }
.bilanz-wert--hebby { color: var(--blau); }
.bilanz-legende { list-style: none; margin: 1.3rem 0 0; padding: 0 0 0 8.5rem; display: grid; gap: .55rem; }
.bilanz-legende li { display: flex; gap: .7rem; align-items: center; color: var(--text-2); font-size: var(--fs-klein); }
.bilanz-legende i { flex: none; width: 1.6rem; height: 1rem; border-radius: 4px; }
.bilanz-legende b { color: var(--text); }
.bilanz-ergebnis { margin-top: 1.4rem; padding: 1rem 1.3rem; border-radius: 12px; background: linear-gradient(90deg, #e7f8ef, #f6fdf9); border: 1px solid #bfe9d2; font-size: 1.05rem; color: #24543d; }
.bilanz-ergebnis b { font-family: var(--display); font-size: 1.35rem; color: #1f8a57; margin-right: .3rem; }
.spar-kenn { display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #1f8a57; background: #e7f8ef; border: 1px solid #bfe9d2; padding: .2rem .55rem; border-radius: 999px; margin-bottom: .7rem; }
@media (max-width: 640px) { .bilanz-zeile { grid-template-columns: 1fr auto; } .bilanz-balken { grid-column: 1 / -1; grid-row: 2; } .bilanz-legende { padding-left: 0; } .bilanz-balken i { font-size: .68rem; } }
.bb-arbeit--hebby { background: var(--blau) !important; }
.bilanz-balken .bb-gespart { color: #1f8a57; font-size: .72rem; }
.bilanz-legende .bb-weg { background: #fff; border: 2px dashed #8794b8; position: relative; }
.bilanz-legende .bb-weg::after { content: ""; position: absolute; left: 15%; right: 15%; top: 50%; height: 2px; background: #c0476a; transform: rotate(-20deg); }
.methode .methode-stark { border-color: rgba(90, 216, 255, .55); background: linear-gradient(135deg, rgba(90, 216, 255, .14), rgba(59, 108, 246, .14)); }
.methode .methode-stark b { color: var(--glut); }
.urteil { margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--radius); border: 1px solid rgba(90, 216, 255, .35); background: radial-gradient(600px 240px at 0% 0%, rgba(90, 216, 255, .16), transparent 70%), rgba(143, 179, 255, .06); }
.urteil p { margin: 0; color: #c3cff2; font-size: var(--fs-lead); }
.urteil .urteil-gross { margin-top: .4rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: balance; }

/* ---- Preise ---- */
.preis-hinweis { display: flex; gap: .7rem; align-items: center; justify-content: center; margin: 0 auto 2.2rem; padding: .8rem 1.2rem; max-width: 40rem; border-radius: 999px; background: #eef3ff; border: 1px solid #cfdcff; color: var(--text-2); font-size: var(--fs-klein); text-align: center; }
.preis-hinweis svg { width: 18px; height: 18px; color: var(--blau); flex: none; }
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
@media (max-width: 960px) { .preise { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
.preis-karte { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2.1rem); border-radius: calc(var(--radius) * 1.25); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.preis-karte--top { border: 2px solid var(--blau); box-shadow: var(--schatten-blau); background: linear-gradient(180deg, #f3f6ff, #fff 40%); }
@media (min-width: 961px) { .preis-karte--top { transform: translateY(-12px); } }
.preis-band { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); margin: 0; padding: .25rem .9rem; border-radius: 999px; background: var(--blau); color: #fff; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.preis-name { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--text); margin: 0 0 .3rem; }
.preis-fuer { color: var(--text-2); font-size: var(--fs-klein); min-height: 3.2em; margin: 0 0 1rem; }
.preis-betrag { display: flex; align-items: baseline; gap: .45rem; margin: 0; }
.preis-betrag b { font-family: var(--display); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); letter-spacing: -.04em; line-height: 1; color: var(--text); }
.preis-karte--top .preis-betrag b { color: var(--blau); }
.preis-betrag span { color: var(--text-3); font-size: var(--fs-klein); }
.preis-unter { margin: .4rem 0 1.4rem; font-family: var(--mono); font-size: .76rem; color: var(--text-3); }
.preis-karte .knopf { justify-content: center; }
.knopf--rand-blau { --k-bg: transparent; --k-fg: var(--blau); border-color: var(--blau); box-shadow: none; }
.knopf--rand-blau:hover { background: #eef3ff; color: var(--blau); }
.preis-liste { list-style: none; margin: 1.5rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--linie); display: grid; gap: .65rem; }
.preis-liste li { position: relative; padding-left: 1.7rem; color: var(--text-2); font-size: var(--fs-klein); }
.preis-liste li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/68% no-repeat; }
.preis-fuss { margin-top: 1.8rem; text-align: center; font-size: var(--fs-klein); color: var(--text-3); }
.vergleich { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie-dunkel); }
.vergleich-zeile { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--linie-dunkel); color: #c3cff2; align-items: center; }
.vergleich-zeile:last-child { border-bottom: 0; }
.vergleich-kopf { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #93a3d4; background: rgba(143, 179, 255, .05); }
.vergleich-zeile--hebby { background: linear-gradient(90deg, rgba(90, 216, 255, .16), rgba(59, 108, 246, .12)); color: #fff; }
.vergleich-zeile--hebby b { color: #fff; font-family: var(--display); font-size: 1.1rem; }
.vergleich-zeile--hebby span:last-child { color: var(--glut); display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.vergleich-zeile svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .vergleich-zeile { grid-template-columns: 1fr 1fr; } .vergleich-zeile span:last-child { grid-column: 1 / -1; font-size: .85rem; } }


/* ===================== Startseite: Werbespot ===================== */
.spot { min-height: min(calc(100svh - var(--leiste-h)), 980px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.6rem, 3vw, 2.4rem); }
.spot > .wrap { min-width: 0; }
.spot-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.spot h1 { font-size: clamp(2.6rem, 1.2rem + 5vw, 5.2rem); line-height: 1.02; margin-bottom: .4em; }
.spot .lead { max-width: 30em; }
@media (max-width: 960px) { .spot { min-height: 0; } .spot-raster { grid-template-columns: 1fr; } }

.demo { position: relative; padding-top: 2.6rem; }
.demo-hebby { position: absolute; right: 1.4rem; top: 0; width: 76px; height: auto; z-index: 0; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); animation: schweben 6s ease-in-out infinite; }
.demo .terminal { position: relative; z-index: 1; font-size: clamp(.74rem, .66rem + .3vw, .86rem); transition: border-color .5s ease, box-shadow .5s ease; }
.demo pre { min-height: 21.5em; transition: opacity .35s ease; }
.demo pre.weg { opacity: 0; }
.demo-modus { margin-left: auto; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .18rem .65rem; border-radius: 999px; border: 1px solid currentColor; transition: color .4s ease; }
.demo--ohne .demo-modus { color: var(--rosa); }
.demo--mit .demo-modus { color: var(--glut); }
.demo--ohne .terminal { border-color: rgba(255, 157, 176, .4); }
.demo--mit .terminal { border-color: rgba(90, 216, 255, .55); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 70px rgba(90, 216, 255, .16); }
.demo .neu { animation: s-ein .35s ease; }
.demo-cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; background: var(--glut); vertical-align: -.18em; animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }

.laufband { display: flex; align-items: center; gap: 1.6rem; margin-top: clamp(2.2rem, 5vw, 3.6rem); padding-top: 1.3rem; border-top: 1px solid var(--linie-dunkel); }
.laufband-titel { font-family: var(--mono); font-size: var(--fs-mini); letter-spacing: .08em; text-transform: uppercase; color: var(--glut-2); white-space: nowrap; }
.laufband-fenster { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.laufband-spur { display: flex; width: max-content; animation: laufen 30s linear infinite; }
.laufband-spur > div { display: flex; gap: 2.6rem; padding-right: 2.6rem; }
.laufband-spur span { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: #dfe8ff; white-space: nowrap; }
.laufband-spur span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--glut); box-shadow: 0 0 10px var(--glut); }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .laufband { flex-direction: column; align-items: flex-start; gap: .8rem; } .laufband-fenster { width: 100%; } }

.wandel { display: grid; margin-top: clamp(1.6rem, 3vw, 2.6rem); border-top: 1px solid var(--linie); }
.wandel-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(.8rem, 3vw, 2.4rem); padding-block: clamp(1rem, 2.4vw, 1.6rem); border-bottom: 1px solid var(--linie); }
.wandel-alt, .wandel-neu { font-family: var(--display); font-size: clamp(1.15rem, .85rem + 1.2vw, 1.75rem); line-height: 1.25; letter-spacing: -.02em; }
.wandel-alt { font-weight: 600; color: var(--text); transition: color .6s ease calc(var(--i) * .45s + .3s); }
.wandel-alt s { text-decoration: none; background: linear-gradient(var(--rosa), var(--rosa)) no-repeat 0 58% / 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .6s ease calc(var(--i) * .45s + .3s); }
.wandel-pfeil { color: var(--blau); opacity: 0; transform: translateX(-12px); transition: opacity .5s ease calc(var(--i) * .45s + .75s), transform .5s ease calc(var(--i) * .45s + .75s); }
.wandel-pfeil svg { width: 28px; height: 28px; }
.wandel-neu { font-weight: 700; color: var(--blau); opacity: 0; transform: translateX(-16px); transition: opacity .6s ease calc(var(--i) * .45s + .85s), transform .6s ease calc(var(--i) * .45s + .85s); }
.wandel.da .wandel-alt { color: var(--text-3); }
.wandel.da .wandel-alt s { background-size: 100% 3px; }
.wandel.da .wandel-pfeil, .wandel.da .wandel-neu { opacity: 1; transform: none; }
.no-js .wandel-pfeil, .no-js .wandel-neu { opacity: 1; transform: none; }
@media (max-width: 760px) { .wandel-zeile { grid-template-columns: 1fr; gap: .35rem; } .wandel-pfeil { display: none; } }

.vorteile { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.v-reiter { display: grid; gap: .7rem; }
.v-reiter button { appearance: none; font: inherit; text-align: left; color: inherit; cursor: pointer; display: block; width: 100%; padding: 1.05rem 1.3rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--linie-dunkel); background: rgba(143, 179, 255, .04); position: relative; overflow: hidden; transition: background .3s ease, border-color .3s ease; }
.v-reiter button:hover { background: rgba(143, 179, 255, .08); }
.v-reiter b { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 650; color: #fff; letter-spacing: -.01em; }
.v-reiter b svg { width: 22px; height: 22px; flex: none; color: var(--glut); }
.v-reiter small { display: block; color: #b7c5ee; font-size: var(--fs-klein); line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .45s ease, margin .45s ease; }
.v-reiter [aria-selected="true"] { background: rgba(143, 179, 255, .1); border-color: rgba(90, 216, 255, .5); }
.v-reiter [aria-selected="true"] small { max-height: 7em; opacity: 1; margin-top: .4rem; }
.v-reiter i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--blau-hell), var(--glut)); }
.v-reiter [aria-selected="true"] i { animation: v-lauf 7s linear forwards; }
.vorteile.pause .v-reiter i { animation-play-state: paused; }
@keyframes v-lauf { to { width: 100%; } }
.v-buehne { display: grid; }
.v-bild { grid-area: 1 / 1; display: grid; gap: 1rem; align-content: center; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.v-bild.aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease, visibility 0s; }
.v-karte { margin: 0; }
.v-bild .multi-grafik { max-height: 430px; margin-inline: auto; }
.v-bild .gehirn { max-height: 400px; }
.v-marken { position: absolute; left: .9rem; right: .9rem; bottom: .9rem; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.v-marken li { font-family: var(--mono); font-size: .72rem; color: #dfe8ff; padding: .25rem .6rem; border-radius: 999px; background: rgba(11, 26, 74, .8); border: 1px solid rgba(143, 179, 255, .3); }
.v-mehr { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--display); font-weight: 600; color: var(--glut); text-decoration: none; }
.v-mehr:hover { color: #fff; }
.v-mehr svg { width: 1em; height: 1em; }
.v-hell { background: #fff; border-radius: var(--radius); padding: clamp(.8rem, 2vw, 1.4rem); box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.v-spar { border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(143, 179, 255, .25); background: radial-gradient(500px 260px at 90% 0%, rgba(90, 216, 255, .18), transparent 60%), rgba(5, 11, 34, .7); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.v-gross { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; }
.v-gross b { font-family: var(--display); font-size: clamp(3.2rem, 2rem + 4vw, 5rem); line-height: 1; letter-spacing: -.05em; background: linear-gradient(92deg, #fff, var(--glut)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.v-gross span { color: #c3cff2; font-size: var(--fs-klein); line-height: 1.5; }
.v-spar-titel { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--glut-2); margin-bottom: .9rem; }
.v-balken { display: grid; grid-template-columns: 6.5rem 1fr 3.4rem; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.v-balken span { color: #c3cff2; font-size: var(--fs-klein); }
.v-balken div { height: 18px; border-radius: 999px; background: rgba(143, 179, 255, .1); overflow: hidden; }
.v-balken i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7a86ad, #a6b0cf); transition: width 1.3s cubic-bezier(.2, .8, .2, 1) .35s; }
.v-balken--hebby i { background: linear-gradient(90deg, var(--blau-hell), var(--glut)); }
.v-bild.aktiv .v-balken i { width: var(--b); }
.v-balken em { font-style: normal; font-family: var(--display); font-weight: 700; color: #fff; text-align: right; }
.v-balken--hebby span, .v-balken--hebby em { color: var(--glut); }
.v-spar-ergebnis { margin: 1.2rem 0 0; color: #c3cff2; }
.v-spar-ergebnis b { color: #fff; font-family: var(--display); font-size: 1.25rem; }
@media (max-width: 900px) { .vorteile { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .v-karte { aspect-ratio: auto; } .v-karte canvas { aspect-ratio: 4 / 3; height: auto; } .v-marken { position: static; padding: 0 .8rem .9rem; } }

.beweis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.beweis > div { padding: 1.5rem 1.3rem; border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.beweis b { display: block; font-family: var(--display); font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.3rem); line-height: 1; letter-spacing: -.04em; margin-bottom: .55rem; background: linear-gradient(92deg, var(--blau), #2bb7e8); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.beweis span { color: var(--text-2); font-size: var(--fs-klein); line-height: 1.5; display: block; }
@media (max-width: 900px) { .beweis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .beweis { grid-template-columns: 1fr; } }
.entdecken { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* Token-Effizienz: Guetestufen */
.stufe-kenn { display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--blau); background: var(--papier-2); border: 1px solid #cfdcff; border-radius: 999px; padding: .2rem .65rem; margin-bottom: .9rem; }
.karte--stufe { border: 1.5px solid var(--blau); box-shadow: var(--schatten-blau); }
.karte--stufe .stufe-kenn { color: #fff; background: var(--blau); border-color: var(--blau); }