/* =====================================================================
   Gerüst des Hauptmenüs: „Taktische Konsole" in hellem Glas
   (docs/36_Hauptmenue_Konzept.md 4.1, 5.1–5.3)

   Kopfleiste oben, Inhalt, Tastenleiste unten. Zwei Zustände:
   - genug Platz: Gerüst in Fensterhöhe, der Inhalt scrollt in sich, Kopf- und Tastenleiste
     bleiben stehen;
   - wenig Platz (schmal oder niedrig): Gerüst in natürlicher Höhe, die Seite scrollt, die
     Tastenleiste haftet unten.
   Die kompakte Kopfleiste ist davon unabhängig. Grenzen der Media-Queries in px (Guideline 3.3).
   ===================================================================== */

/* Menü und Spiel liegen in einem Dokument (docs/34_Spielstart_ohne_Seitenwechsel_Konzept.md,
   Kapitel 15). Der aktive Teil steht als Klasse an `<html>` (`app-menu`/`app-game`, AppShell);
   die Seitenregeln gelten nur im Menü. Die Wartungsseite trägt dieselbe Klasse. */

/* Gescrollt wird das Fenster über `html`, nicht der Body: Sonst greift `position: sticky` der
   Tastenleiste nicht am Fensterrand. */
html.app-menu {
    min-height: 100%;
    overflow-y: auto;
}

/* Im Spiel ist das Menü samt Telemetrie-Frage nicht zu sehen */
html.app-game .menu-console,
html.app-game .consent-panel {
    display: none !important;
}

/* Feines Petrol-Raster und eine Abdunklung zum Rand über dem Hintergrundbild (5.1) */
html.app-menu body {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        repeating-linear-gradient(0deg, transparent 0 3.9rem, var(--clr-secondary-subtle) 3.9rem 3.95rem) fixed,
        repeating-linear-gradient(90deg, transparent 0 3.9rem, var(--clr-secondary-subtle) 3.9rem 3.95rem) fixed,
        radial-gradient(ellipse at 50% 30%, transparent 0%, var(--clr-shade-55) 90%) fixed,
        url('../images/ui/menu_bg.webp') center / cover fixed;
    color: var(--clr-text-primary);
}

.menu-console {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
}

/* Gast oder angemeldet: Der Zustand steht als Klasse am Gerüst (`MenuHeader.applyUser()`) */
.menu-console.is-guest .menu-only-user,
.menu-console:not(.is-guest) .menu-only-guest {
    display: none !important;
}

/* Taste aus der Belegung (`MenuKeyBar`); leer bleibt sie unsichtbar */
.menu-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--clr-surface-subcard);
    font-family: var(--font-regular);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--clr-text-muted);
}

.menu-key:empty {
    display: none;
}

/* --- Kopfleiste (5.2) ----------------------------------------------------- */
.menu-head {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: stretch;
    gap: 1.75rem;
    min-height: 5.25rem;
    padding: 0 1.75rem;
    background: var(--clr-surface-main);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px 0 var(--clr-shade-20);
}

/* Leitlinie am unteren Rand: Orange → Petrol */
.menu-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-primary-main), var(--clr-secondary-main));
}

/* Logo und Name führen ins Dashboard „Spielen" */
.menu-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.menu-brand img {
    height: 3.2rem;
}

.menu-brand-name {
    font-family: var(--font-narrow);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--clr-secondary-main);
}

/* Zweites Wort in Orange (Mockup) */
.menu-brand-name b {
    font-weight: inherit;
    color: var(--clr-primary-main);
}

.menu-brand:focus-visible {
    outline: 2px solid var(--clr-primary-main);
    outline-offset: 4px;
}

/* Bereichsreiter direkt neben dem Logo; der Platz bis zur Symbolleiste bleibt frei */
.menu-sections {
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
    margin-right: auto;
    overflow-x: auto;
}

.menu-sections .menu-key {
    align-self: center;
    margin: 0 0.3rem;
}

/* Navigationseintrag als Bereichsreiter */
.menu-nav-tab {
    padding: 0 1.35rem;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
}

.menu-nav-tab i {
    font-size: 0.8em;
}

/* Pfeil am Reiter „Editor": Er klappt ein Menü auf; kein Übergang außer der Drehung */
.menu-nav-tab .menu-nav-chev {
    margin-left: 0.2rem;
    font-size: 0.5em;
    transition: transform 80ms linear;
}

.menu-nav-tab[aria-expanded="true"] .menu-nav-chev {
    transform: rotate(180deg);
}

/* Der aktive Reiter: oranger Grund und ein 4 px starker Balken */
.menu-nav-tab[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 4px;
    background: var(--clr-primary-main);
}

/* Symbolleiste: Vollbild, Moderation, Nachrichten, Einstellungen, Hilfe */
.menu-tools {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Navigationseintrag als Symbol mit abgeschrägter Ecke; der Text steht im Tooltip */
.menu-nav-icon {
    justify-content: center;
    gap: 0;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    font-size: 1.1rem;
    clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 0.55rem, 100% 100%, 0 100%);
}

.menu-nav-icon:hover,
.menu-nav-icon:focus-visible {
    background: var(--clr-surface-input);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
}

/* Offene Ansicht (`aria-current`) und eingeschaltetes Vollbild (`.is-active`, Umschalter) */
.menu-nav-icon[aria-current="page"],
.menu-nav-icon.is-active {
    background: var(--clr-primary-subtle);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
}

.menu-nav-icon.is-active i {
    color: var(--clr-primary-main);
}

/* „Vollbild fortsetzen": Einstellung an, Vollbild nach einem Seitenwechsel aus (4.3) */
.menu-nav-icon.has-hint::before {
    content: '';
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--clr-primary-main);
}

.menu-tools-sep {
    width: 1px;
    height: 2.4rem;
    margin: 0 0.5rem;
    background: var(--clr-border-light);
}

/* Zähler (ungelesene Nachrichten, offene Moderationsfälle) */
.menu-count {
    box-sizing: border-box;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    background: var(--clr-primary-main);
    color: var(--clr-text-light);
    font-family: var(--font-regular);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1rem;
    text-align: center;
}

.menu-nav-icon .menu-count {
    position: absolute;
    right: 0.15rem;
    bottom: 0.15rem;
}

.menu-nav-entry .menu-count {
    margin-left: auto;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    line-height: 1.2rem;
}

/* --- Spieler-Menü (5.3) --------------------------------------------------- */
.menu-user {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-user-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border: 1px solid transparent;
    background: none;
    color: var(--clr-text-primary);
    font-family: var(--font-regular);
    text-align: left;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 80ms linear;
}

