/* ═══════════════════════════════════════════════════════════════════════════
   Oeffentliche Seiten (Gaeste) — seit 27.09.2026

   Gilt nur fuer body:not(.logged-in): Startseite, Rechtstexte, Login,
   Registrierung/Kaufstrecke. Die App der Eingeloggten bleibt unberuehrt.

   Marke = Schwarz/Weiss. Blau nur als Schrift-Akzent im Verlauf des Logos
   (#1074F0 -> #34C4FC). Hell/Dunkel ueber html.elv-light wie ueberall im
   Theme; ohne gespeicherte Wahl folgt der Modus fuer Gaeste dem Geraet
   (Inline-Skript in functions.php).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ─────────────────────────────────────────────────────────── */
/* Spezifitaet: das Theme setzt seine Farben auf 'html:not(.elv-light) body' (0,1,2);
   ohne das html-Praefix verloren diese Regeln im Dunkelmodus. */
html:not(.elv-light) body:not(.logged-in) {
    --p-bg: #0A0C10; --p-paper: #141518; --p-tint: #1C1D21;
    --p-ink: #FAFAFA; --p-body: #B4B4BC; --p-muted: #8E8E96; --p-line: #26272C;
    --p-mint: #4ADE80; --p-red: #F87171; --p-orange: #F7941D;
    --p-blue: #1074F0; --p-blue2: #34C4FC;
    --p-band: #000000; --p-band-line: #26272C; --p-band-muted: #A1A1AA;
    --p-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.7);
    --p-ease: cubic-bezier(.16,1,.3,1);
    --p-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* App-Tokens fuer die Unterseiten neutral ziehen (vorher Navy + Blau) */
    --elv-bg: #0A0C10; --elv-card: #141518; --elv-surface: #1A1B1F; --elv-surface-2: #222328;
    --elv-input-bg: #141518; --elv-sidebar-bg: #141518;
    --elv-text: #FAFAFA; --elv-text-secondary: #B4B4BC; --elv-text-muted: #9A9AA2;
    --elv-primary: #FAFAFA; --elv-primary-dark: #E4E4E7; --elv-primary-ink: #0A0C10;
    --elv-link: #FAFAFA; --elv-gold: #FAFAFA;
    --elv-primary-soft: rgba(255,255,255,.08); --elv-primary-rgb: 255,255,255; --elv-gold-rgb: 250,250,250;
    background: var(--p-bg);
}
html.elv-light body:not(.logged-in) {
    --p-bg: #FAFAF9; --p-paper: #FFFFFF; --p-tint: #F1F1EF;
    --p-ink: #0A0C10; --p-body: #46464E; --p-muted: #6B6B73; --p-line: #E5E4E0;
    --p-mint: #15803D; --p-red: #C2410C; --p-orange: #E07A0E;
    --p-blue: #1074F0; --p-blue2: #1074F0;   /* Cyan waere auf Hell 1,9:1 */
    --p-band: #0A0C10;
    --p-shadow: 0 1px 2px rgba(10,12,16,.05), 0 12px 32px -14px rgba(10,12,16,.18);

    --elv-bg: #FAFAF9; --elv-card: #FFFFFF; --elv-surface: #F7F7F5; --elv-surface-2: #F0EFEB;
    --elv-input-bg: #FFFFFF; --elv-sidebar-bg: #FFFFFF;
    --elv-text: #0A0C10; --elv-text-secondary: #46464E; --elv-text-muted: #6B6B73;
    --elv-primary: #0A0C10; --elv-primary-dark: #26272C; --elv-primary-ink: #FFFFFF;
    --elv-link: #0A0C10; --elv-gold: #0A0C10;
    --elv-primary-soft: rgba(10,12,16,.06); --elv-primary-rgb: 10,12,16; --elv-gold-rgb: 10,12,16;
}

/* Knoepfe, die Weiss fest eingetragen haben, folgen jetzt der Tinte */
body:not(.logged-in) .elv-auth-btn,
body:not(.logged-in) .elv-auth-step.active,
body:not(.logged-in) .elv-btn--primary,
body:not(.logged-in) .elv-skip-nav { color: var(--elv-primary-ink); }
body:not(.logged-in) .elv-auth-btn:hover { filter: none; opacity: .88; }
body:not(.logged-in) a:focus-visible,
body:not(.logged-in) button:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }

