/* Schriften kommen aus css/fonts.css (selbst gehostet, DSGVO).
   Der frühere @import von fonts.googleapis.com stand hier versehentlich noch drin und
   hat die Selbst-Hostung ausgehebelt – bei jedem Seitenaufruf ging eine Anfrage an
   Google-Server. Bewusst entfernt, nicht wieder aufnehmen. */

/* ══ Gestaltungs-Grundwerte ═══════════════════════════════════════════════════
   Vorher lagen Radien und Schatten verstreut als feste Werte im Markup
   (147× 12px, daneben 8/10/14/16px; Schatten an 10 Stellen hart kodiert).
   Ab hier gibt es dafür zentrale Werte. */
:root {
    /* Schriften an EINER Stelle. Die 536 Inline-Angaben im Markup zeigen alle
       hierher – ein Schriftwechsel ist damit künftig eine Zeile statt 71 Dateien. */
    --sim-font-display: 'Saira', system-ui, sans-serif;   /* Überschriften, Kennzahlen */
    --sim-font-text: 'Inter', system-ui, sans-serif;      /* Fließtext, Oberfläche */

    --sim-radius-sm: 10px;
    --sim-radius: 14px;
    --sim-radius-lg: 20px;

    --sim-shadow-1: 0 1px 2px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.07);
    --sim-shadow-2: 0 2px 6px rgba(0,0,0,0.07), 0 14px 36px rgba(0,0,0,0.12);
    --sim-shadow-akzent: 0 10px 30px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);

    --sim-uebergang: 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    --sim-abschnitt: clamp(3rem, 7vw, 5.5rem);   /* Luft zwischen Abschnitten */
    --sim-rand: 1px solid var(--mud-palette-lines-default);
}

/* Im dunklen Modus tragen weiche schwarze Schatten nicht – dort wirkt ein
   heller Innenrand plus tieferer Schatten. */
html[data-sim-theme="dark"] {
    --sim-shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.35);
    --sim-shadow-2: 0 2px 8px rgba(0,0,0,0.45), 0 18px 44px rgba(0,0,0,0.5);
}

html, body {
    font-family: var(--sim-font-text);
    background: var(--mud-palette-background);
    -webkit-font-smoothing: antialiased;
}

/* ══ Nichts wackelt waagrecht ═════════════════════════════════════════════════
   Zwei verschiedene Ursachen, zwei Zeilen:

   1. overscroll-behavior-x: none – In der App (Android-WebView) gibt der Inhalt
      beim Wischen nach links/rechts ein Stück nach und federt zurück, auch wenn
      es gar nichts zu scrollen gibt. Das ist der „nicht viel, aber etwas"-Effekt;
      er verrutscht das Bild und sieht nach einem Fehler aus.

   2. overflow-x: clip – Ein einziges zu breites Element (eine lange Zeile, ein
      Bild, ein Raster mit negativem Außenabstand) macht sonst die GANZE Seite
      waagrecht scrollbar. Bewusst „clip" und nicht „hidden": „hidden" macht aus
      dem Körper einen Scrollbereich und bricht damit position:sticky – dann
      klebten Tabellenköpfe und Kopfleisten nicht mehr.

   Inhalte, die WIRKLICH breit sind (Tabellen, Diagramme), scrollen unverändert
   in ihrem eigenen Kasten – die Regel hier betrifft nur das Seitengerüst. */
html {
    overscroll-behavior-x: none;
}
html, body {
    overflow-x: clip;
}
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}

/* ══ Einblenden beim Scrollen ═════════════════════════════════════════════════
   WICHTIG – Ausfallsicherheit: Versteckt wird NUR, wenn der Beobachter in index.html
   wirklich läuft (er setzt dann html.sim-anim). Stünde das Verstecken unbedingt hier,
   bliebe bei einem JavaScript-Fehler oder fehlendem IntersectionObserver die halbe
   Seite dauerhaft unsichtbar – ein stiller Totalausfall des Inhalts. */
html.sim-anim .sim-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

html.sim-anim .sim-reveal-in {
    opacity: 1;
    transform: none;
}

/* Gestaffelt: nachfolgende Elemente einer Gruppe kommen leicht versetzt */
.sim-reveal-2 { transition-delay: 0.08s; }
.sim-reveal-3 { transition-delay: 0.16s; }
.sim-reveal-4 { transition-delay: 0.24s; }

/* Barrierefreiheit: Wer Bewegung reduziert, bekommt keine Animation –
   und vor allem darf nichts unsichtbar hängen bleiben. */
@media (prefers-reduced-motion: reduce) {
    .sim-reveal, .sim-reveal-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══ Karten mit Tiefe ═════════════════════════════════════════════════════════ */
.sim-card {
    border-radius: var(--sim-radius) !important;
    border: var(--sim-rand);
    box-shadow: var(--sim-shadow-1) !important;
    transition: transform var(--sim-uebergang), box-shadow var(--sim-uebergang), border-color var(--sim-uebergang);
    overflow: hidden;
}

.sim-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--sim-shadow-2) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

/* Ältere Klasse bleibt bestehen (wird an mehreren Stellen genutzt), nur feiner */
.race-card-hover {
    transition: transform var(--sim-uebergang), box-shadow var(--sim-uebergang);
}

.race-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--sim-shadow-2) !important;
}

/* ══ Öffentlicher Bereich ═════════════════════════════════════════════════════ */
.sim-public {
    /* Abschnitts-Rhythmus: großzügiger und überall gleich */
    --sim-abschnitt-innen: var(--sim-abschnitt);
}

/* Karten im öffentlichen Bereich bekommen durchgängig Tiefe, ohne dass jede
   Seite einzeln angefasst werden muss. */
