/* Geisterarchiv – Werkraum (Entwurf 16.10.2026) */
:root { --nacht: #0a0604; --gold: #c9a352; --perg: #e4cf9f; --tinte: #2b1a0e; --rot: #9a2c1b; --text: #ead9b3; --leise: rgba(234,217,179,.62); --s: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--nacht); color: var(--text); font-family: "Garamond", Georgia, serif; overflow: hidden; -webkit-user-select: none; user-select: none; }
button { font-family: inherit; }
.rahmen { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; 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 rgba(201,163,82,.22); min-width: 0; }
.marke { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--gold); font: 400 28px "Fraktur", serif; white-space: nowrap; }
.signet { width: 34px; height: 34px; }
.himmel-knopf { display: flex; gap: 12px; align-items: center; background: none; border: 1px solid rgba(201,163,82,.35); color: var(--text); padding: 5px 12px; border-radius: 20px; cursor: pointer; font: 600 14px "Cormorant", serif; letter-spacing: .03em; min-width: 0; overflow: hidden; white-space: nowrap; }
.himmel-knopf b { font-family: "Garamond", "Segoe UI Symbol", serif; color: var(--gold); font-weight: 400; font-size: 16px; }
.kopf-rechts { margin-left: auto; display: flex; gap: 8px; }
.knopf-klein { font: 600 14px "Cormorant", serif; color: var(--leise); background: rgba(10,6,4,.5); border: 1px solid rgba(201,163,82,.3); padding: 5px 12px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.knopf-klein:hover { color: var(--text); border-color: var(--gold); }

/* Kasten */
.kasten { background: linear-gradient(90deg, #22150a, #1a1008); border-right: 1px solid rgba(201,163,82,.2); display: flex; flex-direction: column; min-height: 0; min-width: 0; transition: opacity .8s; }
.reiter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 8px 8px 0; }
.reiter button { font: 600 13px "Cormorant", serif; color: var(--leise); background: #2e1d0f; border: 1px solid rgba(201,163,82,.15); border-bottom: 0; padding: 7px 2px; border-radius: 4px 4px 0 0; cursor: pointer; }
.reiter button.an { color: #1a1008; background: var(--gold); }
.fach { flex: 1; overflow-y: auto; padding: 10px 8px 20px; border-top: 2px solid var(--gold); background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 7px), #20140a; }
.fach h2 { font: 400 22px "Fraktur", serif; color: var(--gold); margin: 2px 4px; }
.fach .erkl { font: italic 500 15px "Cormorant", serif; color: var(--leise); margin: 0 4px 10px; line-height: 1.35; }
.vorrat { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.stueck { position: relative; background: radial-gradient(ellipse at 50% 30%, #3b2715, #24170c); border: 1px solid rgba(201,163,82,.16); border-radius: 6px; padding: 6px 4px 6px; text-align: center; cursor: grab; touch-action: none; }
.stueck:hover { border-color: rgba(201,163,82,.55); }
.stueck img, .stueck canvas { width: 62px; height: 62px; object-fit: contain; display: block; margin: 0 auto 3px; pointer-events: none; filter: drop-shadow(2px 4px 3px rgba(0,0,0,.6)); }
.stueck .name { font: 600 15px "Cormorant", serif; line-height: 1.1; }
.stueck .klein { font: italic 500 12.5px "Cormorant", serif; color: var(--leise); line-height: 1.15; }
.stueck.fern { opacity: .42; cursor: help; }
.stueck .marke-zeit, .stueck .marke-grim { position: absolute; top: 4px; left: 5px; font: 600 10.5px "Cormorant", serif; letter-spacing: .04em; color: var(--gold); }
.stueck .marke-grim { left: auto; right: 22px; }
.stueck .info { position: absolute; top: 2px; right: 3px; width: 19px; height: 19px; border-radius: 50%; border: 1px solid rgba(201,163,82,.45); background: rgba(10,6,4,.6); color: var(--gold); font: italic 600 13px/16px "Garamond", serif; padding: 0; cursor: pointer; }

/* Tisch */
.tisch { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: #2a1a0e; }
.tisch-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#kreide, #dunkel, #glut, #rauch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#glut { mix-blend-mode: screen; }
.phase-kreis #kreide { pointer-events: auto; cursor: crosshair; touch-action: none; }
.schale { position: absolute; pointer-events: auto; cursor: pointer; filter: drop-shadow(4px 8px 7px rgba(0,0,0,.7)); }
.schale-glimmen { position: absolute; pointer-events: none; opacity: 0; mix-blend-mode: screen; z-index: 1;
  filter: brightness(1.7) sepia(1) saturate(5) hue-rotate(-18deg) blur(.4px) drop-shadow(0 0 6px rgba(255,140,50,.8));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 62%, #000 70% 88%, transparent 94%); mask-image: radial-gradient(circle at 50% 50%, transparent 0 62%, #000 70% 88%, transparent 94%); }
.rand-links { position: absolute; left: 10px; bottom: 8px; z-index: 50; font: italic 500 13px "Cormorant", serif; color: rgba(234,217,179,.42); }
.rand-links a { color: inherit; text-decoration: underline dotted; }
.rand-links a:hover { color: var(--text); }
.wirkt .rand-links { display: none; }
.quellen-knopf { background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: italic 500 13px "Cormorant", serif; color: rgba(234,217,179,.42); text-decoration: underline dotted; }
.quellen-knopf:hover { color: var(--text); }
.wirkt .quellen-knopf { display: none; }
.quelle { padding: 7px 0; border-bottom: 1px dotted rgba(110,74,29,.35); }
.quelle b { display: block; font: 600 16.5px "Garamond", serif; }
.quelle span { font: italic 500 14.5px "Cormorant", serif; color: #6b4520; }
.quelle p { margin: 2px 0 0 !important; font-size: 15px !important; }
/* Kräuter in der Schale */
.schale-inhalt { position: absolute; pointer-events: none; z-index: 1; }
.schale-inhalt img { position: absolute; transform-origin: 50% 50%; filter: brightness(.9) drop-shadow(0 0 3px rgba(255,120,40,.7));
  animation: verkohlen 80s linear forwards; }
@keyframes verkohlen {
  0% { filter: brightness(.95) drop-shadow(0 0 2px rgba(255,140,50,.9)); opacity: 1; }
  25% { filter: brightness(.7) sepia(.4) drop-shadow(0 0 4px rgba(255,110,30,.8)); }
  70% { filter: brightness(.35) sepia(.6) drop-shadow(0 0 3px rgba(255,90,20,.5)); opacity: .9; }
  100% { filter: brightness(.25) grayscale(.6); opacity: .55; }
}
/* Rauch als Film (fal.ai/Kling, schwarzer Grund → screen) */
.rauch-videos { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 4; mix-blend-mode: screen; }
.rauch-video { position: absolute; left: 0; bottom: 0; opacity: 0; mix-blend-mode: screen; transform-origin: 50% 100%;
  filter: sepia(.18) brightness(1.05) contrast(1.15);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 9%, #000 55%, transparent 98%), linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0, #000 9%, #000 55%, transparent 98%), linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
/* Vom Tisch in die Kräuterstube: die Tischplatte kippt in den Raum, die Dinge richten sich auf */
.tisch { perspective: 1000px; perspective-origin: 50% 32%; }
.buehne { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% var(--kipp-y, 50%);
  transition: transform 5s cubic-bezier(.55,.05,.25,1); }
.stube { position: absolute; inset: 0; opacity: 0; transition: opacity 4s ease 1s; }
.stube img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#dinge { transform-style: preserve-3d; }
.ding { transition: opacity 1.2s, filter .4s; }

.raum3d .stube { opacity: 1; }
.raum3d .buehne { transform: translateY(var(--kipp-dy, 18%)) rotateX(var(--kipp, 56deg)) scale(var(--kipp-s, 1.12)); }
.raum3d #dinge .ding { opacity: 0; }
.raum3d .tisch-bild img, .raum3d .tisch-rand { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
@media (prefers-reduced-motion: reduce) { .buehne, .ding, .flamme, .rauch-video { transition-duration: .01s; } }
/* Startauswahl */
.wahl { position: absolute; inset: 0; z-index: 80; overflow-y: auto; background: radial-gradient(ellipse at 50% 30%, rgba(26,16,8,.86), rgba(8,5,2,.95)); display: none; }
.phase-wahl .wahl { display: block; }
.phase-wahl .kreis-anleitung { display: none; }
.phase-wahl .kasten, .phase-wahl .urteil { opacity: .3; pointer-events: none; }
.wahl-innen { max-width: 820px; margin: 0 auto; padding: 26px 18px 40px; }
.wahl h2 { font: 400 clamp(28px, 4vw, 40px) "Fraktur", serif; color: var(--gold); margin: 0 0 6px; text-align: center; }
.wahl-unter { font: italic 500 17px/1.4 "Cormorant", serif; color: var(--leise); text-align: center; margin: 0 auto 20px; max-width: 36em; }
.wahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.wahl-karte { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 6px; cursor: pointer;
  background: radial-gradient(ellipse at 30% 20%, #3b2715, #22150b); border: 1px solid rgba(201,163,82,.25); color: var(--text); }
.wahl-karte:hover { border-color: var(--gold); }
.wahl-karte b { font: 600 19px "Cormorant", serif; }
.wahl-karte .wahl-klein { grid-column: 2; font: italic 500 13.5px/1.25 "Cormorant", serif; color: var(--leise); }
.wahl-zeichen { grid-row: 1 / span 2; font: 400 30px "Garamond", "Segoe UI Symbol", serif; color: var(--gold); width: 36px; text-align: center; }
.wahl-frei { display: block; margin: 18px auto 0; }
.wahl-zurueck { margin-bottom: 10px; }
.vorschlag { background: radial-gradient(ellipse at 20% 0, #3a2614, #1e1309); border: 1px solid rgba(201,163,82,.28); border-radius: 6px; padding: 14px 16px 16px; margin: 0 0 14px; }
.vorschlag-kopf { display: flex; gap: 10px; align-items: center; }
.vorschlag h3 { font: 400 25px "Fraktur", serif; color: var(--gold); margin: 0; }
.vorschlag-art { font: italic 500 14px "Cormorant", serif; color: var(--leise); }
.vorschlag > p { font: 500 16px/1.4 "Garamond", serif; margin: 8px 0; color: rgba(234,217,179,.9); }
.vorschlag-dinge { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.vorschlag-dinge figure { margin: 0; width: 74px; text-align: center; }
.vorschlag-dinge figure.fern { opacity: .35; }
.vorschlag-dinge img, .vorschlag-dinge canvas { width: 54px; height: 54px; object-fit: contain; display: block; margin: 0 auto 2px; filter: drop-shadow(2px 4px 3px rgba(0,0,0,.6)); }
.vorschlag-dinge figcaption { font: 600 12.5px/1.1 "Cormorant", serif; color: var(--leise); }
.vorschlag-info { margin: 0 0 12px; padding-left: 18px; font: 500 14.5px/1.4 "Garamond", serif; color: var(--leise); }
.vorschlag-warn { font: italic 500 14.5px "Cormorant", serif !important; color: #e0a948 !important; }
/* Rezept im Kasten und im Urteil */
.reiter .rezept-reiter:not(.an) { color: var(--gold); }
.stueck.erledigt { border-color: #8fb35a; }
.stueck.erledigt::after { content: "✓"; position: absolute; left: 6px; top: 3px; color: #9fbf6a; font: 600 15px "Garamond", serif; }
.rezept-knoepfe { display: grid; gap: 6px; margin-top: 10px; }
.rezept-stand { margin: 0 0 8px; padding: 9px 11px; border: 1px solid rgba(201,163,82,.3); border-radius: 4px; background: rgba(201,163,82,.06); }
.stand-kopf { display: flex; justify-content: space-between; font: 600 15px "Cormorant", serif; color: var(--gold); }
.rezept-stand p { margin: 4px 0 0; font: 500 14px/1.35 "Garamond", serif; color: rgba(234,217,179,.82); }
.rezept-stand .stand-anders { padding-left: 8px; border-left: 3px solid #d9a441; }
.rezept-stand .stand-anders b { color: var(--text); font-weight: 600; }
.rezept-stand .stand-fertig { color: #9fbf6a; }
@media (max-width: 860px) { .wahl-raster { grid-template-columns: 1fr 1fr; } .wahl-karte { padding: 9px 10px; } .wahl-zeichen { font-size: 24px; width: 28px; } }
#dinge { position: absolute; inset: 0; pointer-events: none; }   /* sonst fängt die Ebene das Kreisziehen ab */
.ding { position: absolute; touch-action: none; cursor: grab; pointer-events: auto; }
.ding img, .ding canvas { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(calc(4px * var(--s)) calc(7px * var(--s)) calc(5px * var(--s)) rgba(0,0,0,.72)); }
.ding.zieht { cursor: grabbing; z-index: 30; }
.ding.zieht img, .ding.zieht canvas { filter: drop-shadow(calc(10px * var(--s)) calc(18px * var(--s)) calc(10px * var(--s)) rgba(0,0,0,.55)); transform: scale(1.04); }
.ding.leuchtet img, .ding.leuchtet canvas { filter: drop-shadow(0 0 calc(14px * var(--s)) #ffcf7a) drop-shadow(0 0 calc(4px * var(--s)) #fff0c0); }
.ding.neu { animation: hinlegen .4s ease-out; }
@keyframes hinlegen { from { transform: scale(1.15) translateY(-10px); opacity: .5; } to { transform: none; opacity: 1; } }
.ding .etikett { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font: 600 13px "Cormorant", serif; color: var(--text);
  background: rgba(10,6,4,.82); padding: 1px 8px; border-radius: 3px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 2; }
.ding:hover .etikett { opacity: 1; }
#flammen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.flamme { position: absolute; transform-origin: 50% 92%; pointer-events: none; mix-blend-mode: screen; }
.flamme i { position: absolute; display: block; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }
.flamme-mantel { inset: 0; background: radial-gradient(ellipse 50% 60% at 50% 70%, rgba(255,200,110,.95) 0%, rgba(255,140,40,.75) 45%, rgba(220,70,10,0) 75%); filter: blur(1.4px); }
.flamme-kern { left: 26%; right: 26%; top: 34%; bottom: 8%; background: radial-gradient(ellipse 50% 60% at 50% 66%, #fffbea 0%, #fff0b8 45%, rgba(255,220,140,0) 100%); filter: blur(.7px); }
.flamme-blau { left: 32%; right: 32%; bottom: 3%; height: 18%; background: radial-gradient(ellipse at 50% 70%, rgba(110,140,255,.75), rgba(60,90,220,0) 70%); filter: blur(.5px); }

.kreis-anleitung { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 86%); text-align: center; pointer-events: none; transition: opacity 1s;
  text-shadow: 0 0 14px #000, 0 0 5px #000; }
.kreis-anleitung p { margin: 0 0 10px; font: italic 500 18px/1.4 "Cormorant", serif; color: #efe0bb; }
.kreis-anleitung .gross { font: 400 34px "Fraktur", serif; color: var(--gold); font-style: normal; }
body:not(.phase-kreis) .kreis-anleitung { opacity: 0; }
.hinweis { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 45; font: italic 500 clamp(17px, 2.1vw, 25px) "Cormorant", serif; color: #f1e2bc;
  text-shadow: 0 0 12px #000, 0 0 4px #000; text-align: center; pointer-events: none; opacity: 0; transition: opacity 1s; width: 92%; }
.hinweis.an { opacity: 1; }
.formel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); z-index: 46; text-align: center; pointer-events: none; opacity: 0; transition: opacity 1.6s, transform 5s;
  padding: 26px 44px; max-width: 86%; background: radial-gradient(ellipse, rgba(228,207,159,.94), rgba(228,207,159,.72) 58%, rgba(228,207,159,0) 72%); }
.formel.an { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.formel .orig { font: 400 clamp(22px, 3.2vw, 40px) "Unziale", serif; color: var(--rot); line-height: 1.3; white-space: pre-line; }
.formel .glosse { font: italic 400 clamp(15px, 1.7vw, 20px) "Garamond", serif; color: var(--tinte); margin-top: 8px; }
.meldung { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -30px); z-index: 60; opacity: 0; transition: .6s; pointer-events: none; max-width: 90%;
  background: #1a1008; border: 1px solid var(--gold); color: var(--text); padding: 9px 18px; border-radius: 4px; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.meldung.an { opacity: 1; transform: translate(-50%, 0); }
.meldung.warn { border-color: #d0532f; }
.meldung small { display: block; font: 600 12px "Cormorant", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.meldung.warn small { color: #ff8a5c; }
.meldung b { font: 400 22px "Fraktur", serif; color: var(--gold); }
.meldung span { display: block; font: italic 500 15px "Cormorant", serif; color: var(--leise); }
.ueberspringen { position: absolute; right: 14px; bottom: 12px; z-index: 50; display: none; font: 600 14px "Cormorant", serif; color: var(--leise); background: rgba(10,6,4,.6); border: 1px solid rgba(201,163,82,.3); padding: 5px 12px; border-radius: 3px; cursor: pointer; }
.wirkt .ueberspringen { display: block; }
.wirkt .kasten, .wirkt .urteil { opacity: .12; pointer-events: none; }
.wirkt .ding, .wirkt .schale { pointer-events: none; }
.phase-kreis .kasten, .phase-kreis .urteil { opacity: .35; pointer-events: none; }

/* Urteil */
.urteil { background: linear-gradient(270deg, #22150a, #1a1008); border-left: 1px solid rgba(201,163,82,.2); display: flex; flex-direction: column; min-height: 0; min-width: 0; transition: opacity .8s; }
.urteil-kopf { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 12px 16px 8px; cursor: default; }
.urteil-titel { display: block; font: 400 22px "Fraktur", serif; color: var(--gold); }
.stimmig { display: block; height: 6px; background: rgba(234,217,179,.12); border-radius: 3px; overflow: hidden; margin: 8px 0 4px; }
.stimmig i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7a2416, #c9a352); transition: width .7s; }
.stimmig-wort { font: italic 500 14px "Cormorant", serif; color: var(--leise); }
.urteil-inhalt { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
.spricht { font: 500 18px/1.3 "Garamond", serif; margin: 4px 0 6px; }
.spricht b, .herrscher b { color: #e8b866; font-weight: 600; }
.herrscher { font: 500 15px/1.35 "Garamond", serif; color: var(--leise); margin: 0 0 10px; }
.befunde { list-style: none; margin: 0 0 14px; padding: 0; }
.befunde li { position: relative; padding: 7px 0 7px 26px; border-top: 1px solid rgba(201,163,82,.12); font: 500 15px/1.35 "Garamond", serif; color: rgba(234,217,179,.88); }
.befunde li b { display: block; font: 600 15px "Cormorant", serif; letter-spacing: .02em; color: var(--text); }
.befunde li::before { position: absolute; left: 2px; top: 7px; width: 18px; text-align: center; font: 600 16px "Garamond", serif; }
.befunde .gut::before { content: "✓"; color: #9fbf6a; }
.befunde .farbe::before { content: "~"; color: #e0a948; }
.befunde .gegen::before { content: "✕"; color: #e0664a; }
.befunde .warn::before { content: "!"; color: #ff7a4a; }
.befunde .warn b { color: #ff9c74; }
.befunde .info::before { content: "·"; color: var(--leise); }
.befunde .info { color: var(--leise); }
.urteil-h { font: 600 12.5px "Cormorant", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 14px 0 6px; }
.rat, .rollen { list-style: none; margin: 0; padding: 0; }
.rat li { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 8px 10px; margin-bottom: 6px; border-radius: 4px; background: rgba(201,163,82,.08); border: 1px solid rgba(201,163,82,.2); }
.rat li b { font: 600 16px "Cormorant", serif; color: var(--text); }
.rat .plus { grid-column: 2; grid-row: 1; font: 600 13px "Cormorant", serif; color: #9fbf6a; align-self: center; }
.rat .tipp-text { grid-column: 1 / -1; font: 500 14.5px/1.35 "Garamond", serif; color: rgba(234,217,179,.82); margin-top: 2px; }
.rat .tipp-knopf { grid-column: 1 / -1; justify-self: start; margin-top: 6px; color: var(--gold); }
.rat .tipp-zeit, .rat .tipp-kreis, .rat .tipp-info { background: transparent; }
.kraft { display: grid; grid-template-columns: 92px 1fr 38px; gap: 8px; align-items: center; margin: 3px 0; font: 500 14.5px "Garamond", serif; color: var(--leise); }
.kraft.haupt { color: var(--text); }
.kraft-balken { height: 7px; background: rgba(234,217,179,.1); border-radius: 4px; overflow: hidden; }
.kraft-balken i { display: block; height: 100%; background: rgba(201,163,82,.55); border-radius: 4px; }
.kraft.haupt .kraft-balken i { background: linear-gradient(90deg, #9a2c1b, #e0b23c); }
.kraft-zahl { text-align: right; font-size: 13px; }
.kraft-wort { font: italic 500 14.5px "Cormorant", serif; color: var(--leise); margin: 6px 0 0; }
.rollen li { display: grid; grid-template-columns: 1fr auto; padding: 6px 0 6px 12px; border-left: 3px solid rgba(234,217,179,.2); margin-bottom: 4px; cursor: pointer; }
.rollen li b { font: 600 15px "Cormorant", serif; color: var(--text); }
.rollen .rolle-art { font: 600 12px "Cormorant", serif; letter-spacing: .08em; text-transform: uppercase; align-self: center; }
.rollen .rolle-text { grid-column: 1 / -1; font: 500 14px/1.35 "Garamond", serif; color: rgba(234,217,179,.78); }
.rolle-traegt { border-color: #8fb35a !important; } .rolle-traegt .rolle-art { color: #9fbf6a; }
.rolle-faerbt { border-color: #d9a441 !important; } .rolle-faerbt .rolle-art { color: #e0a948; }
.rolle-stoert { border-color: #d0583c !important; } .rolle-stoert .rolle-art { color: #e0664a; }
.rolle-warn { border-color: #ff7a4a !important; } .rolle-warn .rolle-art { color: #ff8a5c; }
.rolle-ruht .rolle-art, .rolle-beiwerk .rolle-art { color: var(--leise); }
.rollen .rolle-aussen { display: block; cursor: default; font: italic 500 14px "Cormorant", serif; color: var(--leise); }
.urteil-knoepfe { display: grid; gap: 8px; position: sticky; bottom: -16px; padding: 10px 0 16px; background: linear-gradient(rgba(26,16,8,0), #1c1209 30%); }
.knopf { font: 600 17px "Cormorant", serif; letter-spacing: .05em; padding: 9px 14px; border-radius: 3px; cursor: pointer; border: 1px solid #6e4a1d; color: #f4e6c4; background: linear-gradient(#a0331f, #761f12); }
.knopf:disabled { opacity: .38; cursor: default; }
.knopf.leise { color: var(--text); background: rgba(10,6,4,.4); border-color: rgba(201,163,82,.4); }
.blatt .knopf.leise { color: var(--tinte); background: transparent; border-color: #8c6a3a; }

/* Fenster */
.blatt-fenster { border: 0; padding: 0; background: transparent; max-width: min(600px, 94vw); width: 100%; }
.blatt-fenster::backdrop { background: rgba(5,3,1,.74); }
.blatt { color: var(--tinte); padding: 22px 24px 18px; border-radius: 3px; background: radial-gradient(ellipse at 40% 30%, #efe0b9, #d6bc86 88%); box-shadow: inset 0 0 40px rgba(120,80,30,.4); max-height: 88vh; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.blatt h3 { font: 400 28px "Fraktur", serif; color: var(--rot); margin: 0 0 6px; }
.blatt h4 { font: 600 14px "Cormorant", serif; letter-spacing: .12em; text-transform: uppercase; color: #7a4f22; margin: 14px 0 4px; }
.blatt p { margin: 0 0 10px; font-size: 17px; line-height: 1.42; }
.blatt label { display: block; font: 600 13px "Cormorant", serif; letter-spacing: .1em; text-transform: uppercase; color: #6b4520; margin: 12px 0 4px; }
.blatt input, .blatt select { width: 100%; font: 500 19px "Cormorant", serif; padding: 8px 10px; color: var(--tinte); background: rgba(255,250,235,.55); border: 1px solid #a07c45; border-radius: 3px; }
.blatt ul, .blatt ol { margin: 0 0 10px; padding-left: 22px; font-size: 16.5px; line-height: 1.42; }
.blatt li { margin-bottom: 4px; }
.blatt .klein { font: italic 500 15px "Cormorant", serif; color: #6b4520; }
.karte-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.karte-kopf canvas { width: 86px; height: 86px; flex: 0 0 auto; }
.karte-klein { font: italic 500 16px "Cormorant", serif; color: #6b4520; margin: 0 !important; }
.vorsicht { background: rgba(154,44,27,.1); border-left: 3px solid var(--rot); padding: 6px 10px; }
.liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.liste button { text-align: left; font: 600 16px "Cormorant", serif; color: var(--tinte); background: rgba(255,250,235,.4); border: 1px solid rgba(110,74,29,.35); border-radius: 3px; padding: 7px 9px; cursor: pointer; line-height: 1.15; }
.liste button small { display: block; font: italic 500 13px "Cormorant", serif; color: #6b4520; }
.liste button.zu { opacity: .6; }
.liste button:hover { border-color: var(--rot); }
.vorschau-segen { font: italic 500 19px "Garamond", serif; color: var(--rot); background: rgba(255,250,235,.4); padding: 10px 12px; border-left: 3px solid var(--rot); margin: 14px 0; min-height: 3em; white-space: pre-line; }
.zeile { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.fehler { color: var(--rot); font: italic 600 15px "Cormorant", serif; min-height: 1.2em; }
.rezept { padding: 8px 0; border-bottom: 1px dotted rgba(110,74,29,.4); }
.rezept b { font: 400 20px "Fraktur", serif; color: var(--rot); font-weight: 400; }
.rezept.verborgen b { color: #8a7050; }
.rezept div { font: italic 500 15px "Cormorant", serif; }
.folge { padding: 6px 0 6px 12px; border-left: 3px solid #b08a4a; margin: 0 0 8px; font-size: 16.5px; line-height: 1.4; }
.folge.gegen { border-color: var(--rot); }
.folge.gut { border-color: #6f8f45; }
.rezept-fenster { max-width: min(720px, 96vw); }

@media (max-width: 1100px) { .rahmen { grid-template-columns: 240px minmax(0, 1fr) 280px; } }
@media (max-width: 860px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) 182px; }
  .kopf { padding: 6px 10px; gap: 8px; } .marke { font-size: 22px; } .marke span { display: none; }
  .himmel-knopf { font-size: 12.5px; padding: 4px 9px; gap: 8px; }
  .knopf-klein { font-size: 12.5px; padding: 4px 8px; }
  .urteil { grid-row: 2; border-left: 0; border-bottom: 1px solid rgba(201,163,82,.25); position: relative; z-index: 70; }
  .urteil-inhalt { position: absolute; top: 100%; left: 0; right: 0; max-height: 58vh; background: #1c1209; border-bottom: 1px solid rgba(201,163,82,.35); box-shadow: 0 14px 30px rgba(0,0,0,.6); padding-top: 4px !important; }
  .urteil-kopf { cursor: pointer; padding: 6px 12px 6px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
  .urteil-titel { font-size: 17px; } .stimmig { margin: 0; }
  .urteil-inhalt { display: none; padding: 0 12px 12px; }
  .urteil.offen .urteil-inhalt { display: block; }
  .urteil-knoepfe { grid-template-columns: 1fr 1fr; }
  .tisch { grid-row: 3; }
  .kasten { grid-row: 4; border-right: 0; border-top: 1px solid rgba(201,163,82,.3); }
  .reiter { grid-template-columns: repeat(8, auto); overflow-x: auto; padding: 5px 5px 0; }
  .reiter button { padding: 6px 9px; font-size: 12.5px; white-space: nowrap; }
  .fach { padding: 6px; } .fach h2, .fach .erkl { display: none; }
  .vorrat { display: flex; gap: 6px; overflow-x: auto; }
  .stueck { flex: 0 0 88px; } .stueck img, .stueck canvas { width: 54px; height: 54px; }
  .kreis-anleitung .gross { font-size: 27px; } .kreis-anleitung p { font-size: 16px; }
  .wirken-mobil .urteil { opacity: 1; }
}
@media print {
  body { overflow: visible; background: #fff; }
  .rahmen, dialog:not(.rezept-fenster) { display: none !important; }
  .rezept-fenster { position: static; display: block; max-width: none; }
  .rezept-fenster .blatt { box-shadow: none; background: #fff; max-height: none; }
  .rezept-fenster .zeile { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ding.neu { animation: none; } }
.ende-fenster { margin-bottom: 3vh; margin-top: auto; }
.ende-fenster::backdrop { background: rgba(5,3,1,.32); }
.tisch-rand { position: absolute; top: 0; height: 100%; width: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s; transform: scaleX(-1); }
.tisch-rand.links { right: 100%; } .tisch-rand.rechts { left: 100%; }
.raum3d .tisch-rand { opacity: 1; }
.aufsteller { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.aufsteller .steht { position: absolute; transform-origin: 50% 100%; }
.aufsteller .steht img, .aufsteller .steht canvas { width: 100%; height: 100%; object-fit: fill; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.65)) brightness(.92); }
.aufsteller .steht.leuchtet img, .aufsteller .steht.leuchtet canvas { filter: drop-shadow(0 0 12px #ffcf7a) brightness(1.1); }
/* Freischaltung */
.wahl-karte { position: relative; }
.wahl-marke { position: absolute; top: 7px; right: 9px; font: 600 10.5px "Cormorant", serif; letter-spacing: .1em; text-transform: uppercase; }
.wahl-marke.frei { color: #9fbf6a; }
.wahl-marke.zu { color: var(--gold); opacity: .75; }
.wahl-marke.zu::before { content: "◆ "; font-size: 8px; vertical-align: 1px; }
.wahl-paket { text-align: center; margin: 16px auto 0; font: italic 500 16px/1.5 "Cormorant", serif; color: var(--leise); max-width: 34em; }
.wahl-paket .knopf-klein { color: var(--gold); margin-left: 4px; font-style: normal; }
.sperre { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid rgba(201,163,82,.45); border-radius: 5px; background: radial-gradient(ellipse at 20% 0, rgba(201,163,82,.14), rgba(201,163,82,.03)); }
.sperre b { display: block; font: 400 20px "Fraktur", serif; color: var(--gold); }
.sperre p { margin: 6px 0 10px; font: 500 15px/1.4 "Garamond", serif; color: rgba(234,217,179,.85); }
.sperre .knopf { width: 100%; }
.kauf-fenster .blatt ul { margin-bottom: 14px; }
.kauf-betrag { font: 600 20px "Cormorant", serif !important; color: var(--rot); margin-top: 6px !important; }
.kauf-zustimmung { display: flex !important; gap: 8px; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font: 500 14.5px/1.4 "Garamond", serif !important; color: var(--tinte) !important; margin: 10px 0 !important; }
.kauf-zustimmung input { width: auto !important; margin-top: 3px; }
.kauf-paypal { margin: 10px 0; }
.kauf-meldung { font: italic 600 15px "Cormorant", serif !important; color: var(--rot); min-height: 1em; }
.kauf-offen { font: 400 22px "Fraktur", serif !important; color: var(--rot); }
.kauf-schluessel code { font: 600 17px monospace; background: rgba(255,250,235,.6); padding: 2px 6px; border-radius: 3px; }
.kauf-bald { font: italic 500 16px "Cormorant", serif !important; color: #6b4520; }
.kauf-hab { margin-top: 14px; font: 500 15px "Garamond", serif; }
.kauf-hab summary { cursor: pointer; color: #6b4520; }
.kauf-hab input { margin: 8px 0 6px; }
.vorschlag-zu { font: italic 500 15px "Cormorant", serif; color: var(--gold); opacity: .8; margin: 4px 0; }
/* Rezeptbuch: Erklärung, Stand, Fest jetzt, Funddatum */
.buch-erklaerung { margin: 4px 0 10px; padding: 8px 12px; background: rgba(255,250,235,.38); border: 1px solid rgba(110,74,29,.3); border-radius: 4px; }
.buch-erklaerung summary { cursor: pointer; font: 600 15px "Cormorant", serif; letter-spacing: .04em; color: #6b4520; }
.buch-erklaerung ul { margin: 8px 0 2px; padding-left: 18px; font-size: 15.5px; }
.buch-erklaerung li { margin-bottom: 5px; }
.buch-stand { font: italic 500 15.5px "Cormorant", serif !important; color: #6b4520; margin: 0 0 6px !important; }
.rezept.jetzt { background: rgba(201,163,82,.16); border-radius: 4px; padding-left: 8px; padding-right: 8px; }
.rezept.jetzt b::after { content: " · jetzt möglich"; font: italic 600 13px "Cormorant", serif; color: var(--rot); }
.rezept-datum { display: block; font: italic 500 13px "Cormorant", serif; color: #8a7050; }
/* Schließen-Kreuz oben rechts im Fenster */
.blatt { position: relative; }
.fenster-zu { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(110,74,29,.45); background: rgba(255,250,235,.5);
  color: var(--tinte); font: 400 18px/1 "Garamond", serif; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fenster-zu:hover { background: rgba(255,250,235,.85); border-color: var(--rot); color: var(--rot); }
.ende-fenster h3 { padding-right: 40px; }
/* Vorführmodus (nur lokal, ?demo=…): Zustände sofort zeigen, für die Bilder der Hilfeseite */
.demo *, .demo *::before, .demo *::after { transition: none !important; }
.demo body:not(.phase-kreis) .kreis-anleitung { display: none; }
@media (max-width: 480px) { .himmel-mond { display: none; } .kopf-rechts { gap: 4px; } .kopf .knopf-klein { padding: 4px 6px; } }
.wahl-hilfe { text-align: center; margin: 14px 0 0; font: italic 500 16px "Cormorant", serif; } .wahl-hilfe a { color: var(--gold); }