/* Nextfix-Website – gemeinsames Stylesheet.
   Richtung: „The sentence is the layout“ (Taste-Skill), Farben Oxblood und Grau, Schriften Fira Sans und Fira Mono (lokal).
   Alles verweist auf die Tokens unten; Begründungen in DESIGN.md. */

/* ---------- Schriften (lokal, SIL OFL) ---------- */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/fira-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/fira-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/fira-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/fira-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/fira-sans-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/fira-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/fira-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Graphit auf hellem Papier, Markenviolett als einziger Akzent (Review 2026-10-17, siehe DESIGN.md) */
  --bg: #f7f6f3;          /* Grund: helles, leicht warmes Papier */
  --surface: #ecebe6;     /* eine Stufe dunkler: Felder, Kacheln */
  --surface-2: #dfddd6;   /* zweite Stufe: Balken, Spur */
  --ink: #1c1b22;         /* Graphit: Text, 15,8:1 */
  --muted: #5c5a66;       /* Nebentext, 6,3:1 auf Grund */
  --accent: #5B3FBF;      /* Markenviolett: Aktion, Links, Logo; 6,7:1 auf Grund */
  --accent-press: #4a32a3;
  --accent-ink: #ffffff;  /* Schrift auf Violett, 7,2:1 */
  --field: #2a1f5c;       /* tiefes Violett: Prüfungen, Fuß */
  --field-ink: #f7f6f3;   /* 13,4:1 */
  --field-dim: #b9b0e8;   /* Nebentext auf Feld, 7,2:1 */
  --code-bg: #1c1b22;
  --code-ink: #f7f6f3;

  --font-display: "Fira Sans Condensed", "Fira Sans", "Arial Narrow", sans-serif;
  --font-text: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  /* Befehle in Systemschrift mit fester Breite: Punkte, Striche und Leerzeichen bleiben unterscheidbar, kein Download */
  --font-code: "Fira Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* fünf Größen: klein, Text, Aussage, Überschrift, Riese */
  --step-small: 0.9375rem; /* 15 px: Nebentexte bleiben gut lesbar */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-statement: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  --step-h2: clamp(2rem, 1.25rem + 2.4vw, 3.5rem);   /* eine Stufe für alle Abschnitts-Überschriften */
  --step-head: clamp(2.75rem, 1.1rem + 5.4vw, 6rem);
  --step-giant: clamp(8rem, 30vw, 34rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --max: 80rem;           /* eine Spalte für die ganze Website: alle Abschnitte teilen linke und rechte Kante */
  --edge: max(var(--margin), calc((100vw - var(--max)) / 2));
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(5rem, 9vw, 9rem);
  --radius: 6px;          /* wie Karten und Knöpfe im Produkt */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 260ms;
  --t-reveal: 800ms;
  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body);
  line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.field-red :focus-visible, .site-foot :focus-visible, .code :focus-visible { outline-color: var(--field-ink); }
/* Dunkle Flächen: heller Ring, sonst nur 2,4:1 Kontrast */
.claude :focus-visible, .fokus :focus-visible, .chat :focus-visible { outline-color: #c7b9ff; }
::placeholder { color: var(--muted); opacity: 1; }
html { scrollbar-color: var(--muted) var(--bg); }

h1, h2, h3 { font-weight: 500; text-wrap: balance; hyphens: manual; }
.display { font-family: var(--font-display); font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display); font-size: var(--step-h2); line-height: 1.02; letter-spacing: -0.015em; max-width: 22ch; }
.statement { font-size: var(--step-statement); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 30ch; text-wrap: pretty; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { padding-inline: var(--edge); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 50; background: var(--ink); color: var(--bg);
  padding: 0.7rem 1rem; text-decoration: none; }
.skip:focus { top: 0.75rem; }

/* ---------- Bedienelemente ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem;
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent); border-radius: var(--radius); text-decoration: none;
  font-weight: 500; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button--small { min-height: 2.5rem; padding: 0 1rem; font-size: var(--step-small); }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--surface-2); }
.button--light { background: var(--field-ink); color: var(--field); border-color: var(--field-ink); }
.chip { min-height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--surface-2); border-radius: var(--radius); background: var(--bg);
  font-size: var(--step-small); font-weight: 500; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.chip:active { transform: scale(0.97); }
.link, .prose a, .faq-list a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-press); border-color: var(--accent-press); }
  .button--ghost:hover { background: var(--surface); border-color: var(--muted); }
  .button--light:hover { background: #fff; border-color: #fff; }
  .chip:hover { background: var(--surface); }
  .link:hover, .prose a:hover, .faq-list a:hover { text-decoration-color: currentColor; }
}
@media (forced-colors: active) { .button, .chip, .code__copy { border: 2px solid ButtonText; } }
@media (max-width: 24em) { .button { max-width: 100%; white-space: normal; text-align: center; padding-block: 0.5rem; } } /* lange Knopftexte brechen um statt aus dem Bild zu ragen */
video:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Kopf ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--edge); position: relative; z-index: 5; }
/* Markenzeichen aus dem Produkt (violettes Quadrat mit Haken) vor der Wortmarke */
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.625rem; line-height: 1;
  letter-spacing: -0.01em; text-decoration: none; }
.wordmark::before { content: ""; flex: none; width: 1.75rem; height: 1.75rem; background: url("../../favicon.svg") center / contain no-repeat; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); font-size: var(--step-small); }
.site-nav a:not(.button) { padding-block: 0.8rem; text-decoration: underline 2px; text-underline-offset: 0.35em;
  text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
.site-nav a[aria-current="page"]:not(.button) { text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .site-nav a:not(.button):hover { text-decoration-color: currentColor; } }
@media (max-width: 37.5em) { .site-nav .nav-wide { display: none; } }
/* Handys bis 384 px (iPhone 375, kleine Android): Kopf enger, damit nichts aus dem Bild ragt */
@media (max-width: 24em) {
  .site-head { gap: 0.5rem; }
  .wordmark { font-size: 1.375rem; gap: 0.4rem; }
  .wordmark::before { width: 1.4rem; height: 1.4rem; }
  .site-nav { gap: 0.7rem; }
  .site-nav .button--small { padding: 0 0.7rem; }
}
@media (max-width: 21em) { .wordmark::before { display: none; } } /* unter 336 px reicht der Platz nicht für Zeichen + Wort + Menü: das Wort bleibt */
@media (max-width: 19em) { .site-nav > a:nth-child(2) { display: none; } } /* FAQ, steht auch im Fuß */

/* ---------- Held: Aussage links, die nächste Aufgabe rechts ---------- */
.hero { overflow-x: clip; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(2.5rem, 7vh, 5.5rem) clamp(3rem, 8vh, 6rem); }
.hero__title { font-family: var(--font-display); font-size: clamp(2.9rem, 0.8rem + 6.2vw, 7.25rem); line-height: 0.98; letter-spacing: -0.025em;
  max-width: 16ch; }
.hero__lead { margin-top: 1.5rem; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.5; max-width: 38ch; }
.hero__lead strong { font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__meta { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }

/* „Was jetzt tun“-Panel wie im Produkt: drei feste Plätze, oberste Aufgabe wird an Ort und Stelle abgehakt,
   dann rücken die anderen nach. Konzept: .review/hero-modul.md. Bewegung nur über transform/opacity. */
.wjt { margin: 0; width: 100%; max-width: 36rem; justify-self: end; container-type: inline-size;
  --p-ink: #1B1F2A; --p-muted: #596070; --p-line: #DCDFE4; --p-ok: #1D7544;
  --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); }
.wjt { position: relative; }
/* weiches Licht hinter dem Fenster: ein einziger radialer Schein in Markenviolett, kein Glas */
.wjt::before { content: ""; position: absolute; inset: -12% -10% 4% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(91 63 191 / 0.16), transparent); } /* taste-skill-ignore: einziger Lichtschein */
.wjt__window { background: #fff; color: var(--p-ink); border: 1px solid var(--p-line); border-radius: 10px; overflow: clip;
  box-shadow: 0 1px 2px rgb(28 27 34 / 0.06), 0 24px 48px -24px rgb(28 27 34 / 0.35), 0 8px 16px -8px rgb(28 27 34 / 0.08); } /* taste-skill-ignore: Produktfenster */
