/* casinova-deutsch.com — Nussbaum, Messing und Bernsteinlicht auf tiefem Petrol */

:root{
  --tief:#06201F;
  --wand:#0A2C2A;
  --saal:#0E3634;
  --nuss-tief:#25150C;
  --nuss:#432917;
  --nuss-hell:#7A4C2B;
  --messing-tief:#4A3A18;
  --messing-stumpf:#7C6230;
  --messing:#B08B45;
  --messing-hell:#E3BE79;
  --bernstein:#F2C579;
  --kalk:#F4E9D8;
  --kalk-matt:#CDBDA5;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Liberation Sans",Arial,sans-serif;
  --breite:1180px;
  --rand:clamp(16px,4vw,40px);
  --zh:26px;
  --h1h:clamp(112px,26vw,200px);

  /* Messingverlauf, abgeleitet aus der Wortmarke: 3D3D3D 707070 ABABAC C5C5C5 E5E6E6 F7F7F7 FFFFFF */
  --messingflaeche:linear-gradient(101deg,#A97F36 0%,#BE944C 15%,#D3AD64 36%,#E5C07B 58%,#F3D79E 78%,#FFEFC9 100%);
  /* Nussbaummaserung: kleine, gekachelte Verlaufsschichten, kein Filter */
  --maser:
    repeating-linear-gradient(91.4deg,rgba(0,0,0,.26) 0 1px,rgba(255,224,178,.055) 1px 2px,rgba(0,0,0,.11) 2px 5px,rgba(0,0,0,0) 5px 11px),
    repeating-linear-gradient(88.6deg,rgba(0,0,0,.17) 0 1px,rgba(0,0,0,0) 1px 7px),
    repeating-linear-gradient(90deg,rgba(255,206,150,.055) 0 1px,rgba(0,0,0,0) 1px 23px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0 3px,rgba(0,0,0,0) 3px 37px);
  --maser-quer:
    repeating-linear-gradient(1.2deg,rgba(0,0,0,.26) 0 1px,rgba(255,225,180,.06) 1px 2px,rgba(0,0,0,.12) 2px 4px,rgba(0,0,0,0) 4px 9px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--schrift);
  font-size:clamp(15px,.42vw + 13.6px,17px);
  line-height:1.6;
  color:var(--kalk);
  background:var(--tief);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2{margin:0;font-weight:400}
p,dl,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}

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

.uebersprung{
  position:absolute;left:12px;top:-140px;z-index:9;
  background:var(--nuss-tief);color:var(--bernstein);
  padding:12px 18px;border:2px solid var(--messing);text-decoration:none;
}
.uebersprung:focus{top:12px}

:is(a,button,input,[tabindex]):focus-visible{
  outline:3px solid var(--bernstein);
  outline-offset:3px;
}

/* Gezeichnete Lettern */
.zug{
  display:block;
  width:min(100%,calc(var(--zh) * var(--r)));
  height:auto;
  fill:none;
  stroke:currentColor;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--bernstein);
}