.sim-public .mud-paper:not(.mud-popover):not(.mud-appbar),
.sim-public .mud-card {
    border-radius: var(--sim-radius) !important;
    box-shadow: var(--sim-shadow-1) !important;
    border: var(--sim-rand);
    transition: transform var(--sim-uebergang), box-shadow var(--sim-uebergang), border-color var(--sim-uebergang);
}

/* .sim-kopf ist ERSATZLOS ENTFALLEN. Es war die zweite, milchig-transparente
   Kopfleiste für Shop und öffentliche Seiten – der Grund, warum das Band dort
   anders aussah als im Kundenbereich. Es gibt jetzt nur noch .sim-kopf-app. */

/* Erst beim Scrollen wirft die Kopfzeile einen Schatten (Klasse setzt index.html).
   Der Scroll-Melder in index.html sucht '.sim-kopf, .sim-kopf-app' – unsere Bänder
   tragen alle .sim-kopf-app, der erste Selektor läuft nur noch ins Leere. */
.sim-kopf-gescrollt {
    box-shadow: var(--sim-shadow-1);
}

/* ── Freistehendes Kopfband (öffentlich + Shop) ────────────────────────────────
   Intern ist .sim-kopf-app eine MudAppBar mit fester Bandhöhe aus dem Theme.
   Öffentlich/Shop gibt es kein MudLayout, dort ist es ein <header>. Diese Regel
   gleicht Höhe, Verankerung, Textfarbe und Flex an – Verlauf, Weichzeichner und
   Akzentkante kommen aus .sim-kopf-app, dadurch sieht es überall gleich aus.

   display:flex ist ZWINGEND: MudSpacer und MudBadge setzen einen Flex-Container
   voraus; die MudAppBar bringt ihn mit, ein <header> nicht.

   padding-left ist BEWUSST --sim-logo-links: Dadurch steht das Logo-Schild hier
   auf exakt derselben x-Position wie der fixierte Kasten im internen Bereich,
   ohne dass eine einzige interne Variable verschoben werden muss.

   position:sticky steht NUR hier und nicht auf .sim-kopf-app allgemein – dort
   könnte es den padding-top-Ausgleich des MudMainContent aushebeln. */
header.sim-kopf-frei {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-height: var(--sim-band-hoehe);
    padding-left: var(--sim-logo-links);
    padding-right: clamp(0.5rem, 2vw, 1rem);
    color: var(--mud-palette-text-primary);
    /* Das Logo-Schild ragt unten heraus – derselbe Betrag, den intern der Drawer
       als padding-top bekommt. Ohne das verdeckt der Überstand den Seiteninhalt. */
    margin-bottom: var(--sim-logo-ueberstand);
    transition: box-shadow var(--sim-uebergang);
}

/* Logo-Schild im Textfluss (öffentlich/Shop) – SELBES Element und SELBE Maße wie
   intern, nur ohne position:fixed. Die negativen Ränder sorgen dafür, dass das
   158px hohe Schild das 70px hohe Band NICHT höher macht:
       Beitrag zur Bandhöhe = 10 (oben) + 158 − 98 (--sim-logo-ueberstand) = 70.
   Genau daran scheiterte die alte Lösung mit .sim-logolabel: dessen min-height
   von 150px ist eine UNTERgrenze und blähte das Band auf ~150px auf – mehr als
   das Doppelte des internen Bandes. */
.sim-logokasten--fluss {
    position: relative;
    top: auto;
    left: auto;
    z-index: 5;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: var(--sim-logo-abstand);
    margin-bottom: calc(-1 * var(--sim-logo-ueberstand));
}

/* Schmale Bildschirme: umbrechen dürfen, aber das Schild bleibt in der ersten Zeile. */
@media (max-width: 600px) {
    header.sim-kopf-frei { flex-wrap: wrap; padding-block: 0.3rem; }
}

/* Startseite: Der Akzent-Verlauf gehört HINTER den Hero, nicht über die ganze Seite.
   background-size begrenzt ihn auf die oberen ~70vh, danach nur noch Grundfarbe. */
/* Zusätzlich auf .sim-oeffentlich-flaeche (die Fläche im PublicLayout): Das Kopfband
   liegt jetzt im Layout ÜBER dem Seiteninhalt. Läge der Verlauf weiterhin nur auf dem
   Seiten-Wrapper, begänne er erst UNTER dem Band und der Hero säße nicht mehr in
   seinem Zentrum. Landing und CMS-Seiten teilen sich dadurch denselben Verlauf –
   vorher waren es zwei leicht verschiedene Fassungen (22%/60% vs. 18%/55%). */
.sim-landing,
.sim-oeffentlich-flaeche {
    background-color: var(--mud-palette-background);
    background-image: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 0%, transparent 60%);
    background-repeat: no-repeat;
    background-size: 100% 70vh;
}

/* Im hellen Modus wäre derselbe Verlauf ein rosa Schleier – hier reicht ein Hauch. */
html[data-sim-theme="light"] .sim-landing,
html[data-sim-theme="light"] .sim-oeffentlich-flaeche {
    background-image: radial-gradient(ellipse at 50% 0%,
        color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 0%, transparent 55%);
    background-size: 100% 46vh;
}

/* ══ Abschnitts-Überschrift ═══════════════════════════════════════════════════
   Eine Stufe für alle Abschnitte, statt sechs verschiedener Inline-Größen.
   Der kurze Akzentstrich darüber gibt dem Abschnitt einen klaren Anfang. */
