/* ============================================================
   Behind the C, Newsletter
   Design-System nach context/agents/2026-09-11-design-direktion.md

   Grundsatz: Papier und Tinte, eine Serif, genau ein Akzent.
   Kein Verlauf, kein Schatten, kein Glas, keine Scroll-Animation.
   ============================================================ */

/* ---------- 0. Schriften, lokal ----------
   Source Serif 4, variabel (Gewicht und optische Größe), SIL OFL 1.1.
   Lizenz: assets/fonts/OFL.txt. Nur latin und latin-ext, normal und kursiv.
   Pfade relativ zu dieser Datei, funktioniert in jedem Unterordner. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2-variations"),
       url("fonts/source-serif-4-latin-opsz-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: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2-variations"),
       url("fonts/source-serif-4-latin-ext-opsz-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: "Source Serif 4";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2-variations"),
       url("fonts/source-serif-4-latin-opsz-italic.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: "Source Serif 4";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-serif-4-latin-ext-opsz-italic.woff2") format("woff2-variations"),
       url("fonts/source-serif-4-latin-ext-opsz-italic.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;
}

/* ---------- 1. Tokens ---------- */

:root {
  color-scheme: light;

  /* Schriftfamilien. Source Serif 4 liegt lokal in assets/fonts/
     (siehe @font-face oben), es gibt keine externen Requests. */
  --f-serif:
    "Source Serif 4",
    ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  --f-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --f-mono:
    ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", Menlo, Consolas, monospace;

  /* Typografische Skala. Basis 19px, flaches Verhaeltnis:
     in einer Publikation sind die Spruenge klein, nicht dramatisch. */
  --t-micro:   0.75rem;
  --t-meta:    0.875rem;
  --t-small:   1rem;
  --t-body:    1.1875rem;
  --t-lead:    1.375rem;
  --t-h3:      1.5rem;
  --t-h2:      1.875rem;
  --t-h1:      2.375rem;
  --t-display: 3rem;
  --t-quote:   1.75rem;

  --t-display-fluid: clamp(2rem, 1.35rem + 2.8vw, 3rem);
  --t-h1-fluid:      clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem);
  --t-h2-fluid:      clamp(1.5rem, 1.28rem + 0.95vw, 1.875rem);
  --t-quote-fluid:   clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);

  --lh-tight: 1.12;
  --lh-head:  1.22;
  --lh-quote: 1.35;
  --lh-lead:  1.5;
  --lh-body:  1.7;
  --lh-meta:  1.4;

  --ls-display: -0.021em;
  --ls-h1:      -0.017em;
  --ls-h2:      -0.012em;
  --ls-body:     0;
  --ls-meta:     0.01em;
  --ls-label:    0.14em;

  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  --measure-prose: 68ch;
  --measure-lead:  56ch;
  --measure-head:  22ch;
  --measure-quote: 30ch;
  --measure-wide:  82ch;

  /* Papier und Tinte */
  --c-paper:       #FBFAF7;
  --c-surface:     #F1EEE7;
  --c-ink:         #171614;
  --c-ink-2:       #4A463F;
  --c-ink-3:       #6B655B;
  --c-rule:        #DEDACF;
  --c-rule-strong: #C3BDAF;

  /* Der eine Akzent. Wenn ein verbindliches Atreus-CI vorliegt,
     wird GENAU dieser Wert getauscht, sonst nichts. */
  --c-accent:      #8A2B1F;
  --c-accent-ink:  #FBFAF7;
  --c-accent-soft: #F0E3E0;

  /* Zustaende. Bewusst kein Gruen und kein Gelb im System:
     Erfolg wird ueber Text kommuniziert, nicht ueber Farbe.
     Fehlerfarbe ist derselbe Akzent, ein zweites Rot daneben
     ist genau der Detailfehler, an dem Templates sichtbar werden. */
  --c-focus: #8A2B1F;
  --c-error: #8A2B1F;

  /* Raum */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;   --s-11: 12rem;

  --gap-section:    clamp(4rem, 3rem + 5vw, 8rem);
  --gap-section-lg: clamp(6rem, 4rem + 8vw, 12rem);
  --gap-block: var(--s-6);
  --gap-para:  var(--s-5);
  --gap-tight: var(--s-3);

  --pad-x: clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem);

  --w-prose: 42rem;
  --w-page:  68rem;
  --w-full:  90rem;

  /* Bewegung: genau drei sind erlaubt, siehe Design-Direktion 2.4 */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-paper:       #14130F;
    --c-surface:     #1D1C18;
    --c-ink:         #E9E5DC;
    --c-ink-2:       #A8A296;
    --c-ink-3:       #9A948A;
    --c-rule:        #2E2C26;
    --c-rule-strong: #423F37;
    --c-accent:      #D9705F;
    --c-accent-ink:  #14130F;
    --c-accent-soft: #2A1F1C;
    --c-focus:       #D9705F;
    --c-error:       #D9705F;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-paper:       #14130F;
  --c-surface:     #1D1C18;
  --c-ink:         #E9E5DC;
  --c-ink-2:       #A8A296;
  --c-ink-3:       #9A948A;
  --c-rule:        #2E2C26;
  --c-rule-strong: #423F37;
  --c-accent:      #D9705F;
  --c-accent-ink:  #14130F;
  --c-accent-soft: #2A1F1C;
  --c-focus:       #D9705F;
  --c-error:       #D9705F;
}

