/* Globale Akzentfarbe für native Form-Controls (Checkbox, Radio, Range, Progress)
   — Theme-Primary-Grün (#2D8B57) statt des blauen Browser-Defaults. */
:root {
    accent-color: #2D8B57;
}

/* Kein Fokus-Outline am h1 – wird durch FocusOnNavigate programmatisch fokussiert,
   ist aber nicht via Tab erreichbar; der Browser-Default-Outline ist daher unerwünscht. */
h1:focus,
h1:focus-visible {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== App Footer ===== */
.homepage-footer {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1A5C38 0%, #2D8B57 100%);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-copyright {
    color: rgba(255,255,255,0.7);
}

.footer-counter {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    text-align: center;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #FFFFFF;
}

.footer-links a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== Listen in MudBlazor-Komponenten (Dialoge, Cards, Paper etc.) ===== */
.mud-message-box ul,
.mud-message-box ol,
.mud-dialog-content ul,
.mud-dialog-content ol,
.mud-card-content ul,
.mud-card-content ol,
.mud-paper ul,
.mud-paper ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.mud-message-box ul,
.mud-dialog-content ul,
.mud-card-content ul {
    list-style-type: disc;
}

.mud-message-box ol,
.mud-dialog-content ol,
.mud-card-content ol {
    list-style-type: decimal;
}

/* ===== Listen im Blog-Beitragstext (aus Markdown gerendert) =====
   Der Universal-Reset von MudBlazor (*{margin:0;padding:0}) nimmt ul/ol das voreingestellte
   padding-inline-start. Ohne Ausgleich fluchtet der Listeninhalt mit dem Fließtext und die
   Listenzeichen hängen links aus der Textspalte heraus (Fehler #969). Der Nachfahren-Selektor
   erfasst auch verschachtelte Ebenen. */
.blog-post-content ul,
.blog-post-content ol {
    padding-left: 1.5rem;
}

/* ===== Tabellen im Blog-Beitragstext (aus Markdown gerendert) =====
   Markdig gibt Pipe-Tabellen als nacktes <table> ohne Klassen aus. Ohne eigene Regeln greift die
   Browser-Voreinstellung th{text-align:center}: die Spaltenüberschriften standen zentriert über den
   linksbündigen Datenzellen (Fehler #970). Zusammen mit dem Universal-Reset von MudBlazor
   (*{margin:0;padding:0}) fehlte den Zellen zudem jeder Innenabstand, sodass der Text benachbarter
   Spalten aneinanderstieß.
   Bewusst ohne !important: eine im Markdown ausdrücklich gesetzte Spaltenausrichtung (|:---:|)
   schreibt Markdig als Inline-Style und behält damit Vorrang vor der linksbündigen Grundregel. */
.blog-post-content table {
    border-collapse: collapse;
    margin: 1rem 0;
}

/* Kein linker Innenabstand: so fluchtet die erste Spalte mit dem Fließtext des Beitrags. Der
   Abstand nach rechts trennt die Spalten voneinander. */
.blog-post-content th,
.blog-post-content td {
    text-align: left;
    padding: 0.5rem 1.5rem 0.5rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.blog-post-content thead th {
    border-bottom-width: 2px;
}

/* ===== Legal-Content (Datenschutz) — Typografie; Breite/Zentrierung kommen vom umschließenden MudContainer ===== */
.legal-content h2 {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 25px;
    color: #333333;
}

.legal-content h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #333333;
}

.legal-section {
    margin-bottom: 25px;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-content p {
    color: #555555;
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-content ul {
    color: #555555;
    line-height: 1.7;
    margin: 12px 0;
    padding-left: 25px;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content strong {
    color: #333333;
}

/* Inline-Code-Elemente in den Rechtstexten (z.B. Cookie-Namen) im gleichen Font wie der Fließtext darstellen — kein Monospace */
.legal-content code {
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    padding: 0;
    border: 0;
}

/* ===== Page Hero (gemeinsamer Seiten-Kopf) ===== */
.page-hero {
    background: linear-gradient(135deg, #1A5C38 0%, #2D8B57 100%);
    color: #FFFFFF;
    /* Horizontaler Innenabstand hier statt über das (entfallene) MudContainer-Gutter
       (#526 Reopen 3) — sonst klebte der Hero-Text an der Band-Kante. */
    padding: 48px 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-bottom: 4px solid rgba(255, 255, 255, 0.15);
}

.page-hero .page-hero-inner {
    min-height: 80px;
    min-width: 0;
}

/* Text-Spalte (flex-grow) muss schrumpfen dürfen, sonst sprengt ein langer Titel
   (z.B. „Terminfindung") die Breite und der ganze Hero läuft über den Rand. */
.page-hero .page-hero-inner > .flex-grow-1 {
    min-width: 0;
}

.page-hero .page-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.page-hero .page-hero-icon .mud-icon-root {
    color: #FFFFFF;
    font-size: 40px;
}

.page-hero .page-hero-title {
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    overflow-wrap: break-word;
}

.page-hero .page-hero-subtitle {
    color: #FFFFFF;
    margin: 0;
    line-height: 1.55;
}

.page-hero .page-hero-eyebrow {
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.12em;
    font-weight: 500;
}

/* Chips im Hero: weiße Schrift auf halbtransparentem Hintergrund — gilt für alle Seiten */
.page-hero .mud-chip {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.page-hero .mud-chip .mud-chip-icon,
.page-hero .mud-chip .mud-icon-root {
    color: #FFFFFF !important;
}

@media (max-width: 600px) {
    .page-hero {
        padding: 32px 0;
        margin-bottom: 24px;
    }
    .page-hero .page-hero-icon {
        width: 56px;
        height: 56px;
    }
    .page-hero .page-hero-icon .mud-icon-root {
        font-size: 32px;
    }
    /* Große Seitentitel (Typo.h3 = Haupt-H1 auf Home & im PageHero) auf Smartphone-Breite
       verkleinern, damit lange Wörter nicht überlaufen und der Titel nicht den halben
       Bildschirm einnimmt. */
    .mud-typography-h3 {
        font-size: 1.75rem;
    }
}

/* ===== Content Section (gemeinsame Inhaltskarte) ===== */
.content-section {
    margin-bottom: 24px;
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section-paper {
    border-radius: 12px;
}

.content-section-title {
    font-weight: 600;
}

/* ===== Consulting-Seite – Dokument-Karten ===== */
.consulting-doc-card {
    height: 100%;
    border-radius: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.consulting-doc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45, 139, 87, 0.18);
    border-color: rgba(45, 139, 87, 0.3);
}

/* MudCardContent innerhalb einer Dokument-Karte füllt die ganze Kartenhöhe
   und wird selbst zu flex-column, damit der Button unten bündig sitzt. */
.consulting-doc-card .mud-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Beschreibungs-Text streckt sich auf den verfügbaren Platz,
   sodass der darunter folgende Button bei allen Karten auf gleicher Höhe liegt. */
.consulting-doc-description {
    flex-grow: 1;
}

.consulting-doc-icon {
    font-size: 48px !important;
    color: #2D8B57;
}

/* ===== Consulting-Seite – Profil-Buttons ===== */
.consulting-profile-button {
    min-width: 200px;
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.consulting-profile-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45, 139, 87, 0.18);
    border-color: rgba(45, 139, 87, 0.3);
}

/* ===== Aktuelle Projekte – Karten ===== */
    .current-project-card {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        border: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
    }

        .current-project-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(45, 139, 87, 0.18);
            border-color: rgba(45, 139, 87, 0.3);
        }

        .current-project-card .mud-card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

    .current-project-description {
        flex-grow: 1;
    }

    .current-project-icon {
        font-size: 32px !important;
        color: #2D8B57;
        flex-shrink: 0;
    }
    /* ===== Reduced Motion – respektiert Nutzer-Einstellung ===== */
    @media (prefers-reduced-motion: reduce) {
        .consulting-doc-card,
        .consulting-doc-card:hover,
        .consulting-profile-button,
        .consulting-profile-button:hover,
        .current-project-card,
        .current-project-card:hover {
            transition: none !important;
            transform: none !important;
        }
    }
    /* ===== Wetter "Aktueller Wert" — Beschreibungs-Zeile auf schmalen Bildschirmen (iPhone) ausblenden ===== */
    @media (max-width: 600px) {
        .weather-current-section .content-section-paper > .mud-typography-body2.mud-text-secondary {
            display: none;
        }
    }
    /* ===== Wetter Page-Hero — Eyebrow "HP1001 • Live-Werte" nur im iPhone-Portrait-Modus ausblenden ===== */
    @media (max-width: 600px) and (orientation: portrait) {
        .weather-page-hero .page-hero-eyebrow {
            display: none;
        }
    }
    /* ===== MudDatePicker: Wochennummern kleiner und blasser, damit sie sich klar
        von den Kalendertagen unterscheiden ===== */
    .mud-picker-calendar-week .mud-picker-calendar-week-text {
        font-size: 0.6rem;
        opacity: 0.65;
    }
    /* ===== Wetter-Temperatur-Chart: gestrichelte Linien für die "Ø langjährig"-Serien ===== */
    /* MudChart 9.4 hat keinen nativen Dashed-Modus — daher CSS-Hack über :nth-of-type
   auf die SVG-paths in der Reihenfolge der ChartSeries-Liste.
   Temperatur: 4 Series (Außen, Innen, Ø Außen, Ø Innen) — Pfade 3 und 4 stricheln. */
    .weather-chart-temperature svg path:nth-of-type(3),
    .weather-chart-temperature svg path:nth-of-type(4) {
        stroke-dasharray: 6 4;
    }
    /* ===== Pflichtfeld-Validierung (roter Rand, kein Text) ===== */
    .mud-input-error .mud-input-slot,
    .mud-input-error .mud-input-outlined-border,
    .mud-input-error input,
    .mud-input-error textarea {
        background-color: rgba(244, 67, 54, 0.1) !important;
    }

    .mud-input-error .mud-input-helper-text {
        display: none;
    }
    /* ===== Read-Only Eingabefelder: Text in grau, wie bei deaktivierten Feldern üblich ===== */
    .mud-input input[readonly],
    .mud-input textarea[readonly] {
        color: rgba(0, 0, 0, 0.6);
    }
    /* ===== ExtendedReadOnlyTextField: grauer Rahmen macht den Nur-Lese-Charakter sofort sichtbar ===== */
    .extended-readonly-field .mud-input-outlined-border {
        border-color: rgba(0, 0, 0, 0.26) !important;
    }
    /* Auch beim Fokussieren (Tab-Navigation) grau bleiben statt Primary-Rand */
    .extended-readonly-field:focus-within .mud-input-outlined-border {
        border-color: rgba(0, 0, 0, 0.42) !important;
    }

/* ===== Honeypot-Feld (Bot-Falle Terminfindung): vollständig unsichtbar, aber im DOM/Formular.
   Nicht display:none (manche Bots ignorieren das) — stattdessen aus dem Layout/Sichtfeld nehmen. ===== */
.tf-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Responsive Eingabe-Reihe =====
   Nebeneinander stehende Eingabe-Controls (MudStack Row) brechen auf schmalen Viewports
   zu einer Spalte um, damit Felder und Labels nicht gequetscht/abgeschnitten werden.
   Kompakte Aktions-Buttons (Icon-Buttons) bleiben über .tf-row-action klein und rechtsbündig. */
@media (max-width: 600px) {
    .tf-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .tf-row > *:not(.tf-row-action) {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .tf-row > .tf-row-action {
        align-self: flex-end;
    }
}

/* ===== Slider-Zeile (Label | Slider | Wert) =====
   Desktop: drei Spalten, Slider exakt gleich lang über alle Zeilen.
   Auf Smartphone-Breite (≤600px) würde die mittlere Spalte den Slider auf ~0 quetschen
   (nur der Thumb bleibt sichtbar) → Label + Wert in Zeile 1, Slider volle Breite in Zeile 2. */
.tf-slider-grid {
    display: grid;
    grid-template-columns: 130px 1fr 120px;
    gap: 16px;
    align-items: center;
}

@media (max-width: 600px) {
    .tf-slider-grid {
        grid-template-columns: 1fr auto;
    }
    .tf-slider-grid > *:nth-child(1) { order: 0; }            /* Label links */
    .tf-slider-grid > *:nth-child(3) { order: 1; }            /* Wert rechts */
    .tf-slider-grid > *:nth-child(2) {                        /* Slider: volle Breite, eigene Zeile */
        order: 2;
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ===== PasswordPush – Slider-Zeilen (ohne Label-Spalte) =====
   Gemeinsames 2-Spalten-Grid über beide Zeilen: die auto-Spalte richtet sich nach dem
   breitesten Wert-Text („XX Aufrufe"), dadurch sind beide Slider exakt gleich lang und die
   Texte stehen bündig untereinander — robust auch bei großen System-Schriftgraden (iOS). */
.pwpush-slider-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: center;
}

/* ===== Geschützte Dokumente – Leser-Viewer =====
   Werkzeugleiste oben (zurück, Zoom, Seitensprung) und gestapelte Seitenbilder. Der Zoom
   steuert die Bildbreite in Prozent der Container-Breite; die Seiten werden mittig gestapelt. */
.protected-reader-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--mud-palette-surface, #fff);
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.protected-reader-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
}

.protected-reader-zoom {
    min-width: 56px;
    text-align: center;
    white-space: nowrap;
}

.protected-reader-jump {
    width: 90px;
}

.protected-reader-pages {
    /* Bewusst KEIN Flexbox für die horizontale Achse: Bei Zoom > 100% läuft die überbreite Seite per
       margin:0 auto in ALLEN Browsern zuverlässig links bündig über (kein Links-Clip wie bei
       align-items:center). Bewusst KEIN eigenes overflow-x hier: Dieser Container stapelt alle Seiten
       und wird sehr hoch — sein horizontaler Scrollbalken läge ganz unten, weit außerhalb des
       sichtbaren Bereichs (Bug #163). Der Überhang läuft stattdessen bis zum viewport-gebundenen
       .page-content durch, dessen Scrollbalken am unteren Viewport-Rand erreichbar ist (Regel unten). */
    padding: 16px;
    /* Nutzer-Auswahl unterbinden — erschwert Copy/Drag, kein echter Schutz. */
    user-select: none;
}

/* Nur auf der Leser-Seite (per :has erkannt am Seiten-Container): Der viewport-gebundene
   Inhaltsbereich darf bei Zoom > 100% zusätzlich horizontal scrollen. So sitzt der horizontale
   Scrollbalken am unteren Rand des sichtbaren Bereichs und der überbreite Inhalt ist erreichbar,
   ohne dass andere Seiten (die nicht horizontal überlaufen) einen Scrollbalken bekommen (Bug #163). */
.page-content:has(.protected-reader-pages) {
    overflow-x: auto;
}

.protected-reader-page {
    /* Breite kommt als Inline-Style (Zoom in Prozent), ohne max-width-Cap (sonst bliebe Zoom > 100%
       wirkungslos). margin:0 auto zentriert die Seite, solange sie in den Container passt, und legt sie
       bei Überbreite links bündig an (Überlauf nach rechts → horizontal scrollbar). Das margin-bottom
       ersetzt den früheren flex-gap zwischen den Seiten. */
    margin: 0 auto 16px;
}

.protected-reader-page:last-child {
    margin-bottom: 0;
}

.protected-reader-image {
    display: block;
    width: 100%;
    height: auto;
    /* Fallback-Seitenverhältnis (A4) reserviert die Höhe schon vor dem Lazy-Load, falls keine
       gerenderte Dimension bekannt ist; bekannte Maße überschreiben dies inline (Bug #158). */
    aspect-ratio: 1 / 1.414;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.protected-reader-pagelabel {
    margin-top: 4px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #757575);
}

/* Fehler #204: Flagge + Ländername im Auswahlfeld „Wer kommt weiter?" als Flex-Zeile mit zentrierter
   vertikaler Ausrichtung und festem Abstand — exakt wie die Spielansetzung (Tippen.razor.css
   ".ts-team-main"). Ohne dies stehen Flagge (1,4rem) und Name (0,875rem) auf der Text-Baseline und ihre
   Mittelpunkte verrutschen → der Name wirkt „nicht symmetrisch hinter der Flagge". Global, da die
   MudSelect-Optionen im Popover außerhalb der CSS-Isolation rendern. */
.ts-advancing-team {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Fehler #201: Flagge im Tippspiel-Auswahlfeld „Wer kommt weiter?" auf dieselbe Größe wie in der
   Spielansetzung bringen (vgl. Tippen.razor.css ".ts-team .fi"). Die MudSelect-Optionen rendern in
   einem Popover außerhalb der CSS-Isolation, daher global statt scoped — so greift die Regel sowohl
   in der aufgeklappten Liste als auch beim ausgewählten Wert. */
.ts-advancing-flag {
    font-size: 1.4rem;
    line-height: 1;
}

@media (max-width: 600px) {
    .ts-advancing-flag {
        font-size: 1.9rem;
    }
}

/* Fehler #201: Ländername im Auswahlfeld auf dieselbe Schriftgröße wie in der Spielansetzung
   (0.875rem / 14px) — im MudSelect erbt der Name sonst die 1rem-Größe der Option/des Eingabefeldes. */
.ts-advancing-name {
    font-size: 0.875rem;
}

/* Fehler #248: Im geschlossenen Auswahlfeld „Wer kommt weiter?" (= ausgewählter Wert) sitzt die — auf
   Mobilgeräten 1,9rem große — Flagge nicht mittig im Control-Kasten, sondern auf der Text-Baseline nach
   unten verrutscht (sie ragt unten fast aus dem dense Outlined-Input). Ursache: MudBlazor rendert den
   Wert-Presenter (div.mud-input-slot) als `display:block` mit nur 19px hoher Textzeile und symmetrischem
   Padding; die höhere Flagge liegt als Inline-Element auf der Baseline und überragt die Zeile nach unten.
   Der Presenter wird zu einem zentrierenden Flex-Container gemacht, damit der Flaggen+Name-Wrapper mittig
   im Content-Bereich (= mittig im Control) sitzt. `:has()` begrenzt die Regel exakt auf dieses Auswahlfeld;
   `!important` ist nötig, weil MudBlazor `display` per Regel hart setzt. */
.mud-input-slot:has(> .ts-advancing-team) {
    display: flex !important;
    align-items: center;
}

/* Aufgabe #272: Job-Verwaltung – feste Spaltenbreiten sorgen auf dem Desktop dafür, dass Status,
   Zeitpunkt und Auslöser über alle Zeilen bündig untereinander stehen (Titel-Spalte auf den längsten
   Jobnamen ausgelegt). Auf Smartphone-Breite (iPhone) würden die 19rem-Label-Spalten fast den ganzen
   Viewport belegen und den Wert in eine überwiegend leere Folgezeile drücken. Dort werden die festen
   Breiten aufgehoben, sodass Label und Wert kompakt beieinander stehen. */
.jobs-title-col {
    flex: 0 0 auto;
    width: 19rem;
}

.jobs-status-col {
    flex: 0 0 auto;
    width: 8rem;
}

.jobs-detail-label {
    flex: 0 0 auto;
    width: 19rem;
}

@media (max-width: 768px) {
    .jobs-title-col,
    .jobs-status-col,
    .jobs-detail-label {
        width: auto;
    }
}

/* Aufgabe #272 (Nacharbeit): Gestapelte MudTable-Karten (Breakpoint.Sm, alle Admin-Tabellen) —
   lange, nicht umbrechbare Werte (Pfade, URLs, Dateinamen) machten die gestapelten Zeilen breiter
   als den Viewport, wodurch die rechtsbündigen Werte aller Felder aus dem sichtbaren Bereich
   geschoben wurden (Blockierte IPs, Uploads, Einstellungen, URL-Redirects, System-Log, Statistik).
   `overflow-wrap: anywhere` erlaubt Umbrüche an beliebiger Stelle und reduziert dabei — anders als
   `break-word` — auch die Min-Content-Breite der Zellen, sodass die Tabelle im Viewport bleibt.
   960px = Umschaltpunkt von MudBlazor für Breakpoint.Sm. */
@media (max-width: 960px) {
    .mud-sm-table .mud-table-cell {
        overflow-wrap: anywhere;
    }
}