/* ——— Dachfirst ——— */
.dachfirst{
  background:linear-gradient(180deg,#1D110A,#2C1B10 62%,#160D07);
  background-image:var(--maser),linear-gradient(180deg,#2E1C11,#1A0F08);
  border-bottom:2px solid var(--messing-stumpf);
}
.dachfirst-innen{
  max-width:var(--breite);margin:0 auto;padding:clamp(14px,2vw,22px) var(--rand);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2.4vw,30px);
}
.dachfirst-marke{
  width:clamp(196px,26vw,340px);height:auto;
  filter:drop-shadow(-8px 4px 12px rgba(0,0,0,.6));
}
.dachfirst-sinn{
  flex:1 1 240px;min-width:200px;
  font-size:clamp(11.5px,1vw,13.5px);line-height:1.45;color:var(--kalk-matt);
  letter-spacing:.02em;
}
.dachfirst-alter{
  flex:none;font-size:13px;font-weight:700;letter-spacing:.06em;color:#201302;
  background:var(--messingflaeche);
  padding:5px 11px;border-radius:2px;
}

/* ——— EG · Foyer ——— */
.foyer{
  position:relative;
  padding:clamp(20px,3vw,40px) 0 clamp(22px,3vw,42px);
  background:
    radial-gradient(120% 90% at 4% 12%,rgba(242,197,121,.20) 0%,rgba(242,197,121,.06) 34%,rgba(0,0,0,0) 66%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.24) 0 2px,rgba(0,0,0,0) 2px 148px),
    linear-gradient(178deg,var(--saal),var(--tief) 78%);
}
.foyer-innen{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:grid;gap:clamp(20px,3vw,40px);align-items:center;
}
.foyer-etikett{
  display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--kalk-matt);
  margin-bottom:clamp(8px,1.2vw,14px);
}
.foyer-stock{
  font-weight:700;color:#201302;background:var(--messingflaeche);
  padding:3px 9px;letter-spacing:.1em;border-radius:2px;
}
.foyer-zug{
  width:min(100%,calc(var(--h1h) * var(--r)));
  stroke-width:7;
  color:var(--bernstein);
  filter:drop-shadow(-3px 3px 0 rgba(0,0,0,.45));
}
.foyer-lauf{
  margin-top:clamp(10px,1.6vw,18px);
  max-width:52ch;font-size:clamp(14px,.5vw + 12.6px,17px);color:var(--kalk);
}

/* Messingschild mit den beiden Zahlen */
.anschlag{
  margin-top:clamp(14px,2vw,24px);
  padding:clamp(12px,1.6vw,18px) clamp(13px,1.8vw,22px);
  background-image:var(--maser),linear-gradient(168deg,#54341D,#2A190E);
  border:1px solid #6B4728;
  border-left:4px solid var(--messing);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.9);
}
.anschlag-marke{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--messing-hell);
}
.anschlag-liste{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,42px);margin-top:8px}
.anschlag-posten{display:flex;flex-direction:column-reverse;gap:1px}
.anschlag-ziffer{
  margin:0;
  font-size:clamp(30px,4.6vw,50px);line-height:1.02;font-weight:700;letter-spacing:-.01em;
  color:var(--bernstein);
}
.anschlag-wort{
  font-size:clamp(11.5px,1vw,13px);letter-spacing:.13em;text-transform:uppercase;color:var(--kalk-matt);
}
.anschlag-fein{margin-top:9px;font-size:12px;line-height:1.45;color:var(--kalk-matt)}

