/* RK-9:LIVE – erzeugt aus src/styles/ (Reihenfolge: src/lib/assets.mjs). Nicht von Hand ändern. */
/* --- tokens.css --- */
/* Design-Tokens: Schriften, Farben (dunkel = Standard, hell = gespeicherte Wahl), Maße.
   Regel: Komponenten verwenden ausschließlich diese Variablen – keine festen Farbwerte nach „tokens:end“ (geprüft in test/rebuild-contracts). */

/* Schriften: lokal, SIL Open Font License 1.1 (Lizenztexte unter /licenses/fonts/). latin + latin-ext getrennt.
   Überschriften-Schnitt 700 mit font-display: optional (vorgeladen): kein nachträglicher Wechsel, der große Überschriften verschiebt;
   auf sehr langsamen Verbindungen bleibt beim ersten Aufruf die maßgleiche Ersatzschrift, danach kommt die Schrift aus dem Cache.
   Schnitt 600 (Navigation, Knöpfe, Kartentitel) ebenfalls vorgeladen, mit swap: feste Kastengrößen, kaum Verschiebung. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-600-latin-ext.aef7edf54f.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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-600-latin.215a93c696.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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: optional; src: url("/assets/fonts/barlow-condensed-700-latin-ext.9d351bd922.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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: optional; src: url("/assets/fonts/barlow-condensed-700-latin.3787a5a419.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: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext.d160e20920.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: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin.e2291e842c.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: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-ext.879df9319f.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: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin.cb182feeed.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; }

/* Ersatzschriften mit angeglichenen Maßen (lokale Systemschriften): solange die Webschrift lädt, bleiben Zeilenhöhe und
   Laufweite nahezu gleich – kein Springen des Layouts. Werte gegen die Webschriften gemessen (übernommen aus der Vorfassung). */
@font-face { font-family: "Barlow Condensed Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 68.6%; ascent-override: 142.9%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 67.5%; ascent-override: 148.1%; descent-override: 29.6%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback R"; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 76%; ascent-override: 131.6%; descent-override: 26.3%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback R"; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 74%; ascent-override: 135.1%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-weight: 400; src: local("Segoe UI"), local("SegoeUI"), local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); size-adjust: 101.5%; ascent-override: 101.5%; descent-override: 27.6%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-weight: 600; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"), local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Medium"), local("Roboto-Medium"), local("Segoe UI"), local("Arial"); size-adjust: 102%; ascent-override: 101%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; font-weight: 500; src: local("Consolas"), local("Menlo"), local("Menlo-Regular"), local("Roboto Mono"), local("RobotoMono-Regular"); size-adjust: 109.1%; ascent-override: 93.5%; descent-override: 27.5%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  /* Flächen: Seite und Einstieg am dunkelsten; abgesetzte Kapitel in Anthrazit; Karten je Fläche eine Stufe heller. */
  --c-bg: #0b0c0e;
  --c-bg-alt: #1a1d21;
  --c-surface: #16191d;
  --c-surface-alt: #23272c;
  --c-surface-hover: #2a2f35;
  --c-line: #2f343a;
  --c-line-strong: #4b5159;
  /* Text: warmweiß, gedämpft warmgrau */
  --c-text: #f0ede6;
  --c-muted: #b7b3aa;
  /* Akzent: warmes Orange */
  --c-accent: #ff5a1f;
  --c-accent-hover: #ff7840;
  --c-accent-text: #ff6a33;
  --c-on-accent: #0c0d0f;
  --c-focus: #ff7840;
  /* Kennzeichnungen (Planung, Lücken in Rechtstexten) */
  --c-badge-bg: #2b1b13;
  --c-badge-text: #ffa47e;
  --c-mark-bg: #ff5a1f;
  --c-mark-text: #0c0d0f;
  /* Bildbühne: das Lichtmotiv ist dunkel und steht in beiden Designs auf dunklem Grund */
  --c-media: #0b0c0e;
  --c-media-glow: rgba(255, 90, 31, 0.22);
  --c-shadow: rgba(0, 0, 0, 0.45);

  --font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Barlow Condensed Fallback R", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Consolas, monospace;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --space-section: clamp(56px, 4vw + 40px, 112px);
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --header-h: 4.5rem;
  --scroll-offset: 16px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #f6f4ef;
  --c-bg-alt: #e7e2d8;
  --c-surface: #fffefb;
  --c-surface-alt: #faf8f3;
  --c-surface-hover: #f1ede5;
  --c-line: #d8d2c6;
  --c-line-strong: #a9a194;
  --c-text: #17181b;
  --c-muted: #54514a;
  --c-accent: #b8400f;
  --c-accent-hover: #963309;
  --c-accent-text: #a8390d;
  --c-on-accent: #ffffff;
  --c-focus: #963309;
  --c-badge-bg: #f6e1d5;
  --c-badge-text: #8a2f0b;
  --c-mark-bg: #b8400f;
  --c-mark-text: #ffffff;
  --c-media: #0b0c0e;
  --c-media-glow: rgba(255, 90, 31, 0.22);
  --c-shadow: rgba(60, 45, 30, 0.12);
}
/* tokens:end */

