/* BetWest Nachtpost — Das Spielhaus.
   Ein Raum bei Gaslicht: Flocktapete, Samt, Schliff und Vernicklung.
   Licht faellt im ganzen Haus von links oben. Jedes Glanzlicht zeigt zur Lampe,
   jeder Schatten faellt nach rechts unten. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0b0709;color:#e8edf1}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
button,input{font:inherit;color:inherit}

:root{
  --nacht:#0b0709;
  --nacht-mittel:#140b0e;
  --nacht-hell:#1c1013;
  --karmin-tief:#4a0f18;
  --karmin:#6e1220;
  --karmin-hell:#8f1a24;
  --karmin-glanz:#b0303a;
  --nickel-blitz:#e8edf1;
  --nickel:#c3ccd4;
  --nickel-matt:#8e99a3;
  --nickel-tief:#565f68;
  --gaslicht:#ffd9a0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif","Droid Serif",Georgia,"Times New Roman",serif;
  --grotesk:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;

  /* Vernickeltes Blech: Glanzkante oben, dunkles Spiegelband darunter,
     dann der karminrote Widerschein des Raumes an der Unterkante. */
  --plattiert-schmal:linear-gradient(179deg,#fbfdfe 0,#e0e7ed 10%,#8b959e 20%,#d8e0e7 40%,#f0f5f8 62%,#bcc6ce 80%,#9f2530 93%,#6e1220 100%);

  /* Flocktapete: Ogee-Damast aus feiner Linienarbeit, aufgerauhter Samt auf
     dunklerem Karmingrund. Jede Ranke traegt oben links ein Streiflicht und
     wirft ihren Schatten nach rechts unten — dieselbe Lampe wie im ganzen Haus. */
  --damast:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='168'%3E%3Cdefs%3E%3Cg id='d' fill='none' stroke-width='2.6'%3E%3Cpath d='M60 5C73 23 95 31 95 50 95 69 79 83 60 97 41 83 25 69 25 50 25 31 47 23 60 5Z'/%3E%3Cpath d='M60 27c5 11 9 20 9 29 0 8-4 14-9 18-5-4-9-10-9-18 0-9 4-18 9-29z'/%3E%3Cpath d='M25 50c-11-4-15-13-12-22 7 5 12 13 12 22z'/%3E%3Cpath d='M95 50c11-4 15-13 12-22-7 5-12 13-12 22z'/%3E%3Cpath d='M45 66c-7 6-16 8-24 5 6-7 15-9 24-5z'/%3E%3Cpath d='M75 66c7 6 16 8 24 5-6-7-15-9-24-5z'/%3E%3Cpath d='M60 108c5 8 8 15 8 21 0 6-3 11-8 14-5-3-8-8-8-14 0-6 3-13 8-21z'/%3E%3Cpath d='M42 128c-6 3-9 8-8 14 6-2 9-7 8-14z'/%3E%3Cpath d='M78 128c6 3 9 8 8 14-6-2-9-7-8-14z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23d' x='1.4' y='2.2' stroke='%23000' opacity='.42'/%3E%3Cuse href='%23d' stroke='%238f1a24' opacity='.3'/%3E%3Cuse href='%23d' x='-1' y='-1.4' stroke='%23fff' opacity='.045'/%3E%3C/svg%3E");

  /* Samtnarbe: feines Korn, klein gekachelt, damit nichts live gefiltert wird. */
  --pile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23fff' opacity='.05'%3E%3Ccircle cx='7' cy='11' r='.9'/%3E%3Ccircle cx='27' cy='4' r='.7'/%3E%3Ccircle cx='47' cy='16' r='.8'/%3E%3Ccircle cx='17' cy='31' r='.7'/%3E%3Ccircle cx='39' cy='39' r='.9'/%3E%3Ccircle cx='55' cy='47' r='.7'/%3E%3Ccircle cx='9' cy='52' r='.8'/%3E%3Ccircle cx='31' cy='56' r='.7'/%3E%3C/g%3E%3C/svg%3E");
}

body{font-family:var(--serif);font-size:17px;line-height:1.62;letter-spacing:.004em}