.menu-user-btn:hover,
.menu-user-btn:focus-visible,
.menu-user.is-open .menu-user-btn {
    background: var(--clr-surface-dark);
    border-color: var(--clr-border-light);
    outline: none;
}

.menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.9rem;
    height: 2.9rem;
    background: var(--clr-secondary-main);
    color: var(--clr-text-light);
    font-family: var(--font-narrow);
    font-size: 1.5rem;
    font-weight: 800;
    clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 0.55rem, 100% 100%, 0 100%);
}

.menu-avatar-guest {
    background: var(--clr-text-muted);
    font-size: 1.1rem;
}

.menu-user-text b {
    display: block;
    font-family: var(--font-narrow);
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.menu-user-text small {
    color: var(--clr-text-muted);
    font-size: 0.75rem;
}

/* Kein Aufklapp-Übergang; nur der Pfeil am Namen dreht sich */
.menu-user-chev {
    margin-left: 0.3rem;
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    transition: transform 80ms linear;
}

.menu-user.is-open .menu-user-chev {
    transform: rotate(180deg);
}

/* Aufklappende Menüs der Kopfleiste (Spieler-Menü, Editor-Menü): fast deckend weiß mit oranger
   Oberkante, an der Unterkante der Kopfleiste. Offen ist ein Menü über `is-open` (`MenuDropdown`). */
.menu-user-list,
.menu-drop-list {
    display: none;
    position: absolute;
    z-index: 20;
    min-width: 17rem;
    box-sizing: border-box;
    padding: 0.4rem;
    background: var(--clr-surface-popup);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--clr-surface-border);
    border-top: 3px solid var(--clr-primary-main);
    box-shadow: var(--shadow-popup);
}

.menu-user-list.is-open,
.menu-drop-list.is-open {
    display: block;
}

/* Spieler-Menü: rechtsbündig unter dem Namen
   (Abstand Knopf → Unterkante der Kopfleiste: (5,25 rem − Knopfhöhe) / 2) */
.menu-user-list {
    top: calc(100% + 0.9rem);
    right: 0;
}

/* Editor-Menü: an der Unterkante der Kopfleiste; die Lage unter dem Reiter setzt `MenuHeader` */
.menu-drop-list {
    top: 100%;
    left: 0;
}

.menu-user-note {
    margin: 0.3rem 0.6rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--clr-text-muted);
}

/* Navigationseintrag im Spieler-Menü */
.menu-nav-entry {
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    color: var(--clr-text-primary);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

.menu-nav-entry i {
    width: 1.2em;
    text-align: center;
}

.menu-nav-entry:hover,
.menu-nav-entry:focus-visible {
    background: var(--clr-primary-subtle);
}

.menu-user-sep {
    height: 1px;
    margin: 0.35rem 0.3rem;
    background: var(--clr-border-light);
}

/* --- Inhalt ----------------------------------------------------------------- */
/* Eine Breite für alle Ansichten (`--menu-content-width`, global.css); Vorgabe ist das Dashboard */
.menu-stage {
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem;
}

.menu-stage > .access-notice,
.menu-stage > .verify-banner,
.menu-stage > .maintenance-banner {
    box-sizing: border-box;
    max-width: var(--menu-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Tiefe Adresse: unsichtbar, bis der Router die Ansicht zeigt (kein kurzes Dashboard) */
.menu-stage.is-routing .view-panel {
    visibility: hidden;
}

/* Seiten-Ansichten (Rangliste, Einstellungen, Nachrichten, Moderation, Editor, Platzhalter): eine
   Kachel in der Inhaltsbreite, oben Pfad und Aktionen, darunter der Inhalt */
.view-panel.menu-page-panel {
    display: block;
}

.menu-page {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
    max-width: var(--menu-content-width);
    margin: 0 auto;
}

.menu-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    min-height: 2rem;
}

/* --- Dashboard „Spielen" (5.4) ------------------------------------------- */
.view-panel.menu-hub-panel {
    display: block;
}

/* Drei Spalten im Verhältnis 50 % / 25 % / 25 % (docs/41_Kampagnen_Achievements.md, „Menü und
   Dashboard"). Oberer Bereich: Operation des Tages, die drei Kacheln, Statistiken. Mittlerer
   Bereich: „About" bzw. letzte Spielstände (50 %) und Funkverkehr (50 %). Unten die Links. */
.menu-hub {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    max-width: var(--menu-content-width);
    margin: 0 auto;
}

/* Spalte 2 des oberen Bereichs: drei Kacheln untereinander, zusammen so hoch wie die große Kachel */
.menu-hub-actions {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* Mittlerer Bereich: linke Hälfte in Spalte 1, Funkverkehr über die Spalten 2 und 3 */
.menu-about,
.menu-recent {
    grid-column: 1;
}

.menu-news {
    grid-column: 2 / -1;
}

/* Glasfläche mit abgeschrägter Ecke oben rechts (5.1) */
.menu-tile {
    position: relative;
    box-sizing: border-box;
    padding: 1.2rem 1.4rem;
    background: var(--clr-surface-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-surface-border);
    color: var(--clr-text-primary);
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%);
}

.menu-tile-label {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.menu-tile-label::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    background: var(--clr-primary-main);
    vertical-align: 0.05rem;
}

.menu-big {
    margin: 0;
    font-family: var(--font-narrow);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.menu-muted {
    color: var(--clr-text-muted);
}

/* Kürzel der Map vor dem Namen (6.3); leer bleibt es unsichtbar */
.menu-code {
    display: inline-block;
    margin-right: 0.6rem;
    padding: 0 0.4rem;
    border: 2px solid var(--clr-secondary-main);
    font-size: 0.55em;
    line-height: 1.3;
    vertical-align: middle;
}

.menu-code:empty {
    display: none;
}

/* Große Kachel: Operation des Tages */
.menu-lead {
    display: flex;
    flex-direction: column;
    min-height: 24rem;
    border-left: 4px solid var(--clr-primary-main);
}

.menu-lead-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.menu-lead .menu-big {
    margin-top: 0.3rem;
    font-size: clamp(2.6rem, 4.5vw, 4.8rem);
}

/* Tutorial schließen (5.5.6): oben rechts im Inhalt der Kachel, also innerhalb des Innenabstands
   und damit neben der abgeschrägten Ecke */
.menu-lead-close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.25rem;
}

/* Logo als Fläche im Ton der Werte-Kästchen: dieselbe Füllung über eine Maske in Logo-Form, unten
   rechts innerhalb des Innenabstands, hinter dem Inhalt und ohne Klicks (5.4) */
.menu-lead-mark {
    position: absolute;
    right: 1.4rem;
    bottom: 1.2rem;
    z-index: 0;
    height: 7.5rem;
    aspect-ratio: 752.05 / 806.12;
    background: var(--clr-surface-dark);
    -webkit-mask: url('../images/ui/aegis-logo-black.svg') center / contain no-repeat;
    mask: url('../images/ui/aegis-logo-black.svg') center / contain no-repeat;
    pointer-events: none;
}

.menu-lead-sub {
    margin: 0.5rem 0 1.25rem;
    font-size: 1.05rem;
    color: var(--clr-text-muted);
}

.menu-lead-sub b {
    color: var(--clr-text-primary);
}

/* Level als Segmente: geschafft, aktuell, offen */
.menu-levels {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.menu-levels span {
    flex: 1;
    height: 0.6rem;
    background: var(--clr-shade-15);
    transform: skewX(-20deg);
}

.menu-levels .is-done {
    background: var(--clr-secondary-main);
}

.menu-levels .is-now {
    background: var(--clr-primary-main);
    box-shadow: 0 0 8px var(--clr-primary-main);
}

.menu-levels:empty {
    display: none;
}

.menu-levels-caption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.menu-readouts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.menu-readout {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-dark);
}

.menu-readout small {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.menu-readout b {
    display: flex;
    align-items: center;
    min-height: 2rem;
    font-family: var(--font-narrow);
    font-size: 1.9rem;
    line-height: 1.05;
}

.menu-readout .menu-readout-lp,
.menu-readout-lp {
    color: var(--clr-status-success-text);
}

.menu-readout-credits {
    color: var(--clr-primary-text);
}

.menu-lead-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

/* Schwierigkeit als Rauten (6.1) */
.menu-diamonds {
    display: inline-flex;
    gap: 0.2rem;
}

.menu-diamonds span {
    width: 0.5rem;
    height: 0.5rem;
    transform: rotate(45deg);
    border: 1px solid var(--clr-text-muted);
}

.menu-diamonds .is-on {
    background: var(--clr-primary-main);
    border-color: var(--clr-primary-main);
}

.menu-readout .menu-diamonds {
    gap: 0.35rem;
}

.menu-readout .menu-diamonds span {
    width: 0.7rem;
    height: 0.7rem;
}

/* Taste im Knopf: hell auf Orange bzw. Petrol */
.btn .menu-key {
    border-color: var(--clr-surface-border);
    background: transparent;
    color: var(--clr-text-light);
}

/* Navigationseintrag als Kachel (Play Mission, Play Campaign, Load Game): mindestens 10,5 rem
   hoch (168 px, Vorgabe des Autors 2026-10-05). Mindesthöhe statt fester Höhe, damit ein
   umbrechender Text nicht abgeschnitten wird; die drei Kacheln teilen sich die Höhe der Zeile. */
.menu-nav-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-height: 10.5rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--clr-surface-border);
    background: var(--clr-surface-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--clr-text-primary);
    font-family: var(--font-regular);
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%);
}

