/* Klartext & Kontext · Webseite. Farben und Themen: tokens.css. Marke: C:\KI-Podcast\marke */
@import url("tokens.css");

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--grund); }
body { margin: 0; background: var(--grund); color: var(--text); font: 17px/1.55 var(--sans); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .4s, color .4s; }
img { max-width: 100%; height: auto; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 600; line-height: 1.07; letter-spacing: -.03em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); margin-top: 1.4em; }
h3 { font-size: 1.3rem; letter-spacing: -.02em; }
p { margin: 0 0 1em; text-wrap: pretty; }
code { background: var(--band); padding: .1em .4em; border-radius: 6px; font-size: .88em; }
::selection { background: var(--akzent-grund); }
.breite { max-width: 1120px; margin: 0 auto; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
.schmal { max-width: 780px; }
.mitte { text-align: center; }
.mitte-block { max-width: 560px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
.leise { color: var(--leise); font-size: .9em; }
.klein { font-size: .86rem; }
.gross { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; color: var(--leise); letter-spacing: -.016em; }
.abschnitt { padding-top: 128px; padding-bottom: 128px; }
.band { background: var(--band); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 8px; }
.springen { position: absolute; left: -999px; top: 8px; background: var(--knopf); color: var(--knopf-text); padding: 8px 14px; border-radius: 10px; z-index: 50; }
.springen:focus { left: 12px; }
.i { flex: none; width: 1.15em; height: 1.15em; }
.etikett { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--hervor); margin-bottom: 10px; }
.etikett.hell { color: #ff8a3d; }
.zahl { font-variant-numeric: tabular-nums; }
h2 .zahl { color: var(--leise); font-weight: 500; font-size: .7em; margin-left: 6px; }
.klein-titel { font-size: 1.35rem; margin: 0 0 18px; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--glas); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--glas-linie); }
.kopf-innen { display: flex; align-items: center; gap: 18px; height: 56px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); white-space: nowrap; }
.marke:hover { text-decoration: none; }
.marke img { display: block; border-radius: 7px; }
.marke > span { font-size: 1.06rem; line-height: 1; }
.wm { white-space: nowrap; }
.wm-k, .wm-s { font-family: var(--titel); font-weight: 600; letter-spacing: -.025em; }
.und { color: var(--leise); font-weight: 500; }
.hauptnav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.hauptnav a { color: var(--text-2); font-size: .84rem; padding: 6px 12px; border-radius: 999px; white-space: nowrap; transition: color .2s, background .2s; }
.hauptnav a:hover { color: var(--text); text-decoration: none; }
.hauptnav a[aria-current] { color: var(--text); background: var(--zart); }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.kopf-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text-2); transition: background .2s; }
.kopf-symbol:hover { background: var(--zart); color: var(--text); }
.kopf-link { color: var(--text-2); font-size: .84rem; padding: 6px 4px; }
.kopf-link:hover { color: var(--text); text-decoration: none; }

