/* Story-Reader — Aussehen.

   Aufbau: Farbmarken, Grundlagen, Kopf/Fuß, Bausteine (Karten, Tabellen,
   Formulare, Hinweise), Leseransicht, Editor, Verwaltung, Bewegung und
   Umbrüche.

   Zwei Paletten, zwei Entwürfe. Der helle steht auf warmem Papier, der
   dunkle auf kühlem Tiefblau mit abgesenkter Textweiße — reines Weiß auf
   Schwarz brennt bei einer langen Geschichte. Die dunkle Palette ist die
   Vorgabe der Marke; die helle ist ihr gleichwertig ausgearbeitet und
   nicht ihre Umkehrung.

   Die Auswahl kommt aus prefers-color-scheme und wird von einem
   data-theme-Attribut übersteuert, das der Umschalter setzt (siehe
   theme.go). Jede Farbe steht deshalb in beiden Blöcken. */

:root {
  color-scheme: light dark;

  /* Dunkel ist die Vorgabe: Ein Lesehaus wird abends benutzt. */
  --papier: #0d1220;
  --flaeche: #141b2d;
  --flaeche-hoch: #1b2438;
  --linie: #26314b;
  --linie-stark: #35435f;
  --schrift: #e7ecf7;
  --schrift-leise: #9fadc6;
  --schrift-still: #74829c;
  --akzent: #f0a04b;
  --akzent-tief: #d9873a;
  --akzent-wash: rgba(240 160 75 / .14);
  --gut: #5fbf8a;
  --gut-wash: rgba(95 191 138 / .14);
  --warn: #e8c25a;
  --warn-wash: rgba(232 194 90 / .14);
  --fehler: #ec7e72;
  --fehler-wash: rgba(236 126 114 / .14);
  --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .24);
  --schatten-klein: 0 1px 2px rgb(0 0 0 / .28);

  --radius: .6rem;
  --radius-klein: .35rem;
  --spalte: 72rem;
  --lesespalte: 40rem;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --papier: #f7f4ee;
    --flaeche: #fffdf9;
    --flaeche-hoch: #fbf7f0;
    --linie: #e2dad0;
    --linie-stark: #cdc2b4;
    --schrift: #1e1b17;
    --schrift-leise: #57514a;
    --schrift-still: #7d756b;
    --akzent: #b4621a;
    --akzent-tief: #8f4c11;
    --akzent-wash: rgba(180 98 26 / .1);
    --gut: #26734b;
    --gut-wash: rgba(38 115 75 / .1);
    --warn: #8a6410;
    --warn-wash: rgba(138 100 16 / .12);
    --fehler: #a63a2e;
    --fehler-wash: rgba(166 58 46 / .1);
    --schatten: 0 1px 2px rgb(60 45 25 / .08), 0 10px 28px rgb(60 45 25 / .07);
    --schatten-klein: 0 1px 2px rgb(60 45 25 / .1);
  }
}

/* Die ausdrückliche Wahl schlägt die Systemeinstellung — in beide
   Richtungen, deshalb stehen beide Paletten hier noch einmal
   vollständig. */
:root[data-theme="light"] {
  color-scheme: light;
  --papier: #f7f4ee; --flaeche: #fffdf9; --flaeche-hoch: #fbf7f0;
  --linie: #e2dad0; --linie-stark: #cdc2b4;
  --schrift: #1e1b17; --schrift-leise: #57514a; --schrift-still: #7d756b;
  --akzent: #b4621a; --akzent-tief: #8f4c11; --akzent-wash: rgba(180 98 26 / .1);
  --gut: #26734b; --gut-wash: rgba(38 115 75 / .1);
  --warn: #8a6410; --warn-wash: rgba(138 100 16 / .12);
  --fehler: #a63a2e; --fehler-wash: rgba(166 58 46 / .1);
  --schatten: 0 1px 2px rgb(60 45 25 / .08), 0 10px 28px rgb(60 45 25 / .07);
  --schatten-klein: 0 1px 2px rgb(60 45 25 / .1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #0d1220; --flaeche: #141b2d; --flaeche-hoch: #1b2438;
  --linie: #26314b; --linie-stark: #35435f;
  --schrift: #e7ecf7; --schrift-leise: #9fadc6; --schrift-still: #74829c;
  --akzent: #f0a04b; --akzent-tief: #d9873a; --akzent-wash: rgba(240 160 75 / .14);
  --gut: #5fbf8a; --gut-wash: rgba(95 191 138 / .14);
  --warn: #e8c25a; --warn-wash: rgba(232 194 90 / .14);
  --fehler: #ec7e72; --fehler-wash: rgba(236 126 114 / .14);
  --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .24);
  --schatten-klein: 0 1px 2px rgb(0 0 0 / .28);
}