.menu-nav-tile > i {
    font-size: 2rem;
}

.menu-nav-tile .menu-big {
    margin-top: auto;
    font-size: 2.1rem;
}

.menu-nav-tile .menu-key {
    position: absolute;
    top: 1rem;
    right: 1.7rem;
}

.menu-nav-tile:hover,
.menu-nav-tile:focus-visible {
    background: var(--clr-surface-input);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
}

/* Ecke färbt sich bei Hover/Fokus sofort orange */
.menu-nav-tile::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1.45rem;
    height: 1.45rem;
    background: linear-gradient(225deg, var(--clr-border-light) 50%, transparent 50%);
}

.menu-nav-tile:hover::after,
.menu-nav-tile:focus-visible::after {
    background: linear-gradient(225deg, var(--clr-primary-main) 50%, transparent 50%);
}

.menu-nav-tile-sub {
    font-size: 0.88rem;
    color: var(--clr-text-muted);
}

/* „Play Campaign": Petrol, die zweite Stufe der Abstufung Orange, Petrol, Grau */
.menu-nav-tile-secondary {
    border-color: var(--clr-secondary-main);
    background: linear-gradient(135deg, var(--clr-secondary-main), var(--clr-secondary-hover));
}

.menu-nav-tile-secondary:hover,
.menu-nav-tile-secondary:focus-visible {
    background: var(--clr-secondary-hover);
    box-shadow: inset 0 0 0 2px var(--clr-text-light);
}

.menu-nav-tile-secondary > i,
.menu-nav-tile-secondary:hover > i,
.menu-nav-tile-secondary:focus-visible > i,
.menu-nav-tile-secondary .menu-big,
.menu-nav-tile-secondary .menu-nav-tile-sub {
    color: var(--clr-text-light);
}

.menu-nav-tile-secondary .menu-key {
    border-color: var(--clr-surface-border);
    background: transparent;
    color: var(--clr-text-light);
}

.menu-nav-tile-secondary::after,
.menu-nav-tile-secondary:hover::after,
.menu-nav-tile-secondary:focus-visible::after {
    background: linear-gradient(225deg, var(--clr-secondary-hover) 50%, transparent 50%);
}

/* Hauptweg „Play Mission": orange */
.menu-nav-tile-primary {
    border-color: var(--clr-primary-main);
    background: linear-gradient(135deg, var(--clr-primary-main), var(--clr-primary-text));
}

.menu-nav-tile-primary:hover,
.menu-nav-tile-primary:focus-visible {
    background: linear-gradient(135deg, var(--clr-primary-hover), var(--clr-primary-text));
    box-shadow: inset 0 0 0 2px var(--clr-text-light);
}

.menu-nav-tile-primary > i,
.menu-nav-tile-primary:hover > i,
.menu-nav-tile-primary:focus-visible > i,
.menu-nav-tile-primary .menu-big,
.menu-nav-tile-primary .menu-nav-tile-sub {
    color: var(--clr-text-light);
}

.menu-nav-tile-primary .menu-key {
    border-color: var(--clr-surface-border);
    background: transparent;
    color: var(--clr-text-light);
}

.menu-nav-tile-primary::after,
.menu-nav-tile-primary:hover::after,
.menu-nav-tile-primary:focus-visible::after {
    background: linear-gradient(225deg, var(--clr-primary-hover) 50%, transparent 50%);
}

