/*! Arkonia · © 2026 Jürgen Garske · Alle Rechte vorbehalten. */
/*
 * Grundgerüst. Das eigentliche Design kommt später und setzt hier an:
 * Farben, Schriften, Abstände und Rundungen stehen nur in :root. Wer sie
 * ändert, ändert das ganze Spiel. Die Regeln darunter benutzen nur diese
 * Variablen, keine eigenen Farbwerte.
 *
 * Keine style-Attribute im Markup: Die Content-Security-Policy erlaubt nur
 * Stylesheets von der eigenen Seite.
 */

@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/spectral-latin-300-normal.woff2") format("woff2"); }

:root {
    /* Farben nach dem Designentwurf (docs/prototyp): Anthrazit mit Grün,
       Türkis für Status und Navigation, Orange für die nächste Aktion. */
    --farbe-grund:        #101719;
    --farbe-nacht:        #000000;
    --farbe-schleier:     rgba(0, 0, 0, 0.55);
    --farbe-kopf:         #111b1e;
    --farbe-flaeche:      #172124;
    --farbe-flaeche-hoch: #1c282b;
    --farbe-linie:        #2b393c;
    --farbe-text:         #ede9df;
    --farbe-text-leise:   #a5b3b3;
    --farbe-text-stumm:   #7f9495;
    --farbe-akzent:       #e8b274;
    --farbe-akzent-text:  #1b211f;
    --farbe-signal:       #8ac9b6;
    --farbe-gut:          #8ac9b6;
    --farbe-schlecht:     #e1a090;
    --farbe-info:         #8ac9b6;

    /* Schrift: Spectral für Überschriften, Systemschrift für Text, Plex Mono
       nur für Zahlen und kleine Bezeichnungen. */
    --schrift-text:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-titel:  "Spectral", Georgia, serif;
    --schrift-zahl:   "IBM Plex Mono", ui-monospace, monospace;
    --groesse-text:   1rem;
    --groesse-klein:  0.875rem;
    --groesse-titel:  1.5rem;
    --groesse-gross:  2.25rem;
    --zeilenhoehe:    1.55;

    /* Abstände und Formen */
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2.5rem;
    --rundung:       8px;
    --rundung-klein: 5px;
    --breite-karte:  26rem;
    --breite-text:   46rem;
    --breite-inhalt: 64rem;
    --dauer-einblenden: 1.4s;

    color-scheme: dark;
}

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

html,
body {
    margin: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--farbe-grund);
    color: var(--farbe-text);
    font-family: var(--schrift-text);
    font-size: var(--groesse-text);
    line-height: var(--zeilenhoehe);
}

a {
    color: var(--farbe-akzent);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--farbe-text);
}

:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
}

img {
    max-width: 100%;
}

h1,
h2,
h3 {
    font-family: var(--schrift-titel);
    font-weight: 300;
}

/* Symbole aus _symbole.twig: nur Strich, Farbe vom Text. */
.symbole {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.symbol {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[hidden] {
    display: none !important;
}

/* ---------- Marke und Sprachwahl ---------- */

.marke {
    font-family: var(--schrift-titel);
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--farbe-text);
}

.marke picture,
.marke img {
    display: block;
    height: 3.25rem;
    width: auto;
}

/* Schriftzug so breit wie im Designentwurf; am Handy bleibt das Zeichen. */
@media (min-width: 35.0625rem) {
    .marke img {
        width: 13.3rem;
        height: auto;
    }
}

@media (min-width: 35.0625rem) and (max-width: 56rem) {
    .marke img {
        width: 12rem;
    }
}

/* Lange und kurze Bezeichnung: am Handy ist unten weniger Platz. */
.nur-kurz {
    display: none;
}

.sprachwahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    font-size: var(--groesse-klein);
}

.sprachwahl-eintrag {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-1);
    color: var(--farbe-text-leise);
}

.sprachwahl-eintrag.is-aktiv {
    color: var(--farbe-text);
}

.sprachwahl-eintrag img {
    border-radius: 2px;
}

/* ---------- Einstieg: Anmelden, Registrieren, Name ---------- */

.einstieg-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-3);
    min-height: 4.5rem;
    padding: var(--abstand-3) 1.9rem;
    background: var(--farbe-kopf);
    border-bottom: 1px solid var(--farbe-linie);
}

.einstieg-inhalt {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--abstand-5) var(--abstand-4);
}

.karte {
    width: 100%;
    max-width: var(--breite-karte);
    display: grid;
    gap: var(--abstand-4);
    padding: var(--abstand-5);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.karte-breit {
    max-width: var(--breite-text);
}

/* Anmelden, Registrieren und Co.: Formular links ohne Kasten, rechts das
   Bild des Landeplatzes (Designentwurf). */
.einstieg-mit-bild {
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    align-items: center;
    gap: 5rem;
    padding: 2.75rem 1.9rem;
}

.einstieg-mit-bild .karte {
    padding: 0;
    background: none;
    border: 0;
}

.einstieg-mit-bild .karte-titel {
    font-size: 3rem;
    line-height: 1.12;
}

.einstieg-bild {
    position: relative;
    margin: 0;
    align-self: stretch;
    min-height: 34rem;
    max-height: 47rem;
    overflow: hidden;
    border: 1px solid rgba(138, 201, 182, 0.15);
    border-radius: 12px;
    background: var(--farbe-flaeche);
}

.einstieg-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 56% 50%;
}

.einstieg-bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(11, 24, 29, 0.92), rgba(11, 24, 29, 0.03) 60%);
}

.einstieg-bild figcaption {
    position: absolute;
    z-index: 1;
    left: 1.8rem;
    right: 1.8rem;
    bottom: 1.8rem;
    display: grid;
    gap: 0.8rem;
    max-width: 32em;
}

.einstieg-bild-titel {
    font-family: var(--schrift-titel);
    font-weight: 300;
    font-size: 2.3rem;
    line-height: 1.15;
    color: var(--farbe-text);
}

.einstieg-bild-text {
    font-size: 0.82rem;
    line-height: 1.8;
    color: #c6d4cc;
}

/* Zahlen der Landung unter dem Bildtext (Spielername), durch eine feine
   Linie abgesetzt. */
.einstieg-bild-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin-top: 0.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(138, 201, 182, 0.2);
    font-size: 0.7rem;
    color: #c6d4cc;
}

.einstieg-bild-zahlen > span {
    display: grid;
    gap: 0.2rem;
}

.einstieg-bild-zahlen strong {
    font-family: var(--schrift-zahl);
    font-size: 1rem;
    font-weight: 400;
    color: var(--farbe-text);
}

.einstieg-mit-bild .feld-hilfe {
    font-size: 0.7rem;
    line-height: 1.6;
}

.einstieg-bild-schild {
    position: absolute;
    z-index: 1;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.45rem 0.7rem;
    background: rgba(17, 32, 26, 0.85);
    border: 1px solid rgba(138, 201, 182, 0.25);
    border-radius: 4px;
    font-family: var(--schrift-zahl);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--farbe-signal);
}

.punkt {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--farbe-signal);
}

/* Konto-Seiten wie im Entwurf: kleine Zeile über dem Titel, Felder mit
   Bezeichnung in Textfarbe, Auge im Passwortfeld (passwort.js), Knopf mit
   Pfeil, darunter abgesetzt der andere Weg. */
.karte-kicker {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--schrift-zahl);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--farbe-signal);
}

.karte-kicker .symbol {
    width: 1rem;
    height: 1rem;
}

.einstieg-mit-bild .feld label {
    color: var(--farbe-text);
    font-size: 0.75rem;
    font-weight: 500;
}

.einstieg-mit-bild .karte-text {
    font-size: 0.82rem;
    line-height: 1.8;
}

.einstieg-mit-bild .knopf-haupt {
    justify-content: space-between;
    padding-inline: 1.05rem;
}

.formular-zeile {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-3);
}

.formular-zeile > a {
    font-size: 0.7rem;
    color: var(--farbe-signal);
}

.einstieg-mit-bild .karte-links {
    margin-top: var(--abstand-3);
    padding-top: 1.4rem;
    border-top: 1px solid var(--farbe-linie);
    color: var(--farbe-text-leise);
    font-size: 0.75rem;
}

.einstieg-mit-bild .karte-links a {
    margin-left: 0.45rem;
}

/* Ohne Linie darüber: nur der Weg zurück (Passwort vergessen, Admin). */
.einstieg-mit-bild .karte-links.karte-links-schlicht {
    padding-top: 0;
    border-top: 0;
    font-size: 0.82rem;
}

.einstieg-mit-bild .karte-links.karte-links-schlicht a {
    margin-left: 0;
}

/* Statusseiten (verify_notice.twig): rundes Zeichen, Adresse im Kasten,
   Knöpfe untereinander. */
.status-zeichen {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin: 1.3rem 0;
    border: 1px solid var(--farbe-linie);
    border-radius: 50%;
    color: var(--farbe-signal);
}

.status-adresse {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(138, 201, 182, 0.35);
    border-left: 3px solid var(--farbe-signal);
    background: var(--farbe-flaeche);
    font-size: 0.8rem;
}

.status-adresse span {
    color: var(--farbe-text-leise);
}

.status-adresse strong {
    font-weight: 400;
    overflow-wrap: anywhere;
}

.knopf-stapel {
    display: grid;
    gap: 0.8rem;
}

.knopf-stapel form {
    margin: 0;
}

.knopf-stapel .knopf-haupt {
    justify-content: space-between;
}

.knopf-stapel .knopf {
    font-size: 0.82rem;
}

.haken a {
    color: var(--farbe-signal);
}

.knopf-stapel + .feld-hilfe {
    margin-top: 1rem;
}

.passwort-feld {
    position: relative;
    display: flex;
}

.passwort-feld input {
    padding-right: 3rem;
}

