:root{
  --grund:#07090F; --flaeche:#111524; --kante:#1E2439; --kante-2:#161B2C;
  --text:#E9EBF2; --text-2:#9AA2B8; --text-3:#6B7391;
  --cyan:#4DE8E0; --magenta:#FF3D8B; --gelb:#FFD84D;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font-family:'Karla',system-ui,-apple-system,sans-serif;font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:880px;margin-inline:auto;padding-inline:24px}
h1,h2,h3{font-family:'Oswald',Impact,sans-serif;font-weight:500;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,5.4vw,48px);text-transform:uppercase;letter-spacing:.03em;line-height:1.06}
h2{font-size:clamp(21px,3vw,28px);text-transform:uppercase;letter-spacing:.045em;margin-bottom:16px}
h3{font-size:17px;text-transform:uppercase;letter-spacing:.05em}
p{margin:0 0 15px;max-width:66ch;color:var(--text-2)}
a{color:var(--cyan)}
button:focus-visible,#szene:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.marke{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 12px}
section{padding-block:clamp(30px,4vw,50px)}
.block{border-top:1px solid var(--kante-2)}
.kopf{padding-top:clamp(34px,6vw,58px);padding-bottom:20px}
.kopf p{margin-top:16px}

/* --- Straßennamenschild als Überschrift, 09.09.2026 ---------------
   Steht über der Bühne, nicht darauf. Ein Schild, das über der Straße läge,
   verdeckt sie, und Verdeckung ist in diesem Projekt schon zweimal teuer
   geworden. Breite zwei Drittel der Bühne, wie von Oliver vorgegeben.
   Machart wie ein deutsches Straßennamenschild: blaue Fläche, weißer
   Innenrand, weiße Versalien. Die Farbregel der Website gilt hier
   ausdrücklich nicht, das ist Olivers Festlegung vom 22.08.2026. */
.schildzeile{
  background:#04060B;
  padding-block:clamp(26px,4vw,46px) clamp(18px,2.5vw,30px);
  display:flex;justify-content:center;
}
/* Ein deutsches Straßennamenschild ist weiß, trägt schwarze Schrift in Groß und
   Klein und hat einen schmalen schwarzen Rand mit etwas Luft dahinter. Es ist
   nicht blau und nicht in Versalien, das war meine erste Fassung und sie war
   falsch. Die Schrift der echten Schilder ist DIN 1451 Mittelschrift, also
   schmal laufend ohne Serifen. Oswald kommt dem am nächsten und ist ohnehin
   geladen. */
.strassenschild{
  width:66%;max-width:780px;
  background:#FFFFFF;
  border:3px solid #14161C;
  border-radius:2px;
  /* Der zweite, äußere Rand ist die weiße Blechkante um den Aufdruck herum. */
  outline:7px solid #FFFFFF;
  outline-offset:0;
  padding:clamp(9px,1.5vw,16px) clamp(18px,2.6vw,34px);
  text-align:center;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.95);
}
.strassenschild h1{
  color:#14161C;
  font-family:'Oswald',Impact,sans-serif;
  font-weight:500;
  /* Straßenschilder schreiben nicht in Versalien, sie schreiben wie im Duden. */
  text-transform:none;
  font-size:clamp(21px,4.4vw,50px);
  letter-spacing:.01em;
  line-height:1.1;
  white-space:nowrap;
}
/* Auf schmalen Geräten frisst die Zweidrittelregel die Schrift auf. */
@media (max-width:640px){
  .strassenschild{width:90%}
  .strassenschild h1{white-space:normal}
}

.buehne{background:#04060B;border-block:1px solid var(--kante)}
.rahmen{width:100%;max-width:1180px;margin-inline:auto}
#szene{position:relative;width:100%;aspect-ratio:16/9;min-height:340px;background:#0a0f1c;
  overflow:hidden;touch-action:none;cursor:grab}
#szene canvas{display:block;width:100%;height:100%}
#szene.zeigt{cursor:pointer}

.hud{position:absolute;left:0;right:0;bottom:0;padding:15px 20px;pointer-events:none;
  background:linear-gradient(to top,rgba(4,6,11,.9),rgba(4,6,11,0));
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hud .steuer{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);line-height:1.9}
.hud .steuer b{color:var(--text-2);font-weight:500}
.hud .status{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);text-align:right}
.steuer .schmal{display:none}
@media (max-width:640px){
  #szene{aspect-ratio:3/4;min-height:430px}
  .steuer .breit{display:none}
  .steuer .schmal{display:block}
  .hud{padding:12px 14px}
}