.sim-abschnitt-titel {
    font-family: var(--sim-font-display);
    font-weight: 900;
    letter-spacing: 0.1em;
    font-size: clamp(1.35rem, 3.2vw, 2.1rem);
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    margin: 0 0 0.5rem;
}

.sim-abschnitt-kopf {
    text-align: center;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* Akzentstrich über der Überschrift */
.sim-abschnitt-kopf::before {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 0 auto 1.1rem;
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-primary) 25%, transparent));
}

.sim-abschnitt-unter {
    color: var(--mud-palette-text-secondary);
    max-width: 46ch;
    margin: 0 auto;
    font-size: 1.02rem;
}

/* ══ Mehr Charakter ═══════════════════════════════════════════════════════════ */

/* Karten bekommen beim Zeigen eine Akzentkante an der Oberkante */
.sim-card {
    position: relative;
}

.sim-card-hover::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-secondary) 70%, var(--mud-palette-primary)));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sim-uebergang);
}

.sim-card-hover:hover::after { transform: scaleX(1); }

/* Bild in der Karte zieht beim Zeigen leicht an */
.sim-card .mud-card-media,
.sim-card img {
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sim-card-hover:hover .mud-card-media,
.sim-card-hover:hover img { transform: scale(1.05); }

/* Buttons: vorher sechs Größen zwischen 0,6 und 0,75rem – die kleinsten
   wirkten wie deaktiviert. Im öffentlichen Bereich jetzt eine lesbare Stufe.
   WICHTIG auch `.sim-kopf`: Der Shop-Kopf liegt AUSSERHALB von .sim-public
   (anderer Aufbau als bei Landing/CMS-Seiten). Ohne diesen zweiten Selektor
   waren die Shop-Menüpunkte 10,88px eckig statt 12,48px als Pille – genau der
   sichtbare Unterschied zwischen den beiden Kopfleisten. */
.sim-public .mud-button-root,
.sim-kopf-app .mud-button-root {
    font-size: 0.78rem !important;
    letter-spacing: 0.08em;
    border-radius: 999px !important;
    padding-inline: 1.4rem !important;
    transition: transform var(--sim-uebergang), box-shadow var(--sim-uebergang);
}

/* Auch der Hover-Block braucht .sim-kopf-app – sonst verliert der Anmelden-Knopf
   im öffentlichen Band seinen Effekt, den er im Kundenbereich hat. */
.sim-public .mud-button-filled:hover,
.sim-kopf-app .mud-button-filled:hover {
    transform: translateY(-2px);
    box-shadow: var(--sim-shadow-akzent);
}

/* Kennzahlen/Preise: Orbitron, groß, in der Akzentfarbe */
.sim-preis {
    font-family: var(--sim-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mud-palette-primary);
    letter-spacing: 0.02em;
}

/* Ladeplatzhalter, damit die Seite beim Aufbau nicht springt */
.sim-skelett {
    border-radius: var(--sim-radius);
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent) 30%,
        color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent) 50%,
        color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent) 70%);
    background-size: 220% 100%;
    animation: sim-schimmer 1.4s ease-in-out infinite;
}

@keyframes sim-schimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

/* Platzhalter für fehlende Produktbilder: im hellen Modus war er weiß auf weiß
   und damit unsichtbar. */
.sim-bild-platzhalter {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent),
        color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent));
    color: color-mix(in srgb, var(--mud-palette-text-primary) 45%, transparent);
}

/* Preis-Auszeichnung im Shop */
.sim-preis {
    font-family: var(--sim-font-display);
    font-weight: 700;
    color: var(--mud-palette-primary);
    letter-spacing: 0.02em;
}

/* ══ Interner Bereich (Etappe 2) ══════════════════════════════════════════════
   BEWUSST SPARSAM. Die Regeln von .sim-public werden hier NICHT wiederholt:
   Eine globale Karten-Regel mit "box-shadow: … !important" würde die
   Zustandsanzeige der Kasse zerstören (Pos.razor kodiert frei/belegt/gewählt
   ausschließlich über Elevation + Rahmenfarbe), die Pillen-Buttons würden die
   Produktkacheln im 110px-Raster sprengen, und ein Anhebe-"transform" würde
   position:sticky in den Beleg-/Einstellungs-Panels abschalten. */

/* Gedämpfter Text statt Markenfarbe.
   Ursache: 339 <MudText Color="Color.Secondary"> in 61 Dateien. In MudBlazor meint
   das die SEKUNDÄRE MARKENFARBE, nicht "unauffälliger Text" – hier also kräftiges
   Rot (rgb(235,36,36)). Im dunklen Modus ein Akzent, auf Weiß liest sich damit die
   halbe Oberfläche wie eine Fehlermeldung.
   Gezielt nur auf Typografie: Buttons, Chips und Icons behalten die Markenfarbe. */
.mud-typography.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* ── Kopfleiste innen: farblich abgesetzt ──────────────────────────────────────
   Bewusst aus den Palettenfarben gemischt statt fest kodiert: Die Marken­farben
   sind in den Einstellungen änderbar, das Menüband zieht dadurch automatisch mit. */
.sim-kopf-app {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--mud-palette-surface) 86%, var(--mud-palette-primary)) 0%,
        color-mix(in srgb, var(--mud-palette-surface) 93%, var(--mud-palette-secondary)) 55%,
        color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-warning)) 100%) !important;
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    backdrop-filter: saturate(1.5) blur(12px);
    /* Akzentkante statt grauer Linie – gibt dem Band einen klaren Abschluss */
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg,
        var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-primary) 30%, transparent)) 1;
}

/* Werkzeuge oben rechts größer und mit etwas mehr Luft zueinander */
.sim-kopf-app .mud-icon-button {
    width: 44px;
    height: 44px;
}

