:root{
  color-scheme: only light;
  --papier:#fbf7f1;
  --flaeche:#ffffff;
  --linie:#e8ddd0;
  --tinte:#2a2320;
  --leise:#6e625a;
  --akzent:#7a2e45;
  --akzent-dunkel:#5e2034;
  --akzent-hell:#f6e9ec;
  --gold:#b8893b;
  --gold-hell:#f7eedc;
  --gruen:#4f6b4c;
  --rot:#9a3b2f;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}

html{scroll-padding-top:76px;-webkit-text-size-adjust:100%;color-scheme:only light}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:1.6;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;line-height:1.2;margin:0 0 12px;text-wrap:balance}
h1{font-size:28px}
h2{font-size:22px}
h3{font-size:19px}
a{color:var(--akzent)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.springen{position:absolute;left:-9999px}
.springen:focus{left:8px;top:8px;background:#fff;padding:10px;border-radius:8px;z-index:50}

/* Kopf */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--linie);backdrop-filter:blur(6px)}
.marke{display:flex;align-items:center;gap:10px;font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;text-decoration:none;color:var(--tinte)}
.marke img{width:34px;height:34px;border-radius:8px}
.marke em{font-style:italic;color:var(--akzent)}
.menueknopf{width:48px;height:48px;border:0;background:transparent;display:grid;align-content:center;gap:5px;cursor:pointer;padding:0 11px}
.menueknopf i{display:block;height:2px;background:var(--leise);border-radius:2px}
.hauptmenue{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:8px 16px 16px}
.hauptmenue[hidden]{display:none}
.hauptmenue a,.hauptmenue .alslink{display:block;padding:14px 4px;font-size:18px;text-decoration:none;color:var(--tinte);border-bottom:1px solid var(--linie);width:100%;text-align:left}
.hauptmenue .sprachen{display:flex;gap:8px;margin-top:14px}
.hauptmenue .sprachen a{border:1px solid var(--linie);border-radius:999px;padding:9px 16px;font-size:15px;color:var(--leise);text-align:center;flex:1}
.hauptmenue .sprachen a.an{background:var(--akzent);border-color:var(--akzent);color:#fff}

/* Bahnen */
main{display:block;min-height:60vh}
.bahn{max-width:680px;margin:0 auto;padding:22px 16px 40px}
.schmal{max-width:540px}
.dazu{color:var(--leise);font-size:16px;margin:0 0 18px}
.leer{color:var(--leise);background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:18px}
.zurueck{display:inline-block;font-size:15px;color:var(--leise);text-decoration:none;margin-bottom:12px;padding:6px 0}
.zurueck:hover{color:var(--akzent)}

/* Meldungen */
.merk{max-width:680px;margin:14px auto 0;padding:14px 16px;border-radius:12px;font-size:16px}
main>.merk{width:calc(100% - 32px)}
.merk.gut{background:#eef3ed;color:var(--gruen);border:1px solid #cfdccd}
.merk.fehler{background:#f9ece9;color:var(--rot);border:1px solid #e8cdc7}
.merk.hinweis{background:var(--gold-hell);color:#7a5a22;border:1px solid #ecdcbc}

/* Knoepfe */
.knopf{display:block;width:100%;max-width:380px;margin:16px auto 0;padding:15px 18px;border:0;border-radius:12px;background:var(--akzent);color:#fff;
  font:inherit;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;min-height:54px;transition:background .15s}
.knopf:hover{background:var(--akzent-dunkel)}
.knopf.still{background:transparent;color:var(--akzent);border:1.5px solid var(--linie)}
.knopf.still:hover{border-color:var(--akzent);background:var(--akzent-hell)}
.knopf.gold{background:var(--gold);color:#fff}
.knopf.gold:hover{background:#9c7330}
.knopf.klein{display:inline-block;width:auto;min-height:44px;padding:10px 16px;font-size:16px;margin:0}
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.alslink{background:none;border:0;font:inherit;color:var(--akzent);cursor:pointer;padding:12px 0}
.gefahr{color:var(--rot)}

/* Startseite */
.held{position:relative;overflow:hidden;padding:40px 20px 36px;text-align:center;background:
  radial-gradient(120% 80% at 50% 0%,#fff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fbf3ee 0%,#f3e3e2 100%);border-bottom:1px solid var(--linie)}
.held .buchbild{width:132px;height:auto;margin:0 auto 18px;display:block;filter:drop-shadow(0 14px 18px rgba(94,32,52,.22))}
.held h1{font-size:31px;max-width:560px;margin:0 auto 12px}
.held p{color:var(--leise);max-width:440px;margin:0 auto}
.schritte{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:14px}
.schritte li{counter-increment:s;position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:16px 16px 16px 66px}
.schritte li::before{content:counter(s);position:absolute;left:16px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--akzent-hell);color:var(--akzent);
  font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;display:grid;place-items:center}
.schritte strong{display:block;font-size:17px}
.schritte span{font-size:16px;color:var(--leise)}
.abschnitt{margin-top:34px}

.genrekarte{display:block;background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:18px;margin-bottom:14px;color:inherit;text-decoration:none;
  border-left:6px solid var(--akzent)}
.genrekarte h3{margin-bottom:4px}
.genrekarte p{margin:0;color:var(--leise);font-size:16px}
.genrekarte .zahl{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--akzent);background:var(--akzent-hell);border-radius:999px;padding:4px 12px}
a.genrekarte:hover{border-color:var(--akzent)}

/* Werbung Astro2Match */
.werbung{margin-top:34px;border-radius:18px;padding:22px 20px;color:#fff;background:linear-gradient(135deg,#1d1640 0%,#3b2470 55%,#6b2f6b 100%);position:relative;overflow:hidden}
.werbung::after{content:"✦ ✧ ✦";position:absolute;right:16px;top:12px;color:#e8c46a;opacity:.7;letter-spacing:6px}
.werbung h2{color:#fff;font-size:21px;margin-bottom:6px}
.werbung p{margin:0 0 14px;color:#e6defa;font-size:16px}
.werbung a{display:inline-block;background:#e8b84a;color:#2a1d0a;text-decoration:none;font-weight:700;border-radius:10px;padding:12px 18px}
.werbung.klein{padding:16px 18px}
.werbung.klein h2{font-size:18px}

/* Formulare */
.formular{margin-top:6px}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:16px;font-weight:600;margin-bottom:6px}
.feld input[type=text],.feld input[type=email],.feld input[type=password],.feld textarea,.feld select{
  width:100%;font:inherit;padding:14px;border:1px solid var(--linie);border-radius:10px;background:#fffdfa;color:var(--tinte);min-height:54px}
.feld textarea{min-height:240px;line-height:1.7;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--akzent);outline:none;box-shadow:0 0 0 3px var(--akzent-hell)}
.hinweis{font-size:14px;color:var(--leise);margin:6px 0 0}
.mitauge{position:relative}
.mitauge input{padding-right:56px}
.auge{position:absolute;right:4px;top:4px;width:48px;height:48px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--leise)}
.haken{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;font-size:16px;min-height:48px}
.haken input{width:24px;height:24px;flex:0 0 auto;margin-top:2px}
.trenner{display:flex;align-items:center;gap:12px;color:var(--leise);font-size:15px;margin:22px 0}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--linie)}
.kasten{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:18px}
.kasten>h2{font-size:20px}

/* Meine Buecher */
.buchkarte{display:flex;gap:16px;align-items:center;background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:14px;margin-bottom:14px;color:inherit;text-decoration:none}
.buchkarte:hover{border-color:var(--akzent)}
.umschlag{flex:0 0 64px;height:92px;border-radius:4px 8px 8px 4px;background:linear-gradient(90deg,var(--akzent-dunkel) 0 6px,var(--akzent) 6px);color:#fff;
  font-family:Fraunces,Georgia,serif;font-size:11px;line-height:1.2;padding:10px 6px 6px 12px;overflow:hidden;box-shadow:2px 3px 8px rgba(42,35,32,.18)}
.buchkarte strong{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;line-height:1.25}
.buchkarte .klein{font-size:14px;color:var(--leise)}
.balken{height:10px;border-radius:99px;background:#efe6dc;overflow:hidden;margin:8px 0 4px}
.balken i{display:block;height:100%;background:linear-gradient(90deg,var(--akzent),var(--gold));border-radius:99px}

/* Buchuebersicht */
.buchkopf{text-align:center;margin-bottom:20px}
.buchkopf .klein{color:var(--leise);font-size:15px}
.buchkopf h1{margin-bottom:4px}
.stand{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:16px 18px;margin-bottom:20px}
.stand strong{font-size:17px}
.stand .klein{font-size:14px;color:var(--leise)}
.kapitelliste{list-style:none;margin:0;padding:0}
.kapitelliste li{margin-bottom:10px}
.kapitelliste a{display:flex;align-items:center;gap:14px;background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:12px 14px;color:inherit;text-decoration:none;min-height:64px}
.kapitelliste a:hover{border-color:var(--akzent)}
.kapitelliste .nr{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:Fraunces,Georgia,serif;font-weight:600;background:#f3ece4;color:var(--leise)}
.kapitelliste .teilweise .nr{background:var(--gold-hell);color:#8a6524}
.kapitelliste .fertig .nr{background:var(--akzent);color:#fff}
.kapitelliste .txt{flex:1;min-width:0}
.kapitelliste .txt strong{display:block;font-size:17px;line-height:1.3}
.kapitelliste .txt span{font-size:14px;color:var(--leise)}
.punkte{display:flex;gap:4px;flex:0 0 auto}
.punkte b{width:9px;height:9px;border-radius:50%;background:#e6dccf}
.punkte b.an{background:var(--akzent)}
.buchaktionen{margin-top:26px;display:grid;gap:10px}

/* Kapitel */
.kapitelkopf{margin-bottom:18px}
.kapitelkopf .klein{font-size:14px;color:var(--akzent);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.stellen{list-style:none;margin:0;padding:0}
.stellenkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;margin-bottom:16px;overflow:hidden;scroll-margin-top:80px}
.stellenkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linie);background:#fdfaf6}
.stellenkopf strong{font-size:16px}
.stellenkopf .schild{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--akzent-hell);color:var(--akzent);white-space:nowrap}
.stellenkopf .schild.eigen{background:var(--gold-hell);color:#7a5a22}
.stellenkopf .schild.leer{background:#f1ebe4;color:var(--leise)}
.vorschau{padding:16px 18px 6px;font-family:Literata,Georgia,serif;font-size:17px;line-height:1.75;position:relative;max-height:236px;overflow:hidden}
.vorschau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.vorschau.offen{max-height:none}
.vorschau.offen::after{display:none}
.vorschau p{margin:0 0 12px}
.stellenfuss{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px}
.stellenfuss .knopf{margin:0}
.leerfeld{padding:18px 16px 4px;color:var(--leise);font-size:16px}
.blaettern{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.blaettern a{flex:1;text-align:center;padding:14px;border:1px solid var(--linie);border-radius:12px;text-decoration:none;color:var(--akzent);background:var(--flaeche);font-weight:600;font-size:16px}
.blaettern span{flex:1}

/* Waehlen */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.filter button{border:1px solid var(--linie);background:var(--flaeche);border-radius:999px;padding:9px 14px;font:inherit;font-size:15px;color:var(--leise);cursor:pointer;min-height:42px}
.filter button.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
.wahlkarte{background:var(--flaeche);border:1.5px solid var(--linie);border-radius:16px;margin-bottom:18px;overflow:hidden}
.wahlkarte.gewaehlt{border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-hell)}
.wahlkopf{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fdfaf6;border-bottom:1px solid var(--linie);font-size:14px;color:var(--leise)}
.stimmung{font-weight:600;border-radius:999px;padding:3px 10px;font-size:13px}
.st-romantisch{background:#fbe6ec;color:#9b3456}
.st-lustig{background:#fff1d6;color:#8a5b0c}
.st-spannend{background:#e5ecfb;color:#2f4f8f}
.st-traurig{background:#e9eef2;color:#4b5d6b}
.st-nachdenklich{background:#ece8f6;color:#5a4a8a}
.wahlfuss{padding:4px 16px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wahlfuss form{margin:0}
.wahlfuss .knopf{margin:0}

/* Schreiben */
.schreibfeld textarea{font-family:Literata,Georgia,serif;font-size:18px;min-height:52vh}
.zaehler{font-size:14px;color:var(--leise);text-align:right;margin-top:4px}
.nebenaktionen{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;margin-top:14px}
.nebenaktionen form{margin:0}

/* Text */
.rechtstext h2{font-size:19px;margin-top:24px}
.rechtstext p{font-size:17px}

/* Fuss */
.fuss{display:flex;gap:10px 18px;justify-content:center;align-items:center;flex-wrap:wrap;padding:22px 16px 34px;border-top:1px solid var(--linie);font-size:15px;color:var(--leise);position:relative}
.fuss a{color:var(--leise)}
.signatur{flex-basis:100%;text-align:right;font-size:12px;color:#a3978d;margin-top:6px}

@media (min-width:720px){
  .hauptmenue,.hauptmenue[hidden]{display:flex;align-items:center;gap:20px}
  .hauptmenue a,.hauptmenue .alslink{border-bottom:0;width:auto;padding:10px 0}
  .hauptmenue form{margin:0}
  .hauptmenue .sprachen{margin:0 0 0 auto}
  .hauptmenue .sprachen a{flex:0 0 auto}
  .menueknopf{display:none}
  .held{padding:56px 20px 50px}
  .held h1{font-size:40px}
  .schritte{grid-template-columns:1fr 1fr}
  .buchaktionen{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}