/* Kräuterkate – Gestaltung im Stil der Wirkwerkstatt (dunkles Holz, Gold, Pergament). */
@font-face { font-family: "Fraktur"; src: url("fonts/unifraktur-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("fonts/eb-garamond-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("fonts/eb-garamond-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("fonts/eb-garamond-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("fonts/eb-garamond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --nacht: #0a0604; --holz: #1a1008; --holz2: #22150a; --holz3: #2e1d0f; --gold: #c9a352; --gold-hell: #e8c877; --perg: #e4cf9f;
  --tinte: #2b1a0e; --rot: #9a2c1b; --gruen: #7fa86a; --bernstein: #d9963a; --text: #ead9b3; --leise: rgba(234, 217, 179, .64);
  --linie: rgba(201, 163, 82, .24); --linie2: rgba(201, 163, 82, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--nacht); color: var(--text); font: 400 17px/1.45 "Garamond", Georgia, serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; color: inherit; }
h1, h2, h3 { font-weight: 600; margin: 0 0 .4em; }
h2 { font: 400 25px/1.15 "Fraktur", serif; color: var(--gold); }
h3 { font: 600 13px "Cormorant", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 1.2em 0 .45em; }
p { margin: 0 0 .6em; }
.leise { color: var(--leise); }
.gold { color: var(--gold-hell); }
small { font-size: .82em; }

.rahmen { display: grid; grid-template-columns: 96px minmax(0, 1fr) 350px; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; }

/* ---------- Kopf ---------- */
.kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: linear-gradient(#140c06, #0a0604); border-bottom: 1px solid var(--linie); min-width: 0; }
.marke { display: flex; align-items: center; gap: 9px; color: var(--gold); font: 600 22px "Cormorant", serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.marke img { width: 40px; height: 40px; }
.uhr { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie2); border-radius: 20px; padding: 4px 12px; font: 600 15px "Cormorant", serif; white-space: nowrap; }
.uhr b { font-weight: 600; color: var(--gold-hell); }
.uhr small { color: var(--leise); }
.gestirn-klein { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff2b8, #e0a83c); box-shadow: 0 0 8px #e0a83c; }
.gestirn-klein.nacht { background: radial-gradient(circle at 40% 40%, #fff, #b9c2d6); box-shadow: 0 0 8px #9fb0d0; }
.mond-echt { display: flex; align-items: center; gap: 8px; font: 600 14px "Cormorant", serif; color: var(--leise); white-space: nowrap; min-width: 0; overflow: hidden; }
.mondscheibe { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #2a2a34; position: relative; overflow: hidden; box-shadow: 0 0 6px rgba(220, 225, 240, .35); }
.mondscheibe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #e7e9f2; transform: translateX(calc(var(--z) * (1 - var(--l)) * 100%)); }
.taler { display: flex; align-items: center; gap: 6px; margin-left: auto; font: 600 19px "Cormorant", serif; color: var(--gold-hell); }
.taler.puls { animation: puls .6s; }
@keyframes puls { 40% { transform: scale(1.25); color: #fff3c4; } }
.muenze { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0b0, #c9a352 55%, #7a5a1e); box-shadow: inset 0 0 0 1.5px rgba(80, 55, 15, .6); vertical-align: -2px; }
.rang-knopf { display: flex; flex-direction: row; align-items: center; gap: 8px; background: none; border: 1px solid var(--linie2); border-radius: 4px; padding: 4px 10px; cursor: pointer; font: 600 14px "Cormorant", serif; min-width: 150px; text-align: left; }
.rang-knopf i { display: block; height: 4px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; }
.rang-knopf em { display: block; height: 100%; background: linear-gradient(90deg, var(--rot), var(--gold)); }
.ton-knopf { background: none; border: 1px solid var(--linie2); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: var(--gold); font-size: 16px; }
.ton-knopf.aus { color: var(--leise); text-decoration: line-through; opacity: .6; }

/* ---------- Orte ---------- */
.orte { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: linear-gradient(90deg, #22150a, #1a1008); border-right: 1px solid var(--linie); overflow-y: auto; }
.ort { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 7px 2px 6px; cursor: pointer; font: 600 13px "Cormorant", serif; color: var(--leise); }
.ort .bild { width: 42px; height: 38px; }
.ort:hover { color: var(--text); background: rgba(201, 163, 82, .06); }
.ort.an { color: var(--gold-hell); border-color: var(--linie2); background: rgba(201, 163, 82, .1); }
.ort.zu { opacity: .45; }
.ort.zeig { animation: zeig 1.6s infinite; }
@keyframes zeig { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(232, 200, 119, .6); } }
.abz { position: absolute; top: 2px; right: 8px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--rot); color: #fff; font: 600 12px/19px "Garamond", serif; font-style: normal; text-align: center; padding: 0 5px; box-shadow: 0 0 0 2px #1a1008; }

/* Bilder */
.bild { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.bild img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); }
.bild .siegel-auf { position: absolute; inset: 14%; width: 72%; height: 72%; mix-blend-mode: multiply; opacity: .85; filter: none; }
.bild.mini { width: 24px; height: 24px; vertical-align: middle; margin-right: 4px; }
.bild.samen img { filter: sepia(.8) brightness(.7) drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

/* ---------- Bühne ---------- */
.buehne { grid-row: 2; grid-column: 2; overflow-y: auto; position: relative; min-width: 0; background: #0d0805; }
.seite { grid-row: 2; grid-column: 3; overflow-y: auto; background: linear-gradient(270deg, #22150a, #1a1008); border-left: 1px solid var(--linie); padding: 14px 16px 24px; }
.tut { position: sticky; top: 0; z-index: 6; margin: 0; padding: 10px 16px 10px 40px; background: linear-gradient(#3a2610, #2a1b0c); border-bottom: 1px solid var(--gold); font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.tut::before { content: "✦"; position: absolute; left: 15px; top: 9px; color: var(--gold-hell); font-size: 18px; }
.tut b { color: var(--gold-hell); font-weight: 600; }
.tut .knopf { margin-left: 8px; }

.szene { position: relative; min-height: 100%; padding-bottom: 30px; }
.tafel { background: rgba(20, 12, 6, .82); border: 1px solid var(--linie2); border-radius: 6px; padding: 14px 16px; margin: 0 0 14px; backdrop-filter: blur(3px); }
.tafel h2 { font-size: 22px; }

/* Knöpfe */
.knopf { font: 600 16px "Cormorant", serif; letter-spacing: .02em; color: var(--text); background: linear-gradient(#3a2512, #2a1a0c); border: 1px solid var(--linie2); border-radius: 4px; padding: 7px 15px; cursor: pointer; white-space: nowrap; }
.knopf:hover:not(:disabled) { border-color: var(--gold); color: #fff3d6; }
.knopf:disabled { opacity: .4; cursor: not-allowed; }
.knopf.haupt { background: linear-gradient(#b8432a, #7d2414); border-color: #d06a4a; color: #fff4e0; }
.knopf.haupt:hover:not(:disabled) { background: linear-gradient(#cc5034, #8e2a17); }
.knopf.rot { background: linear-gradient(#5a1d12, #3a120a); }
.knopf.klein { font-size: 14px; padding: 4px 10px; }
.knopf.gross { font-size: 20px; padding: 10px 26px; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knopf-i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linie2); background: none; color: var(--gold); cursor: pointer; font: italic 600 14px "Garamond", serif; }

/* Balken */
.balken { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; margin: 6px 0 3px; }
.balken em { display: block; height: 100%; background: linear-gradient(90deg, var(--gruen), var(--gold-hell)); transition: width 1s linear; }

/* ---------- Stube ---------- */
.stube-bild { position: absolute; inset: 0 0 auto; height: max(130vh, 1000px); background: url("bild/stube-quer.webp") center 30% / cover; opacity: .55; }
.stube-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 6, 4, .15), rgba(10, 6, 4, .75) 55%, #0d0805); }   /* 29.10. (Olaf: „wird das Hintergrundbild etwas größer, wenn ich etwas herstelle“): feste Höhe statt so hoch wie die Seite, sonst zoomt cover mit jeder neuen Zeile */
.stube-inhalt { position: relative; padding: 26px 26px 10px; max-width: 860px; margin: 0 auto; }
.stube-gruss { margin: 30px 0 22px; text-shadow: 0 2px 10px #000; }
.stube-gruss h1 { font: 400 40px/1.1 "Fraktur", serif; color: var(--gold-hell); margin: 0; }
.stube-gruss p { color: var(--leise); font-style: italic; }
.gabe { display: block; width: 100%; text-align: left; cursor: pointer; margin: 0 0 14px; padding: 12px 16px; border-radius: 6px; border: 1px solid var(--gold); background: linear-gradient(90deg, rgba(120, 80, 20, .55), rgba(40, 25, 10, .8)); animation: zeig 2.2s infinite; }
.gabe b { display: block; font: 400 22px "Fraktur", serif; color: var(--gold-hell); }
.besuch { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); }
.besuch:first-of-type { border-top: 0; }
.siegelchen { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 24px "Fraktur", serif; color: #f6d9c8; background: radial-gradient(circle at 35% 30%, #c4462c, #7b1d10 70%); box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(255, 255, 255, .08); }
.besuch.dank .siegelchen { background: radial-gradient(circle at 35% 30%, #d8b25a, #7a5a1e 70%); color: #2b1a0e; }
.besuch-text { flex: 1; min-width: 0; }
.besuch-text > b { font-size: 18px; }
.besuch-text small { color: var(--leise); }
.besuch-text p { margin: 6px 0; font-style: italic; }
.anliegen-chip { display: inline-block; margin-top: 4px; font: 600 13px "Cormorant", serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hell); border: 1px solid var(--linie2); border-radius: 12px; padding: 1px 10px; }
.folge-besuch .anliegen-chip { border-color: var(--bernstein); color: var(--bernstein); }
.besuch-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.lohn-klein { display: inline-flex; align-items: center; gap: 5px; font: 600 16px "Cormorant", serif; color: var(--gold-hell); }
.herzen { color: #d0604a; letter-spacing: 1px; font-size: 14px; }
.wuensche { list-style: none; margin: 6px 0; padding: 0; font-size: 15px; }
.wuensche li { padding: 2px 0; color: var(--bernstein); }
.wuensche li.ok { color: var(--gruen); }
.wuensche li.nein { color: #e0735a; }
.werk-laeuft, .rezept-zeile { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); }
.werk-laeuft { border: 0; }
.werk-laeuft .bild, .rezept-zeile .bild { width: 56px; height: 56px; flex: none; }
.werk-laeuft > div, .rezept-zeile > div { flex: 1; min-width: 0; }
.rezept-zeile small { display: block; }

/* ---------- Wirktisch ---------- */
.ansicht-werktisch { padding: 10px 14px 20px; }
.auftragswahl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { font: 600 14px "Cormorant", serif; background: #2a1a0c; border: 1px solid var(--linie2); color: var(--leise); border-radius: 14px; padding: 4px 12px; cursor: pointer; }
.chip.an { background: linear-gradient(#7d2414, #5a1a0e); border-color: #d06a4a; color: #fff4e0; }
.auftrag-jetzt { font-size: 15px; margin-bottom: 8px; }
.auftrag-jetzt .wuensche { margin: 4px 0 0; }
.tisch-rahmen { display: flex; justify-content: center; }
.tisch { position: relative; width: min(100%, 58vh, 620px); aspect-ratio: 1; border-radius: 8px; background: url("bild/tisch-quer.webp") center / cover; box-shadow: inset 0 0 90px rgba(0, 0, 0, .85), 0 6px 26px rgba(0, 0, 0, .7); overflow: hidden; user-select: none; }
.kreide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kreide circle { fill: none; stroke: rgba(235, 228, 210, .55); stroke-width: .35; stroke-dasharray: 1.4 .5; transition: stroke 1.5s, stroke-width 1.5s; }
.kreide .ring2 { stroke-width: .22; stroke: rgba(235, 228, 210, .35); }
.kreide text { fill: rgba(235, 228, 210, .55); font: 4px "Garamond", "Segoe UI Symbol", serif; text-anchor: middle; }
.kreide .ost, .kreide .west { font: 600 3px "Cormorant", serif; letter-spacing: .5px; fill: rgba(235, 228, 210, .4); }
.platz { position: absolute; width: 19%; height: 19%; transform: translate(-50%, -50%); border-radius: 50%; }
.platz.leer { border: 1.5px dashed rgba(235, 228, 210, .35); width: 11%; height: 11%; background: rgba(0, 0, 0, .18); }
.platz.voll { background: none; border: 0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; animation: hinlegen .35s ease-out; }
.platz.voll .bild { width: 100%; height: 100%; }
.platz.voll:hover .bild img { filter: drop-shadow(0 0 8px rgba(232, 200, 119, .7)); }
@keyframes hinlegen { from { transform: translate(-50%, -62%) scale(1.15); opacity: 0; } }
.flamme { position: absolute; left: 50%; top: 2%; width: 9%; height: 18%; transform: translateX(-50%); border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 72%, #fff8d8 0, #ffd36a 28%, #ff8a2a 60%, rgba(255, 90, 20, 0) 75%); filter: blur(.4px); animation: flackern 1.6s infinite alternate ease-in-out; pointer-events: none; }
.flamme::after { content: ""; position: absolute; left: 50%; top: 40%; width: 500%; height: 300%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(rgba(255, 190, 90, .28), rgba(255, 160, 60, 0) 65%); }
@keyframes flackern { 0% { transform: translateX(-50%) scale(1, 1); } 40% { transform: translateX(-52%) scale(.92, 1.08); } 100% { transform: translateX(-48%) scale(1.05, .94); } }
.schale { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); }
.schale > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)); }
.glut { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(#3a2a22, #1a1210); transition: all 1.2s; }
.schale.glueht .glut { background: radial-gradient(#ffd27a, #ff7a2a 35%, #8a1e08 70%, #2a0e06); box-shadow: 0 0 22px 6px rgba(255, 110, 30, .45); animation: glimmen 3s infinite alternate; }
@keyframes glimmen { to { box-shadow: 0 0 30px 10px rgba(255, 120, 40, .3); filter: brightness(1.15); } }
.glutplatz { position: absolute; width: 34%; height: 34%; transform: translate(-50%, -50%); }
.glutplatz.leer { border: 1px dashed rgba(255, 200, 140, .25); border-radius: 50%; width: 18%; height: 18%; }
.glutplatz.voll { background: none; border: 0; padding: 0; cursor: pointer; }
.glutplatz.voll .bild { width: 100%; height: 100%; }
.glutplatz.voll img { filter: brightness(.75) sepia(.3) drop-shadow(0 0 5px rgba(255, 120, 40, .8)); }
.rauch { position: absolute; left: 50%; bottom: 50%; width: 30%; height: 60%; transform: translateX(-50%); object-fit: cover; mix-blend-mode: screen; opacity: .55; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 72%); mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 72%); }
.formel { position: absolute; inset: auto 9% 6% 9%; z-index: 6; text-align: center; pointer-events: none; opacity: 0; padding: 12px 16px 10px; border-radius: 12px; background: linear-gradient(rgba(30, 19, 9, .95), rgba(14, 9, 5, .95)); border: 1px solid rgba(232, 200, 119, .6); box-shadow: 0 0 34px rgba(255, 190, 90, .35), 0 12px 30px rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }   /* eigene Tafel, damit nichts durchscheint (Olaf 18.10.) */
.formel-orig { font: 400 clamp(18px, 3.4vh, 30px)/1.25 "Fraktur", serif; color: #ffe6a6; text-shadow: 0 0 12px rgba(255, 190, 90, .9), 0 2px 4px #000; }
.formel-glosse { font: italic 500 clamp(14px, 2vh, 18px) "Cormorant", serif; color: var(--text); text-shadow: 0 2px 6px #000; margin-top: 6px; }
.formel-quelle { font: 600 11px "Cormorant", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin-top: 4px; }
.tisch.wirkt .kreide circle { stroke: #f2cf74; stroke-width: .7; stroke-dasharray: none; filter: drop-shadow(0 0 1.5px #ffcf6a); }
.tisch.wirkt .platz.voll { animation: leuchten 1.4s ease-in-out both; animation-delay: calc(.4s + var(--i) * .35s); }
@keyframes leuchten { 50% { filter: drop-shadow(0 0 18px #ffd77a) brightness(1.35); } }
.tisch.wirkt .formel { animation: formel 10s 1.4s both; }   /* sichtbar etwa von 2,9 s bis 9,9 s, Ergebnis bei 12 s */
.tisch.wirkt .kreide .west { transition: opacity .6s; opacity: 0; }
@keyframes formel { 0% { opacity: 0; transform: translateY(8px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tisch.wirkt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 200, 100, .12), transparent 60%); animation: pulsieren 2s infinite; pointer-events: none; }
@keyframes pulsieren { 50% { opacity: .3; } }
.tisch.wirkt { cursor: pointer; }

.beutel-leiste { margin-top: 12px; }
.faecher { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 8px; }
.faecher button { font: 600 14px "Cormorant", serif; color: var(--leise); background: #2e1d0f; border: 1px solid var(--linie); border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.faecher button.an { color: var(--gold-hell); border-color: var(--gold); background: #3c2712; }
.faecher .abraeumen { margin-left: auto; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
.kachel { position: relative; background: linear-gradient(#2a1a0c, #20140a); border: 1px solid var(--linie); border-radius: 6px; display: flex; flex-direction: column; }
.kachel.leer { opacity: .38; }
.kachel-haupt { background: none; border: 0; cursor: pointer; padding: 6px 4px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.kachel-haupt .bild { width: 58px; height: 52px; }
.kachel-haupt:hover .bild img { filter: drop-shadow(0 0 8px rgba(232, 200, 119, .55)); }
.kachel .name { font: 600 14px/1.1 "Cormorant", serif; margin-top: 3px; }
.kachel .klein { font: italic 500 12px/1.1 "Cormorant", serif; color: var(--leise); }
.kachel .n { position: absolute; top: 4px; left: 6px; font: 600 14px "Garamond", serif; color: var(--gold-hell); }
.kachel .n i { font-style: normal; color: var(--leise); margin-left: 2px; }
.kachel-glut { border: 0; border-top: 1px solid var(--linie); background: rgba(160, 60, 20, .18); color: #f0a070; font: 600 12px "Cormorant", serif; padding: 3px; cursor: pointer; border-radius: 0 0 6px 6px; }
.kachel-glut:hover { background: rgba(200, 80, 30, .35); color: #ffd0a0; }
.kachel-info { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--linie2); background: rgba(10, 6, 4, .6); color: var(--gold); font: italic 600 12px/1 "Garamond", serif; cursor: pointer; padding: 0; }

/* Deutung */
.seite-block { margin-bottom: 18px; }
.seite-block h2 small { font: 600 14px "Cormorant", serif; color: var(--leise); }
.stimmig { display: flex; align-items: center; gap: 10px; }
.stimmig-balken { flex: 1; height: 8px; background: rgba(255, 255, 255, .08); border-radius: 4px; overflow: hidden; }
.stimmig-balken em { display: block; height: 100%; background: linear-gradient(90deg, var(--rot), var(--bernstein), var(--gold-hell)); transition: width .5s; }
.stimmig > span:last-child { font: 600 18px "Cormorant", serif; color: var(--gold-hell); min-width: 26px; text-align: right; }
.sterne { display: inline-flex; gap: 1px; color: rgba(255, 255, 255, .16); font-size: 18px; }
.sterne i { font-style: normal; }
.sterne i.an { color: var(--gold-hell); text-shadow: 0 0 6px rgba(232, 200, 119, .6); }
.sterne.gross { font-size: 46px; gap: 6px; }
.sterne.gross i.an { animation: stern .6s backwards; animation-delay: calc(.25s + var(--i) * .28s); }
@keyframes stern { from { transform: scale(2.4) rotate(-30deg); opacity: 0; } }
.spricht { margin: 10px 0 2px; font-size: 18px; }
.spricht b, .herr b { font-weight: 600; }
.herr { color: var(--leise); font-size: 15px; }
.rat, .befunde, .rollen { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.rat li { padding: 6px 10px; margin-bottom: 4px; border: 1px solid var(--linie); border-radius: 4px; background: rgba(201, 163, 82, .06); }
.rat em { float: right; font-style: normal; color: var(--gruen); font-weight: 600; }
.befunde li { padding: 5px 0 5px 12px; border-left: 3px solid var(--leise); margin-bottom: 4px; }
.befunde li.gut { border-color: var(--gruen); }
.befunde li.faerbt { border-color: var(--bernstein); }
.befunde li.stoert { border-color: #d0604a; }
.befunde li.info { border-color: #6c7ea8; }
.anteil { display: grid; grid-template-columns: 96px 1fr 40px; gap: 8px; align-items: center; font-size: 14px; color: var(--leise); margin-bottom: 3px; }
.anteil.ziel { color: var(--text); font-weight: 600; }
.anteil i { height: 5px; background: rgba(255, 255, 255, .07); border-radius: 3px; overflow: hidden; }
.anteil em { display: block; height: 100%; background: #8a6a36; }
.anteil.ziel em { background: linear-gradient(90deg, var(--rot), var(--gold)); }
.anteil b { text-align: right; font-weight: 400; }
.rollen li { display: flex; justify-content: space-between; padding: 3px 0 3px 10px; border-left: 3px solid var(--leise); margin-bottom: 3px; }
.rollen em { font: 600 12px "Cormorant", serif; letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.rollen .traegt { border-color: var(--gruen); } .rollen .traegt em { color: var(--gruen); }
.rollen .faerbt { border-color: var(--bernstein); } .rollen .faerbt em { color: var(--bernstein); }
.rollen .stoert { border-color: #d0604a; } .rollen .stoert em { color: #e0735a; }
.wirken-fuss { position: sticky; bottom: -24px; padding: 12px 0 14px; background: linear-gradient(transparent, #1e1209 30%); margin-top: 14px; text-align: center; }
.knopf.wirken { width: 100%; font-size: 22px; padding: 10px; background: linear-gradient(#b8432a, #7d2414); border-color: #d06a4a; color: #fff4e0; }
.wirken-fuss small { display: block; margin-top: 5px; color: var(--leise); }
.entdeckung { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--gold); border-radius: 6px; background: linear-gradient(90deg, rgba(120, 80, 20, .45), rgba(40, 25, 10, .6)); text-align: center; }
.entdeckung small { display: block; font: 600 12px "Cormorant", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.entdeckung b { display: block; font: 400 24px "Fraktur", serif; color: var(--gold-hell); }
.entdeckung.klein b { font-size: 18px; }

/* Seitenleiste allgemein */
.auftrag-zeile { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; text-align: left; background: rgba(201, 163, 82, .05); border: 1px solid var(--linie); border-radius: 5px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; }
.auftrag-zeile:hover { border-color: var(--gold); }
.auftrag-zeile span { grid-column: 1; color: var(--leise); font-size: 14px; }
.auftrag-zeile em { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 600 16px "Cormorant", serif; font-style: normal; color: var(--gold-hell); display: flex; gap: 4px; align-items: center; }
.beutel-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 4px; }
.mini-ding { position: relative; background: rgba(255, 255, 255, .03); border: 1px solid var(--linie); border-radius: 4px; padding: 3px; cursor: pointer; height: 50px; }
.mini-ding .bild { width: 100%; height: 100%; }
.mini-ding em { position: absolute; right: 3px; bottom: 1px; font: 600 12px "Garamond", serif; font-style: normal; color: var(--gold-hell); text-shadow: 0 1px 2px #000; }

/* ---------- Garten ---------- */
.himmel-streifen { position: relative; height: 170px; overflow: hidden; background: linear-gradient(var(--h1), var(--h2)); }
.garten, .bach { --h1: #6f9cc4; --h2: #e8d6a8; --wasser1: #5e8aa6; --wasser2: #2c4a5e; }
.morgen { --h1: #3b4a74; --h2: #e7a374; --wasser1: #6a7f9c; --wasser2: #2a3448; }
.abend { --h1: #3a2a52; --h2: #d9824a; --wasser1: #6a5a7a; --wasser2: #2a2238; }
.nacht { --h1: #070a18; --h2: #1b2340; --wasser1: #26344e; --wasser2: #0c1220; }
.gestirn { position: absolute; width: 34px; height: 34px; border-radius: 50%; transform: translateX(-50%); }
.gestirn.sonne { background: radial-gradient(circle at 40% 40%, #fffbe0, #ffd56a 60%, #f0a03a); box-shadow: 0 0 40px 12px rgba(255, 220, 120, .55); }
.gestirn.mond { background: radial-gradient(circle at 40% 40%, #fff, #c7cfe0); box-shadow: 0 0 30px 6px rgba(200, 210, 240, .35); }
.huegel { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70px; }
.huegel path { fill: #2c3a1e; }
.nacht .huegel path { fill: #0e140c; }
.huegel .zaun { fill: none; stroke: #4a3218; stroke-width: 3; }
.streifen-text { position: absolute; left: 22px; top: 18px; right: 22px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.streifen-text h1 { font: 400 38px/1 "Fraktur", serif; color: #fff1cc; margin: 0 0 4px; }
.streifen-text p { color: #f3e6c8; font-style: italic; max-width: 560px; }
.garten { background: #1a1209; }
.beete { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px; }
.beet { position: relative; height: 210px; border-radius: 6px; border: 6px solid #4a3218; border-image: none; background: #2b1c10; box-shadow: inset 0 0 0 2px #2a1a0c, 0 4px 10px rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 8px; overflow: hidden; }
.erde-flaeche { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 16px), radial-gradient(ellipse at 50% 40%, #5a3d22, #2e1d0f); }
.beet > * { position: relative; }
.beet.leer { justify-content: center; }
.beet.zu { border-style: dashed; border-color: #3a2814; background: rgba(0, 0, 0, .3); justify-content: center; text-align: center; color: var(--leise); font-size: 14px; }
.pflanze { flex: 1; width: 100%; min-height: 0; display: flex; justify-content: center; align-items: flex-end; transform: scale(calc(.42 + var(--p) * .58)); transform-origin: 50% 100%; transition: transform 1s; margin-bottom: 4px; }
.pflanze .bild { width: 120px; height: 120px; max-height: 100%; }
.waechst .pflanze img { filter: saturate(calc(.3 + var(--p) * .7)) brightness(calc(.7 + var(--p) * .3)) drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
.reif .pflanze { animation: reif 2.2s infinite ease-in-out; }
@keyframes reif { 50% { filter: drop-shadow(0 0 14px rgba(255, 230, 140, .65)); transform: scale(1.05); } }
.beet-fuss { width: 100%; background: rgba(10, 6, 4, .75); border-radius: 4px; padding: 6px 8px; text-align: center; }
.beet-fuss b { display: block; font: 600 15px "Cormorant", serif; }
.beet-fuss small { display: block; color: var(--leise); }
.beet-fuss .knopf { margin-top: 4px; }
.garten-unten, .bach-unten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; padding: 0 16px; }
.saat-liste { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.saat { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; }
.saat b { color: var(--gold-hell); margin-left: 3px; }

/* ---------- Bach ---------- */
.bach { background: #120d08; }
.bach-bild { position: relative; height: clamp(220px, 38vh, 360px); overflow: hidden; }
.bach-bild svg { width: 100%; height: 100%; display: block; }
.bach-himmel { fill: var(--h1); }
.ufer-fern { fill: #3a4a2a; }
.ufer { fill: #2a3418; }
.nacht .ufer-fern { fill: #121a12; } .nacht .ufer { fill: #0b100a; }
.morgen .ufer-fern, .abend .ufer-fern { fill: #34362a; }
.welle { fill: none; stroke: rgba(230, 240, 255, .5); stroke-width: 1.6; stroke-dasharray: 14 26; animation: fliessen 3.2s linear infinite; }
.welle.quell { stroke-width: 2.4; }
@keyframes fliessen { to { stroke-dashoffset: -80; } }
.stein { fill: #5a5650; } .stein.hell { fill: #77716a; }
.nacht .stein { fill: #2a2a2c; }
.schilf { fill: none; stroke: #6a7a3a; stroke-width: 2.2; stroke-linecap: round; transform-origin: bottom; animation: wiegen 4s ease-in-out infinite alternate; }
@keyframes wiegen { to { transform: skewX(4deg); } }
.stern { fill: #fff; animation: funkeln 2.4s infinite alternate; }
@keyframes funkeln { to { opacity: .2; } }
.kruege { display: flex; gap: 14px; margin: 6px 0 10px; }
.krug { width: 38px; height: 46px; border: 2px solid #8a6a40; border-radius: 8px 8px 14px 14px; position: relative; background: rgba(0, 0, 0, .3); overflow: hidden; }
.krug::before { content: ""; position: absolute; top: 6px; right: -9px; width: 10px; height: 18px; border: 2px solid #8a6a40; border-left: 0; border-radius: 0 8px 8px 0; }
.krug.voll::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; background: linear-gradient(#7aa4c4, #3a6280); animation: fuellen .6s; }
@keyframes fuellen { from { height: 0; } }

/* ---------- Streifzug ---------- */
.streifzug { padding: 16px; }
.karte-land { background: #d9c49a url("bild/pergament.webp") center / cover; border-radius: 6px; box-shadow: inset 0 0 60px rgba(90, 60, 20, .6), 0 6px 20px rgba(0, 0, 0, .6); margin-bottom: 14px; overflow: hidden; }
.karte-land svg { width: 100%; display: block; max-height: 340px; }
.karte-land .see { fill: rgba(70, 100, 120, .3); }
.karte-land .see-linie, .karte-land .kueste, .karte-land .baum, .karte-land .moor, .karte-land .pfad, .karte-land .kate path { fill: none; stroke: #4a3218; stroke-width: 1.6; stroke-linecap: round; }
.karte-land .kueste { stroke-width: 2.4; }
.karte-land .pfad { stroke-dasharray: 4 6; stroke-width: 1.4; }
.karte-land .kate rect { fill: #4a3218; }
.karte-land text { font: 400 22px "Fraktur", serif; fill: #3a2410; }
.ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ziel { background: rgba(20, 12, 6, .82); border: 1px solid var(--linie2); border-radius: 6px; padding: 12px 14px; }
.ziel h3 { margin-top: 0; font-size: 15px; }
.ziel.zu { opacity: .55; }
.gesperrt { color: var(--bernstein); font-style: italic; }
.funde { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 14px 0 18px; perspective: 800px; }
.fund { width: 130px; height: 170px; }
.fund-innen { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: umdrehen .7s both; animation-delay: calc(.35s + var(--i) * .38s); }
@keyframes umdrehen { from { transform: rotateY(180deg); } }
.fund-rueck, .fund-vorn { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fund-rueck { transform: rotateY(180deg); background: radial-gradient(circle, #5a3a18, #2a1a0c); border: 2px solid var(--gold); }
.fund-rueck::after { content: "✦"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--gold); }
.fund-vorn { background: linear-gradient(#3a2512, #22150a); border: 2px solid var(--linie2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; text-align: center; }
.fund-vorn .bild { width: 86px; height: 86px; }
.fund-vorn b { font: 600 16px "Cormorant", serif; }
.fund-vorn small { color: var(--leise); font-style: italic; }
.fund.s1 .fund-vorn { border-color: #7aa4c4; box-shadow: 0 0 14px rgba(122, 164, 196, .5); }
.fund.s1 small { color: #9ac0e0; }
.fund.s2 .fund-vorn { border-color: var(--gold-hell); box-shadow: 0 0 22px rgba(255, 210, 110, .75); background: linear-gradient(#5a3a12, #2a1a0a); }
.fund.s2 small { color: var(--gold-hell); }

/* ---------- Krämer ---------- */
.kraemer { padding-bottom: 30px; }
.kraemer-kopf { position: relative; height: 170px; background: url("bild/kraeuterkammer-quer.webp") center 40% / cover; }
.kraemer-kopf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 6, 4, .2), #0d0805); }
.kraemer-kopf .streifen-text { z-index: 1; }
.reiter-leiste { display: flex; gap: 4px; padding: 12px 16px 0; flex-wrap: wrap; }
.reiter-leiste button { font: 600 16px "Cormorant", serif; color: var(--leise); background: #2e1d0f; border: 1px solid var(--linie); border-bottom: 0; border-radius: 4px 4px 0 0; padding: 6px 16px; cursor: pointer; }
.reiter-leiste button.an { color: var(--gold-hell); background: #3c2712; border-color: var(--gold); }
.ware-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px 16px; border-top: 1px solid var(--linie2); }
.ware { background: linear-gradient(#2a1a0c, #1e1209); border: 1px solid var(--linie); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
button.ware { cursor: pointer; }
button.ware:hover { border-color: var(--gold); }
.ware .bild { width: 70px; height: 62px; }
.ware b { font: 600 16px/1.15 "Cormorant", serif; }
.ware small { color: var(--leise); font-style: italic; font-size: 13px; }
.ware .preis { font: 600 18px "Cormorant", serif; color: var(--gold-hell); display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.ware .hast { font-size: 13px; color: var(--leise); }
.ware .knopfreihe { justify-content: center; margin-top: 6px; }
.ware .knopf { padding: 4px 10px; font-size: 14px; }
.ware.zu { opacity: .4; }
.ware.zu .bild img { filter: brightness(0) drop-shadow(0 0 1px rgba(201, 163, 82, .5)) !important; }
.saatwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }

/* ---------- Bücher ---------- */
.buecher { padding-bottom: 30px; }
.buch-seite { margin: 0 16px; padding: 18px 20px; background: linear-gradient(#2a1a0c, #1e1209); border: 1px solid var(--linie2); border-radius: 0 6px 6px 6px; }
.sammel-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sammel { background: rgba(255, 255, 255, .03); border: 1px solid var(--linie); border-radius: 6px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 13px/1.1 "Cormorant", serif; }
.sammel .bild { width: 60px; height: 54px; }
.sammel.unbekannt { cursor: default; color: var(--leise); }
.sammel.unbekannt img { filter: brightness(0) opacity(.55) drop-shadow(0 0 1px rgba(201, 163, 82, .6)) !important; }
.rezept-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rezept-karte { border: 1px dashed var(--linie2); border-radius: 6px; padding: 10px 12px; }
.rezept-karte.hat { border-style: solid; border-color: var(--gold); background: rgba(201, 163, 82, .07); }
.rezept-karte small { font: 600 12px "Cormorant", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.rezept-karte b { display: block; font: 400 21px "Fraktur", serif; color: var(--gold-hell); margin: 2px 0 4px; }
.rezept-karte p { font-style: italic; color: var(--leise); font-size: 15px; }
.rezept-dinge { font-size: 14px; }
.dorf-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dorf-person { display: flex; gap: 10px; align-items: center; border: 1px solid var(--linie); border-radius: 6px; padding: 8px 10px; }
.dorf-person small { display: block; color: var(--leise); }
.dorf-person.unbekannt { opacity: .45; }
.dorf-person.unbekannt .siegelchen { background: #3a2a1a; }
.tabelle-rollen { overflow-x: auto; }
.tabelle-rollen table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tabelle-rollen th { font: 600 12px "Cormorant", serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linie2); }
.tabelle-rollen td { padding: 6px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle-rollen td small { display: block; color: var(--leise); font-style: italic; }
.rang-liste { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.rang-liste li { counter-increment: r; position: relative; padding: 8px 10px 8px 46px; border-left: 2px solid var(--linie); margin-left: 14px; }
.rang-liste li::before { content: counter(r); position: absolute; left: -15px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: #2a1a0c; border: 1px solid var(--linie2); display: flex; align-items: center; justify-content: center; font: 600 14px "Cormorant", serif; color: var(--leise); }
.rang-liste li.erreicht::before { background: #5a3a18; color: var(--gold-hell); }
.rang-liste li.jetzt::before { background: var(--rot); color: #fff; border-color: #d06a4a; box-shadow: 0 0 10px rgba(208, 106, 74, .6); }
.rang-liste li.jetzt b { color: var(--gold-hell); }
.rang-liste b { font: 400 20px "Fraktur", serif; }
.rang-liste small { color: var(--leise); margin-left: 8px; }
.rang-liste span { display: block; font-size: 14px; color: var(--leise); }

/* ---------- Fenster und Meldungen ---------- */
.fenster { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 3, 2, .72); backdrop-filter: blur(3px); }
.fenster.offen { display: flex; animation: einblenden .25s; }
@keyframes einblenden { from { opacity: 0; } }
.fenster-karte { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: linear-gradient(#2e1d0f, #1a1008); border: 1px solid var(--gold); border-radius: 8px; padding: 24px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, .8); text-align: center; animation: aufsteigen .35s ease-out; }
@keyframes aufsteigen { from { transform: translateY(16px) scale(.97); } }
.fenster-zu { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--leise); font-size: 26px; cursor: pointer; line-height: 1; }
.fenster-karte .knopf.haupt { margin-top: 10px; min-width: 160px; }
.fenster-karte .knopfreihe .knopf.haupt { margin-top: 0; }   /* 19.10. (Olaf): neben anderen Knöpfen nicht nach unten rutschen */
.fenster-karte .knopfreihe { justify-content: center; margin-top: 12px; }
.ergebnis-kopf h2 { font-size: 36px; margin: 6px 0 2px; }
.ergebnis.s0 .ergebnis-kopf h2 { color: #c97a62; }
.reaktion { font-size: 18px; margin: 12px 0; }
.lohn { display: flex; justify-content: center; gap: 18px; margin: 12px 0; font: 600 24px "Cormorant", serif; }
.lohn-taler { color: var(--gold-hell); }
.lohn-ruf { color: #b5c9e6; }
.folge { text-align: left; border-left: 3px solid var(--bernstein); padding: 6px 12px; margin: 12px 0; background: rgba(217, 150, 58, .08); }
.folge b { font: 600 13px "Cormorant", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--bernstein); }
.folge p { margin: 4px 0; font-size: 15px; }
.rang-auf small { font: 600 13px "Cormorant", serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.rang-auf h2 { font-size: 40px; color: var(--gold-hell); text-shadow: 0 0 20px rgba(232, 200, 119, .5); }
.rang-auf ul { text-align: left; margin: 12px auto; max-width: 420px; padding-left: 20px; }
.rang-auf li { margin-bottom: 4px; }
.rang-fenster { border-width: 2px; box-shadow: 0 0 60px rgba(232, 200, 119, .25), 0 20px 60px rgba(0, 0, 0, .8); }
.serie { display: flex; justify-content: center; gap: 6px; margin: 12px 0; }
.serie span { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linie2); display: flex; align-items: center; justify-content: center; font: 600 15px "Cormorant", serif; color: var(--leise); }
.serie span.an { background: radial-gradient(circle at 35% 35%, #fff0b0, #c9a352 55%, #7a5a1e); color: var(--tinte); border-color: var(--gold); }
.gabe-liste { font: 600 19px "Cormorant", serif; color: var(--gold-hell); }
.kk-fenster { text-align: left; }
.kk-kopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.kk-kopf .bild.gross { width: 110px; height: 110px; flex: none; }
.kk-fakten, .kk-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.kk-fakten span { font: 600 13px "Cormorant", serif; border: 1px solid var(--linie2); border-radius: 10px; padding: 1px 8px; }
.kk-tags span { font: 600 13px "Cormorant", serif; border-radius: 10px; padding: 1px 8px; background: rgba(201, 163, 82, calc(var(--w) * .35)); color: var(--text); }
.karteikarte p { font-size: 16px; }
.quelle { font-size: 13px; color: var(--leise); font-style: italic; border-top: 1px solid var(--linie); padding-top: 8px; margin-top: 12px; }
.start-fenster { width: min(620px, 100%); }
.start-signet { width: 130px; height: 130px; }
.start h1 { font: 400 46px/1 "Fraktur", serif; color: var(--gold-hell); margin: 6px 0 2px; }
.start > p { font-size: 17px; }
.figuren { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.figur { background: rgba(255, 255, 255, .03); border: 1px solid var(--linie2); border-radius: 8px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.figur .bild { width: 80px; height: 72px; }
.figur b { font: 400 26px "Fraktur", serif; color: var(--gold-hell); }
.figur small { color: var(--leise); font-style: italic; }
.figur.an { border-color: var(--gold); background: rgba(201, 163, 82, .12); box-shadow: 0 0 16px rgba(232, 200, 119, .25); }
.namensfeld { display: flex; flex-direction: column; gap: 4px; align-items: center; font: 600 14px "Cormorant", serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.namensfeld input { font: 400 18px "Garamond", serif; color: var(--text); background: #120b06; border: 1px solid var(--linie2); border-radius: 4px; padding: 7px 12px; width: min(280px, 100%); text-align: center; text-transform: none; letter-spacing: 0; }
/* 31.10. (Einstieg): am Handy kürzer, damit „Die Kate betreten“ ohne Scrollen zu sehen ist, auch im kurzen Instagram-Browser */
@media (max-width: 640px), (max-height: 760px) {
  .start-signet { width: 76px; height: 76px; }
  .start h1 { font-size: 38px; margin-top: 2px; }
  .start > p { font-size: 16px; margin: 6px 0; }
  .start h3 { margin: 8px 0 4px; }
  .figuren { gap: 8px; margin: 4px 0 10px; }
  .figur { padding: 6px 8px 8px; gap: 1px; }
  .figur .bild { width: 52px; height: 46px; }
  .figur b { font-size: 22px; }
  .figur small { font-size: 13px; line-height: 1.25; }
  .namensfeld { flex-direction: row; justify-content: center; gap: 10px; }
  .namensfeld input { width: min(200px, 60%); padding: 6px 10px; }
}
/* 31.10. (Einstieg): Was Olorien in der Einführung nennt, leuchtet am Wirktisch */
.kachel.zeig { animation: zeig 1.6s infinite; border-color: var(--gold); }
.kachel.zeig-glut .kachel-glut { animation: zeig 1.6s infinite; color: var(--gold-hell); }
.knopf.wirken.zeig { animation: zeig 1.6s infinite; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.toast { background: linear-gradient(#3a2512, #24160a); border: 1px solid var(--linie2); border-left: 4px solid var(--gold); color: var(--text); border-radius: 4px; padding: 8px 14px; font-size: 15px; max-width: 360px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); animation: herein .3s ease-out; transition: opacity .5s, transform .5s; }
.toast.weg { opacity: 0; transform: translateX(20px); }
.toast.plus { border-left-color: var(--gruen); }
.toast.warn { border-left-color: #d0604a; }
.toast.tuer { border-left-color: var(--rot); }
.toast.reif { border-left-color: var(--gold-hell); }
.toast.neu { border-left-color: #7aa4c4; }
@keyframes herein { from { transform: translateX(30px); opacity: 0; } }

/* ---------- Schmal (Handy, schmales Fenster) ---------- */
@media (max-width: 980px) {
  .rahmen { grid-template-columns: 82px minmax(0, 1fr); }
  .seite { grid-column: 2; grid-row: 3; border-left: 0; border-top: 1px solid var(--linie); }
  .rahmen { grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 100dvh; }
  body { overflow: auto; }
  .buehne, .seite { overflow: visible; }
  .orte { grid-row: 2 / 4; position: sticky; top: 0; height: 100dvh; }
  .wirken-fuss { bottom: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .rahmen { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .kopf { flex-wrap: wrap; gap: 6px 10px; padding: 6px 12px; position: sticky; top: 0; z-index: 30; }
  .marke { font-size: 18px; } .marke img { width: 30px; height: 30px; }
  .uhr { font-size: 13px; padding: 2px 8px; order: 3; }
  .uhr small { display: none; }
  .mond-echt { order: 4; font-size: 13px; }
  .mond-text { overflow: hidden; text-overflow: ellipsis; }
  .rang-knopf { order: 5; min-width: 0; flex: 1; font-size: 13px; padding: 3px 8px; }
  .taler { font-size: 17px; }
  .ton-knopf { width: 28px; height: 28px; }
  .orte { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: 30; flex-direction: row; overflow-x: auto; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--linie2); background: #1a1008; gap: 0; }
  .ort { flex: 1 1 0; min-width: 48px; font-size: 11.5px; padding: 4px 0; }
  .ort .bild { width: 30px; height: 28px; }
  .abz { right: 4px; }
  .buehne, .seite { grid-column: 1; }
  .seite { grid-row: 3; padding: 14px 16px; }
  .stube-inhalt { padding: 16px; }
  .stube-gruss { margin-top: 14px; }
  .stube-gruss h1 { font-size: 32px; }
  .ansicht-werktisch { padding: 8px 10px 16px; }
  .tisch { width: 100%; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .beete { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; }
  .beet { height: 190px; }
  .pflanze .bild { width: 96px; height: 96px; }
  .garten-unten, .bach-unten { padding: 0 12px; }
  .streifen-text h1 { font-size: 30px; }
  .himmel-streifen, .kraemer-kopf { height: 150px; }
  .streifzug { padding: 12px; }
  .ware-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .buch-seite { margin: 0 12px; padding: 14px; }
  .figuren { grid-template-columns: 1fr 1fr; }
  .fenster-karte { padding: 20px 16px; }
  .toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; }
  .fund { width: 100px; height: 140px; }
  .fund-vorn .bild { width: 64px; height: 64px; }
  .besuch { gap: 10px; }
  .siegelchen { width: 38px; height: 38px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---------- Feste: Allerseelen ---------- */
.fest-tafel { border-color: rgba(170, 190, 230, .45); background: linear-gradient(rgba(22, 24, 38, .9), rgba(14, 12, 18, .9)); box-shadow: 0 0 30px rgba(140, 160, 220, .12); }
.fest-tafel h2 { color: #dfe6f8; text-shadow: 0 0 14px rgba(170, 190, 240, .5); }
.fest-tafel.bald { border-style: dashed; }
.fest-unter { font: italic 500 16px "Cormorant", serif; color: #b9c4e2; }
.lichter { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 6px; }
.licht { position: relative; width: 40px; height: 48px; display: inline-flex; }
.licht .bild { width: 100%; height: 100%; }
.licht:not(.an) .bild img { filter: grayscale(1) brightness(.45) !important; }
.licht .flamme { top: -8%; width: 22%; height: 34%; }
.fest-hinweise { margin: 8px 0 0; padding-left: 18px; font-size: 15px; color: #cfd6ea; }
.fest-hinweise li { margin-bottom: 3px; }
.anliegen-chip.fest { border-color: rgba(170, 190, 230, .6); color: #c9d4f0; }
.besuch.seele { background: radial-gradient(ellipse at 20% 50%, rgba(160, 180, 230, .14), transparent 70%); border-radius: 6px; padding-left: 8px; animation: geistern 5s ease-in-out infinite; }
.besuch.seele .siegelchen { background: radial-gradient(circle at 40% 35%, #eef2ff, #8a98c0 70%); color: #3a4260; box-shadow: 0 0 18px rgba(190, 205, 255, .55); font-family: "Garamond", serif; }
.besuch.seele .besuch-text > b, .besuch.seele p { color: #dfe6f8; text-shadow: 0 0 8px rgba(170, 190, 240, .45); }
@keyframes geistern { 50% { opacity: .78; } }
.toast.seele { border-left-color: #aab8e6; background: linear-gradient(#232638, #15161f); }
.ware.fest { border-color: rgba(170, 190, 230, .55); box-shadow: 0 0 12px rgba(140, 160, 220, .15); }
.fest-hinweis-laden { margin: 12px 16px 0; font: italic 500 16px "Cormorant", serif; color: #c9d4f0; }
.ziel.fest { border-color: rgba(170, 190, 230, .5); }
.rezept-karte.fest small { color: #b9c4e2; }
.licht-plus { margin: 10px 0; padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(170, 190, 230, .5); color: #e6ecfb; font: 600 18px "Cormorant", serif; background: rgba(120, 140, 200, .12); }
.fest-fenster, .seele-ergebnis { border-color: #aab8e6; box-shadow: 0 0 60px rgba(150, 170, 240, .25), 0 20px 60px rgba(0, 0, 0, .8); }
.fest-fenster h2 { color: #eef2ff; text-shadow: 0 0 20px rgba(170, 190, 255, .6); }
/* 30.10.: Gaben-Fenster des Festes mit Bild, Lichterreihe und Gaben-Kärtchen */
.fenster-karte.fest-gabe-fenster { width: min(640px, 100%); padding-top: 0; overflow-x: hidden; background: radial-gradient(ellipse at 50% 30%, #1d2338, #140f12 55%, #0e0907); }
.fest-gabe-fenster .fenster-zu { z-index: 3; color: #eef2ff; text-shadow: 0 1px 6px #000; }
.fest-gabe-bild { position: relative; margin: 0 -26px 16px; aspect-ratio: 1344 / 768; overflow: hidden; }
.fest-gabe-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; animation: gabe-bild 9s ease-out both; }
.fest-gabe-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 15, 18, 0) 78%, rgba(20, 15, 18, .6) 92%, #140f12); pointer-events: none; }
.fest-gabe-bild .lichter { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 1; justify-content: center; gap: 2px; margin: 0; }
.fest-gabe-bild .licht { width: 34px; height: 41px; }
.fest-gabe-bild .licht.an .bild img { filter: drop-shadow(0 0 8px rgba(255, 200, 110, .7)) !important; }
.fest-gabe-bild .licht.neu .flamme { animation: licht-auf .7s calc(.6s + var(--i) * .35s) ease-out backwards, flackern .9s calc(1.3s + var(--i) * .35s) ease-in-out infinite alternate; }
.fest-gabe-bild .licht.neu .bild img { animation: licht-glanz .7s calc(.6s + var(--i) * .35s) ease-out backwards; }
@keyframes gabe-bild { from { transform: scale(1.08); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
@keyframes licht-auf { from { opacity: 0; transform: translateX(-50%) scale(.2); } 60% { opacity: 1; transform: translateX(-50%) scale(1.5); } to { transform: translateX(-50%) scale(1); } }
@keyframes licht-glanz { from { filter: grayscale(1) brightness(.45); } }
.fest-gabe small { color: #b9c4e2; }
.fest-gabe h2 { font-size: 38px; margin: 2px 0 8px; }
.gabe-karten { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.gabe-karte { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid rgba(232, 200, 119, .35); border-radius: 8px; background: rgba(232, 200, 119, .07); font: 600 18px "Cormorant", serif; color: var(--gold-hell); text-align: left; line-height: 1.15; animation: einblenden .5s both; }
.gabe-karte:nth-child(2) { animation-delay: .15s; } .gabe-karte:nth-child(3) { animation-delay: .3s; }
.gabe-karte .bild { width: 34px; height: 34px; flex: none; }
.gabe-karte .muenze { width: 22px; height: 22px; }
.gabe-zeichen { width: 30px; text-align: center; font-size: 22px; color: var(--gold); text-shadow: 0 0 10px rgba(232, 200, 119, .6); }
.gabe-karte small { display: block; font: 600 11px "Cormorant", serif; letter-spacing: .16em; text-transform: uppercase; color: #b9c4e2; }
.gabe-karte.titel { border-color: #aab8e6; background: rgba(150, 170, 240, .1); color: #eef2ff; }
@media (max-width: 640px) { .fest-gabe-bild { margin: 0 -16px 12px; } .fest-gabe-bild .licht { width: 26px; height: 32px; } .fest-gabe h2 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .fest-gabe-bild > img, .fest-gabe-bild .licht.neu .flamme, .fest-gabe-bild .licht.neu .bild img, .gabe-karte { animation: none; } }
.seele-folge { border-left-color: #aab8e6; background: rgba(150, 170, 230, .08); }
.seele-folge b { color: #b9c4e2; }
.karte-land .kirche path { fill: none; stroke: #4a3218; stroke-width: 1.6; stroke-linecap: round; }
.karte-land text.leuchtet { fill: #3a3f70; text-shadow: 0 0 6px rgba(120, 140, 220, .6); }
body.fest-allerseelen .stube-bild { filter: saturate(.55) hue-rotate(195deg) brightness(.8); }
body.fest-allerseelen .stube::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse 40% 18% at 20% 70%, rgba(200, 210, 240, .18), transparent), radial-gradient(ellipse 50% 20% at 75% 80%, rgba(200, 210, 240, .14), transparent);
  animation: nebel 18s ease-in-out infinite alternate; }
@keyframes nebel { to { transform: translateX(6%); opacity: .8; } }
body.fest-allerseelen .stube-inhalt { z-index: 1; }
.szene.stube { overflow: hidden; }

/* ---------- Die Karte von oben ---------- */
.ansicht-karte { overflow: hidden; }
.karte-szene { height: 100%; min-height: 0; padding: 0; position: relative; }
.ansicht-karte .tut { position: absolute; left: 0; right: 0; top: 0; }
.karte-scroll { height: 100%; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(201, 163, 82, .4) transparent; -webkit-user-select: none; user-select: none; }
.karte-scroll.zieht { cursor: grabbing; }
.karte-welt { position: relative; height: 100%; aspect-ratio: 2560 / 1097; min-width: 100%; overflow: hidden; }
.karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.karte-bild.tag { filter: brightness(calc(1 - var(--nacht) * .5)) saturate(calc(1 - var(--nacht) * .35)); transition: filter 1.2s linear; }   /* am Abend nur dunkler, das Nachtbild kommt erst beim Umschalten (--nachtbild) */
.karte-bild.nacht { opacity: var(--nachtbild, var(--nacht)); transform: translateY(2.2%) scale(1.045); transition: opacity 1.2s linear; filter: brightness(1.18) saturate(1.05); }
.karte-bild.nacht.seelen { transform: translateY(1.4%) scale(1.04); }
.karte-daemmer { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--daemmer) * .85); background: linear-gradient(rgba(255, 150, 70, .45), rgba(170, 70, 90, .25) 60%, rgba(60, 30, 70, .3)); mix-blend-mode: soft-light; transition: opacity 1.2s; }
.karte-nebel { position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: radial-gradient(ellipse 30% 9% at 30% 72%, rgba(230, 236, 246, .35), transparent), radial-gradient(ellipse 34% 8% at 70% 60%, rgba(230, 236, 246, .28), transparent), radial-gradient(ellipse 50% 14% at 50% 32%, rgba(230, 236, 246, .3), transparent);
  animation: kartennebel 26s ease-in-out infinite alternate; }
@keyframes kartennebel { to { transform: translateX(4%); opacity: .55; } }
.karte-szene.fest .karte-nebel { opacity: .7; filter: hue-rotate(190deg); }
.gluehwurm { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff2b0; box-shadow: 0 0 8px 3px rgba(255, 220, 120, .65); pointer-events: none;
  opacity: calc(var(--nacht) * .9 + var(--daemmer) * .5); animation: schweben 6s ease-in-out infinite alternate; }
.karte-szene.fest .gluehwurm { background: #e6eeff; box-shadow: 0 0 10px 4px rgba(170, 195, 255, .7); }
@keyframes schweben { 0% { transform: translate(0, 0); } 33% { transform: translate(14px, -10px); } 66% { transform: translate(-8px, -22px); } 100% { transform: translate(10px, 6px); } }
.karten-ziel { position: absolute; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 4px; cursor: pointer; }
.karten-ziel i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(#fff6c8, #e8b84a 60%, rgba(232, 184, 74, 0)); box-shadow: 0 0 16px 6px rgba(255, 210, 110, .5); animation: zielpuls 2.6s infinite; }
.karten-ziel span { font: 600 15px "Cormorant", serif; color: #fff4e0; background: rgba(20, 12, 6, .8); border: 1px solid var(--gold); border-radius: 14px; padding: 2px 12px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); transition: background .2s; }
.karten-ziel:hover span, .karten-ziel:focus-visible span { background: #7d2414; }
.karten-ziel em { position: absolute; top: -4px; right: -6px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--rot); color: #fff; font: 600 12px/19px "Garamond", serif; font-style: normal; text-align: center; padding: 0 5px; box-shadow: 0 0 0 2px #1a1008; }
.karten-ziel.zu { opacity: .6; } .karten-ziel.zu i { filter: grayscale(1); animation: none; }
.karten-ziel.fest i { background: radial-gradient(#f2f5ff, #9fb2e8 60%, rgba(159, 178, 232, 0)); box-shadow: 0 0 18px 7px rgba(170, 190, 255, .55); }
.karten-ziel.fest span { border-color: #aab8e6; }
.karten-ziel.zeig span { animation: zeig 1.6s infinite; }
@keyframes zielpuls { 50% { transform: scale(1.35); } }
.karte-fuss { position: absolute; left: 14px; bottom: 12px; z-index: 3; max-width: calc(100% - 28px); background: rgba(14, 9, 5, .72); border: 1px solid var(--linie2); border-radius: 6px; padding: 6px 12px; font-size: 14px; pointer-events: none; }
@media (max-width: 980px) {
  .ansicht-karte { overflow: visible; }
  .karte-szene { height: auto; }
  .karte-scroll { height: min(74dvh, 640px); }
  .ansicht-karte .tut { position: sticky; }
}
@media (max-width: 640px) {
  .karte-scroll { height: min(68dvh, 560px); }
  .karten-ziel span { font-size: 13px; padding: 1px 9px; }
  .karte-fuss .leise { display: none; }
}

/* ---------- Gesichter der Menschen (bild/gesicht) ---------- */
.gesicht { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold); background: radial-gradient(circle at 35% 30%, #c4462c, #7b1d10 70%); box-shadow: 0 3px 10px rgba(0, 0, 0, .65), 0 0 0 3px rgba(20, 12, 6, .85); }
.gesicht img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gesicht b { display: none; font: 400 24px "Fraktur", serif; color: #f6d9c8; }
.gesicht.ohne b { display: block; }
.gesicht.seele { border-color: #aab8e6; background: #1b2238; box-shadow: 0 0 18px rgba(170, 190, 255, .55), 0 0 0 3px rgba(20, 22, 36, .85); }
.gesicht.seele img { filter: grayscale(.55) sepia(.15) hue-rotate(185deg) brightness(1.2) contrast(.92); opacity: .78; animation: geistern 5s ease-in-out infinite; }
.besuch .gesicht { width: 68px; height: 68px; }
.gesicht.gross { width: 84px; height: 84px; }
.chip-gesicht { width: 24px; height: 24px; border-width: 1px; box-shadow: none; margin: -3px 7px -3px -7px; vertical-align: middle; }
.chip .gesicht b { font-size: 13px; }
.auftrag-zeile { grid-template-columns: auto 1fr auto; align-items: center; }
.auftrag-zeile > .zeile-gesicht { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; border-width: 1px; margin-right: 4px; }
.auftrag-zeile > b, .auftrag-zeile > span:not(.gesicht) { grid-column: 2; }
.auftrag-zeile em { grid-column: 3; }
.toast-gesicht { width: 30px; height: 30px; border-width: 1px; box-shadow: none; vertical-align: middle; margin: -4px 9px -4px -4px; }
.mit-gesicht { display: flex; gap: 14px; align-items: flex-start; }
.mit-gesicht > div, .mit-gesicht > p { flex: 1; min-width: 0; margin: 0; }
.reaktion.mit-gesicht { align-items: center; text-align: left; max-width: 440px; margin: 14px auto; }
.dorf-person .gesicht { width: 54px; height: 54px; }
@media (max-width: 640px) {
  .besuch .gesicht { width: 54px; height: 54px; }
  .gesicht.gross { width: 64px; height: 64px; }
}

/* ---------- Lernen: Quellen, Lehrsätze, Belege ---------- */
.q { display: inline-block; font: 600 11px/1.5 "Cormorant", serif; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); background: rgba(201, 163, 82, .1); border: 1px solid rgba(201, 163, 82, .35); border-radius: 9px; padding: 0 7px; margin-left: 2px; vertical-align: 1px; white-space: nowrap; cursor: pointer; }
span.q { cursor: help; }
button.q:hover { background: rgba(201, 163, 82, .25); color: #fff3d6; }
.q-spiel { color: #9a8f7a; border-color: rgba(154, 143, 122, .4); background: none; }
.q-werkstatt { color: #c7a98a; border-color: rgba(199, 169, 138, .4); }
.q-zerem, .q-psalm { color: #b9c4e2; border-color: rgba(185, 196, 226, .4); background: rgba(185, 196, 226, .07); }
.rat-grund { display: block; margin-top: 3px; color: var(--leise); font-size: 13px; line-height: 1.35; }
.gelernt { text-align: left; margin: 12px 0; padding: 10px 14px; border: 1px solid rgba(127, 168, 106, .5); border-radius: 6px; background: rgba(127, 168, 106, .08); }
.gelernt b { font: 600 13px "Cormorant", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen); }
.gelernt ul { margin: 6px 0 4px; padding-left: 18px; font-size: 15px; }
.gelernt li { margin-bottom: 4px; }
.gelernt small { color: var(--leise); }
.lehre-gruppe { margin-bottom: 12px; }
.lehre-gruppe h3 small { font: italic 500 13px "Cormorant", serif; letter-spacing: 0; text-transform: none; color: var(--leise); margin-left: 6px; }
.lehrsaetze { margin: 0; padding-left: 20px; font-size: 15px; }
.lehrsaetze li { margin-bottom: 5px; }
.vereinfacht { padding-left: 20px; font-size: 15px; color: var(--leise); }
.vereinfacht li { margin-bottom: 6px; }
.vereinfacht b { color: var(--text); font-weight: 600; }
.quellen-liste { padding-left: 22px; font-size: 15px; }
.quellen-liste li { margin-bottom: 6px; }
.quellen-liste small { display: block; color: var(--leise); font-style: italic; }
.beleg { font-size: 14px; color: var(--leise); font-style: italic; margin: 6px 0 0; }
.entdeckung .beleg { color: #e8d9b4; text-align: left; }
.im-spiel { border-left: 3px solid var(--bernstein); padding-left: 10px; color: var(--leise); }
.quelle-fenster small { font: 600 12px "Cormorant", serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.kachel-glut.nein { background: none; color: rgba(234, 217, 179, .38); font-style: italic; }
.kachel-glut.nein:hover { background: rgba(255, 255, 255, .04); color: var(--leise); }

/* ---------- Olorien, der alte Druide (Ratgeber) ---------- */
.gesicht.olorien { border-color: #cfe0c0; background: #e8e2d2; box-shadow: 0 0 14px rgba(200, 225, 190, .35), 0 0 0 3px rgba(20, 12, 6, .85); }
.olorien-rede { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.olorien-rede > .gesicht { width: 58px; height: 58px; }
.olorien-rede > div { flex: 1; min-width: 0; }
.olorien-rede > div > b { display: block; font: 400 20px/1.1 "Fraktur", serif; color: #d9e6cc; margin-bottom: 2px; }
.olorien-rede small { display: block; font: 600 12px "Cormorant", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.olorien-rede p { margin: 4px 0 0; font-style: italic; }
.tut { display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
.tut::before { display: none; }
.tut > div { flex: 1; min-width: 0; }
.tut > div > b:first-child { font: 400 18px "Fraktur", serif; color: #d9e6cc; }
.tut-gesicht { width: 46px; height: 46px; border-width: 1.5px; }
.rat-kopf { display: flex; align-items: center; gap: 8px; }
.mini-olorien { width: 26px; height: 26px; border-width: 1px; box-shadow: none; }
.folge .mini-olorien { float: left; margin: 2px 8px 0 0; }
.gelernt { display: flex; gap: 12px; align-items: flex-start; }
.gelernt > div { flex: 1; min-width: 0; }
.gelernt-olorien { width: 46px; height: 46px; }
.olorien-satz { margin: 2px 0 0; font-style: italic; color: #d9e6cc; font-size: 15px; }
.quelle-fenster > .gesicht.gross { display: flex; margin: 0 auto 8px; }
.olorien-tafel { border-color: rgba(200, 225, 190, .45); background: linear-gradient(rgba(26, 30, 20, .88), rgba(18, 14, 8, .88)); }
.olorien-tafel p { font-size: 16px; }
.lehre-olorien { margin: 4px 0 16px; padding: 10px 12px; border-left: 3px solid rgba(200, 225, 190, .5); background: rgba(200, 225, 190, .05); }
.start-olorien { margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(200, 225, 190, .3); border-radius: 6px; background: rgba(200, 225, 190, .05); }
.dorf-person.olorien-karte { border-color: rgba(200, 225, 190, .5); background: rgba(200, 225, 190, .05); grid-column: 1 / -1; }
.dorf-person.olorien-karte .leise { display: block; font-size: 14px; }
@media (max-width: 640px) { .tut-gesicht { width: 38px; height: 38px; } .olorien-rede > .gesicht { width: 48px; height: 48px; } }

/* ---------- Garten als Bild mit Beeten (bild/garten.jpg, bild/pflanze/*.png) ---------- */
.garten-szene { padding-bottom: 24px; background: #120d08; }
.garten-rahmen { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(201, 163, 82, .4) transparent; }
.garten-welt { position: relative; width: 100%; aspect-ratio: 2200 / 1189; isolation: isolate; }   /* eigene Ebene: Schilder (z-index 1000) bleiben unter den Fenstern */
.garten-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }
.garten-nacht { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(10, 14, 40, .75), rgba(10, 14, 40, .55)); mix-blend-mode: multiply; opacity: calc(var(--nacht) * .85); transition: opacity 1.2s linear; }
/* Beete: Hülle ohne Box, die Erde ist ein Viereck (clip-path), die Pflanzen stehen einzeln in Bildprozent */
.g-beet { display: contents; }
.g-boden { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; margin: 0; background: rgba(232, 200, 119, 0); cursor: pointer; transition: background .25s; }
.g-boden:hover, .g-boden:focus-visible { background: rgba(232, 200, 119, .22); outline: none; }
.g-beet.zeig .g-boden { animation: bodenzeig 1.6s infinite; }
@keyframes bodenzeig { 50% { background: rgba(232, 200, 119, .32); } }
.g-boden.zu { background: rgba(14, 9, 5, .42); cursor: default; pointer-events: none; }
/* Wachsen: vom Keimling (22 %) zur vollen Pflanze, Farbe kommt mit der Reife; der Fuß bleibt in der Erde */
.pf { position: absolute; pointer-events: none; transform-origin: 50% 100%; transform: translate(-50%, -92%) scale(calc(.22 + var(--p) * .78)); transition: transform 1s linear; }
.pf img { display: block; width: 100%; height: auto; transform-origin: 50% 100%;
  filter: saturate(calc(.35 + var(--p) * .65)) brightness(calc((.72 + var(--p) * .28) * (1 - var(--nacht, 0) * .45))) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.pf:nth-of-type(odd) img { transform: scaleX(-1); }             /* nicht sechsmal dieselbe Pflanze */
.g-beet.reif .pf { transform: translate(-50%, -92%) scale(1.04); }
.g-beet.reif .pf img { filter: brightness(calc(1 - var(--nacht, 0) * .4)) drop-shadow(0 0 7px rgba(190, 240, 140, .8)) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); animation: reifwiegen 3s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.5s); }
.g-beet.reif .pf:nth-of-type(odd) img { animation-name: reifwiegen2; }
@keyframes reifwiegen { from { transform: rotate(-1.5deg); } to { transform: rotate(2deg); } }
@keyframes reifwiegen2 { from { transform: scaleX(-1) rotate(-1.5deg); } to { transform: scaleX(-1) rotate(2deg); } }
.garten-szene .g-ziel { z-index: 1000; }
.g-ziel.haus span { border-color: #e8c877; }
.g-ziel { z-index: 3; padding: 0; gap: 2px; }
.g-ziel i { width: 12px; height: 12px; }
.g-ziel span { font-size: 13px; padding: 1px 9px; line-height: 1.2; text-align: center; }
.g-ziel small { display: block; font: italic 500 11.5px "Cormorant", serif; color: var(--leise); }
.g-ziel.reif span { border-color: #8fc36a; }
.g-ziel.reif i { background: radial-gradient(#f4ffd8, #8fc36a 60%, rgba(143, 195, 106, 0)); box-shadow: 0 0 16px 6px rgba(170, 230, 130, .55); }
.g-ziel:disabled { opacity: .6; cursor: default; }
.g-ziel:disabled i { animation: none; filter: grayscale(1); }
.garten-fuss { position: static; margin: 10px 16px 14px; display: inline-block; pointer-events: auto; }
.saatwahl .ware small + small { margin-top: 2px; }
@media (max-width: 640px) {
  .garten-welt { width: 780px; }
}

/* ---------- Bach, Wald, Krämer als Bilder (wie der Garten) ---------- */
.ort-welt { aspect-ratio: 2200 / 1228; }
.garten-bild.ort-nacht { opacity: var(--nachtbild, var(--nacht)); transition: opacity 1.2s linear; }
.karten-ziel.an span { background: #7d2414; border-color: #d06a4a; }
.bach-szene .bach-unten, .streifzug-unten { margin-top: 0; }
.streifzug-unten { padding: 0 16px; }
.streifzug.garten-szene { padding: 0 0 24px; }
.fach-leiste { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; border-top: 1px solid var(--linie2); }
.kraemer .ware-gitter { border-top: 0; }
.ziele.im-fenster { grid-template-columns: 1fr; margin-top: 12px; text-align: left; }
.rabe-fenster { width: min(620px, 100%); }
.lernkarte-fenster { text-align: left; }
.neu-lehrsatz { color: var(--gruen); font: 600 14px "Cormorant", serif; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 640px) { .streifzug-unten { padding: 0 12px; } .fach-leiste { padding: 10px 12px 0; } }
/* Streifzug: Orte als Reiter über dem Bild */
.streif-reiter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; }
.streif-reiter .chip.fest { border-color: rgba(170, 190, 230, .6); color: #c9d4f0; }
.streif-reiter .chip.fest.an { background: linear-gradient(#3a4470, #252c4a); border-color: #aab8e6; color: #eef2ff; }
.karten-ziel.zu:not(:disabled) { opacity: .75; }
.fest-ort .g-ziel span { border-color: #aab8e6; }
/* Die Kate ausbauen */
.ausbau-zeile { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--linie); }
.ausbau-zeile:first-of-type { border-top: 0; }
.ausbau-zeile small { display: block; color: var(--leise); }
.ausbau-zeile .stufen { color: var(--gold-hell); letter-spacing: 2px; font-size: 13px; }
.ausbau-zeile .knopf { display: inline-flex; align-items: center; gap: 4px; }

/* Impressum und Datenschutz (Start und Bücher) */
.rechtliches { margin: 18px 0 0; font-size: 14px; text-align: center; color: var(--leise, rgba(234, 217, 179, .6)); }
.rechtliches a { color: inherit; }

/* ---------- Breite Bildschirme: Platz nutzen statt einer schmalen Mitte ---------- */
/* Wirktisch: der Tisch links so groß, wie die Höhe erlaubt; Auftrag und Beutel rechts daneben */
@media (min-width: 1400px) and (min-height: 600px) {
  .wt-raster { display: grid; grid-template-columns: auto minmax(340px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "tisch auftrag" "tisch beutel"; gap: 14px 28px; align-items: start; }
  .wt-auftrag { grid-area: auftrag; }
  .wt-raster > .tisch-rahmen { grid-area: tisch; position: sticky; top: 8px; }
  .wt-raster > .beutel-leiste { grid-area: beutel; margin-top: 0; }
  .wt-raster .tisch { width: min(calc(100dvh - 150px), calc(100vw - 900px), 900px); }
  .wt-auftrag .auftrag-jetzt { font-size: 16px; background: rgba(42, 26, 12, .55); border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; }
  .ansicht-werktisch { padding: 14px 22px 22px; }
}
/* Stube: links Tür und Tag, rechts Werkbank und Ausbau */
@media (min-width: 1440px) {
  .stube-inhalt { max-width: 1440px; padding: 26px 34px 14px; }
  .stube-spalten { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 26px; align-items: start; }
}

/* Wirktisch im Innenraum der Kate: weichgezeichnetes Bild (bild/werkraum-weich.jpg), bleibt beim Scrollen stehen */
.buehne.ansicht-werktisch { background: linear-gradient(180deg, rgba(10, 6, 4, .38), rgba(10, 6, 4, .55) 55%, rgba(10, 6, 4, .82)), url("bild/werkraum-weich.jpg") center 40% / cover no-repeat, #0d0805; }
.ansicht-werktisch .tisch { box-shadow: inset 0 0 90px rgba(0, 0, 0, .85), 0 0 0 1px rgba(232, 200, 119, .18), 0 18px 60px rgba(0, 0, 0, .85), 0 0 120px rgba(255, 170, 80, .12); }
.ansicht-werktisch .auftrag-jetzt { background: rgba(20, 12, 6, .72); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; }
.ansicht-werktisch .beutel-leiste { background: rgba(14, 9, 5, .58); border: 1px solid rgba(201, 163, 82, .18); border-radius: 10px; padding: 10px; }
.ansicht-werktisch .kachel { background: linear-gradient(rgba(42, 26, 12, .92), rgba(32, 20, 10, .92)); }

/* ---------- Konto (js/konto.js) ---------- */
.konto-start { display: none; margin: 10px 0 0; text-align: center; }
body.konto-an .konto-start { display: block; }
.konto-knopf { font: 600 14px "Cormorant", serif; color: var(--gold-hell); background: rgba(42, 26, 12, .8); border: 1px solid var(--linie2); border-radius: 14px; padding: 3px 12px; cursor: pointer; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-knopf:hover { background: #3c2712; }
.konto-fenster { max-width: 440px; margin: 0 auto; }
.konto-fenster h2 { margin-top: 0; }
.konto-fenster form { display: grid; gap: 10px; margin: 12px 0 6px; }
.konto-fenster label { display: grid; gap: 3px; font: 600 15px "Cormorant", serif; color: var(--gold-hell); text-align: left; }
.konto-fenster label small { font-weight: 500; font-style: italic; color: var(--leise); }
.konto-fenster input { font: 16px "Garamond", serif; color: var(--text); background: rgba(10, 6, 4, .7); border: 1px solid var(--linie2); border-radius: 6px; padding: 9px 11px; }
.konto-fenster input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232, 200, 119, .2); }
.konto-fenster .knopf.haupt { justify-self: start; }
.konto-fehler { color: #f0a090; margin: 0; font-size: 15px; }
.konto-klein { font-size: 14px; color: var(--leise); margin: 6px 0; }
.konto-klein a { color: var(--gold-hell); }
.konto-wechsel { font-size: 15px; color: var(--leise); margin: 10px 0 0; }
.verweis { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-hell); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.konto-fenster .olorien-rede { margin-bottom: 12px; }
.konto-loeschen { margin-top: 16px; font-size: 15px; color: var(--leise); }
.konto-loeschen summary { cursor: pointer; }
@media (max-width: 640px) { .konto-knopf { order: 6; font-size: 13px; } }
.speichern-knopf { font: 600 14px "Cormorant", serif; color: #fff4e0; background: linear-gradient(#7d2414, #5a1a0e); border: 1px solid #d06a4a; border-radius: 14px; padding: 3px 12px; cursor: pointer; white-space: nowrap; }
.speichern-knopf:hover { background: linear-gradient(#9a2c1b, #6d2010); }
.speichern-knopf:disabled { cursor: default; opacity: .85; }
.speichern-knopf.ok { background: linear-gradient(#4f6f3a, #3a5229); border-color: #8fc36a; }
@media (max-width: 640px) { .speichern-knopf { order: 6; font-size: 13px; } }

/* Reifes Beet: Sichel als Mauszeiger (bild/sichel-32/64.png, Spitze der Klinge = Klickpunkt) */
.g-beet.reif .g-boden, .g-ziel.reif[data-a="beet"] { cursor: url("bild/sichel-32.png") 8 5, pointer; cursor: image-set(url("bild/sichel-32.png") 1x, url("bild/sichel-64.png") 2x) 8 5, pointer; }
.g-beet.reif .g-boden:hover { background: rgba(170, 230, 130, .2); }

/* ---------- Rangaufstieg: der große Moment (js/spiel.js aufstiegZeigen) ---------- */
.fenster:has(.aufstieg-fenster) { background: radial-gradient(circle at 50% 38%, rgba(255, 210, 120, .28), rgba(5, 3, 2, .9) 60%); animation: aufblitz 1.2s ease-out; }
@keyframes aufblitz { 0% { background-color: rgba(255, 240, 200, .9); } 100% { background-color: transparent; } }
.fenster-karte.aufstieg-fenster { width: min(620px, 100%); text-align: center; overflow-x: hidden; border: 2px solid var(--gold-hell); background: radial-gradient(ellipse at 50% 0%, #4a3013, #24160a 45%, #160d06);
  box-shadow: 0 0 0 1px rgba(232, 200, 119, .3), 0 0 80px rgba(232, 200, 119, .35), 0 30px 80px rgba(0, 0, 0, .9); animation: aufsteigen .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes aufsteigen { from { transform: scale(.6) translateY(40px); opacity: 0; } }
.aufstieg-buehne { position: relative; height: 250px; margin: -6px 0 6px; display: flex; align-items: center; justify-content: center; }
.aufstieg-strahlen { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .34) 0deg 5deg, rgba(255, 220, 140, 0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  animation: strahlen 18s linear infinite, strahlenAuf 1.4s ease-out both; }
@keyframes strahlen { to { transform: rotate(360deg); } }
@keyframes strahlenAuf { from { opacity: 0; transform: scale(.3); } }
.aufstieg-bild { position: relative; width: 210px; height: 210px; border-radius: 50%; padding: 5px; background: linear-gradient(135deg, #fff1c4, #c9a352 40%, #8a6a24 60%, #f2d78a);
  box-shadow: 0 0 40px rgba(255, 210, 120, .8), 0 0 100px rgba(255, 190, 90, .45); animation: medaille 1.1s .15s cubic-bezier(.2, 1.3, .3, 1) both, gluehen 2.8s 1.3s ease-in-out infinite alternate; }
.aufstieg-bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
@keyframes medaille { from { transform: scale(.1) rotate(-200deg); opacity: 0; } 70% { transform: scale(1.12) rotate(8deg); opacity: 1; } }
@keyframes gluehen { to { box-shadow: 0 0 60px rgba(255, 220, 140, 1), 0 0 140px rgba(255, 190, 90, .6); } }
.aufstieg-funken { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.aufstieg-funken i { position: absolute; left: 0; top: 0; width: var(--g); height: var(--g); border-radius: 50%; background: #fff3c8; box-shadow: 0 0 10px 3px rgba(255, 200, 100, .9); opacity: 0;
  animation: funke 1.7s calc(.35s + var(--v)) ease-out both, funkeNach 3.2s calc(2.2s + var(--v) * 4) ease-in-out infinite; }
@keyframes funke { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } }
@keyframes funkeNach { 0%, 100% { opacity: 0; transform: translate(calc(var(--x) * .55), calc(var(--y) * .55)); } 50% { opacity: .85; transform: translate(calc(var(--x) * .6), calc(var(--y) * .6 - 14px)); } }
.aufstieg-ueber { display: block; font: 600 14px "Cormorant", serif; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); animation: hervor .6s .7s both; }
.aufstieg-titel { font: 400 clamp(38px, 8vw, 58px)/1.05 "Fraktur", serif; margin: 4px 0 6px; background: linear-gradient(100deg, #c9a352 20%, #fff6d6 45%, #e8c877 55%, #c9a352 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(232, 200, 119, .55)); animation: titelAuf .8s .85s cubic-bezier(.2, 1.4, .4, 1) both, schimmer 3.5s 1.8s ease-in-out infinite; }
@keyframes titelAuf { from { opacity: 0; transform: scale(1.8); letter-spacing: .3em; } }
@keyframes schimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.aufstieg-ruf { font: italic 600 22px/1.3 "Cormorant", serif; color: #fff1cf; margin: 0 0 14px; text-shadow: 0 0 14px rgba(255, 200, 110, .5); animation: hervor .6s 1.25s both; }
.aufstieg-teil { text-align: left; margin: 12px 0 0; animation: hervor .6s 1.5s both; }
.aufstieg-teil + .aufstieg-teil { animation-delay: 1.75s; } .aufstieg-teil + .aufstieg-teil + .aufstieg-teil { animation-delay: 2s; }
.aufstieg-teil h3 { margin: 0 0 6px; text-align: center; }
.aufstieg-wissen { background: rgba(10, 6, 4, .45); border: 1px solid var(--linie2); border-radius: 8px; padding: 10px 14px; }
.aufstieg-wissen p { margin: 0; font-size: 16px; }
.aufstieg-neu { list-style: none; padding: 0; margin: 0 auto; max-width: 480px; display: grid; gap: 4px; }
.aufstieg-neu li { position: relative; padding: 4px 10px 4px 30px; background: rgba(232, 200, 119, .07); border: 1px solid rgba(232, 200, 119, .18); border-radius: 6px; }
.aufstieg-neu li::before { content: "✦"; position: absolute; left: 10px; top: 4px; color: var(--gold-hell); }
.aufstieg-weiter { margin-top: 18px; animation: hervor .6s 2.3s both; }
@keyframes hervor { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 640px) { .aufstieg-buehne { height: 200px; } .aufstieg-bild { width: 165px; height: 165px; } .aufstieg-strahlen { width: 420px; height: 420px; margin: -210px 0 0 -210px; } .aufstieg-ruf { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .aufstieg-strahlen, .aufstieg-funken { display: none; } }

/* ---------- Gelungenes Werk: Funkenregen und kleine Geschichte (js/spiel.js ergebnis) ---------- */
.funkenregen { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.funkenregen i { position: absolute; top: -12px; left: var(--l); width: var(--s); height: var(--s); border-radius: 50%; background: #fff2c0; box-shadow: 0 0 10px 4px rgba(255, 200, 100, .9), 0 0 22px 8px rgba(255, 170, 60, .35); opacity: 0;
  animation: funkenfall var(--d) var(--v) ease-in both; }
.funkenregen.s3 i { background: #fff7d6; box-shadow: 0 0 10px 4px rgba(255, 214, 120, .95); animation-iteration-count: 2; }
@keyframes funkenfall { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 50% { transform: translate(var(--w), 50vh); } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--w) * -1), 102vh) scale(.5); } }
.geschichte { position: relative; z-index: 3; margin: 12px 0 4px; padding: 12px 16px 10px; text-align: left; border-radius: 6px; color: #2b1a0e;
  background: #f1e6cc url("bild/pergament.webp") center / 420px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 24px rgba(120, 80, 30, .25); animation: geschichteAuf .7s .5s both; }
.geschichte small { display: block; font: 600 12px "Cormorant", serif; letter-spacing: .2em; text-transform: uppercase; color: #8e2a17; margin-bottom: 4px; }
.geschichte p { margin: 0; font: italic 500 18px/1.45 "Cormorant", serif; }
.geschichte .geschichte-dorf { margin-top: 6px; font: 500 15px/1.4 "Garamond", serif; font-style: normal; color: #5a3a1a; }
.geschichte.s1 { background: rgba(255, 255, 255, .05); color: var(--text); box-shadow: none; border: 1px dashed var(--linie2); }
.geschichte.s1 small { color: var(--gold); }
@keyframes geschichteAuf { from { opacity: 0; transform: translateY(10px) rotate(-.6deg); } }
.fenster-karte.ergebnis > :not(.funkenregen):not(.fenster-zu) { position: relative; z-index: 3; }
.fenster-karte.ergebnis > .fenster-zu { z-index: 4; }
@media (prefers-reduced-motion: reduce) { .funkenregen { display: none; } }
/* Saatwahl: was man von dem Kraut schon hat */
.saatwahl .vorrat { display: inline-block; margin: 3px 0 2px; font: 600 13px "Cormorant", serif; color: #cfe6b4; background: rgba(143, 195, 106, .14); border: 1px solid rgba(143, 195, 106, .4); border-radius: 10px; padding: 0 9px; }
.saatwahl .vorrat.leer { color: #f0b98a; background: rgba(217, 150, 58, .14); border-color: rgba(217, 150, 58, .45); }
/* Tür: Abstand zwischen Rolle/Herzen und dem Anliegen (Olaf 18.10.) */
.besuch-text .anliegen-chip { margin-left: 10px; }

/* ---------- Kolk auf dem Dach im Garten (bild/rabe-dach.png über bild/garten-ohne-rabe.jpg) ---------- */
.g-rabe { position: absolute; left: 24.55%; top: 5.47%; width: 8.64%; aspect-ratio: 190 / 172; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; transform-origin: 60% 95%; }
.g-rabe img { display: block; width: 100%; height: 100%; filter: brightness(calc(1 - var(--nacht, 0) * .45)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); pointer-events: none; }
.g-rabe:hover img, .g-rabe:focus-visible img { filter: brightness(calc(1.1 - var(--nacht, 0) * .4)) drop-shadow(0 0 6px rgba(255, 230, 160, .7)); }
.g-rabe.kraeht { animation: rabeKrah 1.6s ease-in-out; }
@keyframes rabeKrah {
  0% { transform: none; } 12% { transform: rotate(-9deg); } 24% { transform: rotate(-13deg) scale(1.04); } 34% { transform: rotate(-5deg); }
  46% { transform: rotate(-12deg) scale(1.04); } 58% { transform: rotate(-4deg); } 70% { transform: rotate(-11deg) scale(1.03); }
  82% { transform: translateY(-9%) rotate(-3deg); } 90% { transform: translateY(0) rotate(1deg); } 100% { transform: none; } }
.krah-ruf { position: absolute; left: 78%; top: -12%; font: 400 clamp(13px, 1.4vw, 22px) "Fraktur", serif; color: #fff1cf; text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 0 14px rgba(255, 220, 150, .5); white-space: nowrap; opacity: 0; pointer-events: none; }
.g-rabe.kraeht .krah-ruf { animation: krahRuf 1.6s ease-out; }
@keyframes krahRuf { 0% { opacity: 0; transform: translate(0, 6px) scale(.7) rotate(-6deg); } 18% { opacity: 1; transform: translate(4px, -2px) scale(1.05) rotate(-4deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -22px) scale(1) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .g-rabe.kraeht { animation: none; } }

/* ---------- Die Ladenkatze beim Krämer (bild/katze-kraemer.png über bild/kraemer-ohne-katze.jpg) ---------- */
.k-katze { position: absolute; left: 42.18%; top: 65.94%; width: 4.64%; aspect-ratio: 102 / 154; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; }
.k-katze img { display: block; width: 100%; height: 100%; pointer-events: none; filter: brightness(calc(1 - var(--nacht, 0) * .4)); }
.k-katze:hover img, .k-katze:focus-visible img { filter: brightness(1.08) drop-shadow(0 0 6px rgba(255, 220, 150, .7)); }
.k-katze.miaut { animation: katzeMiau 1.4s ease-in-out; }
@keyframes katzeMiau { 0% { transform: none; } 18% { transform: scaleY(1.05) rotate(-3deg); } 36% { transform: scaleY(1.06) rotate(3deg); } 54% { transform: scaleY(1.04) rotate(-2deg); } 72% { transform: scaleY(1.02) rotate(1deg); } 100% { transform: none; } }
.miau-ruf { position: absolute; left: 70%; top: -14%; font: 400 clamp(12px, 1.2vw, 20px) "Fraktur", serif; color: #fff1cf; text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 0 14px rgba(255, 220, 150, .5); white-space: nowrap; opacity: 0; pointer-events: none; }
.k-katze.miaut .miau-ruf { animation: krahRuf 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .k-katze.miaut { animation: none; } }
/* Ausbau mit Symbolen (Olaf 18.10.) */
.ausbau-zeile .ausbau-bild { width: 58px; height: 58px; flex: none; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.ausbau-zeile .ausbau-text { flex: 1; min-width: 0; }
.ausbau-zeile.voll .ausbau-bild { filter: drop-shadow(0 0 8px rgba(232, 200, 119, .6)); }

/* ---------- Misslungen und Rückschlag (Olaf 18.10.) ---------- */
.lohn-ruf.minus { color: #f08a72; }
.geschichte.rueck { background: linear-gradient(rgba(60, 14, 8, .92), rgba(36, 10, 6, .95)); color: #f3d9c8; border: 1px solid rgba(208, 96, 74, .55); box-shadow: 0 0 26px rgba(160, 40, 20, .35), inset 0 0 30px rgba(0, 0, 0, .5); }
.geschichte.rueck small { color: #f08a72; }
.rueck-folge { border-color: rgba(208, 96, 74, .5); }
.rueck-folge b { color: #f0a090; }
.warn-rueck { color: #f0a090; font-style: italic; }
.anliegen-chip.rueck { border-color: rgba(208, 96, 74, .7); color: #f0a090; }
.ergebnis.s0 .geschichte.rueck { animation: geschichteAuf .7s .5s both, rueckZittern .5s 1.2s; }
@keyframes rueckZittern { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* ---------- Der Froschkönig am Bach (bild/frosch-bach.png auf dem Stein im Wasser) ---------- */
.b-frosch { position: absolute; left: 69.68%; top: 70.44%; width: 5%; aspect-ratio: 240 / 266; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; }
.b-frosch img { display: block; width: 100%; height: 100%; pointer-events: none; filter: brightness(calc(1 - var(--nacht, 0) * .5)) drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.b-frosch:hover img, .b-frosch:focus-visible img { filter: brightness(1.08) drop-shadow(0 0 7px rgba(255, 230, 140, .8)); }
.b-frosch.quakt { animation: froschQuak 1.3s ease-in-out; }
@keyframes froschQuak { 0% { transform: none; } 12% { transform: scale(1.08, .93); } 24% { transform: scale(.97, 1.04); } 36% { transform: scale(1.09, .92); } 48% { transform: scale(.98, 1.03); }
  66% { transform: translateY(-14%) scale(.96, 1.05); } 80% { transform: translateY(0) scale(1.05, .95); } 100% { transform: none; } }
.quak-ruf { position: absolute; right: 72%; top: -6%; font: 400 clamp(12px, 1.2vw, 20px) "Fraktur", serif; color: #fff7dc; text-shadow: 0 0 8px rgba(0, 0, 0, .85), 0 0 14px rgba(200, 255, 170, .5); white-space: nowrap; opacity: 0; pointer-events: none; }
.b-frosch.quakt .quak-ruf { animation: krahRuf 1.3s ease-out; }
@media (prefers-reduced-motion: reduce) { .b-frosch.quakt { animation: none; } }

/* ---------- Olorien fragen (Hilfe zum Auftrag) ---------- */
.olorien-fragen { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 14px; font: 600 15px "Cormorant", serif; color: #e6f0d8; background: rgba(60, 80, 50, .35); border: 1px solid rgba(180, 210, 160, .45); border-radius: 18px; padding: 3px 14px 3px 4px; cursor: pointer; }
.olorien-fragen:hover { background: rgba(80, 110, 60, .5); }
.olorien-fragen .gesicht { width: 28px; height: 28px; }
.hilfe-fenster h3 { margin: 16px 0 6px; }
.hilfe-sterne { color: var(--gold-hell); letter-spacing: 2px; margin-left: 6px; }
.hilfe-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hilfe-liste li { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); }
.hilfe-liste li .bild { width: 36px; height: 36px; flex: none; }
.hilfe-liste li i { color: var(--gold); font-size: 14px; }
.hilfe-liste li small { display: block; color: var(--leise); }
.hilfe-liste li.hat small { color: #b9dca0; }
.hilfe-liste li.fehlt { border-style: dashed; }
.hilfe-liste.klein li { padding: 3px 8px; }
.hilfe-liste.klein li .bild { width: 28px; height: 28px; }
.olorien-fragen small { font: italic 500 13px "Cormorant", serif; color: rgba(230, 240, 216, .7); margin-left: 2px; }
.olorien-fragen.fort { color: var(--leise); background: rgba(255, 255, 255, .04); border-color: var(--linie2); }
.olorien-fragen.fort .gesicht { filter: grayscale(.8) brightness(.8); }

/* ---------- Schornsteinrauch (Olaf 18.10.: „bitte animieren“). Der gemalte Rauch ist aus den Bildern entfernt (bild/*-still.jpg).
   Die Box sitzt mit der linken unteren Ecke auf dem Schornstein, die Schwaden steigen nach rechts oben und vergehen. ---------- */
.schlot { position: absolute; pointer-events: none; filter: blur(2.5px); aspect-ratio: 1 / 1.3; transform: translate(-12%, -100%); opacity: calc(1 - var(--nacht, 0) * .35); }
.karte-schlot { left: 54.6%; top: 38.5%; width: 8%; }
.garten-schlot { left: 37.6%; top: 10.4%; width: 6%; }
.schlot i { position: absolute; left: 0; bottom: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(240, 238, 232, .55) 0%, rgba(240, 238, 232, .3) 40%, rgba(238, 236, 230, 0) 70%);
  animation: schlot-steigt 10s linear infinite; animation-delay: calc(var(--i) * -.714s); will-change: transform, opacity; }
.schlot i:nth-child(odd) { animation-name: schlot-steigt-b; }
@keyframes schlot-steigt {
  0% { transform: translate(0, 0) scale(.35); opacity: 0; }
  10% { opacity: .9; }
  35% { transform: translate(35%, -120%) scale(.8); }
  65% { transform: translate(120%, -215%) scale(1.3); opacity: .5; }
  100% { transform: translate(225%, -300%) scale(1.9); opacity: 0; }
}
@keyframes schlot-steigt-b {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  12% { opacity: .8; }
  40% { transform: translate(15%, -135%) scale(.85); }
  70% { transform: translate(95%, -230%) scale(1.35); opacity: .45; }
  100% { transform: translate(190%, -310%) scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .schlot i { animation: none; } .schlot i:first-child { opacity: .5; transform: translate(35%, -120%) scale(.8); } }

/* Hinweis in der Karteikarte: Diese Zutat bleibt (Metalle, Steine, Schlüssel) */
.bleibt-hinweis { margin: 14px 0 4px; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(212, 175, 95, .08); border-radius: 0 8px 8px 0; }
.bleibt-hinweis b { color: var(--gold); display: block; margin-bottom: 2px; }
.bleibt-hinweis p { margin: 0; }

/* ---------- Verborgenes (18.10.): Mistel, Munins Feder, Abracadabra ---------- */
.mistel-schimmer { position: absolute; z-index: 3; width: 2.4%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 240, 170, .95) 0%, rgba(255, 214, 100, .55) 32%, rgba(255, 200, 80, 0) 70%); animation: mistel-glimmt 3.4s ease-in-out infinite; }
.mistel-schimmer::before { content: ""; position: absolute; inset: -120%; border-radius: 50%; }   /* größere Tippfläche */
@keyframes mistel-glimmt { 0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.75); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }
.geheim-kopf { display: block; color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; margin-bottom: 2px; }
.geheim-bild { display: block; width: 100%; border-radius: 10px; margin: 10px 0 14px; box-shadow: 0 0 40px rgba(255, 214, 120, .18); }
.geheim-fund { display: flex; gap: 14px; align-items: center; margin: 12px 0; }
.geheim-fund p { margin: 0; }
.edda { margin: 12px 0; padding: 10px 14px; border-left: 3px solid #a9bcff; background: rgba(169, 188, 255, .07); border-radius: 0 8px 8px 0; font-style: italic; }
.abra-dreieck { margin: 14px 0 16px; text-align: center; font-family: "Cormorant", "Garamond", serif; font-weight: 600; color: var(--gold); letter-spacing: .42em; line-height: 1.22; font-size: clamp(15px, 3.6vw, 26px); }
.abra-dreieck span { display: block; opacity: 0; animation: abra-erscheint .6s ease forwards; animation-delay: calc(var(--i) * .3s + .2s); }
@keyframes abra-erscheint { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.verborgenes { margin: 16px 0; padding: 12px 16px; border: 1px dashed var(--linie2); border-radius: 10px; }
.verborgenes h3 { margin: 0 0 8px; }
.verborgenes ul { list-style: none; margin: 0; padding: 0; }
.verborgenes li { padding: 6px 0; border-top: 1px solid var(--linie2); }
.verborgenes li:first-child { border-top: 0; }
.verborgenes li b { display: block; color: var(--leise); }
.verborgenes li.da b { color: var(--gold); }
.verborgenes li span { font-style: italic; color: var(--leise); font-size: .95em; }
.verborgenes li.da span { font-style: normal; color: inherit; }
.marke { cursor: default; -webkit-user-select: none; user-select: none; }
.rat-olorien { margin: 6px 0 0; font-size: .9em; font-style: italic; }

/* ---------- Krämer nachts (18.10.): warm abgedunkelt statt blau, von 2 bis 6 Uhr geschlossen ---------- */
.kraemer .garten-nacht { background: radial-gradient(ellipse at 62% 48%, rgba(60, 34, 10, .25), rgba(16, 9, 3, .78) 70%); mix-blend-mode: multiply; }
.laden-schild { position: absolute; left: 50%; top: 30%; z-index: 4; transform: translate(-50%, -50%) rotate(-3deg); padding: 10px 22px 12px; text-align: center; pointer-events: none;
  background: #3b2614; border: 2px solid #8a6436; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); color: #f0dcb4; }
.laden-schild b { display: block; font-family: "Fraktur", serif; font-size: clamp(20px, 3.4vw, 34px); font-weight: 400; letter-spacing: .02em; }
.laden-schild small { display: block; font-size: 13px; opacity: .85; }
.laden-zu { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(212, 175, 95, .08); border-radius: 0 8px 8px 0; }
.kraemer.zu .k-katze { filter: brightness(.7); animation: none; }
.kraemer.zu .ware-gitter { opacity: .55; }

/* ---------- Das Dorf (18.10.): Rückfragen, Herzgeschichten, Dorfplatz, kleine Bitten, Barbarazweig ---------- */
.rueckfragen { margin: 6px 0; }
.rueckfragen .antwort { margin: 4px 0; font-style: italic; color: var(--text); }
.frage-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.still-chip { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 10px; font-style: normal; font-size: 12px; color: var(--gold); border: 1px solid var(--gold); }
.herz-fenster .reaktion { align-items: flex-start; }
.hausmittel { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(212, 175, 95, .08); border-radius: 0 8px 8px 0; }
.hausmittel small { display: block; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; margin-bottom: 2px; }
.hausmittel p { margin: 0; }
.herz-geschichte { margin: 10px 0; padding-left: 22px; }
.herz-geschichte li { margin: 6px 0; font-style: italic; }
button.dorf-person { width: 100%; text-align: left; background: none; color: inherit; font: inherit; cursor: pointer; }
button.dorf-person:hover b { color: var(--gold); }
.dorf-person .erzaehlt { display: block; color: var(--gold); }
.dorf-leute { position: absolute; z-index: 3; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; color: #fff8e6; }
.dorf-leute .gesicht { width: clamp(42px, 5.2vw, 76px); height: clamp(42px, 5.2vw, 76px); box-shadow: 0 0 0 2px rgba(255, 236, 190, .85), 0 4px 12px rgba(0, 0, 0, .45); transition: transform .2s; }
.dorf-leute:hover .gesicht { transform: scale(1.08); }
.dorf-leute span { padding: 2px 8px; border-radius: 10px; background: rgba(30, 20, 10, .72); font-size: 13px; text-align: center; line-height: 1.15; }
.dorf-leute small { display: block; font-size: 11px; opacity: .8; }
.dorf-unten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px; }
.dorf-liste-kurz { list-style: none; margin: 0; padding: 0; }
.dorf-liste-kurz li { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.dorf-liste-kurz .gesicht { width: 36px; height: 36px; }
.bitte-tafel .reaktion p { margin: 4px 0; }
.barbara-zeile { display: flex; gap: 14px; align-items: center; }
.barbara-zeile p { margin: 4px 0; }
.aushang-fenster .regel { font-style: italic; }

/* ---------- Die sieben Siegel (18.10.) ---------- */
.planet-gross { font-size: 1.5em; color: var(--gold); }
.siegel-quadrat { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; margin: 12px auto 16px; max-width: min(100%, calc(var(--n) * 52px)); }
.siegel-quadrat span, .siegel-quadrat input { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; border-radius: 4px; font-family: "Cormorant", "Garamond", serif; font-weight: 600; font-size: clamp(11px, 2.4vw, 18px); }
.siegel-quadrat span { background: rgba(212, 175, 95, .1); border: 1px solid rgba(212, 175, 95, .3); color: var(--text); }
.siegel-quadrat input { width: 100%; padding: 0; text-align: center; background: #2a1a0e; border: 1px dashed var(--gold); color: var(--gold); box-shadow: inset 0 0 8px rgba(0, 0, 0, .6); }
.siegel-quadrat input.falsch { border-color: #c0573e; color: #e6917f; }
.siegel-ruf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--gold); border-radius: 10px; background: rgba(212, 175, 95, .1); }
.siegel-ruf span { flex: 1; min-width: 160px; }
.siegel-liste .seite-stand { font-weight: 400; color: var(--leise); margin-left: 6px; }
.siegel-liste li.da .seite-stand { color: var(--gold); }
.finale-bilder { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: center; margin: 10px 0 14px; }
.finale-olorien { width: 100%; border-radius: 10px; box-shadow: 0 0 40px rgba(255, 214, 120, .2); }
.finale-siegel { width: 100%; filter: drop-shadow(0 0 18px rgba(255, 210, 120, .45)); animation: siegel-dreht 40s linear infinite; }
@keyframes siegel-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .finale-siegel { animation: none; } }
/* Dorfplatz am Abend: das Tagbild dunkelt schon ab, bevor das Nachtbild kommt (Olaf 18.10.) */
.dorf .garten-bild:not(.ort-nacht) { filter: brightness(calc(1 - var(--nacht, 0) * .45)) saturate(calc(1 - var(--nacht, 0) * .3)); transition: filter 1.2s linear; }

.besuch .wartet { display: inline-block; margin-left: 10px; color: var(--leise); font-size: 12px; }

/* ---------- Brücke zur Wirkwerkstatt (19.10.) ---------- */
.ww-bruecke { margin: 8px 0 0; font-size: .95em; }
.ww-bruecke a { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold); }
.ww-box { margin: 14px 0; padding: 12px 16px; border: 1px solid rgba(212, 175, 95, .45); border-radius: 10px; background: rgba(212, 175, 95, .07); text-align: left; }
.ww-box small { display: block; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.ww-box p { margin: 4px 0 10px; }

/* ---------- Vollversion (19.10.) ---------- */
.voll-liste { margin: 10px 0 12px; padding-left: 22px; }
.voll-liste li { margin: 4px 0; }
.voll-preis { font-size: 1.15em; margin: 8px 0; }
.voll-preis b { color: var(--gold); font-size: 1.25em; }
.voll-schluessel { margin: 12px 0; }
.voll-schluessel summary { cursor: pointer; color: var(--gold); }
.voll-schluessel input { width: min(100%, 260px); margin: 6px 8px 6px 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--linie2); background: rgba(0, 0, 0, .25); color: var(--text); font: inherit; letter-spacing: .05em; }
.voll-tafel { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-color: var(--gold); }
.voll-tafel > div { flex: 1; min-width: 180px; }
.voll-tafel p { margin: 2px 0 0; }
.voll-fenster a.knopf { text-decoration: none; display: inline-block; }
.voll-fenster .klein { font-size: .85em; }
.voll-fenster p a { color: var(--gold); }
/* Mitteilung an Support (19.10.) */
.seite:has(> .seite-fuss) { display: flex; flex-direction: column; padding-bottom: 8px; }
.seite-inhalt { flex: 1 0 auto; }
.seite-fuss { margin: 14px 0 0; text-align: right; font-size: 12px; line-height: 1; }
.seite-fuss .verweis { color: var(--leise); opacity: .45; text-decoration: none; }
.seite-fuss .fassung { color: var(--leise); opacity: .45; }   /* 28.10.: Version so unscheinbar wie der Verweis */
.seite-fuss .verweis:hover, .seite-fuss .verweis:focus-visible { opacity: 1; text-decoration: underline; }
.konto-fenster textarea { font: 16px "Garamond", serif; color: var(--text); background: rgba(10, 6, 4, .7); border: 1px solid var(--linie2); border-radius: 6px; padding: 9px 11px; resize: vertical; min-height: 120px; }
.konto-fenster textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232, 200, 119, .2); }
.konto-fenster input[readonly] { color: var(--leise); background: rgba(10, 6, 4, .35); border-style: dashed; cursor: default; }
/* Sondermission „Kolk bleibt fort“ (19.10.) */
.g-rabe .rabe-zwei { position: absolute; left: -62%; top: 14%; width: 86%; height: 86%; transform: scaleX(-1); }
.g-rabe.finale { animation: kolkLeuchten 2.4s ease-in-out infinite; }
@keyframes kolkLeuchten { 50% { filter: drop-shadow(0 0 10px rgba(255, 226, 150, .9)); } }
@media (prefers-reduced-motion: reduce) { .g-rabe.finale { animation: none; filter: drop-shadow(0 0 8px rgba(255, 226, 150, .8)); } }
.kolk-block { border: 1px solid var(--gold); border-radius: 10px; padding: 10px 12px; background: rgba(232, 200, 119, .06); }
.kolk-block p { margin: 4px 0 10px; }
.kolk-auftrag { border-left: 3px solid var(--gold); padding: 4px 0 4px 10px; margin: 12px 0; color: var(--gold-hell); }
.kolk-sprecher { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; }
.kolk-sprecher p { margin: 4px 0 8px; font-style: italic; }
.kolk-paar-bild { display: flex; justify-content: center; gap: 4px; margin: 6px 0 10px; }
.kolk-paar-bild img { width: 92px; height: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.kolk-paar-bild img + img { width: 80px; transform: scaleX(-1); margin-top: 10px; }
.kolk-name label { display: grid; gap: 4px; font: 600 15px "Cormorant", serif; color: var(--gold-hell); }
.kolk-name input { font: 17px "Garamond", serif; color: var(--text); background: rgba(10, 6, 4, .7); border: 1px solid var(--linie2); border-radius: 6px; padding: 9px 11px; max-width: 260px; }
.kolk-vorschlaege { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.dorf-leute.kolk-fiete .gesicht { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(232, 200, 119, .8); }
/* Werkbank-Szenen (19.10.): Ofen, Schreibpult, Fensterbrett im Mondlicht */
.werk-szene { container-type: inline-size; position: relative; overflow: hidden; border-radius: 10px; margin: 4px 0 10px; border: 1px solid var(--linie2); }
.werk-szene .ws-grund { display: block; width: 100%; height: auto; }
.werk-szene .bild { position: absolute; transform: translate(-50%, -100%); }
.werk-szene .bild img { width: 100%; height: auto; display: block; }
.werk-szene.fertig { box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(232, 200, 119, .45); }
/* Ofen: Glut flackert, das Brot geht auf und bräunt, Dampf steigt */
.ws-glut { position: absolute; left: 50%; top: 58%; width: 30%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 60, .75), rgba(255, 90, 20, .35) 55%, transparent); mix-blend-mode: screen; animation: wsGlut 1.7s ease-in-out infinite alternate; pointer-events: none; }
.ws-glut.zwei { width: 44%; height: 40%; top: 52%; opacity: .45; animation-duration: 2.6s; animation-delay: -.8s; }
@keyframes wsGlut { 0% { opacity: .55; } 40% { opacity: .9; } 70% { opacity: .65; } 100% { opacity: 1; } }
.ws-ofen .ws-brot { left: 50%; top: 64%; width: 15%; filter: saturate(calc(.5 + .8 * var(--p))) brightness(calc(1.15 - .22 * var(--p))) sepia(calc(.45 * var(--p))) drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); transform: translate(-50%, -100%) scale(calc(.82 + .18 * var(--p))); transform-origin: 50% 100%; transition: transform 1s linear, filter 1s linear; }
.ws-ofen .ws-apfel { left: 31%; top: 70%; width: 8%; }
.ws-dampf { position: absolute; left: 50%; top: 50%; width: 12%; height: 30%; transform: translate(-50%, -100%); opacity: calc(.25 + .75 * var(--p)); pointer-events: none; }
.ws-dampf i { position: absolute; bottom: 0; left: 50%; width: 30%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 245, 230, .55), transparent); filter: blur(3px); animation: wsDampf 3.2s ease-out infinite; }
.ws-dampf i:nth-child(2) { left: 20%; animation-delay: -1.1s; }
.ws-dampf i:nth-child(3) { left: 70%; animation-delay: -2.1s; }
@keyframes wsDampf { 0% { transform: translate(-50%, 30%) scale(.5); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(-30%, -140%) scale(1.4); opacity: 0; } }
/* Schreibpult: Kerzenlicht, Pergament, Buchstabe für Buchstabe, die Feder wandert mit */
.ws-kerzenlicht { position: absolute; left: 74.5%; top: 27%; width: 36%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 200, 110, .35), transparent); mix-blend-mode: screen; animation: wsGlut 2.2s ease-in-out infinite alternate; pointer-events: none; }
.ws-pergament { position: absolute; left: 47%; top: 64%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ws-pergament > img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.ws-sator { position: absolute; inset: 16%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); font: 700 3.1cqw / 1 "Cormorant", Georgia, serif; color: #3a1f0c; text-align: center; align-items: center; }
.ws-sator i { font-style: normal; opacity: 0; }
.ws-sator i.da { opacity: 1; }
.ws-sator i.jetzt { animation: wsTinte 1s ease-in-out infinite alternate; }
@keyframes wsTinte { from { opacity: .08; } to { opacity: .45; } }
.fertig .ws-sator i { opacity: 1; animation: none; color: #5a1a0a; }
.ws-feder { position: absolute; width: 10%; left: calc(39.5% + (var(--zx) + .5) * 2.99%); top: calc(48.4% + (var(--zy) + .5) * 6.26%); transform: translate(-5%, -97%); transform-origin: 5% 97%; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .5)); transition: left .6s ease-in-out, top .6s ease-in-out; animation: wsSchreiben .5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes wsSchreiben { from { transform: translate(-5%, -97%) rotate(-4deg); } to { transform: translate(-3%, -95%) rotate(3deg); } }
/* Seelenlicht: Kerze mit Myrrhe salben, Tropfen läuft, Schein wächst */
.ws-pult .ws-kerze { left: 48%; top: 72%; width: 11%; }
.ws-pult .ws-myrrhe { left: 33%; top: 72%; width: 9%; }
.ws-pergament > .ws-druden { position: absolute; inset: 14%; width: 72%; height: 72%; animation: wsFertig 1.6s ease-in-out infinite alternate; }   /* Drudenfuß fertig: mittig im Pergament (20.10.) */
.ws-flamme { display: none; position: absolute; left: 48%; top: 31%; width: 4%; height: 9%; transform: translate(-50%, -50%); border-radius: 50% 50% 45% 45%; background: radial-gradient(ellipse at 50% 70%, #fff8d8, #ffcf6a 45%, rgba(255, 140, 40, 0) 75%); animation: wsFlamme .25s ease-in-out infinite alternate; }
@keyframes wsFlamme { from { transform: translate(-50%, -50%) scaleY(.9) rotate(-2deg); } to { transform: translate(-50%, -54%) scaleY(1.08) rotate(2deg); } }
.ws-heiligenschein { position: absolute; left: 48%; top: 54%; width: calc(14% + 22% * var(--p)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 140, .55), transparent); mix-blend-mode: screen; animation: wsGlut 2.4s ease-in-out infinite alternate; }
.ws-tropfen { position: absolute; left: 49.6%; top: 58%; width: 1.1%; aspect-ratio: .7; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(255, 210, 120, .9); box-shadow: 0 0 4px rgba(255, 200, 100, .8); animation: wsTropfen 3s ease-in infinite; }
@keyframes wsTropfen { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 90% { transform: translateY(260%); opacity: 1; } 100% { transform: translateY(300%); opacity: 0; } }
/* Mondwasser: Mondstrahl aufs Fensterbrett, Funken steigen im Glas */
.ws-mondstrahl { position: absolute; left: 40%; top: 35%; width: 18%; height: 50%; background: linear-gradient(rgba(220, 230, 255, .5), rgba(200, 215, 255, calc(.12 + .3 * var(--p)))); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter: blur(4px); mix-blend-mode: screen; animation: wsStrahl 4s ease-in-out infinite alternate; }
@keyframes wsStrahl { from { opacity: .55; } to { opacity: 1; } }
.ws-mond .ws-glas { left: 50%; top: 84%; width: 12%; filter: drop-shadow(0 0 calc(4px + 14px * var(--p)) rgba(210, 225, 255, .9)) brightness(calc(1 + .3 * var(--p))); }
.ws-mond .ws-kristall { left: 59%; top: 84%; width: 6%; filter: drop-shadow(0 0 6px rgba(220, 235, 255, .8)); }
.ws-funken { position: absolute; left: 50%; top: 66%; width: 10%; height: 18%; transform: translateX(-50%); pointer-events: none; }
.ws-funken i { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #eef3ff; box-shadow: 0 0 6px #cfe0ff; opacity: 0; animation: wsFunke 2.8s ease-out infinite; }
.ws-funken i:nth-child(1) { left: 20%; }
.ws-funken i:nth-child(2) { left: 45%; animation-delay: -.6s; }
.ws-funken i:nth-child(3) { left: 70%; animation-delay: -1.3s; }
.ws-funken i:nth-child(4) { left: 35%; animation-delay: -1.9s; }
.ws-funken i:nth-child(5) { left: 60%; animation-delay: -2.4s; }
@keyframes wsFunke { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-260%); opacity: 0; } }
/* Fertig: alles kommt zur Ruhe, das Werk leuchtet */
.werk-szene.fertig .ws-brot img, .werk-szene.fertig .ws-kerze img, .werk-szene.fertig .ws-glas img { animation: wsFertig 1.6s ease-in-out infinite alternate; }
@keyframes wsFertig { to { filter: drop-shadow(0 0 12px rgba(255, 226, 150, .9)) brightness(1.08); } }
@media (prefers-reduced-motion: reduce) { .werk-szene *, .werk-szene .bild { animation: none !important; transition: none !important; } }
/* Die Kate ausbauen als Bilder (19.10.): je Ausbau ein gemaltes Bild der aktuellen Stufe, leise Bewegung, Überblendung beim Ausbauen */
.ausbau-szene { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 12px 0 0; padding: 0; border: 1px solid var(--linie2); border-radius: 10px; overflow: hidden; background: #1a1008; cursor: zoom-in; }
.ausbau-szene:first-of-type { margin-top: 6px; }
.ausbau-szene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ausbau-szene.voll { box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(232, 200, 119, .35); }
.ausbau-szene:hover .as-bild, .ausbau-szene:focus-visible .as-bild { filter: brightness(1.06); }
.ausbau-szene + .ausbau-zeile { border-top: 0; padding-top: 6px; }
.as-unter { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 6px; font: italic 500 13px/1.3 "Cormorant", serif; color: #f4ead2; text-align: left; background: linear-gradient(transparent, rgba(10, 6, 3, .82)); }
/* Überblendung beim Ausbauen: das neue Bild kommt aus dem Licht, Funken steigen */
.ausbau-szene.neu .as-bild { animation: asNeu 1.8s ease-out both; }
@keyframes asNeu { 0% { opacity: 0; filter: brightness(1.8) saturate(.6); } 60% { opacity: 1; filter: brightness(1.25); } 100% { opacity: 1; filter: none; } }
.ausbau-szene.neu { animation: asRahmen 2.4s ease-out; }
@keyframes asRahmen { 0%, 40% { box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(255, 220, 140, .8); } 100% { box-shadow: 0 0 0 1px transparent; } }
.as-funken { position: absolute; inset: 0; pointer-events: none; }
.as-funken i { position: absolute; bottom: 10%; width: 5px; height: 5px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 8px #ffd76a; opacity: 0; animation: asFunke 1.9s ease-out forwards; }
.as-funken i:nth-child(1) { left: 8%; } .as-funken i:nth-child(2) { left: 16%; animation-delay: .15s; } .as-funken i:nth-child(3) { left: 24%; animation-delay: .05s; }
.as-funken i:nth-child(4) { left: 33%; animation-delay: .3s; } .as-funken i:nth-child(5) { left: 41%; animation-delay: .1s; } .as-funken i:nth-child(6) { left: 50%; animation-delay: .25s; }
.as-funken i:nth-child(7) { left: 58%; animation-delay: .05s; } .as-funken i:nth-child(8) { left: 66%; animation-delay: .35s; } .as-funken i:nth-child(9) { left: 74%; animation-delay: .2s; }
.as-funken i:nth-child(10) { left: 82%; animation-delay: .1s; } .as-funken i:nth-child(11) { left: 89%; animation-delay: .3s; } .as-funken i:nth-child(12) { left: 95%; animation-delay: .15s; }
@keyframes asFunke { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-420%) translateX(10px) scale(1); opacity: 0; } }
/* Quelle: das Wasser im Becken glitzert */
.as-glitzer { position: absolute; left: 26%; top: 80%; width: 20%; height: 9%; pointer-events: none; }
.st-3 .as-glitzer, .st-2 .as-glitzer { left: 27%; top: 79%; width: 24%; }
.as-glitzer i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #dff3ff; opacity: 0; animation: asGlitzer 2.6s ease-in-out infinite; }
.as-glitzer i:nth-child(1) { left: 15%; top: 30%; } .as-glitzer i:nth-child(2) { left: 45%; top: 60%; animation-delay: -.7s; }
.as-glitzer i:nth-child(3) { left: 70%; top: 25%; animation-delay: -1.4s; } .as-glitzer i:nth-child(4) { left: 85%; top: 65%; animation-delay: -2s; }
@keyframes asGlitzer { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .95; transform: scale(1); } }
/* Werkbank: das Feuer im Ziegelofen flackert */
.as-feuer { position: absolute; left: 50%; top: 57%; width: 16%; height: 14%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 80, .85), rgba(255, 110, 30, .35) 60%, transparent); mix-blend-mode: screen; animation: wsGlut 1.4s ease-in-out infinite alternate; pointer-events: none; }
.st-2 .as-feuer, .st-3 .as-feuer { width: 22%; height: 18%; }
/* Futterplatz: ab und zu fällt ein Korn vom Brett */
.as-korn { position: absolute; left: 77%; top: 57%; width: 5%; height: 18%; pointer-events: none; }
.st-2 .as-korn, .st-3 .as-korn { left: 76%; top: 59%; }
.as-korn i { position: absolute; top: 0; left: 30%; width: 4px; height: 3px; border-radius: 50%; background: #e8c877; opacity: 0; animation: asKorn 5s ease-in infinite; }
.as-korn i:nth-child(2) { left: 70%; animation-delay: -2.4s; }
@keyframes asKorn { 0%, 70% { transform: translateY(0); opacity: 0; } 72% { opacity: 1; } 95% { transform: translateY(1400%); opacity: 1; } 100% { transform: translateY(1400%); opacity: 0; } }
/* Großansicht */
.ausbau-gross img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--linie2); margin: 6px 0 10px; }
.ausbau-gross ol { list-style: none; padding: 0; margin: 8px 0 12px; }
.ausbau-gross li { padding: 4px 0 4px 12px; border-left: 3px solid var(--linie2); margin: 4px 0; color: var(--leise); }
.ausbau-gross li.da { color: var(--text); border-left-color: rgba(232, 200, 119, .5); }
.ausbau-gross li.jetzt { color: var(--gold-hell); border-left-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .ausbau-szene *, .ausbau-szene { animation: none !important; } .as-funken, .as-korn, .as-glitzer { display: none; } }
/* Saatwahl: Pflanzen ohne Samen ausgegraut (19.10.) */
.saatwahl .ware.aus { filter: grayscale(1); opacity: .5; cursor: default; }
.saatwahl .ware.aus .bild img { filter: brightness(.8); }
/* Rezeptbuch: Oloriens Andeutungen auf verdeckten Karten (19.10.) */
.rezept-ahnung { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 4px; }
.rezept-ahnung .mini-olorien { flex: none; width: 30px; height: 30px; }
.rezept-ahnung p { margin: 0; font-style: italic; color: var(--gold-hell); font-size: 14px; line-height: 1.35; }
.rezept-karte .rezept-stand { margin-top: 6px; font-size: 13px; }
/* Buch der Lehre mit Symbolen (19.10.) */
.lehre-symbol { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(232, 200, 119, .16), rgba(10, 6, 3, .55) 70%); border: 1px solid rgba(232, 200, 119, .45); box-shadow: 0 0 10px rgba(232, 200, 119, .12), inset 0 0 8px rgba(0, 0, 0, .5); overflow: hidden; }
.lehre-symbol img, .lehre-symbol .bild { width: 78%; height: 78%; object-fit: contain; }
.lehre-symbol .bild img { width: 100%; height: 100%; object-fit: contain; }
.lehre-symbol.verdeckt { filter: grayscale(1) brightness(.45) contrast(1.4); opacity: .55; border-style: dashed; }
.abra-dreieck { font: 700 7.5px/1.05 "Cormorant", Georgia, serif; color: var(--gold-hell); text-align: center; letter-spacing: .5px; }
.verborgenes li.mit-symbol { display: flex; gap: 12px; align-items: center; }
.verborgenes li.mit-symbol > div { flex: 1; min-width: 0; }
.verborgenes li.mit-symbol.da .lehre-symbol { border-color: var(--gold); box-shadow: 0 0 14px rgba(232, 200, 119, .4), inset 0 0 8px rgba(0, 0, 0, .4); }
.planet-medaillon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 22px/1 Georgia, serif; color: rgba(232, 200, 119, .5); border: 1px dashed rgba(232, 200, 119, .35); background: rgba(10, 6, 3, .45); }
.siegel-liste li.gefunden .planet-medaillon { color: var(--gold-hell); border-style: solid; }
.siegel-liste li.da .planet-medaillon { color: #2a1708; background: radial-gradient(circle at 40% 35%, #fff1c4, #e8c877 55%, #a87a2e); border: 1px solid #f5dc98; box-shadow: 0 0 12px rgba(232, 200, 119, .5); }
.lehre-gruppe h3 { display: flex; gap: 12px; align-items: center; }
.lehre-gruppe h3 > span:not(.lehre-symbol) { flex: 1; min-width: 0; }
.lehre-gruppe .lehrsaetze { margin-left: 58px; }
.lehre-gruppe .lehrsaetze li::marker { content: "✦  "; color: var(--gold); font-size: .8em; }
@media (max-width: 560px) { .lehre-gruppe .lehrsaetze { margin-left: 0; } .lehre-symbol { width: 38px; height: 38px; } }
/* Ränge mit ihren Symbolen (19.10.) */
.rang-liste li { display: flex; gap: 14px; align-items: center; }
.rang-liste li > div { flex: 1; min-width: 0; }
.rang-bild { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(232, 200, 119, .35); background: #f2e6cc; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.rang-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rang-bild.erster { background: radial-gradient(circle at 50% 40%, #f6ecd6, #d9c39a); }
.rang-bild.erster img { object-fit: contain; padding: 6px; }
.rang-liste li:not(.erreicht):not(.jetzt) .rang-bild { filter: grayscale(.85) brightness(.6); opacity: .7; }
.rang-liste li.erreicht .rang-bild { border-color: rgba(232, 200, 119, .7); }
.rang-liste li.jetzt .rang-bild { border-color: var(--gold); box-shadow: 0 0 14px rgba(232, 200, 119, .55); width: 66px; height: 66px; }
.rang-liste li::before { top: 50%; transform: translateY(-50%); }
/* Das angesengte Blatt der Siegel-Suche als Symbol (19.10.) */
.lehre-symbol.blatt { position: relative; width: 68px; height: 68px; background: #1d130b; }
.lehre-symbol.blatt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blatt-tinte { position: absolute; inset: 14%; width: 72%; height: 72%; stroke: #5a3414; fill: none; font: 13px Georgia, serif; text-anchor: middle; opacity: .85; }
.blatt-tinte text { stroke: none; fill: #5a3414; }
.siegel-liste h3 { display: flex; gap: 12px; align-items: center; }
/* Die entzifferte Seite als Bild (19.10.) */
.siegel-seite { container-type: inline-size; position: relative; width: min(100%, 380px); margin: 8px auto 12px; aspect-ratio: 520 / 712; }
.siegel-seite .ss-grund { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.ss-inhalt { position: absolute; inset: 11% 15% 10%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #4a2c12; }
.ss-kopf { font: italic 500 4cqw/1.2 "Cormorant", Georgia, serif; letter-spacing: .04em; opacity: .75; }
.ss-zeichen { font: 400 calc(20cqw - var(--n) * 1.1cqw)/1 Georgia, serif; color: var(--farbe); margin: 3% 0 1%; text-shadow: 0 1px 0 rgba(255, 240, 210, .6); }
.siegel-seite h3 { font: 400 6.4cqw/1.15 "Fraktur", serif; color: #3a210c; margin: 0 0 5%; text-transform: none; letter-spacing: 0; }
.ss-quadrat { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, calc(var(--n) * 14cqw), 62cqw); border: 1.5px solid rgba(74, 44, 18, .7); border-radius: 2px; }
.ss-quadrat span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: .5px solid rgba(74, 44, 18, .35); font: 600 min(9cqw, calc(36cqw / var(--n))) / 1 "Cormorant", Georgia, serif; color: #3a210c; }
.ss-quadrat span.gefunden { color: var(--farbe); background: radial-gradient(closest-side, rgba(255, 214, 120, .55), transparent); font-weight: 700; }
.ss-fuss { margin: auto 0 0; font: italic 500 3.8cqw/1.35 "Cormorant", Georgia, serif; opacity: .8; }
/* frisch entziffert: die Tinte erscheint Zahl für Zahl, dann leuchtet die gefundene auf */
.siegel-seite.frisch .ss-quadrat span { opacity: 0; animation: ssTinte .35s ease-out forwards; animation-delay: calc(.25s + var(--k) * (2.2s / (var(--n) * var(--n)))); }
.siegel-seite.frisch .ss-quadrat span.gefunden { animation: ssTinte .35s ease-out forwards, ssLeuchten 1.4s ease-in-out 2.8s 2 alternate; animation-delay: calc(.25s + var(--k) * (2.2s / (var(--n) * var(--n)))), 2.8s; }
.siegel-seite.frisch .ss-zeichen { animation: ssZeichen 1.2s ease-out both; }
@keyframes ssTinte { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@keyframes ssLeuchten { to { text-shadow: 0 0 10px rgba(255, 210, 110, .95), 0 0 2px #fff3c8; } }
@keyframes ssZeichen { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ss-funken { position: absolute; inset: 0; pointer-events: none; }
.ss-funken i { position: absolute; bottom: 8%; width: 5px; height: 5px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px #ff9a3c; opacity: 0; animation: asFunke 2.2s ease-out forwards; }
.ss-funken i:nth-child(1) { left: 14%; animation-delay: 2.6s; } .ss-funken i:nth-child(2) { left: 24%; animation-delay: 2.8s; } .ss-funken i:nth-child(3) { left: 34%; animation-delay: 2.65s; }
.ss-funken i:nth-child(4) { left: 44%; animation-delay: 2.9s; } .ss-funken i:nth-child(5) { left: 54%; animation-delay: 2.7s; } .ss-funken i:nth-child(6) { left: 64%; animation-delay: 2.95s; }
.ss-funken i:nth-child(7) { left: 74%; animation-delay: 2.75s; } .ss-funken i:nth-child(8) { left: 84%; animation-delay: 2.85s; } .ss-funken i:nth-child(9) { left: 29%; animation-delay: 3.1s; } .ss-funken i:nth-child(10) { left: 69%; animation-delay: 3.05s; }
.ss-fortschritt { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.ss-fortschritt .planet-medaillon { width: 34px; height: 34px; font-size: 18px; }
.ss-fortschritt .planet-medaillon.halb { color: var(--gold-hell); border-style: solid; }
.ss-fortschritt .planet-medaillon.voll { color: #2a1708; background: radial-gradient(circle at 40% 35%, #fff1c4, #e8c877 55%, #a87a2e); border: 1px solid #f5dc98; }
.ss-fortschritt .planet-medaillon.neu { animation: ssMedaillon 1.2s ease-out 3s both; }
@keyframes ssMedaillon { 0% { transform: scale(1); } 40% { transform: scale(1.35); box-shadow: 0 0 18px rgba(255, 220, 140, .9); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(232, 200, 119, .5); } }
@media (prefers-reduced-motion: reduce) { .siegel-seite *, .ss-fortschritt * { animation: none !important; opacity: 1 !important; } .ss-funken { display: none; } }
.bitte-tafel.kostbar { border-color: var(--gold); box-shadow: 0 0 14px rgba(232, 200, 119, .25); }
/* Brot an Tür und Streifzug (19.10.) */
.brot-zeile { margin: 6px 0 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.brot-zeile.da { color: var(--gold-hell); font-style: italic; }
/* Vor dem ersten Spiel (Start, Anmelden): die Karte bei Nacht, verschwommen hinter dem Fenster (19.10.) */
.fenster.ohne-kate { background: #070504; overflow: hidden; }
.fenster.ohne-kate::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: url("bild/karte-nacht-still.jpg") center / cover no-repeat; filter: blur(12px) brightness(.9) saturate(1.15); transform: scale(1.04); animation: startAtmen 24s ease-in-out infinite alternate; }
.fenster.ohne-kate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(5, 3, 2, .05), rgba(5, 3, 2, .55) 80%); pointer-events: none; }
@keyframes startAtmen { from { transform: scale(1.04); } to { transform: scale(1.1) translateY(-1%); } }
@media (prefers-reduced-motion: reduce) { .fenster.ohne-kate::before { animation: none; } }
/* Leere Tür: Feierabend und Nachtruhe (19.10.) */
.tuer-still { padding: 12px 14px; border: 1px dashed var(--linie2); border-radius: 8px; background: rgba(232, 200, 119, .04); text-align: center; }
.tuer-still b { display: block; font: 400 20px "Fraktur", serif; color: var(--gold-hell); }
.tuer-still p { margin: 4px 0 6px; }
.tuer-still.nacht { background: linear-gradient(rgba(30, 40, 80, .25), rgba(10, 14, 40, .15)); border-color: rgba(150, 170, 230, .35); }
.tuer-still.nacht b { color: #c9d4f2; }
/* Rangsymbol in der Kopfzeile (19.10.) */
.rang-knopf .rang-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rang-knopf .rang-text > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang-mini { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(232, 200, 119, .6); background: #f2e6cc; box-shadow: 0 0 6px rgba(232, 200, 119, .25); }
.rang-mini.erster { object-fit: contain; padding: 2px; background: radial-gradient(circle at 50% 40%, #f6ecd6, #d9c39a); }
@media (max-width: 640px) { .rang-mini { width: 24px; height: 24px; } }
@media (max-width: 480px) { #kopf .mond-text { display: none; } .rang-knopf { min-width: 120px; } }   /* Handy: die Mondscheibe reicht, der Rang braucht Platz für Bild und Namen */

/* Fremde vor der Tür (19.10.2026) */
.besuch.fremd { background: radial-gradient(ellipse at 15% 40%, rgba(90, 30, 60, .22), transparent 70%); border-radius: 6px; padding-left: 8px; box-shadow: inset 3px 0 0 rgba(150, 70, 110, .55); }
.besuch.fremd .gesicht, .auftrag-jetzt.fremd .gesicht { border-color: #8a4a6a; box-shadow: 0 0 14px rgba(120, 40, 80, .45); }
.fremd-zeichen { font-style: normal !important; font-size: 14px; color: #c9b7c4; border-left: 2px solid rgba(150, 70, 110, .6); padding-left: 8px; margin: 6px 0 !important; }
.fremd-zeichen::before { content: "Dir fällt auf: "; font: 600 11px "Cormorant", serif; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.auftrag-jetzt.fremd .durchschau-knopf { margin: 6px 8px 0 0; }
.auftrag-jetzt.fremd .antwort { font-style: italic; margin: 4px 0; }
.auftrag-jetzt.heimlich { box-shadow: inset 3px 0 0 rgba(120, 160, 110, .6); }
.auftrag-jetzt .heimlich-rat { margin: 8px 0 4px; }
.auftrag-jetzt .heimlich-rat > .gesicht { width: 34px; height: 34px; }
.durchschau-fenster h3 { margin: 14px 0 4px; }
.durchschau-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.durchschau-wahl { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: rgba(42, 26, 12, .6); border: 1px solid var(--linie); border-radius: 8px; color: var(--text); font: 500 15px "Cormorant", serif; cursor: pointer; text-align: center; }
.durchschau-wahl:hover, .durchschau-wahl:focus-visible { border-color: var(--gold); background: rgba(70, 44, 18, .7); }
.durchschau-wahl small { color: var(--leise); font-size: 12px; }
.durchschau-wahl .gesicht { width: 52px; height: 52px; }
.fremde-liste li { display: flex; gap: 10px; align-items: center; }
.fremde-liste li .gesicht { width: 44px; height: 44px; flex: none; }
.fremde-liste li span:last-child { display: flex; flex-direction: column; }
.fremde-liste li small { color: var(--leise); }
.fremde-liste li:not(.da) { opacity: .6; }
.fremde-reihe { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.fremde-reihe .gesicht { width: 46px; height: 46px; }
/* Deckel ohne Licht sichtbar (19.10.): der helle Schatten zeigt, wo der Tisch mit einer Kerze stünde */
.stimmig-balken { position: relative; }
.stimmig-balken i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(232, 200, 119, .32) 0 6px, rgba(232, 200, 119, .14) 6px 12px); border-radius: 4px; transition: width .5s; }
.stimmig-balken em { position: relative; }
.deckel-hinweis { margin: 4px 0 8px; font-size: 14px; font-style: italic; color: var(--leise); }
.deckel-hinweis b { color: var(--gold-hell); font-style: normal; }
/* Bach nachts dunkler (19.10., Olaf: „nachts noch sehr hell“): das Nachtbild ist hell gemalt, hier gedämpft und an den Rändern dunkler */
.bach-szene .garten-bild.ort-nacht { filter: brightness(.58) saturate(.82) contrast(1.06); }

/* Sondermissionen mit dem Pastor: Die kalte Kirche, Das Licht im Moor (19.10.2026) */
.mission-bild { display: block; width: 100%; max-width: 420px; margin: 4px auto 12px; border-radius: 8px; border: 1px solid var(--linie); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.mission-bild.breit { max-width: 100%; }
/* 31.10.: Bücher, Jahreskreis: zwei Kalender nebeneinander */
.jahr-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.jahr-zeile { display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.jahr-zeile.laeuft { border-color: var(--gold); background: rgba(201, 163, 82, .08); }
.jahr-datum { font: 600 15px "Cormorant", serif; color: var(--gold-hell); }
.jahr-datum small { display: block; color: var(--gold); font-style: italic; font-weight: 400; }
.jahr-text p { margin: 0 0 4px; }
.jahr-fremd { color: var(--leise); font-style: italic; }
.jahr-mission { font-size: 14px; color: var(--gold); }
.jahr-marke { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.echt-marke { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; border: 1px solid; }
.echt-alt { color: #b9d8a8; border-color: rgba(185, 216, 168, .5); }
.echt-vermutet { color: #e8c877; border-color: rgba(232, 200, 119, .5); }
.echt-neu { color: #e0a090; border-color: rgba(224, 160, 144, .5); }
@media (max-width: 640px) {
  .jahr-zeile { grid-template-columns: 1fr; gap: 4px; }
  .jahr-marke { flex-direction: row; align-items: center; }
}
/* 31.10.: Fest-Missionen, Entscheidungen untereinander */
.mission-wahl { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.mission-wahl .knopf { text-align: left; white-space: normal; line-height: 1.3; padding: 10px 14px; }
.mission-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.mission-liste li { padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); }
.mission-liste li.ok { color: #b9d7a0; }
.mission-liste .knopf { margin-left: 6px; }
.mission-tafel { display: flex; gap: 12px; align-items: flex-start; background: radial-gradient(ellipse at 10% 30%, rgba(120, 140, 200, .16), transparent 70%); }
.mission-tafel h2 { margin: 2px 0 4px; }
.mission-tafel p { margin: 0 0 8px; }
.besuch.mission-besuch { background: radial-gradient(ellipse at 15% 40%, rgba(120, 140, 200, .16), transparent 70%); border-radius: 6px; padding-left: 8px; }
/* Die Eiche im Hain (19.10.2026) */
.mission-ding { display: block; width: 140px; height: 140px; object-fit: contain; margin: 0 auto 8px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.fuersprecher { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
/* Die große Sturmflut (20.10.2026): die Woche der sieben Werke */
.flut-woche { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.flut-tag { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--linie); background: rgba(255, 255, 255, .04); font-size: 12px; line-height: 1.2; }
.flut-tag b { font-size: 18px; font-weight: 400; }
.flut-tag small { color: var(--leise); }
.flut-tag i { font-style: normal; color: var(--gold-hell); font-size: 11px; }
.flut-tag.heute { border-color: var(--gold); box-shadow: 0 0 10px rgba(232, 200, 119, .4); }
.flut-tag.gut { background: rgba(120, 160, 90, .2); }
.flut-tag.halb { background: rgba(200, 160, 80, .15); }
.flut-tag.verpasst { opacity: .5; }
/* Epilog: Wo ist Olorien? (20.10.2026) */
.buch-rede > .buch-gesicht { width: 58px; height: 58px; }   /* 25.10.: gemaltes Buch (bild/gesicht/buch.jpg) statt eines fehlenden Bildes */
.buch-rede > .buch-gesicht .bild { width: 100%; height: 100%; }
.buch-rede > div > b { color: #ead9b0; }
.olorien-fragen.buch-knopf .bild.mini { width: 26px; height: 26px; }
.letzte-seite { margin: 12px auto 14px; max-width: 420px; padding: 22px 26px; background: linear-gradient(#efe2c2, #e2cfa2); color: #3a2410; border-radius: 4px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 0 30px rgba(120, 80, 30, .25); font: italic 500 19px/1.5 "Cormorant", Georgia, serif; transform: rotate(-.6deg); }
.letzte-seite p { margin: 0 0 10px; }
.letzte-seite .unterschrift { text-align: right; font-size: 24px; margin: 6px 0 0; }

/* Statusfenster (20.10.): Klick auf den Rang oben rechts */
.fenster-karte.status { text-align: left; width: min(600px, 100%); }
.status-fenster .st-kopf { display: flex; gap: 16px; align-items: center; margin: 0 26px 6px 0; }
.status-fenster .st-kopf img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); flex: none; }
.status-fenster .st-kopf img.erster { object-fit: contain; padding: 6px; background: radial-gradient(circle at 50% 40%, #f6ecd6, #d9c39a); }
.status-fenster .st-kopf small { font: 600 12px "Cormorant", serif; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.status-fenster .st-kopf h2 { font-size: 32px; margin: 2px 0; color: var(--gold-hell); }
.status-fenster .st-kopf p { margin: 0; font-size: 14px; }
.status-fenster .st-block { border-top: 1px solid var(--linie); padding: 2px 0 8px; }
.status-fenster h3 { margin-top: .8em; }
.st-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; font-size: 16px; }
.st-zeile > span { color: var(--leise); }
.st-zeile > b { font-weight: 600; text-align: right; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.st-zeile.gold > b { color: var(--gold-hell); }
.st-zeile .muenze { width: 16px; height: 16px; }
.st-planet { color: var(--gold-hell); font-size: 19px; line-height: 1; }
/* Die Stundentafel (21.10.) */
.stunde-echt { cursor: pointer; }
.stunde-echt .st-planet { font-size: 18px; }
.stunden-fenster { text-align: left; }
.stunden-fenster > h2 { text-align: center; }
.stunden-fenster .olorien-rede { margin-bottom: 12px; }
.stunden-liste { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; }
.stunden-liste li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; column-gap: 8px; padding: 5px 10px; border-radius: 7px; background: rgba(255, 255, 255, .035); border: 1px solid transparent; }
.stunden-liste li.jetzt { background: rgba(232, 200, 119, .14); border-color: var(--linie2); }
.stunden-liste li > span:last-of-type { font-variant-numeric: tabular-nums; color: var(--leise); }
.stunden-liste li.jetzt > b { color: var(--gold-hell); }
.stunden-liste small { grid-column: 2 / 4; color: var(--leise); font-size: 13px; }
.stunden-liste small em { color: var(--bernstein); font-style: normal; }
.stunden-fenster .aufstieg-wissen { margin: 10px 0; }
.stunden-fenster p.leise { font-size: 14px; }
.st-balken { height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .45); border: 1px solid var(--linie2); overflow: hidden; margin: 5px 0 8px; }
.st-balken em { display: block; height: 100%; background: linear-gradient(90deg, var(--bernstein), var(--gold-hell)); }
.status-fenster p.leise { font-size: 14px; margin: 2px 0 6px; }
.st-missionen { list-style: none; margin: 4px 0 6px; padding: 0; }
.st-missionen li { padding: 6px 10px; margin-bottom: 6px; border-left: 3px solid var(--gold); background: rgba(201, 163, 82, .07); border-radius: 0 6px 6px 0; }
.st-missionen li b { display: block; color: var(--gold-hell); font-weight: 600; }
.st-missionen li small { display: block; font-size: 14px; color: var(--text); opacity: .85; }
.status-fenster .knopfreihe { justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 560px) {
  .status-fenster .st-kopf img { width: 58px; height: 58px; }
  .status-fenster .st-kopf h2 { font-size: 26px; }
  .st-zeile { font-size: 15px; }
  .status-fenster .knopfreihe { justify-content: center; }
}

/* Wirken (20.10., Rückmeldung vom Handy): Hinweis auf dem Tisch, dass ein Tipp abkürzt */
.wirk-tipp { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; pointer-events: none; padding: 3px 12px; border-radius: 12px; background: rgba(10, 6, 4, .6); color: var(--gold-hell); font: italic 600 14px "Cormorant", serif; letter-spacing: .04em; white-space: nowrap; animation: wirkTipp .6s both; }
@keyframes wirkTipp { from { opacity: 0; } }
.knopf.wirken:disabled { opacity: .75; }

/* Fehler melden (20.10.) */
.fenster-karte.melde { text-align: left; }
.melde-fenster textarea { width: 100%; box-sizing: border-box; min-height: 110px; margin: 6px 0 10px; padding: 10px 12px; font: 16px/1.4 "Garamond", Georgia, serif; color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid var(--linie2); border-radius: 6px; resize: vertical; }
.melde-fenster textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.melde-mit summary { cursor: pointer; color: var(--gold); font: 600 14px "Cormorant", serif; letter-spacing: .06em; }
.melde-mit p { font-size: 14px; }
.melde-log { max-height: 220px; overflow-y: auto; font-size: 13px; line-height: 1.35; border: 1px solid var(--linie); border-radius: 6px; padding: 6px 8px; background: rgba(0, 0, 0, .25); }
.melde-log div { padding: 2px 0; border-bottom: 1px dotted var(--linie); }
.melde-log span { color: var(--leise); margin-right: 6px; white-space: nowrap; }
.melde-log b { color: var(--gold-hell); font-weight: 600; }
.melde-status { min-height: 1.2em; margin: 6px 0 0; }
.status-fenster .knopf.leicht { background: rgba(255, 255, 255, .05); border-color: var(--linie2); }

/* Neuspieler-Audit 20.10. (Handy): Oloriens Hinweisleiste klebt unter dem Kopf statt dahinter, die Wirken-Leiste über der Ortsleiste statt darunter */
@media (max-width: 640px) {
  .tut { top: var(--kopf-h, 82px); }
  .wirken-fuss { bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 7; }
}
.stimmig-erkl { font-size: 13.5px; margin: -2px 0 8px; }
.uhr[data-a] { cursor: pointer; }

/* Sichtbare Registrierung (20.10.) */
.konto-start small { display: block; margin-top: 4px; color: var(--leise); font-size: 13.5px; font-style: italic; }
.konto-code { margin: 4px 0 10px; }
.konto-code summary { cursor: pointer; color: var(--leise); font-size: 14px; }
.konto-code[open] summary { margin-bottom: 6px; }
.st-gast { border-top-color: var(--gold); }
.st-gast p { font-size: 15px; margin: 8px 0; }
/* Deutung für Neue: Einzelheiten eingeklappt (20.10.) */
.deutung-mehr { margin-top: 10px; }
.deutung-mehr > summary { cursor: pointer; color: var(--gold); font: 600 14px "Cormorant", serif; letter-spacing: .06em; padding: 4px 0; }

/* Die letzte Seite (20.10.): Olafs Bild, sein Spruch, Psalm 121,8 und Le-Olam */
.letzte-seite-fenster { text-align: center; }
.letzte-seite-bild { display: block; width: min(320px, 78%); margin: 10px auto 14px; border-radius: 6px; box-shadow: 0 0 40px rgba(180, 200, 240, .18), 0 8px 24px rgba(0, 0, 0, .55); animation: hervor 1.2s .2s both; }
.letzte-seite-spruch { font: 400 25px/1.35 "Fraktur", serif; color: #8e2a17; text-shadow: 0 1px 0 rgba(255, 240, 210, .6); margin: 4px 0 12px; animation: hervor .9s .9s both; }
.letzte-seite-psalm { font: italic 500 18px/1.4 "Cormorant", serif; max-width: 420px; margin: 0 auto 12px; animation: hervor .9s 1.5s both; }
.letzte-seite-olam { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 6px; animation: hervor .9s 2.1s both; }
.letzte-seite-olam span { font-size: 30px; color: #7a5a1e; line-height: 1.2; }
.letzte-seite-olam b { font: 600 15px "Cormorant", serif; letter-spacing: .3em; text-transform: uppercase; color: #8e2a17; }
.letzte-seite-olam small { color: rgba(58, 36, 16, .7); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .letzte-seite-bild, .letzte-seite-spruch, .letzte-seite-psalm, .letzte-seite-olam { animation: none; } }

/* 20.10.: Punkt im Bild führt zur Missionsliste darunter */
@keyframes tafelLeuchten { 0% { box-shadow: 0 0 0 0 rgba(232, 200, 119, .0); } 30% { box-shadow: 0 0 0 4px rgba(232, 200, 119, .55), 0 0 30px rgba(232, 200, 119, .35); } 100% { box-shadow: 0 0 0 0 rgba(232, 200, 119, 0); } }
.tafel.aufleuchten { animation: tafelLeuchten 1.6s ease-out; }
/* Status als teilbares Bild (21.10.) */
.teil-fenster { text-align: center; }
.teil-fenster .teil-bild { display: block; width: auto; max-width: 100%; max-height: 62vh; margin: 10px auto 8px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.teil-fenster a.knopf { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
/* Irrlichter im Moor bei Nacht (24.10.) */
.irrlichter { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.irrlicht { position: absolute; width: clamp(10px, 1.5%, 20px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); opacity: 0;
  background: radial-gradient(circle, #fff 0 16%, rgba(200, 240, 255, .95) 28%, rgba(130, 205, 255, .5) 52%, rgba(130, 205, 255, 0) 72%);
  box-shadow: 0 0 12px 5px rgba(160, 220, 255, .6), 0 0 34px 14px rgba(110, 180, 255, .25);
  animation: irr-weg var(--d, 9s) ease-in-out forwards, irr-flacker 1.1s ease-in-out infinite alternate; }
.irrlicht::before { content: ""; position: absolute; inset: -160%; border-radius: 50%; }   /* größere Tippfläche */
.irrlicht::after { content: ""; position: absolute; left: 50%; top: 260%; width: 140%; height: 45%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(170, 225, 255, .45), rgba(170, 225, 255, 0) 70%); filter: blur(1px); }   /* Spiegelung im Wasser */
@keyframes irr-weg { 0% { opacity: 0; translate: 0 0; } 14% { opacity: .95; } 45% { opacity: .55; translate: calc(var(--dx) * .45) var(--dy); } 60% { opacity: .9; } 86% { opacity: .75; } 100% { opacity: 0; translate: var(--dx) calc(var(--dy) * .3); } }
@keyframes irr-flacker { 0% { scale: .82; filter: brightness(.85); } 40% { scale: 1.05; } 100% { scale: 1.18; filter: brightness(1.3); } }
@keyframes irr-still { 0% { opacity: 0; } 20%, 80% { opacity: .85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .irrlicht { animation: irr-still var(--d, 9s) ease-in-out forwards; } }
/* Briefe von außerhalb und Sternbuch (24.10.) */
.stern-fenster { text-align: center; }
.stern-fenster .stern-frage { font: italic 500 22px/1.35 "Cormorant", serif; color: var(--gold-hell, #e8c877); margin: 10px auto 16px; max-width: 34em; }
.stern-fenster .stern-lehre { max-width: 34em; margin: 8px auto; }
.karten-ziel.stern-ziel i { box-shadow: 0 0 14px 5px rgba(200, 220, 255, .6); }
/* 25.10. (Olaf: „Die beiden Buttons liegen so dicht beieinander“): Luft zwischen „Olorien fragen“ und „Auftrag zurückgeben“ */
.auftrag-jetzt .zurueck-knopf { display: block; width: fit-content; margin-top: 12px; }
/* Die Hühner auf dem Dorfplatz (25.10.): unsichtbare Tippfläche über den zwei gemalten Hühnern links vorn, unter den Leuten (die gehen vor) */
.d-huhn { position: absolute; left: 4.6%; top: 74.6%; width: 4%; aspect-ratio: 1.5; z-index: 1; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.d-huhn:hover, .d-huhn:focus-visible { background: radial-gradient(ellipse, rgba(255, 230, 170, .28), rgba(255, 230, 170, 0) 70%); outline: none; }
.huhn-ruf { position: absolute; left: 60%; top: -55%; font: 400 clamp(12px, 1.2vw, 20px) "Fraktur", serif; color: #fff1cf; text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 0 14px rgba(255, 220, 150, .5); white-space: nowrap; opacity: 0; pointer-events: none; }
.d-huhn.gackert .huhn-ruf { animation: krahRuf 1.4s ease-out; }
/* Sondermission sichtbar (25.10.) */
.chip.mission { border-color: var(--gold, #c9a352); box-shadow: inset 0 0 0 1px rgba(232, 200, 119, .35); }
.mission-marke { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--gold, #c9a352); background: rgba(201, 163, 82, .1); border-radius: 0 6px 6px 0; }
.mission-marke b { display: block; font: 600 13px "Cormorant", serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hell, #e8c877); }
.mission-marke span { display: block; font-size: 14px; color: var(--leise, #c9b48e); }
/* 25.10. (Olaf: „Mir wurde kein Junge als Bild angezeigt“): das Kind, das im Epilog klopft (später Lehrling), mit Bild */
.epilog-kind { display: flex; justify-content: center; margin: 4px 0 12px; }
.epilog-kind .gesicht { width: 104px; height: 104px; border: 2px solid var(--gold, #c9a352); box-shadow: 0 0 18px rgba(232, 200, 119, .35); }
/* Das Sternenbuch im Buch der Lehre (25.10.) */
.stern-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.stern-liste li { padding: 8px 10px; margin: 0 0 6px; border-left: 3px solid rgba(201, 163, 82, .5); background: rgba(255, 255, 255, .03); border-radius: 0 6px 6px 0; }
.stern-liste li.gut { border-left-color: #7fb069; }
.stern-liste li.falsch { border-left-color: #c0573f; }
.stern-liste li b { display: block; font-style: italic; color: var(--gold-hell, #e8c877); }
.stern-liste li span { display: block; font-size: 14px; }
.stern-liste li small { display: block; color: var(--leise, #c9b48e); margin-top: 2px; }
/* Erklärung eines Festes durch Olorien (26.10.2026) */
.fest-erklaerung h3 { margin: 16px 0 6px; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #c9d3f5; }
.fest-regeln { margin: 0; padding-left: 18px; text-align: left; }
.fest-regeln li { margin: 0 0 8px; line-height: 1.5; }
.fest-regeln b { color: #eef2ff; }
.fest-tafel [data-a="festErklaerung"] { margin-top: 6px; }
.fest-erklaerung .fest-bild { display: block; width: 100%; aspect-ratio: 1000 / 571; object-fit: cover; border-radius: 6px; margin: 10px 0 14px; border: 1px solid rgba(170, 184, 230, .45); box-shadow: 0 0 30px rgba(150, 170, 240, .2); }
/* Vollversion auf der Ränge-Seite und im Statusfenster (26.10.2026) */
.voll-zeichen { margin-left: 8px; padding: 1px 8px; border-radius: 10px; border: 1px solid rgba(232, 200, 119, .6); color: var(--gold-hell); font: 600 12px "Cormorant", serif; letter-spacing: .06em; font-style: normal; vertical-align: middle; }
.voll-raenge { margin: 14px 0 10px; padding: 12px 14px; border: 1px solid rgba(232, 200, 119, .45); border-radius: 6px; background: rgba(60, 36, 14, .45); }
.voll-raenge p { margin: 0 0 10px; }
/* Der Eichenkranz ab dem höchsten Rang (28.10.): Blätter rings um das runde Rangbild */
.kranz-rahmen { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; --r: 52px; --b: 30px; padding: 14px; }
.kranz-rahmen > img:not(.kranz-blatt) { position: relative; z-index: 1; }
.status-fenster .st-kopf .kranz-rahmen img.kranz-blatt, .kranz-blatt { position: absolute; left: 50%; top: 50%; width: auto !important; height: var(--b) !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--w)) translateY(calc(-1 * var(--r))) rotate(var(--d)) scale(var(--s, 1)); z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); transition: opacity .6s; }
.kranz-blatt.leer { opacity: .16; filter: grayscale(.6); }
.kranz-rahmen.gold .kranz-blatt:not(.leer) { filter: drop-shadow(0 0 4px rgba(255, 210, 120, .7)); }
.kranz-eicheln { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 2px; font: 600 12px "Cormorant", serif; color: var(--gold-hell, #e8c877); }
.status-fenster .st-kopf .kranz-eicheln img, .kranz-eicheln img { width: 14px !important; height: auto !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important; }
.kranz-gross { display: flex; justify-content: center; margin: 4px 0 10px; }
.kranz-gross .kranz-rahmen { --r: 78px; --b: 44px; padding: 26px; }
.kranz-gross .kranz-bild { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold, #c9a352); }
.rang-kranz { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #b9d38a; margin-left: 2px; }
.rang-kranz.gold { color: var(--gold-hell, #e8c877); }
.rang-kranz img { height: 16px; width: auto; }
/* Ein neues Blatt wächst in den Kranz (28.10.): --s als registrierte Zahl, damit sie sich animieren lässt; ohne @property steht das Blatt einfach da */
@property --s { syntax: "<number>"; inherits: false; initial-value: 1; }
.kranz-blatt.neu { animation: blatt-neu 1.8s .5s both cubic-bezier(.2, .8, .3, 1.2); z-index: 4; }
@keyframes blatt-neu {
  0% { --s: 0; opacity: 0; filter: drop-shadow(0 0 0 rgba(255, 220, 130, 0)); }
  55% { --s: 1.45; opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 220, 130, .95)); }
  100% { --s: 1; opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 220, 130, .6)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
}
.kranz-fenster .kranz-gross .kranz-rahmen::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; z-index: 0; pointer-events: none; animation: kranz-schein 2.4s .5s both ease-out;
  background: radial-gradient(circle, rgba(255, 220, 130, .32) 0%, rgba(255, 220, 130, .1) 45%, transparent 70%); }
@keyframes kranz-schein { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: .35; transform: scale(1.05); } }
.kranz-geschichte { display: flex; gap: 12px; align-items: flex-start; text-align: left; margin: 4px 0 10px; }
.kranz-geschichte .gesicht { flex: none; width: 56px; height: 56px; }
.kranz-geschichte p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .kranz-blatt.neu, .kranz-fenster .kranz-gross .kranz-rahmen::after { animation: none; } }
/* Filter nach Anliegen über den Fächern (29.10.): eine Zeile, am Handy waagrecht wischbar */
.anliegen-filter { position: relative; display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: thin; margin-bottom: 6px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.anliegen-filter > span { flex: none; font: italic 14px "Cormorant", serif; margin-right: 2px; }
.anliegen-filter button { flex: none; font: 600 13px "Cormorant", serif; color: var(--leise); background: rgba(30, 19, 10, .7); border: 1px solid var(--linie); border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.anliegen-filter button.auftrag { border-color: rgba(201, 163, 82, .6); color: #d9c08a; }
.anliegen-filter button.an { color: #1c1208; background: var(--gold-hell, #e8c877); border-color: var(--gold, #c9a352); }
/* Info-Knopf auf den Kacheln (29.10., Olaf und Silvaaa: am Handy landet der Gegenstand oft auf dem Tisch statt die Karteikarte zu öffnen): unsichtbar größere Tippfläche, am Handy auch sichtbar größer */
.kachel-info { z-index: 2; }
.kachel-info::before { content: ""; position: absolute; inset: -9px -5px -12px -12px; border-radius: 0 6px 0 8px; }
@media (pointer: coarse) {
  .kachel-info { width: 26px; height: 26px; top: 3px; right: 3px; font-size: 15px; }
  .kachel-info::before { inset: -6px -4px -14px -14px; }
}