/* Kommandant (angemeldet) */
.menu-commander-rank {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.menu-commander-rank .menu-big {
    font-size: 3.4rem;
    color: var(--clr-primary-main);
}

.menu-kv {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.menu-kv li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.32rem 0;
    border-bottom: 1px dashed var(--clr-border-light);
}

.menu-kv li span:first-child {
    color: var(--clr-text-muted);
}

.menu-kv li span:last-child {
    font-family: var(--font-narrow);
    font-size: 1.15rem;
    font-weight: 700;
}

.menu-commander-since {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
}

/* Gastzugang */
.menu-guest {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.menu-guest .menu-big {
    font-size: 2.1rem;
}

.menu-guest p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.menu-guest-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
}

/* „About Aegis Commander": für Gäste und für Angemeldete ohne Spielstand. Der Text ist Markdown
   des Betreibers (`data/sites/<sprache>/about.md`); die Abstände seiner Blöcke trägt `.menu-markdown`. */
.menu-about .menu-big {
    margin-bottom: 0.75rem;
    font-size: 2.1rem;
}

.menu-about-text {
    max-width: 46rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.menu-about-text img {
    max-width: 100%;
    height: auto;
}

/* Letzte Spielstände: je Zeile Map, Operation und Stand, rechts „Fortsetzen" */
.menu-recent-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-recent-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px dashed var(--clr-border-light);
}

.menu-recent-info {
    min-width: 0;
}

.menu-recent-map {
    display: block;
    font-family: var(--font-narrow);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.menu-recent-sub {
    font-size: 0.88rem;
    color: var(--clr-text-muted);
}

/* „Continue Campaign" unter den letzten Spielständen: mit Abstand, wenn beide zu sehen sind */
.menu-recent-saves:not(.view-hidden) + .menu-recent-campaign {
    margin-top: 1.25rem;
}

/* Funkverkehr */
.menu-news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-news-list li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--clr-border-light);
    font-size: 0.9rem;
}

.menu-news-list time {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--clr-primary-text);
}

.menu-news-title {
    display: block;
}

.menu-news-teaser p {
    margin: 0.2rem 0 0;
}

.menu-news-teaser img {
    max-width: 100%;
    height: auto;
}

/* Links des Betreibers (Social Media, Spenden) unter den Kacheln, über die ganze Breite */
.menu-social {
    grid-column: 1 / -1;
}

.menu-social-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

/* Platzhalter für einen Link, den der Betreiber noch einträgt */
.menu-social-placeholder {
    min-height: 2.25rem;
    border: 1px dashed var(--clr-border-light);
}

/* Zwei Spalten: die große Kachel über die ganze Breite, darunter Kacheln und Statistiken
   nebeneinander, dann „About" bzw. Spielstände neben dem Funkverkehr */
@media (max-width: 1440px) {
    .menu-hub {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .menu-lead {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .menu-news {
        grid-column: 2;
    }
}

@media (max-width: 1023px) {
    .menu-hub {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu-about,
    .menu-recent,
    .menu-news {
        grid-column: auto;
    }

    .menu-lead-mark {
        height: 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-nav-tile::after {
        transition: none;
    }
}

/* --- Tastenleiste (5.1) ----------------------------------------------------- */
.menu-keybar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.55rem 1.75rem;
    background: var(--clr-surface-main);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--clr-surface-border);
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
    overflow-x: auto;
}

.menu-keybar-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Ein Hinweis, dessen Tasten (noch) nicht belegt sind, entfällt ganz */
.menu-keybar-hint:not(:has(.menu-key:not(:empty))) {
    display: none;
}

/* Rechtes Ende: Hinweis bei fehlender Verbindung (sonst ausgeblendet) und der Urheber als Weg zum
   Impressum */
.menu-keybar-end {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.menu-keybar-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.menu-keybar-status i {
    font-size: 0.6em;
    color: var(--clr-status-danger);
}

/* Schlicht-Link (`.btn-plain`): Schrift und Farbe der Leiste, beim Überfahren Orange */
.menu-keybar-legal {
    padding: 0;
}

/* --- Kleine Fenster ------------------------------------------------------- */

/* Kompakte Kopfleiste unter 1700 px (Beispielwert, 5.2): Reiter in eigener Zeile unter Logo und
   Symbolleiste, Symbole um ein Drittel kleiner. Avatar und Spieler-Menü bleiben gleich groß. */
@media (max-width: 1700px) {
    .menu-head {
        flex-wrap: wrap;
        gap: 0 0.75rem;
        min-height: 0;
        padding: 0.5rem 0.75rem 0;
    }

    .menu-brand-name {
        font-size: 1.5rem;
    }

    .menu-brand img {
        height: 2.4rem;
    }

    .menu-sections {
        order: 3;
        width: 100%;
        min-height: 3.5rem;
        margin: 0;
    }

    .menu-nav-tab {
        font-size: 1.3rem;
    }

    .menu-tools {
        margin-left: auto;
        gap: 0.35rem;
    }

    .menu-tools-sep {
        display: none;
    }

    .menu-nav-icon {
        width: 1.95rem;
        height: 1.95rem;
        font-size: 0.75rem;
        clip-path: polygon(0 0, calc(100% - 0.4rem) 0, 100% 0.4rem, 100% 100%, 0 100%);
    }

    .menu-nav-icon .menu-count {
        right: 0.1rem;
        bottom: 0.1rem;
        min-width: 0.75rem;
        height: 0.75rem;
        padding: 0 0.15rem;
        font-size: 0.5rem;
        line-height: 0.75rem;
    }

    .menu-user-list {
        top: calc(100% + 0.25rem);
    }
}

/* Wenig Platz (Beispielwerte: schmaler als 1024 px oder niedriger als 576 px, 4.1): natürliche
   Höhe, die Seite scrollt, die Tastenleiste haftet unten */
@media (max-width: 1023px), (max-height: 575px) {
    .menu-console {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .menu-stage {
        overflow: visible;
    }

    .menu-keybar {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
}

@media (max-width: 1023px) {
    .menu-stage {
        padding: 0.75rem;
    }

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

/* Sehr schmal: Schriftzug neben dem Logo und Name neben dem Avatar entfallen */
@media (max-width: 640px) {
    .menu-brand-name,
    .menu-user-text {
        display: none;
    }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt alle Wechsel ohne Übergang (4.4) */
@media (prefers-reduced-motion: reduce) {
    .menu-user-btn,
    .menu-user-chev,
    .menu-nav-tab .menu-nav-chev {
        transition: none;
    }
}

.view-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21.875em, 1fr));
    gap: var(--gap-inner);
    width: 100%;
}

.widget-title {
    font-family: var(--font-narrow);
    font-size: var(--fs-value);
    color: var(--clr-secondary-main);
    margin: 0 0 0.5em 0;
    text-transform: uppercase;
}

.widget-text {
    font-size: var(--fs-btn);
    line-height: 1.5;
    color: var(--clr-text-primary);
}

/* Zweiter Abschnitt innerhalb eines Widgets – die Neuigkeiten unter der Begrüßung. Ohne die
   Trennlinie liefen die beiden Absätze zu einem Text zusammen. */
.widget-section {
    margin-top: var(--gap-inner);
    padding-top: var(--gap-inner);
    border-top: 1px solid var(--clr-border-light);
}

.widget-subtitle {
    font-family: var(--font-narrow);
    font-size: var(--fs-btn);
    color: var(--clr-secondary-main);
    margin: 0 0 0.5em 0;
    text-transform: uppercase;
}

/* --- Missionsauswahl, Spiel laden, Editor-Auswahl als Ansichten (6.1, 6.4) ---------- */
.view-panel.menu-mission-panel,
.view-panel.menu-editor-panel {
    display: block;
    height: 100%;
}

/* Drei Spalten: Sektorliste, Briefing, Operationen; jede scrollt in sich */
.menu-mission {
    display: grid;
    grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr) minmax(19rem, 25rem);
    gap: 1rem;
    height: 100%;
    min-height: 0;
    max-width: var(--menu-content-width);
    margin: 0 auto;
}

/* Spiel laden: Liste und Spielstände */
.menu-mission.menu-mission-two {
    grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
}

.menu-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;
}

.menu-crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.menu-crumbs b {
    color: var(--clr-text-primary);
}

.menu-briefing {
    overflow: hidden;
}

/* `show()` nimmt nur das Inline-`display:none` weg; die Darstellung kommt von hier */
.menu-briefing-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.map-details-title .menu-briefing-title {
    margin: 0.2rem 0 0.4rem;
    font-size: clamp(2.2rem, 3.5vw, 3.6rem);
}

.map-details-version-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.menu-facts {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    margin: 0 0 1.2rem;
}

/* Reiter des Briefings: Community, Spielstände, Versionen */
.map-briefing-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
}

.map-briefing-tabs > .ui-tabs-nav {
    flex-shrink: 0;
    padding: 0;
}

.map-briefing-tabs.ui-tabs > .ui-tabs-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem 0 0;
}