.wjt__chrome { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem; background: #f4f4f6; border-bottom: 1px solid var(--p-line); }
.wjt__dots { display: inline-flex; gap: 0.35rem; }
.wjt__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #d5d7dc; }
.wjt__addr { flex: 1; text-align: center; font-family: var(--font-code); font-size: 0.75rem; color: var(--p-muted); background: #fff; border: 1px solid var(--p-line);
  border-radius: 5px; padding: 0.15rem 0.6rem; margin-right: 1.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wjt__panel { background: #fff; color: var(--p-ink); }
.wjt__panel p { max-width: none; }
.wjt__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: center; padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--p-line); }
.wjt__title { font-weight: 600; font-size: 1rem; line-height: 1.3; white-space: nowrap; }
.wjt__done { grid-row: 2; font-size: 0.8125rem; line-height: 1.3; color: var(--p-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wjt__toggle { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0 0.7rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--p-ink); background: #fff; border: 1px solid var(--p-line); border-radius: 4px; white-space: nowrap;
  transition: background-color var(--t-hover) ease; }
.wjt__toggle svg { width: 0.75rem; height: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .wjt__toggle:hover { background: #f4f5f7; } }

/* Ohne JS: Zeilen im normalen Fluss, Plätze 0–2 sichtbar. Mit JS: absolute Plätze, Höhe = höchste Zeile (--row-h). */
.wjt__list { position: relative; list-style: none; margin: 0; padding: 0; }
.row { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; column-gap: 0.85rem; align-items: start;
  padding: 1rem 1.25rem; background: #fff; }
.row[data-slot="3"] { display: none; }
.js .wjt__list { height: calc(3 * var(--row-h, 8rem)); }
.js .row { position: absolute; inset: 0 0 auto 0; min-height: var(--row-h, auto); transform: translateY(calc(var(--slot, 0) * var(--row-h, 8rem))); }
.js .row[data-slot="3"] { display: grid; opacity: 0; visibility: hidden; }
.row::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0; border-bottom: 1px solid #eef0f3; } /* taste-skill-ignore: Trennlinie im Produktfenster */
.row::before { content: ""; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
  opacity: 0; transition: opacity 200ms ease; }
.row.is-active::before { opacity: 1; }
.row__check { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; position: relative; border: 1.5px solid #8b919c; border-radius: 50%; background: #fff; }
.row__check:disabled { cursor: default; }
.row__tick { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; opacity: 0; transform: scale(0.5); }
.row__tick svg { width: 0.85rem; height: 0.85rem; }
.row.is-done .row__tick { opacity: 1; transform: none; }
.row__body { display: grid; gap: 0.4rem; min-width: 0; transition: opacity 200ms ease; }
.row__title { position: relative; font-weight: 600; font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem); line-height: 1.3; }
.row__nr { color: var(--p-muted); font-weight: 500; margin-right: 0.4rem; font-variant-numeric: tabular-nums; }
/* Durchstreichen nur mit transform: identische Kopie mit Linie, Wischblende (Hülle −101 %, Inhalt +101 %) */
.row__strike { position: absolute; inset: 0; overflow: hidden; transform: translateX(-101%); pointer-events: none; }
.row__strike > span { display: block; transform: translateX(101%); color: transparent; text-decoration: line-through 2px var(--p-ink); }
.row.is-done .row__strike, .row.is-done .row__strike > span { transform: none; }
.row.is-done .row__body, .row.is-done .row__effect { opacity: 0.55; }
.row__why { color: var(--p-muted); font-size: 0.9375rem; line-height: 1.4; }
.row__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8125rem; }
.row__effect { font-weight: 600; font-size: 0.875rem; white-space: nowrap; transition: opacity 200ms ease; }
.row__effect--hoch { color: var(--p-ok); }
.row--recheck { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; background: #fafaf8; }
.js .row--recheck { display: flex; }
.row--recheck p { color: var(--p-muted); font-size: 0.9375rem; }
.row__btn { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.85rem; border-radius: 4px; background: var(--accent); color: #fff;
  font-weight: 600; font-size: 0.875rem; }
.wjt__foot { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 1.25rem; border-top: 1px solid var(--p-line);
  background: #fafaf8; font-size: 0.875rem; color: var(--p-muted); }
.wjt__score { display: inline-block; font-size: 1.375rem; font-weight: 600; color: var(--p-ink); font-variant-numeric: tabular-nums; transition: color 300ms ease; }
.wjt__score.is-up { color: var(--accent); }
.wjt__delta { font-size: 0.8125rem; font-weight: 600; color: var(--p-ok); }
.wjt__cap { margin-top: 0.85rem; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
/* Die Panelbreite zählt, nicht die des Fensters */
@container (max-width: 26rem) {
  .row { grid-template-columns: 1.25rem minmax(0, 1fr); padding: 0.85rem 1rem; column-gap: 0.7rem; }
  .row__check { width: 1.25rem; height: 1.25rem; }
  .row__effect { grid-column: 2; margin-top: 0.35rem; }
  .row__why { display: none; }
  .wjt__head, .wjt__foot { padding-inline: 1rem; }
  .row::after { left: 1rem; right: 1rem; }
}
@container (max-width: 17rem) {
  .wjt__head { grid-template-columns: minmax(0, 1fr); }
  .wjt__toggle { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 0.5rem; }
}

.tag { border: 1px solid #DCDFE4; border-radius: 3px; padding: 0.05rem 0.4rem; color: #596070; } /* taste-skill-ignore: Interface-Fragment */
.tag--dringend { background: #FBEAE8; color: #C0261A; border-color: #FBEAE8; }
.tag--wichtig { background: #FBF0DF; color: #985400; border-color: #FBF0DF; }

@media (max-width: 56em) {
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; padding-top: 1.5rem; }
  .hero__title { max-width: 14ch; }
  .wjt { justify-self: start; }
}
@media (max-width: 30em) { .hero__actions .button { flex: 1 1 100%; } }

/* ---------- Abschnitte allgemein ---------- */
.section { padding-block: calc(var(--section) / 2); }
.section--first { padding-top: var(--section); }
.lead-after { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--muted); max-width: 52ch; }

/* Produktbilder: eines groß, zwei daneben */
.shot { overflow: clip; } /* Einblend-Zoom bleibt im Rahmen, kein Querscrollen */
.shot img { width: 100%; border-radius: var(--radius); box-shadow: 0 1px 3px rgb(28 27 34 / 0.12); } /* taste-skill-ignore: Bildkante auf hellem Grund */
.shot--big { margin-top: clamp(2.5rem, 5vw, 4rem); }
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(2rem, 4vw, 3rem); }
figcaption { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
@media (max-width: 50em) { .shot-pair { grid-template-columns: minmax(0, 1fr); } }

/* Überschrift zum Eintippen (Seitentitel-Prüfung) */
.typer { display: flex; flex-direction: column; }
.typer__head { max-width: 24ch; }
.typer__label { display: block; margin-top: 2.5rem; font-size: var(--step-body); max-width: 52ch; }
.typer__line { position: relative; margin-top: 0.75rem; }
.typer__input { display: block; width: 100%; border: 0; border-bottom: 4px solid var(--ink); background: var(--surface); padding: 0.12em 0.3em 0.18em; margin: 0; border-radius: var(--radius) var(--radius) 0 0;
  resize: none; overflow: hidden; field-sizing: content;
  font-family: var(--font-display); font-size: var(--step-head); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); caret-color: var(--ink); caret-shape: block; text-overflow: clip; cursor: text; }
.typer__input:focus { outline: none; }
.typer__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.typer__line:focus-within { outline: 3px solid var(--ink); outline-offset: 0.5rem; }
/* Mit JavaScript wird die Linie unter dem Titel zur Längen-Anzeige: füllt sich bis 70 Zeichen */
.js .typer__input { border-bottom-color: var(--surface-2); } /* Spur; die Füllung darüber zeigt die Länge */
.js .typer__line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent);
  transform: scaleX(var(--fill, 1)); transform-origin: left center; transition: transform var(--t-ui) var(--ease-out); pointer-events: none; }
.typer__answer, .typer__results { max-width: 35rem; display: grid; gap: 0.5rem; }
.typer__answer { margin-top: 3rem; }
.check { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.9rem 1rem; background: var(--surface);
  font-size: 1rem; line-height: 1.45; align-items: baseline; }
.check__name { color: var(--muted); font-size: var(--step-small); }
.check__verdict strong { font-weight: 600; display: inline-block; }
.check--kw > span { display: block; }
.check__hint { display: block; margin-top: 0.35rem; font-size: var(--step-small); color: var(--muted); }
.check--kw input { width: 100%; border: 0; border-bottom: 2px solid var(--muted); background: var(--bg); padding: 0.45rem 0.6rem; font-size: 1rem; border-radius: 4px 4px 0 0; }
.check--kw input:focus-visible { outline-offset: 0; }
.check__copy { margin-top: 0.4rem; font-size: var(--step-small); font-weight: 500; text-decoration: underline;
  text-underline-offset: 0.2em; transition: opacity var(--t-hover) ease; }
.check__copy:active { opacity: 0.6; }
.typer__foot { padding-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.typer__foot > span { font-size: var(--step-small); color: var(--muted); width: 100%; }
.example { min-height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--surface-2); border-radius: var(--radius); background: var(--bg);
  font-size: 1rem; text-align: left; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.example:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .example:hover { background: var(--surface); } }
.typer__privacy { margin-top: 1.25rem; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
.typer__cta { margin-top: 2rem; }
.typer__cta .button { white-space: normal; text-align: left; padding-block: 0.6rem; }
@media (max-width: 40em) {
  .typer__input { font-size: 9vw; }
  .check { grid-template-columns: 1fr; gap: 0.2rem; }
  .example { min-height: 2.75rem; }
}

.modules__more { margin-top: 2.5rem; max-width: 60ch; color: var(--muted); }
.modules__more .link { font-weight: 500; }

/* Violette Fläche: 106 Prüfungen */
/* feste Werte statt clamp(): der Impeccable-Detektor liest clamp() in padding nicht */
.field-red { background: var(--field); color: var(--field-ink); padding: clamp(4.5rem, 9vw, 8rem) var(--edge); }
.checks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem var(--gutter); margin-top: 2rem;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.35; }
.checks-list li { padding-block: 0.6rem; border-top: 1px solid rgb(247 246 243 / 0.18); } /* taste-skill-ignore: Trennlinie in einer echten Liste */
.checks-more { margin-top: 2.5rem; color: var(--field-dim); }
.checks-more a:not(.button) { color: var(--field-ink); }
.checks-more a { font-weight: 500; }

/* FAQ: breite Überschrift, eingerückte Fragen */
.faq-head { grid-column: 1 / -1; }
.faq-list { grid-column: 5 / -1; margin-top: 5rem; grid-row: 2; display: grid; gap: 0.75rem; }
.qa { position: relative; --qa-pad: min(1.5rem, var(--margin)); } /* Einzug nie breiter als der Seitenrand */
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; align-items: center;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem); line-height: 1.3; padding: 1rem var(--qa-pad); margin-inline: calc(var(--qa-pad) * -1);
  transition: background-color var(--t-hover) ease; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 0.65rem; height: 0.65rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform var(--t-ui) var(--ease-out); }
.qa[open] summary::after { transform: translateY(15%) rotate(-135deg); }
.qa[open] { background: var(--surface); margin-inline: calc(var(--qa-pad) * -1); padding-inline: var(--qa-pad); }
.qa[open] summary { margin-inline: 0; padding-inline: 0; }
.qa__a { padding: 0 0 1.5rem; max-width: 52ch; font-size: 1.0625rem; }
.qa__a p + p { margin-top: 0.8em; }
@media (hover: hover) and (pointer: fine) { .qa:not([open]) summary:hover { background: var(--surface); } }
.faq-more { grid-column: 5 / -1; margin-top: 2.5rem; }
.faq-facts { grid-row: 2; }
@media (max-width: 50em) {
  .faq-list, .faq-more { grid-column: 1 / -1; margin-top: 2.5rem; }
  .qa summary { padding-inline: var(--margin); margin-inline: calc(var(--margin) * -1); }
  .qa[open] { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
}

/* ---------- Fuß: Einladung über dem angeschnittenen Namen ---------- */
.site-foot { background: var(--field); color: var(--field-ink); position: relative; overflow: hidden;
  display: flex; flex-direction: column; padding: clamp(3.5rem, 8vh, 6rem) var(--edge) 0; }
.site-foot--short { min-height: 0; }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.foot-invite { grid-column: 1 / span 7; }
.foot-invite h2 { font-family: var(--font-display); font-size: var(--step-h2); line-height: 1.02; letter-spacing: -0.015em; max-width: 16ch; }
.foot-invite .button { margin-top: 2.5rem; }
.foot-note { margin-top: 1.25rem; font-size: var(--step-small); max-width: 46ch; }
.foot-links { grid-column: 10 / span 3; display: grid; gap: 0; align-content: start; margin-top: -0.6rem; }
.foot-links a { text-decoration: none; width: fit-content; padding-block: 0.6rem; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { text-decoration: underline; } }
.foot-legal { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  font-size: var(--step-small); padding-top: 4rem; position: relative; z-index: 1; }
.foot-legal a { color: inherit; }
.foot-legal { color: var(--field-dim); }
.foot-name { font-family: var(--font-display); font-size: clamp(5rem, 15vw, 15rem); color: rgb(247 246 243 / 0.12); line-height: 0.8; letter-spacing: -0.035em;
  white-space: nowrap; margin: 0.5rem 0 0 -0.04em; transform: translateY(24%); user-select: none; }
@media (max-width: 50em) {
  .foot-invite, .foot-links { grid-column: 1 / -1; }
  .foot-invite .button { width: 100%; }
  .foot-links { margin-top: 3rem; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 2rem; }
  .foot-name { font-size: 36vw; }
}

/* ---------- Unterseiten (Lesen) ---------- */
.page-head { padding: clamp(3rem, 9vw, 8rem) var(--edge) clamp(3rem, 7vw, 6rem); }
.page-head h1 { font-family: var(--font-display); font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; max-width: 16ch; }
.page-head .statement { margin-top: 2rem; max-width: 34ch; }
.prose { padding-inline: var(--edge); }
.prose h2 { font-size: var(--step-statement); line-height: 1.3; letter-spacing: -0.01em; margin-top: 4.5rem; max-width: 30ch; }
.prose h3 { font-size: var(--step-body); font-weight: 600; margin-top: 2.25rem; }
.prose p, .prose ul, .prose ol { margin-top: 1rem; max-width: 62ch; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4rem; }
.prose strong { font-weight: 600; }
.prose a { font-weight: 500; }
.prose code { font-family: var(--font-code); font-size: 0.9em; background: var(--surface); padding: 0.1em 0.3em; }
.prose > :first-child { margin-top: 0; }
.done { margin-top: 3rem !important; padding: 1rem 1.25rem; background: var(--surface); border-radius: var(--radius); }
.placeholder { background: var(--surface-2); padding: 0 0.25em; }

/* Codeblock mit Kopierknopf */
.code { position: relative; margin-top: 1rem; max-width: 46rem; background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius); }
.code pre { margin: 0; padding: 1.1rem 1.25rem; padding-right: 6.5rem; overflow-x: auto; font-family: var(--font-code);
  font-size: 0.9375rem; font-weight: 400; line-height: 1.65; }
.code pre code { background: none; padding: 0; font-size: inherit; }
.code__copy { position: absolute; top: 0.6rem; right: 0.6rem; min-height: 2.25rem; padding: 0 0.8rem; background: var(--bg); color: var(--ink);
  font-size: var(--step-small); font-weight: 500; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.code__copy:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .code__copy:hover { background: #fff; } }
@media (max-width: 40em) { .code pre { padding: 3.4rem 1rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; } } /* lange Befehle umbrechen statt abschneiden */
.os { margin-top: 1.25rem; }
.os > p:first-child { font-weight: 600; }

/* Schritte der Installation */
.steps { counter-reset: s; list-style: none; padding: 0 !important; max-width: 46rem !important; }
.steps > li { counter-increment: s; margin-top: 3.5rem !important; }
.steps > li > h2 { margin-top: 0; }

/* Funktionen: Module im Wechsel */
.module { padding-inline: var(--edge); margin-top: clamp(5rem, 11vw, 10rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.module__text { grid-column: 1 / span 5; }
.module__pic { grid-column: 6 / -1; }
.module--flip .module__text { grid-column: 8 / -1; grid-row: 1; }
.module--flip .module__pic { grid-column: 1 / span 7; grid-row: 1; }
.module--wide .module__text { grid-column: 1 / span 7; }
.module--wide .module__pic { grid-column: 1 / -1; }
.module--plain .module__text { grid-column: 4 / span 7; }
.module h2 { font-size: var(--step-statement); line-height: 1.2; letter-spacing: -0.01em; }
.module p, .module ul { margin-top: 1rem; }
.module ul { padding-left: 1.25rem; }
.module li + li { margin-top: 0.35rem; }
.module__pic img { width: 100%; border-radius: 4px; }
.module__pics { display: grid; grid-template-columns: 3fr 1fr; gap: var(--gutter); align-items: end; }
.module__phone img { border-radius: 4px; }
@media (max-width: 40em) { .module__pics { grid-template-columns: minmax(0, 1fr); } .module__phone { max-width: 11rem; } } /* Projektliste in voller Breite lesbar */
@media (max-width: 50em) {
  .module .module__text, .module .module__pic, .module--flip .module__text, .module--flip .module__pic { grid-column: 1 / -1; grid-row: auto; }
}

/* 404: echte Aufgabenzeile aus Nextfix */
.shot--task { margin-top: 3rem; max-width: 52rem; }
.shot--task img { background: #fff; }
.page-head .shot--task + .statement { margin-top: 3rem; }


/* ---------- Szene „Rauschen → Fokus“: aus der Wolke der Fundstellen schält sich die nächste Aufgabe ---------- */
.fokus { position: relative; margin: 2rem 0 0; aspect-ratio: 16 / 9; min-height: 22rem; max-height: 46rem; border-radius: 14px; overflow: clip; background: #121117;
  box-shadow: 0 30px 60px -30px rgb(18 17 23 / 0.6); isolation: isolate; } /* taste-skill-ignore: Bühne der Szene */
.fokus canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fokus__hud { position: absolute; left: 1.1rem; top: 0.9rem; right: 1.1rem; display: flex; justify-content: space-between; gap: 1rem;
  font: 500 0.75rem/1.3 var(--font-code); color: #9f9bb0; letter-spacing: 0.02em; pointer-events: none; }
.fokus__hud b { color: #fff; font-weight: 600; }
.fokus__frame { position: absolute; left: 50%; top: 34%; width: min(30rem, 80%); transform: translate(-50%, -50%); padding: 1.1rem 1.3rem; color: #fff;
  pointer-events: none; opacity: 0; transition: opacity 400ms ease; }
.fokus.is-focus .fokus__frame, html:not(.js) .fokus__frame { opacity: 1; }
.fokus__frame::before { content: ""; position: absolute; inset: 0; border: 1.5px solid rgb(255 255 255 / 0.9); border-radius: 4px; background: rgb(18 17 23 / 0.78);
  clip-path: inset(0 100% 0 0); transition: clip-path 700ms var(--ease-out); }
.fokus.is-focus .fokus__frame::before, html:not(.js) .fokus__frame::before { clip-path: inset(0 0 0 0); box-shadow: 0 0 0 1px rgb(199 185 255 / 0.25), 0 0 40px rgb(140 115 255 / 0.35); }
.fokus__label { position: relative; display: block; font: 500 0.6875rem/1 var(--font-code); color: #c7b9ff; letter-spacing: 0.08em; text-transform: uppercase; }
.fokus__task { position: relative; display: block; margin-top: 0.6rem; font: 600 clamp(1.05rem, 0.8rem + 1vw, 1.5rem)/1.25 var(--font-text); min-height: 2.5em; }
.fokus__meta { position: relative; display: block; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.3; color: #c9c6d6; min-height: 1.3em; }
.fokus__meta .hoch { color: #7fe0a6; font-weight: 600; }
.fokus .scr { color: #8f86c9; }
.fokus__ctrl { position: absolute; right: 0.9rem; bottom: 0.8rem; font-size: 0.8125rem; font-weight: 500; color: #fff; background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.22); border-radius: 6px; padding: 0.4rem 0.7rem; }
.fokus__ctrl:focus-visible { outline-color: #c7b9ff; }
.fokus__ctrl { display: inline-flex; align-items: center; gap: 0.45rem; }
.fokus__ctrl svg { width: 0.7rem; height: 0.7rem; }
.fokus__liste { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); }
.fokus__liste li { display: inline-flex; align-items: center; gap: 0.5rem; }
.fokus__liste .tag { font-size: 0.75rem; }
.fokus__nr { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 600; }
@media (max-width: 40em) { .fokus { aspect-ratio: 4 / 5; min-height: 0; } .fokus__frame { width: 88%; top: 31%; } .fokus__hud > span:last-child { display: none; } }

/* ---------- Vorher / Nachher ---------- */
.vn__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--gutter); align-items: stretch; margin-top: 2.5rem; }
.vn__col { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 12px; background: var(--surface); display: grid; align-content: start; gap: 0.25rem; }
.vn__col--nach { background: var(--field); color: var(--field-ink); }
.vn__label { font: 500 0.8125rem/1 var(--font-code); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.vn__col--nach .vn__label, .vn__col--nach .vn__von { color: var(--field-dim); }
.vn__zahl { font-family: var(--font-display); font-weight: 500; font-size: clamp(4rem, 2rem + 6vw, 8rem); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vn__von { color: var(--muted); }
.vn__col ul { margin-top: 1rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 1rem; }
.vn__pfeil { align-self: center; font-family: var(--font-display); font-size: clamp(2rem, 1rem + 3vw, 4rem); color: var(--accent); }
.vn__erledigt { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.vn__erledigt li { padding: 0.35rem 0.75rem 0.35rem 2rem; border-radius: 999px; background: var(--surface); font-size: 0.9375rem; text-decoration: line-through; text-decoration-color: var(--muted);
  position: relative; }
.vn__erledigt li::before { content: ""; position: absolute; left: 0.6rem; top: 50%; width: 0.9rem; height: 0.9rem; margin-top: -0.45rem; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.7rem no-repeat; }
.vn__quelle { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 40em) { .vn__grid { grid-template-columns: minmax(0, 1fr); } .vn__pfeil { transform: rotate(90deg); justify-self: center; } }
.tile { position: relative; }
.tile__note { position: absolute; right: 1rem; bottom: 1rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); background: rgb(255 255 255 / 0.9); border-radius: 4px; padding: 0.1rem 0.45rem; }
.video__bar .chip { min-height: 2.1rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.video__bar { justify-content: flex-start; }

/* ---------- Zahlenband ---------- */
.facts { border-block: 1px solid var(--surface-2); background: var(--surface); }
.facts__list.wrap { padding-inline: var(--edge); }
.facts__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); padding-block: clamp(2.5rem, 5vw, 4rem); }
.facts strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 1.6rem + 4vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 0.5rem; max-width: 22ch; color: var(--muted); font-size: 1rem; line-height: 1.4; }
@media (max-width: 50em) { .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }

/* ---------- Runde: Video + vier Schritte ---------- */
.durchlauf:empty { display: none; }
.durchlauf { margin-top: 2rem; }
.video { position: relative; margin: 0; border-radius: 10px; overflow: clip; background: #111; border: 1px solid var(--surface-2);
  box-shadow: 0 24px 48px -28px rgb(28 27 34 / 0.45); } /* taste-skill-ignore: Videofenster */
.video video { display: block; width: 100%; height: auto; }
.video video { cursor: pointer; }
.video__ctrl { position: absolute; right: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem;
  padding: 0 0.8rem; font-size: 0.8125rem; font-weight: 500; color: #fff; background: rgb(28 27 34 / 0.72); border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 6px; backdrop-filter: blur(6px); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.video__ctrl svg { width: 0.7rem; height: 0.7rem; }
.video__ctrl:active { transform: scale(0.97); }
.video__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .video__ctrl:hover { background: rgb(28 27 34 / 0.9); } }
.video__bar .chip[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.video__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); }
.steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2rem; }
.step { display: grid; gap: 0.3rem; align-content: start; padding: 1.1rem 1.25rem 1.25rem; border-radius: var(--radius); background: var(--surface); border-top: 4px solid var(--surface-2); }
.step--du { border-top-color: var(--accent); }
.step__nr { font-family: var(--font-code); font-size: 0.8125rem; color: var(--muted); }
.step__name { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1vw, 2rem); line-height: 1; }
.step__time { font-size: var(--step-small); font-weight: 600; color: var(--accent); }
.step:not(.step--du) .step__time { color: var(--muted); }
.step__text { font-size: 1rem; line-height: 1.45; margin-top: 0.3rem; }
@media (max-width: 56em) { .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30em) { .steps-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Google-Vorschau im Titel-Check ---------- */
.typer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); }
.typer > * { grid-column: 1 / -1; }
.typer .typer__answer { grid-column: 1; }
.typer .serp { grid-column: 2; grid-row: span 1; align-self: start; margin: 3rem 0 0; }
.check__opt { color: var(--muted); font-weight: 400; }
.serp__label { font-size: var(--step-small); color: var(--muted); margin-bottom: 0.6rem; }
.serp__box { background: #fff; border: 1px solid #dfe1e5; border-radius: 10px; padding: 1rem 1.1rem; font-family: Arial, "Helvetica Neue", sans-serif; color: #202124; }
.serp__box p { max-width: none; }
.serp__site { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; line-height: 1.3; }
.serp__fav { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #f1f3f4 url("../../favicon.svg") center / 1rem no-repeat; border: 1px solid #ecedef; }
.serp__name { display: block; color: #202124; }
.serp__url { display: block; color: #4d5156; font-size: 0.75rem; }
.serp__title { margin-top: 0.4rem; color: #1a0dab; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.serp__desc { margin-top: 0.25rem; color: #4d5156; font-size: 0.875rem; line-height: 1.58; }
.serp__desc:empty::before { content: "Ohne Beschreibung nimmt Google irgendeinen Text von der Seite."; font-style: italic; color: #70757a; }
.serp__note { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
@media (max-width: 56em) { .typer { grid-template-columns: minmax(0, 1fr); } .typer .typer__answer, .typer .serp { grid-column: 1; } .typer .serp { margin-top: 2rem; } }

/* ---------- Bento: Funktionen mit echten Ausschnitten ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2.5rem; }
.tile { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.25rem 0; background: var(--surface); border-radius: 10px; overflow: clip; min-height: 15rem; }
.tile h3 { font-family: var(--font-display); font-size: 1.625rem; font-weight: 500; line-height: 1.05; }
.tile p { font-size: 1rem; line-height: 1.45; max-width: 40ch; }
.tile img { margin-top: auto; width: 100%; border-radius: 6px 6px 0 0; box-shadow: 0 -1px 0 var(--surface-2), 0 8px 24px -12px rgb(28 27 34 / 0.3); background: #fff; } /* taste-skill-ignore: App-Ausschnitt */
.tile:not(:has(img)) { padding-bottom: 1.25rem; }
.tile--wide { grid-column: span 2; grid-row: span 2; }
@media (max-width: 56em) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile--wide { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 34em) { .bento { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Claude / MCP: dunkler Abschnitt ---------- */
.claude { background: var(--code-bg); color: #ecebf1; padding-block: var(--section); }
.claude__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.claude .h2 { color: #fff; }
.claude__text > p { margin-top: 1rem; color: #c9c7d3; max-width: 46ch; }
.claude__how { font-weight: 600; color: #fff !important; }
.claude .code { background: #111016; border: 1px solid #34323d; }
.claude .code__copy { background: #ecebf1; }
.claude__more a { color: #c7b9ff; }
.chat { margin: 0; display: grid; gap: 0.75rem; background: #24232b; border: 1px solid #34323d; border-radius: 12px; padding: 1.25rem; font-size: 1rem; }
.chat p { max-width: none; }
.chat__who { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: #9d9aa9; margin-bottom: 0.25rem; }
.chat__msg { background: #2e2d36; border-radius: 10px; padding: 0.85rem 1rem; line-height: 1.5; }
.chat__msg--du { background: var(--accent); color: #fff; justify-self: end; max-width: 85%; }
.chat__msg--du .chat__who { color: #dcd3ff; }
.chat__msg ol { margin: 0.5rem 0; padding-left: 1.25rem; }
.chat__msg li + li { margin-top: 0.3rem; }
.chat__msg p + p, .chat__msg ol + p { margin-top: 0.5rem; }
.chat__tool { border: 1px dashed #4a4856; border-radius: 10px; padding: 0.7rem 1rem; display: grid; gap: 0.25rem; }
.chat__tool code { font-family: var(--font-code); font-size: 0.8125rem; color: #c7b9ff; }
.chat__res { font-family: var(--font-code); font-size: 0.8125rem; color: #b6b3c1; }
.chat figcaption { font-size: 0.8125rem; color: #9d9aa9; margin-top: 0.25rem; }
@media (max-width: 56em) { .claude__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Für wen, Daten, Vergleich, Hilfe ---------- */
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2.5rem; }
.who li, .data__col { padding: 1.25rem; border-radius: 10px; background: var(--surface); }
.who h3, .data__col h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.05; margin-bottom: 0.5rem; }
.who p { font-size: 1rem; line-height: 1.5; }
@media (max-width: 64em) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .who { grid-template-columns: minmax(0, 1fr); } }
.data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2.5rem; }
.data__col ul { padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: 1rem; }
.data__col { border-top: 4px solid var(--accent); }
.data__col--out { border-top-color: var(--muted); }
.data__col--never { border-top-color: var(--ink); background: transparent; border: 1px solid var(--surface-2); border-top: 4px solid var(--ink); }
@media (max-width: 56em) { .data { grid-template-columns: minmax(0, 1fr); } }
.cmp { margin-top: 2rem; overflow-x: auto; border: 1px solid var(--surface-2); border-radius: 10px; background: #fff; }
.cmp:focus-visible { outline-offset: 2px; }
.cmp__table { width: 100%; min-width: 56rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.cmp__table th, .cmp__table td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--surface); } /* taste-skill-ignore: echte Tabelle */
.cmp__table thead th { border-top: 0; font-weight: 600; font-size: 1rem; }
.cmp__table thead th span { font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.cmp__table tbody th { font-weight: 500; color: var(--muted); width: 15rem; }
.cmp__us { background: rgb(91 63 191 / 0.06); font-weight: 600; color: var(--ink); }
thead .cmp__us { color: var(--accent); }
.cmp__no { color: var(--muted); font-weight: 500; }
.cmp__src { margin-top: 0.85rem; font-size: var(--step-small); color: var(--muted); max-width: 90ch; }
.cmp__src a { color: inherit; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.pair__col { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 12px; background: var(--surface); }
.pair__col > p { margin-top: 1rem; max-width: 48ch; }
.pair__col--quiet { background: transparent; border: 1px solid var(--surface-2); }
.pair__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem !important; }
.pair__pdf a { font-weight: 500; }
@media (max-width: 56em) { .pair { grid-template-columns: minmax(0, 1fr); } }
.faq-facts { grid-column: 1 / span 3; margin-top: 5rem; align-self: start; position: sticky; top: 2rem; padding: 1.25rem; border-radius: 10px; background: var(--surface); }
.faq-facts dl { display: grid; gap: 0.85rem; margin: 0 0 1rem; }
.faq-facts dt { font-size: var(--step-small); color: var(--muted); }
.faq-facts dd { margin: 0; font-weight: 500; line-height: 1.35; }
@media (max-width: 50em) { .faq-facts { grid-column: 1 / -1; position: static; margin-top: 2rem; } .faq-list, .faq-facts { grid-row: auto; } }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2rem; }
.post-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-radius: 10px; background: var(--surface); text-decoration: none;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.post-card time { font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.post-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.1; }
.post-card p { font-size: 1rem; line-height: 1.5; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .post-card:hover { background: var(--surface-2); } }
@media (max-width: 56em) { .posts { grid-template-columns: minmax(0, 1fr); } }

/* Unterseiten: erster Bildschirm mit Inhalt rechts */
.page-head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.page-head__side { align-self: end; }
.facts-card { display: grid; gap: 0.85rem; margin: 0; padding: 1.25rem; border-radius: 10px; background: var(--surface); }
.facts-card dt { font-size: var(--step-small); color: var(--muted); }
.facts-card dd { margin: 0; font-weight: 500; line-height: 1.35; }
.facts-card__alt { margin: 1rem 0 0.6rem; font-size: 1rem; }
.page-head__shot { margin: 0; }
.page-head__shot img { width: 100%; border-radius: 8px; box-shadow: 0 1px 2px rgb(28 27 34 / 0.06), 0 24px 48px -24px rgb(28 27 34 / 0.35); background: #fff; } /* taste-skill-ignore: App-Ausschnitt */
@media (max-width: 56em) { .page-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* FAQ: Webbetreuer-Karte links, Daten-Block unter „Für wen“ */
.faq-help { display: grid; gap: 0.75rem; }
.faq-help__h { font-family: var(--font-display); font-weight: 500; font-size: 1.625rem; line-height: 1.05; }
.faq-help p { font-size: 1rem; }
.faq-help .pair__actions { display: grid; gap: 0.5rem; margin: 0.25rem 0 0 !important; }
.faq-help .button { width: 100%; }
.daten-block { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--surface-2); }
.daten-block__h { font-family: var(--font-display); }
.daten-block .data__col { background: #fff; }

/* Glossar in der FAQ */
.glossar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem var(--gutter); margin: 0; }
.glossar div { padding: 1rem 1.1rem; border-radius: 8px; background: var(--surface); }
.glossar dt { font-weight: 600; }
.glossar dd { margin: 0.3rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.faq-side__text { margin-top: 1rem; color: var(--muted); }
@media (max-width: 40em) { .glossar { grid-template-columns: minmax(0, 1fr); } }

.claude__dev { margin-top: 1.25rem; }
.claude__dev summary { cursor: pointer; font-weight: 600; color: #fff; padding-block: 0.4rem; }
.claude__dev summary:focus-visible { outline-color: #c7b9ff; }
.claude__dev[open] summary { margin-bottom: 0.25rem; }

/* Blog-Beitrag */
.post__head { padding-bottom: clamp(2rem, 4vw, 3rem); }
.post__date { font-size: var(--step-small); color: var(--muted); margin-bottom: 1.25rem; }
.post__head h1 { max-width: 22ch; }
.post__body { max-width: calc(46rem + 2 * var(--edge)); }
.post__body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; margin-top: 3rem; }
.post__body p, .post__body li { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.65; }
.post__nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block: 4rem var(--section); padding-top: 1.5rem; border-top: 1px solid var(--surface-2); }
.post__feed { margin-top: 1.5rem; }
.posts--all { margin-top: 0; }

/* Katalog aller Prüfungen */
.tag--fein { background: #EEF0F4; color: #4b5260; border-color: #EEF0F4; }
.katalog { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-bottom: var(--section); }
.katalog__nav { position: sticky; top: 1.5rem; }
.katalog__nav ul { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.katalog__nav a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.6rem; border-radius: 6px; text-decoration: none; font-size: 0.9375rem; }
.katalog__nav a span { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .katalog__nav a:hover { background: var(--surface); } }
.katalog__gruppe + .katalog__gruppe { margin-top: clamp(3rem, 6vw, 5rem); }
.katalog__gruppe { scroll-margin-top: 1.5rem; }
.katalog__kopf p { margin-top: 0.5rem; color: var(--muted); }
.katalog__liste { margin-top: 1.25rem; display: grid; gap: 0.25rem; }
.pruefung summary { font-size: 1.0625rem; }
.pruefung__name { flex: 1; }
.pruefung .tag { font-size: 0.75rem; flex: none; }
.pruefung .qa__a p + p { margin-top: 0.6rem; }
.katalog__summe { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color: var(--muted); }
@media (max-width: 56em) { .katalog { grid-template-columns: minmax(0, 1fr); } .katalog__nav { position: static; } .katalog__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 24em) { .katalog__nav ul { grid-template-columns: minmax(0, 1fr); } .pruefung summary { flex-wrap: wrap; gap: 0.5rem; } .katalog__summe { font-size: 0.875rem; } }

/* ---------- Bewegung (Inhalt bleibt ohne JavaScript sichtbar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Was beim Laden schon im Bild ist, ist sofort lesbar: nur Bewegung, kein Ausblenden (sonst LCP ~1 s später) */
  .js .page-head [data-reveal] { opacity: 1; }
  .js .hero .hero__lead[data-rise] { opacity: 1; animation-name: rise-nur; }
  .js .hero [data-rise] { opacity: 0; transform: translateY(22px); animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .shot[data-reveal] img { transform: scale(1.06); transition: transform 1600ms var(--ease-out); }
  .js .shot[data-reveal].is-in img { transform: none; }

  /* Held: die beiden Satzhälften steigen aus einer Kante auf (Maske = Zeile selbst) */
  .js .hero [data-mask] { clip-path: inset(-0.2em -0.2em -0.22em -0.2em); }
  .js .hero [data-mask] > span { display: inline-block; transform: translateY(115%);
    animation: mask-rise 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }


  /* „Was jetzt tun“: Haken springt auf, Strich wischt, Zeile geht, die anderen rücken nach */
  .js .row { transition: transform 560ms var(--ease-out), opacity 280ms var(--ease-in); }
  .js .row.is-leaving { opacity: 0; transform: translateY(calc(var(--slot) * var(--row-h) - 12px)); }
  .js .row.is-entering { opacity: 0; transform: translateY(calc(var(--slot) * var(--row-h) + 16px)); transition: none; }
  .row__tick { transition: opacity 160ms ease, transform 260ms var(--ease-pop); }
  .row__strike, .row__strike > span { transition: transform 460ms var(--ease-out) 80ms; }

  /* Seitentitel zu lang: Linie zuckt einmal */
  .typer__line.is-over::after { animation: nudge 320ms var(--ease-out); }

  /* FAQ: Antwort klappt weich auf (nur wo der Browser Höhe auf auto animieren kann) */
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .qa { interpolate-size: allow-keywords; }
    .qa::details-content { block-size: 0; overflow: clip; opacity: 0;
      transition: block-size var(--t-ui) var(--ease-out), opacity var(--t-ui) ease, content-visibility var(--t-ui) allow-discrete; }
    .qa[open]::details-content { block-size: auto; opacity: 1; }
  }

  /* Seitenwechsel: Kopf bleibt stehen, Inhalt blendet über (Chrome, Safari; andere laden normal) */
  @view-transition { navigation: auto; }
  .site-head { view-transition-name: site-head; }
  ::view-transition-old(root) { animation: 140ms ease both vt-out; }
  ::view-transition-new(root) { animation: 380ms var(--ease-out) 60ms both vt-in; }
}
@media (prefers-reduced-motion: reduce) {
  .js .row { transition: opacity 220ms ease; }
  .js .row.is-leaving { opacity: 0; }
  .js .row.is-entering { opacity: 0; transition: none; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes rise-nur { to { transform: none; } }
@keyframes mask-rise { to { transform: none; } }
@keyframes nudge { 30% { transform: translateX(10px) scaleX(1); } 60% { transform: translateX(-6px) scaleX(1); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Tabelle der Bereiche (echte Tabelle, darf Linien haben) */
.areas { width: 100%; max-width: 36rem; border-collapse: collapse; font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.areas th { text-align: left; font-weight: 500; font-size: var(--step-small); color: var(--muted); padding: 0 0 0.6rem; }
.areas td { padding: 0.75rem 0; border-top: 2px solid var(--surface-2); }
.areas th:last-child, .areas td:last-child { text-align: right; }
.areas tbody tr:first-child td { border-top-color: var(--ink); }

/* FAQ-Seite: Gruppen mit breiter Überschrift */
.faq-group { font-size: var(--step-statement); line-height: 1.2; letter-spacing: -0.01em; padding-top: 1rem; }
.faq-list--page { margin-top: 0; }
.faq-list--page code { font-family: var(--font-code); font-size: 0.9em; }
@media (max-width: 50em) { .faq-list--page { margin-top: 1.5rem; } }

/* Bilder in Lesetexten */
.prose .shot { margin-top: 2rem; max-width: 46rem; }
.faq-side { grid-column: 1 / span 4; }
.faq-side .shot { margin-top: 2rem; position: sticky; top: 2rem; }
.faq-side + .faq-list--page { grid-column: 6 / -1; }
@media (max-width: 50em) { .faq-side, .faq-side + .faq-list--page { grid-column: 1 / -1; } .faq-side .shot { position: static; } }
.module__demo { margin-top: 1rem; font-weight: 500; }
.module__demo .link::after { content: " →"; }
/* Installation: was der Einzeiler tut */
.zeile-info { margin: 1.25rem 0 1.5rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.zeile-info__h { font-weight: 600; margin-bottom: 0.4rem; }
.zeile-info ul { padding-left: 1.1rem; display: grid; gap: 0.35rem; margin: 0 0 0.75rem; }
.zeile-info p:last-child { margin-bottom: 0; font-size: var(--step-small); color: var(--muted); }
/* Startseite: Wie es weitergeht – bewusst ohne Karten, nur Typografie */
.weiter__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2rem; }
.weiter__h { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.05; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); }
.weiter__liste { list-style: none; padding: 0; margin: 0; }
.weiter__liste li { padding: 0.75rem 0 0.75rem 1.6rem; border-bottom: 1px solid var(--surface-2); position: relative; font-size: 1rem; line-height: 1.5; }
.weiter__liste li::before { content: "→"; position: absolute; left: 0; top: 0.75rem; color: var(--accent); font-weight: 600; }
.weiter__liste--nein li::before { content: "×"; color: var(--muted); }
.weiter__mit { margin-top: 1.5rem; max-width: 60ch; }
.weiter__mit code { font-family: var(--font-code); font-size: 0.9em; background: var(--surface); padding: 0.1em 0.3em; }
@media (max-width: 48em) { .weiter__grid { grid-template-columns: minmax(0, 1fr); } }
/* Blog: Ratgeber und Neuigkeiten, Bilder im Beitrag */
.blog-rubrik + .blog-rubrik { padding-top: 0; }
.blog-rubrik .posts--all { margin-top: 1.5rem; }
.post-card__rubrik { align-self: flex-start; margin-top: auto; font: 500 0.75rem/1 var(--font-code); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.post__bild { margin: 1.75rem 0; }
.post__bild img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--surface-2); }
.post__bild figcaption { margin-top: 0.5rem; font-size: var(--step-small); color: var(--muted); }
/* Schmale Handys (280 px): lange Wörter und Code dürfen umbrechen */
.chat { grid-template-columns: minmax(0, 1fr); }
.chat__tool code { overflow-wrap: anywhere; }
.page-head h1 { hyphens: auto; overflow-wrap: break-word; }
.weiter__liste li.ist-fertig::before { content: "✓"; }
.weiter__status { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 4px; font: 500 0.75rem/1.5 var(--font-code); color: var(--accent); background: var(--surface); white-space: nowrap; }

/* ---------- Handy: Menü „Mehr“, Kopf bleibt oben, Tippziele 44 px ---------- */
.nav-more, .nav-menu { display: none; }
.site-nav > a:where(:not(.button)) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; } /* niedrige Spezifität: Ausblend-Regeln oben gewinnen */
.button--small, .chip, .code__copy { min-height: 2.75rem; }
.video__bar .chip { min-height: 2.75rem; }
.module__demo .link { display: inline-block; padding-block: 0.6rem; }
@media (max-width: 37.5em) {
  html { scroll-padding-top: 4.5rem; }
  .site-head { position: sticky; top: 0; z-index: 20; background: var(--bg); padding-block: 0.55rem; border-bottom: 1px solid var(--surface-2); }
  .js .site-nav > a:not(.button) { display: none; }
  .js .nav-more { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; font-size: var(--step-small); cursor: pointer; }
  .nav-more[aria-expanded="true"] { text-decoration: underline 2px var(--accent); text-underline-offset: 0.35em; }
  .nav-menu[data-open] { display: grid; position: absolute; top: 100%; right: var(--edge); min-width: 12rem; padding: 0.35rem;
    background: var(--bg); border: 1px solid var(--surface-2); border-radius: var(--radius); box-shadow: 0 16px 32px -20px rgb(28 27 34 / 0.45); }
  .nav-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 0.75rem; border-radius: var(--radius); text-decoration: none; }
  .nav-menu a:focus-visible { outline-offset: -3px; }
}
@media (hover: hover) and (pointer: fine) { .nav-menu a:hover { background: var(--surface); } }
.wordmark { min-height: 44px; }
.foot-links a { display: inline-block; min-width: 44px; }
.foot-legal a { display: inline-block; padding-block: 0.65rem; }
/* Handy: Kapitel als wischbare Reihe statt Treppe, Video-Knopf nur als Symbol (Name bleibt per aria-label) */
@media (max-width: 40em) {
  .video__bar { flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.4rem; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .video__bar > span { flex: none; }
  .video__bar .chip { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .video__ctrl { right: 0.5rem; bottom: 0.5rem; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
  .video__ctrl-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .video__ctrl svg { width: 0.8rem; height: 0.8rem; }
}