/* --- base.css --- */
/* Grundlagen: Box-Modell, Text, Links, Fokus, Auswahl, reduzierte Bewegung. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); }
body { margin: 0; min-height: 100vh; background: var(--c-bg); color: var(--c-text); font: 400 1.0625rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: 0.005em; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
strong { font-weight: 600; }
code, .mono { font-family: var(--font-mono); font-weight: 500; font-size: 0.9em; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* --- layout.css --- */
/* Layout: Container, Kapitel (Flächenwechsel), Kartenraster. Breakpoints der ganzen Seite: 600 px (zwei Spalten),
   880 px (breite Ansicht: Kopfzeile einzeilig und haftend, Einstieg zweispaltig), 1120 px (vier Karten nebeneinander). */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--space-section); border-top: 1px solid var(--c-line); }
.section--base { background: var(--c-bg); --card-bg: var(--c-surface); }
.section--alt { background: var(--c-bg-alt); --card-bg: var(--c-surface-alt); }
.section__inner { display: grid; gap: clamp(28px, 1.5vw + 22px, 48px); }

.card-grid { list-style: none; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- components/button.css --- */
/* Schaltflächen und Textaktion. Mindesthöhe 44 px als Touch-Ziel. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 44px; padding: 0.625rem 1.125rem;
  border: 1px solid transparent; border-radius: var(--radius-s); font: 600 1rem/1.15 var(--font-display); letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--secondary { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); }
.btn--secondary:hover { border-color: var(--c-text); }
.btn--ghost { background: var(--c-surface); border-color: var(--c-line); color: var(--c-text); }
.btn--ghost:hover { background: var(--c-surface-hover); border-color: var(--c-line-strong); }
.btn--sm { padding: 0.5rem 0.75rem; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 0.875rem 1.75rem; font-size: 1.25rem; }

.text-link { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-weight: 600; text-underline-offset: 0.3em; }
.text-link .icon { width: 1em; height: 1em; flex: none; }

/* --- components/header.css --- */
/* Kopfzeile. Schmal: Marke + Aktionen, darunter die Navigation (nicht haftend, damit Inhalt Platz hat). Flex mit Umbruch:
   Passen Marke und Aktionen bei großer Schrift oder Zoom nicht nebeneinander, rutschen die Aktionen in die nächste Zeile –
   nichts überdeckt sich. Ab 880 px: eine Zeile, am oberen Rand haftend; Sprungziele halten per scroll-padding Abstand
   (app.js misst die tatsächliche Höhe, falls die Kopfzeile bei großer Schrift höher wird). */
.site-header { position: relative; z-index: 20; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding-block: 8px 0; }

.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); font: 700 clamp(1.25rem, 0.9rem + 1.8vw, 1.625rem)/1 var(--font-display); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; }
.brand em { font-style: normal; color: var(--c-accent); }

.site-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.site-header__actions .btn { padding-inline: clamp(0.5rem, 0.25rem + 1vw, 0.75rem); }
.btn--lang { min-width: 44px; }
.theme-toggle { min-width: 4.25rem; letter-spacing: 0.03em; text-transform: none; }

.site-nav { order: 3; flex: 1 0 100%; min-width: 0; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: clamp(10px, 2.6vw, 32px); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-muted); font: 600 1rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--c-text); }