.sim-kopf-app .mud-icon-button .mud-icon-root {
    font-size: 1.55rem;
}

.sim-kopf-app .mud-avatar {
    width: 46px;
    height: 46px;
    font-size: 1.05rem;
}

/* ── Logo-Kasten ──────────────────────────────────────────────────────────────
   Schwebt über dem Menüband und ragt darunter hinaus. Die drei Maße hängen
   zusammen: Der Kasten ist so breit wie der Drawer, damit die Kanten fluchten,
   und um (Höhe − Bandhöhe) tiefer als das Band – genau dieser Überstand wird
   der Navigation unten als Abstand wieder zugeschlagen. */
:root {
    /* Bandhöhe wird in ThemeService.LayoutProperties.AppbarHeight gesetzt – hier hätte
       sie keine Wirkung, weil MudThemeProvider zur Laufzeit einen eigenen :root-Block
       nachschiebt.
       Der Zuschlag von 2px ist die Akzentkante unten (border-bottom der .sim-kopf-app).
       Gemessen, nicht geraten: bei 64px → 66px Band, bei 96px → 98px Band. MudBlazors
       interne 7/8-Rechnung gilt nur für die Toolbar, nicht für die Leiste insgesamt. */
    --sim-band-hoehe: calc(var(--mud-appbar-height) + 2px);

    /* Grenze: nicht über die Drawer-Kante hinaus – sonst ragt das überstehende Label
       in den Inhalt und verdeckt die Seitenüberschrift (gemessen: 36px Überlappung).
       Das Menü ist deshalb auf 280px verbreitert (ThemeService), damit das Logo mehr
       Platz bekommt: 60 (rechts vom Burger) + 220 = 280.
       Der Scrollbalken ist keine Grenze mehr – der Scrollbereich beginnt unterhalb
       des Überstands (padding-top am Drawer). */
    --sim-logo-breite: 220px;
    --sim-logo-abstand: 10px;   /* Luft zur Bandoberkante */
    /* Label ist bewusst HÖHER als das Band und ragt unten darüber hinaus.
       Der Überstand wird der Navigation unten als Abstand zugeschlagen –
       beide Werte hängen zusammen, deshalb hier zentral. */
    /* 104 statt 88: Mit dem geringeren Innenabstand (6/10) bleiben innen 160×92 –
       ein 16:9-Logo wird damit 160×90 statt vorher 119×67, also rund ein Drittel
       größer. Breiter geht nicht: Die rechte Kante muss bei 240 bleiben (Drawer),
       sonst ragt das überstehende Label in den Inhalt.
       Überstand und Inhaltsversatz rechnen sich aus diesem Wert automatisch. */
    --sim-logo-hoehe: 158px;   /* 220 x 158 = 1,39:1 – exakt das Seitenverhaeltnis des ImmerCity-Logos
                                  (gemessen 1072x773). Vorher 16:9, dadurch blieb Breite ungenutzt
                                  und die Grafik war 1,7x kleiner. Zurueck auf 124px = altes Aussehen;
                                  Menue-Abstand und Ueberschrift rechnen automatisch mit. */
    --sim-logo-ueberstand: calc(var(--sim-logo-abstand) + var(--sim-logo-hoehe) - var(--sim-band-hoehe));
    /* Startet RECHTS vom Burger-Knopf (der endet bei ~52px), damit der ganz außen steht. */
    --sim-logo-links: 60px;

    /* Die frueheren Variablen --sim-logolabel-hoehe/-ueberhang sind entfallen:
       Oeffentlich wird jetzt DASSELBE Schild verwendet wie intern, es gilt also
       --sim-logo-hoehe / --sim-logo-ueberstand fuer alle Bereiche. */
}

/* ── Logo-Label ───────────────────────────────────────────────────────────────
   Liegt wie ein aufgeklebtes Schild mittig auf dem Band, rechts neben dem Burger. */
