@import url("../assets/anibox-palette.css");

/* =========================================================================
   anibox — Papier-Diorama
   Basis-Layout = gestapelt (Mobile, reduzierte Bewegung, ohne JS).
   html.is-diorama schaltet auf die rotierende 3D-Bühne um.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* Schrift */
  --font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-hand: "Patrick Hand", "Outfit", cursive; /* Gaegu hatte keine Umlaute */

  /* Raum (aus tokens.json) */
  --raum-1: 8px;
  --raum-2: 16px;
  --raum-3: 24px;
  --raum-4: 48px;

  /* Kante */
  --kante-0: 0px;
  --kante-1: 4px;
  --kante-2: 10px;

  /* Wandfarben der vier Räume — Flächen, aus den Anlassfarben gemischt */
  /* Pflaume für Schrift direkt auf den farbigen Wänden (mit Papierkorn ≥ 4.5:1) */
  --pflaume-tief: color-mix(in srgb, var(--pflaume) 55%, var(--tinte));
  --wand-1: color-mix(in srgb, var(--siegelrot) 15%, var(--papier));
  --wand-2: color-mix(in srgb, var(--himmel) 55%, var(--papier));
  --wand-3: color-mix(in srgb, var(--salbei) 55%, var(--papier));
  --wand-4: color-mix(in srgb, var(--kraft) 50%, var(--papier));

  --boden-1: color-mix(in srgb, var(--siegelrot) 38%, var(--papier));
  --boden-2: color-mix(in srgb, var(--himmel) 88%, var(--papier));
  --boden-3: color-mix(in srgb, var(--salbei) 88%, var(--papier));
  --boden-4: color-mix(in srgb, var(--kraft) 95%, var(--papier));

  --schnur: color-mix(in srgb, var(--tinte) 35%, transparent);

  /* Papierkorn — eine statische Textur, die der Compositor cachen kann */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Papierschatten — warm, nie neutralgrau */
  --schatten-1: 0 1px 2px rgba(43, 33, 24, .18);
  --schatten-2: 0 4px 10px rgba(43, 33, 24, .16), 0 1px 2px rgba(43, 33, 24, .14);
  --schatten-3: 0 14px 34px rgba(43, 33, 24, .20), 0 3px 8px rgba(43, 33, 24, .14);

  /* Bühne. --dolly zieht die Kamera hinter die Vorderwand zurück, --comp
     rechnet die dadurch entstehende perspektivische Verkleinerung wieder
     heraus: der vordere Raum füllt das Fenster exakt 1:1, die Schrift bleibt
     scharf. --comp = (perspective + |dolly|) / perspective. */
  /* --r = halbe Raumbreite nach der Skalierung, sonst klaffen die Ecken des Würfels. */
  --r: calc(50vw * var(--comp));
  --dolly: -200px;
  --comp: 1.1334;
  --turn: 0deg;
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

/* Hintergrund auch auf html: iOS Safari färbt den Bereich unter dem Seitenende und hinter
   seiner Leiste sonst weiss. bogen = Farbe des Seitenfusses. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--bogen); }
/* Die Seiten tragen data-theme="light": immer das helle Papier, auch auf Geräten im
   Dunkelmodus. Ohne das Attribut greift wieder die Nacht-Palette. */
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinte);
  background-color: var(--papier);
  background-image: var(--grain);
  background-blend-mode: multiply;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 var(--raum-2);
  text-wrap: balance;
  color: var(--pflaume); /* weicher als tinte, 7.8:1 auf papier */
}

p { margin: 0 0 var(--raum-2); }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--siegelrot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--siegelrot);
  outline-offset: 3px;
  border-radius: var(--kante-1);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

html.no-scroll, html.no-scroll body,
html.gate-open, html.gate-open body { overflow: hidden; }

/* Logo und Marke gibt es in Tinte und in Umkehrung — im Nacht-Thema greift
   die zweite Fassung, damit die Wortmarke nicht im Dunkeln verschwindet. */
.nur-nacht { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nur-tag { display: none; }
  :root:not([data-theme="light"]) .nur-nacht { display: block; }
}
:root[data-theme="dark"] .nur-tag { display: none; }
:root[data-theme="dark"] .nur-nacht { display: block; }

.skip-link {
  position: absolute;
  left: var(--raum-2);
  top: -100px;
  z-index: 200;
  padding: var(--raum-1) var(--raum-2);
  background: var(--bogen);
  color: var(--tinte);
  border-radius: var(--kante-1);
  box-shadow: var(--schatten-2);
  text-decoration: none;
}
.skip-link:focus { top: var(--raum-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--kante-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px) rotate(-.4deg); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--siegelrot);
  color: var(--bogen);
  box-shadow: var(--schatten-2);
}
.btn--primary:hover { box-shadow: var(--schatten-3); }

.btn--ghost {
  background: var(--bogen);
  color: var(--tinte);
  border-color: var(--linie);
  box-shadow: var(--schatten-1);
}
.btn--ghost:hover { border-color: var(--siegelrot); box-shadow: var(--schatten-2); }

/* =========================================================================
   Eingangstor
   ========================================================================= */
.gate {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gate[hidden] { display: none; }

.gate__quads { position: absolute; inset: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; }
.gate__quad { background-image: var(--grain); background-blend-mode: multiply; }
.gate__quad--a { background-color: var(--mandarine); }
.gate__quad--b { background-color: var(--salbei); }
.gate__quad--c { background-color: var(--himmel); }
.gate__quad--d { background-color: var(--pflaume); }

.gate__tear {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - 22px);
  width: 100%;
  height: 44px;
  fill: var(--bogen);
  filter: drop-shadow(0 3px 5px rgba(43, 33, 24, .28));
}

.gate__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  text-align: center;
  padding: 0 var(--raum-3);
}

.gate__top {
  align-self: end;
  display: grid;
  justify-items: center;
  gap: var(--raum-3);
  padding-bottom: 54px;
}
.gate__bot {
  align-self: start;
  display: grid;
  justify-items: center;
  gap: var(--raum-3);
  padding-top: 48px;
}

.gate__logo { width: min(360px, 60vw); height: auto; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .4)); }

