/* =====================================================================================================
   Neues Design „Klar“ (19.10.2026) – Weiterentwicklung von Entwurf B nach der Rückmeldung seines Sohnes:
   mehr leerer Raum, Farben aus den eigenen Büchern statt Dunkel/Gold, keine dreifachen Überschriften,
   aufgeräumt wie alexanderronsdorf.com. Gilt für Start, Bücher, Kirche für Alle, Privates.
   Die Seite „Frauen in der Bibel“ bleibt bewusst im alten Design (_css/style.css).
   Farben: Grau-Grün aus „Frauen, vergebt uns!“, Ziegelrot aus „Warum musste Jesus sterben?“.
   Schrift: Inter (vor dem Livegang lokal in _fonts einbinden – DSGVO).
   Die dunkle Fassung liegt in _alt-dunkel-2026-10-19\.
   ===================================================================================================== */
/* Schrift lokal (DSGVO, 19.10.2026): Inter 5.0.8 von Fontsource, nur Latein */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../_fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../_fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../_fonts/inter-latin-600-normal.woff2) format('woff2')}
:root{
  --papier:#FFFFFF; --hell:#F4F5F3; --linie:#E2E5E2;
  --tinte:#1C1D1B; --text:#3B3F3C; --leise:#7A807C;
  --grau:#7F8F89; --grau-dunkel:#4E5C57; --rot:#B9533A; --rot-dunkel:#9A4330;
  --rand:clamp(22px,6vw,96px); --breit:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:90px}