@media (min-width: 880px) {
  :root { --scroll-offset: var(--header-h); }
  .site-header { position: sticky; top: 0; }
  .site-header__inner { min-height: var(--header-h); padding-block: 0; gap: 0 24px; }
  .site-nav { order: 0; flex: 1 1 auto; }
  .site-nav ul { justify-content: center; column-gap: clamp(18px, 2.4vw, 40px); }
  .site-header__actions { margin-left: 0; }
}

/* --- components/hero.css --- */
/* Einstieg: getrennte Text- und Bildzone. Eine einzige fließende Formel für die Überschrift (begrenzt durch die Breite der
   Textspalte, cqi) – dadurch wächst die Schrift über alle Breiten stetig, auch über den Wechsel auf zwei Spalten hinweg.
   Schmal: Motiv als randlose Fläche direkt unter der Kopfzeile (im ersten Bildschirm sichtbar), Höhe wächst stetig mit der Breite.
   Ab 880 px: Motiv rechts bis zum Rand. Solange das Bild lädt, zeigt die Bühne ein ruhiges Leuchten statt einer leeren Fläche. */
.hero { background: var(--c-bg); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__text { container-type: inline-size; display: grid; align-content: center; justify-items: start; gap: clamp(18px, 0.8vw + 14px, 26px); padding: clamp(28px, 3vw + 16px, 56px) var(--gutter) clamp(32px, 2vw + 24px, 48px); }
.hero__title {
  font-size: clamp(3rem, 1.125rem + 5.35vw, 7.25rem);
  font-size: min(clamp(3rem, 1.125rem + 5.35vw, 7.25rem), 17.5cqi);
  line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase;
  /* letzte Sicherung, falls eine breitere Ersatzschrift greift: trennen statt seitlich überlaufen */
  hyphens: auto; overflow-wrap: anywhere;
}
.hero__title span { display: block; }
.hero__accent { color: var(--c-accent); }
.hero__intro { max-width: 34ch; font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 1.5; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 4px; }
.hero { --stage: radial-gradient(ellipse 45% 55% at 70% 58%, var(--c-media-glow), transparent 70%), var(--c-media); }
.hero__media { order: -1; height: clamp(9.5rem, 24vw + 4.5rem, 19rem); overflow: hidden; background: var(--stage); }
.hero__img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 70% 58%; color: transparent; }
/* Lädt das Bild nicht, zeigen Chromium/Firefox statt Defekt-Symbol und Rahmen die ruhige Bühne (::after erscheint nur bei defekten Bildern). */
.hero__img::after { content: ""; position: absolute; inset: 0; background: var(--stage); }

@media (min-width: 880px) {
  .hero__grid { grid-template-columns: max(var(--gutter), calc((100% - var(--container)) / 2)) minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: clamp(560px, 22vw + 360px, 760px); }
  .hero__text { grid-column: 2; padding: clamp(48px, 5vw, 96px) clamp(24px, 3vw, 56px) clamp(48px, 5vw, 96px) 0; }
  .hero__media { order: 0; grid-column: 3; height: auto; margin-block: clamp(16px, 2vw, 32px); border-radius: var(--radius-l) 0 0 var(--radius-l); }
  .hero__img { object-position: 66% 55%; }
  /* Dunkel: Bildrand weich in die Fläche auslaufen lassen statt einer sichtbaren Kante; hell bleibt die Bühne als gerahmtes Bild. */
  :root:not([data-theme="light"]) .hero__media { border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent, black 16%); mask-image: linear-gradient(90deg, transparent, black 16%); }
}

