/* ==========================================================================
   Alchemie-Werkstatt (Inkrement 32): das Dashboard ist ein einziger Raum.
   Hinten die Werkstatt (Johannes' Vorlage, bewegt), in der Mitte der große Kessel. Davor, von hinten nach vorne:
   Regal mit den Apps als Gegenstände -> Zettelbrett -> ganz vorne das magische Rezeptbuch (Chat).
   Licht wie in der Vorlage: fast schwarzes Moosgrün, gelbgrünes Kesselleuchten, warme Kerzenpunkte.
   Wird NACH style.css geladen; Funktionen und Kennungen bleiben gleich.
   ========================================================================== */

@font-face { font-family: "Pixelify Sans"; src: url("fonts/PixelifySans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/VT323.ttf") format("truetype"); font-display: swap; }

/* Farben aus der Szene genommen */
:root {
  color-scheme: dark;
  --dunkel: #0d0f0c;
  --stein: #121611;
  --stein-2: #1d291e;
  --moos: #35481d;
  --moos-hell: #647541;
  --oliv: #3f460c;
  --gift: #c6e34a;                  /* Kesselleuchten */
  --gift-schwach: rgba(198, 227, 74, 0.35);
  --kerze: #f2d27a;
  --glut: #e0623a;
  --holz-dunkel: #1d140c;
  --holz: #3a2716;
  --holz-mittel: #5a3d22;
  --holz-hell: #7c5a34;
  --eisen: #2b302b;
  --pergament: #d8d0a6;
  --pergament-2: #bdb283;
  --pergament-rand: #7c6f45;
  --tinte: #1c1a12;
  --tinte-blass: #5a5338;
  --tinte-herby: #7a1c1c;           /* Herby schreibt mit roter Tinte */
  --tinte-clc: #1f5a2a;             /* clc-server mit grüner */
  --text-hell: #d9dcc4;
  --text-matt: #9aa184;
  --schrift-titel: "Pixelify Sans", "VT323", ui-monospace, monospace;
  --schrift-text: "VT323", "Pixelify Sans", ui-monospace, monospace;
}

html, body { background-color: var(--dunkel); }

body {
  color: var(--text-hell);
  font-family: var(--schrift-text);
  font-size: 20px;
  line-height: 1.25;
  background: radial-gradient(ellipse 60% 50% at 50% 70%, #1d291e, var(--dunkel) 75%) fixed;
}

h1, h2, h3, button, label, .kachel-titel, .chat-absender, .wartet-projekt { font-family: var(--schrift-titel); }
button, input, textarea { font-family: var(--schrift-text); }

/* ---------------- Ganz hinten: die Werkstatt ---------------- */
.szene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}

.szene-rahmen { position: relative; flex-shrink: 0; }

.szene-bild {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: brightness(0.82);
  transition: filter 0.6s steps(4);
}

/* Seiten der Szene laufen ins Dunkel aus */
.szene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 70% at 50% 62%, transparent 55%, rgba(13, 15, 12, 0.85) 100%),
    linear-gradient(180deg, rgba(13, 15, 12, 0.55), transparent 22%, transparent 78%, rgba(13, 15, 12, 0.5));
}

/* Der große Kessel: ruhig nur Glut, brodelnd mit Leuchten aus der Öffnung */
.kessel-licht {
  position: absolute;
  left: var(--kessel-x, 50%);
  top: var(--kessel-y, 80%);
  width: 0;
  height: 0;
}

.kessel-licht::before {
  content: "";
  position: absolute;
  left: -160px;
  top: -200px;
  width: 320px;
  height: 260px;
  background: radial-gradient(ellipse 45% 55% at 50% 72%, var(--gift-schwach), transparent 70%);
  opacity: 0.25;
  transition: opacity 0.8s steps(4);
}

.kessel-brodelt .szene-bild { filter: brightness(1); }
.kessel-brodelt .kessel-licht::before { opacity: 1; animation: kesselpuls 1.4s steps(3) infinite; }

@keyframes kesselpuls {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.25); }
}

/* ---------------- Der Raum davor ---------------- */
.raum {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 36px 0;
}

.werkstatt {
  position: relative;
  min-height: 120px;
  padding: 0;
  justify-content: center;
  align-items: flex-start;
  border: none;
}

.werkstatt .kopf-spacer { display: none; }

/* Messingschild an Ketten */
.werkstatt .titel {
  position: relative;
  flex: 0 0 auto;
  margin: 34px auto 18px auto;
  padding: 8px 20px 6px 20px;
  font-size: 26px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--gift);
  text-shadow: 0 0 10px rgba(198, 227, 74, 0.7), 2px 2px 0 var(--dunkel);
  background: linear-gradient(180deg, #2a2a18, #171a10);
  box-shadow:
    0 -3px 0 0 #6b5a2a, 0 3px 0 0 #3c3218, -3px 0 0 0 #5a4b22, 3px 0 0 0 #5a4b22,
    0 0 0 6px var(--dunkel), 0 10px 18px rgba(0, 0, 0, 0.7);
}

