/* StoryTapas: Basis-Styles. Fonts selbst gehostet (Inter, Literata; SIL OFL). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/literata-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/literata-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/static/fonts/literata-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/static/fonts/literata-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/literata-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/literata-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("/static/fonts/literata-latin-700-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("/static/fonts/literata-latin-ext-700-italic.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Farbschemata ---------- */
:root {
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lese-schrift: "Literata", Georgia, "Times New Roman", serif;
  --radius: 10px;
  --max: 1080px;
  --lese-max: 42rem;
  --lese-groesse: 1.15rem;

  --bg: #f8f7f4;
  --bg-2: #ffffff;
  --bg-3: #eeece7;
  --text: #1c1b19;
  --text-2: #5c5a55;
  --rahmen: #dcd9d2;
  --akzent: #b8412f;
  --akzent-text: #ffffff;
  --sf: #2a6f97;
  --fantasy: #6a994e;
  --horror: #7b2d3b;
  --schatten: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06);
}
:root[data-theme="dunkel"] {
  --bg: #15161a;
  --bg-2: #1e2025;
  --bg-3: #272a31;
  --text: #ebe9e4;
  --text-2: #a4a19a;
  --rahmen: #33363e;
  --akzent: #e06a55;
  --akzent-text: #15161a;
  --sf: #6cb4dd;
  --fantasy: #9ccf7a;
  --horror: #d97a8c;
  --schatten: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
}
:root[data-theme="sepia"] {
  --bg: #f1e7d0;
  --bg-2: #f8f1e0;
  --bg-3: #e6d9bb;
  --text: #3d2e1e;
  --text-2: #6e5a44;
  --rahmen: #cfc0a2;
  --akzent: #9c4a2a;
  --akzent-text: #fff8ec;
  --schatten: 0 1px 3px rgba(60,40,10,.12), 0 6px 20px rgba(60,40,10,.08);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--schrift); color: var(--text); background: var(--bg);
  line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--akzent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--akzent); color: var(--akzent-text); padding: .5rem 1rem; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.haupt { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.stumm { color: var(--text-2); }
.klein { font-size: .9rem; }
.inline { display: inline; }

/* ---------- Kopf / Fuß ---------- */
.kopf { background: var(--bg-2); border-bottom: 1px solid var(--rahmen); position: sticky; top: 0; z-index: 20; }
.kopf-innen { max-width: var(--max); margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marke { font-weight: 700; font-size: 1.3rem; color: var(--text); letter-spacing: -.01em; }
.marke span { color: var(--akzent); }
.nav { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.nav a { color: var(--text); }
.nav a[aria-current] { font-weight: 600; color: var(--akzent); }
.nav-name { color: var(--text-2); font-size: .9rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuss { border-top: 1px solid var(--rahmen); background: var(--bg-2); color: var(--text-2); font-size: .85rem; }
.fuss-innen { max-width: var(--max); margin: 0 auto; padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fuss nav a { margin-left: 1rem; color: var(--text-2); }

/* ---------- Knöpfe / Formulare ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--akzent); color: var(--akzent-text);
  border: 0; border-radius: 999px; padding: .55rem 1.1rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.knopf:hover { filter: brightness(1.08); text-decoration: none; }
.knopf.sekundaer { background: var(--bg-3); color: var(--text); }
.knopf.klein { padding: .35rem .85rem; font-size: .9rem; }
.knopf[aria-pressed="true"] { outline: 2px solid var(--akzent); outline-offset: 2px; }
button.link { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; }
button.link:hover { text-decoration: underline; }
.theme-knopf { background: var(--bg-3); border: 1px solid var(--rahmen); border-radius: 999px; width: 2.2rem; height: 2.2rem; cursor: pointer; display: grid; place-items: center; }
.theme-symbol { width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(90deg, var(--text) 50%, var(--bg) 50%); border: 1.5px solid var(--text); }

.formular { max-width: 26rem; margin: 2rem auto; background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--schatten); }
.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"], .feld input[type="search"], .feld select {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--rahmen); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit;
}
.feld.check { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }
.feld.check input { margin-top: .25rem; }
.hinweis { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--rahmen); background: var(--bg-3); }
.hinweis.fehler { border-color: var(--akzent); color: var(--akzent); background: transparent; }
.hinweis.ok { border-color: var(--fantasy); }

/* ---------- Filterleiste ---------- */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.4rem; }
.filter .chip { border: 1px solid var(--rahmen); background: var(--bg-2); color: var(--text); padding: .35rem .8rem; border-radius: 999px; font-size: .9rem; }
.filter .chip[aria-current="true"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.filter .chip:hover { text-decoration: none; border-color: var(--akzent); }
.filter form { display: flex; gap: .4rem; margin-left: auto; }
.filter input[type="search"] { padding: .4rem .7rem; border: 1px solid var(--rahmen); border-radius: 999px; background: var(--bg-2); color: var(--text); min-width: 12rem; }

/* ---------- Karten ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; list-style: none; padding: 0; margin: 0; }
.karte { background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); display: flex; flex-direction: column; transition: transform .12s ease; }
.karte:hover { transform: translateY(-2px); }
.karte-bild { aspect-ratio: 15 / 8; background: var(--bg-3); object-fit: cover; width: 100%; }
.karte-bild.leer { display: grid; place-items: center; color: var(--text-2); font-family: var(--lese-schrift); font-style: italic; font-size: 1.6rem; }
.karte-innen { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.karte h3 { font-size: 1.1rem; margin: 0; }
.karte h3 a { color: var(--text); }
.karte .teaser { color: var(--text-2); font-size: .93rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem .7rem; font-size: .82rem; color: var(--text-2); margin-top: auto; }
.genre { font-weight: 600; }
.genre.sf { color: var(--sf); }
.genre.fantasy { color: var(--fantasy); }
.genre.horror { color: var(--horror); }
.tag { display: inline-block; background: var(--bg-3); border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; color: var(--text-2); }

/* ---------- Startseite ---------- */
.held { text-align: center; padding: 2.5rem 0 2rem; }
.held p { max-width: 36rem; margin: 0 auto 1.4rem; color: var(--text-2); font-size: 1.1rem; }
.genre-leiste { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }

/* ---------- Geschichte (Detail) ---------- */
.lese-werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 1.5rem; padding: .6rem .8rem; background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: var(--radius); position: sticky; top: 3.4rem; z-index: 10; }
.lese-werkzeuge .gruppe { display: flex; gap: .3rem; align-items: center; }
.lese-werkzeuge label { font-size: .85rem; color: var(--text-2); }
.lese-werkzeuge select, .lese-werkzeuge input[type="range"] { font: inherit; font-size: .85rem; background: var(--bg); color: var(--text); border: 1px solid var(--rahmen); border-radius: 6px; padding: .25rem .4rem; max-width: 12rem; }
.lese-werkzeuge input[type="range"] { padding: 0; width: 6rem; }
.lese-werkzeuge .status { font-size: .85rem; color: var(--text-2); margin-left: auto; }

.geschichte { max-width: var(--lese-max); margin: 0 auto; }
.geschichte-kopf { text-align: center; margin-bottom: 1.5rem; }
.geschichte-kopf h1 { font-family: var(--lese-schrift); font-weight: 700; }
.geschichte-kopf .autor { font-size: 1.05rem; }
.geschichte-kopf .meta { justify-content: center; margin-top: .6rem; }
.titelbild { border-radius: var(--radius); margin: 0 auto 1.5rem; max-height: 22rem; object-fit: cover; }
.teaser-block { font-family: var(--lese-schrift); font-style: italic; font-size: 1.1rem; color: var(--text-2); border-left: 3px solid var(--akzent); padding-left: 1rem; margin-bottom: 1.5rem; }
.warnung { background: var(--bg-3); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.5rem; font-size: .92rem; }
.warnung summary { cursor: pointer; font-weight: 600; }
.lese-text { font-family: var(--lese-schrift); font-size: var(--lese-groesse); line-height: 1.7; hyphens: auto; }
.lese-text p { margin: 0 0 1.1em; transition: background .2s; border-radius: 4px; }
.lese-text p.aktiv { background: color-mix(in srgb, var(--akzent) 14%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--akzent) 14%, transparent); }
.lese-text p.aktiv { animation: none; }
.lese-ende { text-align: center; color: var(--text-2); margin-top: 2.5rem; font-family: var(--lese-schrift); font-style: italic; }
.sperre { text-align: center; background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 2rem 1.5rem; margin-top: 1rem; }
.sperre .knopf { margin: .3rem; }

/* Schriftgrößen (per JS auf <html>) */
:root[data-groesse="klein"] { --lese-groesse: 1rem; }
:root[data-groesse="mittel"] { --lese-groesse: 1.15rem; }
:root[data-groesse="gross"] { --lese-groesse: 1.35rem; }
:root[data-groesse="riesig"] { --lese-groesse: 1.6rem; }

/* Vollbild-Lesemodus */
.lese-vollbild, :fullscreen .lese-vollbild-innen { background: var(--bg); }
body.vollbild .kopf, body.vollbild .fuss, body.vollbild .geschichte-kopf .meta, body.vollbild .titelbild { display: none; }
body.vollbild .haupt { padding-top: .5rem; }
body.vollbild .lese-werkzeuge { top: 0; }
body.vollbild .geschichte { --lese-max: 46rem; }
.lese-bereich:fullscreen { overflow: auto; padding: 1rem; background: var(--bg); color: var(--text); }
.lese-bereich:fullscreen .lese-werkzeuge { top: 0; }

/* ---------- Text-Seiten ---------- */
.prosa { max-width: 46rem; }
.prosa h2 { margin-top: 1.8rem; }

@media (max-width: 600px) {
  .kopf-innen { padding: .5rem .8rem; }
  .nav { gap: .6rem; font-size: .92rem; }
  .nav-name { display: none; }
  .lese-werkzeuge { top: 3.1rem; }
  .lese-werkzeuge .status { margin-left: 0; width: 100%; }
  .filter form { margin-left: 0; width: 100%; }
  .filter input[type="search"] { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .karte { transition: none; }
}

/* ---------- V2: Layout-Bausteine ---------- */
.formular.breit { max-width: 52rem; margin: 1rem 0 2rem; }
.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1.2rem; }
.feld textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--rahmen); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; line-height: 1.5; }
.feld input[type="date"], .feld input[type="month"], .feld input[type="url"], .feld input[type="file"] { width: 100%; padding: .55rem .75rem; border: 1px solid var(--rahmen); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.reiter { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--rahmen); padding-bottom: .6rem; align-items: center; }
.reiter a { color: var(--text); padding: .2rem 0; }
.reiter a[aria-current] { color: var(--akzent); font-weight: 600; border-bottom: 2px solid var(--akzent); }
.block { margin: 1.6rem 0; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.kachel { background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.kachel .zahl { font-size: 1.7rem; font-weight: 700; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; font-size: .93rem; }
.tabelle th, .tabelle td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--rahmen); vertical-align: top; }
.tabelle th { background: var(--bg-3); font-weight: 600; }
.tabelle tr.gesperrt td { opacity: .6; }
.tabelle .aktionen form { margin: 0; }
.tabelle select { font: inherit; font-size: .85rem; background: var(--bg); color: var(--text); border: 1px solid var(--rahmen); border-radius: 6px; }
.karte-zeile { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .7rem; }
.karte-zeile p { margin: .3rem 0 0; }
.aktionen-formular { display: flex; flex-direction: column; gap: .4rem; min-width: 14rem; }
.aktionen-formular input[type="text"], .aktionen-formular select { font: inherit; font-size: .88rem; padding: .35rem .5rem; border: 1px solid var(--rahmen); border-radius: 6px; background: var(--bg); color: var(--text); }
.status { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; background: var(--bg-3); }
.status.s-veroeffentlicht { background: color-mix(in srgb, var(--fantasy) 25%, transparent); }
.status.s-abgelehnt, .status.s-depubliziert { background: color-mix(in srgb, var(--horror) 25%, transparent); }
.status.s-eingereicht { background: color-mix(in srgb, var(--sf) 25%, transparent); }
.moderation-hinweis { margin-top: .3rem; padding: .4rem .6rem; border-left: 3px solid var(--akzent); background: var(--bg-3); border-radius: 4px; }
.chips-auswahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.chips-auswahl .chip { border: 1px solid var(--rahmen); border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; background: var(--bg-2); cursor: pointer; }
.chips-auswahl .chip:has(input:checked) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 15%, transparent); }
.chips-auswahl input { margin: 0 .2rem 0 0; }
.lizenz-box { white-space: pre-wrap; background: var(--bg-2); border: 1px solid var(--rahmen); border-radius: 8px; padding: .8rem 1rem; max-height: 18rem; overflow: auto; font-size: .92rem; margin: .4rem 0; }
.lizenz-box.gross { max-height: none; font-family: var(--lese-schrift); font-size: 1rem; }
.avatar { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; margin: .3rem 0; }
.avatar.gross { width: 6rem; height: 6rem; }
.vorschau { max-width: 12rem; border-radius: 6px; margin: .3rem 0; }
.autor-kopf { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.5rem; }
.verlauf { list-style: none; padding: 0; }
.verlauf li { padding: .5rem 0; border-bottom: 1px solid var(--rahmen); }
.chip { border: 1px solid var(--rahmen); background: var(--bg-2); color: var(--text); padding: .3rem .8rem; border-radius: 999px; font-size: .88rem; display: inline-block; }
.chip:hover { text-decoration: none; border-color: var(--akzent); }
.chip[aria-current="true"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

/* ---------- Geschichte: Teilen, Sterne, Kommentare ---------- */
.teilen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 2rem 0 1rem; }
.sterne-formulare { display: flex; flex-direction: column; gap: .4rem; }
.sterne-formular { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sterne .stern { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--rahmen); cursor: pointer; padding: 0 .05rem; }
.sterne .stern.aktiv { color: #e0a626; }
.sterne:hover .stern { color: #e0a626; }
.sterne .stern:hover ~ .stern { color: var(--rahmen); }
.kommentar { border-top: 1px solid var(--rahmen); padding: .7rem 0; }
.kommentar p { margin: .3rem 0 0; }
.kommentar-formular { margin-top: 1rem; max-width: 40rem; }
.melden-formular select { font: inherit; font-size: .8rem; background: var(--bg); color: var(--text); border: 1px solid var(--rahmen); border-radius: 6px; padding: .1rem .3rem; }
.bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; margin: 1.5rem 0; }
.bilder img { border-radius: 8px; width: 100%; }

/* ---------- Kopierschutz + Wasserzeichen (Hürden, kein absoluter Schutz) ---------- */
.lese-text.geschuetzt { position: relative; -webkit-user-select: none; user-select: none; }
.lese-text.geschuetzt::before {
  content: attr(data-wasserzeichen) "  ·  " attr(data-wasserzeichen) "  ·  " attr(data-wasserzeichen) "  ·  " attr(data-wasserzeichen) "  ·  " attr(data-wasserzeichen) "  ·  " attr(data-wasserzeichen);
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  font-family: var(--schrift); font-size: 1.4rem; line-height: 9rem; letter-spacing: .1em; text-align: center;
  color: var(--text); opacity: .045; transform: rotate(-24deg); white-space: normal; word-break: break-all;
}
.lese-text.geschuetzt p { position: relative; z-index: 1; }

/* ---------- Kleine Hilfsklassen (kein Inline-Style wegen CSP) ---------- */
.zeile { display: block; }
.normal { font-weight: 400; }
.fett { font-weight: 600; }
.mr { margin-right: 1rem; }
.mt-k { margin-top: .5rem; }
.mt { margin-top: 1rem; }
.mt-g { margin-top: 1.5rem; }
.mitte-gross { text-align: center; padding: 3rem 0; }