.map-community-form {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin-bottom: 1.5em;
}

.rating-box {
    display: flex;
    align-items: center;
    gap: 1em;
}

.map-interactive-rating {
    font-size: 1.5em;
    color: var(--clr-primary-main);
    cursor: pointer;
}

.comment-box {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.map-comment-text {
    width: 100%;
    box-sizing: border-box;
}

.map-versions-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.map-version-item {
    gap: 0.5em;
    padding: 0.35rem 0.2rem;
}

.map-version-current {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

/* Operationen: erst wählen, dann starten */
.menu-op-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.menu-op-card {
    flex-shrink: 0;
    cursor: pointer;
    transition: box-shadow 80ms linear, background-color 80ms linear;
}

.menu-op-card:hover,
.menu-op-card:focus-visible {
    background: var(--clr-surface-input);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
    outline: none;
}

.menu-op-card.is-selected {
    background: linear-gradient(var(--clr-primary-subtle), var(--clr-primary-subtle)), var(--clr-surface-main);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
}

.menu-op-card .menu-big {
    font-size: 1.7rem;
    color: var(--clr-text-primary);
}

/* Name der Operation, rechts daneben der Schnellstart auf derselben Höhe */
.menu-op-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.menu-op-head .menu-big {
    min-width: 0;
}

.menu-op-desc {
    margin: 0.3rem 0 0.6rem;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
}

.menu-op-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.menu-op-line .menu-op-leaderboard {
    margin-left: auto;
}

.menu-op-done {
    font-weight: 700;
    color: var(--clr-status-success-text);
}

/* Höchste erreichte Bewertung der Operation als Badge der Stufe */
.menu-op-tier .badge-tier {
    font-size: 1.2em;
}

.menu-op-levels {
    display: flex;
    gap: 0.2rem;
    margin-top: 0.5rem;
}

.menu-op-levels span {
    flex: 1;
    height: 0.3rem;
    background: var(--clr-shade-15);
}

.menu-op-levels .is-done {
    background: var(--clr-secondary-main);
}

.menu-launch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.6rem;
}

.menu-launch .btn {
    justify-content: center;
    width: 100%;
}

/* --- Ansicht „Campaigns" (docs/41_Kampagnen_Achievements.md „Ansicht") -------------------
   Drei Spalten wie die Missionsauswahl. Die Mitte scrollt als Ganzes: Kopf, Sternenkarte,
   Nachricht und die Liste der gespielten Operationen stehen untereinander. */
.menu-campaign-content {
    gap: 0.6rem;
    overflow-y: auto;
}

/* Die Karte hat ihr festes Seitenverhältnis (star_map.css) und ändert ihre Größe nicht dynamisch */
.menu-campaign-map {
    position: relative;
    flex-shrink: 0;
}

.menu-campaign-map-tools {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Eigener Stand in der Liste der Kampagnen */
.menu-campaign-state {
    font-weight: 600;
}

.menu-campaign-state.is-won {
    color: var(--clr-status-success-text);
}

.menu-campaign-state.is-lost,
.menu-campaign-defeat {
    font-weight: 700;
    color: var(--clr-status-danger);
}

/* Sieg- bzw. Niederlage-Nachricht der Kampagne */
.menu-campaign-message {
    flex-shrink: 0;
    padding: var(--pad-card);
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-surface-border);
    border-left: 0.25rem solid var(--clr-status-success);
}

.menu-campaign-message.is-lost {
    border-left-color: var(--clr-status-danger);
}

.menu-campaign-message .menu-tile-label {
    margin-bottom: 0.4em;
}

.menu-campaign-message-audio {
    margin-top: 0.6em;
}

/* Kopf der rechten Spalte: was die Liste zeigt und der Weg zurück zu allen aktuellen Operationen */
.menu-campaign-ops-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.menu-campaign-ops-head .menu-tile-label {
    margin: 0;
}

/* Frühere Operation: lässt sich wiederholen, ändert die Kampagne aber nicht mehr */
.menu-op-card.is-replay .menu-big {
    color: var(--clr-text-muted);
}

.menu-campaign-replay-note {
    margin: 0.5rem 0 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    color: var(--clr-text-primary);
    background: var(--clr-primary-subtle);
    border-left: 0.2rem solid var(--clr-primary-main);
}

.menu-campaign-played-table .badge-tier {
    font-size: 1.1em;
}

/* Rangliste einer Kampagnen-Operation: Namen statt der Auswahl, dazu der Weg zurück */
.leaderboard-campaign-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-inner);
}

