/* Tharogast-Web – schlankes, responsives Stylesheet (mobile-first).
   Keine Frameworks, keine Webfonts: schnell und überall lauffähig. */

:root {
  --bg: #1b1713;
  --bg-soft: #262019;
  --ink: #ece3d4;
  --muted: #b3a894;
  --accent: #c8923a;
  --accent-ink: #1b1713;
  --max: 42rem;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.65;
}

a { color: var(--accent); }

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  text-decoration: none;
  font-family: var(--sans);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- Landing --- */
.hero {
  text-align: center;
  padding: 3rem 1.25rem 2rem;
  background: var(--bg-soft);
}
.hero h1 {
  font-size: 2.6rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem;
}
.subtitle { color: var(--muted); font-style: italic; margin: 0 0 1rem; }
.tagline { max-width: var(--max); margin: 0 auto 1.5rem; }

.landing-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.landing-main section { margin: 0 0 2rem; }
.landing-main h2 {
  font-family: var(--sans);
  font-size: 1.25rem;
  border-bottom: 1px solid #3a2f24;
  padding-bottom: 0.3rem;
}

/* Allgemeines Bild-neben-Text-Layout. Verwendet von Abschnitten mit einem Bild
   (Thumbnail, zum Vergrößern anklickbar) und begleitendem Text – z. B.
   „Wie diese Seite funktioniert" und „Über den Autor". Weitere Abschnitte mit
   gleicher Struktur können dieselben Klassen nutzen. */
.media-card {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.media-figure {
  flex: 0 0 7rem;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}
.media-img {
  width: 7rem;
  max-width: 100%;
  height: auto;              /* Höhe folgt dem Seitenverhältnis des Bildes */
  border-radius: 4px;
  border: 1px solid #4a3d2d;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.media-figure:hover .media-img,
.media-figure:focus-visible .media-img { filter: brightness(1.1); transform: translateY(-2px); }
.media-text { flex: 1 1 16rem; }
.media-text p { margin: 0 0 0.9rem; }
.media-note {
  font-size: 0.9rem;
  color: var(--muted);
  border-top: 1px solid #3a2f24;
  padding-top: 0.7rem;
}

/* Auf schmalen Schirmen: Bild zentriert über dem Text */
@media (max-width: 36rem) {
  .media-figure { flex-basis: auto; margin: 0 auto; }
}

/* News-Abschnitt */
.news-item {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 0.9rem;
}
.news-date {
  margin: 0 0 0.25rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}

/* Anriss auf der Startseite: ganzer Block klickbar, führt ins Archiv */
a.news-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, background 0.12s;
}
a.news-link:hover, a.news-link:focus-visible {
  border-left-color: var(--ink);
  background: var(--bg-soft);
}
.news-title { margin: 0 0 0.5rem; font-family: var(--sans); }
.news-lead { margin: 0 0 0.6rem; }
.news-more { margin: 0; font-family: var(--sans); font-size: 0.85rem; color: var(--accent); }

/* Archivseite: einzelne Artikel */
.news-article { scroll-margin-top: 1rem; }
.news-article h2 a.news-anchor { color: inherit; text-decoration: none; }
.news-article h2 a.news-anchor:hover { color: var(--accent); }

/* Hashtags */
.hashtags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
}
.hashtag {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--accent);
  border: 1px solid #4a3d2d;
  border-radius: 1rem;
  padding: 0.15rem 0.6rem;
}

/* Inhaltsübersicht (TOC) */
.toc-book { font-weight: 600; margin: 0 0 0.6rem; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid #2f281f;
}
.toc-chapter { font-weight: 600; }
.toc-item.locked .toc-chapter { color: var(--muted); }
.toc-state { font-family: var(--sans); font-size: 0.85rem; white-space: nowrap; }
a.toc-state, .toc-item span.toc-state a { color: var(--accent); }
.toc-item.locked span.toc-state { color: var(--muted); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.6);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}
.lightbox-close:hover { opacity: 0.8; }
body.lightbox-open { overflow: hidden; }

.cta-bottom { text-align: center; }