.werkstatt .titel::before,
.werkstatt .titel::after {
  content: "";
  position: absolute;
  top: -34px;
  width: 3px;
  height: 28px;
  background: repeating-linear-gradient(180deg, #6b5a2a 0 3px, #2a2414 3px 6px);
}

.werkstatt .titel::before { left: 14px; }
.werkstatt .titel::after { right: 14px; }

.werkstatt .bearbeiten-schalter {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  font-size: 12px;
  border: none;
  border-radius: 0;
  background: rgba(18, 22, 17, 0.85);
  color: var(--text-matt);
  box-shadow: 0 0 0 3px var(--dunkel);
}

.werkstatt .bearbeiten-schalter[aria-pressed="true"] { background: var(--moos); color: var(--text-hell); }

.arbeitet {
  margin: 0 16px 10px 16px;
  justify-content: center;
  color: var(--gift);
  font-family: var(--schrift-titel);
  font-size: 15px;
  text-shadow: 0 0 10px rgba(198, 227, 74, 0.7);
}

.arbeitet-dreher { display: none; }

/* ---------------- Hinten im Raum: das Regal ---------------- */
.regal {
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 0 6px;
  margin: 0 18px;
  padding: 16px 14px 10px 14px;
  background:
    linear-gradient(180deg, rgba(13, 15, 12, 0.35), rgba(13, 15, 12, 0.1) 30%, rgba(13, 15, 12, 0.45)),
    repeating-linear-gradient(90deg, transparent 0 57px, rgba(0, 0, 0, 0.25) 57px 60px),
    linear-gradient(180deg, #2a1d12, #1a120b);
  box-shadow:
    0 -6px 0 0 var(--holz-mittel), -6px 0 0 0 var(--holz), 6px 0 0 0 var(--holz), 0 6px 0 0 var(--holz),
    0 0 0 9px var(--dunkel), 0 20px 30px rgba(0, 0, 0, 0.7);
}

/* Moos wächst über die Oberkante des Regals */
.regal::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 4%;
  width: 22%;
  height: 8px;
  background:
    radial-gradient(circle at 10% 100%, var(--moos-hell) 0 3px, transparent 4px) 0 0 / 12px 8px repeat-x,
    linear-gradient(180deg, transparent 3px, var(--moos) 3px);
  image-rendering: pixelated;
}

.ding {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 0;
  padding: 10px 2px 16px 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  color: var(--text-hell);
}

.ding::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0;
  height: 9px;
  background: linear-gradient(180deg, var(--holz-hell) 0 3px, var(--holz-mittel) 3px 6px, var(--holz-dunkel) 6px);
  pointer-events: none;
}

.ding-bild {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 90px;
}

.ding-bild img {
  display: block;
  height: auto;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  transition: transform 0.1s steps(2), filter 0.1s steps(2);
}

.ding-kiste .ding-bild img  { width: 96px; }
.ding-truhe .ding-bild img  { width: 90px; }
.ding-fass .ding-bild img   { width: 78px; }
.ding-sack .ding-bild img   { width: 78px; }
.ding-kessel .ding-bild img { width: 90px; }
.ding-flasche .ding-bild img{ width: 48px; }
.ding-phiole .ding-bild img { width: 36px; }

.glas-violett { --leuchten: rgba(170, 130, 230, 0.45); }
.glas-gruen   { --leuchten: rgba(198, 227, 74, 0.5); }
.glas-rot     { --leuchten: rgba(224, 98, 58, 0.45); }
.glas-gelb    { --leuchten: rgba(242, 210, 122, 0.45); }
.glas-blau    { --leuchten: rgba(110, 160, 220, 0.4); }

.ding-flasche .ding-bild img,
.ding-phiole .ding-bild img,
.ding-kessel .ding-bild img { filter: drop-shadow(0 0 8px var(--leuchten, transparent)); }

.ding:hover .ding-bild img,
.ding:focus-visible .ding-bild img {
  transform: translateY(-4px);
  filter: drop-shadow(0 0 14px var(--leuchten, rgba(242, 210, 122, 0.55))) brightness(1.2);
}

.ding:focus-visible { outline: none; }
.ding:focus-visible .etikett { box-shadow: 0 0 0 3px var(--gift); }

.etikett {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 7px 2px 7px;
  margin-top: -8px;
  background: var(--pergament);
  color: var(--tinte);
  box-shadow: 0 2px 0 0 var(--pergament-rand), 0 0 0 1px var(--dunkel), 0 0 12px rgba(242, 210, 122, 0.12);
}

.etikett .kachel-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--tinte-blass); }

.etikett .kachel-titel {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tinte);
  overflow-wrap: anywhere;
}

.ding .kachel-beschreibung {
  font-size: 15px;
  line-height: 1.05;
  text-align: center;
  color: var(--text-matt);
}

.ding:nth-child(3n+1) .etikett { transform: rotate(-2deg); }
.ding:nth-child(3n+2) .etikett { transform: rotate(1.5deg); }

.kachel-punkt {
  top: 6px;
  right: 14%;
  border-radius: 0;
  background: #8e1f1a;
  color: #f2e6c8;
  font-family: var(--schrift-titel);
  box-shadow: 0 0 0 2px var(--dunkel), 0 0 10px rgba(224, 98, 58, 0.8);
}

.kachel-hinzufuegen { opacity: 0.8; }
.loesch-kreis { border-radius: 0 !important; }

.zierde {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  position: relative;
  padding: 10px 2px 16px 2px;
  min-height: 120px;
}

.zierde::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0;
  height: 9px;
  background: linear-gradient(180deg, var(--holz-hell) 0 3px, var(--holz-mittel) 3px 6px, var(--holz-dunkel) 6px);
}

.zierde img { image-rendering: pixelated; }
.zierde img:nth-child(1) { width: 36px; }
.zierde img:nth-child(2) { width: 16px; }
.zierde img:nth-child(3) { width: 24px; }
.zierde img:nth-child(4) { width: 24px; }
.zierde img:nth-child(5) { width: 24px; }

.flacker { animation: flackern 1.6s steps(3) infinite; }
.schimmer { animation: schimmern 3s steps(4) infinite; }