.sim-logokasten {
    position: fixed;
    top: var(--sim-logo-abstand);
    left: var(--sim-logo-links);
    width: var(--sim-logo-breite);
    height: var(--sim-logo-hoehe);
    z-index: 1400;              /* über AppBar (1100) und Drawer (1300) */
    display: flex;
    align-items: center;
    justify-content: center;
    /* KEIN Innenabstand: Das Logo füllt die Fläche randlos aus. Wichtig gerade bei
       Logos MIT eigenem (deckendem) Hintergrund – mit Rand sähe man sonst zwei
       ineinander geschachtelte Rechtecke. Der Radius schneidet das Bild sauber ab
       (overflow:hidden weiter unten). Der Textfall bekommt seinen Abstand separat. */
    padding: 0;
    overflow: hidden;
    border-radius: var(--sim-radius);
    /* DECKEND, nicht durchscheinend: Bei 84% Deckkraft schimmerte durch die
       transparenten Stellen des Logos der Bandverlauf durch – das wirkte schmutzig.
       Ein Logo braucht einen ruhigen, eindeutigen Grund. */
    background: #15151c;
    border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

/* ── Eingeklapptes Menü ───────────────────────────────────────────────────────
   Ist der Drawer zu, rückt der Inhalt nach ganz links und läge damit unter dem
   überstehenden Label. Das Logo bleibt trotzdem groß – stattdessen rückt der
   INHALT so weit nach unten, dass er unter dem Label durchpasst.
   MudBlazor setzt dafür am Layout die Klasse mud-drawer-close-… (geprüft;
   im offenen Zustand mud-drawer-open-…). Der Selektor ist spezifischer als
   MudBlazors eigene .mud-main-content-Regel und gewinnt deshalb. */
.mud-layout[class*="mud-drawer-close"] .mud-main-content {
    padding-top: calc(var(--sim-logo-abstand) + var(--sim-logo-hoehe) + 10px);
    transition: padding-top var(--sim-uebergang);
}

/* ── Sticky Footer ────────────────────────────────────────────────────────────
   Auf Seiten mit wenig Inhalt saß die Fußzeile (Copyright/Impressum) direkt unter
   dem Inhalt statt unten am Fensterrand. Der Hauptinhaltsbereich wird zur Flex-
   Spalte in voller Fensterhöhe; der Inhaltscontainer wächst und schiebt die
   Fußzeile ans untere Ende. Bei viel Inhalt scrollt die Seite wie gehabt.
   Gilt für die MudMainContent-Layouts (interner Bereich + eingeloggter Shop);
   die öffentlichen Layouts bringen den Sticky-Footer bereits selbst mit.
   box-sizing ist border-box (MudBlazor-Reset), daher enthält die 100vh bereits
   das obere Padding für die App-Leiste – kein zusätzliches Scrollen. */
.mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.mud-main-content > .mud-container {
    flex: 1 0 auto;
}

/* Der fruehere .sim-logolabel-Block ist ERSATZLOS ENTFALLEN.
   Er war das zweite, abweichende Logo-Schild fuer die oeffentlichen Seiten und
   mit min-height:150px der Hauptgrund, warum das Band dort mehr als doppelt so
   hoch war wie im Kundenbereich. Oeffentlich wird jetzt DASSELBE Schild
   verwendet wie intern (.sim-logokasten) mit dem Modifier --fluss.
   Mit ihm entfiel auch die Regel ".sim-kopf { margin-bottom: ... }" - der
   Ausgleich fuer den Ueberstand steht nun an header.sim-kopf-frei. */

/* Nur der Textfall (kein Logo hinterlegt) braucht Innenabstand - das Bild
   fuellt das Schild randlos aus. */
.sim-logokasten:not(:has(img)) {
    padding: 0.5rem 1rem;
}

/* ── Logo je nach Modus ───────────────────────────────────────────────────────
   Beide Fassungen werden gerendert, CSS blendet die passende ein. Bewusst so und
   nicht über C#-Zustand: Es gibt drei Stellen (MainLayout, PublicNav, ShopLayout),
   und beim Umschalten von hell/dunkel greift es sofort, ohne Neu-Rendern. */
html[data-sim-theme="dark"] .sim-logo-hell { display: none !important; }
html[data-sim-theme="light"] .sim-logo-dunkel { display: none !important; }


/* Heller Modus: weißes Label mit feinem Rand, sonst verschwände es auf hellem Band */
html[data-sim-theme="light"] .sim-logokasten {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    box-shadow: var(--sim-shadow-2);
}

.sim-logokasten-inhalt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
}

/* Bild darf den Kasten voll ausnutzen, ohne sich zu verzerren */
/* Bild füllt die Fläche randlos. object-fit:contain statt cover, damit bei einem
   abweichenden Seitenverhältnis nichts abgeschnitten wird – die Fläche ist auf 16:9
   ausgelegt, ein 16:9-Logo passt damit exakt. */
.sim-logokasten-inhalt img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Nur der Textfall (Flagge + Name) braucht Innenabstand – das Bild nicht. */
.sim-logokasten-inhalt:not(:has(img)) {
    padding: 0.5rem 0.8rem;
    gap: 0.5rem;
}

.sim-logokasten-flagge {
    font-size: 2rem;
    line-height: 1;
}

/* Schriftfarbe folgt dem Label-Grund, NICHT dem Theme-Text: dunkler Modus =
   dunkle Fläche = helle Schrift; heller Modus = weiße Fläche = dunkle Schrift. */
.sim-logokasten-name {
    font-family: var(--sim-font-display);
    font-weight: 900;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.15;
    color: #f2f5f7;
}

html[data-sim-theme="light"] .sim-logokasten-name {
    color: #10131a;
}

/* Der Burger-Knopf steht ganz links; das Label beginnt rechts davon
   (--sim-logo-links). Deshalb hier KEIN Einzug mehr – der frühere
   padding-left hat den Burger nach rechts geschoben. */
.sim-kopf-app .mud-toolbar {
    padding-left: 0.5rem !important;
}

/* Den Überstand gleicht jetzt der Drawer selbst aus (padding-top, siehe oben) –
   hier nur noch etwas Luft.
   WICHTIG "> .mud-navmenu": Eine MudNavGroup rendert INNEN ein weiteres .mud-navmenu.
   Ohne den direkten Kindselektor bekäme jedes aufgeklappte Untermenü denselben
   Abstand oben – genau das war als Lücke sichtbar (6 Menüs statt 1 getroffen). */
.sim-drawer .mud-drawer-content > .mud-navmenu {
    padding-top: 0.5rem;
}

.sim-drawer .mud-nav-group .mud-navmenu {
    padding-top: 0;
}

/* Gegenstück zu .sim-band-kompakt: Menü-Einträge (Benachrichtigungen, Design, Warenkorb),
   die NUR erscheinen sollen, wenn die zugehörigen Symbole oben aus Platzgründen (≤600px)
   ausgeblendet sind. Auf breiten Schirmen also verstecken – die Symbole stehen dann oben. */
.sim-nur-kompakt { display: none !important; }

/* Kassen-Mengen-Buttons (+/-): große Touch-Ziele fürs Smartphone mit deutlich sichtbarem
   Symbol. Die Kachel-Größe kommt aus dem Inline-Style (width/height); hier nur Symbol groß
   und Innenabstand klein, damit das Symbol die Fläche füllt. */