body{font-family:'Inter',system-ui,sans-serif;font-weight:400;background:var(--papier);color:var(--text);font-size:clamp(17px,1.08vw,18.5px);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.innen{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{color:var(--tinte);font-weight:600;letter-spacing:-.02em;line-height:1.12}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Textlinks statt Knöpfe – ruhig, mit Pfeil */
.wege{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-size:16px;font-weight:500}
.wege a{text-decoration:none;color:var(--tinte);border-bottom:1.5px solid var(--rot);padding-bottom:2px;transition:color .2s}
.wege a:hover{color:var(--rot)}
.wege a.haupt{color:var(--rot)}

/* ---------------- Kopf ---------------- */
.kopf{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.kopf .marke{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;text-decoration:none;color:var(--tinte);white-space:nowrap}
.kopf nav.haupt{display:flex;gap:30px;font-size:15px}
.kopf nav.haupt a{text-decoration:none;color:var(--text)}
.kopf nav.haupt a:hover,.kopf nav.haupt a.aktiv{color:var(--rot)}
.kopf .rechts{display:flex;align-items:center;gap:10px}
.sprachwahl{position:relative}
.sprachwahl>button{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--linie);color:var(--tinte);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.sprachwahl>button:hover{border-color:var(--grau)}
.sprachwahl>button svg{width:16px;height:16px}
.sprachwahl .liste{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--linie);border-radius:12px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:0 6px;min-width:270px;box-shadow:0 18px 40px rgba(30,40,35,.12);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.sprachwahl.offen .liste{opacity:1;visibility:visible;transform:none}
.sprachwahl .liste a{padding:7px 10px;border-radius:8px;font-size:15px;text-decoration:none}
.sprachwahl .liste a:hover{background:var(--hell)}
.sprachwahl .liste a.aktiv{color:var(--rot);font-weight:600}
.sprachwahl .kurz{display:none}
.menueknopf{display:none;background:none;border:1px solid var(--linie);color:var(--tinte);border-radius:999px;padding:7px 15px;font:inherit;font-size:14px;cursor:pointer}
.vollmenue{position:fixed;inset:0;z-index:50;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--rand);transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.vollmenue.offen{transform:none}
.vollmenue a{font-size:clamp(30px,8vw,46px);font-weight:600;color:var(--tinte);text-decoration:none;letter-spacing:-.02em}
.vollmenue a.aktiv{color:var(--rot)}
.vollmenue .zu{position:absolute;top:20px;right:var(--rand);background:none;border:1px solid var(--linie);border-radius:999px;padding:7px 15px;font:inherit;font-size:14px;cursor:pointer}

/* ---------------- Einstieg: ein Satz ---------------- */
.einstieg{padding:clamp(70px,11vw,150px) 0 clamp(70px,9vw,120px)}
.einstieg h1,.einstieg .sprachen{max-width:1000px}
.einstieg h1{font-size:clamp(36px,4.8vw,70px);font-weight:600}
.einstieg h1 mark{background:linear-gradient(transparent 62%,rgba(185,83,58,.22) 62%);color:inherit;padding:0 .05em}
.einstieg .sprachen{margin-top:40px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--leise)}
.einstieg .sprachen b{color:var(--grau-dunkel);font-weight:600;margin-right:4px}
.einstieg .sprachen a{text-decoration:none}
.einstieg .sprachen a:hover{color:var(--rot)}
.stapel{position:relative;max-width:360px;justify-self:center}
.stapel img{animation:schweben 7s ease-in-out infinite;filter:drop-shadow(0 26px 30px rgba(30,40,35,.18))}
.stapel img+img{position:absolute;width:74%;left:-38%;top:20%;animation-duration:8s;animation-direction:reverse}
@keyframes schweben{50%{transform:translateY(-10px)}}

/* ---------------- Buch ---------------- */
.buch{padding:clamp(60px,8vw,110px) 0;border-top:1px solid var(--linie)}
.buch .gitter{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,7vw,110px);align-items:center}
.buch.gespiegelt .gitter{grid-template-columns:1.2fr .8fr}
.buch.gespiegelt .bild{order:2}
.buch .bild img{max-height:470px;margin:0 auto;filter:drop-shadow(0 26px 30px rgba(30,40,35,.16));transition:transform .5s}
.buch .bild a:hover img{transform:translateY(-6px) rotate(-1deg)}
.buch h2{font-size:clamp(32px,3.4vw,48px);margin-bottom:18px}
.buch p{max-width:560px;margin-bottom:12px}
.buch .meta{color:var(--leise);font-size:15px}

/* ---------------- Zitat ---------------- */
.zitat{background:var(--hell);padding:clamp(80px,11vw,150px) 0;text-align:center}
.zitat p{font-size:clamp(28px,3.4vw,48px);font-weight:500;color:var(--tinte);letter-spacing:-.02em;line-height:1.2}
.zitat p span{color:var(--rot)}
.zitat p small{display:inline-block;margin-top:.35em;font-size:.7em;font-weight:500;color:var(--tinte)}
.zitat cite{display:block;margin-top:18px;font-style:normal;color:var(--leise);font-size:15px}

/* ---------------- Neuigkeiten: schlichte Liste ---------------- */
.neues{padding:clamp(80px,10vw,140px) 0}
.neues h2,.themen h2{font-size:clamp(28px,2.6vw,38px);margin-bottom:34px}
.eintrag{display:grid;grid-template-columns:1fr 260px;gap:30px 60px;align-items:center;padding:34px 0;border-top:1px solid var(--linie)}
.eintrag:last-child{border-bottom:1px solid var(--linie)}
.eintrag.ohne-bild{grid-template-columns:1fr}
.eintrag h3{font-size:clamp(21px,1.7vw,25px);margin-bottom:8px}
.eintrag p{max-width:660px}
.eintrag .neu{color:var(--rot);font-weight:600;font-size:14px;margin-right:8px}
.eintrag img{width:100%}

/* ---------------- Themen ---------------- */
.themen{padding:0 0 clamp(90px,11vw,150px)}
.themen .reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.thema{text-decoration:none;display:block}
.thema .bild{aspect-ratio:4/5;overflow:hidden;background:var(--hell);margin-bottom:16px;display:grid;place-items:center}
.thema .bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.thema .bild img.buchbild{object-fit:contain;padding:18px;mix-blend-mode:multiply}
.thema:hover .bild img{transform:scale(1.04)}
.thema h3{font-size:20px;margin-bottom:4px}
.thema:hover h3{color:var(--rot)}
.thema p{font-size:15px;color:var(--leise)}

/* ---------------- Fuß ---------------- */
.fuss{background:var(--grau-dunkel);color:#E8ECE9;padding:clamp(60px,8vw,100px) 0 36px;font-size:15px}
.fuss .gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.fuss strong{display:block;color:#fff;font-size:18px;font-weight:600;margin-bottom:8px}
.fuss a{display:block;text-decoration:none;margin-bottom:4px;color:#E8ECE9}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .sprachen{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;opacity:.8}
.fuss .sprachen a{display:inline}

/* ---------------- Bewegung (sparsam) ---------------- */
.zeige{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.zeige.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.zeige{opacity:1;transform:none}}

/* ---------------- Handy ---------------- */
@media (max-width:960px){
  .kopf nav.haupt{display:none}.menueknopf{display:block}
  .einstieg .gitter,.buch .gitter,.buch.gespiegelt .gitter,.eintrag,.fuss .gitter{grid-template-columns:1fr}
  .buch.gespiegelt .bild{order:0}
  .stapel{max-width:240px}
  .themen .reihe{grid-template-columns:1fr 1fr}
  .eintrag img{max-width:320px}
}
@media (max-width:560px){
  .sprachwahl .lang{display:none}.sprachwahl .kurz{display:inline}
  .sprachwahl .liste{position:fixed;left:16px;right:16px;top:70px;min-width:0}
  .kopf .marke{font-size:12px}
  .buch .bild img{max-height:340px}
}

/* =====================================================================================================
   Pastell (19.10.2026, sein Wunsch: „ein bisschen mehr mit den Farben arbeiten, die pastellartig sind –
   Hebräer, Galater, Johannesbriefe, Epheser und Markus; die sollen meine Homepage charakterisieren“).
   Grundfarben aus den Umschlägen der GOOD-NEWS-Hefte, aufgehellt; die kräftige Form für Schrift/Linien.
   ===================================================================================================== */
:root{
  --hebraeer:#5A728A; --hebraeer-p:#DDE4EC; --hebraeer-m:#A9B8C8;
  --galater:#8C9714;  --galater-p:#EEF1D3;  --galater-m:#C9D17A;
  --johannes:#A25A72; --johannes-p:#F2DEE5; --johannes-m:#D3A3B3;
  --epheser:#4F8794;  --epheser-p:#DCEBEE;  --epheser-m:#9FC5CE;
  --markus:#AE6636;   --markus-p:#F5E2D4;   --markus-m:#DCAA88;
}
/* Einstieg: zarter Farbschleier und ein Band aus den fünf Heftfarben */
.einstieg{background:linear-gradient(115deg,var(--epheser-p) 0%,#fff 38%,#fff 62%,var(--johannes-p) 100%)}
.einstieg h1 mark{background:linear-gradient(transparent 60%,var(--markus-m) 60%)}
.farbband{display:flex;gap:6px;margin-top:38px;max-width:1000px}
.farbband span{flex:1;height:10px;border-radius:999px}
.farbband span:nth-child(1){background:var(--markus-m)}
.farbband span:nth-child(2){background:var(--epheser-m)}
.farbband span:nth-child(3){background:var(--galater-m)}
.farbband span:nth-child(4){background:var(--hebraeer-m)}
.farbband span:nth-child(5){background:var(--johannes-m)}
.einstieg .sprachen a{background:rgba(255,255,255,.7);border-radius:999px;padding:2px 10px}
/* Bücher auf Pastellflächen */
.buch{border-top:0}
#anfangen{background:var(--epheser-p)}
.buch.gespiegelt{background:var(--markus-p)}
.buch .meta{color:#5d6662}
/* Zitat auf Galater-Pastell */
.zitat{background:var(--galater-p)}
.zitat p span{color:var(--johannes)}
/* Neuigkeiten: farbige Kante je Eintrag */
.eintrag{border-top:0;border-left:6px solid var(--hebraeer-m);padding-left:28px;margin-bottom:18px;background:#fff}
.eintrag:nth-of-type(2){border-left-color:var(--johannes-m)}
.eintrag:nth-of-type(3){border-left-color:var(--galater-m)}
.eintrag:nth-of-type(4){border-left-color:var(--markus-m)}
.eintrag:last-child{border-bottom:0}
.neues{background:linear-gradient(180deg,#fff,var(--hebraeer-p))}
/* Themen: Pastellgrund je Kachel */
.themen{background:var(--hebraeer-p);padding-top:10px}
.thema:nth-child(1) .bild{background:var(--johannes-p)}
.thema:nth-child(2) .bild{background:var(--epheser-p)}
.thema:nth-child(1) h3{border-bottom:4px solid var(--johannes-m);display:inline-block}
.thema:nth-child(2) h3{border-bottom:4px solid var(--epheser-m);display:inline-block}
.thema:nth-child(3) h3{border-bottom:4px solid var(--galater-m);display:inline-block}
.thema:nth-child(4) h3{border-bottom:4px solid var(--markus-m);display:inline-block}
/* Fuß in Hebräer-Blau */
.fuss{background:var(--hebraeer)}
/* 19.10.2026: Pastell „ein kleines bisschen stärker“ (sein Wunsch) – Aufhellung 68 % statt ~85 %, Mitteltöne 42 % */
:root{
  --hebraeer-p:#CAD2DA; --hebraeer-m:#9FADBB;
  --galater-p:#DADEB4;  --galater-m:#BCC377;
  --johannes-p:#E1CAD2; --johannes-m:#C99FAD;
  --epheser-p:#C7D9DD;  --epheser-m:#99B9C1;
  --markus-p:#E5CEBF;   --markus-m:#D0A68A;
}

/* =====================================================================================================
   Unterseiten Bücher, Kirche für Alle, Privates (19.10.2026) – erzeugt von baue_unterseiten.py.
   Jeder Abschnitt (.regal) bekommt per style="--flaeche/--kante" eine der fünf Heftfarben.
   ===================================================================================================== */
.einstieg.klein{padding:clamp(56px,8vw,110px) 0 clamp(46px,6vw,80px)}
.einstieg.klein h1{font-size:clamp(40px,5vw,72px);margin-bottom:22px}
.einstieg.klein p{max-width:760px;margin-bottom:14px;font-size:clamp(17px,1.2vw,20px)}
.einstieg.klein p a{color:var(--rot)}
.rueckblick{display:inline-block;margin-left:6px;font-size:14px;font-weight:600;color:var(--johannes);border:1.5px solid var(--johannes-m);border-radius:999px;padding:1px 12px;vertical-align:middle}
.regal{background:var(--flaeche);padding:clamp(60px,8vw,110px) 0}
.regal h2{font-size:clamp(28px,2.8vw,40px);margin-bottom:14px}
.regal h2::after{content:"";display:block;width:64px;height:6px;border-radius:999px;background:var(--kante);margin-top:16px}
.regal .vorspann,.regal .text{max-width:760px;margin-bottom:12px}
.regal .text{margin-top:22px}
.regal .notiz{color:#5d6662;font-size:15px;margin-top:6px}
/* ein Buch */
.werk{display:grid;grid-template-columns:200px 1fr;gap:clamp(26px,4vw,60px);align-items:start;padding:34px 0;border-top:1px solid rgba(40,50,45,.12);margin-top:18px}
.werk.predigt{grid-template-columns:280px 1fr}
.werk .umschlag img{width:100%;max-height:300px;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s}
.werk .umschlag a:hover img{transform:translateY(-4px) rotate(-1deg)}
.werk h3{font-size:clamp(22px,1.8vw,27px);margin-bottom:4px}
.werk .meta{color:#5d6662;font-size:15px;margin-bottom:10px}
.werk p{max-width:680px}
.bezug{list-style:none;margin-top:20px;display:grid;gap:12px}
.bezug li span{display:block;font-size:14.5px;color:#5d6662}
.bezug a{font-weight:500;color:var(--tinte);text-decoration:none;border-bottom:1.5px solid var(--rot);padding-bottom:1px}
.bezug a:hover{color:var(--rot)}
.bezug li:first-child a{color:var(--rot)}
/* Bilder */
.erzaehlung{padding:0 0 clamp(60px,8vw,110px)}
img.breit{width:100%;border-radius:4px;margin:26px 0 10px}
.gross-text{font-size:clamp(19px,1.5vw,23px);max-width:820px;margin-top:30px;color:var(--tinte)}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:30px}
.galerie figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;transition:transform .6s}
.galerie.quadrat figure img{aspect-ratio:1}
.galerie figure a{display:block;overflow:hidden;border-radius:3px;cursor:zoom-in}
.galerie figure a:hover img{transform:scale(1.04)}
.galerie figcaption{font-size:14px;color:#5d6662;margin-top:7px}
.merksatz{font-size:clamp(30px,3.6vw,52px);font-weight:600;color:var(--johannes);letter-spacing:-.02em;line-height:1.15;margin:40px 0}
/* Privates */
.person{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.person .portraet{width:100%;border-radius:4px}
.person h3{font-size:22px;margin:30px 0 8px}
.person p{max-width:640px}
.kontakt .text{max-width:640px;margin:18px auto 0;color:var(--text)}
.kontakt .wege{justify-content:center}
/* Lupe für Galerien */
.lupe{position:fixed;inset:0;z-index:60;background:rgba(20,24,22,.9);display:grid;place-items:center;padding:4vmin;cursor:zoom-out}
.lupe[hidden]{display:none}
.lupe img{max-width:100%;max-height:92vh;border-radius:3px}
@media (max-width:960px){
  .werk,.werk.predigt,.person{grid-template-columns:1fr}
  .werk .umschlag{max-width:200px}.werk.predigt .umschlag{max-width:300px}
  .person .portraet{max-width:320px}
}
.zitat.kontakt{background:var(--johannes-p)}
@media (min-width:961px){.galerie.fuenf{grid-template-columns:repeat(5,1fr)}}

/* =====================================================================================================
   Sprachen (20.10.2026): alle 14 Sprachen im neuen Design (baue_unterseiten.py sprache()).
   ===================================================================================================== */
/* 3D-Buchbilder der Sprachen sind JPG mit weißem Grund: kein Schatten, auf die Pastellfläche „multiplizieren“ */
.buch .bild img.jpg3d{filter:none;mix-blend-mode:multiply;max-height:440px}
/* Inter (lokal) hat nur lateinische Buchstaben ohne Türkisch – sonst die Systemschrift, damit nichts gemischt wird */
html:lang(tr) body,html:lang(ru) body,html:lang(ar) body,html:lang(fa) body,html:lang(zh) body,html:lang(ja) body,html:lang(hi) body,html:lang(ta) body{font-family:system-ui,'Segoe UI',Roboto,'Noto Sans',sans-serif}
html:lang(ar) h1,html:lang(fa) h1,html:lang(ar) h2,html:lang(fa) h2,html:lang(hi) h1,html:lang(ta) h1{letter-spacing:0;line-height:1.35}
html:lang(zh) h1,html:lang(ja) h1,html:lang(ta) h1{font-size:clamp(30px,3.8vw,56px)}
/* Rechts-nach-links (ar, fa): Kanten und Abstände spiegeln */
[dir=rtl] .eintrag{border-left:0;border-right:6px solid var(--hebraeer-m);padding-left:0;padding-right:28px}
[dir=rtl] .eintrag:nth-of-type(2){border-right-color:var(--johannes-m)}
[dir=rtl] .eintrag:nth-of-type(3){border-right-color:var(--galater-m)}
[dir=rtl] .eintrag .neu{margin-right:0;margin-left:8px}
[dir=rtl] .einstieg .sprachen b{margin-right:0;margin-left:4px}
[dir=rtl] .sprachwahl .liste{right:auto;left:0}
[dir=rtl] .vollmenue .zu{right:auto;left:var(--rand)}
[dir=rtl] .rueckblick{margin-left:0;margin-right:6px}
[dir=rtl] .einstieg{background:linear-gradient(245deg,var(--epheser-p) 0%,#fff 38%,#fff 62%,var(--johannes-p) 100%)}
/* 20.10.2026 (sein Wunsch): Porträt kleiner anzeigen – die Vorlage ist weich, klein wirkt sie schärfer */
.person{grid-template-columns:minmax(160px,200px) 1fr}
@media (max-width:960px){.person .portraet{max-width:200px}}

/* 21.10.2026 (sein Wunsch): Sprachen mit eigener Schrift tragen den Namen in lateinischen Buchstaben in Klammern */
.lat{opacity:.75;font-size:.92em;white-space:nowrap}

/* =====================================================================================================
   21.10.2026 – von ihm freigegeben (sein Wunsch): weniger Farben, dafür kräftiger – „peppig“ wie die GOOD-NEWS-Hefte,
   nicht so stark Pastell. Nur ZWEI Heftfarben in voller Stärke: Markus-Orange und Epheser-Petrol.
   Alles andere: Weiß und ein warmes Hellgrau. Wird NACH neu.css geladen und überschreibt nur Farben.
   ===================================================================================================== */
:root{
  --orange:#C8632A; --orange-dunkel:#A54F1F; --orange-hell:#FBEDE4;
  --petrol:#2C7F8C; --petrol-dunkel:#1F5F69;
  --grund:#F6F3EE;                                   /* warmes Hellgrau statt Pastellflächen */
  --rot:var(--orange); --rot-dunkel:var(--orange-dunkel);
  /* die fünf Pastell-Paare auf zwei Farben zurückführen */
  --hebraeer:var(--petrol); --epheser:var(--petrol); --markus:var(--orange); --johannes:var(--orange); --galater:var(--orange);
  --hebraeer-p:#fff; --epheser-p:var(--grund); --markus-p:#fff; --johannes-p:var(--grund); --galater-p:#fff;
  --hebraeer-m:var(--petrol); --epheser-m:var(--petrol); --markus-m:var(--orange); --johannes-m:var(--orange); --galater-m:var(--orange);
}
/* Einstieg: weiß, kräftige Unterstreichung, Band nur noch zweifarbig */
.einstieg{background:#fff}
.einstieg h1 mark{background:linear-gradient(transparent 80%,var(--orange) 80%,var(--orange) 92%,transparent 92%)}
.farbband span{background:var(--petrol)!important}
.farbband span:nth-child(odd){background:var(--orange)!important}
.farbband span:nth-child(n+3){display:none}
.farbband{max-width:240px}
/* erstes Buch auf vollem Petrol – wie ein Heftumschlag */
#anfangen{background:var(--petrol);color:#fff}
#anfangen h2,#anfangen p,#anfangen .meta{color:#fff}
#anfangen .meta{opacity:.85}
#anfangen a{color:#fff}
#anfangen .bezug a,#anfangen p a{border-bottom-color:#fff}
.buch.gespiegelt{background:#fff}
/* Zitat auf vollem Orange */
.zitat{background:var(--orange)}
.zitat p,.zitat p small{color:#fff}
.zitat p span{color:#FFE2CF}
.zitat cite{color:rgba(255,255,255,.85)}
/* Neuigkeiten: weiß, Kanten abwechselnd Orange/Petrol */
.neues{background:#fff}
.eintrag{border-left-color:var(--orange)!important}
.eintrag:nth-of-type(even){border-left-color:var(--petrol)!important}
/* Themen auf warmem Grau, Unterstreichung zweifarbig */
.themen{background:var(--grund)}
.thema .bild{background:#fff!important}
.thema:nth-child(odd) h3{border-bottom-color:var(--orange)!important}
.thema:nth-child(even) h3{border-bottom-color:var(--petrol)!important}
/* Fuß in Petrol-dunkel */
.fuss{background:var(--petrol-dunkel)}
/* Unterseiten: Regale abwechselnd Weiß / warmes Grau, Kante Orange bzw. Petrol */
.rueckblick{color:var(--orange);border-color:var(--orange)}
.regal .notiz,.werk .meta,.bezug li span,.buch .meta{color:#5d6662}

/* 22.10.2026: Koreanisch – Hangeul mit Wortabständen, Umbruch nur an Leerzeichen */
html:lang(ko) body{font-family:system-ui,'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;word-break:keep-all;overflow-wrap:break-word}
html:lang(ko) h1{word-break:keep-all}