.gate__claim {
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  line-height: 1.25;
  color: var(--tinte);
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  padding: 6px 22px;
  border-radius: var(--kante-1);
  box-shadow: var(--schatten-2);
  transform: rotate(-1.2deg);
  margin: 0;
}

.gate__enter {
  padding: 12px 34px;
  border: 0;
  border-radius: var(--kante-1);
  background: var(--bogen);
  color: var(--siegelrot);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--schatten-3);
  transition: transform .2s ease;
}
.gate__enter:hover { transform: translateY(-3px) rotate(-1deg) scale(1.03); }

.gate__hint {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--tinte);
  background: color-mix(in srgb, var(--bogen) 90%, transparent);
  padding: 3px 16px;
  border-radius: 999px;
  margin: 0;
}

/* Ananda steigt links aus dem Papierriss auf. Der Ausschnitt endet knapp
   unter der Blattmitte, der cremefarbene Riss legt sich über die Kante —
   ihr Rest bleibt hinter dem blauen Viertel. Steht im HTML vor .gate__tear,
   ohne z-index: so liegt sie über den Vierteln, aber unter dem Riss. */
.gate__peek {
  position: absolute;
  left: clamp(8px, 7vw, 120px);
  bottom: calc(50% - 3px);
  width: clamp(104px, 15vw, 210px);
  aspect-ratio: 20 / 23;
  overflow: hidden;
  filter: drop-shadow(6px -4px 10px rgba(43, 33, 24, .28));
  transition: transform .3s ease;
}
.gate__peek:hover { transform: translateY(-5px); }

.gate__peek-img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

/* =========================================================================
   Rahmen und Bedienung
   ========================================================================= */
.chrome { display: none; }

/* E-Mail-Adresse: steht nie als Klartext im HTML. Die sichtbare Adresse setzt
   CSS aus zwei Attributen zusammen, den mailto-Link baut js/main.js. */
.mail-text::before { content: attr(data-u) "\40" attr(data-d); }

/* Klebende Leiste im gestapelten Layout */
.leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  padding: 8px 16px;
  background: color-mix(in srgb, var(--bogen) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.leiste__logo { display: block; width: 92px; flex: none; }
.leiste__logo img { width: 100%; height: auto; }
.leiste__nav { display: flex; gap: clamp(.7rem, 4vw, 1.4rem); font-family: var(--font-display); font-weight: 500; font-size: .95rem; }
.leiste__nav a { color: var(--tinte); text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.leiste__nav a:hover, .leiste__nav a[aria-current="true"] { border-bottom-color: var(--siegelrot); }
html.is-diorama .leiste { display: none; }
html:not(.is-diorama) .room { scroll-margin-top: 63px; }

.chrome__border {
  position: fixed;
  inset: 14px;
  border: 2px dashed color-mix(in srgb, var(--bogen) 82%, transparent);
  border-radius: 6px;
  pointer-events: none;
  z-index: 60;
}

.chrome__logo {
  position: fixed;
  left: 34px; top: 30px;
  z-index: 62;
  width: 132px;
  padding: 6px;
}
.chrome__logo img { width: 100%; height: auto; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .5)); }

.chrome__info {
  position: fixed;
  right: 34px; top: 30px;
  z-index: 62;
  padding: 5px 18px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bogen) 90%, transparent);
  color: var(--tinte);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: var(--schatten-1);
}
.chrome__info:hover { background: var(--bogen); box-shadow: var(--schatten-2); }

/* Im Diorama ersetzt diese Ecke die Zeile aus dem Fussbereich. */
.chrome__by {
  position: fixed;
  right: 34px; bottom: 30px;
  z-index: 62;
  margin: 0;
  padding: 3px 11px;
  border-radius: 999px;
  /* Dasselbe milchige Papier wie Info-Knopf und Scrubber — die Wandfarbe
     wechselt von Raum zu Raum, die Zeile bleibt so überall lesbar. */
  background: color-mix(in srgb, var(--bogen) 78%, transparent);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--schrift-leise);
}
.chrome__by a {
  color: var(--schrift-leise);
  /* Klickfläche ~44px hoch, ohne die Zeile höher zu machen */
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}
.chrome__by a:hover { color: var(--siegelrot); }

.scrubber {
  position: fixed;
  left: 50%; bottom: 30px;
  transform: translateX(-50%);
  z-index: 62;
  display: flex;
  align-items: flex-end;
  gap: 29px;
  padding: 9px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bogen) 82%, transparent);
  box-shadow: var(--schatten-2);
}

.scrubber__dot {
  position: relative;
  width: 15px; height: 15px;
  padding: 0;
  border: 2px solid var(--tinte);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
/* Sichtbar bleibt der 15px-Punkt, die Klickfläche ist 44 × 44px */
.scrubber__dot::before {
  content: "";
  position: absolute;
  inset: -14.5px;
}
.scrubber__dot:hover { transform: scale(1.18); }
.scrubber__dot.is-active { background: var(--siegelrot); border-color: var(--siegelrot); }

.scrubber__label {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--bogen);
  box-shadow: var(--schatten-1);
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--tinte);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.scrubber__dot:hover .scrubber__label,
.scrubber__dot:focus-visible .scrubber__label,
.scrubber__dot.is-active .scrubber__label { opacity: 1; }
/* Niedrige Fenster: der feste Titel über dem aktiven Punkt würde Knöpfe im Raum
   verdecken (z. B. «Schau Dir weitere Boxen an!») — dort nur bei Hover/Fokus zeigen. */
@media (max-height: 680px) {
  .scrubber__dot.is-active:not(:hover):not(:focus-visible) .scrubber__label { opacity: 0; }
}

/* =========================================================================
   Welt — Basis = gestapelte Abschnitte
   ========================================================================= */
.world { position: relative; z-index: 1; }
.stage { position: relative; }
.carousel { position: relative; }

.room {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(11rem, 22vw, 14rem);
  overflow: hidden;
}

.room__wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--grain);
  background-blend-mode: multiply;
  background-color: var(--wand);
}