/* --- components/section-heading.css --- */
/* Abschnittsüberschrift: Überzeile (Akzent), Titel, Einleitung – in jedem Kapitel gleich aufgebaut. */
.section-heading { display: grid; gap: 14px; justify-items: start; }
.eyebrow { text-wrap: balance; padding-left: 12px; border-left: 2px solid var(--c-accent); color: var(--c-accent-text); font: 500 0.8125rem/1.5 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.section-title { max-width: 22ch; font-size: clamp(2.25rem, 1.3rem + 3.3vw, 4.25rem); text-transform: uppercase; }
.lead { max-width: 62ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }

/* --- components/tags.css --- */
/* Begriffsliste (Rollen, Genres) ohne Trennpunkt am Zeilenanfang:
   Jeder Eintrag trägt seinen Trennpunkt links vor sich (::before). Die Liste ist um die Breite des Trennpunkts nach links
   verschoben und schneidet genau diesen Streifen ab (clip-path) – der Punkt des ersten Eintrags jeder Zeile liegt dort
   und ist unsichtbar, alle anderen stehen zwischen zwei Begriffen. Funktioniert bei jedem Umbruch, ohne JavaScript. */
.tags {
  --sep: 1.5em;
  list-style: none; display: flex; flex-wrap: wrap; row-gap: 0.1rem;
  margin: 0 0 0 calc(-1 * var(--sep)); padding: 0;
  clip-path: inset(0 0 0 var(--sep));
  color: var(--c-muted); font: 500 0.8125rem/1.7 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
/* Einträge wandern als Ganzes in die nächste Zeile; nur wenn einer allein nicht passt (sehr große Schrift), bricht er in sich um. */
.tags li { position: relative; padding-left: var(--sep); }
.tags li::before { content: "·"; content: "·" / ""; position: absolute; left: 0; width: var(--sep); text-align: center; color: var(--c-accent); }
.tags--genres { font-size: 0.75rem; }

/* --- components/status.css --- */
/* Statushinweis und Kennzeichen: Planung ist immer als solche erkennbar (Ring statt gefüllter Punkt, „Geplant“-Kennzeichen). */
.status { display: inline-flex; align-items: flex-start; gap: 0.6em; color: var(--c-muted); font-size: 0.9375rem; line-height: 1.5; }
.status__dot { flex: none; width: 0.6em; height: 0.6em; margin-top: 0.45em; border: 2px solid var(--c-accent); border-radius: 50%; }
.status--quiet { font-size: 0.875rem; }
.status--quiet .status__dot { border-color: var(--c-line-strong); }

.badge { display: inline-block; padding: 0.1em 0.6em; border-radius: 999px; background: var(--c-badge-bg); color: var(--c-badge-text); font: 500 0.75rem/1.6 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.badge--solid { background: var(--c-accent); color: var(--c-on-accent); }

/* --- components/cards.css --- */
/* Karten: gemeinsame Fläche, Rahmen und Radius; Kartenhintergrund folgt der Kapitelfläche (--card-bg). */
.topic-card, .channel-card, .plan-card, .contact-card { background: var(--card-bg, var(--c-surface)); border: 1px solid var(--c-line); border-radius: var(--radius-m); }

/* Themenkarte */
.topic-card { display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: 10px; padding: 24px; }
.topic-card__icon { width: 56px; height: 56px; margin-bottom: 6px; color: var(--c-text); }
.pictogram { width: 100%; height: 100%; }
.pictogram__accent { stroke: var(--c-accent); }
.topic-card__title { font-size: 1.625rem; letter-spacing: 0.02em; text-transform: uppercase; }
.topic-card__outcome { font-size: 1.0625rem; line-height: 1.45; }
.topic-card__detail { color: var(--c-muted); font-size: 0.9375rem; line-height: 1.55; }
.topic-card__later { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-top: 12px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 0.875rem; }

/* Plan-Karte (geplante Kits): gestrichelter Rahmen = noch nicht verfügbar */
.plan-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 20px; align-items: start; padding: 24px; border-style: dashed; border-color: var(--c-line-strong); }
@media (min-width: 600px) { .plan-card { grid-template-columns: auto minmax(0, 1fr); } }
.plan-card__icon { width: 56px; height: 56px; color: var(--c-text); }
.plan-card__body { display: grid; gap: 10px; justify-items: start; }
.plan-card__title { font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.plan-card__body > p:not(.status) { max-width: 70ch; color: var(--c-muted); }

/* Kanalkarte: Titel-Link spannt über die ganze Karte; Fokusrahmen um die ganze Fläche */
.channel-card { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 24px; transition: border-color 0.15s, background-color 0.15s; }
.channel-card:hover { border-color: var(--c-accent); background: var(--c-surface-hover); }
.channel-card__title { font-size: 1.625rem; letter-spacing: 0.02em; }
.channel-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--c-text); text-decoration: none; }
.channel-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
.channel-card__link:focus-visible { outline: none; }
.channel-card__link { scroll-margin-top: 40px; scroll-margin-bottom: 24px; }
.channel-card__link:focus-visible::after { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.channel-card__cue { display: inline-flex; color: var(--c-accent); }
.channel-card__cue .icon { width: 20px; height: 20px; }
.channel-card__handle { color: var(--c-muted); font-size: 0.875rem; }
.channel-card__purpose { color: var(--c-muted); font-size: 0.9375rem; }
.channel-card .status { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--c-line); }

/* Guides: Planungsstatus + YouTube-Abo */
.guides-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Listen veröffentlichter Einträge */
.entries { display: grid; gap: 12px; }
.entries__title { font-size: 1.5rem; text-transform: uppercase; }
.entries ul { list-style: none; border-top: 1px solid var(--c-line); }
.entries li { padding-block: 14px; border-bottom: 1px solid var(--c-line); }
.meta { color: var(--c-muted); }

/* --- components/contact.css --- */
/* Kontakt: vier gleich aufgebaute Karten; Adresse ist immer ein sichtbarer mailto-Link, Kopieren ist nur ein Zusatz. */
.contact-grid { list-style: none; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 24px; }
.contact-card__title { font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.contact-card__hint { color: var(--c-muted); font-size: 0.9375rem; }
.contact-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; align-self: end; margin-top: 10px; }
/* Adresse: bricht höchstens nach dem @ (<wbr>), mitten im Namen nur, wenn ein Teil allein nicht mehr in die Zeile passt. */
.mail-link { display: inline-block; padding-block: 10px; max-width: 100%; color: var(--c-text); font: 500 1rem/1.4 var(--font-mono); overflow-wrap: break-word; text-underline-offset: 0.3em; }
/* Rückmeldung direkt unter Adresse und Knopf; leer ohne eigene Höhe (keine leere Leiste). */
.contact-card__feedback { color: var(--c-muted); font-size: 0.875rem; line-height: 1.5; }
.contact-card__feedback:empty { margin-top: -6px; }

/* Hinweis (Grundsätze für Kooperationen) */
.note { display: grid; gap: 6px; max-width: 80ch; padding: 18px 22px; border-left: 3px solid var(--c-accent); border-radius: 0 var(--radius-m) var(--radius-m) 0; background: var(--card-bg, var(--c-surface)); }
.note__title { font: 600 1rem/1.4 var(--font-body); }
.note p { color: var(--c-muted); font-size: 0.9375rem; }

/* --- components/profile.css --- */
/* Profil: Bio, Eckdaten (Rollen, Musikrichtungen, Ort) und Ausblick. */
.profile { display: grid; gap: 28px; }
.profile__bio { max-width: 40ch; font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem); line-height: 1.5; text-wrap: pretty; }
.facts { display: grid; border-top: 1px solid var(--c-line); }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 14px; border-bottom: 1px solid var(--c-line); }
.facts dt { color: var(--c-muted); font: 500 0.8125rem/1.6 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
.facts dd { margin: 0; min-width: 0; }
.facts .tags { color: var(--c-text); font: 400 1rem/1.6 var(--font-body); letter-spacing: 0; text-transform: none; }

.outlook { display: grid; gap: 14px; justify-items: start; padding: 24px; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-m); }
.outlook__title { font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.outlook__list { list-style: none; display: grid; gap: 10px; }
.outlook__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.outlook__news { justify-self: stretch; padding-top: 14px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 0.9375rem; }

@media (min-width: 880px) {
  .profile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .facts__row { grid-template-columns: minmax(7rem, 24%) minmax(0, 1fr); gap: 20px; }
}

/* --- components/footer.css --- */
/* Fußzeile: Marke, Seitenbereiche, Kanäle, Rechtliches, Daten & API, Stand. */
.site-footer { padding-block: 48px 28px; border-top: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-muted); font-size: 0.9375rem; }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.site-footer__brand { grid-column: 1 / -1; display: grid; align-content: start; gap: 6px; justify-items: start; }
.site-footer__col h2 { margin-bottom: 4px; color: var(--c-muted); font: 500 0.8125rem/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.site-footer__col ul { list-style: none; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
.site-footer__meta { margin-top: 28px; }
.site-footer__meta p { padding-top: 18px; border-top: 1px solid var(--c-line); font-size: 0.8125rem; }

@media (min-width: 880px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}

/* --- pages/doc.css --- */
/* Textseiten (/impressum/, /datenschutz/, /ai/, 404): ruhige Lesespalte, Tabellen scrollen in sich, lange Wörter brechen. */
.doc { display: grid; gap: 18px; padding-block: clamp(40px, 3vw + 28px, 80px); }
.doc > *, .doc__article > * { max-width: 72ch; }
.doc h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); text-transform: uppercase; }
.doc h2 { margin-top: 18px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); text-transform: uppercase; }
.doc h3 { margin-top: 8px; font-size: 1.25rem; }
.doc ul { display: grid; gap: 8px; padding-left: 1.25em; }
.doc__article { display: grid; gap: 16px; overflow-wrap: anywhere; hyphens: auto; }
.doc__article + .doc__article { margin-top: 28px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.doc pre { max-width: 100%; margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-surface); font: 500 0.84rem/1.5 var(--font-mono); }
.doc code { overflow-wrap: anywhere; }
/* Tabellen: schmal gestapelt (jede Zeile ein Block, Spaltenname vor jedem Wert), ab 600 px als Tabelle. Rollen bleiben erhalten,
   weil display nur außerhalb der Tabellendarstellung geändert wird und die Spaltennamen sichtbar mitlaufen. */