.leaderboard-campaign-bar .btn {
    margin-left: auto;
}

/* Editor-Auswahl: Tabelle der eigenen bzw. zu prüfenden Maps (Kachel `.menu-page`) */
.editor-view-tabs {
    padding: 0;
    border: none;
    background: none;
}

/* Operation des Tages im Dashboard (5.5.1) */
.menu-daily-text {
    max-width: 40rem;
    margin: -0.5rem 0 1rem;
    line-height: 1.5;
}

/* Feste Höhe der Kachel, solange sie die Operation des Tages zeigt (Beispielwert, etwa 540 px):
   Die Beschreibung ist je Tag verschieden lang, die Kachel soll nicht mitwachsen. Ein längerer
   Text scrollt in sich; Werte und Knöpfe bleiben stehen. */
.menu-lead.is-daily {
    height: 33.75rem;
    min-height: 0;
}

.menu-lead.is-daily .menu-lead-body {
    min-height: 0;
}

.menu-lead.is-daily .menu-daily-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.menu-daily-text:empty {
    display: none;
}

/* Pflege der Operation des Tages (5.5.4) */
.daily-admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.daily-change-info {
    margin: 0;
    color: var(--clr-text-muted);
}

.daily-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.daily-code {
    display: inline-block;
    padding: 0 0.3rem;
    border: 1px solid var(--clr-secondary-main);
    font-family: var(--font-narrow);
    font-weight: 700;
    color: var(--clr-secondary-main);
}

.daily-table .daily-row-today td {
    background: var(--clr-primary-subtle);
}

.daily-table .daily-row-unplayable td {
    color: var(--clr-text-muted);
}

.daily-substitute {
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.daily-add {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.daily-add-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.daily-add-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px dashed var(--clr-border-light);
    cursor: pointer;
}

.daily-add-item > span {
    flex: 1;
}

.daily-add-item.is-listed {
    color: var(--clr-text-muted);
    cursor: default;
}

.daily-add-listed {
    font-size: 0.75rem;
    font-style: italic;
}

.daily-switch-select {
    width: 100%;
}

/* Pflege der Tutorials (5.5.6): Hinzufügen-Dialog mit dem Namen des Tutorials je gewählter Operation */
.tutorial-add-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px dashed var(--clr-border-light);
}

.tutorial-add-pick {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.tutorial-add-pick > span {
    flex: 1;
}

.tutorial-add-item.is-listed {
    color: var(--clr-text-muted);
}

.tutorial-add-item.is-listed .tutorial-add-pick {
    cursor: default;
}

.tutorial-add-name {
    margin-left: 1.75rem;
}

/* --- Hilfe (5.7): Themen, Text, Kontakt im Raster der Missionsauswahl ------------ */
.menu-help-topic-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.menu-help-topic {
    flex-shrink: 0;
    font-size: 1.05rem;
    white-space: normal;
}

/* Das offene Thema: Balken links wie der aktive Reiter unten */
.menu-help-topic[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--clr-primary-main);
}

.menu-help-body {
    overflow: hidden;
}

.menu-help-title {
    font-size: clamp(2rem, 3vw, 3rem);
}

.menu-help-text {
    flex: 1;
    min-height: 0;
    max-width: 52rem;
    overflow-y: auto;
    padding-right: 0.5rem;
    line-height: 1.55;
}

.menu-help-text h2 {
    margin: 1.4rem 0 0.4rem;
    font-family: var(--font-narrow);
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.menu-help-text h3 {
    margin: 1rem 0 0.3rem;
    font-size: 1.1rem;
}

.menu-help-text p,
.menu-help-text ul,
.menu-help-text ol {
    margin: 0 0 0.8rem;
}

.menu-help-text li {
    margin: 0.2rem 0;
}

.menu-help-text img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.6rem 0;
    border: 1px solid var(--clr-surface-border);
}

.menu-help-text table {
    border-collapse: collapse;
    margin: 0 0 0.8rem;
}

.menu-help-text th,
.menu-help-text td {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--clr-border-light);
}

.menu-help-note {
    color: var(--clr-text-muted);
}

/* Kontakt: nur so hoch wie sein Inhalt */
.menu-help-contact {
    align-self: start;
}

.menu-help-contact-title {
    margin: 0;
    font-family: var(--font-narrow);
    font-size: 1.6rem;
    color: var(--clr-text-primary);
}

/* Wenig Breite: Operationen bzw. Kontakt unter Liste und Briefing, sehr wenig Breite alles untereinander */
@media (max-width: 1440px) {
    .menu-mission {
        grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    }

    .menu-operations,
    .menu-help-contact {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1023px), (max-height: 575px) {
    .view-panel.menu-mission-panel,
    .view-panel.menu-editor-panel,
    .menu-mission {
        height: auto;
    }

    .menu-mission,
    .menu-mission.menu-mission-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu-col,
    .menu-briefing,
    .menu-op-list,
    .map-list,
    .map-briefing-tabs.ui-tabs > .ui-tabs-panel,
    .menu-help-topic-list,
    .menu-help-body,
    .menu-help-text {
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-op-card {
        transition: none;
    }
}

.map-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.map-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.map-card {
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-surface-border);
    padding: 0.5em;
    display: flex;
    gap: 0.5em;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.map-card:hover {
    background: var(--clr-surface-hover);
    border-color: var(--clr-primary-main);
}

.map-card.selected {
    background: var(--clr-surface-hover);
    border-color: var(--clr-primary-main);
    box-shadow: 0 0 5px var(--clr-primary-main);
}

/* Kürzel der Map statt Vorschaubild (docs/36_Hauptmenue_Konzept.md 6.2, 6.3). Ohne Kürzel bleibt
   der Platz leer, damit die Namen bündig stehen (F15). */
.map-card-code {
    flex-shrink: 0;
    width: 3.6rem;
    align-self: center;
    font-family: var(--font-narrow);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--clr-secondary-main);
}

.map-details-title .map-card-code {
    display: block;
    width: auto;
}

.map-details-title .map-card-code:empty {
    display: none;
}

.map-card-badges:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin: 0.2em 0;
}

.map-card-rating-value {
    margin-left: 0.2em;
}

/* Favoriten-Stern auf der Katalog-Karte: Schlicht-Umschalter (`.btn-plain`, Farbe aus `.is-active`),
   hier nur Lage und Größe; der Klick darf die Karte nicht mitauswählen */
.map-card-fav {
    align-self: flex-start;
    margin-left: auto;
    padding: 0.2em 0.4em;
    font-size: var(--fs-btn);
}

.map-list-empty {
    padding: 1em;
    text-align: center;
    color: var(--clr-text-muted);
}