/* --- Grundlagen ----------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--schrift);
  font: 400 clamp(.95rem, .92rem + .2vw, 1.0625rem)/1.65 var(--sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -.018em; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h3 { font-size: 1.0625rem; }
p { margin: 0; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--akzent-tief); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

code, pre, kbd { font-family: var(--mono); font-size: .9em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .75rem; top: -4rem; z-index: 60;
  padding: .6rem .9rem; border-radius: var(--radius-klein);
  background: var(--akzent); color: #fff; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: .75rem; color: #fff; }

/* --- Kopfzeile ------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
}
.kopf__innen {
  width: min(100% - 2rem, var(--spalte));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4rem;
}

.marke { display: inline-flex; align-items: center; gap: .55rem; color: var(--schrift); font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.marke__zeichen {
  width: 1.1rem; height: 1.35rem; border-radius: .12rem .3rem .3rem .12rem;
  background: linear-gradient(160deg, var(--akzent), var(--akzent-tief));
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--papier) 45%, transparent);
}
.marke__name { font-size: 1.02rem; }

.nav { display: flex; align-items: center; gap: .35rem; margin-inline-start: .75rem; flex: 1; }
.nav__link {
  padding: .45rem .65rem; border-radius: var(--radius-klein);
  color: var(--schrift-leise); font-size: .93rem; font-weight: 500; text-decoration: none;
}
.nav__link:hover { color: var(--schrift); background: var(--akzent-wash); }

.kopf__rechts { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }

.darstellung {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--linie); border-radius: 50%;
  background: var(--flaeche); color: var(--schrift-leise);
  font-size: .95rem; cursor: pointer;
}
.darstellung:hover { color: var(--akzent); border-color: var(--linie-stark); }
/* Gezeigt wird immer das Zeichen für das, was ein Klick bewirken würde. */
.darstellung__hell { display: none; }
.darstellung__dunkel { display: block; }
@media (prefers-color-scheme: dark) { .darstellung__hell { display: block; } .darstellung__dunkel { display: none; } }
:root[data-theme="dark"] .darstellung__hell { display: block; }
:root[data-theme="dark"] .darstellung__dunkel { display: none; }
:root[data-theme="light"] .darstellung__hell { display: none; }
:root[data-theme="light"] .darstellung__dunkel { display: block; }

.konto { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .65rem .3rem .3rem; border: 1px solid var(--linie); border-radius: 2rem; color: var(--schrift); text-decoration: none; font-size: .88rem; }
.konto:hover { border-color: var(--linie-stark); color: var(--schrift); }
.konto__initialen { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--akzent-wash); color: var(--akzent); font-weight: 700; font-size: .72rem; }

.nav-schalter { display: none; }

/* --- Inhaltsfläche und Fuß ------------------------------------------ */

.inhalt {
  flex: 1;
  width: min(100% - 2rem, var(--spalte));
  margin-inline: auto;
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  display: flex; flex-direction: column; gap: 2.5rem;
}

.fuss { border-top: 1px solid var(--linie); margin-top: 3rem; }
.fuss__innen {
  width: min(100% - 2rem, var(--spalte)); margin-inline: auto;
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
  color: var(--schrift-still); font-size: .85rem;
}
.fuss__marke { font-weight: 600; color: var(--schrift-leise); }
.fuss__nav { display: flex; gap: 1.25rem; }
.fuss__nav a { color: var(--schrift-leise); text-decoration: none; }
.fuss__nav a:hover { color: var(--akzent); text-decoration: underline; }

/* --- Startseite ------------------------------------------------------ */