.table-wrap { max-width: 100%; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-surface); }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.doc caption { padding: 10px 12px 4px; color: var(--c-text); font-weight: 600; text-align: left; }
.doc th, .doc td { padding: 8px 12px; text-align: left; vertical-align: top; }
.doc th { color: var(--c-muted); font: 600 0.95rem/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.doc td code { overflow-wrap: anywhere; }
.data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.data-table tr { display: block; padding-block: 6px; border-top: 1px solid var(--c-line); }
.data-table td { display: block; padding-block: 4px; }
.data-table td::before { content: attr(data-label); display: block; color: var(--c-muted); font: 500 0.75rem/1.5 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
@media (min-width: 600px) {
  .table-wrap { overflow-x: auto; }
  .data-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .data-table tr { display: table-row; padding: 0; border-top: 0; }
  .data-table td { display: table-cell; padding-block: 8px; border-top: 1px solid var(--c-line); }
  .data-table td::before { content: none; }
}
.doc pre:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.doc__stand { color: var(--c-muted); }
.gap { padding: 0.1em 0.45em; border-radius: 4px; background: var(--c-mark-bg); color: var(--c-mark-text); font-weight: 600; }

.not-found { display: grid; gap: 18px; justify-items: start; }
.not-found__alt { display: grid; gap: 14px; justify-items: start; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.not-found__alt h2 { font-size: 1.75rem; text-transform: uppercase; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- utilities.css --- */
/* Hilfsklassen: Sprunglink, nur für Screenreader, nur mit JavaScript. */
.skip-link { position: absolute; top: 8px; left: var(--gutter); z-index: 50; padding: 12px 16px; border-radius: var(--radius-s); background: var(--c-accent); color: var(--c-on-accent); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
/* Sprungziele innerhalb der Kapitel halten etwas Abstand zur Kopfzeile; Kapitel selbst schließen bündig an. */
main [id]:not(section) { scroll-margin-top: 12px; }
/* Fokus per Tastatur: Ziel mit Abstand zur haftenden Kopfzeile in den sichtbaren Bereich holen */
main a, main button { scroll-margin-top: 24px; scroll-margin-bottom: 24px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Bedienelemente, die JavaScript brauchen (Design-Schalter, Kopieren): ohne JavaScript gar nicht vorhanden – keine leeren Lücken.
   Die Klasse „js“ setzt die frühe Designwahl im <head>, also vor dem ersten Zeichnen: kein Layoutsprung. */
html:not(.js) .js-only { display: none !important; }
/* Bis app.js läuft (oder falls es nicht lädt), sind die Knöpfe unsichtbar, behalten aber ihren Platz: kein Layoutsprung, keine wirkungslosen Knöpfe. */
.js:not(.app-ready) .js-only { visibility: hidden; }