/* Filter des Katalogs: eine Reihe Filter-Chips (`.btn-filter`, global.css) über der Liste */
.map-catalog-filters {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 0.25rem;
}

/* Hinweis nach dem Abgleich im Hintergrund (Konzept 36, 7.3): klein, ohne Animation */
.map-catalog-sync {
    flex-shrink: 0;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
    text-align: right;
}

.map-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-card-title {
    font-family: var(--font-narrow);
    font-size: var(--fs-value);
    color: var(--clr-secondary-main);
    margin: 0;
}

.map-card-meta {
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.map-details-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--clr-text-muted);
    font-size: var(--fs-title);
    text-align: center;
}

.map-details-empty i {
    font-size: 3em;
    margin-bottom: 0.2em;
}

.map-details-header {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 1em;
}

.map-details-title h2 {
    font-family: var(--font-narrow);
    font-size: 2em;
    color: var(--clr-secondary-main);
    margin: 0 0 0.2em 0;
}

.map-details-meta {
    display: flex;
    gap: 1em;
    font-size: var(--fs-btn);
    color: var(--clr-text-muted);
}

/* Beschreibung der Map: Markdown (`renderMarkdown()`), deshalb ein Behälter statt eines `<p>`.
   Die Abstände nach außen trägt der Behälter, die der Blöcke im Text `.menu-markdown`. */
.map-description {
    font-size: var(--fs-btn);
    color: var(--clr-text-primary);
    line-height: 1.5;
    margin: 1em 0 2em;
}

/* Markdown-Texte von Autoren im Menü (`renderMarkdown()`): Beschreibung der Map, der Operationen
   und der Operation des Tages. Die Klasse trägt nur die Abstände der Blöcke im Text; Schrift,
   Farbe und Außenabstand gehören dem jeweiligen Behälter. */
.menu-markdown p,
.menu-markdown ul,
.menu-markdown ol,
.menu-markdown blockquote,
.menu-markdown pre,
.menu-markdown table {
    margin: 0 0 0.6em;
}

.menu-markdown ul,
.menu-markdown ol {
    padding-left: 1.4em;
}

.menu-markdown h1,
.menu-markdown h2,
.menu-markdown h3,
.menu-markdown h4,
.menu-markdown h5,
.menu-markdown h6 {
    margin: 0.9em 0 0.3em;
    font-family: var(--font-narrow);
    font-size: 1.15em;
    color: var(--clr-secondary-main);
}

.menu-markdown > :first-child {
    margin-top: 0;
}

.menu-markdown > :last-child {
    margin-bottom: 0;
}

.section-title {
    font-family: var(--font-narrow);
    font-size: var(--fs-value);
    color: var(--clr-secondary-main);
    margin: 0 0 0.5em 0;
    text-transform: uppercase;
    border-bottom: 1px solid var(--clr-surface-border);
    padding-bottom: 0.2em;
}

.operations-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 2em;
}

.operation-card {
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-surface-border);
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.operation-info h4 {
    margin: 0 0 0.2em 0;
    color: var(--clr-text-primary);
    font-size: var(--fs-btn);
}

.operation-info p {
    margin: 0;
    color: var(--clr-text-muted);
    font-size: var(--fs-label);
}

.community-section {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.comment-card {
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-surface-border);
    padding: 0.5em 1em;
    margin-bottom: 1em;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
    margin-bottom: 0.5em;
    border-bottom: 1px solid var(--clr-surface-border);
    padding-bottom: 0.2em;
}

.comment-text {
    font-size: var(--fs-btn);
    color: var(--clr-text-primary);
    margin: 0;
}

.operation-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* Leaderboard View */
.leaderboard-widget {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.leaderboard-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-inner);
}

.leaderboard-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    flex: 1 1 15em;
}

.leaderboard-filter-label {
    font-family: var(--font-regular);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

/* Ranglisten-Anzeige innerhalb des aktiven Zeitraum-Tabs
   (die Tabs selbst nutzen das jQuery-UI-Tabs-Widget mit seinem eigenen Theme) */
.leaderboard-results {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.leaderboard-own-entry {
    margin: 0;
    padding: var(--pad-card);
    background: var(--clr-primary-subtle);
}

.leaderboard-row-own td {
    background: var(--clr-primary-subtle);
    font-weight: 600;
}

/* New Game: status badge & moderation */
.map-status-badge {
    margin-left: 0.5em;
    vertical-align: middle;
}

/* New Game: Versionsnummer neben dem Map-Namen (docs/21_Map_Versionen_Konzept.md).
   Sie ist Teil der Anzeige, nicht des gespeicherten Namens. */
.map-version-label {
    color: var(--clr-text-muted);
    font-weight: 600;
    vertical-align: middle;
}

.comment-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* Kommentare: Selbstverwaltung, Bearbeitungs-Kennzeichnung und gelöschte Karten
   (docs/19_Kommentare_Konzept.md 4.4, 4.5) */
.comment-edited {
    font-style: italic;
    color: var(--clr-text-muted);
}

/* Gelöschte Kommentare sieht nur die Moderation; sie sollen sich klar von den übrigen
   unterscheiden, damit niemand sie für sichtbare Beiträge hält */
.comment-card-deleted {
    border-style: dashed;
    border-color: var(--clr-status-danger);
    opacity: 0.75;
}

.comment-deleted-note {
    margin: 0.3em 0 0 0;
    font-size: var(--fs-label);
    color: var(--clr-status-danger);
}

/* Schalter (global.css) über der Liste */
.comment-deleted-toggle {
    margin-bottom: var(--gap-inner);
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.comment-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-top: 0.3em;
}

.comment-edit-form .comment-edit-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.comment-edit-hint {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.comment-edit-error {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--clr-status-danger);
}

.comment-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
}

/* Melde-Dialog (js/menu/main/ReportDialog.js, docs/19_Kommentare_Konzept.md 5.2) */
.report-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.report-field {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.report-label {
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
    text-transform: uppercase;
}

.report-required {
    color: var(--clr-status-danger);
}

.report-hint {
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.report-error {
    margin: 0;
    color: var(--clr-status-danger);
}

/* Der Hinweis auf Folgen eines Missbrauchs gehört sichtbar in den Dialog, nicht ins Kleingedruckte */
.report-warning {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    padding: var(--pad-card);
    background: var(--clr-primary-subtle);
    border: 1px solid var(--clr-primary-main);
    font-size: var(--fs-label);
}

/* Melde-Knopf im Kopf der Map-Detailansicht */
#menu-btn-report-map {
    align-self: flex-start;
    margin-left: auto;
}

/* Text-Export der Moderation steht links neben dem Melde-Knopf; beide bleiben rechts beisammen */
#menu-btn-export-map-texts {
    align-self: flex-start;
    margin-left: auto;
}

#menu-btn-export-map-texts:not(.view-hidden) + #menu-btn-report-map {
    margin-left: 0;
}