.passwort-auge {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 2.75rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--farbe-text-stumm);
    cursor: pointer;
}

.passwort-auge[aria-pressed="true"] {
    color: var(--farbe-signal);
    background: var(--farbe-flaeche-hoch);
}

.passwort-auge .symbol {
    width: 1.05rem;
    height: 1.05rem;
}

.einstieg-wechsel {
    font-size: 0.8rem;
    color: var(--farbe-text-leise);
}

footer.einstieg-fuss {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--abstand-3);
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
    padding: 1.5rem 1.9rem;
    border-top: 1px solid var(--farbe-linie);
    font-size: 0.7rem;
}

.einstieg-fuss .sprachwahl {
    justify-self: end;
}

@media (max-width: 56rem) {
    .einstieg-mit-bild {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding: 1.8rem 1.1rem;
        max-width: 30rem;
    }

    .einstieg-bild {
        min-height: 13rem;
        order: -1;
    }

    .einstieg-bild figcaption {
        font-size: 1.2rem;
        left: 1.1rem;
        right: 1.1rem;
        bottom: 1rem;
    }

    .einstieg-mit-bild .karte-titel {
        font-size: 2.4rem;
    }

    .einstieg-bild-titel {
        font-size: 1.6rem;
    }

    .einstieg-bild-text,
    .einstieg-bild-zahlen {
        display: none;
    }

    footer.einstieg-fuss {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .einstieg-fuss .sprachwahl {
        justify-self: start;
    }
}

.karte-titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: var(--groesse-titel);
    line-height: 1.2;
}

.karte-text {
    margin: 0;
    color: var(--farbe-text-leise);
}

.karte-links {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--abstand-2);
    font-size: var(--groesse-klein);
}

.karte-links a {
    color: var(--farbe-signal);
}

/* Felder und Hauptknopf im Einstieg etwas höher, wie im Entwurf. */
.einstieg-mit-bild input[type="text"],
.einstieg-mit-bild input[type="email"],
.einstieg-mit-bild input[type="password"] {
    min-height: 2.95rem;
    background: var(--farbe-flaeche);
}

.einstieg-mit-bild input::placeholder {
    color: var(--farbe-text-stumm);
}

.einstieg-mit-bild .knopf-haupt {
    min-height: 2.9rem;
}

/* ---------- Formulare ---------- */

.formular {
    display: grid;
    gap: var(--abstand-4);
}

.feld {
    display: grid;
    gap: var(--abstand-1);
}

.feld label {
    font-size: var(--groesse-klein);
    color: var(--farbe-text-leise);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: var(--abstand-2) var(--abstand-3);
    font: inherit;
    color: var(--farbe-text);
    background: var(--farbe-grund);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
}

input:focus-visible {
    border-color: var(--farbe-akzent);
}

.feld-hilfe {
    font-size: var(--groesse-klein);
    color: var(--farbe-text-stumm);
}

/* Unsichtbar für Menschen, aber nicht display:none, das erkennen manche Bots. */
.feld-falle {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.haken {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-2);
    font-size: var(--groesse-klein);
    color: var(--farbe-text-leise);
}

.haken input {
    margin-top: 0.2em;
    accent-color: var(--farbe-akzent);
}

/* ---------- Knöpfe ---------- */

.knopf {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--abstand-2);
    padding: var(--abstand-2) var(--abstand-4);
    font: inherit;
    font-weight: 600;
    border-radius: var(--rundung-klein);
    border: 1px solid transparent;
    cursor: pointer;
}

.knopf-haupt {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

.knopf-haupt:hover {
    filter: brightness(1.08);
}

.knopf-leise {
    background: transparent;
    color: var(--farbe-text-leise);
    border-color: var(--farbe-linie);
}

.knopf-leise:hover {
    color: var(--farbe-text);
    border-color: var(--farbe-text-stumm);
}

/* ---------- Meldungen ---------- */

.meldung {
    margin: 0;
    padding: var(--abstand-2) var(--abstand-3);
    border-left: 3px solid var(--farbe-info);
    background: var(--farbe-flaeche-hoch);
    border-radius: var(--rundung-klein);
    font-size: var(--groesse-klein);
}

.meldung-success {
    border-left-color: var(--farbe-gut);
}

.meldung-error {
    border-left-color: var(--farbe-schlecht);
}

.hinweis {
    margin: 0;
    color: var(--farbe-text-leise);
}

/* ---------- Spiel ---------- */

.spiel-kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-4);
    min-height: 4.5rem;
    padding: var(--abstand-3) 1.9rem;
    border-bottom: 1px solid var(--farbe-linie);
    background: var(--farbe-kopf);
}

.konto {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.75rem;
}

.konto-name {
    font-weight: 500;
}

.konto-admin {
    color: var(--farbe-text-leise);
}

/* Abmelden wie im Designentwurf: klein, mit feinem Rahmen. */
.konto-abmelden .knopf {
    min-height: 2.35rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 400;
    border-radius: 4px;
}

.konto-abmelden .knopf:hover {
    color: var(--farbe-akzent);
}

.konto-admin[aria-current="page"],
.konto-admin:hover {
    color: var(--farbe-akzent);
}

.konto-abmelden {
    margin: 0;
}

.spiel-inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: var(--abstand-5) var(--abstand-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--abstand-4);
}

/* minmax(0, …): Die Spalte bleibt so breit wie der Inhalt. Ohne das wächst
   sie mit der 100vw breiten Kugel mit, und die Seite rutscht nach rechts. */
.planet {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-2);
}

.planet-name {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: var(--groesse-gross);
    line-height: 1.1;
}

/* Nur für Bildschirmleser, unsichtbar auf dem Schirm. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Orte: Werte, Blöcke, Queue, Gebäude ---------- */

.ort,
.forschung {
    display: grid;
    /* minmax(0, …): sonst wächst die Spalte mit dem breitesten Inhalt
       (Ortsbild 1600 px) über den Bildschirm hinaus. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-4);
}

.ort-zurueck {
    margin: 0;
    font-size: var(--groesse-klein);
}

.ort-name {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: var(--groesse-gross);
    line-height: 1.1;
}

/* Titelbild des Ortes: Landschaft als breites Band, Name und Beschreibung
   unten links auf einem Verlauf, damit die Schrift auf hellem Himmel und
   Schnee lesbar bleibt. */
.ort-bild {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
    background: var(--farbe-flaeche);
}

.ort-bild img {
    display: block;
    width: 100%;
    height: clamp(11rem, 28vw, 18rem);
    object-fit: cover;
    object-position: center 60%;
}

.ort-bild-fremd img {
    filter: brightness(0.6) saturate(0.7);
}

.ort-bild-text {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--abstand-6) var(--abstand-5) var(--abstand-3);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    color: #fff;
}

.ort-bild-text p {
    margin: var(--abstand-1) 0 0;
    font-size: var(--groesse-klein);
    color: rgba(255, 255, 255, 0.85);
}

/* Am Handy ist das Band zu niedrig für Text auf dem Bild: Bild ganz (16:9),
   Name und Beschreibung darunter. */
@media (max-width: 40rem) {
    .ort-bild img {
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .ort-bild-text {
        position: static;
        padding: var(--abstand-3) var(--abstand-4);
        background: none;
    }

    .ort-bild-text .ort-name {
        font-size: var(--groesse-titel);
    }
}

/* ---------- Ortsübersicht (Designentwurf) ----------
   Oben das Ortsbild groß, daneben die Versorgung im Stil des
   Bordcomputers; darunter der Ortsstatus als Karten. */
.ueberblick {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(16.5rem, 1fr);
    gap: 1.2rem;
}

.ort-bild.ort-bild-held {
    min-height: 22.5rem;
    isolation: isolate;
}

.ort-bild.ort-bild-held img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 58% 50%;
}

.ort-bild.ort-bild-held::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(10, 23, 27, 0.91) 0%, rgba(17, 36, 35, 0.41) 43%, rgba(21, 40, 41, 0.02) 80%),
        linear-gradient(90deg, rgba(15, 33, 31, 0.31), transparent);
}

.ort-bild-status {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35rem 0.55rem;
    font-family: var(--schrift-zahl);
    font-size: 0.6rem;
    color: #c8e4cc;
    background: rgba(17, 32, 26, 0.85);
    border: 1px solid rgba(200, 228, 204, 0.27);
    border-radius: 3px;
}

.status-punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--farbe-signal);
}

.ort-bild.ort-bild-held .ort-bild-text {
    position: absolute;
    inset: auto 1.75rem 1.75rem;
    padding: 0;
    background: none;
}

.ort-bild.ort-bild-held .ort-bild-art {
    margin: 0 0 0.6rem;
    font-family: var(--schrift-zahl);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #c6d4c6;
}

.ort-bild.ort-bild-held .ort-name {
    margin: 0 0 0.8rem;
    font-size: 2.75rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ort-bild.ort-bild-held .ort-bild-text p:last-child {
    max-width: 38em;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #d2dbd3;
}

.versorgung {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.45rem 1.5rem;
    background: radial-gradient(ellipse at right top, rgba(138, 201, 182, 0.05), transparent 70%), var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.versorgung-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1.1rem;
    font-family: var(--schrift-zahl);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--farbe-signal);
}

.versorgung-kopf .symbol {
    width: 1.05rem;
    height: 1.05rem;
}

.versorgung-symbol {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(138, 201, 182, 0.2);
    border-radius: 50%;
    background: rgba(138, 201, 182, 0.03);
    color: var(--farbe-signal);
}

.versorgung-art {
    margin: 0 0 0.4rem;
    font-family: var(--schrift-zahl);
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
}

.versorgung-titel {
    margin: 0 0 0.7rem;
    font-size: 1.9rem;
    line-height: 1.15;
}

.versorgung-text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--farbe-text-leise);
}

.versorgung-text.is-knapp {
    color: var(--farbe-schlecht);
}

