/* Errorgate Productions — ein Stylesheet, keine Abhängigkeiten, keine externen Fonts */

:root {
  --grund:      #0c0d10;
  --grund-hoch: #14161b;
  --linie:      #24272e;
  --schrift:    #e8e6e1;
  --gedämpft:   #9a9ba1;
  --akzent:     #d8a24a;
  --breite:     1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 400 17px/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

main { max-width: var(--breite); margin: 0 auto; padding: 0 24px 96px; }

/* ---------- Kopf ---------- */
.kopf {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 28px 24px 20px;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.marke { text-decoration: none; display: flex; align-items: baseline; gap: 9px; }
.marke-name {
  font: 700 20px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .22em;
}
.marke-zusatz {
  font: 400 12px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gedämpft);
}
.kopf nav { display: flex; gap: 26px; }
.kopf nav a {
  font: 500 13px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedämpft); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.kopf nav a:hover, .kopf nav a.aktiv { color: var(--schrift); border-color: var(--akzent); }

/* ---------- Startseite ---------- */
.held { padding: 72px 0 64px; max-width: 760px; }
.held h1 {
  margin: 0 0 22px;
  font-size: clamp(30px, 5.2vw, 50px);
  line-height: 1.15; font-weight: 400; letter-spacing: -.015em;
}
.held-text { margin: 0; color: var(--gedämpft); font-size: 18px; max-width: 620px; }

.reihe { padding: 52px 0; border-top: 1px solid var(--linie); }
.reihe-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 34px; flex-wrap: wrap;
}
.reihe-genre {
  display: block; margin-bottom: 9px;
  font: 600 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: var(--akzent);
}
.reihe-kopf h2 { margin: 0 0 10px; font-size: 30px; font-weight: 400; }
.reihe-kopf h2 a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s; }
.reihe-kopf h2 a:hover { border-color: var(--akzent); }
.reihe-kurz { margin: 0; color: var(--gedämpft); max-width: 560px; }
.reihe-zahl {
  font: 500 12px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gedämpft); white-space: nowrap; padding-top: 6px;
}

/* ---------- Regal ---------- */
.regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 30px; }
.karte { text-decoration: none; display: block; }
.karte img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  background: var(--grund-hoch);
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
  transition: transform .22s ease, box-shadow .22s ease;
}
.karte:hover img { transform: translateY(-5px); box-shadow: 0 10px 26px rgba(0,0,0,.6); }
.karte-text { padding-top: 14px; display: flex; flex-direction: column; gap: 3px; }
.karte-reihe {
  font: 500 10.5px/1.4 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gedämpft);
}
.karte-titel { font-size: 17px; }
.karte-ut { font-size: 13.5px; color: var(--gedämpft); }

/* ---------- Reihenseite ---------- */
.reihe-seite { padding: 66px 0 40px; max-width: 700px; }
.reihe-seite h1 { margin: 0 0 18px; font-size: clamp(28px, 4.6vw, 42px); font-weight: 400; }
.reihe-lang { margin: 0 0 14px; color: var(--gedämpft); font-size: 17.5px; }
.reihe-autor { margin: 0; color: var(--gedämpft); font-style: italic; }

.baende { display: flex; flex-direction: column; gap: 42px; padding-top: 26px; }
.band {
  display: grid; grid-template-columns: 168px 1fr; gap: 30px;
  padding-top: 42px; border-top: 1px solid var(--linie); align-items: start;
}
.band img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 2px 14px rgba(0,0,0,.45); }
.band-nr {
  font: 600 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--akzent);
}
.band h3 { margin: 10px 0 12px; font-size: 25px; font-weight: 400; }
.band h3 a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s; }
.band h3 a:hover { border-color: var(--akzent); }
.band p { margin: 0 0 20px; color: var(--gedämpft); }

/* ---------- Buchseite ---------- */
.buchseite {
  display: grid; grid-template-columns: 320px 1fr; gap: 54px;
  padding: 60px 0 20px; align-items: start;
}
.buch-cover { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 6px 30px rgba(0,0,0,.6); }
.buch-reihe {
  font: 600 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--akzent);
  text-decoration: none;
}
.buch-info h1 { margin: 14px 0 6px; font-size: clamp(28px, 4.4vw, 40px); font-weight: 400; }
.buch-ut { margin: 0 0 10px; color: var(--gedämpft); font-size: 18px; }
.buch-autor { margin: 0 0 30px; color: var(--gedämpft); font-style: italic; }
.buch-text p { margin: 0 0 17px; }
.buch-text p:first-child { font-size: 19px; }
.buch-meta { margin: 24px 0 0; color: var(--gedämpft); font-size: 14.5px; }

.knopf {
  display: inline-block; margin-top: 6px;
  padding: 12px 26px; border: 1px solid var(--akzent); border-radius: 2px;
  color: var(--akzent); text-decoration: none;
  font: 600 12.5px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .13em; text-transform: uppercase;
  transition: background .18s, color .18s;
}
.knopf:hover { background: var(--akzent); color: var(--grund); }
.knopf.gross { margin-top: 26px; padding: 15px 34px; }

.weiter { padding: 62px 0 0; border-top: 1px solid var(--linie); margin-top: 56px; }
.weiter h2 {
  margin: 0 0 28px;
  font: 600 12px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gedämpft);
}

/* ---------- Rechtstexte aus dem Bestand ---------- */
main h1, main h2, main h3 { color: var(--schrift); }
main ul, main ol { color: var(--gedämpft); }
main table { border-collapse: collapse; width: 100%; overflow-x: auto; display: block; }
main td, main th { border: 1px solid var(--linie); padding: 8px 10px; text-align: left; }