/* ---------- 2. Reset und Grundsatz ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip statt hidden: hidden auf html killt position:sticky
     und erzeugt einen eigenen Scrollcontainer (Hausregel B7) */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: var(--w-regular);
  line-height: var(--lh-head);
  margin: 0;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
  /* manual, nicht auto: bei 22ch Satzbreite zerlegt auto
     deutsche Komposita mitten im Hero (Hausregel B11) */
  hyphens: manual;
}

p, li { hyphens: auto; margin: 0; }

a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 3. Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap--prose { max-width: calc(var(--w-prose) + 2 * var(--pad-x)); }

/* Das Prinzip: eine schmale Randspalte plus die Textspalte.
   Das ist der Unterschied zwischen "zentrierter Blog" und
   "Publikation", und es kostet nichts. */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-tight);
}

@media (min-width: 900px) {
  .editorial {
    grid-template-columns: 9rem minmax(0, var(--w-prose));
    column-gap: var(--s-7);
    align-items: start;
  }
}

.editorial__aside {
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-3);
}

@media (min-width: 900px) {
  .editorial__aside { text-align: right; padding-top: 0.4em; }
}

.section { padding-block: var(--gap-section); }
.section + .section { border-top: 1px solid var(--c-rule); }

.prose { max-width: var(--measure-prose); }
.prose > * + * { margin-top: var(--gap-para); }
.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink-2);
  max-width: var(--measure-lead);
}

/* ---------- 4. Typografische Bausteine ---------- */

.label {
  font-family: var(--f-sans);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 var(--gap-tight);
}

.display {
  font-size: var(--t-display-fluid);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-medium);
  max-width: var(--measure-head);
}

h1, .h1 {
  font-size: var(--t-h1-fluid);
  letter-spacing: var(--ls-h1);
  font-weight: var(--w-medium);
  max-width: var(--measure-head);
}

h2, .h2 {
  font-size: var(--t-h2-fluid);
  letter-spacing: var(--ls-h2);
}

h3, .h3 { font-size: var(--t-h3); }

.meta {
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-3);
}

strong { font-weight: var(--w-semi); }

/* ---------- 5. Navbar und Footer ---------- */

/* Eine solide Bar. Nicht sticky, nicht transparent,
   kein Weichzeichner-Filter, oben wie gescrollt identisch (B1). */
.nav {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 64px;
  flex-wrap: wrap;
}

@media (min-width: 900px) { .nav__inner { min-height: 72px; } }

.nav__mark {
  font-family: var(--f-serif);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
}
.nav__mark:hover { color: var(--c-accent); }

.nav__links {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-sans);
  font-size: var(--t-small);
}

.nav__links a {
  color: var(--c-ink-2);
  text-decoration: none;
  padding-block: var(--s-2);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--c-accent); }