.versorgung-raten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    margin: 1.25rem 0;
    font-size: 0.65rem;
    color: var(--farbe-text-stumm);
}

.versorgung-raten > span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.versorgung-raten .symbol {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--farbe-signal);
}

.versorgung-raten strong {
    font-family: var(--schrift-zahl);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--farbe-signal);
}

.versorgung-raten .is-minus strong {
    color: var(--farbe-schlecht);
}

.versorgung > .knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    margin-top: auto;
    padding-inline: 1rem;
}

.versorgung-fuss {
    width: 100%;
    margin: 0.55rem 0 0;
    font-size: 0.58rem;
    text-align: center;
    color: var(--farbe-text-stumm);
}

.ortsstatus {
    display: grid;
    gap: 1rem;
}

.abschnitt-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-4);
    margin-top: 0.6rem;
}

.abschnitt-kopf h2 {
    margin: 0;
    font-size: 1.65rem;
}

.status-karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.status-karte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.3rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.status-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
    color: var(--farbe-text-leise);
}

.status-kopf .symbol {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--farbe-signal);
}

.status-kopf small {
    margin-left: auto;
    font-family: var(--schrift-zahl);
    font-size: 0.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
}

.status-zahl {
    margin: 0.8rem 0 0.6rem;
    font-family: var(--schrift-zahl);
    font-size: 1.85rem;
    line-height: 1.5;
    letter-spacing: -0.03em;
}

.status-zahl.is-minus {
    color: var(--farbe-schlecht);
}

.status-zahl small {
    margin-left: 0.55rem;
    font-family: var(--schrift-text);
    font-size: 0.7rem;
    letter-spacing: 0;
    color: var(--farbe-text-stumm);
}

.status-karte .bauliste-balken {
    margin-bottom: 0.1rem;
}

.status-text {
    margin: 0.6rem 0 0.75rem;
    font-size: 0.7rem;
    color: var(--farbe-text-leise);
}

.status-notiz {
    margin: 0;
    font-size: 0.62rem;
    color: var(--farbe-text-stumm);
}

.status-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: auto;
    font-size: 0.7rem;
    color: var(--farbe-signal);
}

.status-link .symbol {
    width: 1rem;
    height: 1rem;
}

/* Ortsleiste: Ortstyp und Zustand unter der Auswahl, Bauplatz und
   Bauaufträge unten. */
.ortswahl-info {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    color: var(--farbe-text-stumm);
}

.ort-leiste-zahlen {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    align-self: end;
    padding: 1.4rem 0.45rem 0;
    border-top: 1px solid var(--farbe-linie);
    font-size: 0.65rem;
    color: var(--farbe-text-stumm);
}

.ort-leiste-zahlen div {
    display: flex;
    justify-content: space-between;
    gap: var(--abstand-2);
}

.ort-leiste-zahlen dd {
    margin: 0;
    font-family: var(--schrift-zahl);
    color: var(--farbe-text-leise);
}

@media (max-width: 65rem) {
    .ueberblick {
        grid-template-columns: minmax(0, 1fr);
    }

    .ort-bild.ort-bild-held {
        min-height: 20.5rem;
    }

    .versorgung {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.3rem 1.25rem;
    }

    .versorgung-kopf {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }

    .versorgung-symbol {
        display: none;
    }

    .versorgung-art,
    .versorgung-titel,
    .versorgung-text,
    .versorgung-raten {
        grid-column: 1;
    }

    .versorgung-raten {
        margin: 0.75rem 0 0;
    }

    .versorgung > .knopf {
        grid-column: 2;
        grid-row: 2 / 5;
        align-self: center;
        width: 12.5rem;
        white-space: nowrap;
    }

    .versorgung-fuss {
        grid-column: 2;
        margin: 0;
    }
}

@media (max-width: 44rem) {
    .versorgung {
        display: flex;
        padding: 1.35rem;
    }

    .versorgung > .knopf {
        width: 100%;
    }

    .versorgung-raten {
        margin: 1.05rem 0;
    }
}

@media (max-width: 35rem) {
    .ort-bild.ort-bild-held {
        min-height: 19.4rem;
    }

    .ort-bild.ort-bild-held .ort-bild-text {
        inset: auto 1.35rem 1.45rem;
    }

    .ort-bild.ort-bild-held .ort-name {
        font-size: 2.55rem;
    }

    .status-karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .status-karte {
        padding: 1.05rem;
    }

    .status-karte:last-child {
        grid-column: 1 / -1;
    }

    .status-zahl {
        font-size: 1.8rem;
    }

    .status-karte:not(:last-child) .status-zahl small {
        display: block;
        margin: 0;
    }

    .status-kopf small {
        display: none;
    }
}

/* ---------- Forschung, Transporte, Arche, Logbuch (Designentwurf) ----------
   Gemeinsame Bausteine: Einleitung, drei Kennzahlen, Module mit Kopf,
   Faktenliste (Begriff links, Wert rechts in Plex Mono). */
.modul-text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--farbe-text-leise);
}

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.kennzahl {
    display: grid;
    padding: 1.05rem 1.25rem;
    background: var(--farbe-flaeche-hoch);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
}

.kennzahl strong {
    font-family: var(--schrift-zahl);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
}

.kennzahl span:not(.js-wert) {
    font-size: 0.7rem;
    color: var(--farbe-text-stumm);
}

.modul {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    padding: 1.45rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.modul-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-4);
}

.modul-kopf h2 {
    margin: 0;
    font-size: 1.7rem;
}

.pille {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    font-family: var(--schrift-zahl);
    font-size: 0.58rem;
    line-height: 1.5;
    color: var(--farbe-signal);
    background: rgba(138, 201, 182, 0.03);
    border: 1px solid rgba(138, 201, 182, 0.2);
    border-radius: 4px;
    white-space: nowrap;
}

.knopf-breit {
    width: 100%;
    justify-content: center;
    min-height: 2.6rem;
}

.modul .knopf {
    font-size: 0.82rem;
}

.text-knopf {
    padding: 0.3rem 0;
    font: inherit;
    font-size: 0.75rem;
    color: var(--farbe-signal);
    background: none;
    border: 0;
    cursor: pointer;
}

.text-knopf:hover,
.status-link:hover {
    color: var(--farbe-akzent);
}

.fakten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1.25rem;
    margin: 0.4rem 0 0.6rem;
    font-size: 0.75rem;
}

.fakten dt {
    color: var(--farbe-text-leise);
}

.fakten dd {
    margin: 0;
    font-family: var(--schrift-zahl);
    font-size: 0.7rem;
    text-align: right;
}

.geb-fertig {
    margin: 0;
}

.forschung > .abschnitt-kopf {
    margin-top: 0.4rem;
}

/* Transport: Ziel über die ganze Breite, Vorräte in zwei Spalten. */
.modul .transport {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem;
    max-width: none;
}

.modul .transport-ziel {
    max-width: none;
}

.modul .transport .feld label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--farbe-text);
    font-size: 0.75rem;
}

.modul .transport .feld label .symbol {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--farbe-signal);
}

.modul .transport .feld-hilfe {
    font-size: 0.68rem;
}

.transport-passt {
    margin: 0;
    font-family: var(--schrift-zahl);
    font-size: 0.7rem;
    color: var(--farbe-signal);
}

.modul .transport .knopf {
    justify-self: stretch;
    justify-content: space-between;
    min-height: 3rem;
    padding-inline: 1rem;
}

/* Arche: beide Wege gleich breit nebeneinander. */
.arche .arche-wahl {
    gap: 0.8rem;
}

.arche .arche-wahl form {
    flex: 1 1 14rem;
}

/* Logbuch: Kopf mit den Verweisen, Einträge als Liste in einer Fläche. */
.logbuch-kopf {
    flex-wrap: wrap;
    margin-top: 0;
}

.logbuch-kopf .logbuch-knoepfe {
    align-items: center;
    gap: 0.4rem 1.6rem;
}

.logbuch-kopf .status-link,
.logbuch-kopf .text-knopf {
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.transporte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.modul .transport select {
    min-height: 2.9rem;
    font-size: 0.82rem;
}

.logbuch .logbuch-eintraege {
    gap: 0;
    padding: 0.3rem 1.55rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.logbuch .logbuch-eintrag {
    gap: 0.35rem;
    padding: 1.1rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--farbe-linie);
}

.logbuch-eintrag:last-child {
    border-bottom: 0;
}

.logbuch-eintrag .logbuch-tag {
    font-family: var(--schrift-zahl);
    font-size: 0.58rem;
    color: var(--farbe-text-stumm);
}

@media (max-width: 35rem) {
    .kennzahlen {
        gap: 0.5rem;
    }

    .kennzahl {
        padding: 0.8rem 0.75rem;
    }

    .kennzahl strong {
        font-size: 1.15rem;
    }

    .kennzahl span:not(.js-wert) {
        font-size: 0.62rem;
    }

    .modul {
        padding: 1.2rem;
    }

    .modul-kopf h2 {
        font-size: 1.45rem;
    }

    .modul .transport {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Ortsseite: Vorratsleiste, Kopf, Faktoren ----------
   Wie im Designentwurf: Die Vorräte stehen als Leiste über dem Inhalt,
   getrennt durch feine Linien; Zahlen in Plex Mono. */
.ort-haupt {
    min-width: 0;
}

.werte {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 1.25rem 2.4rem;
    background: #131d20;
    border-bottom: 1px solid var(--farbe-linie);
}

.wert {
    display: grid;
    align-content: start;
    min-width: 0;
    padding: 0 1rem;
    border-right: 1px solid var(--farbe-linie);
}

.wert:first-child {
    padding-left: 0;
}

.wert:last-child {
    padding-right: 0;
    border-right: 0;
}

.wert-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    color: var(--farbe-text-leise);
}

.wert-name .symbol {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--farbe-text-stumm);
}

.wert-zahl {
    margin: 0.2rem 0;
    font-family: var(--schrift-zahl);
    white-space: nowrap;
    line-height: 1.4;
}

.wert-zahl strong {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.wert-zahl small {
    font-size: 0.65rem;
    color: var(--farbe-text-stumm);
}

.wert-rate {
    font-size: 0.65rem;
    line-height: 1.55;
    color: var(--farbe-text-stumm);
}

.wert-rate.is-minus,
.wert.is-knapp .wert-zahl strong {
    color: var(--farbe-schlecht);
}

@media (max-width: 65rem) {
    .werte {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 0.75rem;
        padding: 1rem 1.6rem;
    }

    .wert,
    .wert:first-child {
        padding: 0 0.9rem;
    }

    .wert:nth-child(3n + 1) {
        padding-left: 0;
    }

    .wert:nth-child(3n) {
        border-right: 0;
    }

    .wert:nth-child(n + 4) {
        padding-top: 0.75rem;
        border-top: 1px solid var(--farbe-linie);
    }
}

@media (max-width: 35rem) {
    .werte {
        padding: 0.8rem 0.75rem;
    }

    .wert,
    .wert:first-child {
        padding: 0 0.55rem;
    }

    .wert:nth-child(n + 4) {
        padding-top: 0.6rem;
    }

    .wert-zahl strong {
        font-size: 1.05rem;
    }

    .wert-zahl small,
    .wert-rate {
        font-size: 0.58rem;
    }
}

.ort-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-4);
}

