/* Leiselicht. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, Fensterscheiben und die Bühnen.
   Eine Grau-Familie (kühles Nachtschiefer), ein Akzent (Fensterlicht). */
:root {
  --sc-canvas:     #0B1019;
  --sc-surface:    #121923;
  --sc-ink:        #E3E5E8;
  --sc-ink-soft:   #A7AEBA;
  --sc-accent:     #D9A25E;
  --sc-accent-ink: #1C140B;
  --sc-font-display: "Petrona", Georgia, serif;
  --sc-font-text:    "Commissioner", system-ui, sans-serif;
  --sc-font-mono:    "Commissioner", system-ui, sans-serif;
  --sc-shadow-color: 218 45% 3%;

  /* Fensterlicht: hell (Scheibe an) und gedimmt (Scheibe fast aus) */
  --licht-hell:  #D9A866;
  --licht-tief:  #C08848;
  --licht-ink:   #22180D;
  --licht-soft:  #4A3520;
  --glimm:       #1B1611;
  --glimm-ink:   #EAD3AC;
  --glimm-soft:  #C7AE88;
  --rahmen:      #0E141C;
  --rahmen-kante:#1C2531;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #2A3342 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); line-height: 1.66; letter-spacing: .008em; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
input, select { caret-color: var(--sc-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Die Hausfront ---------- */
.fassade {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
main { position: relative; z-index: 2; }
.sc-grain { z-index: 1; opacity: .05; }
.buehne { background: transparent; }

/* ---------- Schrift ---------- */
.titel {
  font-family: var(--sc-font-display);
  font-weight: 500; line-height: 1.04; letter-spacing: -0.015em;
  text-wrap: balance; margin: 0;
}
.titel--xl { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); font-weight: 450; }
.titel--lg { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.1rem); }
.titel--md { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem); line-height: 1.12; }
.titel b { font-weight: 600; font-variant-numeric: tabular-nums; }
.text { margin: 0; font-size: clamp(1rem, .96rem + .22vw, 1.13rem); line-height: 1.62; max-width: 46ch; text-wrap: pretty; }
.text--klein { font-size: .9rem; }
.scheibe .titel + .text, .scheibe .text + .text { margin-top: .85rem; }
@media (max-width: 700px) {
  .titel--xl { font-size: clamp(2rem, 1.2rem + 4.4vw, 2.6rem); }
  .titel--lg { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.05rem); }
}

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px var(--sc-gutter);
  background: linear-gradient(color-mix(in oklab, var(--sc-canvas) 82%, transparent), transparent);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.wortmarke {
  font: 500 23px/1.2 var(--sc-font-display); letter-spacing: -.01em;
  color: var(--sc-ink); text-decoration: none; padding-top: 6px;
}
.wortmarke i { font-style: italic; color: var(--sc-accent); font-weight: 400; }

/* Die Uhr ist die Navigation: sie zeigt die Uhrzeit aus dem Scrollweg und
   klappt die sechs Zeiten als Sprungziele auf. */