.foot {
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
  padding-block: var(--s-8);
  color: var(--c-ink-2);
  font-size: var(--t-meta);
  font-family: var(--f-sans);
  line-height: var(--lh-meta);
}

.foot p { max-width: var(--measure-lead); }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}
.foot__links a { color: var(--c-ink-2); text-decoration: none; }
.foot__links a:hover { color: var(--c-accent); }

.foot__sig {
  margin-top: var(--s-6);
  font-size: 9px;
  opacity: 0.35;
  letter-spacing: 0.04em;
}
.foot__sig a { color: inherit; text-decoration: none; }

/* ---------- 6. Hero ---------- */

/* Bewusst keine 100vh-Hoehe: der Inhalt bestimmt die Hoehe.
   Ein bildschirmfuellender Hero ohne Bild ist ein Landingpage-Reflex. */
.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) var(--gap-section); }
.hero__lead { margin-top: var(--s-5); }
.hero .signup { margin-top: var(--s-7); }

/* ---------- 7. Signup ---------- */

.signup { max-width: 34rem; }

.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: stretch;
}

.field {
  flex: 1 1 15rem;
  min-width: 0;
  font-family: var(--f-sans);
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong);
  border-radius: 2px;
  padding: 0.8em 0.9em;
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease);
}
.field::placeholder { color: var(--c-ink-3); }
.field:hover { border-color: var(--c-ink-3); }

.btn {
  font-family: var(--f-sans);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 2px;
  padding: 0.8em 1.4em;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.btn[disabled] { cursor: default; opacity: 0.55; }

.signup__note { margin-top: var(--s-3); }
.signup__error {
  margin-top: var(--s-2);
  color: var(--c-error);
  font-family: var(--f-sans);
  font-size: var(--t-meta);
}

/* Die Zustandsumschaltung laeuft ueber genau eine Klasse,
   Default ist hart display:none (Hausregel B2). */
.signup__done { display: none; }
.signup.is-done .signup__done { display: block; }
.signup.is-done .signup__form { display: none; }

/* ---------- 8. Listen: Themen, Archiv ---------- */

.list { list-style: none; margin: var(--s-6) 0 0; padding: 0; }

.list__item { border-top: 1px solid var(--c-rule); }
.list__item:last-child { border-bottom: 1px solid var(--c-rule); }

.list__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  padding-block: var(--s-5);
  text-decoration: none;
  color: inherit;
}

.list__num {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  color: var(--c-ink-3);
}

.list__title {
  font-family: var(--f-serif);
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  line-height: var(--lh-head);
  transition: color var(--dur-fast) var(--ease);
}

.list__link:hover .list__title,
.list__link:focus-visible .list__title { color: var(--c-accent); }

.list__count {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  color: var(--c-ink-3);
  white-space: nowrap;
}

.list__excerpt { display: block; color: var(--c-ink-2); margin-top: var(--s-2); max-width: var(--measure-lead); }

/* Archivzeile mit Randspalte */
.entry { border-top: 1px solid var(--c-rule); }
.entry:last-child { border-bottom: 1px solid var(--c-rule); }

.entry__link {
  display: block;
  padding-block: var(--s-6);
  text-decoration: none;
  color: inherit;
}

.entry__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
}

@media (min-width: 900px) {
  .entry__grid {
    grid-template-columns: 9rem minmax(0, var(--w-prose));
    column-gap: var(--s-7);
  }
  .entry__meta { text-align: right; }
}

.entry__meta {
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  color: var(--c-ink-3);
}
.entry__no { font-family: var(--f-mono); display: block; }
@media (max-width: 899px) { .entry__no { display: inline; } }