.ort-pfad {
    margin: 0 0 0.5rem;
    font-family: var(--schrift-zahl);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
}

.ort-pfad a {
    color: var(--farbe-text-stumm);
}

.ort-pfad a:hover {
    color: var(--farbe-signal);
}

.ort-titel {
    margin: 0;
    font-size: 2.9rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.ort-platz {
    font-family: var(--schrift-zahl);
    font-size: 0.65rem;
    color: var(--farbe-text-stumm);
    white-space: nowrap;
}

.ort-faktoren {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin: -0.3rem 0 0;
    font-family: var(--schrift-zahl);
    font-size: 0.6rem;
    color: var(--farbe-signal);
}

@media (max-width: 35rem) {
    .ort-titel {
        font-size: 2.3rem;
    }
}

.block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-3);
    padding: var(--abstand-4) var(--abstand-5);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.block-titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 400;
    font-size: 1.4rem;
}

.block-titel small {
    font-size: var(--groesse-klein);
    font-weight: 400;
    color: var(--farbe-text-stumm);
}

.block-text {
    margin: 0;
    color: var(--farbe-text-leise);
}

.arche-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
}

.arche-wahl form {
    margin: 0;
}

.queue {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--abstand-2);
}

.queue-eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-3);
}

.queue-was {
    flex: 1;
    min-width: 10rem;
}

.queue-was small,
.queue-zeit {
    color: var(--farbe-text-stumm);
    font-variant-numeric: tabular-nums;
}

.queue-abbruch {
    margin: 0;
}

/* ---------- Bau-Queue (_ort_queue.twig) ---------- */
.block-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--abstand-3);
}

.block-zahl {
    font-family: var(--schrift-zahl);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
}

.bauliste-leer {
    display: flex;
    align-items: center;
    gap: var(--abstand-3);
    margin: 0;
    color: var(--farbe-text-leise);
    font-size: 0.85rem;
}

.bauliste-leer .symbol {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--farbe-text-stumm);
}

.bauliste-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bauliste-auftrag {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr) 1.9rem;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--farbe-linie);
}

.bauliste-auftrag:last-child {
    border-bottom: 0;
}

.bauliste-nr {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 2.1rem;
    border-radius: 4px;
    background: var(--farbe-flaeche-hoch);
    font-family: var(--schrift-zahl);
    font-size: 0.62rem;
    color: var(--farbe-text-leise);
}

.bauliste-zeile {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.2rem 0.75rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
}

.bauliste-was {
    color: var(--farbe-text-leise);
}

.bauliste-was strong {
    color: var(--farbe-text);
    font-weight: 600;
}

.bauliste-zeit {
    font-family: var(--schrift-zahl);
    font-size: 0.62rem;
    color: var(--farbe-signal);
}

.bauliste-balken {
    display: block;
    width: 100%;
    height: 3px;
    border: 0;
    border-radius: 2px;
    background: var(--farbe-linie);
    appearance: none;
    overflow: hidden;
}

.bauliste-balken::-webkit-progress-bar {
    background: var(--farbe-linie);
}

.bauliste-balken::-webkit-progress-value {
    background: var(--farbe-signal);
}

.bauliste-balken::-moz-progress-bar {
    background: var(--farbe-signal);
}

.bauliste-ab {
    margin: 0;
    display: grid;
    place-items: center;
}

.bauliste-x {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--farbe-text-leise);
    cursor: pointer;
}

.bauliste-x:hover {
    color: var(--farbe-schlecht);
    background: var(--farbe-flaeche-hoch);
}

.bauliste-x .symbol {
    width: 1rem;
    height: 1rem;
}

/* ---------- Gebäudekarten (_ort_gebaeude.twig), Forschung nutzt .geb mit ---------- */
.geb-werkzeug {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-3);
    margin-bottom: var(--abstand-4);
}

.js .geb-werkzeug {
    display: flex;
}

.geb-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.geb-filter button {
    min-height: 2.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--rundung-klein);
    background: none;
    color: var(--farbe-text-leise);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.geb-filter button[aria-pressed="true"] {
    border-color: rgba(138, 201, 182, 0.3);
    background: rgba(138, 201, 182, 0.06);
    color: var(--farbe-signal);
}

.geb-suche {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 12.5rem);
}

.geb-suche .symbol {
    position: absolute;
    left: 0.75rem;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--farbe-text-stumm);
    pointer-events: none;
}

.geb-suche input {
    width: 100%;
    min-height: 2.4rem;
    padding: 0.5rem 0.75rem 0.5rem 2.2rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font: inherit;
    font-size: 0.78rem;
}

.gebaeude {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
}

.geb {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.4rem 1.5rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.geb-kopf {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.geb-symbol {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--farbe-linie);
    border-radius: 6px;
    background: var(--farbe-grund);
    color: var(--farbe-signal);
}

.geb-name {
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.15;
}

.geb-stufe {
    margin: 0.15rem 0 0;
    font-family: var(--schrift-zahl);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
}

.geb-text {
    margin: 0;
    font-size: 0.8rem;
    color: var(--farbe-text-leise);
}

.geb-sperre {
    font-size: 0.72rem;
    color: var(--farbe-text-stumm);
}

.geb-ertrag {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--abstand-3);
    padding: 0.75rem 0;
    border-top: 1px solid var(--farbe-linie);
    border-bottom: 1px solid var(--farbe-linie);
    font-size: 0.75rem;
    color: var(--farbe-text-leise);
}

.geb-ertrag > span:first-child {
    display: grid;
}

.geb-ertrag small {
    font-size: 0.65rem;
    color: var(--farbe-text-stumm);
}

.geb-ertrag-zahl {
    display: grid;
    justify-items: end;
    font-family: var(--schrift-zahl);
}

.geb-ertrag-zahl strong {
    font-size: 1.55rem;
    font-weight: 400;
    color: var(--farbe-signal);
    line-height: 1.2;
}

.geb-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-3);
    font-family: var(--schrift-zahl);
    font-size: 0.72rem;
}

.geb-kosten {
    display: flex;
    gap: 0.9rem;
}

.geb-kosten > span,
.geb-zeit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.geb-meta .symbol {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--farbe-text-stumm);
}

.geb-zeit {
    font-size: 0.62rem;
    color: var(--farbe-text-leise);
}

.is-fehlt {
    color: var(--farbe-schlecht);
}

.geb-bedarf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin: 0;
    font-size: 0.7rem;
    color: var(--farbe-text-stumm);
}

.geb-bedarf b {
    font-family: var(--schrift-zahl);
    font-weight: 400;
    font-size: 0.62rem;
    color: var(--farbe-text-leise);
}

.geb-daten {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--abstand-3);
    font-size: var(--groesse-klein);
}

.geb-daten dt {
    color: var(--farbe-text-stumm);
}

.geb-daten dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.geb-bauen {
    margin: 0;
    display: grid;
    gap: var(--abstand-1);
}

.geb-bauen .knopf-haupt {
    justify-content: space-between;
    min-height: 2.75rem;
    padding-inline: 1rem;
}

.geb-keine {
    margin: var(--abstand-4) 0 0;
    color: var(--farbe-text-leise);
}

@media (max-width: 35rem) {
    .geb-filter {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }

    .geb-filter button {
        padding: 0.45rem 0.2rem;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .geb-suche {
        width: 100%;
    }

    .geb {
        padding: 1.2rem 1.1rem;
    }
}

.knopf:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
}

/* Gesperrter Hauptknopf wie im Designentwurf: grau statt blasses Orange. */
.knopf-haupt:disabled {
    opacity: 1;
    color: var(--farbe-text-leise);
    background: #333e3d;
    border-color: var(--farbe-linie);
}

/* Die Kugel auf der Hauptseite. Die Seite gehört dem Planeten: Die Fläche
   reicht über die ganze Fensterbreite und fast die ganze Höhe, der Planet
   steht ohne Sterne direkt auf dem Seitenhintergrund. 100vw zählt die Bildlaufleiste
   mit, deshalb schneidet body das Überstehende ab.
   Die Orte sind Knöpfe darüber, planet-kugel.js setzt ihre Lage und öffnet
   beim Klick das Menü (.kugel-menue). */
.kugel {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: max(22rem, calc(100svh - 11rem));
    overflow: hidden;
    touch-action: none;
}