.room__floor {
  position: absolute;
  left: -20%; right: -20%;
  bottom: 0;
  height: clamp(9rem, 20vw, 13rem);
  z-index: -1;
  border-radius: 46% 46% 0 0 / 34% 34% 0 0;
  background-image: var(--grain);
  background-blend-mode: multiply;
  background-color: var(--boden);
  box-shadow: 0 -6px 18px rgba(43, 33, 24, .12);
}

.room--1 { --wand: var(--wand-1); --boden: var(--boden-1); }
.room--2 { --wand: var(--wand-2); --boden: var(--boden-2); }
.room--3 { --wand: var(--wand-3); --boden: var(--boden-3); }
.room--4 { --wand: var(--wand-4); --boden: var(--boden-4); }

.room__stuff {
  position: relative;
  z-index: 2;
  width: min(1080px, 90vw);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------------------------------------------------------------- Requisiten */
.room__props {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(9rem, 20vw, 13rem);
  z-index: 0;
  pointer-events: none;
}

/* Jede Requisite setzt --ph (Höhe in Prozent des Raums) und --ar (das
   Seitenverhältnis ihres Symbols); die Breite folgt daraus. --pscale
   vergrössert sie im flachen Layout, wo der Requisitenstreifen viel
   niedriger ist als ein ganzer Raum. */
.prop {
  position: absolute;
  display: block;
  height: calc(var(--ph) * var(--pscale, 3));
  aspect-ratio: var(--ar, 1);
}
.prop__art { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(43, 33, 24, .26)); }

.tint-rot       { --p1: var(--siegelrot);  --p2: var(--prop-hell);   --p3: var(--prop-hell); }
.tint-safran    { --p1: var(--safran);     --p2: var(--mandarine); --p3: var(--prop-hell); }
.tint-mandarine { --p1: var(--mandarine);  --p2: var(--safran);  --p3: var(--prop-hell); }
.tint-salbei    { --p1: var(--salbei);     --p2: var(--prop-hell);   --p3: var(--salbei-tief); }
.tint-himmel    { --p1: var(--himmel);     --p2: var(--prop-hell);   --p3: var(--himmel-tief); }
.tint-pflaume   { --p1: var(--pflaume);    --p2: var(--prop-hell);   --p3: var(--kraft); }
.tint-kraft     { --p1: var(--kraft);      --p2: var(--prop-hell);   --p3: var(--kraft-tief); }
.tint-hell      { --p1: var(--prop-hell);      --p2: var(--prop-linie);   --p3: var(--prop-linie); }
.tint-fest      { --p1: var(--siegelrot);  --p2: var(--safran);  --p3: var(--kraft-tief); }

@keyframes wobble {
  0%, 100% { transform: rotate(-1.1deg) translateY(0); }
  50%      { transform: rotate(1.1deg) translateY(-3px); }
}
.wobble { animation: wobble 6.5s ease-in-out infinite; transform-origin: 50% 100%; }
.wobble--slow { animation-duration: 11s; }
.wobble--fast { animation-duration: 4.8s; }
.wobble--late { animation-delay: -2.6s; animation-duration: 8.2s; }

/* Platzierung: dieselben Prozentwerte tragen im flachen Streifen wie in der
   3D-Bühne; nur --pscale unterscheidet sich. */
.prop--r1-bunting { left: 3%;  bottom: 76%; --ph: 13%; --ar: 4.571; }
.prop--r1-cloud   { left: 71%; bottom: 80%; --ph: 8%;  --ar: 1.892; }
.prop--r1-heart   { left: 60%; bottom: 80%; --ph: 8%;  --ar: 1.1; }
.prop--r1-boxa    { left: 3%;  bottom: 9%;  --ph: 15%; --ar: 1.071; }
.prop--r1-boxb    { left: 14%; bottom: 9%;  --ph: 18%; --ar: 0.697; }
.prop--r1-boxc    { left: 84%; bottom: 10%; --ph: 16%; --ar: 1.071; }
.prop--r1-flower  { left: 60%; bottom: 10%; --ph: 17%; --ar: 0.677; }

.prop--r2-lanterns { left: 27%; bottom: 89%; --ph: 10%; --ar: 3.333; }
.prop--r2-spool    { left: 3%;  bottom: 9%;  --ph: 11%; --ar: 1.042; }
.prop--r2-star     { left: 92%; bottom: 71%; --ph: 6%;  --ar: 1.029; }
.prop--r2-table    { left: 80%; bottom: 8%;  --ph: 10%; --ar: 2.333; }

.prop--r3-bunting { left: 42%; bottom: 89%; --ph: 10%; --ar: 4.571; }
.prop--r3-tree    { left: 2%;  bottom: 9%;  --ph: 22%; --ar: 0.658; }
.prop--r3-flower  { left: 12%; bottom: 9%;  --ph: 14%; --ar: 0.677; }
.prop--r3-box     { left: 87%; bottom: 9%;  --ph: 15%; --ar: 1.071; }

.prop--r4-sun      { left: 34%; bottom: 85%; --ph: 11%; --ar: 1; }
.prop--r4-cloud    { left: 44%; bottom: 86%; --ph: 9%;  --ar: 1.892; }
.prop--r4-envelope { left: 3%;  bottom: 10%; --ph: 12%; --ar: 1.413; }
.prop--r4-spool    { left: 90%; bottom: 10%; --ph: 11%; --ar: 1.042; }
.prop--r4-flower   { left: 81%; bottom: 10%; --ph: 15%; --ar: 0.677; }

/* =========================================================================
   Raum-Inhalte
   ========================================================================= */

/* --- Schild / Hero --- */
.sign {
  position: relative;
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-2);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--schatten-3);
  transform: rotate(-.5deg);
}
.sign__rope {
  position: absolute;
  left: 22%; right: 22%;
  top: -34px;
  height: 36px;
  border-top: 3px solid var(--schnur);
  border-left: 3px solid var(--schnur);
  border-right: 3px solid var(--schnur);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.sign__logo { width: min(240px, 60%); height: auto; margin-bottom: var(--raum-2); }
.sign__title {
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  margin-bottom: var(--raum-1);
}
.sign__sub {
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--pflaume);
  margin-bottom: var(--raum-2);
}
.sign__body { color: var(--schrift-leise); max-width: 46ch; }
.sign__cta { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); margin-top: var(--raum-3); }