.hero { display: flex; flex-direction: column; gap: .85rem; max-width: 46rem; }
.hero__eyebrow { color: var(--akzent); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero__title { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
.hero__lead { color: var(--schrift-leise); font-size: 1.05rem; max-width: 34rem; }
.hero__search, .search-form { display: flex; gap: .5rem; margin-top: .5rem; max-width: 30rem; }
.hero__search input, .search-form input { flex: 1; }

.section { display: flex; flex-direction: column; gap: 1.1rem; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linie); }
.section__more { font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section__more:hover { text-decoration: underline; }

.page-head { display: flex; flex-direction: column; gap: .5rem; }
.page-head--actions { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-head__lead { color: var(--schrift-leise); }
.page-head__buttons { display: flex; gap: .5rem; flex-wrap: wrap; }

.empty { color: var(--schrift-still); padding: 2.5rem 0; text-align: center; }

/* --- Geschichtenkarten ---------------------------------------------- */

.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.story-card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.15rem 1.2rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.story-card:hover { border-color: var(--linie-stark); transform: translateY(-2px); box-shadow: var(--schatten); }
.story-card__link { display: flex; flex-direction: column; gap: .45rem; color: inherit; text-decoration: none; flex: 1; }
.story-card__title { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.story-card:hover .story-card__title { color: var(--akzent); }
.story-card__excerpt { color: var(--schrift-leise); font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--schrift-still); font-size: .8rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--linie); }
.story-card__author { color: var(--schrift-leise); font-weight: 600; text-decoration: none; }
.story-card__author:hover { color: var(--akzent); }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem; border-radius: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.badge--private { background: var(--warn-wash); color: var(--warn); }
.badge--public { background: var(--gut-wash); color: var(--gut); }
.badge--block { align-self: flex-start; padding: .3rem .7rem; }

/* --- Autoren --------------------------------------------------------- */

.author-row { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.author-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .35rem; border: 1px solid var(--linie); border-radius: 2rem; background: var(--flaeche); color: var(--schrift); text-decoration: none; font-size: .9rem; }
.author-chip:hover { border-color: var(--akzent); color: var(--schrift); }
.author-chip__initial, .author-card__initial { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--akzent-wash); color: var(--akzent); font-weight: 700; font-size: .8rem; }
.author-chip__count { color: var(--schrift-still); font-size: .8rem; }

.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.author-card a { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.2rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: inherit; text-decoration: none; }
.author-card a:hover { border-color: var(--akzent); }
.author-card__initial { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.author-card__name { font-weight: 650; }
.author-card__meta { color: var(--schrift-still); font-size: .82rem; }

/* --- Leseransicht ---------------------------------------------------- */

.reader { display: flex; flex-direction: column; gap: 1.75rem; width: min(100%, var(--lesespalte)); margin-inline: auto; }
.reader__head { display: flex; flex-direction: column; gap: .65rem; }
.reader__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); letter-spacing: -.022em; line-height: 1.12; }
.reader__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--schrift-still); font-size: .88rem; }
.reader__meta a { color: var(--schrift-leise); font-weight: 600; text-decoration: none; }
.reader__meta a:hover { color: var(--akzent); }

.reader__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: min(100%, var(--lesespalte)); margin-inline: auto; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.reader__nav-link { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius); color: inherit; text-decoration: none; }
.reader__nav-link:hover { border-color: var(--akzent); color: inherit; }
.reader__nav-link span { color: var(--schrift-still); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.reader__nav-link strong { font-weight: 600; font-size: .95rem; }
.reader__nav-link--next { grid-column: 2; text-align: right; }

/* Der eigentliche Text. Serifen, große Zeilenhöhe, begrenzte Zeilenlänge
   — was eine lange Geschichte lesbar hält (Kriterium 20). */
.prose { font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); line-height: 1.75; color: var(--schrift); }
.prose > * + * { margin-top: 1.1em; }
.prose h1, .prose h2, .prose h3 { font-family: var(--serif); font-weight: 650; letter-spacing: -.015em; }
.prose h1 { font-size: 1.6em; margin-top: 1.9em; }
.prose h2 { font-size: 1.32em; margin-top: 1.8em; }
.prose h3 { font-size: 1.13em; margin-top: 1.6em; }
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { text-decoration: underline; }
.prose strong { font-weight: 700; }
.prose u { text-decoration-thickness: 1px; text-underline-offset: .16em; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose blockquote {
  margin-inline: 0; padding: .3em 0 .3em 1.2em;
  border-inline-start: 3px solid var(--akzent);
  color: var(--schrift-leise); font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--linie); margin-block: 2.5em; }