.drin{position:absolute;left:50%;top:50%;translate:-50% -50%;pointer-events:auto;
  background:rgba(7,9,15,.95);border:1px solid var(--kante);border-radius:4px;
  padding:26px 30px;max-width:420px;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .25s ease}
.drin.da{opacity:1;visibility:visible}
/* Wie beim Hindernis: das Haus liegt bei seite -1 auf der rechten Bildseite,
   der Kasten geht deshalb nach links und umgekehrt. */
.drin.links{left:26px;right:auto;translate:0 -50%}
.drin.rechts{left:auto;right:26px;translate:0 -50%}
@media (max-width:640px){.drin.links,.drin.rechts{left:14px;right:14px;max-width:none;translate:0 -50%}}
.drin .nr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 8px}
.drin h3{color:var(--text);margin-bottom:10px}
.drin p{font-size:14.5px;margin:0 0 16px;max-width:none}
.drin .schlag{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.drin .schlag span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);border:1px solid var(--kante);padding:4px 7px}
.drin .weiter{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);text-decoration:none;
  border-bottom:1px solid var(--cyan);display:inline-block;margin-bottom:18px}
.drin button{display:block;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--kante);
  border-radius:999px;padding:11px 22px;cursor:pointer}
.drin button:hover{border-color:var(--cyan);color:var(--cyan)}

/* Der Rückweg zur Website, 09.09.2026. Oben rechts, weil dort in aller Regel
   Himmel steht und er deshalb nichts von der Straße verdeckt. Bewusst dauerhaft
   sichtbar und nicht erst auf Verdacht: Wer aussteigen will, sucht nicht. */
.raus{position:absolute;top:14px;right:16px;z-index:6;pointer-events:auto;
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;color:var(--text-2);
  background:rgba(7,9,15,.72);border:1px solid var(--kante);border-radius:999px;
  padding:8px 16px;backdrop-filter:blur(3px)}
.raus:hover{color:var(--cyan);border-color:var(--cyan)}
@media (max-width:640px){.raus{top:10px;right:10px;font-size:10.5px;padding:7px 12px}}

/* Die Zieltafel. Erscheint beim Durchlaufen des Torbogens, mittig, weil dort
   nach der Ziellinie nur noch See und Sonnenaufgang liegen und nichts verdeckt
   wird, worum es ginge. */
.zieltafel{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:7;
  pointer-events:auto;width:min(460px,86%);
  background:rgba(7,9,15,.95);border:1px solid var(--kante);
  border-top:3px solid var(--cyan);border-radius:4px;
  padding:26px 30px;text-align:left;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95)}
.zieltafel .nr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 8px}
.zieltafel h3{color:var(--text);margin-bottom:10px;font-size:20px}
.zieltafel .satz{font-size:14.5px;margin:0 0 18px;max-width:none}
.zieltafel .knoepfe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.zieltafel .haupt{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:#07090F;background:var(--cyan);
  border:1px solid var(--cyan);border-radius:999px;padding:11px 22px}
.zieltafel .haupt:hover{opacity:.88}
.zieltafel .koeder{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--text);background:transparent;
  border:1px solid var(--kante);border-radius:999px;padding:11px 22px}
.zieltafel .koeder:hover{border-color:var(--cyan);color:var(--cyan)}
.zieltafel .weg{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-3);background:transparent;
  border:1px solid var(--kante-2);border-radius:999px;padding:10px 18px;cursor:pointer}
.zieltafel .weg:hover{border-color:var(--cyan);color:var(--cyan)}
.zieltafel .zaehler{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin:16px 0 0}
@media (max-width:640px){
  .zieltafel{padding:20px 20px}
  .zieltafel .knoepfe{gap:8px}
  .zieltafel .haupt,.zieltafel .koeder,.zieltafel .weg{font-size:11.5px;padding:9px 15px}
}

/* Das Hindernis vor der Tür. Es sitzt unten und weicht auf die Bildseite aus,
   auf der das Haus nicht steht, sonst deckt es genau das zu, worum es geht. */