/* Absenden-Knopf unter dem Kommentarfeld */
.comment-submit {
    align-self: flex-end;
}

/* Gast-Hinweis der Community-Sektion (docs/19_Kommentare_Konzept.md, Befund B8).
   Bewusst ohne `display: flex`: Das Element wird per jQuery .show()/.hide() geschaltet, und
   .show() setzt notfalls `display: block` – ein Flex-Layout ginge dabei verloren. */
.community-guest {
    margin-bottom: 1em;
    padding: var(--pad-card);
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-surface-border);
    text-align: center;
}

/* Hinweis nach einer Umleitung von einer Editor-Seite (Todo F1.1) */
.access-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0 0 var(--gap-inner) 0;
    padding: var(--pad-card);
    background: var(--clr-primary-subtle);
    border: 1px solid var(--clr-primary-main);
    font-weight: 600;
}

.access-notice-reason {
    flex: 1 1 100%;
    font-weight: 400;
    color: var(--clr-text-muted);
}

.community-guest-icon {
    font-size: 1.6em;
    color: var(--clr-text-muted);
}

.community-guest .widget-text {
    margin: 0.4em 0 0.8em 0;
}

/* Hinweis auf die offene E-Mail-Bestätigung (GDD 8.1, Todo-Phase 6, Punkt 1).
   Bewusst in Warnfarbe statt in Rot: Es ist eine Aufgabe, kein Fehler. */
.verify-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0 0 var(--gap-inner) 0;
    padding: var(--pad-card);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid var(--clr-status-warning);
    font-weight: 600;
}

/* Anmelden und Konto anlegen (docs/36_Hauptmenue_Konzept.md, Kapitel 8): je eine Ansicht mit
   beschrifteten Feldern; Fehler über Klassen, nicht über Inline-Farben */
.menu-auth {
    grid-column: 1 / -1;
    justify-self: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 30rem;
}

.menu-auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 1rem;
}

.menu-auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.menu-auth-label {
    font-size: var(--fs-label);
    font-weight: 700;
    color: var(--clr-text-primary);
}

.menu-auth-hint {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

/* Stärkeanzeige im Label: dort nur Phrasing-Inhalt (`span`), deshalb als Block */
.menu-auth-field .pw-strength-track,
.menu-auth-field .pw-strength-bar {
    display: block;
}

.menu-auth-error {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--clr-status-danger);
}

.menu-auth-forgot {
    align-self: center;
    font-size: var(--fs-label);
}

/* „Noch kein Konto?" bzw. „Schon ein Konto?" unter dem Formular */
.menu-auth-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border-light);
    color: var(--clr-text-muted);
}

/* Anmeldung über Google/Discord (Todo-Phase 6, Punkt 2) */
.auth-divider {
    margin: 1.5em 0;
    text-align: center;
    border-bottom: 1px solid var(--clr-surface-border);
    line-height: 0.1em;
}

.auth-divider span {
    padding: 0 0.6em;
    background: var(--clr-surface-main);
    color: var(--clr-text-muted);
}

.auth-oauth-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    color: var(--clr-text-light);
    text-decoration: none;
}

.btn-oauth-google {
    background-color: var(--clr-brand-google);
}

.btn-oauth-discord {
    background-color: var(--clr-brand-discord);
}

/* Spielstands-Liste in der Map-Detailansicht (GDD 7.4, Todo-Phase 5, Punkt 3) */
.map-savegames {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.map-savegame-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.map-savegame-operation {
    margin: 0;
    font-family: var(--font-narrow);
    font-size: var(--fs-btn);
    color: var(--clr-secondary-main);
}

.map-savegame-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-inner);
    padding: var(--pad-card);
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-surface-border);
}

.map-savegame-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 14em;
}

.map-savegame-title {
    font-size: var(--fs-btn);
}

.map-savegame-meta,
.map-savegames-empty {
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.ratings-moderation {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.ratings-moderation-title {
    margin: 0;
    font-family: var(--font-narrow);
    font-size: var(--fs-btn);
    color: var(--clr-text-muted);
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Klassen statt Inline-Styles (Guideline 3.3, Code Control 2026-09-17).
   Vorher trugen die Karten und Spielstands-Zeilen ihr Layout in `style`-Attributen.
   --------------------------------------------------------------------------- */

/* Statuszeilen einer Liste: „wird geladen", „nichts gefunden", Fehler */
.list-status {
    padding: 1em;
    text-align: center;
}

.list-error {
    padding: 1em;
    color: var(--clr-status-danger);
}

/* Auswahlfelder, die nur so breit wie ihr Inhalt sein sollen */
.select-inline {
    width: auto;
}

/* Anzahl der Bewertungen hinter den Sternen */
.rating-count {
    font-size: 0.8em;
    color: var(--clr-text-muted);
}

.rating-value-inline {
    margin-left: 0.2em;
}

/* „Spiel laden": Karten und Spielstands-Zeilen */
.map-card-info-grow {
    flex-grow: 1;
}

.operation-card-stacked {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 1em;
}

.operation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.savegames-list {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.savegame-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em;
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-surface-border);
}

.savegame-item-text {
    font-size: 0.9em;
    flex-grow: 1;
}

.savegame-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-left: 1em;
}

.savegame-autosave-tag {
    color: var(--clr-primary-main);
    font-weight: bold;
}

/* ---------------------------------------------------------------------------
   Telemetrie-Frage (docs/36_Hauptmenue_Konzept.md 9.1, js/menu/main/TelemetryConsent.js).
   Nicht modal, unten mittig über der Tastenleiste; beide Antworten in derselben Knopfart.
   --------------------------------------------------------------------------- */
.consent-panel {
    position: fixed;
    left: 50%;
    bottom: 3.75rem;
    z-index: 50;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: min(46rem, calc(100vw - 2rem));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2.5rem 1rem 1.25rem;
    border-left: 4px solid var(--clr-secondary-main);
    background: var(--clr-surface-input);
}

.consent-panel-icon {
    font-size: 2rem;
    color: var(--clr-secondary-main);
}

.consent-panel-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-narrow);
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.consent-panel-text {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--clr-text-muted);
}

.consent-panel-more {
    font-size: 0.85rem;
}

.consent-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.consent-panel-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
}

@media (max-width: 640px) {
    .consent-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .consent-panel-icon {
        display: none;
    }

    .consent-panel-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}