.entry__title {
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  transition: color var(--dur-fast) var(--ease);
}
.entry__link:hover .entry__title,
.entry__link:focus-visible .entry__title { color: var(--c-accent); }
.entry__excerpt { color: var(--c-ink-2); margin-top: var(--s-2); }
.entry__topic {
  margin-top: var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ---------- 9. Zitat-Takt-Bruch ---------- */

/* Diese Section bricht bewusst den Rhythmus: volle Breite,
   kein Label, keine Ueberschrift, kein Button. */
.quote {
  padding-block: var(--gap-section-lg);
  text-align: center;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.quote__text {
  font-size: var(--t-quote-fluid);
  line-height: var(--lh-quote);
  font-weight: var(--w-regular);
  max-width: var(--measure-quote);
  margin-inline: auto;
}

.quote__source { margin-top: var(--s-5); }

/* ---------- 10. Gating ---------- */

/* Kein Blur, kein Fade, kein Overlay: der Text hoert auf,
   dann beginnt der Block. Das ist ehrlicher und sieht besser aus. */
.gate {
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding: var(--s-7) var(--pad-x);
  margin-top: var(--gap-section);
  margin-inline: calc(-1 * var(--pad-x));
}

.gate__inner { max-width: var(--measure-prose); margin-inline: auto; }
.gate h2 { font-size: var(--t-h3); }
.gate p { margin-top: var(--s-4); color: var(--c-ink-2); }
.gate .signup { margin-top: var(--s-6); }
.gate__alt { margin-top: var(--s-5); font-family: var(--f-sans); font-size: var(--t-meta); }

/* ---------- 11. Kommentare ---------- */

.comments { margin-top: var(--gap-section); }
.comments__note { margin-top: var(--s-3); max-width: var(--measure-lead); }

.comments__form { margin-top: var(--s-6); max-width: 38rem; }

.comments__label {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--t-small);
  color: var(--c-ink-2);
  margin-bottom: var(--s-2);
}

.textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  font-family: var(--f-serif);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-rule-strong);
  border-radius: 2px;
  padding: var(--s-4);
  transition: border-color var(--dur-fast) var(--ease);
}
.textarea:hover { border-color: var(--c-ink-3); }
.textarea::placeholder { color: var(--c-ink-3); }

.comments__count { margin-top: var(--s-2); text-align: right; }
.comments__submit { margin-top: var(--s-4); }

/* Honeypot gegen Bots. Kein Element startet auf opacity:0,
   deshalb wird es hart ausgehaengt, nicht nur unsichtbar. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.comments__list { list-style: none; margin: var(--s-8) 0 0; padding: 0; }

/* Kommentare stehen in derselben Serif wie der Artikel:
   die Gedanken der Leser sind Text gleicher Wertigkeit,
   kein UI-Element unter dem Artikel. Keine Avatare,
   keine Sprechblasen, kein "Anonym" als Pseudo-Name. */
.comment { border-top: 1px solid var(--c-rule); padding-block: var(--s-6); }
.comment:last-child { border-bottom: 1px solid var(--c-rule); }

.comment__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
}
@media (min-width: 900px) {
  .comment__grid {
    grid-template-columns: 9rem minmax(0, var(--w-prose));
    column-gap: var(--s-7);
  }
  .comment__date { text-align: right; }
}
.comment__date {
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  color: var(--c-ink-3);
}

.comments__done { display: none; }
.comments.is-done .comments__done { display: block; }
.comments.is-done .comments__form { display: none; }

/* ---------- 12. Öffentliche Seiten (Welle 2b) ----------
   Startseite, Archiv, Gäste mit Branchen, Suche und Detailseite.
   Nur Tokens aus Abschnitt 1. Keine Karten, keine Schatten, keine
   Verläufe. Listen mit Haarlinien, Typografie trägt die Wirkung. */

/* hidden gilt immer, auch wenn eine Klasse display setzt. */
[hidden] { display: none !important; }

/* Nur für Screenreader sichtbar. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.hero__alt {
  margin-top: var(--s-7);
  font-family: var(--f-sans);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

.quote__block { margin: 0; }

.linklist { list-style: none; margin: 0; padding: 0; font-family: var(--f-sans); font-size: var(--t-small); }
.linklist li + li { margin-top: var(--s-2); }
.linklist__sub { color: var(--c-ink-3); }

.prose__list { padding-left: 1.2em; margin: 0; }
.prose__list li + li { margin-top: var(--s-2); }

.impressum__h { font-size: var(--t-h3); }
.impressum .impressum__h:not(:first-child) { margin-top: var(--s-7); }
.impressum .impressum__h + p { margin-top: var(--s-3); }

/* Zweitrangiger Knopf: Linie statt Akzentfläche, damit der Akzent
   pro Bildschirm selten bleibt. */