.ani { margin: 0; display: grid; justify-items: center; gap: var(--raum-1); }
.ani img { filter: drop-shadow(0 10px 18px rgba(43, 33, 24, .26)); }
.ani--hero img { width: min(300px, 58vw); height: auto; }
.ani--klein img {
  /* Kopfausschnitt im runden Rahmen — der Kreis verdeckt den geraden Halsanschnitt */
  width: 132px; height: 132px;
  object-fit: contain; object-position: 50% 100%;
  padding-top: 8px;
  border-radius: 50%;
  background: var(--himmel);
}
.ani__cap { font-family: var(--font-hand); font-size: 1.25rem; color: var(--tinte); }

/* Ani taucht hinter dem Boden auf: im DOM vor .room__floor und gleicher z-index,
   also malt der Boden über ihren unteren Rand. */
.room__ani {
  position: absolute;
  z-index: -1;
  margin: 0;
  right: 6%;
  bottom: calc(clamp(9rem, 20vw, 13rem) - 3.2rem);
  height: 11rem;
  aspect-ratio: 600 / 917;
  pointer-events: none;
}
.room__ani img { width: 100%; height: 100%; display: block; }
.room__ani--2 { right: auto; left: 6%; }
.room__ani-cap { display: none; }
.room--1, .room--2 { padding-bottom: clamp(19.5rem, 34vw, 22rem); }

/* Monatskarte mit Ani, die von hinten über den Rand schaut */
.monats-wrap { --ani-w: 150px; position: relative; isolation: isolate; padding-top: calc(var(--ani-w) * 1); }
.monats-wrap__ani {
  position: absolute;
  top: 0; left: 12%;
  width: var(--ani-w); height: auto;
  z-index: -1;
  filter: drop-shadow(0 6px 10px rgba(43, 33, 24, .24));
}

/* --- Raumkopf --- */
.raum-kopf { text-align: center; }
.raum-kopf__title { font-size: clamp(1.5rem, 3.6vw, 2.4rem); color: var(--pflaume-tief); }
.raum-kopf__sub { font-family: var(--font-hand); font-size: 1.6rem; line-height: 1.35; color: var(--tinte); }

.raum-fuss { display: grid; justify-items: center; gap: var(--raum-3); text-align: center; }
.raum-fuss__note { font-family: var(--font-hand); font-size: 1.4rem; line-height: 1.35; color: var(--tinte); }

/* --- Polaroids an der Schnur --- */
.polaroids {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.7rem, 3vw, 2.4rem) clamp(.6rem, 1.6vw, 1.1rem);
}

.polaroid { position: relative; padding-top: 16px; }
.polaroid::before {
  content: "";
  position: absolute;
  left: -14%; right: -14%;
  top: 7px;
  height: 2px;
  background: var(--schnur);
}
.polaroid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px; height: 20px;
  margin-left: -5px;
  border-radius: 3px;
  background: var(--kraft);
  box-shadow: var(--schatten-1);
}

.polaroid__btn {
  display: block;
  width: 100%;
  padding: 7px 7px 4px;
  border: 0;
  border-radius: 3px;
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  box-shadow: var(--schatten-2);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}
.polaroid__btn img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.polaroid__cap {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--tinte);
}
.polaroid__btn:hover { transform: translateY(-5px) rotate(0deg) scale(1.03); box-shadow: var(--schatten-3); }

.polaroid__extras[hidden] { display: none; }

.polaroid--1 .polaroid__btn { transform: rotate(-2.2deg); }
.polaroid--2 .polaroid__btn { transform: rotate(1.4deg); }
.polaroid--3 .polaroid__btn { transform: rotate(-1deg); }
.polaroid--4 .polaroid__btn { transform: rotate(1.9deg); }
.polaroid--5 .polaroid__btn { transform: rotate(-1.6deg); }
.polaroid--6 .polaroid__btn { transform: rotate(2.3deg); }
.polaroid--7 .polaroid__btn { transform: rotate(-2.6deg); }
.polaroid--8 .polaroid__btn { transform: rotate(1.1deg); }
.polaroid--9 .polaroid__btn { transform: rotate(-1.3deg); }

/* --- Box des Monats --- */
.monats-karte {
  position: relative;
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-2);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  box-shadow: var(--schatten-3);
  transform: rotate(.6deg);
  text-align: center;
  overflow: hidden;
}
.monats-karte__band {
  position: absolute;
  top: 18px; right: -46px;
  width: 180px;
  transform: rotate(38deg);
  background: var(--pflaume);
  color: var(--bogen);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 0;
  box-shadow: var(--schatten-1);
}
.monats-karte__bild {
  width: 100%; height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--kante-1);
  margin-bottom: var(--raum-2);
}
.monats-karte__title { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: 4px; }
.monats-karte__text { font-family: var(--font-hand); font-size: 1.25rem; margin-bottom: var(--raum-2); }

/* --- Regal --- */
.regal { display: grid; gap: var(--raum-2); align-content: start; }
/* Gleiche Stufe wie der Monatsbox-Titel daneben — Handschrift bleibt Untertiteln vorbehalten */
.regal__title { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 0; color: var(--pflaume-tief); }
.regal__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1.4vw, .9rem); }
.regal__btn {
  display: block;
  width: 100%;
  padding: 5px;
  border: 0;
  border-radius: var(--kante-1);
  background: var(--bogen);
  box-shadow: var(--schatten-2);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.regal__btn img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.regal__btn:hover { transform: translateY(-4px); box-shadow: var(--schatten-3); }
/* Zehnte Kachel: nur im zweispaltigen Raster, sonst bliebe eine Reihe halb leer. */
.regal__extra { display: none; }
.regal__mehr { margin-top: var(--raum-1); }

/* --- Über / Kontakt --- */
.ueber {
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-2);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--schatten-3);
  transform: rotate(-.4deg);
}
.ueber__title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: 4px; }
.ueber__lead { font-family: var(--font-hand); font-size: 1.7rem; line-height: 1.3; color: var(--siegelrot); margin-bottom: var(--raum-2); }
.ueber p { color: var(--schrift-leise); font-size: .95rem; }
.ueber__lead { color: var(--siegelrot); }