/* ─── 2. Grundbausteine ─────────────────────────────────────────────────── */
.pwrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 13px 22px; font: 600 .94rem/1 'Geist', sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .16s var(--p-ease), opacity .2s, border-color .2s; }
.pbtn:active { transform: scale(.97); }
.pbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--p-ease); }
.pbtn--p { background: var(--p-ink); color: var(--p-bg); }
.pbtn--s { background: var(--p-paper); color: var(--p-ink); border-color: var(--p-line); }
.pbtn--sm { padding: 10px 16px; font-size: .86rem; }
@media (hover: hover) and (pointer: fine) {
    .pbtn--p:hover { opacity: .86; }
    .pbtn--s:hover { border-color: var(--p-muted); }
    .pbtn:hover svg { transform: translateX(3px); }
}
.pacc { color: var(--p-blue); background: linear-gradient(100deg, var(--p-blue), var(--p-blue2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .pacc { background: none; -webkit-text-fill-color: currentColor; } }
.psr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── 3. Kopfzeile ──────────────────────────────────────────────────────── */
.pn { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: color-mix(in srgb, var(--p-bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; font-family: 'Geist', sans-serif; }
.pn.is-scrolled { border-bottom-color: var(--p-line); }
.pn-bar { display: flex; align-items: center; gap: 28px; height: 68px; }
.pn-logo { display: flex; align-items: center; }
.pn-logo img { height: 26px; width: auto; display: block; }
.pn-logo .l-dark { display: block; } .pn-logo .l-light { display: none; }
html.elv-light .pn-logo .l-dark { display: none; } html.elv-light .pn-logo .l-light { display: block; }
.pn-links { display: flex; gap: 26px; margin-left: auto; font-size: .9rem; }
.pn-links a { color: var(--p-body); text-decoration: none; }
.pn-right { display: flex; gap: 10px; align-items: center; }
.pn-lang { font-size: .82rem; font-weight: 600; color: var(--p-muted); border: 1px solid var(--p-line); border-radius: 999px; padding: 7px 11px; text-decoration: none; }
.pn-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--p-line); background: var(--p-paper); color: var(--p-ink); cursor: pointer; place-items: center; }
.pn-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.pn-drawer { border-top: 1px solid var(--p-line); background: var(--p-bg); padding: 12px 20px 20px; display: grid; gap: 4px; }
.pn-drawer[hidden] { display: none; }
.pn-drawer > a:not(.pbtn):not(.pn-lang) { padding: 12px 4px; font-weight: 500; color: var(--p-ink); text-decoration: none; border-bottom: 1px solid var(--p-line); }
.pn-drawer .pbtn { margin-top: 12px; }
.pn-drawer .pn-lang { justify-self: start; margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .pn-links a:hover { color: var(--p-ink); } }
@media (max-width: 860px) { .pn-links, .pn-hide-m { display: none; } .pn-right { margin-left: auto; } .pn-burger { display: grid; } }
@media (min-width: 861px) { .pn-drawer { display: none !important; } }
@media (max-width: 400px) { .pn .pbtn--sm svg { display: none; } .pn .pbtn--sm { padding: 10px 14px; } }

/* ─── 4. Footer ─────────────────────────────────────────────────────────── */
.pf { border-top: 1px solid var(--p-line); padding-block: 56px 28px; font-family: 'Geist', sans-serif; font-size: .84rem; color: var(--p-muted); background: var(--p-bg); }
.pf-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px 28px; }
.pf-brand .pn-logo img { height: 26px; }
.pf-brand p { font-size: .9rem; line-height: 1.65; color: var(--p-body); max-width: 30ch; margin: 16px 0 18px; }
.pf-lang { display: inline-flex; border: 1px solid var(--p-line); border-radius: 999px; padding: 3px; gap: 2px; }
.pf-lang a { font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--p-muted); min-height: 32px; display: inline-flex; align-items: center; }
.pf-lang a[aria-current="true"] { background: var(--p-ink); color: var(--p-bg); }
.pf h2 { font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink); margin: 4px 0 12px; }
.pf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pf nav a { font-size: .9rem; color: var(--p-body); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
@media (hover: hover) and (pointer: fine) { .pf nav a:hover { color: var(--p-ink); } }
.pf-disc { margin: 36px 0 0; padding: 16px 18px; border: 1px solid var(--p-line); border-radius: 14px; background: var(--p-paper); line-height: 1.6; font-size: .84rem; color: var(--p-body); }
.pf-disc strong { color: var(--p-ink); }
.pf-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--p-line); margin-top: 24px; padding-top: 18px; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr 1fr; } .pf-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pf-grid { grid-template-columns: 1fr; } }