@keyframes flackern {
  0%, 100% { filter: drop-shadow(0 -4px 6px rgba(242, 210, 122, 0.8)); }
  50% { filter: drop-shadow(0 -4px 11px rgba(242, 180, 90, 1)); }
}

@keyframes schimmern {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(170, 130, 230, 0.4)); }
  50% { filter: drop-shadow(0 0 9px rgba(170, 130, 230, 0.85)); }
}

/* ---------------- Mitte: das Zettelbrett ---------------- */
.brett {
  position: relative;
  z-index: 2;
  margin: 26px 34px 0 34px;
  padding: 26px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.18) 0 1px, transparent 2px) 0 0 / 9px 9px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.05) 0 1px, transparent 2px) 0 0 / 7px 7px,
    linear-gradient(180deg, #5c4124, #4a331c);
  box-shadow:
    0 0 0 9px var(--holz), 0 0 0 12px var(--dunkel), 0 -12px 0 0 var(--holz-mittel),
    0 26px 36px rgba(0, 0, 0, 0.75);
}

.brett .wartet, .brett .infos { background: transparent; color: var(--tinte); margin: 0; padding: 0; border: none; box-shadow: none; }

.brett .wartet-titel,
.brett .wartet-untertitel {
  display: inline-block;
  margin: 0 0 4px 0;
  padding: 3px 10px 2px 10px;
  font-size: 18px;
  color: var(--kerze);
  background: var(--holz-dunkel);
  box-shadow: 0 0 0 2px #0a0704;
}

.brett .wartet-untertitel { font-size: 15px; margin-top: 14px; color: var(--pergament); }
.brett .wartet-erklaerung { color: #e2d7a8; font-size: 17px; margin: 2px 0 8px 0; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); }

.brett .wartet-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 14px;
}

.brett .wartet-eintrag {
  position: relative;
  padding: 14px 12px 10px 12px;
  border: none;
  border-radius: 0;
  background: var(--pergament);
  color: var(--tinte);
  box-shadow: 0 3px 0 0 var(--pergament-2), 3px 6px 0 0 rgba(0, 0, 0, 0.35);
  transform: rotate(-1.2deg);
}

.brett .wartet-eintrag:nth-child(2n) { transform: rotate(1deg); background: #ddd6ae; }
.brett .wartet-eintrag:nth-child(3n) { transform: rotate(-0.4deg); }

.brett .wartet-eintrag::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  background: #a32a22;
  box-shadow: 0 0 0 2px var(--dunkel), inset 2px 2px 0 rgba(255, 255, 255, 0.35);
}

#auftrag-liste .wartet-eintrag::before { background: #7f9a2a; }
#infos-liste .wartet-eintrag::before { background: #6d4fa0; }