.kontakt {
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-2);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--schatten-3);
  transform: rotate(.8deg);
  text-align: center;
}
/* Ani schaut hinter der Kontaktkarte hervor (gleiches Muster wie .monats-wrap) */
.kontakt-wrap { --ani-w: 150px; position: relative; isolation: isolate; align-self: start; padding-top: calc(var(--ani-w) * 1); }
.kontakt-wrap__ani {
  position: absolute;
  top: 0; left: 50%;
  width: var(--ani-w); height: auto;
  margin-left: calc(var(--ani-w) / -2);
  z-index: -1;
  filter: drop-shadow(0 6px 10px rgba(43, 33, 24, .24));
}
.kontakt__title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.kontakt__adresse { font-style: normal; line-height: 1.5; margin-bottom: var(--raum-1); }
.kontakt__links { display: grid; gap: 0; }
.kontakt__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  font-weight: 600;
}
.kontakt__legal { margin-top: var(--raum-2); font-size: .82rem; color: var(--schrift-leise); }
.kontakt__legal a {
  color: var(--schrift-leise);
  display: inline-block;
  padding: 13px 4px;
  margin-block: -13px;
}

/* =========================================================================
   Info-Tafel
   ========================================================================= */
.info { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; }
.info[hidden] { display: none; }
.info__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 26, .5); border: 0; }

.info__paper {
  position: relative;
  width: min(460px, 90vw);
  max-height: 86vh;
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-2);
  box-shadow: var(--schatten-3);
  transform: rotate(-.7deg);
}
.info__close {
  position: absolute; top: 8px; right: 12px;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  border-radius: 50%;
}
.info__close:hover { background: color-mix(in srgb, var(--linie) 60%, transparent); }
.info__title { font-size: 1.7rem; margin-bottom: 4px; }
.info__lead { font-family: var(--font-hand); font-size: 1.2rem; margin-bottom: var(--raum-3); }
.info__list { display: grid; grid-template-columns: max-content 1fr; gap: var(--raum-1) var(--raum-2); margin: 0 0 var(--raum-3); }
.info__list dt {
  font-family: var(--font-text);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--schrift-leise);
  padding-top: 4px;
}
.info__list dd { margin: 0; }
.info__legal { font-size: .85rem; color: var(--schrift-leise); border-top: 1px solid var(--linie); padding-top: var(--raum-2); }
.info__legal a { color: var(--schrift-leise); }

/* =========================================================================
   Lightbox
   ========================================================================= */
.lightbox { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 26, .78); }

.lightbox__frame {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--raum-2);
  width: min(1000px, 94vw);
}

.lightbox__fig {
  margin: 0;
  justify-self: center;
  max-width: 100%;
  padding: 10px 10px 8px;
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-1);
  box-shadow: var(--schatten-3);
  display: grid;
  gap: var(--raum-1);
  justify-items: center;
}
.lightbox__img { max-width: 100%; max-height: 74vh; width: auto; height: auto; border-radius: 2px; }
.lightbox__cap {
  display: grid; gap: 2px;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  text-align: center;
  color: var(--tinte);
  padding-bottom: 4px;
}
.lightbox__link { font-family: var(--font-text); font-size: .82rem; }
.lightbox__link[hidden] { display: none; }

.lightbox__nav, .lightbox__close {
  border: 0;
  background: color-mix(in srgb, var(--bogen) 88%, transparent);
  color: var(--tinte);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: var(--schatten-2);
}
.lightbox__nav { width: 48px; height: 48px; font-size: 2rem; line-height: 1; }
.lightbox__nav:hover { background: var(--bogen); }
.lightbox__close {
  position: absolute; top: -18px; right: -12px;
  width: 40px; height: 40px;
  font-size: 1.6rem; line-height: 1;
  z-index: 2;
}

/* =========================================================================
   Fussbereich (nur im gestapelten Layout)
   ========================================================================= */
.site-foot {
  display: grid;
  justify-items: center;
  gap: var(--raum-2);
  text-align: center;
  padding: var(--raum-4) var(--raum-3);
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-top: 1px solid var(--linie);
}
.site-foot__mark { width: 44px; height: auto; opacity: .85; }
.site-foot__adr { line-height: 1.8; }
.site-foot__links { font-size: .9rem; color: var(--schrift-leise); }
.site-foot__links a { color: var(--schrift-leise); }
.site-foot__by { font-size: .82rem; color: var(--schrift-leise); }
.site-foot__by a { color: var(--schrift-leise); }
.site-foot__by a:hover { color: var(--siegelrot); }

.scroll-spacer { display: none; }

/* =========================================================================
   Unterseiten
   ========================================================================= */
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--linie);
}
.kopf__logo { display: block; width: 148px; }
.kopf__nav { display: flex; flex-wrap: wrap; gap: var(--raum-2); font-size: .92rem; }
.kopf__nav a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid transparent; }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { border-bottom-color: var(--siegelrot); }

.inhalt { width: min(1180px, 92vw); margin: 0 auto; padding: var(--raum-4) 0; }
.inhalt--schmal { width: min(720px, 92vw); }

.seiten-kopf { margin-bottom: var(--raum-4); }
.seiten-kopf h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.seiten-kopf__sub { font-family: var(--font-hand); font-size: 1.35rem; color: var(--siegelrot); }

.boxen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

.box-karte {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-2);
  overflow: hidden;
  box-shadow: var(--schatten-2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-3); }
.box-karte__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.box-karte__btn img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.box-karte__nr {
  font-family: var(--font-text);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--siegelrot);
  padding: var(--raum-2) var(--raum-2) 0;
}
.box-karte__text { padding: 6px var(--raum-2) var(--raum-2); font-size: .92rem; color: var(--schrift-leise); margin: 0; }
.box-karte__mehr {
  margin: 0;
  padding: 0 var(--raum-2) var(--raum-2);
}
.box-karte__galerie[hidden] { display: none; }
.box-karte__mehr button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--siegelrot);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hinweis {
  margin-top: var(--raum-4);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--bogen);
  background-image: var(--grain);
  background-blend-mode: multiply;
  border-radius: var(--kante-2);
  box-shadow: var(--schatten-2);
  text-align: center;
}
.hinweis h2 { font-size: 1.5rem; }
.hinweis p { color: var(--schrift-leise); max-width: 52ch; margin-inline: auto; }
.hinweis .btn { margin-top: var(--raum-2); }