/* Unterseiten bekommen etwas Luft zum Footer */
body:not(.logged-in) .elv-public-main { background: var(--p-bg); }

/* ─── 5. Startseite ─────────────────────────────────────────────────────── */
.nl { background: var(--p-bg); color: var(--p-ink); font-family: 'Geist', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.nl h1, .nl h2, .nl h3 { margin: 0; text-wrap: balance; letter-spacing: -.025em; line-height: 1.1; color: var(--p-ink); font-family: 'Geist', sans-serif; }
.nl p { margin: 0; }
.nl section { padding-block: 96px; }
.nl-eyebrow { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.nl-h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 800; margin-top: 12px; }
.nl-sub { color: var(--p-body); font-size: 1.06rem; max-width: 40rem; margin-top: 16px; }
.nl-center { text-align: center; } .nl-center .nl-sub { margin-inline: auto; }

/* Hero */
.nl-hero { padding-block: 56px 72px; }
.nl-hero .pwrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .nl-hero .pwrap { grid-template-columns: 1fr; gap: 48px; } }
.nl-hello { display: inline-flex; align-items: center; gap: 10px; background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 999px; padding: 6px 14px 6px 6px; font-size: .84rem; color: var(--p-body); box-shadow: var(--p-shadow); }
.nl-hello span { background: var(--p-ink); color: var(--p-bg); border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: .76rem; }
.nl-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); font-weight: 800; margin-top: 22px; }
.nl-hl { position: relative; white-space: nowrap; }
.nl-hl svg { position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .36em; overflow: visible; }
.nl-hl path { fill: none; stroke: var(--p-orange); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: nl-draw 1s .7s var(--p-ease) both; }
@keyframes nl-draw { from { stroke-dashoffset: 1; } }
.nl-lead { font-size: 1.14rem; color: var(--p-body); max-width: 34rem; margin-top: 22px !important; }
.nl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nl-promises { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.nl-promises li { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--p-body); background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 12px; padding: 8px 12px; }
.nl-promises svg, .nl-check { width: 16px; height: 16px; stroke: var(--p-mint); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nl-in > * { animation: nl-in .8s var(--p-ease) both; }
.nl-in > *:nth-child(2) { animation-delay: .06s; } .nl-in > *:nth-child(3) { animation-delay: .12s; } .nl-in > *:nth-child(4) { animation-delay: .18s; } .nl-in > *:nth-child(5) { animation-delay: .24s; }
@keyframes nl-in { from { opacity: .001; transform: translateY(16px); } }

/* Hero-Collage */
.nl-collage { position: relative; min-height: 470px; }
.nl-blob { position: absolute; inset: 6% 4% 4% 8%; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; background: radial-gradient(circle at 40% 40%, var(--p-tint), transparent 72%); }
.nl-ui { position: absolute; background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 18px; box-shadow: var(--p-shadow); padding: 16px; }
.nl-ui h4 { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.nl-float { animation: nl-float 7s ease-in-out infinite; }
.nl-f2 { animation-delay: -2.3s; } .nl-f3 { animation-delay: -4.6s; }
@keyframes nl-float { 50% { transform: translateY(-8px); } }
.nl-ui-lesson { left: 0; top: 10px; width: 51%; z-index: 2; }
.nl-les-t { font-weight: 700; font-size: 1.02rem; margin-top: 8px; letter-spacing: -.01em; }
.nl-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.nl-tag { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: var(--p-tint); color: var(--p-ink); }
.nl-tag--q { color: var(--p-body); }
.nl-parts { display: grid; gap: 6px; margin-top: 12px; }
.nl-parts div { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--p-body); }
.nl-chk { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.nl-chk.is-done { background: var(--p-mint); } .nl-chk.is-done svg { width: 10px; height: 10px; stroke: var(--p-bg); fill: none; stroke-width: 3; }
.nl-chk.is-now { border: 2px solid var(--p-blue); } .nl-chk.is-todo { border: 2px solid var(--p-line); }
.nl-bar { height: 6px; border-radius: 99px; background: var(--p-line); margin-top: 14px; overflow: hidden; }
.nl-bar i { display: block; height: 100%; width: 62%; border-radius: 99px; background: var(--p-ink); animation: nl-grow 1.4s .6s var(--p-ease) both; }
@keyframes nl-grow { from { width: 0; } }
.nl-ui-chart { right: 0; top: 70px; width: 47%; z-index: 1; padding-bottom: 12px; }
.nl-ui-chart svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.nl-cl { fill: none; stroke: var(--p-blue); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: nl-draw 1.8s .4s var(--p-ease) both; }
.nl-ui-note { left: 6%; bottom: 0; width: 66%; z-index: 3; }
.nl-note-q { font-size: .9rem; color: var(--p-ink); margin-top: 8px !important; font-weight: 500; }
.nl-note-a { font-size: .84rem; color: var(--p-body); margin-top: 6px !important; border-left: 3px solid var(--p-orange); padding-left: 10px; }
.nl-note-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: .74rem; color: var(--p-muted); }
.nl-sample { position: absolute; right: 2%; bottom: 8px; font-size: .72rem; color: var(--p-muted); }
@media (max-width: 560px) {
    .nl-collage { min-height: 0; display: grid; gap: 12px; }
    .nl-blob { display: none; } .nl-ui { position: static; width: auto; } .nl-float { animation: none; } .nl-sample { position: static; }
}

/* Haltung */
.nl-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 860px) { .nl-grid3 { grid-template-columns: 1fr; } }
.nl-card { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 20px; padding: 26px; transition: transform .25s var(--p-ease), box-shadow .25s; }
@media (hover: hover) and (pointer: fine) { .nl-card:hover { transform: translateY(-4px); box-shadow: var(--p-shadow); } }
.nl-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--p-tint); }
.nl-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--p-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nl-card h3 { font-size: 1.18rem; margin-top: 18px; }
.nl-card p { color: var(--p-body); font-size: .95rem; margin-top: 8px; }