.uhr details { position: relative; }
.uhr summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 2px 6px 12px; min-height: 44px;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  transition: border-color 160ms var(--sc-ease-out);
}
.uhr summary::-webkit-details-marker { display: none; }
.uhr__zeit {
  font: 400 30px/1 var(--sc-font-display); font-variant-numeric: tabular-nums lining-nums;
  color: var(--sc-accent); letter-spacing: .01em; min-width: 3.1ch; text-align: right;
}
.uhr__wort { font-size: .85rem; color: var(--sc-ink-soft); letter-spacing: .04em; }
@media (hover: hover) and (pointer: fine) { .uhr summary:hover { border-color: var(--sc-accent); } }
.uhr__liste {
  position: absolute; right: 0; top: calc(100% + 10px);
  margin: 0; padding: 10px 0; list-style: none; min-width: 15rem;
  background: var(--sc-surface);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.uhr__liste a {
  display: flex; gap: 14px; align-items: baseline; padding: 9px 18px;
  color: var(--sc-ink); text-decoration: none; font-size: .95rem;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.uhr__liste b { font: 500 1rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); min-width: 3.2ch; text-align: right; }
.uhr__liste a.ist-hier b, .uhr__liste a.ist-hier { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .uhr__liste a:hover { background: #18212D; } }

/* ---------- Fensterscheiben: Text steht nur hier ---------- */
.scheibe {
  position: relative; isolation: isolate;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  color: var(--licht-ink);
  background-color: var(--licht-tief);
  background-image:
    radial-gradient(120% 90% at 18% 12%, rgb(255 236 200 / .32), transparent 60%),
    linear-gradient(170deg, var(--licht-hell), var(--licht-tief));
  border: 10px solid var(--rahmen);
  outline: 1px solid var(--rahmen-kante); outline-offset: 0;
  box-shadow: 0 18px 30px -12px hsl(var(--sc-shadow-color) / .7);
}
/* Vorhangfalten in der Scheibe, dazu ein langsam wanderndes Lampenlicht */
.scheibe::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgb(255 244 222 / .07) 0 2px, transparent 2px 9px, rgb(60 36 12 / .05) 9px 12px, transparent 12px 26px);
  mask-image: linear-gradient(90deg, #000 0 14%, transparent 34% 70%, #000 92%);
}
.scheibe::after { /* der Sims unter jedem Fenster */
  content: ""; position: absolute; left: -18px; right: -18px; bottom: -22px; height: 9px;
  background: var(--rahmen-kante); box-shadow: 0 6px 10px -4px hsl(var(--sc-shadow-color) / .8);
}
.scheibe .text { color: var(--licht-ink); }
.scheibe--dunkel {
  color: var(--glimm-ink);
  background-color: var(--glimm);
  background-image:
    radial-gradient(90% 80% at 85% 100%, rgb(217 162 94 / .13), transparent 65%),
    linear-gradient(170deg, #1F1913, var(--glimm));
  box-shadow: 0 18px 30px -12px hsl(var(--sc-shadow-color) / .7);
}
.scheibe--dunkel::before { background: repeating-linear-gradient(90deg, rgb(234 211 172 / .035) 0 2px, transparent 2px 14px); }
.scheibe--dunkel .text { color: var(--glimm-soft); }
.scheibe--dunkel .titel b { color: var(--sc-accent); }
@media (prefers-reduced-motion: no-preference) {
  .scheibe:not(.scheibe--dunkel) { background-size: 150% 150%, 100% 100%; animation: lampe 14s var(--sc-ease-in-out) infinite alternate; }
}
@keyframes lampe {
  from { background-position: 0% 0%, 0 0; }
  to   { background-position: 30% 20%, 0 0; }
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 2px;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: #F1E4CF; background: #1C2532; border: 1px solid #2C3747;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: #243042; } }
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent);
}
.knopf--voll::before { /* feines Mosaik, ein sehr langsamer Lichtstreif */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 38%, rgb(255 240 214 / .28) 50%, transparent 62%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(40 24 6 / .07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(40 24 6 / .07) 0 1px, transparent 1px 6px);
}
@media (prefers-reduced-motion: no-preference) { .knopf--voll::before { animation: streif 9s var(--sc-ease-in-out) infinite; } }
@keyframes streif { 0%, 70% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background: #E2AE6C; } }

/* ---------- 1 Abend ---------- */
.scheibe--held {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6.5rem);
  width: min(41rem, calc(100% - 2 * var(--sc-gutter)));
}
.scheibe--held h1 { max-width: 13ch; }
.held__text { margin-top: 1rem; max-width: 40ch; }
.scheibe--held .knopf { margin-top: 1.6rem; }

/* ---------- 2 Zuhören ---------- */
.zuhoeren { padding-top: clamp(2rem, 6vh, 4rem); }
.zuhoeren__raster {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.4rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.scheibe--a { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.scheibe--b { grid-column: 8 / span 5; margin-top: 18vh; }
.scheibe--c { grid-column: 7 / span 5; }
@media (max-width: 860px) {
  .zuhoeren__raster { grid-template-columns: 1fr; }
  .scheibe--a, .scheibe--b, .scheibe--c { grid-column: auto; grid-row: auto; margin-top: 0; }
  .scheibe--b { margin-left: 8%; }
  .scheibe--c { margin-right: 8%; }
}

/* ---------- 3 Heute im Haus ---------- */
.reihe {
  height: 100%; align-items: center; gap: clamp(2.2rem, 4vw, 4rem);
  padding: 5.5rem var(--sc-gutter) 2.5rem; width: max-content;
}
.reihe > .scheibe { flex: 0 0 auto; width: clamp(16.5rem, 24vw, 21rem); min-height: clamp(19rem, 46vh, 25rem); display: flex; flex-direction: column; }
.reihe > .scheibe--kopf { width: clamp(18rem, 32vw, 28rem); }
.reihe > .scheibe--schluss { justify-content: center; }
.geschichte .text { margin-top: .8rem; color: var(--licht-ink); }
.geschichte__daten {
  margin: auto 0 0; padding-top: 1.2rem; font-size: .9rem; font-weight: 500; color: var(--licht-ink);
  border-top: 1px solid rgb(34 24 13 / .22); font-variant-numeric: tabular-nums;
}
.geschichte:nth-child(odd) { transform: translateY(-3vh); }
@media (max-width: 700px) {
  .reihe > .scheibe { width: 76vw; min-height: 0; }
  .reihe > .scheibe--kopf { width: 80vw; }
  .geschichte:nth-child(odd) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .geschichte:nth-child(odd) { transform: none; }
}

/* ---------- 4 Leiser ---------- */
.leiser { padding-block: clamp(4rem, 14vh, 10rem) clamp(5rem, 22vh, 14rem); }
.scheibe--leise { width: min(44rem, 100%); margin-left: auto; margin-right: clamp(0rem, 6vw, 6rem); }

/* ---------- 5 Ein Fenster (Höhepunkt) ---------- */
.zimmer { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; background: #05070B; }
.zimmer picture, .zimmer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.zimmer__aus { opacity: 0; }
.scheibe--zaehler { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); top: clamp(6rem, 18vh, 10rem); padding: 1.1rem 1.6rem; }
.scheibe--zimmertext {
  position: absolute; z-index: var(--sc-z-copy);
  right: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem); width: min(26rem, calc(100% - 2 * var(--sc-gutter)));
}
.scheibe--gute-nacht { position: absolute; z-index: var(--sc-z-copy); left: 50%; bottom: clamp(3rem, 12vh, 7rem); translate: -50% 0; padding: 1rem 2.2rem; white-space: nowrap; }
@media (max-width: 760px) {
  .scheibe--zimmertext { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
}

/* ---------- 6 Dein Fenster ---------- */
.schluss {
  position: relative; z-index: 3;
  background: linear-gradient(#070A0F 0, #0A0E15 100%);
  padding-top: clamp(3.5rem, 7vh, 5rem); padding-bottom: 0;
}
.schluss__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2.5rem, 6vw, 7rem); align-items: start;
}
.schluss__text { margin-top: 2rem; }
.schluss__text .text { color: var(--sc-ink-soft); max-width: 40ch; }
.schluss__text .titel { color: var(--sc-ink); max-width: 14ch; }

.klingel {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem;
  padding: 1.3rem; background: #111821;
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.klingel > * { grid-column: 1 / -1; }
.klingel > .feld--halb { grid-column: auto; }
.etage { width: 100%; height: auto; max-height: 120px; }
.etage__zeit { font: 500 13px var(--sc-font-text); fill: #9AA3B0; letter-spacing: .04em; }

/* Das Klingelbrett: gebürstetes Metall, Schilder in Fassungen, ein Knopf je Partei */
.brett {
  display: grid; gap: 7px; padding: 14px;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #2A323D, #1A2029);
  border: 1px solid #36404D; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 6px 14px -6px hsl(var(--sc-shadow-color) / .8);
}
.brett__zeile { display: flex; align-items: center; gap: 12px; }
.brett__zeile span {
  flex: 1; padding: 6px 12px; min-height: 32px; display: flex; align-items: center;
  font: 500 .95rem/1.2 var(--sc-font-text); letter-spacing: .06em; color: #2B2620;
  background: #C9C3B6; box-shadow: inset 0 1px 2px rgb(0 0 0 / .35);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.brett__zeile i {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #59636F, #2A313B 70%);
  box-shadow: inset 0 0 0 2px #1A2029, 0 1px 0 rgb(255 255 255 / .06);
}
.brett__zeile--du span { background: #E3C48F; color: #2A1D0E; font-family: var(--sc-font-display); font-style: italic; font-size: 1.05rem; letter-spacing: .02em; }
.brett__zeile--du span.ist-leer { color: #574229; }
.brett__zeile--du i { background: radial-gradient(circle at 40% 35%, #F0C987, #B98544 70%); }

.feld { display: grid; gap: 6px; }
.feld label { font-size: .9rem; font-weight: 500; color: var(--sc-ink); }
.feld small { font-size: .82rem; color: var(--sc-ink-soft); }
.feld input, .feld select {
  min-height: 46px; padding: 0 12px; border-radius: 2px;
  background: #0B1018; border: 1px solid #344052; color: var(--sc-ink);
  transition: border-color 160ms var(--sc-ease-out);
}
.feld input:focus, .feld select:focus { border-color: var(--sc-accent); outline: none; box-shadow: 0 0 0 2px rgb(217 162 94 / .35); }
.klingel .knopf { width: 100%; margin-top: .3rem; }
.klingel__hinweis { margin: 0; font-size: .86rem; color: var(--sc-ink-soft); }
.klingel.ist-vorgemerkt .klingel__hinweis { color: var(--glimm-ink); }

.fuss {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline; justify-content: space-between;
  margin-top: clamp(2.5rem, 6vh, 4rem); padding: 1.4rem var(--sc-gutter) 1.6rem;
  border-top: 1px solid #18202B; font-size: .86rem; color: var(--sc-ink-soft);
}
.wortmarke--fuss { font-size: 19px; padding: 0; }

@media (max-width: 860px) {
  .schluss__raster { grid-template-columns: 1fr; }
  .schluss__text { padding-top: 0; }
}
@media (max-width: 420px) {
  .klingel { grid-template-columns: 1fr; padding: 1.1rem; }
  .klingel > .feld--halb { grid-column: 1 / -1; }
  .uhr__zeit { font-size: 26px; }
  .wortmarke { font-size: 21px; }
}