/* Rohrpost: das Formular */
.rohrpost{margin-top:clamp(14px,2vw,22px)}
.rohrpost-marke{
  display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kalk-matt);margin-bottom:7px;
}
.rohrpost-zeile{display:flex;flex-wrap:wrap;gap:9px}
.rohrpost-feld{
  flex:1 1 190px;min-width:0;
  font:inherit;font-size:16px;color:var(--kalk);
  background:#031715;
  border:1px solid #37604F;
  border-bottom-color:#0B3A32;
  padding:12px 14px;border-radius:2px;
}
.rohrpost-feld::placeholder{color:#8FA69C;opacity:1}
.rohrpost-hebel{
  flex:0 0 auto;
  font:inherit;font-weight:700;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  color:#201302;
  background:var(--messingflaeche);
  border:1px solid #7C6230;border-radius:2px;
  padding:12px 22px;cursor:pointer;
}
.rohrpost-hebel:hover{filter:brightness(1.08)}
.rohrpost-ruege{
  margin-top:8px;font-size:13.5px;color:#FFC0AE;
  border-left:3px solid #C4523A;padding-left:9px;
}
.rohrpost-quittung{
  margin-top:9px;display:flex;gap:9px;align-items:flex-start;
  font-size:14px;color:var(--kalk);
  background:rgba(176,139,69,.14);border:1px solid #6B5327;
  padding:9px 11px;border-radius:2px;
}
.rohrpost-quittung-kopf{font-weight:700;color:var(--bernstein)}
.rohrpost-haken{
  flex:none;width:19px;height:19px;margin-top:2px;
  fill:none;stroke:var(--bernstein);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.rohrpost-fein{margin-top:9px;font-size:12px;color:var(--kalk-matt)}

.foyer-schau{margin:0}
.foyer-bild{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  border:1px solid #5E3D22;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.95);
  filter:brightness(1.1) saturate(1.04);
}
.foyer-fuss{margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--kalk-matt)}

/* ——— Etagenverzeichnis ——— */
.tafelwerk{
  position:relative;
  padding:clamp(24px,3vw,40px) 0 clamp(24px,3vw,40px);
  background:
    radial-gradient(90% 120% at 2% 6%,rgba(242,197,121,.13),rgba(0,0,0,0) 58%),
    linear-gradient(180deg,#0B2A28,#071F1E);
}
.tafelwerk::before,.geschoss::before,.poststelle::before,.briefschlitz::before,.belohnung::before,.empfang::before{
  content:"";position:absolute;left:0;right:0;top:0;height:15px;
  background:
    var(--maser-quer),
    linear-gradient(180deg,#F6DCA8 0 2px,#B08B45 2px 3.5px,#8A5731 3.5px 7px,#4A2C18 7px 11px,#1B1009 11px 100%);
  box-shadow:0 12px 24px -10px rgba(0,0,0,.85);
}
.tafelwerk-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.tafelwerk-kopf{margin-bottom:clamp(14px,1.6vw,18px)}
.tafelwerk-lauf{margin-top:11px;max-width:62ch;color:var(--kalk-matt);font-size:clamp(13.5px,.4vw + 12.4px,15.5px)}
.tafelwerk-liste{
  background-image:var(--maser),linear-gradient(172deg,#4E3019,#26160C);
  border:1px solid #6B4728;
  box-shadow:0 20px 40px -26px rgba(0,0,0,.95);
}
.tafelwerk-reihe + .tafelwerk-reihe{border-top:1px solid rgba(176,139,69,.32)}
.tafelwerk-weg{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:4px 14px;
  align-items:baseline;
  padding:clamp(9px,1.05vw,13px) clamp(12px,1.6vw,20px);
  text-decoration:none;
}
.tafelwerk-weg:hover{background:rgba(242,197,121,.09)}
.tafelwerk-ziffer{
  grid-row:span 2;align-self:center;
  display:grid;place-items:center;
  min-height:38px;
  font-size:16px;font-weight:700;letter-spacing:.04em;color:#201302;
  background:var(--messingflaeche);border-radius:2px;
}
.tafelwerk-name{
  font-size:clamp(16px,1.3vw,21px);font-weight:700;letter-spacing:.03em;color:var(--bernstein);
}
.tafelwerk-sache{font-size:clamp(12.5px,.9vw,14.5px);color:var(--kalk-matt)}

/* ——— Etagen ——— */
.geschoss{
  position:relative;
  padding:clamp(20px,2.5vw,31px) 0 clamp(20px,2.5vw,31px);
  background:
    radial-gradient(80% 110% at 3% 10%,rgba(242,197,121,.12),rgba(0,0,0,0) 56%),
    linear-gradient(180deg,#0C302E,#082422);
}
.geschoss-kehr{background:
    radial-gradient(80% 110% at 3% 10%,rgba(242,197,121,.10),rgba(0,0,0,0) 54%),
    linear-gradient(180deg,#071F1E,#0A2A28);
}
.geschoss-innen{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:grid;gap:clamp(18px,2.6vw,38px);align-items:center;
}
.geschoss-ziffer{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--kalk-matt);
  margin-bottom:10px;
}
.geschoss-ziffer span{
  font-size:15px;font-weight:700;letter-spacing:.02em;color:#201302;
  background:var(--messingflaeche);padding:3px 10px;border-radius:2px;
}
.geschoss-lauf{margin-top:12px;max-width:50ch;color:var(--kalk);font-size:clamp(14px,.4vw + 12.9px,16px)}
.geschoss-liste{margin-top:14px;border-top:1px solid rgba(176,139,69,.34)}
.geschoss-punkt{
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid rgba(176,139,69,.2);
  font-size:clamp(13.5px,.9vw,15px);color:var(--kalk);
}
.geschoss-schild{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--messing-hell);border:1px solid rgba(176,139,69,.55);
  padding:2px 7px;border-radius:2px;
}
.geschoss-schau{margin:0}
.geschoss-bild{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  border:1px solid #5E3D22;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.95);
  filter:brightness(1.12) saturate(1.05);
}
.geschoss-hoch .geschoss-bild{aspect-ratio:2/3;max-width:364px}

/* ——— DG · Belohnungen ——— */
.belohnung{
  position:relative;
  padding:clamp(22px,2.8vw,36px) 0;
  background:
    radial-gradient(70% 130% at 4% 4%,rgba(242,197,121,.16),rgba(0,0,0,0) 55%),
    linear-gradient(180deg,#123A37,#0B2B29);
}
.belohnung-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.belohnung-lauf{margin-top:12px;max-width:62ch;color:var(--kalk);font-size:clamp(14px,.4vw + 12.9px,16px)}
.belohnung-liste{
  margin-top:clamp(14px,2vw,22px);
  display:grid;gap:clamp(10px,1.6vw,18px);
}
.belohnung-punkt{
  display:flex;flex-direction:column;gap:5px;
  padding:clamp(12px,1.6vw,18px);
  background-image:var(--maser),linear-gradient(165deg,#4E3019,#28170D);
  border:1px solid #6B4728;border-top:3px solid var(--messing);
}
.belohnung-name{font-size:clamp(15px,1.2vw,19px);font-weight:700;color:var(--bernstein);letter-spacing:.02em}
.belohnung-satz{font-size:13.5px;color:var(--kalk-matt)}

/* ——— UG · Poststelle ——— */
.poststelle{
  position:relative;
  padding:clamp(24px,3vw,40px) 0;
  background:linear-gradient(180deg,#071F1E,#05191A);
}
.poststelle-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.poststelle-kopf{margin-bottom:clamp(14px,2vw,22px)}
.poststelle-lauf{margin-top:11px;color:var(--kalk-matt);font-size:15px}
.poststelle-liste{display:grid;gap:clamp(10px,1.6vw,18px)}
.poststelle-schritt{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:3px 14px;align-items:baseline;
  padding:clamp(11px,1.4vw,15px) clamp(12px,1.6vw,18px);
  background:rgba(176,139,69,.08);
  border:1px solid rgba(176,139,69,.3);
  border-left:3px solid var(--messing);
}
.poststelle-ziffer{
  grid-row:span 2;align-self:center;
  display:grid;place-items:center;min-height:34px;
  font-size:16px;font-weight:700;color:#201302;
  background:var(--messingflaeche);border-radius:2px;
}
.poststelle-name{font-size:clamp(15px,1.1vw,18px);font-weight:700;color:var(--bernstein);letter-spacing:.03em}
.poststelle-satz{font-size:14px;color:var(--kalk)}

/* ——— Fragen am Empfang ——— */
.empfang{
  position:relative;
  padding:clamp(24px,3vw,40px) 0;
  background:
    radial-gradient(70% 120% at 3% 8%,rgba(242,197,121,.10),rgba(0,0,0,0) 55%),
    linear-gradient(180deg,#0C302E,#0A2725);
}
.empfang-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.empfang-liste{
  margin-top:clamp(16px,2vw,24px);
  display:grid;gap:clamp(12px,1.8vw,20px);
}
.empfang-stueck{
  padding-left:14px;border-left:3px solid var(--messing);
}
.empfang-frage{font-size:clamp(15px,1.1vw,18px);font-weight:700;color:var(--bernstein)}
.empfang-antwort{margin:5px 0 0;font-size:clamp(13.5px,.9vw,15.5px);color:var(--kalk)}

/* ——— Hausbriefkasten ——— */
.briefschlitz{
  position:relative;
  padding:clamp(24px,3vw,40px) 0;
  background:
    radial-gradient(80% 120% at 4% 10%,rgba(242,197,121,.16),rgba(0,0,0,0) 58%),
    linear-gradient(180deg,#13403C,#0A2A28);
}
.briefschlitz-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.briefschlitz-satz,.rohrpost-unten{max-width:660px}
.briefschlitz-satz{margin-top:12px;color:var(--kalk);font-size:clamp(14px,.4vw + 12.9px,16.5px)}
.rohrpost-unten{margin-top:clamp(14px,2vw,22px)}

/* ——— Kellersohle ——— */
.kellersohle{
  background-image:var(--maser),linear-gradient(180deg,#2C1B10,#150C06);
  border-top:2px solid var(--messing-stumpf);
  padding:clamp(22px,2.6vw,34px) 0 clamp(18px,2.2vw,28px);
}
.kellersohle-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.kellersohle-oben{display:grid;gap:10px}
.kellersohle-marke{
  display:flex;align-items:center;gap:11px;
  font-size:clamp(16px,1.3vw,20px);font-weight:700;letter-spacing:.06em;color:var(--bernstein);
}
.kellersohle-alter{
  font-size:12px;letter-spacing:.06em;color:#201302;
  background:var(--messingflaeche);padding:3px 9px;border-radius:2px;
}
.kellersohle-satz{font-size:13.5px;line-height:1.55;color:var(--kalk-matt);max-width:76ch}
.kellersohle-hilfe{
  margin-top:14px;padding:11px 13px;
  font-size:13.5px;line-height:1.55;color:var(--kalk);
  background:rgba(6,32,31,.66);border:1px solid rgba(176,139,69,.4);
}
.kellersohle-ruf{color:var(--bernstein);white-space:nowrap}
.kellersohle-wege{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:13.5px;
}
.kellersohle-wege a{color:var(--bernstein);text-underline-offset:3px}
.kellersohle-fein{margin-top:12px;font-size:12px;color:var(--kalk-matt)}

/* ——— Raster ab Tablet/Desktop ——— */
@media (min-width:620px){
  :root{--zh:34px;--h1h:min(20vw,26vh)}
  .belohnung-liste{grid-template-columns:1fr 1fr}
  .poststelle-liste{grid-template-columns:repeat(3,1fr)}
  .empfang-liste{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  :root{--zh:44px;--h1h:clamp(96px,min(11.5vw,21vh),190px)}
  .foyer-innen{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  .geschoss-innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .geschoss-kehr .geschoss-spalte{order:2}
  .geschoss-hoch .geschoss-innen{grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr)}
  .geschoss-hoch .geschoss-schau{justify-self:center}
  .tafelwerk-weg{grid-template-columns:66px minmax(0,.82fr) minmax(0,1.5fr);gap:0 20px;align-items:center}
  .tafelwerk-ziffer{grid-row:auto}
  .kellersohle-oben{grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
}
@media (min-width:1280px){
  :root{--zh:48px}
}

/* ——— Flache Fenster: Foyer zusammenziehen, damit Zahlen und Feld oben bleiben ——— */
@media (max-height:800px){
  :root{--h1h:clamp(96px,min(10.2vw,20vh),152px)}
  .dachfirst-innen{padding-top:11px;padding-bottom:11px}
  .dachfirst-marke{width:clamp(168px,20vw,252px)}
  .foyer{padding-top:clamp(14px,2vw,26px)}
  .foyer-lauf{margin-top:10px}
  .anschlag{margin-top:12px}
  .rohrpost{margin-top:13px}
}
@media (max-width:430px){
  .rohrpost-zeile{flex-wrap:nowrap}
  .rohrpost-feld{flex:1 1 auto}
  .rohrpost-hebel{padding:12px 13px;font-size:13px;letter-spacing:.05em}
}
@media (max-height:700px) and (max-width:620px){
  .foyer-etikett{margin-bottom:6px}
  .anschlag{padding:10px 12px}
  .anschlag-fein{margin-top:6px;font-size:11.5px}
  .rohrpost-fein{margin-top:7px}
  .foyer-lauf{font-size:13.5px}
}

/* ——— Bewegung ——— */
@keyframes heben{from{opacity:.2;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tafelwerk-reihe,.geschoss-spalte,.geschoss-schau,.belohnung-punkt,.poststelle-schritt{
      animation:heben linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 52%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}