.verdeckt{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.zeichensatz{position:absolute;width:0;height:0;overflow:hidden}

.vorbeigehen{position:absolute;left:12px;top:-60px;z-index:40;padding:.6rem 1.1rem;background:var(--nacht-hell);color:var(--nickel-blitz);border:1px solid var(--nickel-matt);border-radius:3px;text-decoration:none;font-family:var(--grotesk);font-size:.9rem}
.vorbeigehen:focus{top:12px}

:is(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--nickel-blitz);outline-offset:3px;border-radius:2px}

/* -- Der Raum ---------------------------------------------------------
   Flocktapete auf dunklem Karmingrund, zwei Lichtbecken, Tiefenverlauf.
   Kein position:fixed, kein Live-Filter, keine Blendmodi auf Fixelementen. */
.spielhaus{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--nacht);
  background-image:
    radial-gradient(62% 22% at 17% 6%,rgba(255,217,160,.34),rgba(255,214,158,.11) 26%,rgba(143,26,36,.14) 46%,rgba(11,7,9,0) 70%),
    radial-gradient(54% 15% at 13% 62%,rgba(255,217,160,.22),rgba(255,214,158,.07) 26%,rgba(110,18,32,.10) 44%,rgba(11,7,9,0) 68%),
    var(--damast),
    var(--damast),
    linear-gradient(180deg,#1d1015 0,#160c11 16%,#0f090b 40%,#0a0608 62%,#12090c 82%,#0b0709 100%);
  background-size:auto,auto,64px 90px,64px 90px,auto;
  background-position:0 0,0 0,0 0,32px 45px,0 0;
  background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat;
  background-blend-mode:screen,screen,normal,normal,normal;
}

/* -- Die Gaslampen ---------------------------------------------------- */
.gaslampe{position:absolute;z-index:1;pointer-events:none;width:min(64vw,660px);height:min(64vw,660px);
  background:radial-gradient(circle at 50% 27%,rgba(255,217,160,.26),rgba(255,214,158,.09) 17%,rgba(176,48,58,.10) 38%,rgba(11,7,9,0) 64%)}