.prose code { padding: .12em .35em; border-radius: .25rem; background: var(--flaeche-hoch); color: var(--akzent); font-size: .85em; }
.prose pre { padding: 1rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-hoch); overflow-x: auto; font-size: .88rem; line-height: 1.6; }
.prose pre code { padding: 0; background: none; color: var(--schrift); }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .92rem; }
.prose th, .prose td { padding: .55rem .7rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.prose thead th { color: var(--schrift-leise); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--linie-stark); }
.markdown-align-right { text-align: right; }
.markdown-align-center { text-align: center; }
.markdown-align-left { text-align: left; }

/* --- Bausteine: Knöpfe, Felder, Hinweise ----------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .58rem 1rem; border: 1px solid transparent; border-radius: var(--radius-klein);
  background: var(--akzent); color: #fff;
  font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--akzent-tief); color: #fff; }
.button--ghost { background: var(--flaeche); border-color: var(--linie); color: var(--schrift); }
.button--ghost:hover { background: var(--flaeche-hoch); border-color: var(--linie-stark); color: var(--schrift); }
.button--danger { background: var(--fehler); }
.button--danger:hover { background: color-mix(in srgb, var(--fehler) 80%, black); }
.button--klein { padding: .4rem .8rem; font-size: .86rem; }

input, select, textarea, button { font: inherit; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="file"], select, textarea {
  width: 100%; padding: .58rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--schrift);
}
input::placeholder, textarea::placeholder { color: var(--schrift-still); }
input:hover, select:hover, textarea:hover { border-color: var(--linie-stark); }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label, .switch legend { font-size: .88rem; font-weight: 600; }
.field__hint { color: var(--schrift-still); font-size: .82rem; }
.field__inline { display: flex; align-items: center; gap: .4rem; }
.field__suffix { color: var(--schrift-still); font-size: .88rem; }

.switch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; padding: 0; border: 0; }
.switch legend { float: left; margin-inline-end: .8rem; padding: 0; }
.switch label { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--schrift-leise); cursor: pointer; }
.switch input { width: auto; accent-color: var(--akzent); }

.notice { padding: .7rem .95rem; border: 1px solid var(--linie); border-left-width: 3px; border-radius: var(--radius-klein); font-size: .92rem; }
.notice--ok { border-left-color: var(--gut); background: var(--gut-wash); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-wash); }
.notice--error { border-left-color: var(--fehler); background: var(--fehler-wash); }

.card-form { display: flex; flex-direction: column; gap: 1.2rem; max-width: 34rem; padding: 1.5rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.card-form__actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* --- Tabellen -------------------------------------------------------- */

/* Eine breite Tabelle rollt in ihrem eigenen Kasten. Die Seite selbst
   bekommt nie eine waagerechte Bildlaufleiste (Kriterium 25). */
