:root {
  --grund: #e2e3de;
  --papier: #eceee8;
  --tinte: #1b1c1e;
  --grau: #5c5d59;
  --linie: rgba(27, 28, 30, 0.16);
  --blau: #2b34e0;
  --blau-blass: #dcdff6;
  --blau-text: #eef0ea;
  --schrift: 'Host Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --serif: Georgia, 'Times New Roman', serif;
  --rand: clamp(16px, 2.4vw, 32px);
  --kopf: 52px;
  --mikro: 0.6875rem;
  --klein: 0.8125rem;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
}
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 2px; }
.daten { font-family: var(--mono); font-size: var(--mikro); color: var(--grau); letter-spacing: 0.01em; margin: 0; }

.kopf {
  position: sticky; top: 0; z-index: 20;
  height: var(--kopf);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--rand);
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  font-size: var(--klein);
}
.marke { display: inline-flex; align-items: baseline; gap: 5px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; color: inherit; }
.marke i { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.kopf__titel { color: var(--grau); }

.seite {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  height: calc(100vh - var(--kopf));
  height: calc(100dvh - var(--kopf));
}
.panel {
  overflow-y: auto;
  padding: 28px var(--rand) 40px;
  border-right: 1px solid var(--linie);
}
.titel { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.9rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; margin: 18px 0 14px; }
.lead { color: var(--grau); margin: 0 0 24px; font-size: 1.0625rem; line-height: 1.42; letter-spacing: -0.01em; }

.steuerung { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.schalter { display: inline-flex; border: 1px solid var(--tinte); border-radius: 999px; padding: 2px; }
.schalter .knopf { border-color: transparent; }
.knopf {
  appearance: none; font: inherit; font-size: var(--klein); color: var(--tinte);
  background: transparent; border: 1px solid var(--tinte); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; line-height: 1.3;
  transition: background-color 0.2s, color 0.2s;
}
.knopf:hover { background: rgba(27, 28, 30, 0.07); }
.schalter .knopf[aria-pressed='true'], #k-schnitt[aria-pressed='true'] { background: var(--tinte); color: var(--grund); }
.knopf--voll { background: var(--blau); border-color: var(--blau); color: var(--blau-text); }
.knopf--voll:hover { background: #222bc4; }
.knopf--voll[aria-pressed='false'] { background: var(--blau); }

.block { margin-bottom: 36px; }
.block__kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.block h2 { font-size: 1rem; font-weight: 500; margin: 0; }
.link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: var(--klein); color: var(--grau); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie); }
.link:hover { color: var(--tinte); }

.raumliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinte); }
.raumliste li { border-bottom: 1px solid var(--linie); }
.raumliste button {
  appearance: none; width: 100%; background: none; border: 0; font: inherit; color: var(--grau);
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; cursor: pointer; text-align: left; font-size: 0.9375rem;
  transition: color 0.2s;
}
.raumliste button::before { content: none; }
.raumliste button:hover { color: var(--tinte); }
.raumliste button.ist-aktiv { color: var(--tinte); }
.raum__name { display: inline-flex; align-items: center; gap: 10px; }
.raum__name::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blau); transform: scale(0); transition: transform 0.2s; }
.ist-aktiv .raum__name::before { transform: scale(1); }
.raum__m2 { font-variant-numeric: tabular-nums; }
.summe { display: flex; justify-content: space-between; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--tinte); font-weight: 500; font-variant-numeric: tabular-nums; }

.skala { margin: 10px 0 0; font-size: var(--klein); color: var(--grau); display: grid; grid-template-columns: 8px 1fr; gap: 10px; align-items: start; }
.skala::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #138a5e; margin-top: 6px; }
.info { margin-top: 18px; padding: 16px 18px; background: var(--papier); border: 1px solid var(--linie); }
.info__titel { margin: 0 0 8px; font-weight: 500; font-size: 1.125rem; letter-spacing: -0.02em; }
.meta { margin: 0; font-size: var(--klein); }
.meta div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linie); }
.meta dt { color: var(--grau); }
.meta dd { margin: 0; }