.sperre{position:absolute;bottom:74px;pointer-events:auto;left:50%;translate:-50% 0;
  background:rgba(7,9,15,.94);border:1px solid var(--kante);border-radius:4px;
  border-left:3px solid #C8202A;padding:16px 20px;max-width:400px;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .25s ease}
.sperre.da{opacity:1;visibility:visible}
/* Das Haus liegt bei seite -1 auf der rechten Bildseite, weil die Kamera die
   Straße hinunterschaut. Der Kasten weicht deshalb auf die andere Seite aus. */
.sperre.links{left:26px;right:auto;translate:0 0}
.sperre.rechts{left:auto;right:26px;translate:0 0}
@media (max-width:640px){.sperre.links,.sperre.rechts{left:14px;right:14px;translate:0 0}}
.sperre .nr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 6px}
.sperre h3{color:var(--text);margin-bottom:8px}
.sperre p{font-size:14px;margin:0 0 14px;max-width:none;color:var(--text-2)}
.sperre .knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.sperre button{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--kante);
  border-radius:999px;padding:10px 20px;cursor:pointer}
.sperre button:hover{border-color:var(--cyan);color:var(--cyan)}
.sperre button:disabled{opacity:.4;cursor:default;border-color:var(--kante);color:var(--text-3)}
.sperre .weg{color:var(--text-3);border-color:var(--kante-2)}
/* Auf dem Handy geht der Kasten über die ganze Breite, und dort zählt jeder
   Punkt: Gemessen am 28.08.2026 bei 390 auf 520 nahm er 267 Punkte und damit
   mehr als die halbe Bühne. Vom Hindernis blieb nichts übrig. Er wird deshalb
   enger gesetzt, und die beiden Knöpfe stehen nebeneinander statt untereinander,
   das allein spart eine Knopfhöhe. */
@media (max-width:640px){
  .sperre{bottom:88px;max-width:calc(100% - 28px);padding:11px 14px}
  .sperre .nr{font-size:9.5px;margin-bottom:4px}
  .sperre h3{font-size:15px;margin-bottom:5px}
  .sperre p{font-size:13px;line-height:1.5;margin-bottom:10px}
  .sperre .knoepfe{flex-wrap:nowrap}
  .sperre button{font-size:11px;letter-spacing:.06em;padding:8px 12px;white-space:nowrap}
}

/* Ohne Skript: dieselbe Auskunft als Text unter der Bühne. Zwei Spalten, damit
   die sieben nicht als lange Kette untereinander stehen. */
.dimensionen{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:22px;
  border-top:1px solid var(--kante-2)}
@media (max-width:720px){.dimensionen{grid-template-columns:1fr;gap:0}}
.dimensionen article{padding-block:18px;border-bottom:1px solid var(--kante-2)}
.dimensionen h3{color:var(--text);margin-bottom:8px;display:flex;gap:11px;align-items:baseline}
.dimensionen h3 span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
  color:var(--text-3)}
.dimensionen p{font-size:15px;margin:0 0 12px;max-width:none}
.dimensionen a{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--cyan)}

.lade{position:absolute;inset:0;display:grid;place-items:center;background:#04060B;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);z-index:5}
.lade.weg{display:none}

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media (max-width:720px){.zwei{grid-template-columns:1fr}}
.karte{border:1px solid var(--kante);background:var(--flaeche);border-radius:3px;padding:22px}
.karte h3{color:var(--text)}
.karte p{font-size:15px;margin:12px 0 0}
.karte .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:10px}
.liste{border-top:1px solid var(--kante-2);margin-top:22px}
.liste .reihe{display:grid;grid-template-columns:180px 1fr;gap:18px;padding-block:14px;
  border-bottom:1px solid var(--kante-2)}
@media (max-width:640px){.liste .reihe{grid-template-columns:1fr;gap:3px}}
.liste .was{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.liste .wie{color:var(--text-2);font-size:15.5px}
.offen{border:1px solid color-mix(in srgb,var(--gelb) 34%,transparent);
  background:color-mix(in srgb,var(--gelb) 5%,transparent);border-radius:3px;padding:24px;margin-top:24px}
.offen h3{color:var(--gelb)}
.offen p{margin:14px 0 0}
.fuss{border-top:1px solid var(--kante);padding-block:30px 50px;color:var(--text-3);font-size:13.5px}
.fuss p{color:var(--text-3);font-size:13.5px}