/* Benutzermenü */
.menue { position: relative; }
.menue > summary { list-style: none; cursor: pointer; border-radius: 50%; display: block; }
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover .avatar { box-shadow: 0 0 0 3px var(--zart-hover); }
.menue-liste { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; box-shadow: var(--schatten); padding: 8px; z-index: 40; display: grid; gap: 1px; transform-origin: top right; }
.menue[open] .menue-liste { animation: menue-auf .22s var(--kurve); }
@keyframes menue-auf { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menue-liste a, .menue-liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; color: var(--text); font: 500 .92rem var(--sans); background: none; border: 0; cursor: pointer; text-align: left; }
.menue-liste a:hover, .menue-liste button:hover { background: var(--zart); text-decoration: none; }
.menue-liste .i { color: var(--leise); }
.menue-liste.klein { width: 240px; }
.menue-kopf { display: flex; gap: 12px; align-items: center; padding: 10px 12px 14px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
.menue-kopf b { display: block; font-size: .95rem; }
.menue-kopf span:not(.plus-marke) { display: block; color: var(--leise); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.plus-marke { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 600; color: #fff; background: var(--plus-verlauf); border-radius: 999px; padding: 1px 7px; vertical-align: 2px; }

/* Avatare */
.avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font: 600 .9rem/1 var(--titel); color: #fff; background: var(--leise); letter-spacing: 0; user-select: none; }
.avatar.klein { width: 32px; height: 32px; font-size: .74rem; }
.avatar.gross { width: 96px; height: 96px; font-size: 2rem; }
.ton-0 { --t1: #c77d3f; --t2: #5e3216; } .ton-1 { --t1: #5f8fbf; --t2: #1d3552; } .ton-2 { --t1: #6aa37f; --t2: #1f4430; } .ton-3 { --t1: #b26a8a; --t2: #4d1f33; }
.ton-4 { --t1: #8b7cc4; --t2: #2e2557; } .ton-5 { --t1: #c2a24a; --t2: #4f3d10; } .ton-6 { --t1: #5aa6a6; --t2: #173f42; } .ton-7 { --t1: #a5776a; --t2: #3f241c; }
span.avatar[class*="ton-"] { background: linear-gradient(140deg, var(--t1), var(--t2)); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--knopf); color: var(--knopf-text); border: 0; border-radius: 999px; padding: 12px 22px; font: 500 1rem var(--sans); letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .2s var(--kurve), background .2s, box-shadow .2s, opacity .2s; }
.knopf:hover { background: var(--knopf-hover); color: var(--knopf-text); text-decoration: none; }
.knopf:active { transform: scale(.98); }
.knopf .i { width: 1em; height: 1em; }
.knopf.zart { background: var(--zart); color: var(--text); }
.knopf.zart:hover { background: var(--zart-hover); box-shadow: none; }
.knopf.akzent { background: var(--knopf); color: #fff; }
.knopf.akzent:hover { background: var(--knopf-hover); }
.knopf.hell { background: #f5f5f7; color: #1d1d1f; }
.knopf.hell:hover { background: #fff; color: #000; }
.knopf.gefahr { background: var(--fehler); color: #fff; }
.knopf.klein { padding: 7px 15px; font-size: .86rem; }
.knopf.gross { padding: 15px 28px; font-size: 1.06rem; }
.knopf.breit { width: 100%; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knopfzeile.mitte { justify-content: center; }
.pfeil { font-size: 1.06rem; color: var(--akzent); }
.pfeil span { display: inline-block; transition: transform .2s; }
.pfeil:hover span { transform: translateX(3px); }
.pfeil.hell { color: #2997ff; }
button { font: inherit; }

/* Hinweise */
.hinweis { background: var(--hinweis-grund); color: var(--hinweis-text); border-radius: 14px; padding: 12px 18px; font-size: .95rem; }
.hinweis a { color: inherit; text-decoration: underline; }
.fehler { background: var(--fehler-grund); color: var(--fehler); border-radius: 14px; padding: 12px 18px; font-size: .95rem; }
.ok { color: var(--gut); }
mark.fehlt { background: var(--fehler-grund); color: var(--fehler); padding: 0 5px; border-radius: 5px; }
.leer { padding-top: 120px; padding-bottom: 120px; text-align: center; }
.leer .knopf { margin: 6px; }
.toast { position: fixed; left: 50%; top: 72px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); transform: translateX(-50%); background: var(--knopf); color: var(--knopf-text); padding: 11px 18px 11px 14px; border-radius: 999px; font-size: .92rem; font-weight: 500; box-shadow: var(--schatten); animation: toast-auf .5s var(--kurve); transition: opacity .5s, transform .5s; }
.toast .i { color: var(--gut); }
.toast.weg { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
@keyframes toast-auf { from { opacity: 0; transform: translate(-50%, -16px) scale(.96); } }

/* Abzeichen */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--text-2); background: var(--zart); padding: 3px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.chip .i { width: .95em; height: .95em; }
.chip.plus { color: #fff; background: var(--plus-verlauf); }
.chip.frueh { color: var(--akzent); background: var(--akzent-grund); }
.chip.gut { color: var(--gut); background: var(--gut-grund); }
.chip.mini { font-size: .66rem; padding: 2px 7px; margin-left: 6px; }
.chip.gross { font-size: .95rem; padding: 7px 16px; }
.chip-text { font-size: .74rem; color: var(--gut); margin-left: 6px; }

/* ---------- Bühne ---------- */
.held { text-align: center; padding-top: 112px; padding-bottom: 120px; margin-bottom: -40px; overflow: hidden; }
.wortmarke { font-size: clamp(3.2rem, 10vw, 7.5rem); line-height: 1.02; letter-spacing: -.05em; margin-bottom: .16em; }
.wortmarke .wm { white-space: normal; }
.wortmarke .wm-k, .wortmarke .wm-s { letter-spacing: inherit; white-space: nowrap; }
.wortmarke .wm-s { background: var(--plus-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.wortmarke .und { color: inherit; font-weight: inherit; }
.held-bild { margin: 72px auto 0; max-width: 1240px; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
.held-bild picture { display: block; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--schatten-gross); background: var(--band); }
.held-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.held-satz { font-family: var(--titel); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--leise); margin-bottom: 34px; }
.held-knoepfe { display: flex; justify-content: center; align-items: center; gap: 26px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .held .breite > *, .plus-held .breite > * { animation: auf 1s var(--kurve) both; }
  .held .breite > :nth-child(2), .plus-held .breite > :nth-child(2) { animation-delay: .06s; }
  .held .breite > :nth-child(3), .plus-held .breite > :nth-child(3) { animation-delay: .12s; }
  .held .breite > :nth-child(4), .plus-held .breite > :nth-child(4) { animation-delay: .18s; }
  .held .breite > :nth-child(5), .plus-held .breite > :nth-child(5) { animation-delay: .26s; }
  @keyframes auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* Weiterhören */
.weiter-band { padding-top: 8px; padding-bottom: 8px; margin-top: -48px; margin-bottom: 72px; }
.weiter-band.ohne-rand { margin: 0; padding: 0; }
.weiter-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.weiter-karte { display: flex; gap: 14px; align-items: center; background: var(--band); border-radius: 18px; padding: 12px; color: var(--text); transition: transform .3s var(--kurve), background .3s; }
.weiter-karte:hover { text-decoration: none; transform: translateY(-2px); background: var(--zart-hover); }
.weiter-karte .folgenbild { width: 64px; aspect-ratio: 1; flex: none; border-radius: 12px; }
.weiter-karte .folgenbild .fb-marke { display: none; }
.weiter-karte .fb-nummer { font-size: 1.6rem; }
.weiter-karte > div { min-width: 0; display: grid; gap: 4px; flex: 1; }
.weiter-karte b { font-size: .98rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
progress { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border: 0; border-radius: 4px; background: var(--zart-hover); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--zart-hover); border-radius: 4px; }
progress::-webkit-progress-value { background: var(--akzent); border-radius: 4px; }
progress::-moz-progress-bar { background: var(--akzent); border-radius: 4px; }

/* Neueste Folge */
.neu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: center; padding-top: 120px; padding-bottom: 104px; }
.neu-bild { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; border-radius: var(--radius-l); overflow: hidden; color: #f1e8dc;
  background: linear-gradient(160deg, #fbfbfd, #e8e8ed);
  box-shadow: var(--schatten-gross); transition: transform .5s var(--kurve); }
.neu-bild:hover { text-decoration: none; }
.neu-bild:not(.mit-foto) { color: var(--text); }
.neu-bild:not(.mit-foto) .spielen { background: var(--knopf); }
.neu-bild img { transition: transform 1.2s var(--feder); }
.neu-bild:hover img { transform: scale(1.04); }
.neu-bild .gross-nummer { font-family: var(--titel); font-weight: 600; font-size: clamp(7rem, 18vw, 12rem); line-height: 1; letter-spacing: -.04em; }
.neu-bild .klein-marke { position: absolute; left: 28px; bottom: 24px; font-size: 1.1rem; color: #fff; }
.neu-bild .klein-marke .und { color: var(--bernstein-hell); }
.neu-bild .spielen { position: absolute; right: 22px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; color: #fff; transition: transform .3s var(--kurve), background .3s; }
.neu-bild:hover .spielen { transform: scale(1.08); background: rgba(255, 255, 255, .26); }
.neu-text h2 { margin-top: 0; font-size: clamp(2rem, 4.2vw, 3.25rem); }
.neu-text .knopfzeile .leise { font-size: .95rem; }
.neu-text .knopfzeile { margin-top: 10px; gap: 14px; }
.neu-bild.mit-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .7)); }
.neu-bild.mit-foto > span { z-index: 2; }
.neu-bild .neu-foto, .neu-bild .neu-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.neu-bild.mit-foto .gross-nummer { position: absolute; left: 28px; top: 18px; font-size: clamp(3.5rem, 8vw, 5rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }

/* ---------- Folgen-Karten ---------- */
.zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.zeile h1, .zeile h2 { margin: 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 32px; }
.raster.kompakt { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 0; }
.karte { display: flex; flex-direction: column; min-width: 0; background: var(--band); border-radius: var(--radius); overflow: hidden; color: var(--text); transition: transform .6s var(--feder), box-shadow .6s var(--feder); }
.karte:hover { text-decoration: none; transform: scale(1.015); box-shadow: var(--schatten); }
.karte .folgenbild img { transition: transform 1.2s var(--feder); }
.karte:hover .folgenbild img { transform: scale(1.05); }
.karte-text { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 24px; }
.karte h3 { font-size: 1.4rem; margin-bottom: .9em; flex: 1; }
.karte p { color: var(--leise); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; font-size: .97rem; }
.karte-kopf { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.karte-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.karte-fuss .zahl { display: inline-flex; align-items: center; gap: 4px; }
.karte-fuss .i { width: .95em; height: .95em; }
.raster.kompakt .karte-text { padding: 16px 18px 18px; }
.raster.kompakt .karte h3 { font-size: 1.1rem; }
.raster.kompakt .karte p { display: none; }
.nummer { font-size: .78rem; font-weight: 600; color: var(--akzent); white-space: nowrap; }

/* Folgenbild: Cover oder Farbverlauf mit Nummer */
.folgenbild { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; color: rgba(255, 255, 255, .92);
  background: radial-gradient(120% 100% at 85% 0%, color-mix(in srgb, var(--t1, #c77d3f) 55%, #fff), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--t1, #c77d3f) 18%, #fff), color-mix(in srgb, var(--t1, #c77d3f) 42%, #fff)); }
.folgenbild .fb-nummer { color: color-mix(in srgb, var(--t2, #3a2416) 85%, #000); }
.folgenbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-nummer { font-family: var(--titel); font-weight: 600; font-size: clamp(3.4rem, 7vw, 4.6rem); letter-spacing: -.05em; line-height: 1; transition: transform .6s var(--kurve); }
.karte:hover .fb-nummer { transform: scale(1.08); }
.fb-marke { position: absolute; left: 16px; bottom: 12px; font-size: .78rem; color: rgba(255, 255, 255, .8); }
.fb-marke .und { color: var(--bernstein-hell); }
.fb-schloss { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.folgenbild.gross { aspect-ratio: 1; width: 160px; border-radius: 24px; margin-bottom: 18px; box-shadow: var(--schatten); }
.folgenbild.gross .fb-marke { display: none; }

/* ---------- Plus-Band (Startseite) ---------- */
.plus-band { background: radial-gradient(60% 50% at 50% 0%, rgba(240, 163, 94, .16), transparent 70%), var(--band); color: var(--text); }
.plus-band p.gross { color: var(--leise); max-width: 40ch; margin: 0 auto 8px; text-align: center; font-weight: 600; }
.plus-band .etikett { text-align: center; }
.plus-titel { text-align: center; margin-top: 0; font-size: clamp(3rem, 8vw, 5.5rem); letter-spacing: -.045em; background: var(--plus-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 64px 0 48px; }
.vorteil { background: var(--flaeche); border: 0; box-shadow: var(--schatten-1); border-radius: var(--radius); padding: 28px; transition: background .3s, transform .6s var(--feder); }
.vorteil.kurz { display: grid; justify-items: start; gap: 4px; padding: 30px 28px; }
.vorteil.kurz h3 { margin: 0; font-size: 1.25rem; }
.vorteil:hover { box-shadow: var(--schatten); transform: scale(1.02); }
.vorteil .i { width: 28px; height: 28px; color: var(--bernstein-hell); margin-bottom: 14px; }
.vorteil h3 { font-size: 1.12rem; margin-bottom: .35em; }
.vorteil p { color: var(--leise); font-size: .94rem; margin: 0; }
.vorteile.hell-grund { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vorteile.hell-grund .vorteil { background: var(--band); border-color: transparent; }
.vorteile.hell-grund .vorteil:hover { background: var(--flaeche); box-shadow: var(--schatten); }
.vorteile.hell-grund .vorteil .i { color: var(--akzent); }
.vorteile.hell-grund .vorteil p { color: var(--leise); }

/* Versprechen */
.versprechen h2 { margin-top: 0; margin-bottom: 64px; }
.dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.versprechen .dreier > div { text-align: center; }
.versprechen b { display: block; font-family: var(--titel); font-size: clamp(3.6rem, 8vw, 6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; background: var(--plus-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.versprechen span { display: block; font-weight: 600; margin: 8px 0 0; color: var(--leise); font-size: 1.1rem; }
.versprechen p { color: var(--leise); max-width: 30ch; margin: 0 auto; }
.zweier { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; }
.zweier > div { background: var(--band); border-radius: var(--radius); padding: 26px 28px; }
.zweier p { color: var(--leise); margin: 0; }
.hoeren h2 { margin-top: 0; }
.plattformen { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.hoeren .plattformen { justify-content: center; }
.plattformen a { font-size: .85rem; color: var(--text-2); background: var(--zart); border-radius: 999px; padding: 6px 14px; transition: background .2s; }
.plattformen a:hover { background: var(--zart-hover); text-decoration: none; }
.plattformen.gross a { font-size: 1rem; padding: 11px 22px; background: var(--knopf); color: var(--knopf-text); }
.plattformen.gross a:hover { background: var(--knopf-hover); }

/* ---------- Folgenliste ---------- */
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.seitenkopf h1 { margin: 0; }
.suche { position: relative; flex: 0 1 380px; }
.suche .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--leise); pointer-events: none; }
.suche input { width: 100%; padding: 12px 16px 12px 42px; border-radius: 999px; background: var(--band); border-color: transparent; }
.filterleiste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.filter { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; background: var(--zart); color: var(--text-2); font-size: .88rem; font-weight: 500; transition: background .2s, color .2s; }
.filter .i { width: 1em; height: 1em; }
.filter:hover { background: var(--zart-hover); text-decoration: none; color: var(--text); }
.filter[aria-current] { background: var(--knopf); color: var(--knopf-text); }
.leer-hinweis { grid-column: 1 / -1; padding: 48px 0; text-align: center; }

/* ---------- Folgenseite ---------- */
.folge { padding-top: 64px; }
.folge-kopf { text-align: center; max-width: 880px; margin: 0 auto; }
.folge-meta { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.folge-meta .etikett { margin: 0; }
.folge-kopf h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
.spieler { margin: 44px auto 0; max-width: 920px; }
.spieler video { width: 100%; border-radius: var(--radius); background: #000; box-shadow: var(--schatten-gross); display: block; }
.audio-karte { display: flex; gap: 24px; align-items: center; background: var(--band); border-radius: var(--radius-l); padding: 22px; }
.audio-karte .folgenbild { width: 132px; flex: none; aspect-ratio: 1; border-radius: 18px; }
.audio-karte .fb-marke { display: none; }
.audio-karte audio { flex: 1; min-width: 0; }
.platzhalter { min-height: 300px; border-radius: var(--radius-l); background: var(--band); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 40px 24px; }
.ph-titel { font-weight: 600; font-size: 1.15rem; }
.nur-audio { margin-top: 12px; text-align: center; }
.weiter-hinweis { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 12px 0 0; }
.kennzeichnung { max-width: 900px; margin: 18px auto 0; font-size: .8rem; color: var(--leise); text-align: center; }

/* Aktionsleiste unter dem Spieler */
.aktionen-leiste { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 22px auto 0; }
.aktionen-leiste form { display: contents; }
.aktion { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 0; background: var(--zart); color: var(--text); font: 500 .9rem var(--sans); cursor: pointer; transition: background .2s, transform .2s var(--kurve), color .2s; font-variant-numeric: tabular-nums; }
.aktion:hover { background: var(--zart-hover); text-decoration: none; }
.aktion:active { transform: scale(.96); }
.aktion[aria-pressed="true"] { color: var(--akzent); background: var(--akzent-grund); }
.aktion[aria-pressed="true"] .i { fill: currentColor; }
.aktion .chip { margin-left: 2px; }
.aktion-menue { position: relative; }
.aktion-menue > summary { list-style: none; }
.aktion-menue > summary::-webkit-details-marker { display: none; }
.aktion-menue .menue-liste { left: 50%; right: auto; transform: translateX(-50%); transform-origin: top center; }
.ploepp .i { animation: ploepp .4s var(--kurve); }
@keyframes ploepp { 40% { transform: scale(1.35); } }

/* Bezahlschranke */
.schranke { position: relative; overflow: hidden; border-radius: var(--radius-l); padding: clamp(40px, 7vw, 80px) 28px; text-align: center; color: var(--text);
  background: radial-gradient(70% 70% at 50% 0%, rgba(240, 163, 94, .16), transparent 70%), var(--band); }
.schranke h2 { margin: 0 0 .35em; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.schranke p { color: var(--leise); max-width: 46ch; margin: 0 auto 26px; }
.schranke-symbol { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--flaeche); box-shadow: var(--schatten-1); margin-bottom: 18px; }
.schranke-symbol .i { width: 26px; height: 26px; }

.zweispaltig { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: 80px; }
.zweispaltig > * { min-width: 0; }
.zweispaltig aside { position: sticky; top: 84px; align-self: start; }
.zweispaltig aside h2, article > h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-top: 0; color: var(--leise); font-weight: 600; }
.zweispaltig aside ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.zweispaltig aside a { display: block; color: var(--text-2); padding: 6px 12px; border-radius: 10px; font-size: .95rem; }
.zweispaltig aside a:hover { background: var(--zart); text-decoration: none; }
article h3 { font-size: 1.5rem; margin-top: 1.6em; }
article p { max-width: 68ch; font-size: 1.06rem; line-height: 1.68; }
article p b { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--leise); margin-bottom: 2px; }
.zeile-konrad b { color: var(--akzent); }
.angeschnitten { position: relative; max-height: 420px; overflow: hidden; }
.angeschnitten::after { content: ""; position: absolute; inset: auto 0 0; height: 220px; background: linear-gradient(transparent, var(--grund)); }
.beleg { font-size: .66rem; vertical-align: super; margin-left: 3px; background: var(--zart); color: var(--text-2); padding: 1px 6px; border-radius: 6px; font-weight: 500; }
.beleg:hover { background: var(--akzent); color: #fff; text-decoration: none; }
.folge > h2 { margin-top: 80px; }
.belege { color: var(--text-2); padding-left: 0; list-style: none; font-size: .95rem; display: grid; gap: 10px; }
.belege li { background: var(--band); border-radius: 14px; padding: 14px 18px; scroll-margin-top: 90px; transition: box-shadow .3s; }
.belege li b { color: var(--akzent); margin-right: 6px; }
.belege li:target { box-shadow: 0 0 0 2px var(--akzent); background: var(--flaeche); }
.shorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.shorts video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: #000; }

/* ---------- Kommentare ---------- */
.kommentare { max-width: 820px; margin: 96px auto 0; }
.kommentare > .zeile { align-items: center; margin-bottom: 24px; }
.kommentare h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.umschalter { display: inline-flex; background: var(--zart); border-radius: 999px; padding: 3px; }
.umschalter a { padding: 5px 14px; border-radius: 999px; color: var(--text-2); font-size: .85rem; font-weight: 500; }
.umschalter a:hover { text-decoration: none; color: var(--text); }
.umschalter a[aria-current] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1); }
.k-einladung { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--band); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; }
.k-einladung > .i { width: 28px; height: 28px; color: var(--akzent); }
.k-einladung > div { flex: 1 1 260px; }
.k-einladung p { margin: 2px 0 0; }
.k-neu { display: flex; gap: 14px; margin-bottom: 28px; }
.k-form { flex: 1; display: grid; gap: 10px; }
.k-form textarea { width: 100%; min-height: 96px; }
.k-form.klein textarea { min-height: 70px; }
.k-form.klein { margin-top: 10px; }
.k-form-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.k-liste, .k-antworten { list-style: none; padding: 0; margin: 0; }
.k { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid var(--linie); scroll-margin-top: 90px; }
.k:target .k-rumpf > .k-text { background: var(--akzent-grund); border-radius: 10px; box-shadow: 0 0 0 6px var(--akzent-grund); }
.k-rumpf { flex: 1; min-width: 0; }
.k-kopf { font-size: .92rem; margin-bottom: 4px; }
.k-text { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; transition: background .6s; }
.k-geloescht { color: var(--leise); font-style: italic; margin: 8px 0; }
.k-aktionen { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: flex-start; margin-top: 8px; }
.k-aktionen > form { display: inline; }
.k-knopf { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 4px 9px; border-radius: 999px; color: var(--leise); font: 500 .82rem var(--sans); cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }
.k-knopf::-webkit-details-marker { display: none; }
.k-knopf .i { width: 1.05em; height: 1.05em; }
.k-knopf:hover { background: var(--zart); color: var(--text); }
.k-knopf[aria-pressed="true"] { color: var(--akzent); }
.k-knopf[aria-pressed="true"] .i { fill: currentColor; }
.k-knopf.ruhig { cursor: default; }
.k-knopf.ruhig:hover { background: none; color: var(--leise); }
.k-mehr { flex-basis: auto; }
.k-mehr[open] { flex-basis: 100%; }
.k-mehr[open] > summary { color: var(--text); }
.k-antworten { margin-top: 6px; }
.k-antworten .k { padding: 14px 0 0; border-top: 0; }
.k-antworten .avatar { width: 32px; height: 32px; font-size: .74rem; }
.k-leer { padding: 24px 0; border-top: 1px solid var(--linie); }
.zaehler { font-variant-numeric: tabular-nums; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 16px; max-width: 400px; margin-top: 24px; }
.formular.breit { max-width: none; margin-top: 0; }
.formular label { display: grid; gap: 6px; font-weight: 500; font-size: .92rem; }
.formular-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .88rem; }
input, textarea, select { font: inherit; color: var(--text); background: var(--feld); border: 1px solid var(--linie-2); border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background .2s; width: 100%; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-grund); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--akzent); }
.feld-hilfe { font-weight: 400; color: var(--leise); font-size: .8rem; }
.haken-feld { display: flex !important; grid-template-columns: none; gap: 10px !important; align-items: flex-start; font-weight: 400 !important; font-size: .88rem !important; color: var(--text-2); line-height: 1.45; }
.haken-feld input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.honig { position: absolute !important; left: -9999px; }
.schalter { display: flex !important; align-items: center; gap: 12px !important; cursor: pointer; }
.schalter input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--zart-hover); border: 0; padding: 0; position: relative; cursor: pointer; transition: background .25s; flex: none; }
.schalter input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--kurve); }
.schalter input:checked { background: var(--gut); }
.schalter input:checked::after { transform: translateX(18px); }

/* Anmeldung und Kasse */
.auth { display: grid; place-items: center; min-height: 76vh; padding: 64px max(16px, env(safe-area-inset-right, 0px)) 80px max(16px, env(safe-area-inset-left, 0px)); }
.auth-karte { width: 100%; max-width: 440px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-l); padding: 44px 40px 36px; box-shadow: var(--schatten); }
.breit-auth .auth-karte { max-width: 540px; }
.auth-logo { display: block; border-radius: 14px; margin: 0 0 22px; }
.auth-karte h1 { font-size: 2rem; margin-bottom: .3em; }
.auth-karte .formular { max-width: none; }
.auth-karte .fehler, .auth-karte .hinweis { margin: 16px 0 0; }
.auth-fuss { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--linie); font-size: .92rem; color: var(--leise); text-align: center; }
.kasse h1 { margin-top: 14px; }
.kasse-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.kasse-zeile.summe { border-bottom: 0; font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.kasse .hinweis { margin-bottom: 4px; }

/* ---------- Plus-Seite ---------- */
.plus-held { text-align: center; color: var(--text); padding: 120px 0 128px;
  background: radial-gradient(55% 50% at 50% 10%, rgba(240, 163, 94, .18), transparent 70%), radial-gradient(40% 40% at 80% 90%, rgba(194, 57, 122, .08), transparent 70%), var(--grund); }
.plus-wort { font-family: var(--titel); font-weight: 600; font-size: clamp(5rem, 18vw, 11rem); letter-spacing: -.06em; line-height: .95; margin-bottom: .2em;
  background: var(--plus-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plus-wort .und { -webkit-text-fill-color: var(--text); color: var(--text); }
.plus-held .held-satz { color: var(--leise); }
.tarife { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 22px; margin: 48px 0 26px; }
.tarif { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-l); padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--schatten-1); transition: transform .4s var(--kurve), box-shadow .4s; }
.tarif:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.tarif.empfohlen { border: 2px solid var(--knopf); }
.tarif-band { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--knopf); color: #fff; font-size: .74rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.tarif h3 { margin: 0; font-size: 1.1rem; color: var(--leise); }
.preis { margin: 6px 0 0; }
.preis b { font-family: var(--titel); font-size: 2.8rem; letter-spacing: -.04em; }
.preis span { color: var(--leise); margin-left: 4px; }
.tarif .leise { flex: 1; margin-bottom: 18px; }
.vergleich { width: 100%; border-collapse: collapse; margin: 28px 0 32px; font-size: .96rem; }
.vergleich th { font-size: .8rem; color: var(--leise); font-weight: 600; padding: 10px; text-align: center; }
.vergleich td { padding: 14px 10px; border-top: 1px solid var(--linie); text-align: center; color: var(--leise); }
.vergleich td:first-child { text-align: left; color: var(--text); }
.vergleich td .i { color: var(--gut); }
.vergleich td:last-child .i { color: var(--akzent); }
.faq { display: grid; gap: 10px; margin-top: 24px; }
.faq details { background: var(--band); border: 0; border-radius: 18px; padding: 18px 22px; }
.faq summary { font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--leise); font-weight: 400; font-size: 1.3rem; line-height: 1; transition: transform .3s var(--kurve); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--text-2); }

/* Themen mitbestimmen */
.karte-flaeche { background: var(--band); border-radius: var(--radius); padding: 26px; margin: 32px 0; }
.themenliste { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; }
.thema-eintrag { display: flex; gap: 16px; align-items: flex-start; background: var(--band); border-radius: 18px; padding: 16px 18px; }
.thema-eintrag > div { display: grid; gap: 2px; min-width: 0; }
.thema-eintrag p { margin: 2px 0; }
.thema-eintrag form { display: contents; }
.stimme { display: grid; justify-items: center; gap: 0; min-width: 52px; padding: 8px 6px; border-radius: 14px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2); cursor: pointer; font-size: .9rem; transition: all .2s; }
.stimme .i { width: 1em; height: 1em; }
.stimme:hover { border-color: var(--akzent); }
.stimme[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.stimme.ruhig { cursor: default; }

/* ---------- Konto ---------- */
.konto { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-top: 64px; }
.konto-nav { position: sticky; top: 84px; align-self: start; }
.konto-wer { display: flex; gap: 12px; align-items: center; padding: 0 10px 18px; margin-bottom: 10px; border-bottom: 1px solid var(--linie); }
.konto-wer b { display: block; font-size: .98rem; }
.konto-wer .leise { font-size: .8rem; }
.konto-nav nav { display: grid; gap: 2px; }
.konto-nav nav a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; color: var(--text-2); font-size: .94rem; font-weight: 500; }
.konto-nav nav a .i { color: var(--leise); }
.konto-nav nav a:hover { background: var(--zart); text-decoration: none; color: var(--text); }
.konto-nav nav a[aria-current] { background: var(--zart); color: var(--text); }
.konto-nav nav a[aria-current] .i { color: var(--akzent); }
.konto-inhalt { min-width: 0; }
.konto-inhalt h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 28px; }
.konto-inhalt > .fehler, .konto-inhalt > .hinweis { margin-bottom: 24px; }
.zeile-hinweis { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.gruppe { margin-bottom: 36px; }
.gruppe h2 { font-size: 1.05rem; color: var(--leise); margin: 0 0 12px 4px; letter-spacing: -.01em; display: flex; align-items: center; }
.gruppe-karte { background: var(--band); border-radius: 20px; padding: 22px 24px; }
.gruppe-karte > p:last-child { margin-bottom: 0; }
.gruppe-fuss { color: var(--leise); font-size: .84rem; margin: 10px 4px 0; }
.liste-zeile { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 13px 0; border-top: 1px solid var(--linie); flex-wrap: wrap; font-size: .95rem; }
.liste-zeile:first-child { border-top: 0; padding-top: 0; }
.liste-zeile:last-child { padding-bottom: 0; }
.liste-zeile > span:first-child { color: var(--leise); }
.profil-kopf { display: flex; gap: 24px; align-items: center; margin-bottom: 32px; }
.profil-kopf h2 { margin: 0; font-size: 1.7rem; }
.profil-kopf p { margin: 4px 0 6px; }
.kennzahlen-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.kennzahl { background: var(--band); border-radius: 18px; padding: 18px 20px; color: var(--text); display: grid; transition: background .2s; }
.kennzahl:hover { text-decoration: none; background: var(--zart-hover); }
.kennzahl b { font-family: var(--titel); font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl span { color: var(--leise); font-size: .85rem; }
.plus-karte { border-radius: var(--radius); padding: 28px; margin-bottom: 36px; color: var(--text);
  background: radial-gradient(80% 90% at 90% 0%, rgba(240, 163, 94, .22), transparent 60%), var(--band); }
.plus-karte.innen { margin: -22px -24px; }
.plus-karte h2 { margin: 14px 0 6px; font-size: 1.6rem; color: var(--text); }
.plus-karte p { color: var(--leise); max-width: 52ch; }
.bild-zeile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.bild-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.datei-knopf { position: relative; overflow: hidden; }
.datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kopierfeld { font: .88rem var(--mono); margin: 4px 0 12px; }
.themen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.thema-wahl { position: relative; display: grid; gap: 10px; cursor: pointer; }
.thema-wahl input { position: absolute; opacity: 0; }
.thema-muster { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 4 / 3; padding: 10px; border-radius: 16px; border: 2px solid var(--linie); background: var(--m1); transition: border-color .2s, transform .3s var(--kurve); }
.thema-muster i { border-radius: 8px; background: var(--m2); }
.thema-muster i:first-child { grid-row: span 2; }
.thema-muster i:last-child { background: var(--m3); }
.thema-wahl:hover .thema-muster { transform: translateY(-2px); }
.thema-wahl input:checked + .thema-muster { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-grund); }
.thema-wahl input:focus-visible + .thema-muster { outline: 3px solid var(--fokus); outline-offset: 2px; }
.thema-name { display: flex; gap: 6px; align-items: center; font-size: .9rem; font-weight: 500; }
.thema-name .i { width: .95em; height: .95em; color: var(--leise); }
.thema-wahl.gesperrt { cursor: not-allowed; }
.thema-wahl.gesperrt .thema-muster { opacity: .55; filter: saturate(.7); }
.t-auto .thema-muster { --m1: linear-gradient(135deg, #fff 50%, #000 50%); --m2: #e8e8ed; --m3: #b8652f; background: linear-gradient(135deg, #f5f5f7 50%, #111 50%); }
.t-hell { --m1: #f5f5f7; --m2: #fff; --m3: #b8652f; }
.t-dunkel { --m1: #111112; --m2: #1c1c1e; --m3: #e0a458; }
.t-papier { --m1: #efe7d7; --m2: #fcf9f2; --m3: #9c4f1f; }
.t-mitternacht { --m1: #0d1326; --m2: #141b33; --m3: #8fb0ff; }
.t-salbei { --m1: #e7ede3; --m2: #fbfcfa; --m3: #3c7657; }
.t-bordeaux { --m1: #201015; --m2: #2a161c; --m3: #ec8a9d; }
.t-auto .thema-muster i { background: rgba(128, 128, 128, .35); }
.t-auto .thema-muster i:last-child { background: #b8652f; }

/* Rechtstexte */
.text h2 { font-size: 1.35rem; margin-top: 1.8em; }
.text ul { padding-left: 1.2em; }
.text li { margin-bottom: .4em; }

/* ---------- Fuß ---------- */
.fuss { background: var(--band); color: var(--leise); font-size: .78rem; padding: 40px 0 32px; margin-top: 0; }
.fuss-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--linie); }
.fuss .marke > span { font-size: 1rem; }
.fuss p { margin: 10px 0; }
.fuss .plattformen a { background: var(--zart); }
.fuss-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fuss-spalten h3 { font-size: .8rem; color: var(--text); margin: 0 0 12px; letter-spacing: 0; }
.fuss-spalten a { display: block; color: var(--leise); padding: 3px 0; }
.fuss-spalten a:hover { color: var(--text); }
.fuss-text { max-width: 80ch; margin-top: 24px !important; line-height: 1.6; }
.fuss-unten { display: flex; justify-content: space-between; gap: 16px; }
.fuss-unten a { color: var(--leise); }

/* ---------- Altes Studio ---------- */
.login { display: grid; place-items: center; min-height: 70vh; padding: 64px 16px; }
.login-karte { width: 100%; max-width: 400px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 28px; padding: 40px 36px; box-shadow: var(--schatten); text-align: center; }
.login-karte img { border-radius: 14px; margin: 0 auto 18px; display: block; }
.login-karte h1 { font-size: 2rem; margin-bottom: .25em; }
.login-karte .formular { max-width: none; text-align: left; }
.zurueck { display: inline-block; margin-bottom: 18px; font-size: .95rem; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 8px; }
.kennzahlen div { background: var(--band); border-radius: 18px; padding: 18px 20px; display: grid; }
.kennzahlen b { font-family: var(--titel); font-size: 2.2rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahlen span { color: var(--leise); font-size: .85rem; }
.liste { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .95rem; }
.liste th { text-align: left; font-size: .75rem; color: var(--leise); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.liste td { padding: 16px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste tbody tr:hover { background: var(--band); }
.liste td a { color: var(--text); font-weight: 600; }
.schritte { display: flex; gap: 4px; margin-bottom: 6px; }
.schritt { width: 20px; height: 5px; border-radius: 3px; background: var(--zart-hover); }
.schritt.erledigt { background: var(--gut); }
.schritte.gross .schritt { width: 56px; height: 6px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.studio-unten { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 24px; }
.themen { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.themen li { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; background: var(--band); border-radius: 16px; padding: 14px 16px; }
.themen p { margin: 4px 0 0; color: var(--leise); font-size: .92rem; white-space: pre-line; }
.ausgabe { margin: 28px 0; }
.ausgabe > div { background: var(--band); border-radius: var(--radius); padding: 24px 26px; }
.ausgabe h3 { font-size: 1.1rem; }
.pruefliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.auftraege { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: .92rem; }
.auftraege li { background: var(--band); border-radius: 12px; padding: 10px 14px; }
.auftraege span[class^="auftrag-"] { display: inline-block; min-width: 4.6em; font-weight: 600; font-size: .78rem; border-radius: 999px; padding: 2px 9px; margin-right: 6px; text-align: center; background: var(--flaeche); }
.auftrag-offen { color: var(--leise); } .auftrag-laeuft { color: var(--akzent); } .auftrag-fertig { color: var(--gut); } .auftrag-fehler { color: var(--fehler); }
.abschnitt > details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 16px 20px; margin-top: 14px; }
.abschnitt > details > summary { cursor: pointer; font-weight: 600; }
.bericht { margin-top: 12px; overflow-x: auto; font-size: .95rem; }
.bericht table { border-collapse: collapse; }
.bericht td { border-bottom: 1px solid var(--linie); padding: 7px 12px; }
.bericht .kopiertext { white-space: pre-wrap; word-break: break-word; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; font: .88rem/1.55 var(--mono); user-select: all; }


/* Aufklappen: Transkript und Quellen */
.aufklapp-gruppe { display: grid; gap: 14px; margin: 72px auto 0; max-width: 980px; }
.aufklapp { background: var(--band); border-radius: var(--radius); overflow: hidden; }
.aufklapp > summary { display: flex; align-items: center; gap: 12px; padding: 24px 28px; cursor: pointer; list-style: none; font: 600 1.3rem/1.2 var(--titel); letter-spacing: -.02em; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary .leise { margin-left: auto; font-size: .95rem; font-weight: 500; }
.aufklapp > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise); transform: rotate(45deg) translate(-3px, -3px); transition: transform .4s var(--feder); }
.aufklapp[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.aufklapp > summary:hover { background: var(--zart); }
.aufklapp[open] > :not(summary) { animation: aufklappen .5s var(--feder); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-8px); } }
.aufklapp .zweispaltig { margin: 0; padding: 8px 28px 32px; }
.aufklapp .belege { padding: 0 20px 24px; margin: 0; }
.aufklapp .belege li { background: var(--flaeche); }

/* ---------- Bewegung beim Scrollen ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .karte, .versprechen .dreier > div, .neu-bild, .neu-text, .vorteil, .tarif, .zeile, .plus-titel, .versprechen h2 {
      animation: hereinschweben linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes hereinschweben { from { opacity: .25; translate: 0 64px; scale: .96; } to { opacity: 1; translate: none; scale: none; } }
    .held-bild picture { animation: heranzoomen linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    @keyframes heranzoomen { from { scale: .86; border-radius: 64px; } to { scale: 1; } }
  }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 980px) {
  .vorteile, .vorteile.hell-grund { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .abschnitt { padding-top: 72px; padding-bottom: 72px; }
  .held { padding-top: 56px; }
  .neu { grid-template-columns: 1fr; gap: 32px; padding-top: 88px; padding-bottom: 64px; }
  .neu-bild { max-width: 380px; }
  .zweispaltig, .dreier, .zweier, .studio-unten, .fuss-oben { grid-template-columns: 1fr; gap: 28px; }
  .zweispaltig { margin-top: 56px; }
  .zweispaltig aside { position: static; }
  .konto { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .konto-nav { position: static; }
  .konto-nav nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin: 0 -22px; padding: 0 22px; }
  .konto-nav nav a { white-space: nowrap; background: var(--zart); }
  .konto-nav nav a .i { display: none; }
  .konto-wer { display: none; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liste th:nth-child(3), .liste td:nth-child(3) { display: none; }
  .tarife { grid-template-columns: minmax(0, 420px); }
  .tarif.empfohlen { order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .held-satz br { display: none; }
  .held-knoepfe { gap: 18px; }
  .hauptnav { display: none; }
  .kopf-rechts { margin-left: auto; }
  .kopf-innen { gap: 8px; }
  .marke > span { font-size: 1rem; }
  .karte-text { padding: 18px 20px 20px; }
  .vorteile, .vorteile.hell-grund { grid-template-columns: 1fr; }
  .kennzahlen-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kennzahl { padding: 14px; }
  .kennzahl b { font-size: 1.5rem; }
  .profil-kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
  .auth-karte { padding: 32px 22px 26px; border-radius: 24px; }
  .audio-karte { flex-direction: column; align-items: stretch; }
  .audio-karte .folgenbild { width: 100%; aspect-ratio: 16 / 9; }
  .raster { grid-template-columns: 1fr; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
  .liste th:nth-child(4), .liste td:nth-child(4) { display: none; }
  .k-neu > .avatar { display: none; }
  .menue-liste { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .aktion-menue .menue-liste { position: absolute; left: 50%; right: auto; top: calc(100% + 10px); width: 240px; }
  .toast { top: 64px; }
}
/* Handy: Navigation als Leiste unten */
.tabbar { display: none; }
@media (max-width: 640px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--glas); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--glas-linie); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 4px 0; color: var(--leise); font-size: .66rem; font-weight: 500; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a[aria-current] { color: var(--akzent); }
  .tabbar .i { width: 24px; height: 24px; }
  .fuss { padding-bottom: 24px; }
}
@media (max-width: 640px) { .kopf-link { display: none; } }