.btn--quiet {
  color: var(--c-ink);
  background: transparent;
  border-color: var(--c-rule-strong);
}
.btn--quiet:hover {
  color: var(--c-ink);
  background: var(--c-surface);
  border-color: var(--c-ink-3);
}

/* Reihen als Filterzeile: Textlinks, der aktive mit 2px Akzentlinie. */
.reihen__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-sans);
  font-size: var(--t-small);
}
.reihen__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  min-height: 44px;
  padding-top: var(--s-3);
  color: var(--c-ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.reihen__link:hover { color: var(--c-accent); }
.reihen__link[aria-current="true"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.reihen__n { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--c-ink-3); }

/* Branchen (C1, C2). Hauptbereiche groß als Register, darunter die
   übrigen Branchen klein. Hover und Tastaturfokus vergrößern das
   Wort über transform auf einem inneren Element: die Box bleibt, die
   Nachbarn bewegen sich nicht. Das ist die einzige Skalierung der
   Seite und ein ausdrücklicher Wunsch aus dem Feedback-Call. */
.branchen-section__lead { color: var(--c-ink-2); }

.bereiche {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-rule);
}
.bereich { border-bottom: 1px solid var(--c-rule); }

.bereich__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-5);
  padding: var(--s-5) var(--s-4);
  border-left: 2px solid transparent;
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
a.bereich__link:hover { color: var(--c-ink); }

.bereich__word {
  display: inline-block;
  font-size: clamp(1.5rem, 0.95rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--ls-h1);
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}
.bereich__n {
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  color: var(--c-ink-3);
}

a.bereich__link:hover .bereich__word,
a.bereich__link:focus-visible .bereich__word {
  transform: scale(1.05);
  color: var(--c-accent);
}
a.bereich__link[aria-current="true"] {
  border-left-color: var(--c-accent);
  background: var(--c-accent-soft);
}
a.bereich__link[aria-current="true"] .bereich__n { color: var(--c-ink-2); }
.bereich--leer .bereich__word { color: var(--c-ink-3); }

.bubbles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}
.bubble {
  display: inline-block;
  color: var(--c-ink-2);
  text-decoration: none;
}
a.bubble:hover { color: var(--c-ink-2); }
/* Die "Bubbles" aus dem Call: Text mit feiner Linie. Die volle Rundung
   ist die einzige Ausnahme von Radius 0 außer dem Knopf, bewusst, weil
   Nicolai ausdrücklich Bubbles für die kleinen Branchen wollte. */
.bubble__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0.3em 1em;
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  font-family: var(--f-serif);
  line-height: 1.25;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.bubble--s1 { font-size: var(--t-small); }
.bubble--s2 { font-size: 1.125rem; }
.bubble--s3 { font-size: 1.3125rem; }
.bubble__n {
  font-family: var(--f-sans);
  font-size: 0.75em;
  color: var(--c-ink-3);
  white-space: nowrap;
}
a.bubble:focus-visible { outline: none; }
a.bubble:focus-visible .bubble__inner {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
a.bubble:hover .bubble__inner,
a.bubble:focus-visible .bubble__inner {
  transform: scale(1.08);
  color: var(--c-accent);
  border-color: var(--c-accent);
}
a.bubble[aria-current="true"] .bubble__inner {
  color: var(--c-ink);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.bubble--leer .bubble__inner { border-style: dashed; color: var(--c-ink-3); }

/* Weniger Bewegung gewünscht: keine Skalierung, die Hervorhebung
   über Farbe und Linie bleibt. */
@media (prefers-reduced-motion: reduce) {
  .bereich__word,
  .bubble__inner { transition: none; }
  a.bereich__link:hover .bereich__word,
  a.bereich__link:focus-visible .bereich__word,
  a.bubble:hover .bubble__inner,
  a.bubble:focus-visible .bubble__inner { transform: none; }
}

/* Suche (C3) */
.suche { max-width: 40rem; }
.suche__label {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--t-small);
  color: var(--c-ink-2);
  margin-bottom: var(--s-2);
}
.suche__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.suche__field { flex: 1 1 16rem; -webkit-appearance: none; appearance: none; }
.suche__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-5);
  margin-top: var(--s-5);
}
.suche__reset a { font-size: var(--t-meta); }
.suche__leer {
  margin-top: var(--s-7);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink-2);
}

