/* ==========================================================================
   Casino-Seiten „Spielhöhle“: Taverne (Piraten-Slots) und Geisterschiff (Ghost Pirates)
   Kinoszene mit Deko, Kurswalze (Inhaltsverzeichnis als Spielautomat), Kartenköpfe, Nebenan.
   Reine Deko – kein Glücksspiel. Body-Klassen: .hoehle .hoehle--taverne | .hoehle--geist
   ========================================================================== */

.hoehle {
  --h-akzent: var(--gold);
  --h-akzent-hell: var(--gold-hell);
  --h-linie: var(--gold-linie);
  --h-glut: 242, 165, 65;           /* RGB für Leuchten */
}
.hoehle--geist {
  --h-akzent: #6FF2D2;
  --h-akzent-hell: #C9FFF3;
  --h-linie: rgba(111, 242, 210, .42);
  --h-glut: 80, 255, 205;
}

/* ---------- Kinoszene ---------- */
.hoehle-kopf { min-height: max(92svh, 36rem); }
.hoehle-kopf .szene-bild img { filter: brightness(.88) saturate(1.02); }
.hoehle-kopf--geist .szene-schleier {
  background:
    linear-gradient(90deg, rgba(3, 10, 12, .88) 0%, rgba(3, 10, 12, .5) 34%, rgba(3, 10, 12, 0) 62%),
    linear-gradient(0deg, var(--abyss) 0%, rgba(4, 16, 18, .6) 20%, rgba(5, 8, 12, 0) 46%),
    linear-gradient(180deg, rgba(5, 8, 12, .7) 0%, rgba(5, 8, 12, 0) 18%);
}
.hoehle-kopf-inhalt { padding-top: 8rem; padding-bottom: var(--r6); display: grid; gap: 1.1rem; justify-items: start; }
.hoehle-titel { font-size: clamp(2.5rem, 1rem + 4.8vw, 8rem); max-width: 17ch; line-height: .95; text-shadow: 0 .4rem 2rem rgba(0, 0, 0, .9); }
.hoehle-titel:has(.h1-gross) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; }
.h1-gross { display: block; flex: 1 0 100%; }
.h1-klein { min-width: 0; }
.h1-trenner, .h1-klein { font-size: .42em; line-height: 1.15; }
.h1-trenner { color: var(--h-akzent); }
.h1-klein { color: var(--mond-hell); }
.hoehle--geist .hoehle-titel { text-shadow: 0 .15rem .5rem rgba(0, 0, 0, .85); }
.hoehle--geist .hoehle-titel .h1-gross { color: #E6FFF9; text-shadow: 0 0 .3em rgba(80, 255, 205, .45), 0 .15rem .5rem rgba(0, 0, 0, .85); animation: geist-flackern 7s steps(1) infinite; }
@keyframes geist-flackern { 0%, 100% { opacity: 1; } 61% { opacity: .78; } 62% { opacity: 1; } 64% { opacity: .86; } 65% { opacity: 1; } }
.hoehle-kopf .hud-punkt { background: var(--h-akzent); box-shadow: 0 0 .7em var(--h-akzent); }
.hoehle-aktion { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .3rem; }
.hoehle-hud { width: min(100%, 44rem); margin-top: var(--r5); grid-template-columns: repeat(4, minmax(0, 1fr)); border-top-color: var(--linie-stark); }
.hoehle-hud > div::before { background: var(--h-akzent); box-shadow: 0 0 .6rem var(--h-akzent); }

/* Deko-Ebenen über Bild und Schleier, unter dem Text. !important: .szene > :not(…) setzt sonst relative/z-index 3. */
.szene > .hoehle-deko { position: absolute !important; inset: 0; z-index: 2 !important; pointer-events: none; }
.hoehle-rauch { width: 100%; height: 100%; mix-blend-mode: screen; }
.kerzenschein {
  --kx: 64%; --ky: 30%;
  background: radial-gradient(circle at var(--kx) var(--ky), rgba(255, 178, 90, .16), rgba(255, 140, 50, .05) 18rem, transparent 34rem);
  mix-blend-mode: screen; animation: kerze-flackern 3.2s steps(6) infinite;
}
@keyframes kerze-flackern { 0%, 100% { opacity: 1; } 17% { opacity: .82; } 33% { opacity: .95; } 50% { opacity: .76; } 67% { opacity: 1; } 83% { opacity: .88; } }

/* Münzglanz: Lichtsterne auf den Münzen (Positionen setzt casino.js in Bildkoordinaten) */
.hoehle-glanz i { position: absolute; left: -10rem; top: 0; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; opacity: 0; animation: glitzern 4.2s ease-in-out infinite; animation-delay: var(--v, 0s); }
.hoehle-glanz i::before, .hoehle-glanz i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, transparent, #FFF7DE 45%, #FFFFFF 50%, #FFF7DE 55%, transparent); box-shadow: 0 0 .5rem rgba(255, 220, 140, .8); }
.hoehle-glanz i::after { transform: rotate(90deg); }
@keyframes glitzern { 0%, 62%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 74% { opacity: 1; transform: scale(1) rotate(45deg); } 86% { opacity: 0; transform: scale(.35) rotate(90deg); } }
.hoehle--geist .hoehle-glanz i { width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; }

/* Geisterschiff: Nebelbank, Irrlichter, Geisterkarten */
.nebelbank { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 14%); mask-image: linear-gradient(0deg, transparent 0, #000 14%); }
.nebelbank span {
  position: absolute; left: 0; bottom: -6%; width: 200%; height: 52%;
  background: radial-gradient(42% 58% at 30% 72%, rgba(150, 225, 215, .26), transparent 72%), radial-gradient(30% 44% at 78% 84%, rgba(120, 200, 210, .2), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x;
  animation: nebel-ziehen 80s linear infinite;
}
.nebelbank span:nth-child(2) { bottom: 14%; height: 36%; opacity: .55; animation-duration: 130s; animation-direction: reverse; }
.nebelbank span:nth-child(3) { bottom: -14%; height: 38%; opacity: .85; animation-duration: 55s; }
@keyframes nebel-ziehen { to { transform: translateX(-50%); } }

.irrlichter i {
  position: absolute; left: var(--x); top: var(--y); width: var(--g); height: var(--g); border-radius: 50%;
  background: radial-gradient(circle, #F0FFFB 0 14%, rgba(120, 255, 220, .85) 30%, rgba(60, 200, 220, 0) 70%);
  box-shadow: 0 0 1.6rem .5rem rgba(80, 255, 205, .3);
  animation: irrlicht-puls 4.4s ease-in-out infinite, irrlicht-wandern 14s ease-in-out infinite alternate;
  animation-delay: var(--v), var(--v);
}
@keyframes irrlicht-puls { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: .95; scale: 1.15; } }
@keyframes irrlicht-wandern { 0% { translate: 0 0; } 33% { translate: 2.4rem -1.6rem; } 66% { translate: -1.8rem -3rem; } 100% { translate: 1.2rem 1.4rem; } }

.geisterkarte {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: clamp(3.4rem, 2rem + 3vw, 6.2rem); aspect-ratio: 5 / 7; border-radius: .5rem;
  border: 1px solid rgba(160, 255, 235, .6); color: rgba(214, 255, 246, .95);
  background: linear-gradient(160deg, rgba(170, 255, 240, .22), rgba(60, 190, 210, .07) 58%, rgba(170, 255, 240, .16));
  box-shadow: 0 0 1.8rem rgba(80, 255, 205, .32), inset 0 0 1.4rem rgba(140, 255, 230, .2);
  mix-blend-mode: screen; opacity: 0; will-change: transform, opacity;
}
.geisterkarte--rot { color: rgba(255, 200, 214, .95); }
.geisterkarte b { position: absolute; left: .4rem; top: .25rem; font-family: var(--f-display); font-size: 1.1rem; line-height: 1; }
.geisterkarte b.unten { left: auto; top: auto; right: .4rem; bottom: .25rem; transform: rotate(180deg); }
.geisterkarte .farbe--gross { width: 45%; height: auto; aspect-ratio: 1; fill: currentColor; filter: drop-shadow(0 0 .4rem rgba(120, 255, 220, .6)); }
.geisterkarten.fliegen .geisterkarte { animation: geist-wabern 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.8s); }
@keyframes geist-wabern { 0% { translate: 0 0; scale: 1; } 50% { translate: 0 -1.4rem; scale: 1.06; } 100% { translate: 0 .6rem; scale: .96; } }
/* Ohne Bewegung (ruhig/ohne JS): drei Karten stehen still im Nebel */
html:is(.ruhig, .no-js) .geisterkarte:nth-child(-n+3) { opacity: .4; }
html:is(.ruhig, .no-js) .geisterkarte:nth-child(1) { left: 54%; top: 16%; rotate: -14deg; }
html:is(.ruhig, .no-js) .geisterkarte:nth-child(2) { left: 72%; top: 9%; rotate: 9deg; }
html:is(.ruhig, .no-js) .geisterkarte:nth-child(3) { left: 87%; top: 22%; rotate: 22deg; }

/* ---------- Raster: Kurswalze + Artikel ---------- */
.hoehle-raster { display: grid; grid-template-columns: minmax(17rem, 21rem) minmax(0, 46rem); justify-content: center; gap: var(--r8); align-items: start; padding-top: var(--abschnitt); }
.hoehle-seite { position: sticky; top: 6rem; }
.hoehle-artikel { min-width: 0; }
.hoehle-text { max-width: 70ch; }

/* ---------- Kurswalze (Spielautomat) ---------- */
.automat {
  --fh: 3.6rem;                      /* Feldhöhe, muss zu WALZE_FELD in vorlagen_casino.py passen */
  position: relative; padding: .9rem .9rem 1rem; border-radius: 1.6rem 1.6rem .7rem .7rem;
  background: linear-gradient(180deg, #2C1B0D, #180E06 58%, #100804);
  border: 1px solid var(--h-linie);
  box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(246, 223, 160, .22), inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 0 0 5px rgba(232, 194, 107, .18);
}
.automat-kopf { text-align: center; padding: .1rem 0 .8rem; }
.automat-lampen { display: flex; justify-content: center; gap: .55rem; margin-bottom: .55rem; }
.automat-lampen i { width: .5rem; height: .5rem; border-radius: 50%; background: #4F3412; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); animation: lampe 1.8s steps(1) infinite; }
.automat-lampen i:nth-child(even) { animation-delay: -.9s; }
.automat.dreht .automat-lampen i { animation-duration: .36s; }
@keyframes lampe { 0%, 49% { background: rgb(var(--h-glut)); box-shadow: 0 0 .6rem rgb(var(--h-glut)); } 50%, 100% { background: #4F3412; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); } }
.automat-titel { font-family: var(--f-display); font-size: 2rem; font-weight: 640; line-height: 1; color: var(--h-akzent-hell); text-shadow: 0 0 1rem rgba(var(--h-glut), .5); }
.automat-unter { margin-top: .3rem; font-family: var(--f-hud); font-weight: 600; font-size: .75rem; letter-spacing: var(--sperr-hud); text-transform: uppercase; color: var(--mond-matt); }

.automat-gehaeuse { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .55rem; align-items: stretch; }
.automat-fenster {
  position: relative; height: calc(var(--fh) * 2.7); overflow: hidden; border-radius: .55rem; background: #0A0602;
  box-shadow: inset 0 0 0 2px #0A0602, inset 0 0 0 3px rgba(232, 194, 107, .45);
}
.automat-fenster::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(8, 5, 2, .94) 0%, rgba(8, 5, 2, .45) 24%, rgba(8, 5, 2, 0) 38%, rgba(8, 5, 2, 0) 62%, rgba(8, 5, 2, .45) 76%, rgba(8, 5, 2, .94) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .4), transparent 10%, transparent 90%, rgba(0, 0, 0, .4));
}
.automat-fenster::after { content: ""; position: absolute; inset: 3px; z-index: 3; pointer-events: none; border-radius: .45rem; background: linear-gradient(165deg, rgba(255, 255, 255, .12), transparent 30%); }
.walze-nav { position: absolute; inset: 0; perspective: 30rem; }
.automat-linie { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; height: calc(var(--fh) + 4px); margin-top: calc(var(--fh) / -2 - 2px); pointer-events: none; border-block: 2px solid rgba(var(--h-glut), .85); box-shadow: 0 0 .9rem rgba(var(--h-glut), .35); }
.automat-linie::before, .automat-linie::after { content: ""; position: absolute; top: 50%; margin-top: -.42rem; border: .42rem solid transparent; }
.automat-linie::before { left: 0; border-left-color: rgb(var(--h-glut)); }
.automat-linie::after { right: 0; border-right-color: rgb(var(--h-glut)); }

/* Grundzustand ohne JS: schlichte Liste */
.walze { display: grid; gap: 2px; }
.walze-feld { background: linear-gradient(180deg, #E6D9B9, #F6EDD6 45%, #E0D0A9); }
.walze-feld a {
  display: grid; grid-template-columns: 1.4rem 1.05rem minmax(0, 1fr); align-items: center; gap: .5rem;
  min-height: var(--fh); padding: .3rem .8rem .3rem .6rem; color: #2A1D0C; text-decoration: none;
  font-family: var(--f-hud); font-weight: 600; font-size: .92rem; line-height: 1.12; letter-spacing: .01em;
}
.walze-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.walze-nr { font-family: var(--f-display); font-size: 1.35rem; line-height: 1; color: #7A4128; text-align: center; }
.walze-farbe { width: 1.05rem; height: 1.05rem; fill: #1C1A18; }
.walze-farbe--rot { fill: #A3241B; }
.walze-feld a:hover { color: #000; }
.walze-feld a:focus-visible { outline: 2px solid #B3261E; outline-offset: -4px; box-shadow: none; border-radius: 4px; }
.walze-feld.aktiv { background: linear-gradient(180deg, #F0E2BE, #FFF8E6 45%, #EBDAB0); }
.walze-feld.aktiv a { color: #140C03; }
.walze-feld--deko { display: none; }
html.no-js .automat-fenster { height: auto; overflow: visible; }
html.no-js .walze-nav { position: static; }
html.no-js .automat-fenster::before, html.no-js .automat-fenster::after, html.no-js .automat-linie,
html.no-js .automat-tasten, html.no-js .hebel, html.no-js .automat-stand { display: none; }
html.no-js .automat-gehaeuse { grid-template-columns: 1fr; }

/* Mit JS: echte Walze im Raum */
html.js .walze {
  position: absolute; left: .3rem; right: .3rem; top: 50%; height: var(--fh); margin-top: calc(var(--fh) / -2);
  display: block; transform-style: preserve-3d;
  transform: translateZ(calc(var(--radius) * -1)) rotateX(var(--dreh, 0deg));
}
html.js .walze-feld {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateX(calc(var(--i) * -360deg / var(--n))) translateZ(var(--radius));
  border-block: 1px solid rgba(90, 60, 20, .28);
}
html.js .walze-feld a { height: 100%; min-height: 0; }
html.js .walze-feld--deko { display: flex; align-items: center; justify-content: space-evenly; color: #6B4A22; }
.walze-feld--deko .sym { width: 1.7rem; height: 1.7rem; opacity: .8; }
.walze-feld--deko .sym:nth-child(2) { color: #A3241B; }
.automat.dreht .walze-feld { filter: blur(.8px); }

.automat-tasten { display: grid; grid-template-rows: 1fr 1fr; gap: .4rem; }
.automat-taste {
  display: grid; place-items: center; width: 2.5rem; border-radius: .45rem; color: var(--h-akzent-hell);
  background: linear-gradient(180deg, #3B2512, #1E1208); border: 1px solid var(--h-linie);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .18), 0 .3rem .6rem rgba(0, 0, 0, .5);
  transition: background-color var(--d-s), box-shadow var(--d-m), color var(--d-s);
}
.automat-taste .sym { width: 1.2rem; height: 1.2rem; }
.automat-taste:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 230, 170, .3), 0 0 1rem rgba(var(--h-glut), .35); }
.automat-taste:active { transform: translateY(1px); }

.hebel { position: relative; width: 2.7rem; min-height: calc(var(--fh) * 2.7); border-radius: .5rem; }
.hebel-schlitz { position: absolute; left: 50%; top: 1rem; bottom: .3rem; width: .55rem; margin-left: -.275rem; border-radius: .3rem; background: #050302; box-shadow: inset 0 0 .3rem #000, 0 0 0 1px rgba(232, 194, 107, .3); }
.hebel-stange { position: absolute; left: 50%; bottom: .5rem; width: .34rem; height: calc(100% - 1.9rem); margin-left: -.17rem; border-radius: .2rem; transform-origin: 50% 100%; background: linear-gradient(90deg, #5F5A52, #E9E4DA 45%, #8A847A); }
.hebel-knauf { position: absolute; left: 50%; top: .1rem; width: 1.9rem; height: 1.9rem; margin-left: -.95rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFB3A6 0 8%, #E0574B 26%, var(--blut) 56%, #4D0B07 100%); box-shadow: 0 .35rem .6rem rgba(0, 0, 0, .6), inset 0 -.2rem .35rem rgba(0, 0, 0, .4); transition: box-shadow var(--d-m); }
.hebel:hover .hebel-knauf { box-shadow: 0 .35rem .6rem rgba(0, 0, 0, .6), 0 0 1.2rem rgba(232, 87, 75, .7); }
.hebel:focus-visible { outline-offset: 2px; }

.automat-stand { display: flex; justify-content: space-between; gap: .6rem; margin-top: .7rem; font-family: var(--f-hud); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mond-matt); }
.automat-stand b { color: var(--h-akzent-hell); font-variant-numeric: tabular-nums; }
.automat-hinweis { display: flex; gap: .5rem; align-items: flex-start; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linie); font-size: .8rem; line-height: 1.4; color: var(--mond-matt); }
.automat-hinweis .sym { margin-top: .1rem; color: var(--h-akzent); }

/* Geisterschiff-Variante der Walze */
.hoehle--geist .automat { background: linear-gradient(180deg, #0F2629, #08171A 58%, #050E10); box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(160, 255, 235, .2), inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 0 0 5px rgba(111, 242, 210, .16), 0 0 3rem -1rem rgba(80, 255, 205, .25); }
.hoehle--geist .automat-lampen i { background: #12403A; }
.hoehle--geist .automat-fenster { background: #031012; box-shadow: inset 0 0 0 2px #031012, inset 0 0 0 3px rgba(111, 242, 210, .45); }
.hoehle--geist .automat-fenster::before { background: linear-gradient(180deg, rgba(2, 10, 12, .94) 0%, rgba(2, 10, 12, .45) 24%, rgba(2, 10, 12, 0) 38%, rgba(2, 10, 12, 0) 62%, rgba(2, 10, 12, .45) 76%, rgba(2, 10, 12, .94) 100%); }
.hoehle--geist .walze-feld { background: linear-gradient(180deg, #123236, #1B4549 45%, #0F2C30); border-color: rgba(111, 242, 210, .22); }
.hoehle--geist .walze-feld.aktiv { background: linear-gradient(180deg, #17444A, #22595E 45%, #143A3F); }
.hoehle--geist .walze-feld a { color: #E3FFF8; }
.hoehle--geist .walze-feld a:hover, .hoehle--geist .walze-feld.aktiv a { color: #FFFFFF; }
.hoehle--geist .walze-nr { color: #8FF3FF; }
.hoehle--geist .walze-farbe { fill: #BFFCEF; }
.hoehle--geist .walze-farbe--rot { fill: #FFB8C6; }
.hoehle--geist .walze-feld a:focus-visible { outline-color: #FFD38A; }
.hoehle--geist .walze-feld--deko { color: #6FF2D2; }
.hoehle--geist .walze-feld--deko .sym:nth-child(2) { color: #FFB8C6; }
.hoehle--geist .automat-taste { background: linear-gradient(180deg, #13393D, #0A2124); }

/* ---------- Artikel: Einleitung und Abschnitte mit Kartenkopf ---------- */
.hoehle-einleitung > * + * { margin-top: 1.05em; }
.hoehle-einleitung > p:first-child { font-size: var(--t-l); line-height: 1.6; color: var(--mond-hell); }
.hoehle-text > .hoehle-abschnitt { position: relative; margin-top: var(--r8); padding-top: var(--r6); scroll-margin-top: 5.5rem; }
.hoehle-abschnitt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--h-linie), transparent 75%); }
.hoehle-abschnitt::after { content: ""; display: table; clear: both; }
.hoehle-abschnitt-text { margin-top: var(--r5); }
.hoehle-abschnitt-text > * + * { margin-top: 1.05em; }

.blatt-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--r5) var(--r6); align-items: center; }
.blatt-label { gap: .5em; }
.blatt-nr { color: var(--h-akzent); }
.hoehle-text .blatt-titel h2 { margin-top: .4rem; font-size: clamp(1.7rem, 1.1rem + 1.9vw, 3rem); }
.hoehle--geist .hoehle-text .blatt-titel h2 { color: #E3FFF8; text-shadow: 0 0 1.2rem rgba(80, 255, 205, .3); }

.blatt { --rx: 0deg; --ry: 0deg; --gx: 130%; width: clamp(5.6rem, 4.2rem + 3vw, 8.6rem); perspective: 40rem; }
.blatt-koerper {
  position: relative; display: grid; place-items: center; aspect-ratio: 5 / 7; overflow: hidden; border-radius: .7rem;
  color: #17130D; background: linear-gradient(160deg, #FBF4E2, #EADBB8 60%, #DCC9A0);
  box-shadow: 0 1.2rem 2rem -1rem rgba(0, 0, 0, .9), 0 0 0 1px rgba(156, 116, 40, .6), 0 0 2.4rem -0.6rem rgba(var(--h-glut), .35);
  transform: rotate(-4deg) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--d-m) var(--ease-segel);
}
.blatt--rot .blatt-koerper { color: #A3241B; }
.blatt-rahmen { position: absolute; inset: .4rem; border-radius: .42rem; border: 1px solid rgba(156, 116, 40, .55); box-shadow: inset 0 0 0 2px rgba(251, 244, 226, .7), inset 0 0 0 3px rgba(156, 116, 40, .3); }
.blatt-ecke { position: absolute; left: .5rem; top: .45rem; z-index: 2; display: grid; justify-items: center; gap: .12rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(.95rem, .8rem + .4vw, 1.25rem); line-height: 1; }
.hoehle-text .blatt-ecke b { color: inherit; font-weight: 700; }
.blatt-ecke .farbe { width: .78em; height: .78em; fill: currentColor; }
.blatt-ecke--unten { left: auto; top: auto; right: .5rem; bottom: .45rem; transform: rotate(180deg); }
.blatt-mitte { position: relative; z-index: 1; display: grid; place-items: center; }
.blatt-mitte .farbe--gross { width: clamp(2.2rem, 1.6rem + 1.4vw, 3.4rem); height: auto; aspect-ratio: 1; fill: currentColor; }
.blatt-mitte--foto { width: 64%; aspect-ratio: 1; overflow: hidden; border-radius: .35rem; box-shadow: 0 0 0 2px #9C7428, 0 0 0 4px #F6EAD0, 0 0 0 5px rgba(156, 116, 40, .6); }
.hoehle-text .blatt-foto { display: block; width: 100%; height: 100%; max-width: none; margin: 0; float: none; object-fit: cover; border-radius: 0; box-shadow: none; }
.blatt-glanz { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%); background-size: 260% 100%; background-position: var(--gx) 0; mix-blend-mode: soft-light; transition: background-position var(--d-l) var(--ease-segel); }

.hoehle--geist .blatt-koerper {
  color: #C9FFF3; background: linear-gradient(160deg, rgba(160, 255, 235, .18), rgba(30, 110, 120, .16) 60%, rgba(160, 255, 235, .1));
  box-shadow: 0 0 0 1px rgba(143, 243, 255, .55), 0 0 2.2rem rgba(80, 255, 205, .28), inset 0 0 1.6rem rgba(140, 255, 230, .16), 0 1.2rem 2rem -1rem rgba(0, 0, 0, .9);
}
.hoehle--geist .blatt--rot .blatt-koerper { color: #FFC2CF; }
.hoehle--geist .blatt-rahmen { border-color: rgba(143, 243, 255, .4); box-shadow: none; }
.hoehle--geist .blatt-mitte .farbe--gross { filter: drop-shadow(0 0 .6rem rgba(120, 255, 220, .7)); }
.hoehle--geist .blatt { animation: geist-schweben 6s ease-in-out infinite; }
.hoehle--geist .hoehle-abschnitt:nth-of-type(even) .blatt { animation-delay: -3s; }
@keyframes geist-schweben { 50% { translate: 0 -.6rem; } }

/* ---------- Nebenan in der Spielhöhle ---------- */
.nebenan { padding-top: var(--abschnitt); }
.nebenan-kopf { display: flex; margin-bottom: var(--r4); color: var(--h-akzent); }
.nebenan-karte { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(16rem, 9rem + 16vw, 30rem); overflow: hidden; border-radius: var(--rad-karte); text-decoration: none; box-shadow: var(--schatten-karte); }
.nebenan-bild, .nebenan-bild picture, .nebenan-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.nebenan-bild img { object-fit: cover; background-size: cover; filter: brightness(.62) saturate(.95); transition: transform var(--d-l) var(--ease-segel), filter var(--d-l); }
.nebenan-karte::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 8, 12, .9), rgba(5, 8, 12, .45) 50%, rgba(5, 8, 12, .05)), linear-gradient(0deg, rgba(5, 8, 12, .7), transparent 50%); }
.nebenan-text { position: relative; z-index: 2; display: grid; gap: .7rem; justify-items: start; padding: clamp(1.4rem, 1rem + 2vw, 3.4rem); }
.nebenan-titel { max-width: 22ch; font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 600; line-height: 1.02; color: var(--mond-hell); text-wrap: balance; }
.nebenan-weiter { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-hud); font-weight: 600; font-size: 1.05rem; letter-spacing: .06em; color: var(--gold-hell); }
.nebenan-karte--geist .nebenan-weiter, .nebenan-karte--geist .hud-punkt { color: #9FFBE6; }
.nebenan-karte--geist .hud-punkt { background: #6FF2D2; box-shadow: 0 0 .7em #6FF2D2; }
.nebenan-karte:hover .nebenan-bild img { transform: scale(1.04); filter: brightness(.72) saturate(1.05); }
.nebenan-karte:hover .nebenan-weiter .sym { translate: .25rem 0; }
.nebenan-weiter .sym { transition: translate var(--d-m) var(--ease-segel); }
.nebenan-karte:focus-visible { outline-offset: 4px; }

/* ---------- Münzregen (Hebel) ---------- */
.muenzregen { position: fixed; inset: 0; z-index: calc(var(--z-toast) - 1); overflow: hidden; pointer-events: none; }
.regen-muenze { position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; }
.regen-muenze::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF4CF 0 12%, #F2CF78 30%, #C99A3F 62%, #8A6420 100%);
  box-shadow: inset 0 0 0 .14rem rgba(110, 79, 23, .75), inset 0 0 0 .3rem rgba(255, 236, 180, .3), 0 .2rem .4rem rgba(0, 0, 0, .5);
  animation: muenze-drehen .55s linear infinite; animation-delay: var(--v, 0s);
}
@keyframes muenze-drehen { 50% { transform: scaleX(.12); } }

/* ---------- Responsiv ---------- */
@media (max-width: 63.99rem) {
  .hoehle-raster { grid-template-columns: minmax(0, 1fr); gap: var(--r6); }
  .hoehle-seite { position: static; width: min(100%, 30rem); }
  .hoehle-text { max-width: none; }
}
@media (max-width: 40rem) {
  .hoehle-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoehle-kopf-inhalt { padding-top: 6.5rem; }
  .blatt-kopf { gap: var(--r4); }
  .hoehle-glanz i:nth-child(n+5), .irrlichter i:nth-child(n+6) { display: none; }
}

/* ---------- Ruhig: keine Bewegung ---------- */
html.ruhig .hoehle-rauch, html.ruhig .hoehle-glanz, html.ruhig .irrlichter { display: none; }
html.ruhig .hoehle--geist .blatt, html.ruhig .hoehle--geist .hoehle-titel .h1-gross { animation: none; }
html.ruhig .automat-lampen i { animation: none; background: rgb(var(--h-glut)); box-shadow: 0 0 .5rem rgba(var(--h-glut), .6); }

@media print {
  .hoehle-deko, .automat-tasten, .hebel, .automat-lampen, .automat-linie, .muenzregen { display: none !important; }
  .hoehle-raster { display: block; }
  .automat-fenster { height: auto !important; overflow: visible !important; }
  .walze-nav { position: static !important; }
  .walze { position: static !important; transform: none !important; display: grid !important; }
  .walze-feld { position: static !important; transform: none !important; }
  .walze-feld--deko { display: none !important; }
}

/* ---------- Kodex der Spielhöhle (18+) ---------- */
.kodex {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.8rem); align-items: center;
  margin-top: var(--r8); padding: clamp(1.3rem, 3vw, 2.3rem) clamp(1.3rem, 3.5vw, 3rem);
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--h-glut), .12), transparent 55%), linear-gradient(135deg, rgba(22, 15, 9, .94), rgba(7, 9, 13, .96));
  border: 1px solid rgba(var(--h-glut), .32); border-radius: var(--rad-m);
  box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.kodex::before, .kodex::after { content: ""; position: absolute; top: .75rem; width: .55rem; height: .55rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E8C26B, #6B4A17); box-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.kodex::before { left: .75rem; }
.kodex::after { right: .75rem; }
.kodex-siegel {
  position: relative; display: grid; place-items: center; width: clamp(5.2rem, 9vw, 7.2rem); aspect-ratio: 1; rotate: -9deg;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 34% 28%, #D4473C, #8E1B14 56%, #5A0E0A);
  box-shadow: 0 .5rem 1.1rem rgba(0, 0, 0, .65), inset 0 -.35rem .7rem rgba(0, 0, 0, .45), inset 0 .25rem .45rem rgba(255, 170, 150, .35);
}
.kodex-siegel::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; border: 2px dashed rgba(255, 214, 196, .38); }
.kodex-siegel span { font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: #FFE8DD; text-shadow: 0 2px 0 rgba(60, 5, 2, .85); }
.kodex-label { display: flex; align-items: center; gap: .5rem; color: var(--gold); }
.kodex-titel { margin: .35rem 0 1rem; font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.15; color: var(--mond-hell); }
.kodex-regeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .9rem 1.8rem; margin: 0; padding: 0; list-style: none; }
.kodex-regeln li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.5; color: var(--mond); }
.kodex-regeln b { color: var(--mond-hell); }
.kodex .sym { margin-top: .15em; color: var(--gold); }
.kodex-hilfe { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: .95rem; line-height: 1.5; color: var(--mond-matt); }
.kodex-hilfe a { color: var(--gold-hell); text-underline-offset: .2em; }
.kodex-hilfe a:hover { color: var(--gold); }
.kodex-knopf .kodex-mini { display: inline-grid; place-items: center; min-width: 2.1em; height: 2.1em; padding-inline: .2em; border-radius: 50%; font-size: .78em; color: #FFE8DD; background: radial-gradient(circle at 35% 30%, #C9382E, #7A160F); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .4); }
@media (max-width: 40rem) { .kodex { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Handy-Feinschliff Spielhöhle (iPhone-Prüfung 2026-11-08) ---------- */
@media (max-width: 40rem) {
  .szene.hoehle-kopf .szene-schleier {
    background: linear-gradient(0deg, var(--abyss) 0%, rgba(5, 8, 12, .88) 28%, rgba(5, 8, 12, .74) 56%, rgba(5, 8, 12, .38) 80%, rgba(5, 8, 12, .6) 100%);
  }
  .hoehle-kopf-inhalt :is(.titel-hero, .brotkrumen, .hud-label) { text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .7); }
}