/* 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;
}

/* ══ 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);
}

/* 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;
}

/* Schmale Bildschirme: Label kleiner, damit vom Menüband noch etwas übrig bleibt */
@media (max-width: 600px) {
    :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; }
}

/* 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;
}

.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;
}