/* Gästeliste, nach Reihe gruppiert */
.gruppe { margin-top: var(--s-8); scroll-margin-top: var(--s-5); }
.gruppe__head { max-width: var(--measure-lead); margin-bottom: var(--s-5); }
.gruppe__head .label { margin-bottom: var(--s-2); }
.gruppe__title { font-size: var(--t-h2-fluid); letter-spacing: var(--ls-h2); }
.gruppe__text { margin-top: var(--s-3); color: var(--c-ink-2); }

.gaeste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-rule);
}
@media (min-width: 1000px) {
  .gaeste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-8);
  }
}
.gast { border-bottom: 1px solid var(--c-rule); }

.gast__link {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: var(--s-4) var(--s-5);
  color: inherit;
  text-decoration: none;
}
a.gast__link:hover { color: inherit; }
.gast__ep {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  color: var(--c-ink-3);
  padding-top: 0.4em;
}
.gast__name {
  display: block;
  font-size: 1.3125rem;
  line-height: var(--lh-head);
  transition: color var(--dur-fast) var(--ease);
}
.gast__role { display: block; margin-top: var(--s-1); color: var(--c-ink-2); font-size: var(--t-small); line-height: 1.5; }
.gast__title { display: block; margin-top: var(--s-1); color: var(--c-ink-2); font-size: var(--t-small); font-style: italic; }
.gast__meta {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  color: var(--c-ink-3);
}
.gast__link:hover .gast__name,
.gast__link:focus-visible .gast__name { color: var(--c-accent); }

@media (max-width: 599px) {
  .gast__link { grid-template-columns: minmax(0, 1fr); }
  .gast__ep { padding-top: 0; }
}

.gaeste__hinweis { color: var(--c-ink-3); }

/* Gast-Detail (C4) */
.fakten { margin: var(--s-7) 0 0; border-top: 1px solid var(--c-rule); }
.fakten__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-rule);
}
.fakten dt {
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  color: var(--c-ink-3);
  padding-top: 0.35em;
}
.fakten dd { margin: 0; }
.fakten__sub { display: block; margin-top: var(--s-1); color: var(--c-ink-2); font-size: var(--t-small); line-height: 1.5; }
.fakten__line { display: block; }
.fakten__line + .fakten__line { margin-top: var(--s-1); }
@media (max-width: 599px) {
  .fakten__row { grid-template-columns: minmax(0, 1fr); }
  .fakten dt { padding-top: 0; }
}

.gast-detail__hoeren {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  font-family: var(--f-sans);
  font-size: var(--t-small);
}
.gast-detail__hint { flex-basis: 100%; }
.gast-detail__same { margin-top: var(--s-8); }

/* ---------- 13. Kleinteile ---------- */

.more {
  display: inline-block;
  margin-top: var(--s-6);
  font-family: var(--f-sans);
  font-size: var(--t-small);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  padding: var(--s-3) var(--s-4);
  z-index: 10;
}
.skip:focus { left: var(--s-4); top: var(--s-4); }


/* ---------- 14. Hilfsklassen statt style-Attributen ----------
   Die Content-Security-Policy erlaubt keine style-Attribute. Abstände,
   die im alten statischen Entwurf inline standen, laufen über diese
   Klassen. */

.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-section { margin-top: var(--gap-section); }
.maxw-prose { max-width: var(--w-prose); }
.maxw-lead { max-width: var(--measure-lead); }
.pad-panel { padding: var(--s-4) var(--s-4) var(--s-6); }