body:has(.kugel) {
    overflow-x: clip;
}

html:not(.js) .kugel,
.kugel.is-ohne-3d {
    display: none;
}

/* Hinweis, solange die Karten des Planeten entstehen. */
.kugel-laedt {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--farbe-text-leise);
    font-size: var(--groesse-klein);
    letter-spacing: 0.08em;
    pointer-events: none;
    animation: kugel-atmen 1.6s ease-in-out infinite alternate;
}

.kugel.is-bereit .kugel-laedt {
    display: none;
}

@keyframes kugel-atmen {
    from { opacity: 0.45; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .kugel-laedt {
        animation: none;
    }
}

/* Die Liste der Orte nur, wenn keine Kugel da ist (ohne JavaScript oder
   ohne WebGL), sonst käme man an keinen Ort. */
.js .planet-liste {
    display: none;
}

.planet-hilfe {
    margin: 0;
    padding: 0.25rem 0.75rem 0.8rem;
    font-size: 0.62rem;
    text-align: center;
    color: var(--farbe-text-stumm);
}

.kugel.is-ohne-3d ~ .planet-hilfe,
html:not(.js) .planet-hilfe {
    display: none;
}

.js .kugel.is-ohne-3d ~ .planet-liste {
    display: block;
}

.kugel-leinwand {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.kugel-leinwand:active {
    cursor: grabbing;
}

.kugel-ort {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
    margin: -7px 0 0 -7px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--farbe-text);
    font-size: var(--groesse-klein);
    text-shadow: 0 1px 3px var(--farbe-nacht), 0 0 8px var(--farbe-nacht);
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.kugel-ort:hover,
.kugel-ort:focus-visible,
.kugel-ort[aria-expanded="true"] {
    color: var(--farbe-akzent);
}

.kugel-punkt {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--farbe-text);
    background: transparent;
    box-shadow: 0 0 6px var(--farbe-nacht);
}

.kugel-ort.is-besiedelt .kugel-punkt {
    border-color: var(--farbe-akzent);
    background: var(--farbe-akzent);
    box-shadow: 0 0 10px var(--farbe-akzent);
}

/* Unentdeckt: ein Fragezeichen statt Punkt und Namen, zurückhaltend. */
.kugel-ort.is-verborgen {
    margin: -9px 0 0 -9px;
}

.kugel-ort.is-verborgen .kugel-punkt {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px dashed var(--farbe-text-leise);
    background: var(--farbe-schleier);
    color: var(--farbe-text-leise);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
}

.kugel-ort.is-verborgen:hover .kugel-punkt,
.kugel-ort.is-verborgen[aria-expanded="true"] .kugel-punkt {
    border-color: var(--farbe-akzent);
    color: var(--farbe-akzent);
}

.kugel-ort.is-hinten {
    opacity: 0;
    pointer-events: none;
}

/* Menü am Ort: klein und leicht durchscheinend, steht rechts oberhalb des
   Punkts und wandert mit ihm. */
.kugel-menue {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: max-content;
    max-width: min(15rem, calc(100vw - 2rem));
    display: grid;
    gap: 0.15rem;
    padding: var(--abstand-2) var(--abstand-3);
    background: rgba(16, 21, 31, 0.86);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
    box-shadow: 0 6px 18px var(--farbe-schleier);
    font-size: var(--groesse-klein);
}

.kugel-menue[hidden] {
    display: none;
}

.kugel-menue-titel {
    margin: 0;
    font-weight: 700;
    padding-right: var(--abstand-4);
}

.kugel-menue-text {
    margin: 0;
    color: var(--farbe-text-leise);
    font-size: 0.8rem;
}

.kugel-menue-los {
    justify-self: start;
    margin-top: var(--abstand-2);
    padding: 0.2rem var(--abstand-3);
    font-size: 0.8rem;
}

.kugel-menue-form {
    display: grid;
    gap: 0.15rem;
    margin: var(--abstand-2) 0 0;
}

.kugel-menue-form[hidden],
.kugel-menue-sperre[hidden] {
    display: none;
}

.kugel-menue-info,
.kugel-menue-sperre {
    margin: 0;
    font-size: 0.8rem;
    color: var(--farbe-text-stumm);
}

.kugel-menue-erkunden {
    justify-self: start;
    margin-top: var(--abstand-1);
    padding: 0.2rem var(--abstand-3);
    font-size: 0.8rem;
}

.kugel-menue-erkunden:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kugel-menue-zu {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    padding: var(--abstand-1) var(--abstand-2);
    border: 0;
    background: none;
    color: var(--farbe-text-stumm);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.kugel-menue-zu:hover {
    color: var(--farbe-text);
}

.orte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--abstand-2);
}

.orte-eintrag {
    display: flex;
    gap: var(--abstand-3);
    align-items: baseline;
}

.orte-eintrag small {
    color: var(--farbe-text-stumm);
}

.orte-eintrag.is-besiedelt a {
    font-weight: 600;
}

/* Besiedeln und Transport: die Felder nebeneinander, am Handy zu zweit. */
.besiedeln,
.transport {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    align-items: start;
    max-width: var(--breite-text);
}

.besiedeln .knopf,
.transport .knopf {
    grid-column: 1 / -1;
    justify-self: start;
}

.besiedeln-name,
.transport-ziel {
    grid-column: 1 / -1;
    max-width: 24rem;
}

/* ---------- Logbuch ---------- */

.logbuch {
    display: grid;
    gap: var(--abstand-4);
}

.logbuch-eintraege {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--abstand-3);
}

.logbuch-eintrag {
    display: grid;
    gap: var(--abstand-1);
}

.logbuch-tag {
    font-size: var(--groesse-klein);
    color: var(--farbe-text-stumm);
}

/* ---------- Rechtstexte ---------- */

.recht {
    display: grid;
    gap: var(--abstand-3);
}

.recht h2 {
    margin: var(--abstand-4) 0 0;
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
}

.recht p,
.recht ul {
    margin: 0;
    color: var(--farbe-text-leise);
}

.recht ul {
    padding-left: var(--abstand-5);
}

.recht-stand {
    font-size: var(--groesse-klein);
    color: var(--farbe-text-stumm);
}

/* ---------- Fuß ---------- */

.fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--abstand-4);
    padding: var(--abstand-4);
    color: var(--farbe-text-stumm);
    font-size: var(--groesse-klein);
}

.fuss p {
    margin: 0;
}

.fuss-links {
    display: flex;
    gap: var(--abstand-4);
}

.fuss-links a {
    color: var(--farbe-text-stumm);
}

.fuss-links a:hover {
    color: var(--farbe-text);
}

/* ---------- Seiten mit Menü links: Ort und Adminbereich ---------- */

/* Zurück zum Planeten: abgesetzt unter den Teilen des Ortes. */
.seiten-menue a.seiten-menue-zurueck {
    margin-top: 1.25rem;
    border-top-color: var(--farbe-linie);
    border-radius: 0;
    padding-top: 1.25rem;
}

/* ---------- Ortsseite: Leiste links mit Ortswahl und Menü ----------
   Die Leiste sitzt am linken Rand unter der Kopfleiste; am Handy wird das
   Menü zur Leiste am unteren Rand (Designentwurf docs/prototyp). */

.spiel-inhalt:has(.ort-seite) {
    max-width: none;
    padding: 0;
}

/* Meldungen über Orts- und Adminseiten nicht randlos am Kopf. */
.spiel-inhalt:has(.ort-seite) > .meldung {
    margin: 1rem 1.25rem 0;
}

.ort-seite {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
}

.ort-leiste {
    position: sticky;
    top: 4.5rem;
    min-height: calc(100vh - 4.5rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1.75rem;
    padding: 1.9rem 1.3rem;
    background: var(--farbe-kopf);
    border-right: 1px solid var(--farbe-linie);
}

.ort-seite .ort {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 1.8rem 2.4rem 2.5rem;
    gap: 1.25rem;
}

.ortswahl {
    display: grid;
    gap: var(--abstand-2);
    padding: 0 0.45rem;
}

.ortswahl-titel {
    font-family: var(--schrift-zahl);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
}

.ortswahl select {
    width: 100%;
    min-height: 2.7rem;
    padding: 0.6rem 0.5rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font: inherit;
    font-size: 0.8rem;
}

.js .ortswahl-los {
    display: none;
}

.seiten-menue {
    display: grid;
    gap: 0.45rem;
}

.seiten-menue a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.95rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--rundung-klein);
    color: var(--farbe-text-leise);
    font-size: 0.82rem;
}

.seiten-menue a:hover {
    background: rgba(255, 255, 255, 0.02);
    color: var(--farbe-text);
}

.seiten-menue a[aria-current="page"] {
    background: rgba(138, 201, 182, 0.045);
    border-color: rgba(138, 201, 182, 0.17);
    color: var(--farbe-signal);
}

/* ---------- Adminbereich (Designentwurf) ----------
   Dieselbe Hülle wie die Ortsseite (.ort-seite, .ort-leiste, .seiten-menue):
   Leiste links, am Handy unten. Kopf mit „Bestätigter Zugriff“, Kennzahlen,
   Spieler als Karten, Einstellungen als klappbare Gruppen. */

.admin-leiste {
    grid-template-rows: auto auto;
    align-content: start;
}

.admin-leiste-titel {
    margin: 0.25rem 0.6rem 0;
}

.admin-kopf .pille .symbol {
    width: 0.8rem;
    height: 0.8rem;
}

.admin .kennzahl {
    gap: 0.25rem;
    padding: 1.05rem 1.25rem;
    background: var(--farbe-flaeche);
}

.admin .kennzahl span:first-child {
    font-size: 0.7rem;
    color: var(--farbe-text-leise);
}

.kennzahl-wort {
    font-family: var(--schrift-text) !important;
}