.brett .wartet-text { font-size: 19px; color: var(--tinte); }
.brett .wartet-meta { font-size: 15px; color: var(--tinte-blass); }
.brett .wartet-projekt { border-radius: 0; background: var(--tinte); color: var(--pergament); font-size: 12px; }
.brett .wartet-leer { color: #e2d7a8; font-size: 18px; }
.brett .wartet-kosten { color: #e2d7a8; font-size: 16px; }

.info-weg {
  border: none;
  border-radius: 0;
  background: var(--holz);
  color: var(--pergament);
  font-family: var(--schrift-titel);
  box-shadow: 0 2px 0 0 var(--holz-dunkel);
}

/* ---------------- Ganz vorne: das magische Rezeptbuch ---------------- */
.buch {
  position: relative;
  z-index: 3;
  margin: 40px 0 0 0;
  padding: 20px 22px 22px 22px;
  border: none;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  grid-template-areas: "kopf verlauf" "hinweis verlauf" "eingabe verlauf";
  grid-template-rows: auto 1fr auto;
  gap: 12px 36px;
  background:
    linear-gradient(90deg, transparent calc(38.5% - 6px), rgba(60, 40, 10, 0.5) calc(38.5% - 2px), rgba(255, 255, 255, 0.18) 38.5%, rgba(60, 40, 10, 0.35) calc(38.5% + 4px), transparent calc(38.5% + 10px)),
    radial-gradient(ellipse at 50% 120%, rgba(198, 227, 74, 0.18), transparent 60%),
    linear-gradient(180deg, #ddd5ab, #c7bb88);
  box-shadow:
    0 0 0 10px #2e1a14, 0 0 0 13px var(--dunkel), 0 12px 0 10px #1a0e0a,
    0 0 50px rgba(198, 227, 74, 0.18), 0 34px 44px rgba(0, 0, 0, 0.8);
}

/* Lesezeichen-Band */
.buch::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: calc(38.5% - 6px);
  width: 12px;
  height: 46px;
  background: linear-gradient(180deg, #7a1c1c, #4d1010);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

.buch .hermes-kopf { grid-area: kopf; margin: 0; }
.buch .hermes-verlauf { grid-area: verlauf; }
.buch .chat-hinweis { grid-area: hinweis; margin: 0; }
.buch .hermes-eingabe-form { grid-area: eingabe; }

.buch .hermes-kopf .kachel-icon-box { width: 40px; height: 40px; background: url("raum/buecher.svg") center / contain no-repeat; box-shadow: none; image-rendering: pixelated; }
.buch .hermes-kopf .kachel-icon { display: none; }
.buch .hermes-titel { font-size: 26px; color: #2f3a12; text-shadow: 0 0 10px rgba(198, 227, 74, 0.5); }

.buch .hermes-verlauf { background: transparent; border: none; border-radius: 0; box-shadow: none; max-height: 460px; min-height: 220px; color: var(--tinte); }

.buch .chat-hinweis { color: var(--tinte-blass); font-size: 17px; }
.buch .chat-hinweis strong { color: var(--tinte-clc); }

.buch .hermes-blase {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 2px 0;
  font-size: 21px;
  line-height: 1.15;
}

.buch .hermes-nachricht-nutzer .hermes-blase { color: var(--tinte); }
.buch .hermes-nachricht-nutzer .hermes-blase::before { content: "» "; color: var(--tinte-blass); }
.buch .hermes-nachricht-hermes .hermes-blase { color: var(--tinte-herby); }
.buch .nachricht-clc .hermes-blase { color: var(--tinte-clc); }

.buch .chat-absender { font-size: 12px; color: var(--tinte-blass); letter-spacing: 0.5px; text-transform: uppercase; }
.buch .hermes-nachricht-hermes .chat-absender { color: var(--tinte-herby); }
.buch .nachricht-clc .chat-absender { color: var(--tinte-clc); }

.buch .hermes-avatar { border-radius: 0; width: 30px; height: 30px; background: url("raum/frosch.svg") center / contain no-repeat !important; image-rendering: pixelated; }
.buch .nachricht-clc .hermes-avatar { background-image: url("raum/roboter.svg") !important; }
.buch .hermes-avatar-icon { display: none; }
.buch .hermes-status, .buch .hermes-kosten { color: var(--tinte-blass); font-size: 16px; }

/* Buchstaben erscheinen auf magische Weise */
.zauber { animation: erscheinen 0.8s ease-out both; }
.hermes-nachricht-hermes .zauber { --zauberglanz: rgba(255, 140, 70, 0.95); }
.nachricht-clc .zauber { --zauberglanz: rgba(198, 227, 74, 1); }

@keyframes erscheinen {
  0% { opacity: 0; filter: blur(3px); text-shadow: 0 0 14px var(--zauberglanz, rgba(242, 210, 122, 0.9)); }
  35% { opacity: 1; filter: blur(0); text-shadow: 0 0 10px var(--zauberglanz, rgba(242, 210, 122, 0.9)); }
  100% { opacity: 1; filter: none; text-shadow: none; }
}

.buch .hermes-eingabe {
  background: rgba(255, 255, 255, 0.25);
  color: var(--tinte);
  border: none;
  border-radius: 0;
  font-size: 20px;
  box-shadow: inset 0 -3px 0 0 var(--pergament-rand);
}

.buch .hermes-eingabe::placeholder { color: var(--tinte-blass); }
.buch .hermes-eingabe:focus { outline: none; box-shadow: inset 0 -3px 0 0 var(--tinte-clc), 0 0 14px rgba(198, 227, 74, 0.45); }

.buch .hermes-senden {
  border-radius: 0;
  background: #2f3a12;
  color: var(--gift);
  box-shadow: 0 0 0 3px var(--dunkel), 0 0 12px rgba(198, 227, 74, 0.5);
}

.hermes-senden-icon, .kachel-icon, .loesch-icon, .hermes-retry-icon, .icon-option-svg { fill: currentColor; stroke: none; }
.hermes-retry { border-radius: 0; }

/* ---------------- Wesen ---------------- */
.wesen { position: absolute; z-index: 4; image-rendering: pixelated; pointer-events: none; }
.brett .frosch { top: -40px; left: 34px; width: 54px; animation: hopsen 6s steps(1) infinite; }
.brett .kaefer { top: -26px; left: 40%; width: 28px; animation: krabbeln 16s steps(32) infinite alternate; }
.buch .roboter { top: -62px; right: 30px; width: 48px; animation: wackeln 4s steps(2) infinite; }

@keyframes hopsen { 0%, 88%, 100% { transform: translateY(0); } 90% { transform: translateY(-10px); } 94% { transform: translateY(-4px); } }
@keyframes krabbeln { from { transform: translateX(0); } to { transform: translateX(240px); } }
@keyframes wackeln { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }

/* ---------------- Anmelden, Link hinzufügen ---------------- */
.login-form, .link-form {
  background: var(--pergament);
  color: var(--tinte);
  border: none;
  border-radius: 0;
  box-shadow: 0 0 0 8px var(--holz), 0 0 0 11px var(--dunkel), 0 20px 30px rgba(0, 0, 0, 0.6);
}

input[type="password"], input[type="text"], input[type="url"], textarea, select { border-radius: 0; }
.login-form button[type="submit"], button.absenden { border-radius: 0; background: var(--holz); color: var(--pergament); font-family: var(--schrift-titel); }
.fehler-meldung { border-radius: 0; }

/* ---------------- Handy ---------------- */
@media (max-width: 640px) {
  .regal { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 10px; padding: 12px 8px 8px 8px; }
  .ding-bild { height: 64px; }
  .ding-kiste .ding-bild img  { width: 64px; }
  .ding-truhe .ding-bild img  { width: 60px; }
  .ding-fass .ding-bild img   { width: 52px; }
  .ding-sack .ding-bild img   { width: 52px; }
  .ding-kessel .ding-bild img { width: 60px; }
  .ding-flasche .ding-bild img{ width: 32px; }
  .ding-phiole .ding-bild img { width: 24px; }
  .ding .kachel-beschreibung { display: none; }
  .etikett .kachel-titel { font-size: 11px; }
  .etikett .kachel-icon { display: none; }
  .zierde { min-height: 90px; }
  .zierde img:nth-child(4), .zierde img:nth-child(5) { display: none; }
  .brett { margin: 24px 16px 0 16px; padding: 24px 12px 14px 12px; }
  .brett .wartet-liste { grid-template-columns: 1fr; }
  .buch {
    display: flex;
    flex-direction: column;
    margin: 44px 10px 0 10px;
    padding: 14px;
    background: radial-gradient(ellipse at 50% 120%, rgba(198, 227, 74, 0.18), transparent 60%), linear-gradient(180deg, #ddd5ab, #c7bb88);
  }
  .buch::after { left: auto; right: 24px; }
  .buch .roboter { top: -54px; right: 18px; width: 40px; }
  .werkstatt .titel { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .flacker, .schimmer, .wesen, .zauber, .kessel-brodelt .kessel-licht::before { animation: none !important; }
  .ding-bild img { transition: none; }
}

/* --- Runde 3b: die Werkstatt soll sichtbar bleiben. Regal ohne Rückwand, nur Bretter; erster Blick zeigt den Raum --- */
.werkstatt { min-height: 34vh; }

.regal {
  background: none;
  box-shadow: none;
  margin: 0 8%;
  padding: 0 6px;
}

.regal::before { display: none; }

/* Bretter mit Winkeln an der Wand */
.ding::after,
.zierde::after {
  left: -4px;
  right: -4px;
  height: 8px;
  background: linear-gradient(180deg, #8a6338 0 2px, var(--holz-mittel) 2px 5px, var(--holz-dunkel) 5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
}

.ding::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 18%;
  width: 6px;
  height: 10px;
  background: var(--eisen);
  box-shadow: 0 0 0 1px var(--dunkel), calc(100% * 0) 0 0 0 transparent;
}

.ding .kachel-beschreibung {
  background: rgba(13, 15, 12, 0.72);
  padding: 0 4px;
}

.szene-bild { filter: brightness(0.95); }
.szene::after {
  background:
    radial-gradient(ellipse 46% 75% at 50% 58%, transparent 60%, rgba(13, 15, 12, 0.9) 100%),
    linear-gradient(180deg, rgba(13, 15, 12, 0.35), transparent 18%, transparent 85%, rgba(13, 15, 12, 0.35));
}

.brett { margin: 40px auto 0 auto; max-width: 900px; }
.buch { max-width: 1040px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .regal { margin: 0 6px; } .werkstatt { min-height: 28vh; } .brett { margin: 40px 16px 0 16px; } .buch { margin: 44px 10px 0 10px; } }

/* --- Tiefe: hinten schmal (Regal so breit wie der Raum), Brett breiter, Buch am breitesten --- */
.regal { max-width: calc(var(--szene-breite, 540px) - 24px); margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.ding .kachel-beschreibung { display: none; }
.arbeitet { display: block; text-align: center; margin: 0 auto 8px auto; }
.brett { max-width: min(820px, calc(var(--szene-breite, 540px) + 220px)); }

/* ==========================================================================
   Runde 4: Die Werkstatt ist ein Fenster in der Mitte der Wand. Links und rechts stehen alte Regale.
   Lichtlogik: Einzige starke Lichtquelle ist das Fenster (Kessel, grün, nur wenn er brodelt) plus Kerzen.
   Je weiter weg vom Fenster, desto dunkler; Kanten zum Fenster hin bekommen grünes Streiflicht.
   ========================================================================== */

body {
  background:
    /* Licht aus dem Fenster fällt auf die Wand */
    radial-gradient(ellipse 34% 46% at 50% 33%, rgba(120, 140, 60, 0.10), transparent 70%),
    /* Steinwand: Fugen */
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(0, 0, 0, 0.45) 27px 30px),
    repeating-linear-gradient(90deg, transparent 0 57px, rgba(0, 0, 0, 0.32) 57px 60px),
    linear-gradient(180deg, #161c15, #0d0f0c 70%);
  background-attachment: scroll;
}

.kessel-brodelt body,
body.kessel-brodelt {
  background:
    radial-gradient(ellipse 38% 50% at 50% 34%, rgba(198, 227, 74, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(0, 0, 0, 0.45) 27px 30px),
    repeating-linear-gradient(90deg, transparent 0 57px, rgba(0, 0, 0, 0.32) 57px 60px),
    linear-gradient(180deg, #182016, #0d0f0c 70%);
}

.werkstatt { min-height: 96px; }
.werkstatt .titel { margin: 30px auto 10px auto; }

/* Wand: Regal | Fenster | Regal */
.wand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 0 22px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 14px;
}

/* --- Das Fenster: steinerner Rahmen mit tiefer Laibung --- */
.fenster {
  position: relative;
  padding: 14px;
  background: linear-gradient(180deg, #2a3127, #1a2019);
  box-shadow:
    inset 0 0 0 3px #0d0f0c, inset 0 0 0 9px #3a4436, inset 0 0 0 12px #0d0f0c,
    0 0 0 3px #0d0f0c, 0 22px 30px rgba(0, 0, 0, 0.75);
}

.fenster::before {                       /* Fensterbank */
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -14px;
  height: 14px;
  background: linear-gradient(180deg, #4a5544 0 3px, #2f382c 3px 10px, #0d0f0c 10px);
}

.szene-rahmen { position: relative; }
.szene-bild { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: none; }

.kessel-licht::before { opacity: 0; }
.kessel-brodelt .kessel-licht::before { opacity: 1; }

/* Grünes Licht fällt aus dem Fenster in den Raum, wenn der Kessel brodelt */
.fenster::after {
  content: "";
  position: absolute;
  inset: -40px -120px -60px -120px;
  background: radial-gradient(ellipse 50% 55% at 50% 72%, rgba(198, 227, 74, 0.0), transparent 70%);
  pointer-events: none;
  z-index: -1;
  transition: background 0.8s steps(4);
}

.kessel-brodelt .fenster::after { background: radial-gradient(ellipse 50% 55% at 50% 72%, rgba(198, 227, 74, 0.20), transparent 70%); }

/* --- Alte Regale --- */
.regal {
  position: relative;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: end;
  gap: 0 4px;
  padding: 10px 16px 6px 16px;
  background:
    /* Rückwand aus groben Brettern, verwittert */
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.0) 0 40px, rgba(0, 0, 0, 0.35) 40px 42px, rgba(255, 255, 255, 0.03) 42px 44px),
    linear-gradient(180deg, #24180e, #1a110a);
  box-shadow:
    /* Seitenpfosten */
    -10px 0 0 0 #3a2716, 10px 0 0 0 #3a2716, -13px 0 0 0 #0d0f0c, 13px 0 0 0 #0d0f0c,
    0 -10px 0 0 #4a321c, 0 -13px 0 0 #0d0f0c,
    0 26px 30px rgba(0, 0, 0, 0.7);
}

/* Licht: zum Fenster hin heller, nach außen dunkel */
.regal::after {
  content: "";
  position: absolute;
  inset: -13px;
  pointer-events: none;
  z-index: 2;
}

.regal-links::after { background: linear-gradient(90deg, rgba(13, 15, 12, 0.55), transparent 55%); }
.regal-rechts::after { background: linear-gradient(270deg, rgba(13, 15, 12, 0.55), transparent 55%); }
.kessel-brodelt .regal-links::after { background: linear-gradient(90deg, rgba(13, 15, 12, 0.5), transparent 50%, rgba(198, 227, 74, 0.10)); }
.kessel-brodelt .regal-rechts::after { background: linear-gradient(270deg, rgba(13, 15, 12, 0.5), transparent 50%, rgba(198, 227, 74, 0.10)); }

/* Spinnweben in den oberen Außenecken, Moos auf dem Kranz */
.regal::before {
  content: "";
  display: block;
  position: absolute;
  top: -13px;
  width: 34px;
  height: 34px;
  z-index: 3;
  background:
    linear-gradient(45deg, transparent 47%, rgba(169, 179, 154, 0.55) 48% 52%, transparent 53%),
    linear-gradient(90deg, rgba(169, 179, 154, 0.55) 0 2px, transparent 2px),
    linear-gradient(0deg, transparent calc(100% - 2px), rgba(169, 179, 154, 0.55) calc(100% - 2px)),
    radial-gradient(circle at 0 0, transparent 14px, rgba(169, 179, 154, 0.35) 14px 15px, transparent 16px, transparent 24px, rgba(169, 179, 154, 0.3) 24px 25px, transparent 26px);
  image-rendering: pixelated;
}

.regal-links::before { left: -13px; }
.regal-rechts::before { right: -13px; transform: scaleX(-1); }

.kranzmoos { display: none; }

/* Bretter: dick, abgenutzt, mit Nägeln */
.ding::after,
.zierde::after {
  left: -8px;
  right: -8px;
  height: 10px;
  background:
    radial-gradient(circle at 12px 4px, #6b6b5a 0 1px, transparent 2px),
    radial-gradient(circle at calc(100% - 12px) 4px, #6b6b5a 0 1px, transparent 2px),
    linear-gradient(180deg, #7a5732 0 2px, #5a3d22 2px 6px, #2b1a0f 6px 8px, #0d0f0c 8px);
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.55);
}

.ding::before { display: none; }

.ding { padding: 10px 0 18px 0; }
.ding-bild { height: 84px; }

/* Gegenstände im Raumlicht: leicht abgedunkelt, Kanten zum Fenster hin grünlich */
.ding-bild img { filter: brightness(0.92) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5)); }
.ding-flasche .ding-bild img,
.ding-phiole .ding-bild img,
.ding-kessel .ding-bild img { filter: brightness(0.95) drop-shadow(0 0 7px var(--leuchten, transparent)); }

.kessel-brodelt .regal-links .ding-bild img { filter: brightness(0.98) drop-shadow(2px 0 0 rgba(198, 227, 74, 0.28)); }
.kessel-brodelt .regal-rechts .ding-bild img { filter: brightness(0.98) drop-shadow(-2px 0 0 rgba(198, 227, 74, 0.28)); }

.etikett { box-shadow: 0 2px 0 0 var(--pergament-rand), 0 0 0 1px var(--dunkel); background: #cfc69b; }

.zierde { min-height: 0; }

.arbeitet { margin-bottom: 6px; }

.brett { margin-top: 44px; }

/* Handy: Fenster oben, darunter die beiden Regale */
@media (max-width: 900px) {
  .wand {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "fenster fenster" "links rechts";
    gap: 30px 26px;
    padding: 0 18px;
  }
  .fenster { grid-area: fenster; justify-self: center; }
  .regal-links { grid-area: links; }
  .regal-rechts { grid-area: rechts; }
  .regal { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 10px 4px 10px; }
}

@media (max-width: 640px) {
  .wand { grid-template-columns: 1fr; grid-template-areas: "fenster" "links" "rechts"; gap: 26px 0; padding: 0 22px; }
  .regal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fenster { padding: 8px; }
  .fenster::after { inset: -30px -40px; }
}

/* ==========================================================================
   Runde 5: sauber. Pixelart kennt keine weichen Schatten, keine Unschärfe, keine gedrehten Pixel.
   Licht wird in harten Stufen gezeigt, Schatten sind versetzte Flächen.
   ========================================================================== */

/* Steinmauer aus gezeichneten Steinen, dreifach vergrößert; Licht vom Fenster in drei harten Stufen */
body,
body.kessel-brodelt {
  background:
    radial-gradient(ellipse 30% 42% at 50% 36%, rgba(13, 15, 12, 0) 0 60%, rgba(13, 15, 12, 0.25) 60% 80%, rgba(13, 15, 12, 0.5) 80%),
    url("raum/mauer.svg") 0 0 / 96px 48px repeat;
  image-rendering: pixelated;
}

body.kessel-brodelt {
  background:
    radial-gradient(ellipse 30% 42% at 50% 36%, rgba(198, 227, 74, 0.10) 0 45%, rgba(198, 227, 74, 0.05) 45% 65%, rgba(13, 15, 12, 0.2) 65% 82%, rgba(13, 15, 12, 0.45) 82%),
    url("raum/mauer.svg") 0 0 / 96px 48px repeat;
}

/* Keine weichen Schatten und kein Glühen mit Unschärfe */
.regal {
  box-shadow:
    -10px 0 0 0 #3a2716, 10px 0 0 0 #3a2716, -13px 0 0 0 #0d0f0c, 13px 0 0 0 #0d0f0c,
    0 -10px 0 0 #4a321c, 0 -13px 0 0 #0d0f0c,
    6px 9px 0 0 rgba(0, 0, 0, 0.45);
}

.fenster { box-shadow: inset 0 0 0 3px #0d0f0c, inset 0 0 0 9px #3a4436, inset 0 0 0 12px #0d0f0c, 0 0 0 3px #0d0f0c, 9px 9px 0 0 rgba(0, 0, 0, 0.45); }
.fenster::after, .kessel-licht::before, .kessel-brodelt .kessel-licht::before { display: none; }

.brett { box-shadow: 0 0 0 9px var(--holz), 0 0 0 12px var(--dunkel), 0 -12px 0 0 var(--holz-mittel), 12px 15px 0 0 rgba(0, 0, 0, 0.45); }
.buch { box-shadow: 0 0 0 10px #2e1a14, 0 0 0 13px var(--dunkel), 0 12px 0 10px #1a0e0a, 14px 26px 0 0 rgba(0, 0, 0, 0.45); }

.ding-bild img,
.ding-flasche .ding-bild img,
.ding-phiole .ding-bild img,
.ding-kessel .ding-bild img,
.kessel-brodelt .regal-links .ding-bild img,
.kessel-brodelt .regal-rechts .ding-bild img { filter: none; }

/* Leuchtende Tränke: ein harter Lichtfleck auf dem Brett statt Schleier */
.ding-flasche .ding-bild,
.ding-phiole .ding-bild,
.ding-kessel .ding-bild {
  background: linear-gradient(var(--leuchten, transparent), var(--leuchten, transparent)) 50% 100% / 54% 3px no-repeat;
}

.ding:hover .ding-bild img,
.ding:focus-visible .ding-bild img { transform: translateY(-3px); filter: brightness(1.18); }

.flacker, .schimmer { animation: none; filter: none; }
.zierde img.flacker { animation: kerzenschein 1.2s steps(1) infinite; }
@keyframes kerzenschein { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* Licht im Regal in Stufen: außen dunkel, zum Fenster hin heller */
.regal-links::after { background: linear-gradient(90deg, rgba(13, 15, 12, 0.5) 0 22%, rgba(13, 15, 12, 0.28) 22% 48%, transparent 48%); }
.regal-rechts::after { background: linear-gradient(270deg, rgba(13, 15, 12, 0.5) 0 22%, rgba(13, 15, 12, 0.28) 22% 48%, transparent 48%); }
.kessel-brodelt .regal-links::after { background: linear-gradient(90deg, rgba(13, 15, 12, 0.45) 0 22%, rgba(13, 15, 12, 0.22) 22% 48%, transparent 48% 88%, rgba(198, 227, 74, 0.10) 88%); }
.kessel-brodelt .regal-rechts::after { background: linear-gradient(270deg, rgba(13, 15, 12, 0.45) 0 22%, rgba(13, 15, 12, 0.22) 22% 48%, transparent 48% 88%, rgba(198, 227, 74, 0.10) 88%); }

/* Spinnweben als gezeichnetes Bild */
.regal::before {
  width: 48px;
  height: 48px;
  top: -13px;
  background: url("raum/spinnwebe.svg") 0 0 / 48px 48px no-repeat;
  opacity: 0.7;
}

/* Etiketten gerade, Namen nur an Leerzeichen umbrechen */
.ding:nth-child(n) .etikett { transform: none; }
.etikett { box-shadow: 0 3px 0 0 var(--pergament-rand), 0 0 0 2px var(--dunkel); }
.etikett .kachel-titel {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  font-size: 12px;
  white-space: normal;
  text-align: center;
}

.brett .wartet-eintrag,
.brett .wartet-eintrag:nth-child(2n),
.brett .wartet-eintrag:nth-child(3n) { transform: none; }

/* Zettel versetzt statt gedreht: wirkt locker, bleibt scharf */
.brett .wartet-eintrag:nth-child(2n) { top: 6px; }
.brett .wartet-eintrag:nth-child(3n) { top: -3px; }
.brett .wartet-eintrag { box-shadow: 0 3px 0 0 var(--pergament-2), 6px 6px 0 0 rgba(0, 0, 0, 0.35); }

/* Schild und Knöpfe: hart */
.werkstatt .titel { text-shadow: 2px 2px 0 var(--dunkel); box-shadow: 0 -3px 0 0 #6b5a2a, 0 3px 0 0 #3c3218, -3px 0 0 0 #5a4b22, 3px 0 0 0 #5a4b22, 0 0 0 6px var(--dunkel), 6px 9px 0 0 rgba(0, 0, 0, 0.45); }
.arbeitet { text-shadow: 2px 2px 0 var(--dunkel); }
.buch .hermes-titel { text-shadow: none; }
.buch .hermes-senden { box-shadow: 0 0 0 3px var(--dunkel); }
.buch .hermes-eingabe:focus { box-shadow: inset 0 -3px 0 0 var(--tinte-clc); }
.kachel-punkt { box-shadow: 0 0 0 2px var(--dunkel), 2px 2px 0 2px rgba(0, 0, 0, 0.4); }
.etikett .kachel-icon { display: none; }
.etikett { padding: 3px 6px 2px 6px; max-width: calc(100% + 8px); }
body { background-attachment: scroll; }
body > .raum { position: relative; }
@media (max-width: 640px) { .wand { padding: 0 8px; } .fenster { padding: 6px; } }

/* ==========================================================================
   Runde 6: hohe, alte, magische Regale. Gezeichnete Teile (werkzeuge/regal_zeichnen.py), dreifach vergrößert:
   geschnitzte Krone mit Mondmedaillon und Kugelknäufen, Pfosten mit glimmenden Runen, Bretter-Rückwand,
   Licht vom Fenster als Bayer-Dithering (werkzeuge/licht_dithern.sh mit didder). Mindestens fünf Fächerreihen,
   damit Platz für neue Apps bleibt.
   ========================================================================== */
.wand { align-items: end; gap: 0 34px; }

.regal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 126px;
  align-content: end;
  gap: 0 6px;
  margin-top: 130px;                                 /* Platz für die Krone */
  padding: 8px 48px 0 48px;                          /* Pfosten links und rechts */
  background:
    url("regal/pfosten.svg") left top / 36px 72px repeat-y,
    url("regal/pfosten.svg") right top / 36px 72px repeat-y,
    url("regal/rueckwand.svg") 0 0 / 96px 96px repeat;
  box-shadow: 9px 9px 0 0 rgba(0, 0, 0, 0.45);
}

/* Licht vom Fenster: gedithert, beim linken Regal kommt es von rechts */
.regal::after {
  inset: 0 36px;
  background: url("regal/licht-links.svg") left top / 100% 96px repeat-y;
  opacity: 0.55;
  z-index: 0;
}

.regal-rechts::after { transform: scaleX(-1); }
.kessel-brodelt .regal::after { opacity: 0.4; }

/* Krone */
.krone {
  position: absolute;
  left: -6px;
  right: -6px;
  top: -120px;
  height: 120px;
  z-index: 3;
  pointer-events: none;
  background:
    url("regal/krone-ende.svg") left bottom / 78px 120px no-repeat,
    url("regal/krone-ende-rechts.svg") right bottom / 78px 120px no-repeat,
    url("regal/krone-mitte.svg") center bottom / 216px 120px no-repeat,
    url("regal/krone-fuell.svg") left bottom / 24px 120px repeat-x;
  image-rendering: pixelated;
}

/* Spinnweben jetzt unter der Krone in der äußeren Ecke */
.regal::before { top: 0; z-index: 2; }
.regal-links::before { left: 36px; }
.regal-rechts::before { right: 36px; }

/* Fächer und Bretter */
.ding, .fach, .zierde { position: relative; z-index: 1; }

.fach {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 27px;
}

.fach img { image-rendering: pixelated; height: auto; }
.zier-kerze { width: 24px; }
.zier-buecher { width: 54px; }
.zier-phiole-gruen, .zier-phiole-rot { width: 36px; }
.zier-schaedel, .zier-pilz, .zier-kristall { width: 36px; }
.zier-flasche-violett { width: 48px; }
.zier-kessel-gruen { width: 60px; }

.ding::after,
.zierde::after,
.fach::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0;
  height: 27px;
  background: url("regal/brett.svg") left bottom / 72px 27px repeat-x;
  box-shadow: none;
  image-rendering: pixelated;
}

.ding { padding-bottom: 30px; }
.zierde { padding-bottom: 30px; }

/* Moospolster auf einigen Brettern */
.fach:nth-of-type(4n+2)::before,
.ding:nth-of-type(5n+3)::before {
  content: "";
  display: block;
  position: absolute;
  left: 12%;
  bottom: 24px;
  width: 42px;
  height: 18px;
  background: url("regal/moos.svg") 0 0 / 42px 18px no-repeat;
  image-rendering: pixelated;
  z-index: 2;
}

@media (max-width: 900px) {
  .regal { padding: 8px 40px 0 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .regal { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 104px; padding: 6px 30px 0 30px; margin-top: 96px;
           background-size: 24px 48px, 24px 48px, 64px 64px; }
  .krone { top: -80px; height: 80px; background-size: 52px 80px, 52px 80px, 144px 80px, 16px 80px; }
  .regal::after { inset: 0 24px; }
  .ding::after, .zierde::after, .fach::after { height: 18px; background-size: 48px 18px; }
  .fach { padding-bottom: 18px; }
  .ding { padding-bottom: 20px; }
  .zier-buecher { width: 36px; } .zier-kessel-gruen { width: 40px; } .zier-flasche-violett { width: 32px; }
  .zier-phiole-gruen, .zier-phiole-rot, .zier-schaedel, .zier-pilz, .zier-kristall { width: 24px; } .zier-kerze { width: 16px; }
}