/* Lernweg */
.nl-learn { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; margin-top: 48px; align-items: start; }
@media (max-width: 900px) { .nl-learn { grid-template-columns: 1fr; } }
.nl-tabs { display: grid; gap: 10px; }
.nl-tab { display: grid; grid-template-columns: 40px 1fr; gap: 14px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 16px; padding: 16px; cursor: pointer; font: inherit; color: inherit; transition: background .2s, border-color .2s; }
.nl-tab .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--p-mono); font-weight: 600; font-size: .86rem; background: var(--p-paper); border: 1px solid var(--p-line); color: var(--p-muted); transition: all .25s var(--p-ease); }
.nl-tab h3 { font-size: 1.05rem; }
.nl-tab p { color: var(--p-body); font-size: .9rem; margin-top: 4px !important; display: none; }
.nl-tab[aria-selected="true"] { background: var(--p-paper); border-color: var(--p-line); box-shadow: var(--p-shadow); }
.nl-tab[aria-selected="true"] .n { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-bg); }
.nl-tab[aria-selected="true"] p { display: block; animation: nl-in .35s var(--p-ease); }
@media (hover: hover) and (pointer: fine) { .nl-tab:hover { background: color-mix(in srgb, var(--p-paper) 60%, transparent); } }
.nl-stage { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 24px; box-shadow: var(--p-shadow); padding: 24px; min-height: 340px; }
.nl-panel { animation: nl-in .45s var(--p-ease); }
.nl-panel[hidden] { display: none; }
.nl-panel h4 { margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); font-weight: 600; }
.nl-panel .ttl { font-size: 1.25rem; font-weight: 700; margin-top: 6px; letter-spacing: -.015em; color: var(--p-ink); }
.nl-cap { font-size: .8rem; color: var(--p-muted); margin-top: 14px !important; }
.nl-rows { display: grid; gap: 10px; margin-top: 16px; }
.nl-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--p-line); border-radius: 14px; font-size: .9rem; color: var(--p-ink); }
.nl-row b { font-weight: 600; }
.nl-row small { display: block; color: var(--p-muted); font-size: .82rem; }
.nl-row .nl-tag { margin-left: auto; }
.nl-row .r { margin-left: auto; font-family: var(--p-mono); color: var(--p-muted); font-size: .82rem; }
.nl-mi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--p-tint); color: var(--p-ink); font-family: var(--p-mono); font-size: .78rem; font-weight: 600; flex: none; }
.nl-pill { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; }
.nl-pill--l { background: color-mix(in srgb, var(--p-mint) 16%, transparent); color: var(--p-mint); }
.nl-pill--s { background: color-mix(in srgb, var(--p-red) 16%, transparent); color: var(--p-red); }
.nl-insight { margin-top: 14px; background: var(--p-tint); border-radius: 14px; padding: 14px; font-size: .88rem; color: var(--p-ink); }
.nl-an { margin-top: 16px; border: 1px solid var(--p-line); border-radius: 16px; padding: 16px; }
.nl-an p { font-size: .92rem; color: var(--p-body); margin-top: 10px !important; }
.nl-an-top { font-size: .8rem; color: var(--p-muted); }
.nl-an-q { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.nl-an-q span { font-size: .8rem; border: 1px dashed var(--p-line); border-radius: 10px; padding: 6px 10px; color: var(--p-body); }

/* Werkzeuge */
.nl-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 900px) { .nl-tools { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nl-tools { grid-template-columns: 1fr; } }
.nl-tool { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 18px; padding: 22px; transition: transform .25s var(--p-ease), box-shadow .25s; }
@media (hover: hover) and (pointer: fine) { .nl-tool:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); } }
.nl-tool .nl-ic { width: 42px; height: 42px; border-radius: 12px; }
.nl-tool .nl-ic svg { width: 20px; height: 20px; }
.nl-tool h3 { font-size: 1.02rem; margin-top: 14px; }
.nl-tool p { color: var(--p-body); font-size: .9rem; margin-top: 6px; }
.nl-note { font-size: .8rem; color: var(--p-muted); margin-top: 18px !important; }