.pille.is-warnung {
    color: var(--farbe-akzent);
    border-color: rgba(232, 178, 116, 0.27);
    background: rgba(232, 178, 116, 0.03);
}

.pille.is-schlecht {
    color: var(--farbe-schlecht);
    border-color: rgba(225, 160, 144, 0.27);
    background: none;
}

.admin-suche {
    display: flex;
    gap: 0.6rem;
    max-width: 30rem;
}

.admin-suche input {
    flex: 1 1 10rem;
    min-height: 2.75rem;
}

.admin-suche .knopf {
    font-size: 0.8rem;
}

.admin-spieler {
    gap: 0;
}

.admin-spieler.is-gesperrt {
    border-color: rgba(225, 160, 144, 0.35);
}

.admin-spieler-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.admin-spieler-zeichen {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid rgba(138, 201, 182, 0.2);
    border-radius: 7px;
    background: rgba(138, 201, 182, 0.03);
    color: var(--farbe-signal);
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
}

.admin-spieler-titel {
    flex: 1;
    min-width: 0;
}

.admin-spieler-titel h2 {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.2;
}

.admin-spieler-titel p {
    margin: 0;
    font-size: 0.7rem;
    color: var(--farbe-text-stumm);
    overflow-wrap: anywhere;
}

.admin-spieler-daten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.45rem;
    margin: 1.1rem 0 0;
    font-size: 0.7rem;
    color: var(--farbe-text-leise);
}

.admin-spieler-daten b {
    font-weight: 400;
    color: var(--farbe-text-stumm);
}

.admin-spieler .modul-text,
.admin-spieler .status-notiz {
    margin-top: 0.9rem;
}

.admin-spieler-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--farbe-linie);
}

.admin-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    margin: 0;
}

.admin-zeile-sperre {
    flex: 1 1 26rem;
}

.admin-zeile:not(.admin-zeile-sperre) {
    flex-wrap: nowrap;
}

.admin-zeile .feld {
    gap: 0.3rem;
    flex: 0 1 11rem;
}

.admin-zeile .admin-zeile-grund {
    flex: 1 1 12rem;
}

.admin-zeile .feld span {
    font-size: 0.65rem;
    color: var(--farbe-text-leise);
}

.admin-zeile select,
.admin-zeile input,
.admin-zeile .knopf {
    min-height: 2.5rem;
    font-size: 0.75rem;
}

.admin-zeile .knopf {
    white-space: nowrap;
}

.admin-zeile input {
    width: 100%;
}

.knopf.is-schlecht {
    color: var(--farbe-schlecht);
    border-color: rgba(225, 160, 144, 0.35);
}

/* Konto löschen: zugeklappt unter den Aktionen, aufgeklappt mit Namensfeld. */
.admin-loeschen {
    flex: 1 1 100%;
}

.admin-loeschen > summary {
    width: fit-content;
    font-size: 0.72rem;
    color: var(--farbe-schlecht);
    cursor: pointer;
}

.admin-loeschen > .admin-zeile {
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.admin-loeschen .modul-text {
    flex: 1 1 100%;
    margin: 0;
}

/* Einstellungen: Gruppen mit Titel in Spectral und Plus/Minus rechts. */
.admin-gruppe {
    overflow: hidden;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.admin-gruppe > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.45rem;
    font-family: var(--schrift-titel);
    font-weight: 300;
    font-size: 1.55rem;
    list-style: none;
    cursor: pointer;
}

.admin-gruppe > summary::-webkit-details-marker {
    display: none;
}

.admin-gruppe > summary::after {
    content: "+";
    font-family: var(--schrift-text);
    font-size: 1.2rem;
    color: var(--farbe-text-stumm);
}

.admin-gruppe[open] > summary::after {
    content: "\2212";
}

.admin-gruppe[open] > summary {
    border-bottom: 1px solid var(--farbe-linie);
}

.admin-gruppe > form {
    gap: 1.4rem;
    max-width: 52rem;
    padding: 1.45rem;
}

.admin-gruppe .feld > label:not(.schalter) {
    color: var(--farbe-text);
    font-size: 0.8rem;
}

.admin-gruppe .feld-hilfe {
    font-size: 0.68rem;
    line-height: 1.6;
}

.admin-gruppe .feld-zahl {
    grid-template-columns: minmax(0, 1fr) 8rem;
    gap: 0.4rem 1.9rem;
    align-items: start;
}

.admin-gruppe .feld-zahl > label {
    grid-column: 1;
    grid-row: 1;
}

.admin-gruppe .feld-zahl > .feld-hilfe {
    grid-column: 1;
    grid-row: 2;
}

.admin-gruppe .feld-zahl > input {
    grid-column: 2;
    grid-row: 1 / 3;
    font-family: var(--schrift-zahl);
}

.admin-gruppe .knopf {
    justify-self: start;
    gap: 1rem;
    min-height: 2.7rem;
    font-size: 0.78rem;
}

.admin-gruppe textarea {
    resize: vertical;
}

.schalter {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    color: var(--farbe-text);
    font-size: var(--groesse-text);
}

.feld .schalter {
    color: var(--farbe-text);
    font-size: 0.8rem;
}

/* Migrationen: Tabelle in einer Fläche, Kopf in Plex Mono. */
.admin-tabelle-rahmen {
    overflow-x: auto;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.admin-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.admin-tabelle th,
.admin-tabelle td {
    padding: 1.05rem 1.25rem;
    text-align: left;
    vertical-align: middle;
    border-top: 1px solid var(--farbe-linie);
    color: var(--farbe-text-leise);
}

.admin-tabelle th {
    border-top: 0;
    font-family: var(--schrift-zahl);
    font-size: 0.56rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
    background: var(--farbe-flaeche-hoch);
}

.admin-tabelle td:first-child {
    color: var(--farbe-text);
}

.admin-tabelle code {
    font-family: var(--schrift-zahl);
    font-size: 0.65rem;
}

.admin-tabelle-zeit {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    color: var(--farbe-text-leise);
}

/* Passwortabfrage vor dem Adminbereich: zwei Spalten wie der Einstieg. */
.spiel-inhalt:has(.admin-zugang) {
    max-width: 74rem;
}

.admin-zugang {
    display: grid;
}

/* ---------- Protokoll (Designentwurf) ----------
   Filter in drei Spalten, je Eintrag eine Fläche: Aktion als Titel, Zeit
   rechts, Akteur → Ziel, die geänderten Werte vorher → nachher, Rohdaten
   zum Aufklappen. Aufbereitet in AuditFormatter. */

.audit-filter-form {
    display: grid;
    gap: 1.25rem;
}

.audit-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.audit-filter-field {
    display: grid;
    gap: 0.4rem;
}

.audit-filter-field input,
.audit-filter-field select {
    width: 100%;
    min-width: 0;
}

.audit-filter-label {
    font-size: 0.75rem;
    color: var(--farbe-text);
}

.audit-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.audit-filter-actions .knopf {
    gap: 1rem;
    min-height: 2.7rem;
    font-size: 0.8rem;
}

.audit-list {
    display: grid;
    gap: 0.9rem;
}

.audit-entry {
    gap: 1.1rem;
}

.audit-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.audit-head h2 {
    margin: 0;
    font-size: 1.5rem;
}

.audit-head time {
    font-family: var(--schrift-zahl);
    font-size: 0.58rem;
    color: var(--farbe-text-stumm);
}

.audit-people {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.75rem;
    color: var(--farbe-text-leise);
}

.audit-person {
    display: grid;
    gap: 0.3rem;
}

.audit-person-label {
    font-family: var(--schrift-zahl);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
}

.audit-person small {
    font-family: var(--schrift-zahl);
    font-size: 0.65rem;
    color: var(--farbe-text-stumm);
}

.audit-arrow {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--farbe-text-stumm);
}

.audit-wert {
    display: grid;
    gap: 0.5rem;
}

.audit-wert-feld {
    font-size: 0.75rem;
    color: var(--farbe-text-leise);
}

.audit-wert-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--farbe-flaeche-hoch);
    border-radius: var(--rundung-klein);
    font-size: 0.7rem;
    color: var(--farbe-text-leise);
    overflow-wrap: anywhere;
}

.audit-wert-box code {
    font-family: var(--schrift-text);
}

.audit-wert-box .symbol {
    width: 1rem;
    height: 1rem;
    color: var(--farbe-text-stumm);
}

.audit-raw > summary {
    font-size: 0.65rem;
    color: var(--farbe-text-stumm);
    cursor: pointer;
}

.audit-raw pre {
    margin: 0.6rem 0 0;
    padding: 0.75rem;
    overflow-x: auto;
    background: var(--farbe-grund);
    border-radius: var(--rundung-klein);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--farbe-text-leise);
}

.audit-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--abstand-3);
    padding: var(--abstand-3);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
    font-size: 0.75rem;
}

.audit-seite {
    color: var(--farbe-text-leise);
}