.sim-pos-step.mud-icon-button { padding: 3px !important; }
.sim-pos-step .mud-icon-root { font-size: 1.9rem !important; width: 1.9rem !important; height: 1.9rem !important; }

/* Schmale Bildschirme: Label kleiner, damit vom Menüband noch etwas übrig bleibt */
@media (max-width: 600px) {
    /* Menü-Fallback jetzt zeigen (die Symbole oben sind hier ausgeblendet). */
    .sim-nur-kompakt { display: flex !important; }

    :root {
        /* Bandhoehe mobil: siehe ThemeService (LayoutProperties) */
        --sim-logo-breite: 132px;
        --sim-logo-abstand: 10px;
        --sim-logo-links: 56px;
        --sim-logo-hoehe: 95px;   /* 132 x 95 = 1,39:1 wie am Schreibtisch */
    }

    .sim-logokasten-name { font-size: 0.58rem; letter-spacing: 0.06em; }
    .sim-logokasten-flagge { font-size: 1.25rem; }

    /* Der fixe Logo-Kasten (x=56..188, z-index 1400) verdeckte auf schmalen Screens den
       linksstehenden QR-Scan-Knopf der rechten Gruppe. Im INTERNEN Band (MudAppBar OHNE
       .sim-kopf-frei) die selteneren Knöpfe (Design, Warenkorb) ausblenden – sie sind ins
       Konto-Menü gewandert. Öffentlich/Shop (.sim-kopf-frei) bleibt unberührt: dort läuft das
       Logo im Fluss und es gibt keine Überlappung. */
    .sim-kopf-app:not(.sim-kopf-frei) .sim-band-kompakt { display: none !important; }
}

/* Navigation: aktive Seite deutlicher.
   ACHTUNG: Hier stand "margin-right: 0.5rem" – bei 240px Drawer-Breite ergaben die
   Links damit 248px und der Drawer bekam einen waagrechten Scrollbalken. Der
   Abstand gehört an die BREITE, nicht als zusätzlicher Außenabstand. */
.mud-drawer .mud-nav-link {
    border-radius: 0 999px 999px 0;
    max-width: calc(100% - 0.5rem);
    transition: background var(--sim-uebergang), color var(--sim-uebergang);
}

.mud-drawer .mud-nav-link.active {
    font-weight: 600;
}

/* ── Scrollbereich des Menüs ──────────────────────────────────────────────────
   Der Drawer selbst war bisher der Scroll-Container – sein Balken lief deshalb
   über die volle Höhe und begann UNTER dem überstehenden Logo-Label.
   Jetzt scrollt der innere Inhalt, und der Drawer trägt oben den Überstand als
   Abstand. Dadurch beginnt der Scrollbalken erst unterhalb des Labels, und das
   Label darf wieder beliebig breit werden. */
.sim-drawer {
    overflow: hidden !important;
    padding-top: calc(var(--sim-logo-abstand) + var(--sim-logo-hoehe) - var(--mud-appbar-height));
}

.sim-drawer .mud-drawer-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;   /* verschachtelte Gruppen (bis 3 Ebenen) nie waagrecht scrollen */
}

/* Ist das Menü eingeklappt, gibt es keinen Überstand auszugleichen */
.mud-layout[class*="mud-drawer-close"] .sim-drawer {
    padding-top: 0;
}

/* Seitenüberschrift im internen Bereich – dieselbe Stufe wie außen, aber kompakter
   (hier zählt Dichte; die Seiten sind Werkzeuge, keine Schaufenster). */
.sim-app .sim-seitentitel {
    font-family: var(--sim-font-display);
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    color: var(--mud-palette-text-primary);
}

/* ══ Bestand (unverändert übernommen) ═════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,0.35);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.55); }

.mud-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) !important;
    color: var(--mud-palette-primary) !important;
}

.sim-laptime {
    font-family: var(--sim-font-display);
    color: var(--mud-palette-primary);
}

.track-map-img {
    max-height: 120px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ── Streckenkarten im Dunkelmodus umkehren ──────────────────────────────────
   Die Karten sind schwarze Linien auf durchsichtigem Grund (Wikimedia-Standard).
   Auf dunklem Untergrund ist davon nichts zu sehen. „invert" macht daraus weiße
   Linien; hue-rotate stellt farbige Streckenabschnitte wieder auf ihren Ton
   zurück, damit z. B. rote Kurvenmarkierungen nicht türkis werden.
   Gilt für JEDE Streckenkarte – deshalb die eigene Klasse an allen Bildern. */
html[data-sim-theme="dark"] .sim-streckenbild {
    filter: invert(1) hue-rotate(180deg);
}

/* Streckenbilder sind per Klick vergrößerbar (Lightbox, siehe index.html) → Zoom-Cursor. */
.sim-streckenbild {
    cursor: zoom-in;
}

/* Kasse: auf schmalen Geräten die Produktauswahl ÜBER die Bestellliste ziehen. So bleibt beim
   Wechsel zwischen Kategorien und Getränken (unterschiedliche Höhe) und beim Wachsen der Bestellung
   die Kachel-Position stabil – die Seite springt nicht mehr hoch/runter. Ab Tablet (md) normal. */
@media (max-width: 959.98px) {
    .pos-produkte { order: -1; }
}

/* Haftungs-/Datenschutztext im Zustimmungs-Dialog: langer Text scrollt in einer eigenen Box. */
.waiver-text {
    max-height: 32vh;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent);
    font-size: 0.86rem;
    line-height: 1.45;
}

.sim-glow-border {
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent) !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