.table-wrap { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th, .data-table td { padding: .7rem .85rem; text-align: left; vertical-align: middle; white-space: nowrap; }
.data-table thead th { color: var(--schrift-leise); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-bottom: 1px solid var(--linie-stark); }
.data-table tbody tr + tr td { border-top: 1px solid var(--linie); }
.data-table tbody tr:hover { background: var(--flaeche-hoch); }
.data-table__actions { display: flex; gap: .85rem; }
.data-table code { color: var(--schrift-leise); }

/* --- Editor ---------------------------------------------------------- */

.editor { display: flex; flex-direction: column; gap: 1rem; }
.editor__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem;
  padding: .4rem; border: 1px solid var(--linie); border-radius: var(--radius) var(--radius) 0 0;
  background: var(--flaeche-hoch);
  position: sticky; top: 4rem; z-index: 20;
}
.tool {
  min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: transparent; color: var(--schrift-leise);
  font-size: .88rem; font-weight: 600; cursor: pointer;
}
.tool:hover { background: var(--akzent-wash); color: var(--akzent); }
.tool--toggle[aria-pressed="true"] { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.tool__sep { width: 1px; height: 1.3rem; margin-inline: .3rem; background: var(--linie-stark); }
.tool__spacer { flex: 1; }

.editor__panes { display: grid; grid-template-columns: 1fr; gap: 0; }
.editor--split .editor__panes { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); }
.editor__pane { min-width: 0; }
.editor__text {
  display: block; width: 100%; min-height: min(60vh, 34rem); resize: vertical;
  padding: 1.4rem clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--flaeche); color: var(--schrift);
  font-family: var(--mono); font-size: .95rem; line-height: 1.7;
  tab-size: 2;
}
.editor--split .editor__text { border-radius: 0 0 0 var(--radius); }
.editor__pane--preview {
  padding: 1.4rem clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius) 0;
  background: var(--flaeche);
  overflow-y: auto; max-height: min(60vh, 34rem);
  font-size: 1rem;
}
.editor__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.editor__foot-actions { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; }
.editor__count { color: var(--schrift-still); font-size: .84rem; font-variant-numeric: tabular-nums; }

.danger-zone {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem; border: 1px solid var(--fehler); border-radius: var(--radius);
  background: var(--fehler-wash);
}
.danger-zone h2 { font-size: 1rem; }
.danger-zone p { color: var(--schrift-leise); font-size: .88rem; margin-top: .25rem; }

/* --- Anmeldung, Konto, Übersicht und Verwaltung ----------------------

   Der ganze angemeldete Bereich wird nicht von diesem Projekt gebaut: Das
   Markup kommt aus `modules/admin`, `modules/tables`, `modules/forms` und
   `modules/dashboard`. Ein Theme, das nur seine eigenen Klassen kennt,
   liefert dort **gar kein** Layout — Überschriften, Felder und Knöpfe
   stehen dann in Browservorgaben untereinander, in ganz verschiedenen
   Größen. Genau das war hier der Fall.

   Deshalb steht unten kein geratener Selektor mehr, sondern je eine Regel
   für jede Klasse, die diese Module wirklich erzeugen. Die Liste stammt
   aus ihren Vorlagen, nicht aus der Erinnerung:

     admin      page-heading, admin-dashboard, admin-dashboard-grid,
                admin-new, admin-actions, admin-actions-table,
                admin-delete, admin-delete-confirm,
                admin-delete-unconfirmed, empty-state,
                metric-grid, metric-card
     tables     table-wrap, table, table-filters, table-pagination,
                table-pagination-status, table-edit, table-empty
     forms      form, form-field, form-field-invalid, form-help,
                form-error, form-action, rich-text*
     dashboard  dashboard-page, dashboard-section, dashboard-widgets,
                dashboard-widget, konto-seite, detail-card, logout-form,
                hinweis, error

   Sie benutzen dieselben Farbmarken und Bausteine wie der öffentliche
   Teil — es gibt kein zweites, halbfertiges Design daneben. */

/* Der Verwaltungsbereich bekommt eine breitere Spalte als der Lesetext:
   Eine Tabelle mit sechs Spalten in einer Lesespalte zu zeigen, wäre
   die falsche Sparsamkeit. */
.seite--admin .inhalt { width: min(100% - 2rem, 82rem); gap: 1.75rem; }

/* Nicht jede Seite dieser Module bringt einen `page-heading` mit: Die
   Listenseite von `admin` schreibt ein nacktes `<h1>`. Ohne diese Regel
   wäre dieselbe Überschrift dort deutlich größer als eine Zeile weiter
   im Formular — genau die uneinheitlichen Größen, die einen Bereich
   „zusammengewürfelt" aussehen lassen. */
.seite--admin .inhalt > h1 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linie);
}
/* Der „Neu"-Knopf steht in einem eigenen Absatz direkt unter der
   Überschrift und braucht deshalb keinen vollen Abschnittsabstand. */
.seite--admin .inhalt > h1 + p { margin-top: -.9rem; }