@media (max-width: 56rem) {
    /* Ortsseite: Ortswahl oben, Menü als Leiste am unteren Rand. */
    .ort-seite {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 4.5rem;
    }

    .ort-leiste {
        position: static;
        grid-template-rows: none;
        min-height: 0;
        padding: 0.9rem 1.1rem;
        border-right: 0;
        border-bottom: 1px solid var(--farbe-linie);
    }

    .ortswahl {
        grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
        align-items: center;
        padding: 0;
    }

    .ortswahl-titel {
        grid-row: 1;
    }

    .ortswahl select {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .ortswahl-info {
        grid-column: 1;
        margin: 0;
    }

    .ort-leiste-zahlen {
        display: none;
    }

    .ort-seite .ort {
        padding: 1.4rem 1.1rem 2rem;
    }

    .seiten-menue {
        position: fixed;
        z-index: 25;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        gap: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(19, 30, 33, 0.96);
        border-top: 1px solid rgba(138, 201, 182, 0.19);
        overflow-x: auto;
    }

    .seiten-menue a,
    .seiten-menue a.seiten-menue-zurueck {
        position: relative;
        flex: 1 0 4rem;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        min-height: 4rem;
        margin: 0;
        padding: 0.65rem 0.3rem 0.5rem;
        border: 0;
        border-radius: 0;
        font-size: 0.65rem;
        white-space: nowrap;
    }

    .seiten-menue a[aria-current="page"] {
        background: none;
    }

    .seiten-menue .nur-lang {
        display: none;
    }

    .seiten-menue .nur-kurz {
        display: inline;
    }

    .seiten-menue a[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 30%;
        right: 30%;
        height: 2px;
        background: var(--farbe-signal);
    }

    /* Die kleine Blase der Einführung über der Leiste. */
    body .ef-blase.ef-klein {
        bottom: calc(var(--abstand-4) + 4.5rem);
    }

    .admin-leiste {
        padding: 0;
        border: 0;
    }

    .admin-leiste-titel {
        display: none;
    }

    .audit-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 30rem) {
    .einstieg-kopf,
    .spiel-kopf {
        padding-inline: var(--abstand-4);
    }

    .karte {
        padding: var(--abstand-4);
    }
}

/* ---------- Begrüßung nach der Landung (_begruessung.twig) ----------
   Mittig über dem abgedunkelten Planeten, im Stil der Seite, nicht des
   Bordcomputers. */

.begruessung {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: var(--abstand-4);
    background: rgba(8, 12, 13, 0.72);
    backdrop-filter: blur(3px);
}

.begruessung-karte {
    width: min(38rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 2.2rem 2.4rem 2rem;
    background: var(--farbe-flaeche);
    border: 1px solid rgba(138, 201, 182, 0.25);
    border-radius: var(--rundung);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.begruessung-zeichen {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--abstand-4);
}

.begruessung-titel {
    margin: 0 0 var(--abstand-4);
    font-size: 2.4rem;
    line-height: 1.15;
}

.begruessung-karte p {
    margin: 0 0 var(--abstand-3);
    color: var(--farbe-text-leise);
    line-height: 1.7;
}

.begruessung-karte p:first-of-type {
    color: var(--farbe-text);
}

.begruessung-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-3);
    margin-top: var(--abstand-5);
}

@media (max-width: 30rem) {
    .begruessung-karte {
        padding: 1.6rem 1.3rem 1.4rem;
    }

    .begruessung-titel {
        font-size: 1.9rem;
    }
}

/* ---------- Einführung (einfuehrung.js) ----------
   Schrift und Farben wie das HUD im Vorspann. Vier Flächen dunkeln ab und
   lassen das Ziel frei; im Wartezustand (ef-frei) sind sie weg und die
   Blase steht klein unten rechts. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/spectral-latin-400-normal.woff2") format("woff2"); }

.ef {
    --ef-signal: #86dcc8;
    --ef-glut:   #e9803f;
    --ef-tinte:  #ebe6da;
    --ef-matt:   #8e939c;
    --ef-linie:  rgba(235, 230, 218, 0.24);
    --ef-panel:  rgba(4, 6, 11, 0.95);
}

.ef-schleier {
    position: fixed;
    z-index: 1000;
    background: rgba(2, 4, 8, 0.72);
}

.ef-ring {
    position: fixed;
    z-index: 1001;
    pointer-events: none;
    border-radius: var(--rundung);
    box-shadow: 0 0 0 3px var(--ef-signal), 0 0 24px 6px rgba(134, 220, 200, 0.45);
}

.ef-frei .ef-schleier,
.ef-frei .ef-ring {
    display: none;
}

/* Die Blase als Karte wie im Designentwurf: Kopf „Bordcomputer“ mit
   Schritt, Titel in Spectral, Text, Aufgabe, Knöpfe. */
.ef-blase {
    position: fixed;
    z-index: 1002;
    width: min(23.75rem, calc(100vw - 2rem));
    padding: 1.45rem;
    background: radial-gradient(ellipse at right top, rgba(138, 201, 182, 0.05), transparent 70%), #152023;
    border: 1px solid rgba(138, 201, 182, 0.33);
    border-radius: var(--rundung);
    color: var(--farbe-text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.ef-blase.ef-klein {
    right: 1.45rem;
    bottom: 1.45rem;
    width: min(21rem, calc(100vw - 2rem));
    padding: 1rem 1.25rem;
}

.ef-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-3);
    margin-bottom: 1rem;
    font-family: var(--schrift-zahl);
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    color: var(--farbe-text-stumm);
}

.ef-quelle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    color: var(--farbe-signal);
}

.ef-quelle .symbol {
    width: 1.05rem;
    height: 1.05rem;
}

.ef-kopf span:last-child {
    white-space: nowrap;
}

.ef-titel {
    margin: 0 0 0.75rem;
    font-size: 1.9rem;
    line-height: 1.15;
}

.ef-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.75;
    color: var(--farbe-text-leise);
}

.ef-klein .ef-kopf {
    margin-bottom: 0.6rem;
}

.ef-klein .ef-titel {
    margin-bottom: 0.4rem;
    font-size: 1.5rem;
}

.ef-klein .ef-text {
    font-size: 0.75rem;
}

.ef-aufgabe,
.ef-gesperrt {
    display: flex;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    font-family: var(--schrift-zahl);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--farbe-signal);
}

.ef-aufgabe::before {
    content: "\25B8";
    color: var(--farbe-akzent);
}

.ef-gesperrt {
    color: var(--farbe-schlecht);
    text-transform: none;
    letter-spacing: 0;
}

.ef-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.ef-klein .ef-knoepfe {
    margin-top: 0.6rem;
}

.ef-knoepfe form {
    margin: 0;
}

.ef-knoepfe .knopf-haupt {
    gap: 1rem;
    min-height: 2.6rem;
    font-size: 0.8rem;
}

.ef-ende {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.62rem;
    color: var(--farbe-text-stumm);
    cursor: pointer;
}

.ef-ende:hover,
.ef-ende:focus-visible {
    color: var(--farbe-text);
}

/* Steht die kleine Blase unten rechts, bekommt die Seite unten Platz,
   damit sich alles über die Blase schieben lässt. */
body:has(#einfuehrung:not([hidden]) .ef-klein) {
    padding-bottom: 12rem;
}

.logbuch-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
}

.logbuch-knoepfe form {
    margin: 0;
}

/* Unbesiedelter Ort in der Übersicht: Bild wie bei einer Siedlung, nicht
   abgedunkelt (Designentwurf). */
.ort-bild.ort-bild-held.ort-bild-fremd img {
    filter: none;
}

/* Konto anlegen (admin_spieler.twig): Felder in zwei Spalten. */
.admin-anlegen-felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-anlegen .feld span {
    font-size: 0.75rem;
    color: var(--farbe-text);
}

.admin-anlegen .feld input,
.admin-anlegen .feld select {
    width: 100%;
}

@media (max-width: 35rem) {
    .admin-anlegen-felder {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Anmeldungen auf der Spielerkarte (admin_spieler.twig). */
.admin-gleiche-ip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    font-size: 0.72rem;
    color: var(--farbe-text-leise);
}

.admin-anmeldungen {
    margin-top: 0.9rem;
}

.admin-anmeldungen > summary {
    width: fit-content;
    font-size: 0.72rem;
    color: var(--farbe-signal);
    cursor: pointer;
}

.admin-anmeldungen .admin-tabelle {
    margin-top: 0.6rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
}

.admin-anmeldungen .admin-tabelle th,
.admin-anmeldungen .admin-tabelle td {
    padding: 0.55rem 0.8rem;
}

.admin-gleiche-ip .pille .symbol {
    width: 0.85rem;
    height: 0.85rem;
}

/* Cronjobs (admin_cron.twig): Kennzahlen in Reihen, Status farbig. */
.admin-cron-zeile {
    margin: 0.3rem 0 0;
    font-size: 0.7rem;
    color: var(--farbe-text-stumm);
}

.admin-cron-zeile code {
    font-family: var(--schrift-zahl);
    font-size: 0.65rem;
}

.admin-cron-titel {
    margin: 0.4rem 0 0;
    font-size: 1.15rem;
}

.admin-cron-zahlen {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}

.admin-cron-zahlen .kennzahl strong {
    font-size: 1.15rem;
}

.admin-cron-status.is-ok {
    color: var(--farbe-signal);
}

.admin-cron-status.is-fehler {
    color: var(--farbe-schlecht);
}

.admin-cron-status.is-uebersprungen,
.admin-cron-status.is-laeuft {
    color: var(--farbe-akzent);
}

.admin-cron-fehler {
    display: grid;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.72rem;
    color: var(--farbe-text-leise);
    overflow-wrap: anywhere;
}

.admin-cron-fehler span {
    display: block;
    font-family: var(--schrift-zahl);
    font-size: 0.6rem;
    color: var(--farbe-text-stumm);
}

.admin-cron form {
    margin: 0;
}

/* Rangliste: Knopf links oben über der Kugel; ohne Kugel steht er über der Liste. */
.planet {
    position: relative;
}

.planet-rangliste {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 400;
}

html:not(.js) .planet-rangliste,
.planet:has(.kugel.is-ohne-3d) .planet-rangliste {
    position: static;
    justify-self: start;
}

/* Rangliste: Seite wie ein Ortsteil, Tabelle in einer Fläche. */
.rangliste {
    display: grid;
    gap: 1.4rem;
}

.rangliste-rahmen {
    overflow-x: auto;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.rangliste-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.rangliste-tabelle th,
.rangliste-tabelle td {
    padding: 0.95rem 1.25rem;
    text-align: left;
    vertical-align: middle;
    border-top: 1px solid var(--farbe-linie);
    color: var(--farbe-text-leise);
}

.rangliste-tabelle th {
    border-top: 0;
    font-family: var(--schrift-zahl);
    font-size: 0.56rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
    background: var(--farbe-flaeche-hoch);
}

.rangliste-tabelle .is-zahl {
    text-align: right;
    font-family: var(--schrift-zahl);
    white-space: nowrap;
}

.rangliste-tabelle th.is-zahl {
    font-family: var(--schrift-zahl);
}

.rangliste-platz {
    width: 1%;
    font-family: var(--schrift-zahl);
    font-size: 1rem;
    color: var(--farbe-text) !important;
}

.rangliste-name {
    display: block;
    color: var(--farbe-text);
}

.rangliste-planet {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--farbe-text-stumm);
}

.rangliste-tabelle tr.is-ich td {
    background: rgba(138, 201, 182, 0.06);
}

.rangliste-tabelle tr.is-ich .rangliste-name {
    color: var(--farbe-signal);
}

.rangliste-auf {
    color: var(--farbe-gut);
}

.rangliste-ab {
    color: var(--farbe-schlecht);
}

.rangliste-neu,
.rangliste-gleich {
    color: var(--farbe-text-stumm);
}

@media (max-width: 35rem) {
    .rangliste-tabelle th,
    .rangliste-tabelle td {
        padding: 0.8rem 0.45rem;
    }

    /* Lange Spaltenköpfe brechen um, damit die Tabelle ohne Querlauf passt. */
    .rangliste-tabelle th,
    .rangliste-tabelle th.is-zahl {
        white-space: normal;
        line-height: 1.4;
    }

    .rangliste-tabelle th:first-child,
    .rangliste-tabelle td:first-child {
        padding-left: 0.9rem;
    }

    .rangliste-tabelle th:last-child,
    .rangliste-tabelle td:last-child {
        padding-right: 0.9rem;
    }

    .rangliste .kennzahl {
        padding: 0.8rem 0.9rem;
    }
}

/* ---------- Öffentliche Startseite (start.twig) ----------
   Gleiche Breite wie der Einstieg (74rem). Oben das Bild des Landeplatzes
   mit dem Text links darüber, darunter vier Karten, die Orte und Echtzeit. */
.start-wege {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.start {
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
    display: grid;
    gap: 4.5rem;
    padding: 2.75rem 1.9rem 4rem;
}

.start-held {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 36rem;
    overflow: hidden;
    border: 1px solid rgba(138, 201, 182, 0.15);
    border-radius: 12px;
    background: var(--farbe-flaeche);
}

.start-held-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 62% 50%;
}

.start-held::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 24, 29, 0.94), rgba(11, 24, 29, 0.6) 45%, rgba(11, 24, 29, 0) 75%),
        linear-gradient(0deg, rgba(11, 24, 29, 0.7), rgba(11, 24, 29, 0) 45%);
}

