/* Holm City: Der gemeinsame Auftritt aller Seiten. Farben, Schriften, Kopf und Fuss stehen nur hier.
   Modern DOS ist eine Pixelschrift und bleibt nur in Vielfachen von 8 scharf: 16, 24, 32, 40, 48, 64 px, ohne Fett und ohne enge Laufweite. */
@font-face { font-family: "Modern DOS"; src: url(/schrift/modern-dos-8x16.woff2) format("woff2"); font-weight: 400; font-display: swap; }
/* Ersatz, bis Modern DOS geladen ist (Umbauplan 68): auf dieselben Masse gebracht (Breite 0,5 em, oben 0,75, unten 0,25,
   ohne Zeilenabstand), damit beim Tausch nichts springt. Die Werte gelten vor size-adjust, darum durch dessen Faktor geteilt */
@font-face { font-family: "Modern DOS Ersatz C"; src: local("Consolas"); size-adjust: 90.9%; ascent-override: 82.5%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "Modern DOS Ersatz M"; src: local("Menlo"), local("DejaVu Sans Mono"), local("Liberation Mono"), local("Courier New"), local("Courier");
  size-adjust: 83.3%; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --cd-aqua: #ff8a3d;
  --cd-lila: #b6ff3c;
  --cd-lila-hell: #ccff73;
  --cd-auf-lila: #132200;
  --cd-bg: #0a0a0a;
  --cd-karte: #171717;
  --cd-linie: rgb(255 255 255 / 10%);
  --cd-rand: rgb(255 255 255 / 15%);
  --cd-text: #fafafa;
  --cd-text-2: #a1a1a1;
  --cd-r-karte: 14px;
  --cd-r-knopf: 8px;
  --cd-kopf: 80px;
  --cd-breite: 1180px;
  --cd-lesebreite: 720px;
  --cd-rand-seite: clamp(16px, 4vw, 36px);
  --cd-pixel: "Modern DOS", "Modern DOS Ersatz C", "Modern DOS Ersatz M", ui-monospace, Consolas, monospace;
  --cd-text-schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Servername wie in der MOTD: Orange (Variable aqua) und Giftgruen (Variable lila) mit Schatten wie im Spiel, Umbauplan 59 */
.motd { font: 400 16px/1 var(--cd-pixel); white-space: nowrap; }
.motd .aqua { color: var(--cd-aqua); -webkit-text-fill-color: var(--cd-aqua); text-shadow: 1px 1px 0 #3f220f; }
.motd .lila { color: var(--cd-lila); -webkit-text-fill-color: var(--cd-lila); text-shadow: 1px 1px 0 #2a3f0f; }

.cd-kopf { position: sticky; top: 0; z-index: 40; box-sizing: border-box; display: flex; align-items: center; gap: 28px; width: 100%; height: var(--cd-kopf); padding: 0 var(--cd-rand-seite); background: var(--cd-bg); border-bottom: 1px solid var(--cd-linie); font-family: var(--cd-text-schrift); }
.cd-marke { display: flex; align-items: center; gap: 10px; color: var(--cd-text); text-decoration: none; }
.cd-marke img { display: block; width: 40px; height: 40px; }
.cd-kopf .motd { font-size: 24px; }
.cd-menue { display: flex; gap: 28px; margin-left: auto; font: 400 24px var(--cd-pixel); }
.cd-menue a { color: var(--cd-text-2); text-decoration: none; }
.cd-menue a:hover { color: var(--cd-text); }

/* Name, Links und Hinweis untereinander in der Mitte */
.cd-fuss { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; width: 100%; padding: 20px var(--cd-rand-seite); background: var(--cd-bg); border-top: 1px solid var(--cd-linie); color: var(--cd-text-2); font: 500 16px/1.4 var(--cd-text-schrift); }
.cd-fuss .motd { font-size: 24px; }
.cd-fuss p { order: 3; margin: 0; }
.cd-fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; font: 400 24px var(--cd-pixel); }
.cd-fuss a { color: inherit; text-decoration: none; }
.cd-fuss a:hover { color: var(--cd-text); }

@media (max-width: 900px) {
  .cd-menue { display: none; }
  .cd-fuss { flex-direction: column; text-align: center; }
  .cd-fuss p { flex-basis: auto; }
  .cd-fuss nav { justify-content: center; }
}

/* Fuss auf dem Boden der Welt (Umbauplan 64, auf allen Seiten): Tiefenschiefer, unten raues Grundgestein (Szene grundgesteinBoden,
   220 Bloecke breit, 26 hoch). --grund-block setzen die Seitenbilder auf ihre Blockgroesse. Oben laeuft er weich aus */
.cd-fuss { border-top: 0; padding-top: 72px;
  background: linear-gradient(var(--cd-bg), rgb(10 10 10 / 0%) 70px), linear-gradient(rgb(6 6 8 / 20%), rgb(6 6 8 / 20%)),
    url(/bilder/grundgesteinBoden.webp) 50% 100% / calc(var(--grund-block, 8.6px) * 220) auto repeat-x, var(--cd-bg);
  /* AVIF ist halb so gross (Umbauplan 68). Wer image-set mit type nicht kennt, verwirft die Zeile und behaelt WebP von oben */
  background: linear-gradient(var(--cd-bg), rgb(10 10 10 / 0%) 70px), linear-gradient(rgb(6 6 8 / 20%), rgb(6 6 8 / 20%)),
    image-set(url(/bilder/grundgesteinBoden.avif) type("image/avif"), url(/bilder/grundgesteinBoden.webp) type("image/webp"))
    50% 100% / calc(var(--grund-block, 8.6px) * 220) auto repeat-x, var(--cd-bg); }

/* Panorama hinter Startbox und Servereintrag (Umbauplan 68): Der Steg aus unserer Welt zieht langsam vorbei. Das Bild ist hoeher
   als die Flaeche (--panorama-hoehe, senkrecht bei 45 %) und wandert von links nach rechts: left (Prozent der Flaeche) und
   translateX (Prozent des Bildes) zusammen, so endet der rechte Bildrand genau am rechten Rand. Ohne cqw, denn das rechnet
   Chrome unter zoom (Startbox) falsch, dann lief das Bild zu weit und rechts kam Schwarz. 1200 x 502 ist startgrund.webp */
.panorama { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #111; }
.panorama::before { content: ""; position: absolute; left: 0; top: calc((100% - var(--panorama-hoehe, 210%)) * .45); height: var(--panorama-hoehe, 210%);
  aspect-ratio: 1200 / 502; background: url(/bilder/startgrund.webp) 0 0 / 100% 100%; animation: panorama-zug 90s ease-in-out infinite alternate; }
.panorama::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--panorama-schleier, 0%)); }
@keyframes panorama-zug { from { left: 0; transform: none; } to { left: 100%; transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .panorama::before { animation: none; left: 50%; transform: translateX(-50%); } }

/* Hintergrund aus welt.js (Wiki, Voice, Charakter): Nachthimmel und Schnitt durch die Stadt, immer hinter dem Inhalt */
.cd-welt { position: fixed; z-index: 0; pointer-events: none; }
.cd-welt-himmel { inset: 0; background: linear-gradient(#06070c, #0f0d14 60%, #1a0d0c); }
.cd-welt-himmel canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.cd-welt-gedaempft { opacity: .45; }
.cd-welt-hero { position: absolute; bottom: auto; height: 100vh; }
.cd-welt-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--cd-bg)); }
.cd-welt-seite { top: 0; height: 100vh; overflow: hidden; }
.cd-welt-seite[hidden] { display: none; }
.cd-welt-band { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.cd-welt-band img { display: block; width: 100%; max-width: none; object-fit: cover; }
.cd-welt-links { left: 0; -webkit-mask-image: linear-gradient(to left, transparent 24px, #000 200px); mask-image: linear-gradient(to left, transparent 24px, #000 200px); }
.cd-welt-links img { object-position: right; }
.cd-welt-rechts { right: 0; -webkit-mask-image: linear-gradient(to right, transparent 24px, #000 200px); mask-image: linear-gradient(to right, transparent 24px, #000 200px); }
.cd-welt-rechts img { object-position: left; }
/* Inhalt ueber dem Hintergrund: Karten und Editor behalten ihren eigenen, dunklen Grund */
body:has(> .cd-welt) > main, body:has(> .cd-welt) > #app { position: relative; z-index: 1; }