/* Ist / ist nicht */
.nl-isnot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
@media (max-width: 800px) { .nl-isnot { grid-template-columns: 1fr; } }
.nl-col { border-radius: 22px; padding: 28px; border: 1px solid var(--p-line); background: var(--p-paper); }
.nl-col--no { background: color-mix(in srgb, var(--p-line) 45%, var(--p-paper)); }
.nl-col h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.nl-col h3 i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .85rem; }
.nl-col--yes h3 i { background: color-mix(in srgb, var(--p-mint) 18%, transparent); color: var(--p-mint); }
.nl-col--no h3 i { background: var(--p-line); color: var(--p-muted); }
.nl-col ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 13px; }
.nl-col li { padding-left: 22px; position: relative; color: var(--p-body); font-size: .95rem; }
.nl-col li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; }
.nl-col--yes li::before { background: var(--p-mint); } .nl-col--no li::before { background: var(--p-muted); }
.nl-col li strong { color: var(--p-ink); font-weight: 600; }

/* Fuer wen */
.nl-who { display: grid; gap: 12px; align-content: start; }
.nl-who .who-l { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); }
.nl-who .quote { font-size: 1.08rem; font-weight: 600; color: var(--p-ink); letter-spacing: -.01em; margin-top: 0 !important; }
.nl-who .quote::before { content: "\201E"; color: var(--p-orange); }
.nl-who .quote::after { content: "\201C"; color: var(--p-orange); }
html[lang^="en"] .nl-who .quote::before { content: "\201C"; }
html[lang^="en"] .nl-who .quote::after { content: "\201D"; }

/* FAQ */
.nl-faq { max-width: 780px; margin: 40px auto 0; display: grid; gap: 12px; }
.nl-faq details { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 16px; padding: 0 20px; transition: box-shadow .2s; }
.nl-faq details[open] { box-shadow: var(--p-shadow); }
.nl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; color: var(--p-ink); }
.nl-faq summary::-webkit-details-marker { display: none; }
.nl-faq summary::after { content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--p-tint); color: var(--p-ink); display: grid; place-items: center; font-size: 1rem; line-height: 1; font-weight: 500; transition: transform .25s var(--p-ease); }
.nl-faq details[open] summary::after { transform: rotate(45deg); }
.nl-faq .a { color: var(--p-body); font-size: .95rem; padding-bottom: 18px; }