/* ---------- 15. Registrierung, Schranke, Kommentare (Welle 1b) ----------
   Anmeldeformular mit Einwilligungstext, Lese-Zugang, Online-Ausgabe
   mit Schranke und Kommentarbereich. Nur Tokens aus Abschnitt 1, keine
   Schatten, keine Verlaeufe, keine Icons. */

/* Einwilligungstext direkt unter dem Feld, sichtbar, ohne Haekchen. */
.signup__consent { margin-top: var(--s-4); max-width: var(--measure-lead); }
.signup__consent p + p { margin-top: var(--s-2); }
.signup__done p { max-width: var(--measure-lead); }

/* Knopf, der aussieht wie ein Textlink (Geraet abmelden). */
.linkbutton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.linkbutton:hover { color: var(--c-ink); }

/* Ausgabe */
.issue__draft {
  font-family: var(--f-sans);
  font-size: var(--t-meta);
  font-weight: var(--w-medium);
  color: var(--c-ink);
  background: var(--c-accent-soft);
  border-left: 2px solid var(--c-accent);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
}

.issue__intro { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-ink-2); }

/* Gesperrte Sprungmarke: nur Titel, kein Link, keine Hover-Farbe. */
.list__link--locked { color: var(--c-ink-3); }
.list__link--locked .list__title { color: var(--c-ink-3); }

.issue-item { margin-top: var(--gap-section); scroll-margin-top: var(--s-5); }
.issue-item h2 { margin-top: 0; }
.issue-item__guest { margin-top: var(--s-2); }

.issue-item__figure { margin: var(--s-6) 0 0; }
.issue-item__figure img { width: 100%; border: 1px solid var(--c-rule); }

.issue-quote {
  margin: 0;
  padding-block: var(--s-7) var(--s-6);
}
.issue-quote__text {
  font-size: var(--t-quote-fluid);
  line-height: var(--lh-quote);
  max-width: var(--measure-quote);
}
.issue-quote__by { margin-top: var(--s-4); }

.issue-item__take { margin-top: var(--s-7); }
.issue-item__prompt {
  margin-top: var(--s-7);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.issue-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
  font-family: var(--f-sans);
  font-size: var(--t-small);
}

.issue__outro { margin-top: var(--gap-section); }

.issue__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--gap-section);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-rule);
  font-family: var(--f-sans);
  font-size: var(--t-small);
}

/* Kommentare */
.comments > .label { margin-top: 0; }
.comments__select { display: block; width: 100%; margin-bottom: var(--s-5); }
.comments__empty { margin-top: var(--s-6); color: var(--c-ink-2); }
.comment__role,
.comment__ref { display: block; }
.comment__body > p + p { margin-top: var(--gap-tight); }

/* Sprungmarken der Ausgabe: Gast und Firma unter dem Titel, nicht
   daneben, in der Grotesk statt Monospace. */
.issue .list__link { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.issue .list__count {
  font-family: var(--f-sans);
  white-space: normal;
  padding-left: 2.2em;
}
.comments__done { margin-top: var(--s-6); }

/* Gäste: Einleitung und Branchen gehören zusammen, weniger Luft dazwischen. */
.gaeste-intro { padding-bottom: var(--s-8); }
.gaeste-intro + .branchen-section { padding-top: var(--s-8); }
@media (max-width: 599px) {
  .bubbles { gap: var(--s-2); }
  .bubble__inner { padding: 0.3em 0.85em; }
  .bubble--s1 { font-size: 0.9375rem; }
  .bubble--s2 { font-size: 1rem; }
  .bubble--s3 { font-size: 1.0625rem; }
}
@media (max-width: 599px) {
  #formate .list__link { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* Ruhige Links in Faktenzeilen und Namenslisten: Tinte mit feiner
   Unterstreichung, Akzent erst beim Überfahren. So bleibt der Akzent
   pro Bildschirm selten. */
.fakten a,
.linklist a {
  color: var(--c-ink);
  text-decoration-color: var(--c-rule-strong);
}
.fakten a:hover,
.linklist a:hover { color: var(--c-accent); text-decoration-color: currentColor; }