/* Entwurf A – Archiv: warmes Schwarz, Messing und römische Kapitälchen, angelehnt an die Cover-Typografie. */

:root {
  --grund: #0e0c0a;
  --flaeche: #1a1612;
  --text: #ece4d4;
  --leise: #a89c88;
  --gold: #c9a45c;
  --akzent: var(--gold);
  --linie: rgb(201 164 92 / .22);
  --kopf-grund: rgb(14 12 10 / .86);
  --ansicht-grund: rgb(10 9 7 / .97);
  --schrift-titel: "Cinzel", "Trajan Pro", Georgia, serif;
  --schrift-text: "Source Serif 4", Georgia, serif; /* seit 08.10.2026 statt EB Garamond (Punkt 72) */
  --radius: 2px;
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cpath d='M0 7h100M140 7h100' stroke='%23c9a45c' stroke-width='1'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z' fill='%23c9a45c'/%3E%3Ccircle cx='106' cy='7' r='1.6' fill='%23c9a45c'/%3E%3Ccircle cx='134' cy='7' r='1.6' fill='%23c9a45c'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* Schrift größer (Wunsch Alex 2026-10-07): alle rem-Angaben wachsen mit, EB Garamond läuft klein. */
html { font-size: 112.5%; }

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgb(201 164 92 / .12), transparent 70%),
    var(--grund);
  background-attachment: fixed;
  font-size: 20px;
}

.marke { color: var(--gold); }

.serien-nav a { font-size: .85rem; font-weight: 600; letter-spacing: .05em; }

/* Ornament unter den Überschriften */
.start__intro::after,
.serie__kopf::after {
  content: "";
  display: block;
  width: 240px;
  max-width: 70%;
  height: 14px;
  margin: 26px auto 0;
  background: var(--ornament) center / contain no-repeat;
}

.start__titel {
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 2px 40px rgb(201 164 92 / .3);
}

.start__vorzeile { font-family: var(--schrift-titel); }

/* Serienkacheln */
.serien-kachel__bild {
  border: 1px solid var(--linie);
  box-shadow: 0 24px 50px rgb(0 0 0 / .65);
  transition: transform .35s ease, box-shadow .35s ease;
}

.serien-kachel:hover .serien-kachel__bild,
.serien-kachel:focus-visible .serien-kachel__bild {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px rgb(0 0 0 / .7),
    0 0 0 1px var(--akzent),
    0 0 48px color-mix(in srgb, var(--akzent) 40%, transparent);
}

.serien-kachel:focus-visible { outline: none; }
.serien-kachel__text { text-align: center; }
.serien-kachel__name { font-weight: 700; letter-spacing: .03em; }
.serien-kachel__anzahl { font-weight: 600; letter-spacing: .1em; }

/* Kacheln im Raster */
.kachel__bild { box-shadow: 0 12px 26px rgb(0 0 0 / .55); }

.kachel:hover .kachel__bild,
.kachel:focus-visible .kachel__bild {
  box-shadow: 0 18px 34px rgb(0 0 0 / .65), 0 0 28px color-mix(in srgb, var(--akzent) 30%, transparent);
}

.kachel__nr { font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.kachel__titel { font-size: 1rem; }

/* Serienseite */
.serie__name { color: var(--akzent); font-weight: 700; letter-spacing: .04em; }
.serie__anzahl { font-weight: 600; letter-spacing: .1em; }

.werkzeuge { background: rgb(14 12 10 / .94); }
.sprung, .sortierung { font-size: .82rem; font-weight: 600; letter-spacing: .05em; }

/* Großansicht */
.ansicht__text {
  padding-left: 32px;
  border-left: 1px solid var(--linie);
}

.ansicht__serie { font-weight: 600; letter-spacing: .1em; }
.ansicht__titel { color: var(--akzent); font-weight: 700; }

.ansicht__tagline { color: var(--text); font-size: 1.15rem; }

.ansicht__beschreibung::before {
  content: "";
  display: block;
  width: 160px;
  height: 12px;
  margin-bottom: 18px;
  background: var(--ornament) left center / contain no-repeat;
  opacity: .8;
}

.ansicht__figur img { box-shadow: 0 30px 80px rgb(0 0 0 / .8); }

@media (max-width: 820px) {
  .ansicht__text { padding-left: 0; border-left: 0; }
}

/* Kurzbeschreibung gut lesbar */
.ansicht__beschreibung { color: #ddd3c2; font-size: 1.12rem; line-height: 1.6; }