/* ⭐ Newsreader, selbst gehostet — Richtung 1a aus dem Entwurf vom 28.08.2026.
   NUR fuer Ueberschriften, Wortmarke und den Held; der Fliesstext bleibt auf
   dem Systemstapel, weil dort Lesbarkeit vor Charakter geht (Publikum 50+).
   ⚠️ Kartentitel und h3 bleiben bewusst Systemschrift: eine so feine Serife
   auf 1rem und schwarzem Grund wird duenn und grau.
   Zugeschnitten von schrift_bauen.py: opsz festgenagelt, Zeichensatz gekuerzt
   — 272 KB Google-Auslieferung werden so 72 KB. */
@font-face{font-family:Newsreader;font-style:normal;font-weight:400 600;
  font-display:swap;src:url(/assets/newsreader.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400 600;
  font-display:swap;src:url(/assets/newsreader-italic.woff2) format("woff2")}
:root{
  --grund:#0a0a0b; --feld:#141418; --kante:#26262c;
  --text:#f3f3f1; --leise:#9aa1a9; --gold:#ebc76b;
  --breite:1040px;
  --serif:Newsreader,Georgia,"Iowan Old Style","Times New Roman",serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font-family:"Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 20px}
header.kopf{border-bottom:1px solid var(--kante);padding:18px 0}
header.kopf .huelle{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.marke{font-family:var(--serif);font-weight:500;font-size:1.18rem;
  letter-spacing:.005em;color:var(--text);
  display:inline-flex;align-items:center;gap:11px}
.marke img{height:34px;width:auto}
.marke:hover{text-decoration:none}
nav a{color:var(--leise);font-size:.95rem;margin-right:18px}
nav a:hover{color:var(--gold)}
/* Die Sprachwahl steht abgesetzt am Ende - sie ist kein Menuepunkt, sondern
   der Wechsel in einen anderen Zweig mit anderen Buechern. */
.pack-band{display:flex;align-items:center;justify-content:space-between;
 gap:26px;flex-wrap:wrap;margin:38px 0 8px;padding:24px 26px;
 background:var(--feld);border:1px solid var(--kante);border-radius:14px}
.pack-band h2{margin:0 0 6px}
.pack-band p{margin:0}
nav a.nav-pack{color:var(--grund);background:var(--gold);border-radius:999px;
 padding:7px 15px;font-weight:600;font-size:.88rem;white-space:nowrap;
 margin-right:22px}
nav a.nav-pack:hover{color:var(--grund);filter:brightness(1.12)}
nav a.sprachwahl{margin-right:0;padding-left:15px;border-left:1px solid var(--kante);
 letter-spacing:.04em;font-size:.86rem;text-transform:uppercase}
/* Die Malseite ist der Grund, warum jemand die Seite geoeffnet hat - sie
   bekommt die volle Spaltenbreite und einen Rahmen, damit das Weiss des
   Blattes nicht in den Seitengrund laeuft. */
.malseite{max-width:100%;height:auto;display:block;border-radius:10px;
 border:1px solid var(--kante);background:#fff}
h1{font-family:var(--serif);font-weight:500;
  font-size:clamp(2.1rem,4.6vw,3.75rem);line-height:1.08;
  letter-spacing:-.012em;margin:.2em 0 .3em;text-wrap:balance}
/* ⚠️ Die Kursive traegt EIN Wort, nicht ganze Saetze - so steht es in der
   Vorlage, und laenger getragen wird sie auf Schwarz unruhig. */
h1 em{font-style:italic;font-weight:500}
h2{font-family:var(--serif);font-weight:500;font-size:1.65rem;line-height:1.2;
  letter-spacing:0;margin:2.2em 0 .6em;text-wrap:balance}
p{max-width:66ch}
/* Der Vorspann wird ueberflogen, nicht gelesen - deshalb schmaler und eine
   Spur groesser als der Fliesstext. */
.lead{font-size:1.0625rem;line-height:1.6;color:var(--leise);max-width:60ch}
.leise{color:var(--leise)}
/* --- Farbschluessel im Held -------------------------------------------- */
/* ⭐ Der Kern der Richtung 1a: hier stand ein DEKORATIVES Farbband aus jeder
   zweiten Palettenfarbe. Jetzt stehen dort die zwoelf Farben, die das Motiv
   darunter wirklich braucht, mit ihren Symbolen - aus Schmuck wird die
   Gebrauchsanweisung. */
.band{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  margin:26px 0 10px}
.band i{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-style:normal;font-size:.82rem;
  font-weight:700;font-family:var(--serif);
  border:1px solid rgba(255,255,255,.16)}
.band-text{margin:0 auto;font-size:.9rem;color:var(--leise);max-width:52ch}
.held{padding:56px 0 12px;text-align:center}
.held p{margin-left:auto;margin-right:auto}
.knopf{display:inline-block;padding:13px 26px;border-radius:6px;
  background:var(--gold);color:#141110;font-weight:700;border:none;
  margin:6px 8px 6px 0}
.knopf:hover{text-decoration:none;filter:brightness(1.08)}
.knopf.leer{background:none;color:var(--gold);border:1.5px solid var(--gold)}
.gitter{display:grid;gap:24px;margin:28px 0;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.karte{background:var(--feld);border:1px solid var(--kante);border-radius:10px;
  overflow:hidden;display:block;color:var(--text)}
.karte:hover{border-color:var(--gold);text-decoration:none}
.karte img{aspect-ratio:8.5/11;object-fit:cover;object-position:center;
  width:100%}
/* Kachel-Ueberblendung: fertiges Bild liegt unten, das leere Punkteblatt
   darueber und wird beim Zeigen eingeblendet. */
.karte-bild{position:relative;display:block}
.karte-roh{position:absolute;inset:0;height:100%;opacity:0;
  transition:opacity .4s ease}
.karte:hover .karte-roh,.karte:focus-visible .karte-roh{opacity:1}
.karte .txt{padding:12px 14px 15px}
.karte .txt b{display:block;font-size:1.02rem}
.karte .txt span{color:var(--leise);font-size:.86rem}
.marke-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:7px;vertical-align:middle}
.zwei{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;margin:30px 0}
@media(max-width:760px){.zwei{grid-template-columns:1fr}}
/* --- Buchkopf: das gewaehlte Buch gross ------------------------------- */
/* ⚠️ Ohne dieses Bild zeigte die Buchseite nur Text und drei Gratisseiten —
   wer rechts im Regal ein Buch anwaehlt, bekam es nie zu sehen. */
.buchkopf{display:grid;gap:34px;align-items:start;margin:26px 0 4px;
  grid-template-columns:minmax(0,286px) minmax(0,1fr)}
.buchkopf-bild{display:block;width:100%;border-radius:8px;
  border:1px solid var(--kante);box-shadow:0 20px 46px rgba(0,0,0,.55)}
.buchkopf-text>:first-child{margin-top:0}
.buchkopf h1{margin-top:4px}
@media(max-width:760px){
  .buchkopf{grid-template-columns:1fr;gap:22px}
  .buchkopf-bild{max-width:250px}
}
.rahmen{border:1px solid var(--kante);border-radius:10px;overflow:hidden;
  background:#000}
.schluessel{display:grid;gap:10px 18px;margin:22px 0;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.schluessel div{display:flex;align-items:center;gap:10px;font-size:.95rem}
.schluessel i{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  border:1px solid #55555c;display:grid;place-items:center;
  font-size:.78rem;font-weight:700;font-style:normal}
/* --- Punktefeld ------------------------------------------------------- */
.dots{margin:0}
.dots canvas{width:100%;display:none;background:#0d0d10;border-radius:10px;
  border:1px solid var(--kante)}
.dots.dots-bereit canvas{display:block}
.dots.dots-bereit .dots-ersatz{display:none}
.dots.dots-aus canvas{display:none}
.dots-key{display:grid;gap:7px;margin:14px 0 6px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.dots-stift{display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--feld);border:1px solid var(--kante);border-radius:7px;
  padding:6px 8px;color:var(--text);font:inherit;font-size:.86rem;
  text-align:left;transition:border-color .15s,opacity .2s}
.dots-stift i{width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  background:var(--f);border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;font-style:normal;font-size:.66rem;
  font-weight:700;color:#141110;mix-blend-mode:normal}
.dots-stift:hover{border-color:var(--gold)}
.dots-stift.fertig{opacity:.4;cursor:default}
.dots-stift.fertig:hover{border-color:var(--kante)}
.dots-leiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:10px 0 0;color:var(--leise);font-size:.9rem;max-width:none}
.knopf.klein{padding:7px 15px;font-size:.85rem;margin:0}
.dots-fertig .dots-status b{color:var(--gold)}
.held-feld{max-width:430px;margin:34px auto 0}
.held-feld p{margin:12px auto 0;font-size:.92rem}
footer{border-top:1px solid var(--kante);margin-top:64px;padding:30px 0 46px;
  color:var(--leise);font-size:.9rem}
footer a{color:var(--leise)}
/* --- Buchregal (Seitenspalte) ----------------------------------------- */
.seite{display:grid;gap:44px;align-items:start;
  grid-template-columns:minmax(0,1fr) 212px}
/* ⚠️ BEIDE Kinder brauchen min-width:0. Ohne das am Regal bemisst das Raster
   die Spalte nach dem MINDESTINHALT des liegenden Regals (6 x 104 px = 684)
   — und die ganze Seite lief auf dem Handy waagerecht ueber. Gemessen bei
   375 px: .seite 320 breit, .inhalt trotzdem 684. */
.seite>*{min-width:0}
.regal{position:sticky;top:22px;border-left:1px solid var(--kante);
  padding-left:22px}
.regal-kopf{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--leise);margin:0 0 14px;font-weight:700}
.regal-reihe{display:grid;gap:14px 12px;grid-template-columns:1fr 1fr}
.regal-buch{display:block;color:var(--leise);font-size:.72rem;line-height:1.3}
.regal-buch img{aspect-ratio:8.5/11;object-fit:cover;border-radius:4px;
  border:1px solid var(--kante);width:100%;
  transition:transform .18s ease,border-color .18s ease}
.regal-buch span{display:block;margin-top:6px}
a.regal-buch:hover{text-decoration:none;color:var(--text)}
a.regal-buch:hover img{transform:translateY(-3px);border-color:var(--gold)}
.regal-buch.hier{color:var(--gold)}
.regal-buch.hier img{border-color:var(--gold)}
.regal-fuss{margin:16px 0 0;font-size:.8rem}
/* Unter 900 px wird aus der Spalte ein liegendes Regal unter dem Inhalt:
   eine 212-px-Spalte neben 375 px Handybreite waere unlesbar. */
@media(max-width:900px){
  .seite{grid-template-columns:1fr;gap:12px}
  .regal{position:static;border-left:none;padding-left:0;
    border-top:1px solid var(--kante);padding-top:26px;margin-top:34px}
  .regal-reihe{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:104px;overflow-x:auto;padding-bottom:10px;
    scroll-snap-type:x proximity}
  .regal-reihe>*{scroll-snap-align:start}
}
/* --- Soziale Verweise und Pinterest ----------------------------------- */
.sozial-reihe{display:flex;gap:14px;margin:14px 0 0}
.sozial{display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--kante);color:var(--leise);
  transition:color .15s,border-color .15s}
.sozial:hover{color:var(--gold);border-color:var(--gold)}
.knopf.pin{display:inline-flex;align-items:center;gap:9px;background:none;
  color:var(--gold);border:1.5px solid var(--gold)}
.knopf.pin svg{width:18px;height:18px}
/* Der Pfeil sagt „das oeffnet sich woanders" - fuer alle, die ihn sehen. */
.raus{font-size:.82em;margin-left:.42em;opacity:.7}
/* ... und fuer alle anderen steht es im Text, nur eben unsichtbar. */
.nurlese{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* --- Handy ------------------------------------------------------------- */
/* Gemessen, nicht geschaetzt: bei 375 px war der Kopf 147 px hoch (jede
   zweite Zeile Navigation), Knoepfe nur 33 px und damit unter der
   44-px-Grenze fuer Finger, und die Kachelspalte so breit, dass 18 Kacheln
   eine 3.700-px-Seite ergaben. */
@media(max-width:560px){
  .huelle{padding:0 16px}
  header.kopf{padding:12px 0}
  header.kopf .huelle{gap:8px}
  .marke{font-size:.95rem;gap:8px}
  .marke img{height:26px}
  /* Navigation in EINER Zeile, notfalls wischbar - statt zwei Zeilen, die
     ein Fuenftel des Bildschirms fressen. */
  nav{display:flex;gap:18px;overflow-x:auto;width:100%;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{display:none}
  /* 8 px oben und unten machen aus einer 28-px-Textzeile eine 44-px-Flaeche,
     die man mit dem Daumen trifft. */
  nav a{margin-right:0;white-space:nowrap;padding:10px 0}
  .held{padding:30px 0 6px}
  h2{margin:1.7em 0 .5em}
  /* Zwei Kacheln nebeneinander: 18 einspaltige Kacheln sind eine Tapetenrolle */
  .gitter{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
  .karte .txt{padding:9px 10px 11px}
  .karte .txt b{font-size:.9rem}
  .karte .txt span{font-size:.78rem}
  /* Fingerflaechen: mindestens 46 px hoch, Hauptknopf ueber die volle Breite */
  .knopf{min-height:46px;display:flex;align-items:center;justify-content:center;
    width:100%;margin:8px 0 0}
  .knopf.klein{width:auto;display:inline-flex;min-height:38px;margin:0}
  .dots-stift{min-height:46px}
  .dots-key{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .sozial{width:46px;height:46px}
}
/* --- Seitenuebergaenge ------------------------------------------------- */
/* Drei Zeilen: die Seiten blenden ineinander statt umzuspringen. Browser,
   die das nicht koennen, ignorieren die Regel - es gibt keinen Rueckfall zu
   bauen und kein Skript zu laden. Der Kopf bekommt einen eigenen Namen,
   damit er beim Wechsel stehen bleibt statt mitzublinken. */
@view-transition{navigation:auto}
header.kopf{view-transition-name:kopf}
/* ⚠️ Wer im Betriebssystem "weniger Bewegung" eingestellt hat, bekommt
   nichts davon - Zielgruppe 50+, und Bewegung ist fuer manche ein echtes
   Problem, nicht eine Geschmacksfrage. */
@media(prefers-reduced-motion:reduce){
  .karte-roh{transition:none}
  ::view-transition-group(*),::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}

.inside{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:18px;margin:26px 0}
.inside figure{margin:0;text-align:center}
.inside img{width:100%;height:auto;border-radius:8px;background:var(--grund);
  display:block}
.inside figcaption{font-size:.78rem;line-height:1.35;margin-top:7px}
.inside figcaption b{display:block;color:var(--text)}
.inside figcaption span{color:var(--leise);display:block}
.inside figcaption a{display:block;margin-top:3px;color:var(--gold)}
.inside .frei img{outline:2px solid var(--gold);outline-offset:2px}
.zahlen-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:14px;margin:24px 0}
.zahlen-kopf div{background:var(--feld);border:1px solid var(--kante);
  border-radius:10px;padding:14px;text-align:center}
.zahlen-kopf b{display:block;font-size:1.5rem;color:var(--gold);
  font-variant-numeric:tabular-nums}
.zahlen-kopf span{font-size:.78rem;color:var(--leise)}
.zahlen-umschlag{overflow-x:auto}
table.zahlen{border-collapse:collapse;width:100%;font-size:.9rem;
  font-variant-numeric:tabular-nums}
table.zahlen th,table.zahlen td{padding:7px 10px;text-align:left;
  border-bottom:1px solid var(--kante)}
table.zahlen th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--leise)}
table.zahlen .r{text-align:right}
table.zahlen tbody tr:hover{background:var(--feld)}