:root {
  --creme: #ffffff;
  --creme-hell: #fafafa;
  --creme-tief: #e6e4e0;
  --schiefer: #24455e;
  --schiefer-tief: #172f41;
  --messing: #9a7428;
  --messing-hell: #d6b778;
  --tinte: #22303a;
  --linie: rgba(36, 69, 94, 0.3);
  --linie-fein: rgba(34, 48, 58, 0.16);

  --sans: "Frutiger", "Frutiger LT Std", "Frutiger Neue LT", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --rand: clamp(1.2rem, 3.2vw, 3.2rem);
  --luft: clamp(0.7rem, 1.8vh, 1.5rem);
  --titel-gr: min(2.4rem, 3.9cqw);
  --titel-zeile: 1.2;
  --nachweis-zeile: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(16px, min(1.45vw, 2.1vh), 26px);
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.ebene {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--rand) * 0.9) var(--rand);
  overflow: hidden;
}

.ebene--aktiv { display: flex; animation: ebene-auf 0.4s ease both; }

@keyframes ebene-auf { from { opacity: 0; } to { opacity: 1; } }

.entwurf {
  flex: 0 0 auto;
  margin: calc(var(--rand) * -0.5) 0 calc(var(--luft) * 0.6);
  text-align: center;
  font-size: 1rem;
  line-height: 1.3;
  color: rgba(34, 48, 58, 0.6);
}

.kopf {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-bottom: calc(var(--luft) * 0.8);
  border-bottom: 2px solid var(--linie);
}

.stationsmarke, .raumangabe, .platzhalter-marke {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.3;
  color: var(--messing);
}

.mitte {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: var(--luft) 0;
}

.buehne {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
}

.film-block {
  --kopfanteil: calc(var(--titel-gr) * var(--titel-zeile) + var(--nachweis-zeile) + var(--luft) * 2);
  margin: 0;
  width: min(100cqw, (100cqh - var(--kopfanteil)) * 16 / 9);
  display: flex;
  flex-direction: column;
  gap: var(--luft);
}

@supports not (width: 1cqw) {
  :root { --titel-gr: 2.2rem; }
  .film-block { width: min(100%, (100vh - 17rem) * 16 / 9); }
  .film-titel, .nachweis { width: auto; white-space: normal; }
}

.film-titel {
  margin: 0;
  font-size: var(--titel-gr);
  line-height: var(--titel-zeile);
  font-weight: 700;
  color: var(--schiefer);
  white-space: nowrap;
  width: 100cqw;
  align-self: center;
}

.filmfenster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--creme-hell);
  overflow: hidden;
}

body[data-film="original"] .filmfenster { background: var(--creme-tief); }

.film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  background: transparent;
}

.platzhalter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 4%;
  padding: 6% 7%;
  border: 2px solid var(--linie);
  text-align: left;
}

.platzhalter-zeichnung { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.platzhalter-zeichnung svg { width: 100%; height: 100%; max-height: 100%; }

.zeichnung-turm { fill: none; stroke: var(--schiefer); stroke-width: 1.6; stroke-dasharray: 5 4; }
.zeichnung-kante { fill: none; stroke: var(--linie); stroke-width: 1.2; }
.zeichnung-grund { fill: none; stroke: var(--messing); stroke-width: 2; }

.platzhalter-text {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  min-width: 0;
}

.platzhalter-haupt {
  font-size: clamp(1.3rem, 2.6cqw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--schiefer);
  padding-top: 0.6em;
  border-top: 2px solid var(--messing-hell);
}

.platzhalter-unter {
  font-size: clamp(1rem, 1.6cqw, 1.45rem);
  line-height: 1.4;
  color: var(--tinte);
}

.platzhalter-format {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 4%;
  font-size: 1rem;
  line-height: 1.3;
  color: rgba(34, 48, 58, 0.62);
  text-align: left;
}

.nachweis {
  width: 100cqw;
  align-self: center;
  font-size: 1rem;
  line-height: var(--nachweis-zeile);
  height: var(--nachweis-zeile);
  color: rgba(34, 48, 58, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navigation {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: calc(var(--luft) * 0.8);
}

.btn {
  font-family: inherit;
  border-radius: 999px;
  padding: 1rem 2.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn--voll { background: var(--schiefer); color: #ffffff; border: 2px solid var(--schiefer); }
.btn--voll:active { background: var(--schiefer-tief); border-color: var(--schiefer-tief); }
.btn--linie { background: var(--creme-hell); color: var(--schiefer); border: 2px solid var(--schiefer); }
.btn--linie:active { background: var(--creme-tief); }

.btn:focus { outline: none; }
.btn:focus-visible { outline: 3px solid var(--messing); outline-offset: 4px; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--creme);
  display: flex;
  flex-direction: column;
  padding: calc(var(--rand) * 0.9) var(--rand);
  overflow: hidden;
  animation: ebene-auf 0.4s ease both;
}

.overlay-inhalt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.overlay-mitte {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--luft);
  text-align: center;
  padding: var(--luft) 0;
  overflow: hidden;
}

.dgs-titel {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--schiefer);
}

.dgs-fenster {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 64rem, (100vh - 25rem) * 16 / 9);
  aspect-ratio: 16 / 9;
  background: var(--creme-hell);
  overflow: hidden;
}

.platzhalter--dgs { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.platzhalter--dgs .platzhalter-unter { font-size: 1.15rem; }

.dgs-hinweis {
  margin: 0;
  max-width: 40em;
  font-size: 1.25rem;
  line-height: 1.5;
}

@media (max-height: 800px) { :root { --rand: clamp(1rem, 2.6vw, 2.6rem); } }
@media (max-height: 700px) { :root { --luft: clamp(0.5rem, 1.4vh, 1rem); } .btn { padding: 0.8rem 2rem; } }
@media (max-height: 620px) { :root { --rand: 1rem; } .dgs-hinweis { font-size: 1.1rem; } }
@media (max-height: 500px) { .platzhalter-format { display: none; } .dgs-titel { font-size: 1.8rem; } }

@media (max-width: 900px) {
  .platzhalter { grid-template-columns: 1fr; padding: 8% 8% 12%; }
  .platzhalter-zeichnung { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}