:root {
    --raum:    #04060c;
    --tafel:   rgba(11, 18, 32, 0.72);
    --schrift: #c7d3e3;
    --leise:   #7d8a9d;
    --leuchte: #58c8ff;
    --glut:    #ffb347;
    --kante:   rgba(88, 200, 255, 0.16);
    --breite:  74rem;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    /* Die NAHTLOSE Kachel (werkzeuge/gen_kachel.py). `bg_stars.webp` ist ein
       Telefon-Hintergrund mit Helligkeitsverlauf -- auf 512 px gekachelt stand alle
       512 px eine sichtbare Kante quer ueber jede Seite (Befund 05.09.2026). */
    background: var(--raum) url("/bilder/bg_kachel.webp") repeat top center;
    background-size: 512px 512px;
    /* Spalte aus Kopf, Rumpf, Fuss: der Fuss steht unten, auch bei kurzen Seiten. */
    min-height: 100vh; display: flex; flex-direction: column;
    position: relative; z-index: 0;
    color: var(--schrift);
    font-family: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}
/* Ein Hauch Tiefe ueber dem Sternenfeld, wie im Schaufenster (`stil.css`): zwei weiche
   Lichtflecken, fest im Fenster, hinter allem Inhalt. */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1100px 700px at 78% -8%, rgba(88, 200, 255, 0.13), transparent 62%),
        radial-gradient(900px 620px at 12% 108%, rgba(255, 179, 71, 0.09), transparent 60%);
}
a { color: var(--leuchte); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Kopf ---------- */
header.kopf {
    border-bottom: 1px solid var(--kante);
    background: linear-gradient(180deg, rgba(4, 6, 12, 0.94), rgba(4, 6, 12, 0.62));
    position: sticky; top: 0; z-index: 10;
}
.kopf-innen {
    max-width: var(--breite); margin: 0 auto; padding: 0.6rem 1.1rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
}
.marke { color: var(--glut); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.marke:hover { text-decoration: none; }
.takt { color: var(--leise); font-variant-numeric: tabular-nums; }
/* Der Countdown zum naechsten Tick: gut lesbar, nicht leise -- er ist die Uhr des Spiels.
   Kurz vor dem Tick faerbt er sich, faellig wird er zum Verweis. */
.takt .countdown { color: var(--schrift); font-weight: 600; white-space: nowrap; }
.takt .countdown.bald { color: var(--warn, #f5a623); }
.takt .countdown.faellig a { color: var(--warn, #f5a623); text-decoration: underline; }
/* `flex-wrap` ist hier kein Feinschliff: die sieben Reiter sind zusammen 506 px
   breit, ein Telefon hat 375. Ohne Umbruch ragen "Ereignisse" und "Rangliste"
   ueber den Rand hinaus, und dann rollt der GANZE Seitenkoerper waagrecht -- genau
   das, was weiter unten fuer Tabellen ausdruecklich ausgeschlossen ist. Gemessen
   am 01.09.2026: scrollWidth 519 bei clientWidth 375. */
.spiel-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.spiel-nav .hier { color: var(--glut); }
/* Zwei Gruppen (05.09.2026): Runden/Archiv/Konzern gelten ueber alle Runden, der Rest
   gehoert zu EINER. Die Rundengruppe steht in einem leisen Kasten, ueberschrieben mit
   dem Namen der Runde -- so liest man, worauf sich Radar oder Rangliste beziehen. */
.spiel-nav .gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.spiel-nav .gruppe.runde {
    border: 1px solid var(--kante); border-radius: 6px;
    background: rgba(88, 200, 255, 0.05); padding: 0.15rem 0.8rem;
}
.spiel-nav .gruppenname {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--leise);
    max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopfrechts { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.kopfrechts .wer { color: var(--leise); text-decoration: none; }
.kopfrechts .wer:hover { color: var(--text); text-decoration: underline; }
/* Der Meldeknopf sieht aus wie ein Knopf, ist aber ein Verweis -- er fuehrt auf eine
   Seite und setzt nichts ab. */
.melden {
    border: 1px solid var(--kante); border-radius: 5px;
    padding: 0.2rem 0.6rem; white-space: nowrap;
}
.melden:hover { background: rgba(88, 200, 255, 0.12); text-decoration: none; }
/* Menueschalter und untere Symbolleiste gibt es nur am Telefon (Regeln ganz unten).
   Am Schreibtisch ist das Menue schlicht der Inhalt der Kopfleiste -- `display:
   contents` loest den Kasten auf, Reiter und Kontoknoepfe bleiben Flex-Kinder. */
.schalter { display: none; }
.menueknopf { display: none; }
.menue { display: contents; }
.leiste { display: none; }

/* ---------- Rumpf ---------- */
main.huelle { max-width: var(--breite); width: 100%; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; flex: 1 0 auto; }
.abschnitt { margin-bottom: 2.2rem; }
.abschnitt > h1, .abschnitt > h2 {
    font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--glut); margin: 0 0 0.8rem; font-weight: 600;
}
p { margin: 0 0 0.8rem; }
.leise { color: var(--leise); }

/* ---------- Tafeln und Tabellen ---------- */
.tafel {
    background: var(--tafel); border: 1px solid var(--kante);
    border-radius: 6px; padding: 0.9rem 1.1rem; margin-bottom: 0.8rem;
}
.tafel h2 { margin: 0 0 0.3rem; font-size: 1.02rem; color: var(--schrift); font-weight: 600; }
.tafel .zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; }
.tafel .zeile .weit { margin-left: auto; }

/* Breite Tabellen scrollen in sich selbst — der Seitenkoerper nie. */
.rollt { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; }
/* Zwei Spalten brauchen keine 40rem: Ereignisse rollten am Telefon waagrecht und
   schnitten den Satz ab, der die ganze Auskunft ist. */
table.schmal { min-width: 0; }
table.schmal td { white-space: normal; overflow-wrap: anywhere; }
th, td { padding: 0.42rem 0.6rem; text-align: right; border-bottom: 1px solid var(--kante); }
th:first-child, td:first-child, th.links, td.links { text-align: left; }
thead th {
    color: var(--leise); font-weight: 500; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
tbody tr:hover { background: rgba(88, 200, 255, 0.05); }
td { font-variant-numeric: tabular-nums; }

/* ---------- Knoepfe ---------- */
button, .knopf {
    font: inherit; cursor: pointer;
    background: rgba(88, 200, 255, 0.12); color: var(--leuchte);
    border: 1px solid var(--kante); border-radius: 5px; padding: 0.32rem 0.9rem;
}
button:hover, .knopf:hover { background: rgba(88, 200, 255, 0.2); text-decoration: none; }
button.haupt { background: rgba(255, 179, 71, 0.14); color: var(--glut); border-color: rgba(255, 179, 71, 0.3); }
button.haupt:hover { background: rgba(255, 179, 71, 0.24); }
form.inline { display: inline; }
/* Ein Knopf ueber der ganzen Liste — er gilt fuer alle Planeten, also soll er auch
   so breit sein wie sie. */
form.breit { margin-bottom: 1rem; }
form.breit button { width: 100%; padding: 0.5rem 1rem; }

/* Ein Wert, für den das Lager gerade nicht reicht. Nicht rot — der Knopf
   funktioniert ja, es ist ein Hinweis und keine Sperre. */
.knapp { color: var(--glut); }

input[type="number"] {
    font: inherit;
    width: 7rem;
    background: rgba(4, 6, 12, 0.6);
    color: var(--schrift);
    border: 1px solid var(--kante);
    border-radius: 5px;
    padding: 0.28rem 0.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
input[type="number"]:focus { outline: 1px solid var(--leuchte); }

/* Mehrere Knopf-Formulare in einer Tabellenzelle sollen nicht zusammenkleben. */
form.inline + form.inline { margin-left: 0.35rem; }
td form.inline button { padding: 0.22rem 0.6rem; font-size: 0.9rem; }

/* Lage eines Planeten auf der Karte. Farbe allein traegt die Aussage NICHT —
   daneben steht immer das Wort ("eigen", "fremd", "frei"). Wer Rot und Gruen nicht
   unterscheidet, liest die Karte trotzdem. */
.eigen      { color: #7ee0a0; }
.verbuendet { color: var(--leuchte); }
.feind      { color: #ff8e8e; }
.frei       { color: var(--leise); }

select {
    font: inherit;
    background: rgba(4, 6, 12, 0.6);
    color: var(--schrift);
    border: 1px solid var(--kante);
    border-radius: 5px;
    padding: 0.28rem 0.5rem;
    max-width: 18rem;
}
input[type="text"] {
    font: inherit;
    background: rgba(4, 6, 12, 0.6);
    color: var(--schrift);
    border: 1px solid var(--kante);
    border-radius: 5px;
    padding: 0.28rem 0.5rem;
    max-width: 14rem;
}
/* Ohne eigene Regel erbt ein `textarea` NICHTS von den anderen Feldern: weisser
   Grund, Monospace, winzig — mitten in einer dunklen Seite. Und `display: block`,
   weil es sonst als Inline-Element neben seiner Beschriftung klebt. */
textarea {
    font: inherit;
    display: block;
    width: 100%;
    max-width: 44rem;
    margin: 0.3rem 0 0.6rem;
    background: rgba(4, 6, 12, 0.6);
    color: var(--schrift);
    border: 1px solid var(--kante);
    border-radius: 5px;
    padding: 0.5rem 0.6rem;
    resize: vertical;
}
textarea::placeholder { color: var(--leise); }
label { color: var(--leise); }

select:focus, input[type="text"]:focus, textarea:focus { outline: 1px solid var(--leuchte); }

/* Umladen: die beiden Richtungen nebeneinander, damit man sieht, dass es zwei sind. */
.umladen { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.8rem; }
.umladen-teil {
    flex: 1 1 16rem;
    border: 1px solid var(--kante);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
}
.umladen-teil .zeile { justify-content: space-between; gap: 0.6rem; margin-bottom: 0.25rem; }
.umladen-teil button { margin-top: 0.5rem; }

/* ---------- Spielgrafik ---------- */

/* Ein Sinnbild vor einem Namen. `flex-shrink: 0`, damit es in einer engen
   Tabellenzelle nicht zur Scheibe gequetscht wird. */
.mitbild { display: flex; align-items: center; gap: 0.5rem; }
.sinnbild { width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px; }
/* Eine Galaxie ist eine Spirale, keine Scheibe: rund beschnitten faellt genau das
   weg, was man erkennen soll. Quadratisch mit weichen Ecken, und groesser -- bei
   44 px blieb von der Spirale ein Punkt. */
.galaxiebild { width: 60px; height: 60px; flex-shrink: 0; border-radius: 6px; }

/* Der Kopf der Planetenseite: Bild links, Zahlen rechts. Unter 34rem
   untereinander -- 160 px Bild neben vier Ressourcenzeilen wird sonst zur Spalte
   aus je zwei Zeichen. */
.planetkopf { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.planetbild {
    width: 160px; height: 160px; flex-shrink: 0; border-radius: 50%;
    /* Der Planet steht im Raum, nicht auf einer Kachel. */
    filter: drop-shadow(0 0 18px rgba(88, 200, 255, 0.22));
}
.planetzahlen { flex: 1 1 22rem; min-width: 0; }
@media (max-width: 34rem) {
    /* Bild NEBEN den vier Zahlen, wie in der App -- nicht darueber. Vorher fiel der
       Zahlenblock unter das Bild, und rechts vom Planeten war eine halbe Seite leer. */
    .planetkopf { flex-wrap: nowrap; gap: 0.8rem; }
    .planetbild { width: 96px; height: 96px; }
    .planetzahlen { flex: 1 1 0; }
    .planetzahlen .resblock { font-size: 0.88rem; margin-top: 0.2rem; }
}
/* Arbeiter, Soldaten, Boden, Orbit -- dasselbe Raster wie die Rohstoffe. */
.leuteblock { max-width: 26rem; margin-top: 0.4rem; }
.leuteblock .resnetto { font-size: 0.86rem; }

/* Die Schiffe einer Flotte als Reihe kleiner Bilder mit Stueckzahl. */
.schiffsreihe { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.4rem 0 0.6rem; }
.schiffchen { display: flex; align-items: center; gap: 0.4rem; }

/* ---------- Der Galaxienhaufen ---------- */

/* Die Planetenwabe (26.09.2026): das System als Wabengitter mit Planetenbildern. */
.planetenwabe { width: 100%; height: auto; display: block; }
.planetenwabe .feld { fill: #05070f; stroke: none; }
.planetenwabe .rand { fill: none; stroke-width: 0.35; }
.planetenwabe .frei .rand { stroke: #8a93a8; stroke-opacity: 0.5; }
.planetenwabe .eigen .rand { stroke: #66bb6a; }
.planetenwabe .verbuendet .rand { stroke: #4fc3f7; }
.planetenwabe .feind .rand { stroke: #ef5350; }
.planetenwabe .name { fill: #ffffff; font-family: inherit; font-weight: 600; }
.planetenwabe .plakette { fill: #0d1230; fill-opacity: 0.88; }
.planetenwabe .ticks { fill: #ffffff; font-weight: 700; }
.planetenwabe a:hover .rand { stroke-width: 0.7; }

/* Die Wabenkarte (26.09.2026): SVG vom Server, Farben wie ueberall. */
.wabenrahmen { max-width: 40rem; margin: 0 auto 1rem; }
.wabe { width: 100%; height: auto; display: block; }
.wabe .feld { stroke-width: 0.25; fill-opacity: 0.28; stroke-opacity: 0.9; }
.wabe .feld.frei { fill: #8a93a8; stroke: #8a93a8; }
.wabe .feld.eigen { fill: #66bb6a; stroke: #66bb6a; fill-opacity: 0.45; }
.wabe .feld.verbuendet { fill: #4fc3f7; stroke: #4fc3f7; fill-opacity: 0.4; }
.wabe .feld.feind { fill: #ef5350; stroke: #ef5350; fill-opacity: 0.45; }
.wabe .feld.gesperrt { fill: #1c2038; stroke: #2a2f4c; fill-opacity: 1; }
.wabe .feld.hervor { stroke-width: 0.6; stroke: #ffffff; }
.wabe a:hover .feld { fill-opacity: 0.7; }
.wabe text { fill: #ffffff; pointer-events: none; font-family: inherit; }
.wabe .heimat { fill: #ffd646; }
.wabe .heimat.eigen { stroke: #ffffff; stroke-width: 0.4; }

/* Ein Quadrat, weil die Lageformel aus der App mit der KUERZEREN Seite rechnet
   (dort `minD`). In einem breiten Kasten waere der Haufen vertikal gestaucht und
   stuende anders als am Telefon. */
.himmel {
    position: relative;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: 1 / 1;
    margin: 0 auto 1rem;
    /* KEIN Rahmen und kein harter Rand: in der App ist der Himmel randlos, und ein
       Kasten mitten im Sternenfeld sieht aus wie ein eingeklebtes Bild. Der Verlauf
       laeuft nach aussen ins Durchsichtige, die Maske frisst die Ecken weg. */
    background: radial-gradient(75% 70% at 50% 44%, rgba(28, 38, 70, 0.72), rgba(4, 6, 12, 0) 78%);
    -webkit-mask-image: radial-gradient(72% 68% at 50% 44%, #000 62%, transparent 96%);
    mask-image: radial-gradient(72% 68% at 50% 44%, #000 62%, transparent 96%);
}

/* Ferne Galaxien: reine Tiefe. `screen` mischt sie in den Hintergrund, statt
   sichtbare Rechtecke aufzukleben. */
.himmel .fern {
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(1px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Gesperrt (07.09.2026): matt und dunkel. KEIN screen-Blend hier -- 48 gescreente Grauschleier
   uebereinander ergaben eine weisse Wolke statt einer stillen Andeutung. */
.himmel .galaxie.gesperrt { opacity: 0.32; filter: grayscale(1) brightness(0.7); pointer-events: auto; cursor: help; }
.himmel .galaxie.gesperrt:hover { opacity: 0.7; }
.himmel .galaxie {
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    mix-blend-mode: screen;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: filter 0.15s ease;
}
/* Der Lage-Schein (18.09.2026): doppelt -- ein enger, satter Rand und ein weiter Hof.
   Ein einzelner 10px-Schatten verschwand hinter dem hellen Galaxienbild. */
.himmel .galaxie.eigen,      .himmel .himmelsding.eigen      { filter: drop-shadow(0 0 6px rgba(126, 224, 160, 0.95)) drop-shadow(0 0 20px rgba(126, 224, 160, 0.85)); }
.himmel .galaxie.verbuendet, .himmel .himmelsding.verbuendet { filter: drop-shadow(0 0 6px rgba(88, 200, 255, 0.95)) drop-shadow(0 0 20px rgba(88, 200, 255, 0.85)); }
.himmel .galaxie.feind,      .himmel .himmelsding.feind      { filter: drop-shadow(0 0 6px rgba(255, 110, 110, 1)) drop-shadow(0 0 22px rgba(255, 90, 90, 0.9)); }
/* KEIN brightness beim Drueberfahren (Feedback 06.09.2026): im screen-Blend frass das
   Aufhellen den dunklen Schatten der weissen Nummer -- genau beim Zeigen war sie unlesbar.
   Hervorheben nur ueber einen hellen Hof. */
.himmel .galaxie:hover,
.himmel .galaxie:focus-visible {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 22px rgba(88, 200, 255, 0.8));
    text-decoration: none;
    outline: none;
}

/* Die Nummer sitzt in der Mitte und dreht sich NICHT mit der Galaxie mit.
   Textschatten statt Kasten: ein Kasten mitten in einer Spirale sieht aus wie
   ein Fehler. */
.himmel .galaxiename {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 8px #000, 0 0 14px #000;
    pointer-events: none;
    white-space: nowrap;
}

@media (max-width: 34rem) {
    .himmel .galaxiename { font-size: 0.8rem; }
}

/* Sektoren und Systeme: dieselbe Streuung wie die Galaxien, nur anderer Inhalt.
   Die Lage faerbt den Schein -- man soll von weitem sehen, wo Feind sitzt. */
.himmel .himmelsding {
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    mix-blend-mode: screen;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.himmel .himmelsding:hover,
.himmel .himmelsding:focus-visible {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 22px rgba(88, 200, 255, 0.8));
    text-decoration: none;
    outline: none;
}
.himmel .himmelsname {
    font-weight: 600;
    font-size: 0.8rem;
    color: #fff;
    text-shadow: 0 0 6px #000, 0 0 14px #000;
    pointer-events: none;
    white-space: nowrap;
}

/* ---------- Die Planeten eines Systems ---------- */

/* Kacheln statt Sternenhimmel: hier vergleicht man, und Vergleichen geht in Reihen.
   `auto-fill` statt fester Spaltenzahl -- die Zahl der Planeten je System schwankt,
   und am Telefon ist Platz fuer zwei. */
.planetenfeld {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}
.planetkachel {
    background: var(--tafel);
    border: 1px solid var(--kante);
    border-radius: 8px;
    padding: 0.7rem 0.6rem;
    text-align: center;
}
/* Die Lage steht am linken Rand -- Farbe allein traegt die Aussage nie, das Wort
   steht in der Kachel. */
.planetkachel.eigen      { border-left: 3px solid #7ee0a0; }
.planetkachel.verbuendet { border-left: 3px solid var(--leuchte); }
.planetkachel.feind      { border-left: 3px solid #ff8e8e; }
.kachelbild { width: 96px; height: 96px; max-width: 100%; }
.kachelkopf { font-weight: 600; margin-top: 0.2rem; }
.kachelzeile { font-size: 0.88rem; }
.planetkachel form.inline { margin-top: 0.4rem; display: block; }

/* ---------- Randlos: Inhalt steht direkt auf dem Sternenhimmel ----------
   Die Vorlage ist `app/.../ui/Randlos.kt` (Andreas, 31.08.2026): die Listen sassen
   in Kaesten mit harter Rundung, waehrend die Galaxien daneben randlos in den
   Hintergrund leuchteten -- zwei Bildsprachen in einer Oberflaeche. Was frueher der
   Kartenrand leistete (Zeilen trennen), leistet jetzt Abstand.

   Der Preis ist derselbe wie dort: Text steht auf wechselndem Sternengrund, und
   hinter einer Zahl kann ein heller Stern liegen. Eine halbdurchsichtige Flaeche
   waere die naheliegende Antwort -- und wieder eine Kante, also genau das, was weg
   sollte. Stattdessen traegt jede Schrift einen weichen dunklen Schatten: er wirkt
   nur dort, wo Text steht, und begrenzt nichts.

   Wie in der App ist das ein SCHALTER, keine Umstellung: Flotten, Forschung und die
   Rundenliste behalten ihre Kaesten. */
.randlos {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0.1rem 0;
}
.randlos, .planetkarte {
    text-shadow: 0 1px 6px rgba(5, 7, 15, 0.87), 0 0 3px rgba(5, 7, 15, 0.7);
}

/* ---------- Die Planetenliste als Karten ----------
   Vorlage: `app/.../ui/PlanetsScreen.kt`. `auto-fill` statt fester Spaltenzahl --
   am Telefon eine Karte je Zeile, am Schreibtisch drei, ohne dass jemand an einer
   Zahl drehen muesste. Der Abstand ist grosszuegig, weil er hier die Arbeit des
   fehlenden Rahmens tut. */
.planetenliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: 1.1rem 2rem;
}
.planetkarte { min-width: 0; }

.karte-kopf { display: flex; align-items: center; gap: 0.8rem; color: inherit; }
.karte-kopf:hover { text-decoration: none; }
.karte-kopf:hover .karte-name { color: var(--leuchte); }
.karte-kopf:focus-visible { outline: 1px solid var(--leuchte); outline-offset: 4px; }
.kartenplanet { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; }
/* Der Titel darf schrumpfen, die Koordinate nicht: ein langer Kolonienname soll
   den Ort nicht aus der Karte druecken. */
.karte-titel { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; flex: 1; }
.karte-name {
    font-weight: 600; font-size: 1.05rem; color: var(--schrift);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karte-ort { color: var(--leise); margin-left: auto; white-space: nowrap; }

/* Vier Ressourcenzeilen als Raster, damit Lagerstand und Zuwachs untereinander
   stehen. Mit `flex` wanderten die Spalten je nach Wortlaenge -- und genau das
   Untereinander macht die vier Zahlen vergleichbar. */
.resblock {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.1rem 0.5rem;
    margin: 0.5rem 0 0.4rem;
    font-size: 0.92rem;
    /* Gedeckelt, weil der Block sonst die volle Seitenbreite ausfuellt: das Wort
       steht dann links und die Zahl 50 cm weiter rechts, und man liest jede Zeile
       zweimal. Vier Zahlen untereinander vergleicht man nur, wenn sie nah sind. */
    max-width: 23rem;
}
.reszeile { display: contents; }
.resname { white-space: nowrap; }
.reslager { text-align: right; font-variant-numeric: tabular-nums; }
/* Der Zuwachs ist der eigentliche Inhalt. Farbe traegt die Aussage NICHT allein --
   das Vorzeichen steht immer daneben und ist auch ohne Farbunterscheidung lesbar. */
.resnetto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resnetto.gut { color: #7ee0a0; }
.resnetto.schlecht { color: #ff8e8e; }

.leutezeile {
    display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem;
    font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.sinnbild.klein { width: 18px; height: 18px; border-radius: 0; }

.karte-bau { margin: 0; font-size: 0.9rem; color: var(--leise); }

/* Eine Warnung ist kein Hinweiskasten: sie steht mitten in der Karte und soll
   auffallen, ohne einen Rahmen mitzubringen. */
.warnung { margin: 0.35rem 0 0; font-size: 0.9rem; color: #ff8e8e; }

/* ---------- Frachtrouten ---------- */
.routenzeile {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem;
    padding: 0.35rem 0; border-bottom: 1px solid var(--kante);
}
.routenzeile:last-child { border-bottom: none; }
.routenzeile .routennummer { color: var(--leise); min-width: 1.5rem; }
.routenzeile .routenort { font-weight: 600; }
.routenzeile .weit { margin-left: auto; display: flex; gap: 0.3rem; }
.routenzeile .gutzeile, .routenzeile .glutzeile { margin: 0; }

/* ---------- Konverter ----------
   Eine Zeile je Richtung: Sinnbild, Pfeil, Sinnbild, Kurs, Vorrat, Menge, Knopf.
   Die Bilder tragen die Richtung -- "Metall → Energie" liest man schneller als
   METAL_TO_ENERGY, und der Kurs steht als Verhaeltnis daneben. */
.wandelzeile {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
    padding: 0.3rem 0; border-bottom: 1px solid var(--kante);
}
.wandelzeile:last-child { border-bottom: none; }
.wandelzeile .kurs { color: var(--glut); font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.wandelzeile .weit { margin-left: auto; }
.wandelzeile input[type="number"] { width: 6.5rem; }

/* ---------- Der Forschungsbaum ----------
   Vorlage `app/.../ui/ResearchScreen.kt`: leuchtende Embleme frei auf dem
   Sternenhimmel, KEINE Rahmen, KEINE Texte an den Knoten. Der Zustand ist ein weicher
   Farbschein -- gruen erforscht, tuerkis erforschbar, grau gesperrt --, und erst die
   Auswahl legt einen Lichtkreis um das Emblem. */
.baum { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 1.2rem; }
/* Jeder Zweig rollt fuer sich, wenn er nicht passt -- der Seitenkoerper nie.
   In der App ist das ein horizontalScroll je Zeile, hier dasselbe. */
.zweig { display: flex; align-items: center; overflow-x: auto; padding-bottom: 0.2rem; }
.knoten { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
/* Feine Konstellationslinie statt Pfeil. */
.konstellation { width: 26px; height: 1px; background: rgba(138, 147, 168, 0.35); flex-shrink: 0; }

.emblem {
    width: 84px; height: 84px;
    display: grid; place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: filter 0.15s ease;
}
.emblem:hover { text-decoration: none; filter: brightness(1.3); }
.emblem:focus-visible { outline: 1px solid var(--leuchte); outline-offset: 2px; }
.emblembild { width: 64px; height: 64px; }

/* Der Schein IST die Statusanzeige. Farbe traegt sie aber nicht allein: die
   Stufenziffer steht darunter, das aria-label nennt den Zustand in Worten, und die
   Infotafel schreibt ihn aus. */
.emblem.erforscht { background: radial-gradient(circle, rgba(102, 187, 106, 0.28), transparent 70%); }
.emblem.offen     { background: radial-gradient(circle, rgba(79, 195, 247, 0.28), transparent 70%); }
.emblem.gesperrt  { background: radial-gradient(circle, rgba(138, 147, 168, 0.10), transparent 70%); }
.emblem.gesperrt .emblembild { opacity: 0.35; }
.emblem.gewaehlt { box-shadow: 0 0 0 2px currentColor inset; }
.emblem.gewaehlt.erforscht { color: rgba(102, 187, 106, 0.85); }
.emblem.gewaehlt.offen     { color: rgba(79, 195, 247, 0.85); }
.emblem.gewaehlt.gesperrt  { color: rgba(138, 147, 168, 0.85); }

.stufe { font-size: 0.75rem; font-weight: 700; }
.stufe.erforscht { color: #7ee0a0; }
.stufe.offen { color: var(--leuchte); }
.stufe.gesperrt { color: rgba(138, 147, 168, 0.6); }

.forschungsstand { color: var(--glut); font-variant-numeric: tabular-nums; }
.forschungstafel { max-width: 44rem; }
.tafelkopf { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.tafelbild { width: 48px; height: 48px; flex-shrink: 0; }
.legende .zeile { gap: 0.3rem 0.5rem; }
.legendenpunkt { font-size: 0.7rem; line-height: 1; }
.legendenpunkt.erforscht { color: #7ee0a0; }
.legendenpunkt.offen { color: var(--leuchte); }
.legendenpunkt.gesperrt { color: var(--leise); }

@media (max-width: 34rem) {
    .emblem { width: 66px; height: 66px; }
    .emblembild { width: 50px; height: 50px; }
    .konstellation { width: 16px; }
}

/* ---------- Radar: Meldezeilen ----------
   Vorlage ist die Zeile im `RadarScreen` der App: Punkt oder Bildchen, zweizeiliger
   Text, Pfeil am Rand. Die ganze Zeile ist der Verweis -- am Telefon tippt man nicht
   auf ein Wort, sondern auf die Zeile. */
.meldung {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.2rem; color: inherit;
    border-bottom: 1px solid var(--kante);
}
.meldung:last-child { border-bottom: none; }
.meldung:hover { text-decoration: none; background: rgba(88, 200, 255, 0.05); }
.meldung:hover .meldungkopf { color: var(--leuchte); }
.meldung:focus-visible { outline: 1px solid var(--leuchte); outline-offset: 2px; }
.meldungtext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.meldungkopf { font-weight: 600; color: var(--schrift); }
.meldung.feind .meldungkopf { color: #ff8e8e; }
.meldung .pfeil { color: var(--leuchte); flex-shrink: 0; }
.meldung .punkt { flex-shrink: 0; font-size: 0.7rem; line-height: 1; }
.sinnbild.mittel { width: 26px; height: 26px; border-radius: 50%; }

/* Sieg und Niederlage am Rundenende. Farbe traegt die Aussage nicht allein -- das
   Wort steht gross daneben, und ein eigenes Kennzeichen im Code entscheidet, nicht
   der angezeigte Text. */
.siegzeile { font-size: 1.3rem; font-weight: 700; color: #7ee0a0; margin: 0 0 0.4rem; }
.niederlagezeile { font-size: 1.3rem; font-weight: 700; color: var(--schrift); margin: 0 0 0.4rem; }

/* Zwei Zeilen, die eine Wertung tragen statt einer Zahl. */
.gutzeile { margin: 0.3rem 0; color: #7ee0a0; }
.glutzeile { margin: 0.3rem 0; color: var(--glut); }

/* Sterne einer Abundanz. Sie stehen NEBEN dem Prozentwert, nie an seiner Stelle --
   fuer ein Vorleseprogramm sind sie aria-hidden, und wer sie nicht deuten kann,
   liest die Zahl. */
.resnetto.sterne { color: var(--glut); letter-spacing: 0.05em; }

/* ---------- Der Assistent und das Missionsrennen ---------- */

/* Der einzige Kasten, der auf dieser Seite bleibt -- er soll sich absetzen, weil er
   nach ein paar Stunden Spiel von selbst verschwindet. */
.tipp {
    display: flex; gap: 0.7rem; align-items: flex-start;
    background: var(--tafel); border: 1px solid var(--kante); border-radius: 6px;
    padding: 0.8rem 1rem; margin-bottom: 1.2rem;
}
.tipp p { margin: 0; }
.tippzeichen { font-size: 1.2rem; line-height: 1.3; }
/* Startauftraege (19.09.2026): derselbe Kasten, mehrere Zeilen. */
.auftrag p + p { margin-top: 0.3rem; }
.auftrag .auftragtitel { font-weight: 600; }
.auftrag .leise { color: var(--leise); }
.auftrag .lohn { color: var(--leuchte); }
.auftrag .erledigt { color: #7ee0a0; }

.mission {
    display: block; color: inherit;
    padding: 0.5rem 0 0.7rem; margin-bottom: 0.6rem;
}
.mission:hover { text-decoration: none; }
.mission:hover .missionzeichen + span { color: var(--leuchte); }
.mission .zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.mission .weit { margin-left: auto; color: var(--leise); font-variant-numeric: tabular-nums; }
.missionsbalken {
    height: 4px; margin-top: 0.4rem; border-radius: 2px;
    background: rgba(88, 200, 255, 0.14);
    overflow: hidden;
}
.missionsbalken .gefuellt { height: 100%; background: var(--glut); }

/* ---------- Hinweise ---------- */
/* ---------- Nachrichten (Stufe 3) ----------
   Eine Nachricht ist eine Zeile mit Kopf (wer, wann) und Text darunter; die eigenen
   stehen leicht abgesetzt. Kein Sprechblasen-Look -- das ist ein Brett, kein Chat. */
.nachrichten { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.8rem; }
.nachricht { padding: 0.45rem 0.6rem; border-left: 2px solid var(--kante); }
.anhang { margin: 0.4rem 0 0.1rem; padding: 0.4rem 0.6rem; border: 1px solid var(--kante); border-radius: 0.4rem; background: rgba(4, 6, 12, 0.45); font-size: 0.9rem; }
.anhang.krieg { border-color: var(--feind, #d9534f); }
.anhang.ziel { border-color: var(--glut, #f0a030); }
.anhangtitel { margin: 0 0 0.2rem; font-weight: 600; }
.anhangzeile { margin: 0; color: var(--leise); }
.zielmarke { font-size: 0.8rem; color: var(--glut, #f0a030); }
.nachricht.meine { border-left-color: #7ee0a0; background: rgba(126, 224, 160, 0.04); }
.nachrichtkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; font-size: 0.92rem; }
.nachrichtkopf .weit { margin-left: auto; }
.nachrichttext { margin: 0.2rem 0 0; white-space: normal; overflow-wrap: anywhere; }
.zurueckgenommen { font-style: italic; margin: 0.2rem 0 0; }
.antwortbezug { margin: 0.2rem 0 0; border-left: 2px solid var(--kante); padding-left: 0.5rem; font-size: 0.88rem; }
.zielbalken { height: 6px; background: rgba(88, 200, 255, 0.15); border-radius: 3px; overflow: hidden; margin: 0.2rem 0 0.4rem; }
.zielbalken div { height: 100%; background: var(--glut); }
.zielbalken .z0 { width: 0; } .zielbalken .z10 { width: 10%; } .zielbalken .z20 { width: 20%; } .zielbalken .z30 { width: 30%; }
.zielbalken .z40 { width: 40%; } .zielbalken .z50 { width: 50%; } .zielbalken .z60 { width: 60%; } .zielbalken .z70 { width: 70%; }
.zielbalken .z80 { width: 80%; } .zielbalken .z90 { width: 90%; } .zielbalken .z100 { width: 100%; }
.abzeichen {
    display: inline-block; font-size: 0.72rem; line-height: 1.3; padding: 0 0.4rem; margin-left: 0.35rem;
    border-radius: 999px; border: 1px solid var(--kante); color: var(--leise); vertical-align: middle;
}
.abzeichen.betrieb { color: var(--glut); border-color: rgba(255, 179, 71, 0.4); }
.abzeichen.neu { color: #0b0f18; background: var(--glut); border-color: var(--glut); font-weight: 700; }
button.klein { padding: 0.15rem 0.5rem; font-size: 0.82rem; }
/* Reine Symbolknoepfe (▲ ▼ ✕ ↑ ↓) — wie in der App; das Wort steht im title/aria-label. */
button.symbol { min-width: 2.3rem; padding: 0.22rem 0.55rem; font-size: 1rem; line-height: 1.2; }

/* ---------- Planetenwechsel: die Kette der eigenen Planeten ueber der Planetenseite ----------
   Ersatz fuer das Wischen der App (PlanetDetailPager). Rollt waagrecht, wenn die Namen nicht
   in eine Zeile passen; der aktuelle Planet leuchtet, die Nachbarn erreicht man mit den Pfeilen. */
.wechsel { display: flex; align-items: center; gap: 0.4rem; margin: -0.4rem 0 1.1rem; }
.wechsel .kette { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: thin; padding: 0.2rem 0; }
.wechsel .glied {
    white-space: nowrap; padding: 0.25rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--kante); background: rgba(88, 200, 255, 0.08); color: var(--leuchte);
    font-size: 0.92rem;
}
.wechsel a.glied:hover { background: rgba(88, 200, 255, 0.18); text-decoration: none; }
.wechsel .glied.aktiv { background: rgba(255, 179, 71, 0.16); color: var(--glut); border-color: rgba(255, 179, 71, 0.4); font-weight: 600; }
.wechsel .pfeil {
    flex-shrink: 0; display: inline-block; min-width: 2rem; text-align: center;
    font-size: 1.5rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 6px; color: var(--leuchte);
}
.wechsel a.pfeil:hover { background: rgba(88, 200, 255, 0.18); text-decoration: none; }
.wechsel .pfeil.leer { color: var(--kante); }
form.schreiben { display: flex; flex-direction: column; gap: 0.4rem; max-width: 44rem; }
form.schreiben textarea { width: 100%; }
form.schreiben button { align-self: flex-end; }
form.benennen { display: flex; flex-direction: column; gap: 0.5rem; max-width: 44rem; margin-top: 0.5rem; }
form.benennen label { display: flex; flex-direction: column; gap: 0.2rem; color: var(--leise); font-size: 0.9rem; }
form.benennen input[type="text"] {
    font: inherit; background: rgba(4, 6, 12, 0.6); color: var(--schrift);
    border: 1px solid var(--kante); border-radius: 5px; padding: 0.28rem 0.5rem;
}
form.benennen button { align-self: flex-start; }

/* ---------- Konzerne (Stufe 4) ---------- */
.konzernkopf { display: flex; gap: 1rem; align-items: flex-start; }
.emblem-klein, .emblem-gross { flex-shrink: 0; }
.emblem-klein svg, .emblem-gross svg, .emblemsvg svg { display: block; }
.emblemsvg { display: inline-block; line-height: 0; }
.konzernbild { display: block; border-radius: 18%; object-fit: cover; }
.meldung .emblem-klein { margin-right: 0.2rem; }
.motto { font-style: italic; color: var(--glut); margin: 0 0 0.3rem; }
.tafel.angepinnt { border-left: 3px solid var(--glut); }
.emblemwahl { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.emblemoption { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.emblemoption input { margin: 0; }
.emblemoption svg { display: block; }
select { font: inherit; background: rgba(4, 6, 12, 0.6); color: var(--schrift); border: 1px solid var(--kante); border-radius: 5px; padding: 0.22rem 0.4rem; }

.hinweis { border-left: 3px solid var(--kante); padding: 0.6rem 1rem; margin-bottom: 1rem; background: var(--tafel); }
.hinweis p { margin: 0; }
.hinweis.fehler { border-left-color: #ff6b6b; }
.hinweis.gut { border-left-color: var(--glut); }

/* ---------- Anmeldung ---------- */
.anmeldung { max-width: 30rem; margin: 3rem auto; text-align: center; }
.anmeldung h1 { color: var(--glut); font-size: 1.5rem; margin-bottom: 0.4rem; }
.anmeldung .knopfplatz { display: flex; justify-content: center; margin: 1.6rem 0; min-height: 44px; }

/* ---------- Fuss ---------- */
footer.fuss { border-top: 1px solid var(--kante); padding: 1.2rem 1.1rem 2.4rem; }
.fuss-innen {
    max-width: var(--breite); margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.9rem;
}
.fuss-innen a { color: var(--leise); }
/* Der Sprachumschalter steht im Fuss und nicht in der Kopfleiste: man waehlt die
   Sprache einmal, nicht bei jedem Blick. Er faellt trotzdem auf, weil er als
   einziger Fussverweis leuchtet. */
.fuss-innen .sprachwahl { color: var(--leuchte); margin-left: auto; }

/* ---------- Telefon ----------
   Vorlage ist die App: oben eine schmale Zeile mit Uhr, unten die Reiterleiste mit
   fuenf Sinnbildern, alles andere hinter einem Menueknopf. Gemessen am 05.09.2026 an
   375 px Breite: die alte Kopfleiste (zwoelf Reiter, drei Zeilen, klebrig) nahm 430 der
   812 px Hoehe -- ueber jeder Seite. */
@media (max-width: 40rem) {
    .kopf-innen { padding: 0.45rem 0.8rem; gap: 0.3rem 0.6rem; }
    main.huelle { padding: 1rem 0.8rem 2.4rem; }
    .marke { font-size: 0.82rem; }
    /* Nur die Uhr: „Tick 30 von 2.160 · Nächster Tick" ist am Telefon eine halbe Zeile
       fuer eine Zahl, die man ohnehin in der Uhr liest. Der Tickstand steht auf der
       Rundenseite noch einmal. */
    .takt { flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; }
    .takt .tickstand, .takt .trenner, .takt .vor { display: none; }
    .takt .uhr::before { content: "\23F3 "; }
    .menueknopf {
        display: inline-flex; align-items: center; gap: 0.3rem;
        font-size: 1.25rem; line-height: 1; padding: 0.3rem 0.55rem;
        border: 1px solid var(--kante); border-radius: 6px; color: var(--leuchte);
        cursor: pointer; user-select: none;
    }
    .menueknopf .abzeichen { margin-left: 0; font-size: 0.7rem; }
    .menue { display: none; flex: 1 0 100%; flex-direction: column; padding-top: 0.3rem; }
    .schalter:checked ~ .menue { display: flex; }
    .schalter:checked ~ .menueknopf { background: rgba(88, 200, 255, 0.14); }
    .menue .spiel-nav { flex-direction: column; gap: 0; }
    .menue .spiel-nav a { padding: 0.6rem 0.2rem; border-bottom: 1px solid var(--kante); font-size: 1.02rem; }
    .menue .spiel-nav .gruppe { flex-direction: column; align-items: stretch; gap: 0; }
    .menue .spiel-nav .gruppe.runde { border: none; border-radius: 0; background: none; padding: 0; margin-top: 0.7rem; }
    .menue .spiel-nav .gruppenname { padding: 0.35rem 0.2rem 0.15rem; max-width: none; white-space: normal; }
    /* Was die untere Leiste traegt, steht im Menue nicht noch einmal. */
    .menue .spiel-nav .leistenziel { display: none; }
    .menue .kopfrechts { margin: 0.6rem 0 0.2rem; }
    .kopfrechts .wer { display: none; }
    /* Fingerkuppen statt Mauszeiger: alles Tippbare mindestens 2.4rem hoch. */
    button, .knopf, .melden { min-height: 2.4rem; padding-top: 0.42rem; padding-bottom: 0.42rem; }
    td form.inline button, button.klein { min-height: 2.1rem; }
    select, input[type="text"], input[type="number"] { min-height: 2.4rem; }
    /* Die untere Symbolleiste. */
    .leiste {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
        background: rgba(6, 9, 18, 0.94); border-top: 1px solid var(--kante);
        backdrop-filter: blur(6px);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .leiste a {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
        padding: 0.35rem 0 0.4rem; color: var(--leise); font-size: 0.68rem; letter-spacing: 0.02em;
    }
    .leiste a:hover { text-decoration: none; }
    .leiste .symbol { display: grid; place-items: center; width: 3.2rem; height: 1.7rem; border-radius: 999px; }
    .leiste svg { width: 22px; height: 22px; display: block; }
    .leiste a.hier { color: #e6f4ff; }
    .leiste a.hier .symbol { background: rgba(88, 200, 255, 0.22); color: var(--leuchte); }
    body.mit-leiste footer.fuss { padding-bottom: 5.2rem; }
}

/* ---------- Funkraum (19.09.2026) ---------- */
.nachricht.erwaehnt { border-left: 3px solid var(--glut); padding-left: 0.6rem; }
.erwaehnung { color: var(--glut); font-weight: 600; }
a.erwaehnung.fremd { color: var(--leuchte); font-weight: 500; }
a.koord { color: var(--leuchte); text-decoration: underline dotted; }
.reaktionen { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.25rem; }
.reaktionen form.inline { margin: 0; }
button.reaktion { font-size: 0.85rem; padding: 0.1rem 0.45rem; min-height: 1.8rem; border-radius: 999px; }
button.reaktion.meine { border-color: var(--leuchte); background: rgba(88, 200, 255, 0.14); }
details.reaktionwahl { display: inline-flex; align-items: center; gap: 0.3rem; }
details.reaktionwahl summary { cursor: pointer; list-style: none; color: var(--leise); padding: 0 0.4rem; border: 1px solid var(--kante); border-radius: 999px; }
details.reaktionwahl summary::-webkit-details-marker { display: none; }
details.reaktionwahl[open] { display: flex; flex-wrap: wrap; }
details.kanaleinst { margin: 0 0 0.6rem; }
details.kanaleinst summary, .tafel details summary { cursor: pointer; color: var(--leuchte); }
label.wahl { display: block; margin: 0.2rem 0; }
.nachrichten.kompakt .nachricht { padding: 0.25rem 0.5rem; margin-bottom: 0.2rem; }
.nachrichten.kompakt .nachrichtkopf { display: inline; }
.nachrichten.kompakt .nachrichttext { display: inline; margin: 0 0 0 0.5rem; }
.nachrichten.kompakt .reaktionen { margin-top: 0.1rem; }
.abzeichen.erwaehnt { color: #0b0f18; background: var(--leuchte); border-color: var(--leuchte); font-weight: 700; }
.abzeichen.still { color: var(--leise); }
.funkraum .meldung.neu .meldungkopf { font-weight: 600; }
.kontaktwahl { columns: 2 12rem; margin: 0.4rem 0; }