/* Anmeldeseite (Variante „auth"). */
.seite--auth .inhalt { max-width: 25rem; justify-content: center; }
.seite--auth .inhalt > h1 { padding: 0; border: 0; background: none; font-size: 1.6rem; text-align: center; }
.seite--auth form {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.75rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); box-shadow: var(--schatten);
}
.seite--auth form p { margin: 0; }
.seite--auth .inhalt > p { text-align: center; color: var(--schrift-leise); font-size: .9rem; }

/* --- Seitenkopf, den admin und dashboard gemeinsam benutzen ---------- */

.page-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--linie); }
.page-heading h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.page-heading p { margin-top: .3rem; color: var(--schrift-leise); font-size: .95rem; }

/* Abschnitte dieser Module bringen ihre Abstände nicht selbst mit. */
.admin-dashboard, .dashboard-page, .konto-seite, .dashboard-section { display: flex; flex-direction: column; gap: 1.5rem; }

/* --- Kachelraster der Verwaltungsübersicht --------------------------- */

.admin-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.admin-dashboard-grid a {
  display: grid; grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto;
  align-items: center; gap: .1rem .9rem;
  padding: 1.1rem 1.2rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); color: inherit; text-decoration: none;
  box-shadow: var(--schatten-klein);
  transition: border-color .15s ease, transform .15s ease;
}
.admin-dashboard-grid a:hover { border-color: var(--akzent); color: inherit; transform: translateY(-2px); }
.admin-dashboard-grid a span {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: .55rem;
  background: var(--akzent-wash); color: var(--akzent); font-size: 1.1rem;
}
.admin-dashboard-grid a strong { align-self: end; font-weight: 650; }
.admin-dashboard-grid a small { align-self: start; color: var(--schrift-still); font-size: .8rem; }

/* --- Kennzahlen ------------------------------------------------------ */

.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.metric-card { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.metric-card > span { color: var(--akzent); font-size: 1.4rem; line-height: 1; }
.metric-card div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.metric-card small { color: var(--schrift-still); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.metric-card strong { font-size: 1.55rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric-card p { color: var(--schrift-leise); font-size: .84rem; }

/* --- Tabellen aus `modules/tables` ----------------------------------- */

/* .table-wrap ist oben schon definiert (eigener Kasten, der rollt); hier
   kommt die Tabelle darin dazu. */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .7rem .85rem; text-align: left; vertical-align: middle; }
.table thead th { color: var(--schrift-leise); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--linie-stark); }
.table thead th a { color: inherit; text-decoration: none; }
.table thead th a:hover { color: var(--akzent); }
.table thead th[aria-sort] a::after { content: " ↕"; color: var(--schrift-still); }
.table thead th[aria-sort="ascending"] a::after { content: " ↑"; color: var(--akzent); }
.table thead th[aria-sort="descending"] a::after { content: " ↓"; color: var(--akzent); }
.table tbody tr + tr td { border-top: 1px solid var(--linie); }
.table tbody tr:hover { background: var(--flaeche-hoch); }
.table-edit { font-weight: 600; text-decoration: none; white-space: nowrap; }
.table-edit:hover { text-decoration: underline; }
.table-empty { padding: 2.5rem .85rem; color: var(--schrift-still); text-align: center; }

.table-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
  padding: 1rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche-hoch);
}
.table-filters label { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 600; color: var(--schrift-leise); }
.table-filters input, .table-filters select { width: auto; min-width: 11rem; }
.table-filters button { padding: .55rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--schrift); font-weight: 600; cursor: pointer; }
.table-filters button:hover { border-color: var(--akzent); color: var(--akzent); }

.table-pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.table-pagination a {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--schrift); text-decoration: none; font-size: 1.1rem;
}
.table-pagination a:hover { border-color: var(--akzent); color: var(--akzent); }
.table-pagination-status { color: var(--schrift-still); font-size: .86rem; font-variant-numeric: tabular-nums; }

/* --- Formulare aus `modules/forms` ----------------------------------- */