code {
    background: var(--mud-palette-background);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: monospace;
}

/* Vorschau-Kacheln im Logo-Bereinigungs-Dialog (AdminSettings).
   Feste Höhe, damit die drei Kacheln beim Nachjustieren nicht springen. */
.sim-logopruef {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sim-radius-sm);
    overflow: hidden;
}

.sim-logopruef img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Logo auf der Anmeldeseite. Begrenzt auf die Kartenbreite (max. 420px minus
   Innenabstand) und in der Höhe, damit ein sehr breites oder sehr hohes Logo die
   Karte nicht auseinanderzieht. object-fit bewahrt das Seitenverhältnis. */
.sim-login-logo {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ── Mitarbeiter-Schnellzugriff (Dashboard-Cockpit) ──────────────────────────────
   Responsives Kachel-Raster: 2 Spalten auf dem Telefon, bis 6 auf großen Schirmen.
   Ganze Kachel ist ein großes Touch-/Klick-Ziel (deutlich über den 46px der Kasse). */
.sim-sz-raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
@media (min-width: 600px)  { .sim-sz-raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .sim-sz-raster { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .sim-sz-raster { grid-template-columns: repeat(6, 1fr); } }

.sim-sz-kachel {
    min-height: 100px;
    padding: 0.7rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    border-radius: var(--sim-radius) !important;
}
/* Tastatur-Fokus sichtbar (Büro-Desktop) – die Kachel ist role="button" tabindex="0". */
.sim-sz-kachel:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* Label zweizeilig umbruchsicher (lange Namen wie „Server-Steuerung"). */
.sim-sz-label {
    font-family: var(--sim-font-display);
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Lange Einwort-Labels (z. B. „Tagesabschluss") sollen umbrechen statt hart
       abgeschnitten zu werden – sonst greift das Zeilen-Clamping nie. */
    overflow-wrap: anywhere;
}

/* Auswertungen (/admin/revenue): Die Reiterleiste (Finanzen/Artikel/…) ist das „Menü".
   Ohne Trennung floss sie farblich in die KPI-Kacheln darunter über (sie teilen dieselbe
   dunkle Fläche). Reiterleiste als eigenständige, umrandete Leiste mit klarem Abstand nach
   unten absetzen – zusammen mit den umrandeten KPI-Kacheln stehen beide sauber getrennt. */
.sim-report-tabs .mud-tabs-tabbar {
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 0.9rem;
}

/* ── Cookie-Einwilligungs-Banner (App.razor/CookieConsent) ──────────────────────
   Fest am unteren Rand, über allem. Bewusst mit Paletten-Variablen statt MudBlazor,
   damit er auch außerhalb der Layout-Themes (anonyme Seiten) korrekt aussieht. */
.sim-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    padding: 0.9rem clamp(0.75rem, 4vw, 2rem);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
}
.sim-cookie-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}
.sim-cookie-text {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}
.sim-cookie-text strong {
    display: block;
    font-family: var(--sim-font-display);
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}
.sim-cookie-text a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    margin-left: 0.35rem;
}
.sim-cookie-buttons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
/* Beide Knöpfe gleich prominent (rechtlich: Ablehnen so einfach wie Zustimmen). */
.sim-cookie-btn {
    font-family: var(--sim-font-display);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}
.sim-cookie-decline {
    background: transparent;
    color: var(--mud-palette-text-primary);
}
.sim-cookie-decline:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}
.sim-cookie-accept {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}
.sim-cookie-accept:hover {
    filter: brightness(1.08);
}
@media (max-width: 560px) {
    .sim-cookie-buttons { width: 100%; }
    .sim-cookie-btn { flex: 1 1 auto; text-align: center; }
}

/* ══ Anzeige am Simulator (/rig/{token}) ══════════════════════════════════════
   Wird auf einem Fernseher aus zwei bis vier Metern Entfernung gelesen. Alle
   Groessen haengen deshalb an vw/vh und nicht an rem: Der Bildschirm ist mal ein
   24-Zoll-Monitor und mal ein 55-Zoll-Fernseher, und die Anzeige muss auf beiden
   ohne Zutun passen. */
.sim-rig {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, #16161f 0%, #05050a 65%);
}

/* Leise bewegter Farbverlauf – nur sichtbar, solange KEIN Hintergrundvideo läuft.
   Ohne ihn steht der Bildschirm den ganzen Tag schwarz im Raum.

   ⚠️ Bewusst sparsam gebaut: Dieser Rechner soll nebenbei RaceRoom stemmen. Animiert wird
   ausschließlich `transform` einer einzigen Ebene – das erledigt die Grafikkarte, ohne dass
   der Browser in jedem Einzelbild neu zeichnen muss. Ein animierter background-position oder
   wechselnde Farbstopps würden dagegen dauerhaft Rechenzeit kosten.
   Sehr langsam (90 s) und schwach deckend: Auf einem Bildschirm, an dem Leute vorbeigehen,
   soll sich etwas regen, aber nichts zappeln. */
.sim-rig-verlauf {
    position: absolute;
    /* Größer als der Bildschirm, damit beim Verschieben nie ein Rand ins Bild läuft. */
    inset: -35%;
    background:
        radial-gradient(38% 46% at 28% 32%, rgba(90, 169, 255, 0.30) 0%, rgba(90, 169, 255, 0) 70%),
        radial-gradient(42% 40% at 74% 62%, rgba(190, 60, 120, 0.26) 0%, rgba(190, 60, 120, 0) 72%),
        radial-gradient(36% 44% at 55% 88%, rgba(70, 209, 122, 0.18) 0%, rgba(70, 209, 122, 0) 70%);
    filter: blur(2vh);
    will-change: transform;
    animation: simRigVerlauf 90s ease-in-out infinite;
}