.rechtstext h2 { font-size: 1.3rem; margin-top: var(--raum-4); }
.rechtstext h2:first-of-type { margin-top: var(--raum-3); }
.rechtstext p { color: var(--schrift-leise); max-width: 70ch; }
.rechtstext address { font-style: normal; line-height: 1.8; color: var(--tinte); }
.rechtstext__quelle { font-size: .82rem; margin-top: var(--raum-4); border-top: 1px solid var(--linie); padding-top: var(--raum-2); }

/* =========================================================================
   3D-Diorama — nur wenn JS es einschaltet
   ========================================================================= */
html.is-diorama, html.is-diorama body { height: 100%; }
html.is-diorama body { overflow-x: hidden; }

html.is-diorama .chrome { display: block; }
html.is-diorama .site-foot { display: none; }
html.is-diorama .scroll-spacer { display: block; height: 460vh; }

html.is-diorama .world {
  position: fixed;
  inset: 0;
  z-index: 1;
  /* Hintergrund wandert mit der Drehung von Wandfarbe zu Wandfarbe (js setzt
     style.backgroundColor). Liegt auf .world, nicht auf .stage: ein Hintergrund
     auf der Perspektiv-Ebene fängt die Klicks der gedrehten Räume ab.
     Etwas abgedunkelt, damit der Würfel davor steht. */
  background-color: color-mix(in srgb, var(--wand-1) 78%, #1E1B1A);
}
/* Die Körnung liegt auf einer eigenen, einmal gerasterten Ebene: pro Frame
   ändert sich nur die Grundfarbe darunter, die Chrome ohne Neuzeichnen
   füllt. Vorher malte jeder Scroll-Frame das ganze Fenster samt Körnung neu —
   auf grossen Fenstern kam Chrome damit nicht nach und flackerte. */
html.is-diorama .world::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  mix-blend-mode: multiply;
  will-change: transform;
  pointer-events: none;
}

html.is-diorama .stage {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 44%;
  overflow: hidden;
}

html.is-diorama .carousel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Die Räume stehen um 45° versetzt (siehe --ry), das Karussell dreht sie zurück.
     Ein Raum mit genau rotateY(90deg) ist für sich allein kantengenau projiziert —
     Chrome kann ihn dann nicht mehr anklicken. Während der Drehung setzt js
     transform direkt (ohne --turn), damit nicht jeder Frame alle Räume neu stylt. */
  transform: translateZ(calc(-1 * var(--r) + var(--dolly))) rotateY(calc(var(--turn) - 45deg));
  will-change: transform;
}

html.is-diorama .room {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry)) translateZ(var(--r)) scale(var(--comp));
  /* Feste Rasterauflösung während der Drehung (sonst rastert Chrome die
     schräg stehenden Wände jeden Frame neu) und abgewandte Räume gar nicht zeichnen. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Hinter dem Wandbogen liegt eine dunklere Rückwand in der Raumfarbe — ohne sie
   sieht man beim Drehen durch die runden Ecken ins Innere des Würfels. */