/* Abschluss */
.nl .nl-end { padding-block: 40px 96px; }
.nl-endcard { border-radius: 28px; padding: 56px 28px; text-align: center; background: var(--p-band); color: #FAFAFA; border: 1px solid var(--p-band-line, #26272C); }
html:not(.elv-light) .nl-endcard { background: var(--p-paper); border-color: var(--p-line); }
.nl-endcard h2 { color: #FAFAFA; }
html.elv-light .nl-endcard .nl-eyebrow, html.elv-light .nl-endcard .nl-sub { color: #A1A1AA; }
.nl-endcard .nl-sub { margin-inline: auto; }
.nl-endcard .nl-cta { justify-content: center; }
html.elv-light .nl-endcard .pbtn--p { background: #FAFAFA; color: #0A0C10; }
html.elv-light .nl-endcard .pbtn--s { background: transparent; color: #FAFAFA; border-color: #3A3B40; }

/* Scroll-Einblendung: Ruhezustand sichtbar */
.nl-rv { transition: opacity .7s var(--p-ease), transform .7s var(--p-ease); }
.nl-js .nl-rv.is-pre { opacity: .001; transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
    .nl *, .nl *::before, .nl *::after, .pn *, .pf * { animation: none !important; transition: none !important; }
    .nl-js .nl-rv.is-pre { opacity: 1; transform: none; }
}

/* ─── 6. Unterseiten ────────────────────────────────────────────────────── */
/* Die neue Kopfzeile laeuft im Fluss mit (sticky statt fixed): der alte
   Abstand von 110px fuer die fixe Leiste faellt weg. */
body:not(.logged-in) .elv-public-main { padding-top: 48px; }
@media (max-width: 640px) { body:not(.logged-in) .elv-public-main { padding-top: 28px; } }

/* Login/Registrierung: ruhige rechte Flaeche statt bunter Farbwolken */
.elv-auth-right--calm { position: relative; overflow: hidden; background: #0A0C10; }
.elv-auth-right--calm::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); }
.elv-auth-right--calm::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 38%; height: 2px; background: linear-gradient(90deg, transparent, #1074F0 20%, #34C4FC 45%, #F7C21D 60%, #F7941D 80%, transparent); opacity: .7; }
.elv-auth-right--calm .elv-auth-right-content h2 { color: #FAFAFA; }
.elv-auth-right--calm .elv-auth-right-content p { color: #A1A1AA; }
html.elv-light .elv-auth-right--calm .elv-auth-right-content h2 { color: #FAFAFA; }
html.elv-light .elv-auth-right--calm .elv-auth-right-content p { color: #A1A1AA; }
body.elv-light .elv-auth-right--calm .elv-auth-right-content { background: none; }
body.elv-light:not(.logged-in) .elv-auth-field input,
body.elv-light:not(.logged-in) .elv-auth-field select { background: #FFFFFF; border-color: #E5E4E0; }
/* Grid-Kinder duerfen schrumpfen (Lernschritte am Handy liefen 9px ueber) */
.nl-learn > *, .nl-tab > span { min-width: 0; }
/* Tabellen in Rechtstexten (Datenschutz) brechen um statt die Seite zu sprengen */
body:not(.logged-in) .elv-public-main table { width: 100%; table-layout: fixed; border-collapse: collapse; }
body:not(.logged-in) .elv-public-main th, body:not(.logged-in) .elv-public-main td { overflow-wrap: anywhere; hyphens: auto; vertical-align: top; }
/* Lange URLs in Rechtstexten umbrechen */
body:not(.logged-in) .elv-public-main { overflow-wrap: break-word; }
body:not(.logged-in) .elv-public-main a { overflow-wrap: anywhere; }
/* Alte Zinc-Skala (blaeulich, #8B91A0 = 3,15:1 auf Weiss) neutral und AA-fest */
html:not(.elv-light) body:not(.logged-in) { --elv-zinc-300: #C8C8CE; --elv-zinc-400: #B4B4BC; --elv-zinc-500: #9A9AA2; --elv-zinc-600: #52525B; }
html.elv-light body:not(.logged-in) { --elv-zinc-300: #46464E; --elv-zinc-400: #5E5E66; --elv-zinc-500: #6B6B73; --elv-zinc-600: #C8C8CE; }

/* ─── 7. Tag/Nacht-Schalter in der Kopfzeile ────────────────────────────── */
.pn-theme { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-paper); color: var(--p-ink); cursor: pointer; display: inline-grid; place-items: center; padding: 0; transition: border-color .2s, transform .16s var(--p-ease); }
.pn-theme:active { transform: scale(.94); }
.pn-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Symbol zeigt den Zielzustand: dunkel -> Sonne, hell -> Mond */
.pn-theme .i-moon { display: none; }
html.elv-light .pn-theme .i-sun { display: none; }
html.elv-light .pn-theme .i-moon { display: block; }
.pn-theme--wide { width: auto; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font: 600 .84rem 'Geist', sans-serif; }
.pn-drawer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.pn-drawer .pn-drawer-row .pn-lang { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .pn-theme:hover { border-color: var(--p-muted); } }
/* Sehr schmale Handys (<=375px): Zeilen im Lernweg umbrechen statt ueberlaufen */
.nl-row > * { min-width: 0; }
@media (max-width: 420px) { .nl-stage { padding: 16px; } .nl-row { flex-wrap: wrap; } .nl-row .nl-tag { margin-left: 46px; } }
@media (max-width: 860px) { .pn-bar .pn-theme { display: none; } }
.pn-logo { flex: none; }
@media (max-width: 400px) { .pn-bar { gap: 10px; } .pn-right { gap: 8px; } .pn-bar .pn-logo img { height: 22px; } }
@media (max-width: 340px) { .pn-bar .pn-logo img { height: 19px; } .pn .pbtn--sm { padding: 9px 12px; font-size: .82rem; } }

/* Lernschritte am Handy (27.09.2026): statt Reiter oben und Inhalt weit
   darunter eine Schrittfolge — jeder Schritt mit seinem Beispiel direkt
   darunter, alle offen, verbunden durch eine Linie. Kein Tippen, kein
   Hoch-und-Runter-Scrollen mehr. Desktop behaelt die Reiter. */
@media (max-width: 900px) {
    .nl-learn { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
    .nl-learn .nl-tabs, .nl-learn .nl-stage { display: contents; }
    .nl-tab:nth-child(1) { order: 1; } #nl-p0 { order: 2; }
    .nl-tab:nth-child(2) { order: 3; } #nl-p1 { order: 4; }
    .nl-tab:nth-child(3) { order: 5; } #nl-p2 { order: 6; }
    .nl-tab:nth-child(4) { order: 7; } #nl-p3 { order: 8; }
    .nl-tab, .nl-tab[aria-selected="true"] { cursor: default; background: none; border: 0; box-shadow: none; padding: 0; grid-template-columns: 40px 1fr; gap: 14px; position: relative; }
    .nl-tab .n, .nl-tab[aria-selected="true"] .n { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-bg); position: relative; z-index: 1; }
    .nl-tab p { display: block; animation: none; }
    .nl-tab h3 { padding-top: 9px; }
    .nl-panel, .nl-panel[hidden] { display: block; animation: none; margin: 14px 0 28px 54px; background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 18px; box-shadow: var(--p-shadow); padding: 18px; position: relative; }
    /* Verbindungslinie von Schritt zu Schritt */
    .nl-panel::before { content: ""; position: absolute; left: -35px; top: -14px; bottom: -28px; width: 2px; background: var(--p-line); }
    #nl-p3 { margin-bottom: 0; }
    #nl-p3::before { bottom: 50%; }
    .nl-panel .ttl { font-size: 1.1rem; }
}
@media (max-width: 420px) {
    .nl-panel, .nl-panel[hidden] { margin-left: 0; margin-top: 12px; padding: 16px; }
    .nl-panel::before { display: none; }
    .nl-tab .n::after { content: none; }
}
/* Beispielzeilen am Handy einzeilig: der Umbruch machte jede Zeile doppelt hoch */
@media (max-width: 900px) {
    .nl-panel .nl-row { flex-wrap: nowrap; padding: 10px 12px; gap: 10px; }
    .nl-panel .nl-row > b, .nl-panel .nl-row > span:not(.nl-mi):not(.nl-tag):not(.nl-pill):not(.r) { min-width: 0; flex: 1 1 auto; }
    .nl-panel .nl-row .nl-tag { margin-left: auto; flex: none; font-size: .68rem; }
    .nl-panel .nl-mi { width: 30px; height: 30px; }
    .nl-panel .nl-rows { gap: 8px; margin-top: 12px; }
}
@media (max-width: 900px) { .nl-panel, .nl-panel[hidden] { min-width: 0; } .nl-panel .nl-row b { overflow-wrap: break-word; hyphens: auto; } }