.form {
  display: flex; flex-direction: column; gap: 1.1rem;
  max-width: 46rem; padding: 1.5rem;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
}
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-field label { font-size: .88rem; font-weight: 600; }
.form-field input[type="checkbox"] { width: auto; accent-color: var(--akzent); }
.form-field-invalid input, .form-field-invalid select, .form-field-invalid textarea { border-color: var(--fehler); }
.form-help { color: var(--schrift-still); font-size: .82rem; }
.form-action { font-size: .86rem; }
.form-error { color: var(--fehler); font-size: .84rem; font-weight: 600; }
.form textarea { min-height: 18rem; font-family: var(--mono); font-size: .92rem; line-height: 1.65; resize: vertical; }
.form > button[type="submit"] { align-self: flex-start; }

/* Die Werkzeugleiste des Rich-Text-Feldes teilt das Aussehen mit der des
   Story-Editors — zwei Leisten, die verschieden aussehen, wären zwei
   Produkte in einem. */
.rich-text { display: flex; flex-direction: column; }
.rich-text-toolbar { display: flex; flex-wrap: wrap; gap: .2rem; padding: .4rem; border: 1px solid var(--linie); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--flaeche-hoch); }
.rich-text-toolbar button { min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--radius-klein); background: transparent; color: var(--schrift-leise); font-size: .88rem; font-weight: 600; cursor: pointer; }
.rich-text-toolbar button:hover { background: var(--akzent-wash); color: var(--akzent); }
.rich-text-editor { min-height: 14rem; padding: 1rem; border: 1px solid var(--linie); border-radius: 0 0 var(--radius) var(--radius); background: var(--flaeche); overflow-y: auto; }
.rich-text-editor:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.rich-text-fallback { color: var(--schrift-still); font-size: .82rem; }

/* --- Knöpfe und Aktionen im Verwaltungsbereich ----------------------- */

/* Diese Module setzen keine Klasse auf ihre Absende-Knöpfe. Damit ein
   nackter <button> nicht wie ein Browservorgabeknopf aussieht, werden sie
   hier über ihren Kontext erfasst — enger als `button` allein, damit die
   eigenen Leisten dieses Themes unberührt bleiben. */
.form button[type="submit"],
.admin-actions button,
.admin-delete button,
.seite--auth form button,
.logout-form button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .58rem 1rem; border: 1px solid transparent; border-radius: var(--radius-klein);
  background: var(--akzent); color: #fff; font: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer;
}
.form button[type="submit"]:hover,
.admin-actions button:hover,
.admin-delete button:hover,
.seite--auth form button:hover,
.logout-form button:hover { background: var(--akzent-tief); }

.admin-new {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .58rem 1rem; border-radius: var(--radius-klein);
  background: var(--akzent); color: #fff; font-size: .92rem; font-weight: 600; text-decoration: none;
}
.admin-new:hover { background: var(--akzent-tief); color: #fff; }

.admin-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.admin-actions-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-actions-table th, .admin-actions-table td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--linie); }
.admin-actions-table th { color: var(--schrift-leise); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.admin-actions-table input[type="checkbox"] { width: auto; accent-color: var(--akzent); }
/* Zeilenaktionen sind Nebenwege, keine Hauptsache: zurückhaltender als
   der Absende-Knopf daneben. */
.admin-actions-table button { padding: .35rem .7rem; border: 1px solid var(--linie) !important; background: var(--flaeche) !important; color: var(--schrift) !important; font-size: .84rem !important; }
.admin-actions-table button:hover { border-color: var(--akzent) !important; color: var(--akzent) !important; background: var(--flaeche-hoch) !important; }

.admin-delete {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  padding: 1.1rem 1.3rem; border: 1px solid var(--fehler); border-radius: var(--radius);
  background: var(--fehler-wash);
}
.admin-delete button { background: var(--fehler) !important; }
.admin-delete button:hover { background: color-mix(in srgb, var(--fehler) 80%, black) !important; }
.admin-delete-confirm { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; }
.admin-delete-confirm input { width: auto; accent-color: var(--fehler); }
.admin-delete-unconfirmed { padding: .7rem .95rem; border: 1px solid var(--fehler); border-left-width: 3px; border-radius: var(--radius-klein); background: var(--fehler-wash); font-size: .92rem; }

/* --- Übersicht, Konto, Meldungen ------------------------------------- */

.dashboard-widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.dashboard-widget, .detail-card, .empty-state {
  padding: 1.25rem 1.35rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche);
}
.dashboard-widget h2, .detail-card h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.detail-card { display: flex; flex-direction: column; gap: .9rem; }
.detail-card dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .5rem 1rem; margin: 0; }
.detail-card dt { color: var(--schrift-still); font-size: .84rem; }
.detail-card dd { margin: 0; }
.empty-state { text-align: center; color: var(--schrift-leise); }
.empty-state h2 { font-size: 1.05rem; color: var(--schrift); margin-bottom: .4rem; }