.start-held-text {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.3rem;
    max-width: 34rem;
    padding: 3rem;
}

.start-titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 300;
    font-size: 3.2rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.start-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #c6d4cc;
}

.start-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.start-knoepfe .knopf {
    min-height: 2.9rem;
    padding: 0.6rem 1.3rem;
}

.start-hinweis {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--farbe-text-stumm);
}

.start-abschnitt {
    display: grid;
    gap: 1.4rem;
}

.start-abschnitt-titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 300;
    font-size: 2.1rem;
    line-height: 1.15;
}

.start-abschnitt-text {
    margin: 0;
    max-width: 40rem;
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--farbe-text-leise);
}

.start-karten,
.start-orte {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.start-karten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.start-orte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.start-karte,
.start-ort {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: 1.4rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.start-karte h3,
.start-ort h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.start-karte p,
.start-ort p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--farbe-text-leise);
}

.start-karte-symbol {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.3rem;
    color: var(--farbe-signal);
    background: rgba(138, 201, 182, 0.06);
    border: 1px solid rgba(138, 201, 182, 0.2);
    border-radius: var(--rundung-klein);
}

.start-ort {
    padding: 0 0 1.3rem;
    overflow: hidden;
}

.start-ort img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 0.4rem;
}

.start-ort h3,
.start-ort p {
    padding: 0 1.3rem;
}

.start-zeit {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.6rem;
    padding: 2rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

.start-zeit .start-karte-symbol {
    margin: 0;
}

.start-zeit > div:not(.start-knoepfe) {
    display: grid;
    gap: 0.6rem;
}

@media (max-width: 60rem) {
    .start-karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .start-orte {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .start-zeit {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .start-zeit .start-knoepfe {
        grid-column: 1 / -1;
    }
}

/* Handy: Bild oben als Band, Text darunter auf dem Grund. */
@media (max-width: 35rem) {
    .start {
        gap: 3rem;
        padding: 1.2rem 1rem 3rem;
    }

    .start-held {
        min-height: 0;
        align-items: start;
        border: 0;
        background: none;
        border-radius: 0;
        overflow: visible;
    }

    .start-held-bild {
        position: static;
        height: auto;
        aspect-ratio: 16 / 10;
        border: 1px solid rgba(138, 201, 182, 0.15);
        border-radius: 10px;
    }

    .start-held::after {
        display: none;
    }

    .start-held-text {
        padding: 1.6rem 0 0;
    }

    .start-titel {
        font-size: 2.2rem;
    }

    .start-knoepfe .knopf {
        flex: 1 1 100%;
    }

    .start-karten,
    .start-orte {
        grid-template-columns: minmax(0, 1fr);
    }

    .start-abschnitt-titel {
        font-size: 1.7rem;
    }

    .start-zeit {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.4rem;
    }
}

/* ---------- Gebäudebilder und Infofenster ----------
   Auf der Karte oben ein schmales Band aus dem Gebäudebild; das Infofenster
   (planet.js, _gebaeude_info.twig) zeigt es groß. Ohne JavaScript steht der
   Inhalt auf einer eigenen Seite (.geb-info-seite). */
.geb {
    overflow: hidden;
}

.geb-bild {
    display: block;
    width: calc(100% + 3rem);
    max-width: none;
    height: 7.5rem;
    margin: -1.4rem -1.5rem 0.2rem;
    object-fit: cover;
    border-bottom: 1px solid var(--farbe-linie);
}

.geb-kopf > div {
    flex: 1;
    min-width: 0;
}

.geb-info-knopf {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--farbe-linie);
    border-radius: 6px;
    color: var(--farbe-text-leise);
}

.geb-info-knopf:hover,
.geb-info-knopf:focus-visible {
    color: var(--farbe-signal);
    border-color: var(--farbe-signal);
}

.geb-info-fenster {
    width: min(46rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    overflow-y: auto;
    color: var(--farbe-text);
    background: var(--farbe-flaeche);
    border: 1px solid rgba(138, 201, 182, 0.25);
    border-radius: var(--rundung);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.geb-info-fenster::backdrop {
    background: rgba(8, 12, 13, 0.72);
    backdrop-filter: blur(3px);
}

.geb-info-bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-bottom: 1px solid var(--farbe-linie);
}

.geb-info-inhalt {
    display: grid;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem 1.8rem;
}

.geb-info-kopf {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.geb-info-kopf .ort-pfad {
    margin-bottom: 0.3rem;
}

.geb-info-titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.1;
}

.geb-info-zu {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    color: var(--farbe-text-leise);
    background: none;
    border: 1px solid var(--farbe-linie);
    border-radius: 6px;
    cursor: pointer;
}

.geb-info-zu:hover {
    color: var(--farbe-text);
    border-color: var(--farbe-text-stumm);
}

/* Auf der eigenen Seite gibt es nichts zu schließen. */
.geb-info-seite .geb-info-zu {
    display: none;
}

.geb-info-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--farbe-text-leise);
}

.geb-info-hinweis {
    margin: 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
    color: var(--farbe-akzent);
    background: rgba(232, 178, 116, 0.06);
    border: 1px solid rgba(232, 178, 116, 0.25);
    border-radius: var(--rundung-klein);
}

.geb-info-leise {
    margin: 0;
    font-size: 0.72rem;
    color: var(--farbe-text-stumm);
}

.geb-info-teil {
    display: grid;
    gap: 0.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--farbe-linie);
}

.geb-info-teil h3 {
    margin: 0;
    font-family: var(--schrift-zahl);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--farbe-signal);
}

.geb-info-stand dt small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.66rem;
    color: var(--farbe-text-stumm);
}

.geb-info-stand dd strong {
    font-size: 1rem;
    font-weight: 400;
    color: var(--farbe-text);
}

.geb-info-tabelle-rahmen {
    overflow-x: auto;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-klein);
}

.geb-info-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--schrift-zahl);
    font-size: 0.7rem;
}

.geb-info-tabelle th,
.geb-info-tabelle td {
    padding: 0.5rem 0.7rem;
    text-align: left;
    white-space: nowrap;
    border-top: 1px solid var(--farbe-linie);
    color: var(--farbe-text-leise);
}

.geb-info-tabelle th {
    border-top: 0;
    font-size: 0.56rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--farbe-text-stumm);
    background: var(--farbe-flaeche-hoch);
}

.geb-info-tabelle .is-zahl {
    text-align: right;
}

.geb-info-tabelle th .symbol {
    width: 0.9rem;
    height: 0.9rem;
}

.geb-info-tabelle tr.is-jetzt td {
    color: var(--farbe-text);
    background: rgba(138, 201, 182, 0.08);
}

.geb-info-tabelle tr.is-jetzt td:first-child {
    box-shadow: inset 2px 0 0 var(--farbe-signal);
}

.geb-info-liste {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.geb-info-liste li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
}

.geb-info-seite {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
}

.geb-info-seite .geb-info {
    overflow: hidden;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
}

@media (max-width: 35rem) {
    .geb-info-inhalt {
        padding: 1.1rem 1rem 1.4rem;
    }

    .geb-info-titel {
        font-size: 1.8rem;
    }
}