.site-footer {
  text-align: center;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 1.5rem 1rem 2.5rem;
}

/* --- Reader --- */
/* Reader: Vollbild-Spalte. Kopf oben, Fuß unten, Inhalt dazwischen scrollbar.
   100dvh berücksichtigt die dynamischen Browserleisten auf Smartphones. */
body.reader {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.topbar {
  flex: 0 0 auto;            /* feste Höhe, oben verankert */
  z-index: 10;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: var(--bg-soft);
  border-bottom: 1px solid #3a2f24;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.topbar .brand { font-weight: 700; text-decoration: none; letter-spacing: 0.06em; }
.topbar .crumbs { color: var(--muted); flex: 1 1 auto; }
.topbar .modality { display: flex; align-items: center; gap: 0.4rem; }
.settings-btn {
  background: var(--bg); color: var(--ink);
  border: 1px solid #4a3d2d; border-radius: 0.3rem; padding: 0.35rem 0.7rem;
  font-family: var(--sans); font-size: 0.9rem; cursor: pointer;
}
.settings-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- Modalitäts-Overlay --- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 1rem; overflow-y: auto;
}
.overlay[hidden] { display: none; }
body.overlay-open { overflow: hidden; }
.overlay-panel {
  position: relative;
  background: var(--bg-soft); color: var(--ink);
  border: 1px solid #4a3d2d; border-radius: 0.6rem;
  width: 100%; max-width: 30rem;
  margin: auto; padding: 1.25rem 1.25rem 1.5rem;
  font-family: var(--sans);
}
.overlay-panel h2 { font-family: var(--sans); margin: 0 0 0.25rem; }
.overlay-hint { color: var(--muted); margin: 0 0 1rem; font-size: 0.85rem; }
.overlay-close {
  position: absolute; top: 0.5rem; right: 0.6rem;
  background: none; border: none; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.overlay-close:hover { color: var(--accent); }
.overlay .axis { border: none; margin: 0 0 1.1rem; padding: 0; }
.overlay .axis legend {
  padding: 0; margin: 0 0 0.5rem; font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.overlay-actions { margin-top: 0.5rem; text-align: right; }

/* Tiles (Ausgabetyp) und Toggles (Sprache) */
.tiles, .toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tile {
  flex: 1 1 6rem; min-height: 2.6rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid #4a3d2d; border-radius: 0.4rem;
  padding: 0.5rem 0.6rem; font-family: var(--sans); font-size: 0.9rem;
  cursor: pointer;
}
.tile.toggle { flex: 0 1 8rem; }
.tile:hover:not(.disabled) { border-color: var(--accent); }
.tile.checked {
  border-color: var(--accent); background: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
.tile.disabled { opacity: 0.45; cursor: not-allowed; }

/* Stimmungskompass */
.compass { display: flex; justify-content: center; }
.compass-svg { width: 100%; max-width: 20rem; height: auto; }
.compass-ring { fill: none; stroke: #4a3d2d; stroke-width: 1.5; stroke-dasharray: 3 6; }
.compass-spoke { stroke: #3a2f24; stroke-width: 1.5; }
.compass-line { stroke: var(--accent); stroke-width: 3; }
.compass-node circle, .compass-center circle {
  fill: var(--bg); stroke: #6a5636; stroke-width: 2; cursor: pointer;
}
.compass-node:hover circle, .compass-center:hover circle { stroke: var(--accent); }
.compass-node.selected circle, .compass-center.selected circle {
  fill: var(--accent); stroke: var(--accent-ink);
}
.compass-label {
  fill: var(--ink); font-family: var(--sans); font-size: 11px;
  pointer-events: none; user-select: none;
}
.compass-node.selected .compass-label, .compass-center.selected .compass-label {
  fill: var(--accent-ink); font-weight: 600;
}
.compass-node:focus, .compass-center:focus { outline: none; }
.compass-node:focus circle, .compass-center:focus circle { stroke: var(--accent); stroke-width: 3; }

/* Lesestufen-Slider */
.level-slider {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; padding: 0.2rem 0.5rem 0;
}
.level-slider::before {
  content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 0.65rem;
  height: 3px; background: #4a3d2d; border-radius: 2px;
}
.level-stop {
  position: relative; z-index: 1;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  color: var(--muted); font-family: var(--sans); font-size: 0.8rem;
}
.level-stop .dot {
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--bg); border: 2px solid #6a5636;
}
.level-stop.checked { color: var(--ink); font-weight: 600; }
.level-stop.checked .dot { background: var(--accent); border-color: var(--accent-ink); }
.level-stop:focus { outline: none; }
.level-stop:focus .dot { border-color: var(--accent); }

/* Der Lesebereich füllt den Raum zwischen Kopf und Fuß und scrollt für sich.
   Volle Breite als Scrollcontainer; der Text bleibt per max-width zentriert. */
.reader .content {
  flex: 1 1 auto;
  overflow-y: auto;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}
.content .scene h1, .content .scene h2 { font-family: var(--sans); }
.content .scene p { margin: 0 0 1.1rem; }
.content .scene[data-placeholder="1"] { border-left: 3px solid #4a3d2d; padding-left: 1rem; }

.paywall { text-align: center; padding: 2.5rem 1rem; }

/* --- Pager (am Fensterboden verankert) ---
   Aufbau: linke Knopfgruppe · Slider (füllt den Rest) · rechte Knopfgruppe. */
.pager {
  flex: 0 0 auto;            /* feste Höhe, unten verankert */
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--bg-soft);
  border-top: 1px solid #3a2f24;
  font-family: var(--sans); font-size: 1rem;
}
.pager-left, .pager-right {
  flex: 0 0 auto;            /* dockt an den jeweiligen Rand */
  display: flex; align-items: center; gap: 0.5rem;
}
.pager-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; min-height: 2.6rem;   /* bequeme Tap-Fläche */
  padding: 0.3rem 0.5rem; border: 1px solid #4a3d2d; border-radius: 0.3rem;
  text-decoration: none; color: var(--ink); background: var(--bg);
  line-height: 1; white-space: nowrap;
  font: inherit; cursor: pointer;          /* auch für <button> einheitlich */
}
.pager-link:hover { border-color: var(--accent); color: var(--accent); }
.pager-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pager-link.disabled {
  color: #5c5345; border-color: #2f281f; background: transparent; cursor: default;
}
.pager-link.disabled:hover { color: #5c5345; border-color: #2f281f; }

/* Kapitel-Slider: füllt den Raum zwischen den Knopfgruppen. */
.pager-slider {
  flex: 1 1 auto; min-width: 4rem; margin: 0;
  height: 2.6rem; cursor: pointer; accent-color: var(--accent);
}
.pager-slider:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- TOC-Overlay im Leser: Kapitel als Schnellwahl-Kacheln --- */
.toc-grid { display: grid; gap: 0.5rem; }
.toc-chip {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid #4a3d2d; border-radius: 0.4rem;
  text-decoration: none; font-family: var(--sans);
}
.toc-chip:hover { border-color: var(--accent); }
.toc-chip.current {
  border-color: var(--accent); background: #3a2f1c; font-weight: 600;
}
.toc-chip.locked { color: var(--muted); }
.toc-chip-lock { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; }
.toc-chip-title { flex: 1 1 auto; }

/* Auf schmalen Schirmen dürfen die Knopfgruppen umbrechen. */
@media (max-width: 30rem) {
  .pager { flex-wrap: wrap; }
  .pager-slider { flex-basis: 100%; order: 3; }
  .pager-left { order: 1; }
  .pager-right { order: 2; margin-left: auto; }
}

/* --- Larger screens --- */
@media (min-width: 48rem) {
  html { font-size: 18px; }
  .hero h1 { font-size: 3.2rem; }
}

/* --- Konto: Anmeldestatus, Formulare --- */
.userbar {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; justify-content: flex-end; align-items: center;
  padding: 0.4rem 1rem;
  font-family: var(--sans); font-size: 0.85rem;
}
.topbar .userbar { padding: 0; }
.userbar form { display: inline; margin: 0; }
.userbar .who { color: var(--ink); }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
}

.form-card {
  display: grid; gap: 0.8rem; max-width: 26rem;
  padding: 1rem; background: var(--bg-soft);
  border: 1px solid #3a2f24; border-radius: 0.4rem;
  font-family: var(--sans);
}
.field { display: grid; gap: 0.25rem; font-size: 0.9rem; }
.field input, .field textarea {
  padding: 0.5rem 0.6rem; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid #4a3d2d; border-radius: 0.3rem;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); }
.check { font-size: 0.9rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forgot { margin-top: 1rem; font-family: var(--sans); font-size: 0.9rem; }
.forgot summary { cursor: pointer; color: var(--accent); }
.avatars { margin: 0; padding: 0.6rem; border: 1px solid #4a3d2d; border-radius: 0.3rem; }
.avatars legend { padding: 0 0.3rem; font-size: 0.9rem; }
/* Raster aus gleich großen Kacheln; die Spalten füllen die Breite gleichmäßig. */
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.4rem; }
.avatar-tile { display: block; position: relative; cursor: pointer; }
/* Das Radio bleibt für Tastatur und Screenreader erhalten, ist aber unsichtbar. */
.avatar-tile input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.avatar-face {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; width: 100%;
  font-size: 1.5rem; line-height: 1; color: var(--muted);
  background: var(--bg); border: 1px solid #4a3d2d; border-radius: 0.4rem;
  transition: border-color 0.12s, background 0.12s;
}
.avatar-tile:hover .avatar-face { border-color: var(--accent); }
.avatar-tile input:checked + .avatar-face {
  border-color: var(--accent); background: #3a2f1c; box-shadow: 0 0 0 2px var(--accent);
}
.avatar-tile input:focus-visible + .avatar-face { outline: 2px solid var(--ink); outline-offset: 2px; }
.msg { max-width: 26rem; padding: 0.6rem 0.8rem; border-radius: 0.3rem; font-family: var(--sans); font-size: 0.9rem; }
.msg.error { background: #3a1c1a; border: 1px solid #8a3b34; }
.msg.notice { background: #1f2d1c; border: 1px solid #4c7a43; }

/* --- Umfrage --- */
.survey { display: grid; gap: 1.1rem; font-family: var(--sans); }
.survey h2 { margin: 1rem 0 0; font-size: 1.1rem; }
.survey .q { margin: 0; padding: 0; border: 0; min-width: 0; }
.survey legend { padding: 0; margin-bottom: 0.4rem; font-size: 0.95rem; }
.survey textarea { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: block; padding: 0.4rem 0.8rem; font-size: 0.9rem;
  background: var(--bg); border: 1px solid #4a3d2d; border-radius: 0.4rem;
}
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Skalen: gleich breite Felder in einer Reihe */
.chips.scale .chip span { min-width: 2.4rem; text-align: center; padding: 0.4rem 0; }
.scale-ends { display: flex; justify-content: space-between; margin: 0.2rem 0 0; color: var(--muted); font-size: 0.8rem; }
.survey-past { margin: 0 0 0.6rem; padding: 0.4rem 0.8rem; background: var(--bg-soft); border: 1px solid #3a2f24; border-radius: 0.4rem; font-family: var(--sans); font-size: 0.9rem; }
.survey-past summary { cursor: pointer; }
.survey-past dt { margin-top: 0.6rem; color: var(--muted); }
.survey-past dd { margin: 0.1rem 0 0; white-space: pre-wrap; }

/* --- Teilen (Social-Media-Post-Seite) --- */
.topbar .share-link {
  font-family: var(--sans); font-size: 0.85rem; text-decoration: none;
  color: var(--accent); white-space: nowrap;
}
.topbar .share-link:hover { text-decoration: underline; }
.share-hint { color: var(--muted); font-family: var(--sans); font-size: 0.85rem; }
.share-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; }
.share-btn { cursor: pointer; }
#post-text { width: 100%; font-family: var(--sans); }