.logout-form { display: flex; }
.logout-form button { background: var(--flaeche) !important; border-color: var(--linie) !important; color: var(--schrift) !important; }
.logout-form button:hover { background: var(--flaeche-hoch) !important; border-color: var(--linie-stark) !important; }

/* `hinweis` und `error` sind die Meldungsklassen dieser Module — dieselbe
   Gestalt wie `.notice` im eigenen Teil. */
.hinweis, .error { padding: .7rem .95rem; border: 1px solid var(--linie); border-left-width: 3px; border-radius: var(--radius-klein); font-size: .92rem; }
.hinweis { border-left-color: var(--gut); background: var(--gut-wash); }
.error { border-left-color: var(--fehler); background: var(--fehler-wash); color: var(--fehler); }

/* --- Bewegung und Umbrüche ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .story-card:hover { transform: none; }
}

@media (max-width: 60rem) {
  .editor--split .editor__panes { grid-template-columns: 1fr; }
  .editor--split .editor__text { border-radius: 0; }
  .editor__pane--preview { border-radius: 0 0 var(--radius) var(--radius); }
}

@media (max-width: 48rem) {
  /* Die Tabellen der Rahmenmodule rollen in ihrem eigenen Kasten, nicht
     mit der ganzen Seite. `.table-wrap` bringt das schon mit; die
     Aktionstabelle von `admin` steht dagegen ohne Hülle da. */
  .admin-actions { width: 100%; overflow-x: auto; }
  .admin-actions-table { min-width: 32rem; }
  .table-filters { flex-direction: column; align-items: stretch; }
  .table-filters input, .table-filters select { min-width: 0; width: 100%; }
  .form { padding: 1.1rem; }
  .admin-delete { flex-direction: column; align-items: stretch; }
  .page-heading { flex-direction: column; }

  .kopf__innen { flex-wrap: wrap; gap: .5rem; padding-block: .6rem; }
  .nav-schalter {
    display: inline-grid; place-items: center; order: 3;
    width: 2.25rem; height: 2.25rem; padding: 0;
    border: 1px solid var(--linie); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--schrift); cursor: pointer;
  }
  .nav-schalter__strich, .nav-schalter__strich::before, .nav-schalter__strich::after {
    display: block; width: 1rem; height: 2px; background: currentColor; content: "";
  }
  .nav-schalter__strich::before { transform: translateY(-5px); }
  .nav-schalter__strich::after { transform: translateY(3px); }
  .kopf__rechts { order: 2; margin-inline-start: auto; }
  .nav {
    order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
    margin: 0; padding-block: .4rem; gap: 0;
    border-top: 1px solid var(--linie);
  }
  .nav:not([data-offen]) { display: none; }
  .nav__link { padding: .7rem .5rem; border-radius: 0; }
  .nav__link + .nav__link { border-top: 1px solid var(--linie); }
  .konto__name { display: none; }

  .reader__nav { grid-template-columns: 1fr; }
  .reader__nav-link--next { grid-column: 1; text-align: left; }
  .editor__bar { position: static; }
  .danger-zone, .page-head--actions { flex-direction: column; align-items: stretch; }
  .card-form__actions { flex-direction: column-reverse; }
  .card-form__actions .button { width: 100%; }
}

/* Ohne JavaScript gibt es keinen Umschalter für das Menü — dann ist die
   Navigation immer offen statt unerreichbar. */
html:not(.hat-js) .nav { display: flex !important; }
html:not(.hat-js) .nav-schalter { display: none !important; }
html:not(.hat-js) .darstellung { display: none !important; }