@keyframes simRigVerlauf {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg); }
    33%  { transform: translate3d(5%, 4%, 0) scale(1.12) rotate(4deg); }
    66%  { transform: translate3d(3%, -5%, 0) scale(1.08) rotate(-3deg); }
    100% { transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg); }
}

/* Wer Bewegung abgeschaltet hat, bekommt den Verlauf still – er bleibt trotzdem farbig. */
@media (prefers-reduced-motion: reduce) {
    .sim-rig-verlauf { animation: none; }
}

.sim-rig-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Schleier ueber dem Video: Ohne ihn verschwindet weisse Schrift in hellen Bildstellen. */
.sim-rig-schleier {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.72) 100%);
}

.sim-rig-inhalt {
    position: relative;
    height: 100%;
    /* ⚠️ box-sizing ist hier Pflicht, nicht Geschmack: Ohne es addiert sich das Innenabstands-
       Polster auf die 100 % Höhe, und der Inhalt rutscht unten aus dem Bild. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2vh;
    text-align: center;
    /* ⚠️ Oben Platz für den Kopf FREIHALTEN. Der Kopf (.sim-rig-kopf) liegt absolut positioniert
       über diesem Kasten, steht also nicht im Fluss – der mittig zentrierte Inhalt wüchse sonst
       einfach darunter hindurch. Genau das passierte, als Strecke und Fahrzeug dazukamen:
       „GLEICH VORBEI" schob sich über den Simulatornamen. */
    padding: 16vh 4vw 4vh;
}

.sim-rig-kopf {
    position: absolute;
    top: 4vh;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6vh;
}
.sim-rig-name {
    font-family: var(--sim-font-display);
    font-size: 5vh;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sim-rig-kategorie {
    font-size: 2.4vh;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}

.sim-rig-zustand {
    font-family: var(--sim-font-display);
    font-size: 13vh;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
}
.sim-rig-frei { color: #46d17a; }
.sim-rig-reserviert { color: #f4a261; }
.sim-rig-laeuft { color: #5aa9ff; }
.sim-rig-knapp { color: #ff5a5a; animation: simRigPuls 1.6s ease-in-out infinite; }
.sim-rig-aus { color: #8892a4; }

.sim-rig-gast {
    font-family: var(--sim-font-display);
    font-size: 8vh;
    font-weight: 700;
    line-height: 1.05;
    max-width: 90vw;
    overflow-wrap: anywhere;
}

/* Strecke und Fahrzeug – deutlich kleiner als Zustand und Countdown. Sie sind Zusatzinfo:
   Wer vorbeigeht, soll weiterhin auf einen Blick sehen, ob der Platz frei ist. */
.sim-rig-vorhaben {
    margin-top: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6vh;
    max-width: 90vw;
    /* Zusatzinfo darf die Anzeige nie sprengen: Zustand und Countdown haben Vorrang.
       Passt der Block nicht mehr, wird er beschnitten statt alles zu verschieben. */
    min-height: 0;
    overflow: hidden;
}

/* Zugangsdaten zum Renn-Server. Muss aus zwei Metern abtippbar sein – deshalb
   Festbreitenschrift und deutlich größer als der Rest der Zusatzinfo. */
.sim-rig-zugang {
    border: 0.25vh solid rgba(255, 255, 255, 0.35);
    border-radius: 1.2vh;
    padding: 1.2vh 2.4vw;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.4vh;
}

.sim-rig-zugang-titel {
    font-size: 2vh;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;
}

.sim-rig-zugang-zeile {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.2vw;
}

.sim-rig-zugang-label {
    font-size: 2.2vh;
    opacity: 0.7;
    min-width: 9vw;
    text-align: right;
}

.sim-rig-zugang-wert {
    /* Festbreite: „Kurve47" darf nicht mit „KurveA7" verwechselbar sein. */
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 4.2vh;
    font-weight: 700;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.sim-rig-strecke-bild {
    max-height: 12vh;
    max-width: 50vw;
    object-fit: contain;
    /* Streckenskizzen sind meist dunkle Linien auf hellem Grund – auf dem dunklen
       Kiosk-Hintergrund wären sie sonst kaum zu erkennen. */
    filter: invert(1) brightness(1.6);
    opacity: 0.85;
}

.sim-rig-strecke {
    font-family: var(--sim-font-display);
    font-size: 3.4vh;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sim-rig-fahrzeug {
    font-size: 2.6vh;
    opacity: 0.75;
    overflow-wrap: anywhere;
}

.sim-rig-countdown {
    font-family: var(--sim-font-display);
    font-size: 16vh;
    font-weight: 800;
    line-height: 1;
    /* Ziffern gleich breit, sonst zappelt der Countdown im Sekundentakt hin und her. */
    font-variant-numeric: tabular-nums;
}

.sim-rig-zeile {
    font-size: 3vh;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

@keyframes simRigPuls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Auf einem hochkant haengenden Bildschirm bleibt sonst nur Luft. */
@media (orientation: portrait) {
    .sim-rig-zustand { font-size: 9vh; }
    .sim-rig-countdown { font-size: 12vh; }
    .sim-rig-gast { font-size: 6vh; }
    .sim-rig-strecke-bild { max-height: 9vh; }
    .sim-rig-zugang-wert { font-size: 3.4vh; }
    .sim-rig-zugang-label { min-width: 16vw; }
    .sim-rig-strecke { font-size: 2.8vh; }
    .sim-rig-fahrzeug { font-size: 2.2vh; }
}