html.is-diorama .room {
  background-color: var(--wand);
  background-color: color-mix(in srgb, var(--wand) 80%, var(--tinte-fix, #1E1B1A));
  background-image: var(--grain);
  background-blend-mode: multiply;
}
html.is-diorama .room--1 { --ry: 45deg; }
html.is-diorama .room--2 { --ry: 135deg; }
html.is-diorama .room--3 { --ry: 225deg; }
html.is-diorama .room--4 { --ry: 315deg; }

html.is-diorama .room__wall {
  border-radius: 24% 24% 0 0 / 9% 9% 0 0;
  box-shadow: inset 0 -40px 60px -30px rgba(43, 33, 24, .28);
}

html.is-diorama .room__floor {
  left: -24%; right: -24%;
  bottom: auto;
  top: var(--boden-top);
  height: 120%;
  border-radius: 40% 40% 0 0 / 26% 26% 0 0;
  transform-origin: 50% 0;
  transform: rotateX(70deg);
  box-shadow: 0 -10px 30px rgba(43, 33, 24, .18);
}

html.is-diorama .room__props {
  top: 0;
  height: 100%;
  transform-style: preserve-3d;
}
html.is-diorama .prop { --pscale: 1; transform: translateZ(var(--pz, 0px)); }
html.is-diorama .prop--z-far  { --pz: -30px; }
html.is-diorama .prop--z-mid  { --pz: 80px; }
html.is-diorama .prop--z-near { --pz: 170px; }

html.is-diorama .room__stuff {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 78%;
  max-height: 78%;
  margin: 0;
  transform: translate(-50%, -50%) translateZ(70px);
  font-size: clamp(.78rem, 1.55vh, 1rem);
}

html.is-diorama .room__stuff--split {
  grid-template-columns: minmax(230px, .82fr) 1.18fr;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}
html.is-diorama .room__stuff--wide { width: 86%; }

/* Raum 2: Kopf und Aufruf links, die Polaroidwand rechts — so passen drei
   Reihen ohne Scrollen in den Raum. */
html.is-diorama .room--2 .room__stuff {
  width: 80%;
  grid-template-columns: minmax(200px, 1fr) auto;
  grid-template-areas: "kopf bilder" "fuss bilder" ". bilder";
  grid-template-rows: auto auto 1fr;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: var(--raum-3) clamp(1.5rem, 3vw, 3rem);
}
html.is-diorama .room--2 .raum-kopf { grid-area: kopf; text-align: left; align-self: end; }
html.is-diorama .room--2 .raum-fuss { grid-area: fuss; justify-items: start; text-align: left; align-self: start; }
html.is-diorama .room--2 .polaroids {
  grid-area: bilder;
  grid-template-columns: repeat(3, clamp(120px, 17vh, 168px));
  gap: clamp(1rem, 2.2vh, 1.7rem) clamp(.6rem, 1.2vw, 1rem);
}

/* Raum 4: der Text darf breiter sein als die Kontaktkarte. */
/* Textspalte bis ~65 Zeichen breit; bei kleinen Fenstern schrumpft sie zuerst */
html.is-diorama .room--4 .room__stuff {
  width: 88%;
  grid-template-columns: minmax(0, 38rem) minmax(220px, 19rem);
  justify-content: center;
}
html.is-diorama .kontakt-wrap { --ani-w: clamp(110px, 18vh, 170px); align-self: center; }
html.is-diorama .kontakt { padding: clamp(1rem, 2.4vh, 1.5rem) clamp(1.4rem, 3vw, 2rem); }

html.is-diorama .sign__title { font-size: clamp(1.6rem, 3.6vh, 2.3rem); }
/* Untertitel eine Stufe unter dem h1 (≥ 1.25×), enger gesetzt */
html.is-diorama .sign__sub { font-size: clamp(1.1rem, 2.2vh, 1.35rem); line-height: 1.3; }
html.is-diorama .sign__logo { width: min(180px, 44%); }
html.is-diorama .sign--hero { padding: clamp(1.8rem, 4vh, 2.8rem) clamp(1.8rem, 3vw, 2.8rem); }
/* Titel bekommt nach dem Tor nur programmatisch Fokus (Screenreader) — kein Ring */
.sign__title:focus { outline: none; }
html.is-diorama .sign { max-width: 640px; }
html.is-diorama .room--1 .room__stuff {
  grid-template-columns: minmax(0, min(640px, 54vw));
  justify-content: start;
  width: 84%;
}
html.is-diorama .room, html.is-diorama .room--1, html.is-diorama .room--2 { padding-bottom: 0; }
/* Bodenkante bei --boden-top; die Figur steht so, dass der Boden den Anteil
   --versteckt ihrer Höhe (--h) verdeckt. */
html.is-diorama .room { --boden-top: 70%; }
html.is-diorama .room__ani {
  right: auto;
  height: var(--h);
  bottom: calc(100% - var(--boden-top) - var(--h) * var(--versteckt));
}
html.is-diorama .room__ani--1 { left: 65%; --h: 48.6%; --versteckt: .27; }
html.is-diorama .room__ani--2 { left: 13%; --h: 37.8%; --versteckt: .28; }
html.is-diorama .room__ani-cap {
  display: block;
  position: absolute;
  left: 65%; top: calc(var(--boden-top) + 1.5%);
  width: calc(48.6vh * 600 / 917);
  margin: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 2.4rem; line-height: 1;
  color: var(--pflaume-tief);
}
html.is-diorama .polaroid__btn img { aspect-ratio: 1; }
html.is-diorama .polaroids { gap: clamp(1.1rem, 2.4vh, 1.8rem) .7rem; }
html.is-diorama .monats-karte__bild { max-height: 21vh; }
html.is-diorama .regal__reihe { gap: .5rem; }
/* Fliesstext nie unter 16px — der Raum skaliert mit der Fensterhöhe, der Text nicht darunter */
html.is-diorama .sign__body,
html.is-diorama .ueber p:not(.ueber__lead),
html.is-diorama .kontakt__adresse,
html.is-diorama .kontakt__links {
  font-size: clamp(1rem, 1.8vh, 1.125rem);
  line-height: 1.55;
}
html.is-diorama .ueber .ueber__lead { font-size: 1.6rem; }
html.is-diorama .monats-wrap { --ani-w: clamp(104px, 16vh, 150px); }
/* Karte samt Ani höher im Raum; align-self statt transform, damit die Klickflächen stimmen */
html.is-diorama .monats-wrap { align-self: start; margin-top: -3vh; }
/* Regal an die Raumhöhe binden, sonst rutscht der Knopf unter den Scrubber */
html.is-diorama .regal__reihe { width: min(100%, 54vh); }
html.is-diorama .ueber p:nth-of-type(3) { display: none; }

/* Gestapeltes Layout: Monatsbox nach dem Regal — sonst stehen die Avatare aus Raum 2
   und Raum 3 direkt übereinander. Die Leiste springt deshalb auf #monatsbox. */
html:not(.is-diorama) .monats-wrap { order: 2; scroll-margin-top: 76px; }

/* Gestapeltes Layout: Feinschliff fürs Handy */
html:not(.is-diorama) .ueber .ueber__lead { font-size: 1.6rem; line-height: 1.3; }
html:not(.is-diorama) .regal__title { text-align: center; margin-bottom: var(--raum-2); }
html:not(.is-diorama) .regal__mehr { text-align: center; margin-top: var(--raum-2); }
/* Die leichte Schräglage der Papierkarten lässt iOS Safari die Kachelkanten der
   Papierkörnung als helle Linien zeichnen — gestapelt liegen die Karten gerade. */
html:not(.is-diorama) .sign,
html:not(.is-diorama) .monats-karte,
html:not(.is-diorama) .kontakt,
html:not(.is-diorama) .ueber { transform: none; }

/* Gestapeltes Layout: mehr Luft zwischen den Blöcken eines Raums */
html:not(.is-diorama) .room__stuff { gap: 3.25rem; }
html:not(.is-diorama) .room--3, html:not(.is-diorama) .room--4 { padding-bottom: clamp(13rem, 26vw, 16rem); }
html:not(.is-diorama) .raum-fuss { gap: var(--raum-3); margin-top: .5rem; }

/* Gestapeltes Layout: der Requisitenstreifen ist nur so hoch wie der Boden —
   Wimpel, Wolke, Herz und Lampions würden dort über Ani liegen. */
html:not(.is-diorama) .prop--r1-bunting,
html:not(.is-diorama) .prop--r1-cloud,
html:not(.is-diorama) .prop--r1-heart,
html:not(.is-diorama) .prop--r2-lanterns,
html:not(.is-diorama) .prop--r2-star,
html:not(.is-diorama) .prop--r3-bunting,
html:not(.is-diorama) .prop--r4-cloud,
html:not(.is-diorama) .prop--r4-sun { display: none; }

/* =========================================================================
   Nacht — Korrekturen, die die Farbtokens allein nicht leisten
   ========================================================================= */
:root { --prop-hell: #FBF8F2; --prop-linie: #E2DACB; }

/* Requisiten sind Papierobjekte: ihr helles Papier bleibt hell (nur etwas gedämpft).
   Titel direkt auf der Wand: pflaume erreicht dort nur 2.1:1, tinte 5:1.
   Avatare: dunkles Haar auf dunkler Wand braucht eine helle Kante. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --prop-hell: #E6DFD3;
    --prop-linie: #C9C0B2;
  }
  :root:not([data-theme="light"]) .raum-kopf__title,
  :root:not([data-theme="light"]) .regal__title,
  :root:not([data-theme="light"]) .room__ani-cap { color: var(--tinte); }
  :root:not([data-theme="light"]) .room__ani img,
  :root:not([data-theme="light"]) .monats-wrap__ani,
  :root:not([data-theme="light"]) .kontakt-wrap__ani,
  :root:not([data-theme="light"]) .gate__peek { filter: drop-shadow(0 0 7px rgba(255, 244, 230, .45)); }
}
:root[data-theme="dark"] {
  --prop-hell: #E6DFD3;
  --prop-linie: #C9C0B2;
}
:root[data-theme="dark"] .raum-kopf__title,
:root[data-theme="dark"] .regal__title,
:root[data-theme="dark"] .room__ani-cap { color: var(--tinte); }
:root[data-theme="dark"] .room__ani img,
:root[data-theme="dark"] .monats-wrap__ani,
:root[data-theme="dark"] .kontakt-wrap__ani,
:root[data-theme="dark"] .gate__peek { filter: drop-shadow(0 0 7px rgba(255, 244, 230, .45)); }

/* =========================================================================
   Schmale Fenster
   ========================================================================= */
@media (max-width: 900px) {
  .room__stuff { width: min(620px, 90vw); }
  .polaroids { grid-template-columns: repeat(2, 1fr); }
  .regal__reihe { grid-template-columns: repeat(2, 1fr); }
  .lightbox__frame { grid-template-columns: 1fr; }
  .lightbox__nav { position: absolute; bottom: -62px; }
  .lightbox__nav--prev { left: 18%; }
  .lightbox__nav--next { right: 18%; }
  .lightbox__close { top: -16px; right: 0; }
  .lightbox__img { max-height: 62vh; }
  /* Unterseiten-Kopf wie die Leiste der Startseite: kompakt und klebend.
     Der Papiergrund der Seite bleibt sichtbar, bis gescrollt wird — erst
     dann legt sich das milchige Papier darunter. */
  .kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    flex-wrap: nowrap;
    width: 100%;
    gap: clamp(8px, 2.6vw, 16px);
    padding: 8px 16px;
    border-bottom-color: transparent;
    transition: background-color .22s ease, border-color .22s ease;
  }
  /* Logo und die vier Menüpunkte teilen sich eine Zeile: beide wachsen mit
     der Fensterbreite, damit vom kleinsten Handy an nichts umbricht. */
  .kopf__logo { width: clamp(64px, 20vw, 92px); flex: none; }
  .kopf__nav {
    flex-wrap: nowrap;
    gap: clamp(.3rem, 1.7vw, 1.4rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(.7rem, 3.4vw, .95rem);
  }
  .kopf__nav a { padding: 10px 0; white-space: nowrap; border-bottom-width: 2px; }
  .kopf.is-scrolled {
    background: color-mix(in srgb, var(--bogen) 90%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom-color: var(--linie);
  }
  .inhalt { scroll-margin-top: 58px; }
}

/* Schmales Diorama (Tablet quer, kleine Laptops): Raum 2 hat nur eine schmale
   Textspalte — Schrift und Figur kleiner, damit sie sich nicht berühren. */
@media (max-width: 1200px) {
  html.is-diorama .room--2 .raum-kopf__title { font-size: 1.55rem; }
  html.is-diorama .room--2 .raum-kopf__sub { font-size: 1.25rem; }
  html.is-diorama .room--2 .raum-fuss { gap: var(--raum-2); }
  html.is-diorama .room--2 .raum-fuss__note { font-size: 1.15rem; }
  html.is-diorama .room__ani--2 { --h: 33%; --versteckt: .25; }
  /* oben links sitzt das Logo der Bedienleiste */
  html.is-diorama .room--2 .raum-kopf { padding-top: 2.4rem; }
  html.is-diorama .monats-wrap__ani { left: 26%; }
  html.is-diorama .chrome__logo { width: 104px; }
}

/* Tablet hochkant: drei Spalten statt zwei sehr grosser, Karten nicht auf volle Breite */
@media (min-width: 561px) and (max-width: 900px) {
  .polaroids { grid-template-columns: repeat(3, 1fr); }
  .regal__reihe { grid-template-columns: repeat(3, 1fr); }
  .monats-wrap, .kontakt-wrap { width: min(440px, 100%); justify-self: center; }
  .room__ani { height: 15rem; }
  .room--1, .room--2 { padding-bottom: 25.5rem; }
}

@media (max-width: 560px) {
  .polaroids { grid-template-columns: repeat(2, 1fr); gap: 1rem .7rem; }
  .polaroid__cap { font-size: 1rem; }
  /* Ungerade Zahl: das letzte Polaroid hängt mittig, die Schnur läuft
     trotzdem über die ganze Reihe. Die Zelle nimmt die volle Breite, das
     Bild darin nur eine halbe — Schnur und Klammer sitzen an der Zelle. */
  .polaroid:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .polaroid:last-child:nth-child(odd) .polaroid__btn {
    width: calc(50% - .35rem);
    margin-inline: auto;
  }
  .regal__reihe { grid-template-columns: repeat(2, 1fr); }
  .regal__extra { display: block; }
  .sign__cta { flex-direction: column; align-items: stretch; }
  .sign__cta .btn { text-align: center; }
  .boxen { grid-template-columns: 1fr; }
}

/* =========================================================================
   Bewegung reduzieren
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .polaroid__btn:hover, .regal__btn:hover, .box-karte:hover, .gate__enter:hover,
  .gate__peek:hover { transform: none; }
}

/* =========================================================================
   Druck
   ========================================================================= */
@media print {
  .gate, .chrome, .leiste, .lightbox, .info, .room__props, .scroll-spacer { display: none !important; }
  body { background: #fff; }
  .room { page-break-inside: avoid; }
}