/* ---------- Fuß ---------- */
footer {
  border-top: 1px solid var(--linie);
  max-width: var(--breite); margin: 0 auto; padding: 34px 24px 56px;
  color: var(--gedämpft); font-size: 14.5px;
}
footer p { margin: 0 0 7px; }
footer a { color: var(--gedämpft); }
.klein { font-size: 13px; }

/* ---------- schmale Bildschirme ---------- */
@media (max-width: 720px) {
  .buchseite { grid-template-columns: 1fr; gap: 30px; }
  .buch-cover { max-width: 240px; }
  .band { grid-template-columns: 110px 1fr; gap: 20px; }
  .regal { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px; }
  .held { padding: 48px 0 40px; }
}

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .karte:hover img { transform: none; }
}

/* ---------- Textseiten (Über, Impressum, Datenschutz, Autor) ---------- */
.text-seite { max-width: 720px; padding: 60px 0 20px; }
.text-seite h1 { margin: 12px 0 26px; font-size: clamp(28px, 4.4vw, 40px); font-weight: 400; }
.text-seite h2 {
  margin: 38px 0 12px;
  font: 600 12px/1.3 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--akzent);
}
.text-seite p { margin: 0 0 16px; }
.text-seite ul { margin: 0 0 16px; padding-left: 20px; }
.text-seite li { margin-bottom: 10px; }
.text-seite a { color: var(--akzent); text-decoration: none; border-bottom: 1px solid transparent; }
.text-seite a:hover { border-color: var(--akzent); }
.vorspann { font-size: 19px; color: var(--gedämpft); }

/* ---------- Angaben zum Buch ---------- */
.daten { padding: 46px 0 0; border-top: 1px solid var(--linie); margin-top: 48px; }
.daten h2 {
  margin: 0 0 22px;
  font: 600 12px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gedämpft);
}
.fakten { margin: 0; display: grid; grid-template-columns: 168px 1fr; gap: 12px 26px; }
.fakten dt {
  font: 500 12.5px/1.5 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gedämpft);
}
.fakten dd { margin: 0; }
.fakten a { color: var(--akzent); text-decoration: none; }

/* ---------- Band vor / zurück ---------- */
.blaettern {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 34px 0 0; margin-top: 44px; border-top: 1px solid var(--linie);
}
.blaettern a {
  text-decoration: none; display: flex; flex-direction: column; gap: 5px;
  max-width: 48%;
}
.blaettern a.vor { text-align: right; margin-left: auto; }
.blaettern span {
  font: 500 10.5px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gedämpft);
}
.blaettern a:hover { color: var(--akzent); }

@media (max-width: 720px) {
  .fakten { grid-template-columns: 1fr; gap: 4px 0; }
  .fakten dd { margin-bottom: 14px; }
  .blaettern a, .blaettern a.vor { max-width: 100%; text-align: left; margin-left: 0; }
}

/* ---------- 03.09.2026: Überlauf auf schmalen Schirmen, behoben ----------
   DIESE REGELN SIND WIRKSAM, NICHT KOSMETISCH. Ohne sie läuft die Seite unter
   ~520 px waagerecht über: die vierteilige Kopfnavigation passt nicht in eine
   Zeile, bricht ohne `flex-wrap` nicht um und schiebt das gesamte Dokument auf.
   Belegt am 03.09. durch einen Paarvergleich im selben Bild — zwei iframes mit
   exakt 390 px nebeneinander, links dieses Stylesheet ohne den folgenden Block,
   rechts mit ihm: links ist „DATENSCHUTZ“ abgeschnitten und der Fließtext läuft
   aus dem Rahmen, rechts nicht. Wer sie entfernt, holt den Fehler zurück.

   ZWEI MESSFALLEN, die auf dem Weg dorthin je einen Irrtum erzeugt haben:
   1. `chrome --headless --window-size=390,...` liefert KEINEN 390-px-Viewport.
      Chrome klemmt die Fensterbreite auf ~490 px; fotografiert wird dann ein
      390-px-Ausschnitt eines 490-px-Layouts. Für einen echten schmalen Viewport
      die Seite in ein `<iframe width=390>` legen. Kalibrieren mit einem Balken
      `width:50%` gegen einen mit fester Pixelbreite — füllen beide das Bild,
      misst die Probe gar nichts.
   2. Schwerer wog der zweite: Nach dem Einbau dieser Regeln wurde sauber bei
      390 px gemessen, kein Überlauf gefunden und daraus geschlossen, es habe nie
      einen gegeben. Das ist der reparierte Zustand als Beweis für den unreparierten.
      Ein Befund wird nur widerlegt, indem man die Reparatur ZURÜCKDREHT und die
      Probe wieder rot werden sieht — nicht dadurch, dass sie danach grün ist. */
.kopf nav { flex-wrap: wrap; row-gap: 10px; }

@media (max-width: 520px) {
  .kopf { padding: 20px 18px 14px; gap: 10px; }
  .kopf nav { gap: 18px; }
  main { padding: 0 18px 72px; }
  footer { padding: 28px 18px 48px; }
  .buch-cover { max-width: 200px; }
  .held h1 { font-size: clamp(26px, 8vw, 34px); }
}

/* Die Navigation bekommt auf schmalen Schirmen eine eigene volle Zeile — sonst
   behält sie als Flex-Element ihre Inhaltsbreite und schiebt die Seite auf. */
@media (max-width: 520px) {
  .kopf { flex-direction: column; align-items: flex-start; }
  .kopf nav { width: 100%; gap: 14px 16px; }
  .kopf nav a { font-size: 12px; letter-spacing: .06em; }
  main, .text-seite, .buch-info { overflow-wrap: break-word; }
}