/* Aufhaengung: ein duennes vernickeltes Rohr, Glanzkante auf der Lampenseite */
.gaslampe::before{content:"";position:absolute;left:50%;top:0;width:6px;height:25%;margin-left:-3px;
  background:linear-gradient(90deg,#2b3238 0,#dfe7ed 26%,#f4f8fb 40%,#96a1aa 58%,#59101a 86%,#26090f 100%);
  box-shadow:0 2px 5px rgba(5,3,5,.8)}
/* Der Gluehstrumpf: das einzige Bernstein auf der Seite, und nur als Licht */
.gaslampe::after{content:"";position:absolute;left:50%;top:26.4%;width:44px;height:58px;margin-left:-22px;
  border-radius:50% 50% 42% 42%/58% 58% 42% 42%;
  background:radial-gradient(circle at 46% 62%,#fffaf0,#ffd9a0 22%,rgba(255,205,138,.46) 44%,rgba(255,178,108,.13) 68%,rgba(11,7,9,0) 84%);
  box-shadow:0 0 26px 8px rgba(255,217,160,.26),0 0 76px 30px rgba(255,186,116,.12)}
/* Der vernickelte Kranz, in dem der Strumpf sitzt */
.gaslampe-korb{position:absolute;left:50%;top:24%;width:44px;height:15px;margin-left:-22px;border-radius:3px 3px 10px 10px;
  background:linear-gradient(179deg,#f6fafd 0,#c2cbd3 20%,#4f5960 44%,#9aa5ae 68%,#7d1a26 92%,#4a0f18 100%);
  box-shadow:0 1px 0 rgba(248,251,253,.8) inset,-1px 0 0 rgba(248,251,253,.4) inset,0 4px 8px rgba(5,3,5,.85),0 0 18px 5px rgba(255,217,160,.26)}
.gaslampe--saal{top:58px;left:clamp(-215px,-1vw,40px)}
.gaslampe--tief{top:-118px;left:clamp(-240px,-6vw,-40px);width:min(56vw,540px);height:min(56vw,540px);opacity:.9;z-index:3}

/* -- Kaminsims: das naechste Brett, direkt ueber dem Kopf -------------- */
.kaminsims{position:relative;z-index:9;
  background:linear-gradient(180deg,#2a171d 0,#1a0f14 42%,#120a0d 78%,#0e070a 100%);
  border-bottom:1px solid #3b1f27;
  box-shadow:0 1px 0 rgba(232,237,241,.13) inset,0 14px 34px -10px rgba(5,3,5,.9)}
.kaminsims-innen{max-width:1240px;margin:0 auto;padding:14px clamp(16px,4vw,40px);display:flex;align-items:center;gap:clamp(12px,3vw,26px);flex-wrap:wrap}
.kaminsims-marke{width:clamp(122px,17vw,166px);height:auto;filter:drop-shadow(2px 4px 5px rgba(5,3,5,.85))}
.kaminsims-signum{font-family:var(--grotesk);font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;color:var(--nickel);margin-right:auto}
.kaminsims-signum span{color:var(--nickel-tief);margin:0 .3em}
.kaminsims-alter{font-family:var(--grotesk);font-size:.72rem;letter-spacing:.12em;padding:.28rem .62rem;border-radius:2px;color:#0e070a;font-weight:700;
  background:var(--plattiert-schmal);box-shadow:0 1px 0 rgba(246,250,253,.6) inset,0 3px 6px rgba(5,3,5,.7)}

/* -- Der Spieltisch: vorderste Ebene ---------------------------------- */
/* Der Spieltisch laeuft links aus dem Bild — er ist Moebel im Raum,
   keine Platte mit Rand. Der Automat steht dahinter und wird von der
   Tischkante angeschnitten. */
.spieltisch{position:relative;z-index:8;padding:0 0 clamp(24px,3.6vw,46px)}
.spieltisch-stueck{position:absolute;right:clamp(-72px,-3vw,-8px);top:-12px;width:min(44vw,560px);margin:0;z-index:0;
  -webkit-mask-image:linear-gradient(206deg,#000 58%,rgba(0,0,0,.4) 84%,transparent 97%);
  mask-image:linear-gradient(206deg,#000 58%,rgba(0,0,0,.4) 84%,transparent 97%)}
.spieltisch-stueck img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:64% 42%;opacity:.96}

.spieltisch-platte{position:relative;z-index:2;
  margin:clamp(88px,12vw,178px) clamp(56px,26vw,470px) 0 0;
  padding:clamp(24px,3.6vw,44px) clamp(20px,3vw,44px) clamp(28px,4vw,48px) 0;
  border-radius:0 5px 6px 0;
  background:
    var(--pile),
    radial-gradient(58% 110% at 108% 40%,rgba(9,4,6,.55),rgba(9,4,6,0) 62%),
    radial-gradient(130% 150% at 4% -22%,rgba(255,217,160,.21),rgba(255,214,158,.055) 26%,rgba(11,7,9,0) 56%),
    linear-gradient(161deg,#611321 0,#4a0f18 26%,#340a12 56%,#1e060b 84%,#140407 100%);
  background-size:60px 60px,auto,auto,auto;
  box-shadow:
    0 34px 64px -20px rgba(5,3,5,.94),
    22px 26px 48px -24px rgba(5,3,5,.95),
    0 5px 0 -1px #23070c}
/* Die vernickelte Tischkante faengt das Licht als harte Linie */
.spieltisch-platte::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-radius:0 3px 0 0;
  background:linear-gradient(179deg,#dfe7ed 0,#aab5be 20%,#525c64 46%,#8a959e 70%,#71161f 90%,#420d15 100%);
  box-shadow:0 5px 12px -3px rgba(5,3,5,.85)}
.spieltisch-innen{max-width:820px;margin-left:max(clamp(16px,4vw,40px),calc((100vw - 1240px)/2 + 40px))}

.spieltisch-kennung{font-family:var(--grotesk);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#e5ebf0;
  display:inline-flex;align-items:center;gap:.55em;padding:.34rem .8rem .34rem 0}
.spieltisch-kennung::before{content:"";width:34px;height:2px;border-radius:1px;background:linear-gradient(90deg,#f2f7fa,#8e99a3 60%,rgba(142,153,163,0));box-shadow:0 1px 0 rgba(5,3,5,.8)}
.spieltisch-kennung span{color:var(--nickel-matt)}

.spieltisch-titel{margin:.7rem 0 0}
.spieltisch-zug{display:block;width:100%;height:auto;
  max-width:820px;
  filter:drop-shadow(2px 4px 3px rgba(5,3,5,.62))}

.spieltisch-zug--schmal{display:none;max-width:420px}
@media (max-width:699px){
  .spieltisch-zug--weit{display:none}
  .spieltisch-zug--schmal{display:block}
}
.spieltisch-lauf{margin-top:1.35rem;max-width:60ch;color:#dfe6ec;font-size:1.02rem;line-height:1.66}

/* -- Die Hausliste (Formular) ----------------------------------------- */
.hausliste{margin-top:1.5rem;max-width:640px}
.hausliste-zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.hausliste-marke{flex:1 1 250px;min-width:0;display:block}
.hausliste-wort{display:block;font-family:var(--grotesk);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:#dbe3ea;margin-bottom:.4rem}
.hausliste-feld{display:block;width:100%;padding:.78rem .9rem;border-radius:3px;
  font-family:var(--grotesk);font-size:1rem;color:#0d0709;
  background:linear-gradient(180deg,#cfd8df 0,#eef3f7 30%,#e2e9ee 76%,#b9c3cb 100%);
  border:1px solid #79838c;
  box-shadow:0 2px 0 rgba(246,250,253,.55) inset,0 -3px 6px rgba(74,15,24,.30) inset,0 5px 12px -3px rgba(5,3,5,.8)}
.hausliste-feld::placeholder{color:#5b656d;opacity:1}
.hausliste-feld[aria-invalid="true"]{border-color:#8f1a24;box-shadow:0 2px 0 rgba(246,250,253,.5) inset,0 -3px 8px rgba(143,26,36,.5) inset,0 5px 12px -3px rgba(5,3,5,.8)}

.hausliste-hebel{flex:0 0 auto;padding:.78rem 1.5rem;cursor:pointer;
  font-family:var(--grotesk);font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#120a0d;
  border-radius:3px;border:1px solid #6c767f;
  background:var(--plattiert-schmal);
  box-shadow:0 1px 0 rgba(248,251,253,.75) inset,0 -6px 10px -6px rgba(74,15,24,.7) inset,0 6px 14px -4px rgba(5,3,5,.85)}
.hausliste-hebel:hover{background:linear-gradient(179deg,#fff 0,#eaf0f5 10%,#9aa4ad 20%,#e4eaf0 40%,#fbfdfe 62%,#c9d2d9 80%,#b0303a 93%,#7d1a26 100%)}
.hausliste-hebel:active{box-shadow:0 1px 0 rgba(248,251,253,.4) inset,0 -3px 8px -4px rgba(74,15,24,.7) inset,0 2px 6px -2px rgba(5,3,5,.85)}

.hausliste-tadel{margin-top:.7rem;font-family:var(--grotesk);font-size:.86rem;color:#ffd9a0;
  padding-left:1.5rem;position:relative}
.hausliste-tadel::before{content:"";position:absolute;left:0;top:.34em;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#ffe9c6,#b0303a 62%,#6e1220);box-shadow:0 1px 3px rgba(5,3,5,.8)}
.hausliste-fein{margin-top:.7rem;font-family:var(--grotesk);font-size:.79rem;line-height:1.55;color:#c3ccd4}

.hausliste-quittung{margin-top:.4rem;padding:1rem 1.15rem;border-radius:4px;
  background:linear-gradient(172deg,rgba(28,16,19,.94),rgba(11,7,9,.94));
  border:1px solid #5b656d;
  box-shadow:0 1px 0 rgba(232,237,241,.32) inset,0 10px 22px -8px rgba(5,3,5,.9)}
.hausliste-quittung:focus{outline:3px solid var(--nickel-blitz);outline-offset:3px}
.hausliste-haken{color:#ffd9a0;margin-bottom:.3rem}
.hausliste-quittung-kopf{font-family:var(--grotesk);font-size:.82rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--nickel-blitz)}
.hausliste-quittung-satz{margin-top:.3rem;font-size:.96rem;color:#dbe3ea}

/* -- Das Nickelschild an der Wand: zweite Ebene ----------------------- */
.nickelschild{position:relative;z-index:6;margin-top:clamp(-46px,-4.5vw,-24px);padding:clamp(40px,5vw,68px) clamp(16px,4vw,40px) clamp(16px,2.2vw,28px)}
.nickelschild-innen{max-width:1040px;margin:0 auto;position:relative;
  padding:clamp(22px,3.4vw,38px) clamp(18px,3vw,40px) clamp(20px,3vw,32px);
  border-radius:3px;
  background:
    linear-gradient(178deg,rgba(255,217,160,.13),rgba(255,217,160,0) 34%),
    linear-gradient(176deg,#eef3f7 0,#c3ccd4 4%,#667078 9%,#b0bac2 17%,#d4dde4 37%,#c2ccd4 57%,#dde5ec 73%,#a9b3bc 88%,#8b2a33 96%,#4a0f18 100%);
  border:1px solid #3d454c;
  box-shadow:
    0 2px 0 rgba(250,253,255,.72) inset,
    2px 0 0 rgba(250,253,255,.30) inset,
    0 -4px 12px rgba(74,15,24,.55) inset,
    0 20px 40px -14px rgba(5,3,5,.92),
    16px 20px 38px -20px rgba(5,3,5,.85)}
/* Senkschrauben in den vier Ecken — Schlitz, Glanzkante oben links */
.nickelschild-innen::before,.nickelschild-innen::after{content:"";position:absolute;top:11px;width:15px;height:15px;border-radius:50%;
  background:
    linear-gradient(90deg,rgba(0,0,0,0) 42%,#2f363c 42%,#2f363c 58%,rgba(0,0,0,0) 58%),
    radial-gradient(circle at 34% 30%,#f4f8fb,#aab4bd 42%,#59636b 74%,#7d1a26 100%);
  box-shadow:0 1px 2px rgba(250,253,255,.55) inset,0 3px 5px rgba(5,3,5,.85)}
.nickelschild-innen::before{left:11px}
.nickelschild-innen::after{right:11px}

.nickelschild-kopf{font-family:var(--grotesk);font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#100b0d;
  text-align:center;text-shadow:0 1px 0 rgba(250,253,255,.5)}
.nickelschild-reihe{margin-top:1.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:clamp(14px,2.4vw,28px)}
.nickelschild-posten{text-align:center;padding:0 .4rem}
.nickelschild-posten + .nickelschild-posten{border-left:1px solid rgba(28,16,19,.30);box-shadow:1px 0 0 rgba(250,253,255,.28) inset}
.nickelschild-zahl{display:block;font-size:clamp(2.1rem,5.2vw,3rem);line-height:1;font-weight:700;letter-spacing:-.015em;color:#0e0709;
  text-shadow:0 1px 0 rgba(250,253,255,.62),0 -1px 0 rgba(5,3,5,.4)}
.nickelschild-sache{display:block;margin-top:.5rem;font-family:var(--grotesk);font-size:.83rem;line-height:1.45;color:#1a1216;
  text-shadow:0 1px 0 rgba(250,253,255,.42)}
.nickelschild-fuss{margin-top:1.3rem;text-align:center;font-family:var(--grotesk);font-size:.75rem;line-height:1.5;color:#191114;
  text-shadow:0 1px 0 rgba(250,253,255,.34)}

/* -- Das Spiegelfach: dritte Ebene, quer durch den Raum --------------- */
.spiegelfach{position:relative;z-index:5;margin-top:clamp(-30px,-2.6vw,-14px);padding:clamp(40px,5vw,66px) clamp(16px,4vw,40px) clamp(18px,2.4vw,30px)}
.spiegelfach-innen{max-width:1000px;margin:0 auto;display:grid;gap:clamp(22px,3.2vw,38px);align-items:center;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(20px,2.8vw,34px);border-radius:3px;
  background:linear-gradient(168deg,rgba(32,18,22,.66),rgba(9,5,7,.72));
  box-shadow:0 4px 10px -2px rgba(5,3,5,.9) inset,-4px 0 10px -2px rgba(5,3,5,.72) inset,
    0 -1px 0 rgba(210,220,228,.17) inset,1px 0 0 rgba(210,220,228,.13) inset}
.spiegelfach-kopf{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.18;letter-spacing:-.012em;color:#eef3f7;
  text-shadow:0 2px 5px rgba(5,3,5,.8)}
.spiegelfach-lauf{margin-top:.75rem;color:#d3dbe2;font-size:1rem;max-width:52ch}
.spiegelfach-reihe{margin-top:1.5rem;display:grid;gap:1px;background:rgba(94,104,113,.34);border:1px solid #4a545c;border-radius:3px;overflow:hidden;
  box-shadow:0 1px 0 rgba(232,237,241,.28) inset,0 16px 34px -14px rgba(5,3,5,.9)}
.spiegelfach-stueck{padding:.78rem .95rem;
  background:linear-gradient(168deg,rgba(41,24,29,.96),rgba(20,11,14,.96) 58%,rgba(11,7,9,.96))}
.spiegelfach-name{display:block;font-family:var(--grotesk);font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#eef3f7}
.spiegelfach-satz{display:block;margin-top:.22rem;font-size:.93rem;line-height:1.5;color:#c8d1d9}

/* Geschliffene Spiegelfassung: Facette wirft eine feine Linie nach links oben,
   Alterung kriecht an den Raendern ein. */
.spiegelfach-glas{margin:0;position:relative;padding:11px;border-radius:3px;
  background:
    radial-gradient(120% 90% at 8% 4%,rgba(255,217,160,.18),rgba(255,217,160,0) 46%),
    linear-gradient(163deg,#cfd8df 0,#7b858e 16%,#4d575f 38%,#949fa8 62%,#5d676f 82%,#4a0f18 100%);
  box-shadow:
    0 1px 0 rgba(250,253,255,.78) inset,
    1px 0 0 rgba(250,253,255,.42) inset,
    0 -2px 8px rgba(74,15,24,.6) inset,
    0 24px 46px -16px rgba(5,3,5,.92)}
.spiegelfach-glas::after{content:"";position:absolute;inset:11px;pointer-events:none;border-radius:1px;
  background:linear-gradient(153deg,rgba(255,217,160,.14),rgba(255,217,160,0) 30%,rgba(11,7,9,0) 62%,rgba(11,7,9,.34));
  box-shadow:0 0 0 1px rgba(11,7,9,.7) inset,0 1px 0 rgba(250,253,255,.34) inset}
.spiegelfach-glas img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:1px}

/* -- Das Hinterzimmer: vierte Ebene, das Licht laesst nach ------------ */
.hinterzimmer{position:relative;z-index:4;margin-top:clamp(-26px,-2.2vw,-12px);padding:clamp(38px,4.6vw,62px) clamp(16px,4vw,40px) clamp(16px,2.2vw,28px)}
.hinterzimmer-innen{max-width:880px;margin:0 auto}
.hinterzimmer-kopf{font-family:var(--grotesk);font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#c3ccd4;
  padding-bottom:.7rem;border-bottom:1px solid #3a2a2f;box-shadow:0 1px 0 rgba(198,208,216,.14)}
.hinterzimmer-reihe{margin-top:1.6rem;display:grid;gap:clamp(16px,2.6vw,26px);grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.hinterzimmer-punkt{position:relative;padding:1.05rem 1.1rem 1.15rem;border-radius:3px;
  background:linear-gradient(170deg,rgba(10,5,7,.66),rgba(26,15,19,.5));
  box-shadow:0 4px 9px -2px rgba(5,3,5,.9) inset,-4px 0 9px -2px rgba(5,3,5,.7) inset,
    0 -1px 0 rgba(206,216,224,.16) inset,1px 0 0 rgba(206,216,224,.12) inset}
.hinterzimmer-zahl{display:inline-block;min-width:2.1rem;padding:.16rem .45rem;border-radius:2px;text-align:center;
  font-family:var(--grotesk);font-size:.74rem;font-weight:700;letter-spacing:.1em;color:#120a0d;
  background:var(--plattiert-schmal);
  box-shadow:0 1px 0 rgba(248,251,253,.6) inset,0 3px 6px rgba(5,3,5,.7)}
.hinterzimmer-titel{margin-top:.6rem;font-family:var(--serif);font-size:1.12rem;line-height:1.28;color:#e9eef2}
.hinterzimmer-satz{margin-top:.42rem;font-size:.95rem;line-height:1.58;color:#c6cfd6}
.hinterzimmer-abstand{margin-top:1.5rem;padding-left:1.05rem;border-left:2px solid #6e1220;
  font-size:.97rem;line-height:1.62;color:#cfd7de;max-width:64ch}

/* -- Der Wortwechsel: fernste Ecke, wenig Kontrast in den Beschlaegen - */
.wortwechsel{position:relative;z-index:3;margin-top:clamp(-24px,-2vw,-10px);padding:clamp(38px,4.6vw,60px) clamp(16px,4vw,40px) clamp(30px,4vw,52px)}
.wortwechsel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 76% at 50% 42%,rgba(11,7,9,.5),rgba(11,7,9,.78) 62%,rgba(11,7,9,.9))}
.wortwechsel-innen{max-width:760px;margin:0 auto}
.wortwechsel-kopf{font-family:var(--grotesk);font-size:.76rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#a3adb6;text-align:center}
.wortwechsel-stueck{margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid #2a1c21}
.wortwechsel-stueck:first-of-type{border-top:0}
.wortwechsel-frage{font-family:var(--serif);font-size:1.1rem;line-height:1.3;color:#e6ebef}
.wortwechsel-wort{margin-top:.4rem;font-size:.97rem;line-height:1.62;color:#c3ccd4}

/* -- Die Samtkordel: der Blick kommt nach vorn zurueck ---------------- */
.samtkordel{position:relative;z-index:7;margin-top:clamp(-20px,-1.8vw,-8px);padding:clamp(28px,3.6vw,48px) clamp(16px,4vw,40px) clamp(30px,4vw,54px)}
.samtkordel-innen{max-width:1120px;margin:0 auto;display:grid;gap:clamp(22px,3.4vw,42px);align-items:center;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(22px,3.4vw,42px) clamp(18px,3vw,40px) clamp(24px,3.4vw,42px);
  border-radius:4px;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,217,160,.10) 0 8px,rgba(255,217,160,0) 13px),
    radial-gradient(circle at 52% 53%,rgba(6,3,5,.72) 0 4px,rgba(6,3,5,.34) 6px 15px,rgba(6,3,5,0) 32px),
    var(--pile),
    radial-gradient(120% 140% at 6% -14%,rgba(255,217,160,.17),rgba(255,214,158,.045) 28%,rgba(11,7,9,0) 58%),
    linear-gradient(163deg,#5c1220 0,#480e17 30%,#320a11 62%,#1d060a 88%,#130407 100%);
  background-size:74px 74px,74px 74px,60px 60px,auto,auto;
  background-position:-4px -4px,0 0,0 0,0 0,0 0;
  border-top:1px solid #a8323f;
  box-shadow:0 1px 0 rgba(255,217,160,.20) inset,-1px 0 0 rgba(232,237,241,.09) inset,0 28px 56px -18px rgba(5,3,5,.92)}
/* Die Kordel selbst: gedrehter Samtstrang mit vernickelter Lasche */
.samtkordel::before{content:"";position:absolute;left:0;right:0;top:clamp(10px,2vw,22px);height:16px;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,#eef4f8 0,#9ba6af 12px,#4c565e 20px,rgba(0,0,0,0) 24px),
    linear-gradient(270deg,#eef4f8 0,#9ba6af 12px,#4c565e 20px,rgba(0,0,0,0) 24px),
    repeating-linear-gradient(115deg,rgba(255,217,160,.22) 0 2px,rgba(11,7,9,.34) 2px 7px,rgba(255,217,160,.08) 7px 11px),
    linear-gradient(180deg,#a8323f 0,#8f1a24 26%,#5a1019 62%,#2c0a10 100%);
  border-radius:7px;
  box-shadow:0 1px 0 rgba(255,217,160,.34) inset,0 6px 14px -4px rgba(5,3,5,.9)}
.samtkordel-kopf{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.18;letter-spacing:-.012em;color:#f1f5f8;
  text-shadow:0 2px 6px rgba(5,3,5,.85)}
.samtkordel-lauf{margin-top:.7rem;color:#e2e8ee;font-size:1rem;max-width:52ch}
.samtkordel-stueck{margin:0;position:relative;padding:9px;border-radius:3px;
  background:
    radial-gradient(120% 90% at 8% 4%,rgba(255,217,160,.2),rgba(255,217,160,0) 44%),
    linear-gradient(163deg,#d3dce2 0,#828c95 15%,#4f5961 38%,#98a3ac 62%,#5f6971 82%,#4a0f18 100%);
  box-shadow:0 1px 0 rgba(250,253,255,.8) inset,1px 0 0 rgba(250,253,255,.4) inset,0 -2px 8px rgba(74,15,24,.55) inset,0 22px 44px -16px rgba(5,3,5,.9)}
.samtkordel-stueck img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:1px}

/* -- Sockelleiste ----------------------------------------------------- */
.sockelleiste{position:relative;z-index:8;
  background:linear-gradient(180deg,#1d1116 0,#150c10 24%,#0d080a 70%,#080506 100%);
  border-top:1px solid #4a2a33;
  box-shadow:0 1px 0 rgba(232,237,241,.14) inset,0 -18px 34px -18px rgba(5,3,5,.9)}
.sockelleiste-innen{max-width:1080px;margin:0 auto;padding:clamp(26px,4vw,44px) clamp(16px,4vw,40px) clamp(30px,4vw,48px)}
.sockelleiste-oben{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:1.05rem;border-bottom:1px solid #2c1c22;box-shadow:0 1px 0 rgba(198,208,216,.1)}
.sockelleiste-marke{font-family:var(--grotesk);font-size:.84rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e2e8ee}
.sockelleiste-volljahr{font-family:var(--grotesk);font-size:.7rem;font-weight:700;letter-spacing:.1em;padding:.24rem .55rem;border-radius:2px;color:#120a0d;
  background:var(--plattiert-schmal);box-shadow:0 1px 0 rgba(248,251,253,.6) inset,0 3px 5px rgba(5,3,5,.7)}
.sockelleiste-wege{margin-left:auto;display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap}
.sockelleiste-wege a{font-family:var(--grotesk);font-size:.82rem;color:#cdd6dd;text-decoration:none;border-bottom:1px solid #5b656d;padding-bottom:1px}
.sockelleiste-wege a:hover{color:#f2f7fa;border-bottom-color:#c3ccd4}
.sockelleiste-satz{margin-top:1rem;font-size:.87rem;line-height:1.62;color:#bcc6ce;max-width:88ch}
.sockelleiste-hilfe{margin-top:1rem;padding:.7rem .95rem;border-radius:3px;font-size:.88rem;line-height:1.55;color:#eaf0f4;
  background:linear-gradient(170deg,rgba(74,15,24,.62),rgba(28,16,19,.62));border:1px solid #6e1220;
  box-shadow:0 1px 0 rgba(232,237,241,.18) inset}
.sockelleiste-fein{margin-top:1rem;font-family:var(--grotesk);font-size:.76rem;color:#9aa4ad}

/* -- Breitere Raeume -------------------------------------------------- */
@media (min-width:700px){body{font-size:17.5px}}
@media (min-width:1000px){
  .spiegelfach-innen{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
  .samtkordel-innen{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
  .samtkordel-stueck{order:2}
  .samtkordel-wort{order:1}
}
/* Schmaler Raum: der Automat tritt hinter den Tisch zurueck, nach unten. */
@media (max-width:699px){
  .spieltisch{display:flex;flex-direction:column}
  .spieltisch-platte{order:1;margin:clamp(58px,15vw,96px) clamp(12px,4vw,26px) 0 0}
  .spieltisch-stueck{order:2;position:relative;right:auto;top:auto;width:min(74vw,330px);
    margin:clamp(-30px,-5vw,-18px) clamp(8px,3vw,20px) 0 auto;z-index:1;
    -webkit-mask-image:linear-gradient(198deg,#000 56%,rgba(0,0,0,.4) 82%,transparent 97%);
    mask-image:linear-gradient(198deg,#000 56%,rgba(0,0,0,.4) 82%,transparent 97%)}
  .hausliste-hebel{width:100%}
  .nickelschild-posten + .nickelschild-posten{border-left:0;box-shadow:none;border-top:1px solid rgba(28,16,19,.3);padding-top:.9rem}
  .kaminsims-signum{font-size:.7rem;letter-spacing:.13em}
  .gaslampe--saal{top:34px;left:-150px}
}
@media (max-width:400px){
  body{font-size:16.5px}
  .kaminsims-innen{gap:10px}
  .kaminsims-signum{flex:1 1 100%;order:3;margin-right:0}
}

/* -- Bewegung: nur transform/opacity, eintrittsbegrenzt, ohne Beobachter -- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .nickelschild-innen,.spiegelfach-wort,.spiegelfach-glas,.hinterzimmer-punkt{
      animation:heben both linear;
      animation-timeline:view();
      animation-range:entry 4% entry 74%}
  }
}
@keyframes heben{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}