.abb { margin: 0 0 28px; }
.abb img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); }
.abb figcaption { margin-top: 8px; }
.grundriss { background: var(--papier); border: 1px solid var(--linie); padding: 10px; }
.grundriss svg { display: block; width: 100%; height: auto; }
.gr-raum { fill: transparent; cursor: pointer; transition: fill 0.2s; }
.gr-raum:hover { fill: rgba(43, 52, 224, 0.08); }
.gr-raum.ist-aktiv { fill: var(--blau-blass); }
.gr-wand { fill: var(--tinte); }
.gr-fenster { fill: none; stroke: var(--tinte); stroke-width: 0.03; }
.gr-name { font-family: var(--schrift); font-size: 0.42px; fill: var(--grau); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }

.hinweis { font-size: var(--klein); color: var(--grau); margin: 0; }

.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.galerie__bild { appearance: none; border: 0; padding: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; }
.galerie__bild:first-child { grid-column: 1 / -1; }
.galerie__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--linie); transition: opacity 0.2s; }
.galerie__bild:hover img { opacity: 0.88; }
.galerie__bild .daten { display: block; margin-top: 4px; }

.grossbild { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(27, 28, 30, 0.96); color: #e2e3de; }
.grossbild::backdrop { background: rgba(27, 28, 30, 0.6); }
.grossbild[open] { display: grid; grid-template-rows: 1fr auto; }
.grossbild img { width: 100%; height: 100%; object-fit: contain; min-height: 0; padding: 24px 24px 0; }
.grossbild__leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px 20px; flex-wrap: wrap; }
.grossbild__leiste .daten { color: #9a9b96; }
.grossbild__knoepfe { display: flex; gap: 8px; }
.knopf--hell { color: #e2e3de; border-color: rgba(226, 227, 222, 0.5); }
.knopf--hell:hover { background: rgba(226, 227, 222, 0.12); }

/* Bühne */
.buehne { position: relative; overflow: hidden; min-height: 320px; background: var(--grund); }
.buehne__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s; touch-action: none; }
.buehne.ist-bereit .buehne__canvas { opacity: 1; }
.buehne__abb { position: absolute; left: 28px; top: 22px; pointer-events: none; }
.buehne__hilfe { position: absolute; right: 28px; bottom: 22px; pointer-events: none; }
.ecke { position: absolute; width: 12px; height: 12px; border: 0 solid var(--tinte); pointer-events: none; }
.ecke--ol { left: 12px; top: 12px; border-left-width: 1px; border-top-width: 1px; }
.ecke--or { right: 12px; top: 12px; border-right-width: 1px; border-top-width: 1px; }
.ecke--ul { left: 12px; bottom: 12px; border-left-width: 1px; border-bottom-width: 1px; }
.ecke--ur { right: 12px; bottom: 12px; border-right-width: 1px; border-bottom-width: 1px; }
.etiketten { position: absolute; inset: 0; pointer-events: none; }
.etikett {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  appearance: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  padding: 4px 9px; background: rgba(226, 227, 222, 0.9); color: var(--tinte);
  font-size: 0.75rem; line-height: 1.25; white-space: nowrap;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.etikett__m2 { font-family: var(--mono); font-size: 0.625rem; color: var(--grau); }
.etikett:hover, .etikett.ist-hover { background: var(--tinte); color: var(--grund); }
.etikett:hover .etikett__m2, .etikett.ist-hover .etikett__m2 { color: rgba(226, 227, 222, 0.7); }
.etikett.ist-aktiv { background: var(--blau); color: var(--blau-text); }
.etikett.ist-aktiv .etikett__m2 { color: rgba(238, 240, 234, 0.8); }
.fehler { position: absolute; inset: auto 24px 50% 24px; text-align: center; color: var(--grau); }

@media (max-width: 900px) {
  .seite { grid-template-columns: minmax(0, 1fr); height: auto; }
  .buehne { order: -1; height: 64vh; height: 64svh; border-bottom: 1px solid var(--linie); }
  .panel { overflow: visible; border-right: 0; }
  .kopf__titel { display: none; }
  .buehne__abb { left: 22px; top: 18px; }
  .buehne__hilfe { right: 22px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Fotopunkt: Renderbild deckungsgleich über dem 3D-Modell */
[hidden] { display: none !important; }
.schalter--hell { border-color: rgba(226, 227, 222, 0.5); }
.schalter--hell .knopf[aria-pressed='true'] { background: #e2e3de; color: var(--tinte); }
.grossbild__knoepfe { flex-wrap: wrap; }
.fotopunkt {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px; border-radius: 999px;
  background: var(--grund); color: var(--blau); border: 1px solid var(--blau);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.02em; white-space: nowrap;
  transition: opacity 0.25s;
}
.fotopunkt--eingerichtet { background: var(--blau); color: var(--blau-text); }
.fotopunkt__text { display: none; padding-right: 5px; }
.fotopunkt:hover, .fotopunkt:focus-visible { z-index: 2; }
.fotopunkt:hover .fotopunkt__text, .fotopunkt:focus-visible .fotopunkt__text { display: inline; }
.buehne.ist-foto .buehne__hilfe, .buehne.ist-foto .buehne__abb { opacity: 0; }
.fotoebene { position: absolute; inset: 0; pointer-events: none; background: rgba(27, 28, 30, 0); transition: background-color 0.5s; }
.fotoebene.ist-bild { background: rgba(27, 28, 30, 0.94); }
.fotoebene__bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition-property: opacity; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.fotoebene__bild.ist-an { opacity: 1; }
.fotoebene__marke {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  padding: 4px 10px; background: rgba(27, 28, 30, 0.78); color: #e2e3de; border-radius: 999px;
}
.fotoebene__leiste {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100% - 24px);
  padding: 8px 10px 8px 16px; border-radius: 999px;
  background: rgba(27, 28, 30, 0.86); color: #e2e3de; pointer-events: auto;
}
.fotoebene__titel { color: rgba(226, 227, 222, 0.75); }
.info__foto { margin-top: 12px; }
@media (max-width: 560px) {
  .fotoebene__leiste { border-radius: 14px; padding: 8px; gap: 6px; }
  .fotoebene__titel { display: none; }
  .fotoebene__leiste .knopf { padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) { .fotoebene, .fotoebene__bild, .fotopunkt { transition: none; } }

/* Dollhouse-Look: Abend = Bühne in der Farbe des Standbilds, Beschriftung hell; Tag = weiß */
html[data-look='dollhouse'] .buehne { transition: background-color 0.9s; }
html[data-look='dollhouse'][data-licht='tag'] .buehne { background: #ffffff; }
html[data-look='dollhouse']:not([data-licht='tag']) .buehne { background: #0b0e13; }
html[data-look='dollhouse']:not([data-licht='tag']) .buehne .daten { color: rgba(226, 227, 222, 0.62); }
html[data-look='dollhouse']:not([data-licht='tag']) .ecke { border-color: rgba(226, 227, 222, 0.5); }
html[data-look='dollhouse']:not([data-licht='tag']) .etikett { background: rgba(11, 14, 19, 0.74); color: #e2e3de; box-shadow: inset 0 0 0 1px rgba(226, 227, 222, 0.16); }
html[data-look='dollhouse']:not([data-licht='tag']) .etikett__m2 { color: rgba(226, 227, 222, 0.6); }
html[data-look='dollhouse']:not([data-licht='tag']) .etikett:hover, html[data-look='dollhouse']:not([data-licht='tag']) .etikett.ist-hover { background: #e2e3de; color: #1b1c1e; }
html[data-look='dollhouse']:not([data-licht='tag']) .etikett:hover .etikett__m2, html[data-look='dollhouse']:not([data-licht='tag']) .etikett.ist-hover .etikett__m2 { color: #5c5d59; }
html[data-look='dollhouse']:not([data-licht='tag']) .etikett.ist-aktiv { background: var(--blau); color: var(--blau-text); box-shadow: none; }
@media (max-width: 900px) { html[data-look='dollhouse']:not([data-licht='tag']) .buehne { border-bottom-color: #0b0e13; } }