/* /Components/FeedbackDialog.razor.rz.scp.css */
.feedback-dialog-shell[b-412zgdy4uy] {
    padding: 0;
}

.feedback-dialog-hero[b-412zgdy4uy] {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(237, 32, 36, 0.28);
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 34%),
        linear-gradient(135deg, rgba(237, 32, 36, 0.24), rgba(18, 20, 24, 0.94));
}

.feedback-dialog-hero__icon[b-412zgdy4uy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    flex: 0 0 auto;
}

.feedback-dialog-hero__title[b-412zgdy4uy] {
    font-weight: 700;
    color: #fff;
}

.feedback-dialog-hero__subtitle[b-412zgdy4uy] {
    color: rgba(255, 255, 255, 0.82);
}

.feedback-dialog-panel[b-412zgdy4uy] {
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}

.feedback-dialog-required-hint[b-412zgdy4uy] {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ed2024;
}

.feedback-dialog-consent[b-412zgdy4uy] {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(237, 32, 36, 0.22);
    border-radius: 12px;
    background: rgba(237, 32, 36, 0.05);
}

.feedback-dialog-message[b-412zgdy4uy] {
    width: 100%;
    display: block;
}

.feedback-dialog-message[b-412zgdy4uy]  .mud-compat-input-wrap {
    width: 100%;
}

.feedback-dialog-actions[b-412zgdy4uy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 0 0.25rem;
}
/* /Components/Fehlerauffangnetz.razor.rz.scp.css */
/*
    Aussehen der Fehlermeldung (Befund vom 05.08.2026).

    Bewusst ohne Radzen-/MudCompat-Bauteile und ohne Palette-Variablen gebaut: Diese Meldung
    erscheint genau dann, wenn etwas kaputt ist. Sie muss auch dann noch lesbar sein, wenn die
    Ursache im Theme oder in einer Komponentenbibliothek liegt. Deshalb feste Farben, die in
    hellem wie dunklem Erscheinungsbild funktionieren.
*/

.fehlernetz[b-7wvbm9x8vj] {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.fehlernetz-karte[b-7wvbm9x8vj] {
    max-width: 560px;
    width: 100%;
    background: #1e1e1e;
    color: #f3f4f6;
    border: 1px solid rgba(237, 32, 36, 0.55);
    border-radius: 16px;
    padding: 28px 32px 32px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Das Ausrufezeichen im roten Kreis - traegt die Meldung optisch, ohne ein Symbolpaket
   zu brauchen, das im Fehlerfall womoeglich selbst nicht geladen ist. */
.fehlernetz-zeichen[b-7wvbm9x8vj] {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #ed2024;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    line-height: 56px;
}

.fehlernetz-titel[b-7wvbm9x8vj] {
    margin: 0 0 12px;
    font-size: 1.35rem;
    font-weight: 700;
}

.fehlernetz-text[b-7wvbm9x8vj] {
    margin: 0 0 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #d1d5db;
}

.fehlernetz-knoepfe[b-7wvbm9x8vj] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.fehlernetz-knopf[b-7wvbm9x8vj] {
    appearance: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid rgba(243, 244, 246, 0.35);
    background: transparent;
    color: #f3f4f6;
}

.fehlernetz-knopf:hover[b-7wvbm9x8vj] {
    border-color: rgba(243, 244, 246, 0.7);
}

.fehlernetz-knopf-haupt[b-7wvbm9x8vj] {
    background: #ed2024;
    border-color: #ed2024;
    color: #ffffff;
}

.fehlernetz-knopf-haupt:hover[b-7wvbm9x8vj] {
    background: #c81b1f;
    border-color: #c81b1f;
}

/* Schmale Bildschirme: Knoepfe untereinander, sonst brechen sie unschoen um. */
@media (max-width: 420px) {
    .fehlernetz-knoepfe[b-7wvbm9x8vj] {
        flex-direction: column;
    }

    .fehlernetz-karte[b-7wvbm9x8vj] {
        padding: 24px 20px 26px;
    }
}
/* /Components/TurnierKopf.razor.rz.scp.css */
/*
    Aussehen des Banner-Kopfs der Turnierseiten (TurnierKopf.razor).

    Alle Maße und Farben stammen aus dem Mock-up, das Frank am 14.09.2026 freigegeben hat.
    Das Stylesheet ist eingegrenzt (scoped): Es gilt nur für das Markup der Komponente. Die
    Buttons, die die Seiten als fertiges Markup hineinreichen (Parameter „Aktionen“), erreicht ein
    normaler Selektor deshalb NICHT – dafür stehen unten die ::deep-Regeln für .tk-btn.

    Die Schrift wird bewusst nicht festgelegt: Der Kopf erbt sie von der Seite (Roboto/Segoe),
    damit er sich wie ein Teil der Seite anfühlt und nicht wie ein Fremdkörper.

    Keine url()-Verweise: Alle Sinnbilder sind Inline-SVG (TurnierKopfIcons.cs), die Bilder
    (Logo, Flagge, Disziplin-Sinnbilder) kommen als <img> aus dem Markup. So hängt das
    Stylesheet an keiner Bilddatei.
*/

/* ---------------------------------------------------------------------------------------
   Das Band
   --------------------------------------------------------------------------------------- */

.tk-banner[b-aiu8q4bzsf] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 24px 22px;
    border-radius: 20px;
    border: 1px solid rgba(237, 32, 36, .28);
    color: #ffffff;
    /* Zwei Verläufe übereinander: der rötliche Schimmer links (radial) über dem dunklen
       Grundverlauf. Die Reihenfolge zählt – der zuerst genannte liegt oben. */
    background:
        radial-gradient(ellipse at 0% 50%, rgba(237, 32, 36, .32), transparent 45%),
        linear-gradient(120deg, #2a1416 0%, #1f2329 42%, var(--mud-palette-surface) 100%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .35);
    overflow: hidden;
    box-sizing: border-box;
}

/* Die oberste Zeile: Buttons links, Chips rechts. Bricht um, wenn es eng wird. */
.tk-kopfzeile[b-aiu8q4bzsf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.tk-aktionen[b-aiu8q4bzsf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Der Hauptteil: links Logo und Texte, rechts Kennzahlen und Disziplinen. */
.tk-inhalt[b-aiu8q4bzsf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 28px;
    flex-wrap: wrap;
}

.tk-links[b-aiu8q4bzsf] {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    flex: 1 1 380px;
}

.tk-text[b-aiu8q4bzsf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* ---------------------------------------------------------------------------------------
   Logo-Kachel
   Startet mit display:none aus dem Markup; der Browser schaltet sie per onload auf flex.
   Deshalb hier KEIN display – das Markup entscheidet, ob sie sichtbar ist.
   --------------------------------------------------------------------------------------- */

.tk-logo[b-aiu8q4bzsf] {
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 150px;
    height: 84px;
    padding: 6px;
    border-radius: 14px;
    background: #ffffff;
    box-sizing: border-box;
}

.tk-gross .tk-logo[b-aiu8q4bzsf] {
    width: 210px;
    height: 118px;
    padding: 8px;
    border-radius: 16px;
}

.tk-logo-bild[b-aiu8q4bzsf] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------------------
   Kennzeichnung, Titel, Untertitel, Ort, Sponsor
   --------------------------------------------------------------------------------------- */

.tk-kennung[b-aiu8q4bzsf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.tk-kennung-text[b-aiu8q4bzsf] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #ffb3b0;
    white-space: nowrap;
}

/* Die kurze Linie zwischen Kennung und Zusatz – 40 Pixel, halbdurchsichtig im selben Rot. */
.tk-kennung-linie[b-aiu8q4bzsf] {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: rgba(255, 179, 176, .5);
    flex: 0 0 auto;
}

.tk-kennung-zusatz[b-aiu8q4bzsf] {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

.tk-titel[b-aiu8q4bzsf] {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #ffffff;
    /* Lange Prüfungsbezeichnungen dürfen umbrechen, aber ein einzelnes überlanges Wort soll
       das Band nicht sprengen. */
    /* --- ERSETZT am 22.09.2026 (Fund vom Auftraggeber bei der Referenzen-Bühne, dieselbe
       Falle hier gesucht und gefunden): break-word statt anywhere loeste am 14.09.2026 das
       Problem, dass „Kerpen-Niederbolheim“ bei 1024px in „Nieder / bolhei / m“ zerfiel - aber
       auch break-word darf noch mitten im Wort trennen, sobald die Zeile sonst ueberlaufen
       wuerde. Jetzt "normal" + "hyphens: auto" (wirkt dank lang="de" auf <html> in
       index.html): bricht nur an Wortgrenzen, ein wirklich zu langes Wort bekommt einen
       Trennstrich am Silbenende statt einer beliebigen Trennstelle.
    overflow-wrap: break-word;
    --- */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

.tk-gross .tk-titel[b-aiu8q4bzsf] {
    font-size: 44px;
}

/* ---------------------------------------------------------------------------------------
   Mittlere Breiten (Laptop mit offenem Seitenmenü, Tablet quer): Logo und Kennzahlen zusammen
   lassen dem Titel sonst zu wenig Platz. Die Kennzahlen rutschen als Zeile unter den Text,
   Logo und Titel werden etwas kleiner. Gemessen bei 1024 und 1280 px am 14.09.2026.
   --------------------------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 1199.98px) {
    .tk-links[b-aiu8q4bzsf] {
        flex: 1 1 100%;
    }

    .tk-gross .tk-logo[b-aiu8q4bzsf] {
        width: 150px;
        height: 84px;
        padding: 6px;
        border-radius: 14px;
    }

    .tk-gross .tk-titel[b-aiu8q4bzsf] {
        font-size: 34px;
    }

    .tk-rechts[b-aiu8q4bzsf] {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }
}

.tk-untertitel[b-aiu8q4bzsf] {
    font-size: 15px;
    font-weight: 500;
    color: #d1d5db;
}

.tk-ort[b-aiu8q4bzsf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #d1d5db;
}

.tk-ort .tk-icon[b-aiu8q4bzsf] {
    flex: 0 0 auto;
    color: #ffb3b0;
}

.tk-sponsor[b-aiu8q4bzsf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    color: #d1d5db;
    flex-wrap: wrap;
}

.tk-sponsor-label[b-aiu8q4bzsf] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mud-palette-text-secondary);
}

.tk-sponsor-text[b-aiu8q4bzsf] {
    font-weight: 600;
    color: #ffffff;
}

/* ---------------------------------------------------------------------------------------
   Chips (Pillen): VNR, Land, weitere Angaben, Disziplinen
   --------------------------------------------------------------------------------------- */

.tk-chips[b-aiu8q4bzsf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.tk-chip[b-aiu8q4bzsf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    box-sizing: border-box;
}

.tk-chip-vnr[b-aiu8q4bzsf] {
    font-variant-numeric: tabular-nums;
}

/* Die Flagge im Land-Chip: 20×20 wie in der Ergebnisliste (.equiscore-result-flag). */
.tk-flagge[b-aiu8q4bzsf] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
}

/* Die Disziplin-Sinnbilder: 22×16, damit die vorhandenen SVG-Dateien nicht die Pille sprengen. */
.tk-disziplin-bild[b-aiu8q4bzsf] {
    width: 22px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ---------------------------------------------------------------------------------------
   Rechte Seite: Kennzahl-Kacheln und Disziplin-Chips
   --------------------------------------------------------------------------------------- */

.tk-rechts[b-aiu8q4bzsf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex: 0 1 auto;
}

.tk-kennzahlen[b-aiu8q4bzsf] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tk-kennzahl[b-aiu8q4bzsf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 86px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .08);
    box-sizing: border-box;
}

.tk-gross .tk-kennzahl[b-aiu8q4bzsf] {
    min-width: 96px;
}

.tk-kennzahl-wert[b-aiu8q4bzsf] {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.tk-kennzahl-label[b-aiu8q4bzsf] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.tk-disziplinen[b-aiu8q4bzsf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tk-rechts-unten[b-aiu8q4bzsf] {
    display: flex;
    justify-content: flex-end;
}

/* ---------------------------------------------------------------------------------------
   Buttons der Seiten (Pillen) – per ::deep, weil das Markup von der Seite kommt.

   Die Seiten reichen ihre Buttons als <a class="tk-btn tk-btn-zurueck"> bzw.
   <button class="tk-btn tk-btn-zweit"> herein. Ein eingegrenztes Stylesheet würde diese
   Elemente nicht erreichen, weil sie nicht das Kennzeichen der Komponente tragen. ::deep
   hebt die Eingrenzung für alles auf, was UNTER dem Band steht.
   --------------------------------------------------------------------------------------- */

.tk-banner[b-aiu8q4bzsf]  .tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease;
}

.tk-banner[b-aiu8q4bzsf]  .tk-btn:hover,
.tk-banner[b-aiu8q4bzsf]  .tk-btn:focus-visible {
    text-decoration: none;
    color: #ffffff;
}

.tk-banner[b-aiu8q4bzsf]  .tk-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .6);
    outline-offset: 2px;
}

/* „Zurück“: dunkler Grund mit hellem Rahmen. */
.tk-banner[b-aiu8q4bzsf]  .tk-btn-zurueck {
    background: rgba(0, 0, 0, .2);
    border-color: rgba(255, 255, 255, .16);
}

.tk-banner[b-aiu8q4bzsf]  .tk-btn-zurueck:hover {
    background: rgba(0, 0, 0, .32);
    border-color: rgba(255, 255, 255, .28);
}

/* Zweitbutton („Drucken / PDF“, „Rohdaten…“): heller, halbdurchsichtiger Grund. */
.tk-banner[b-aiu8q4bzsf]  .tk-btn-zweit {
    background: rgba(255, 255, 255, .1);
}

.tk-banner[b-aiu8q4bzsf]  .tk-btn-zweit:hover {
    background: rgba(255, 255, 255, .18);
}

/* Sinnbilder in Buttons und Zeilen: nie schrumpfen, mittig zur Schrift. */
.tk-banner[b-aiu8q4bzsf]  .tk-icon {
    flex: 0 0 auto;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------------------
   Handy (bis 599,98 Pixel): alles untereinander.
   Dieselbe Grenze wie die Kartenansicht der Ergebnisliste und die Turnierschleife.
   --------------------------------------------------------------------------------------- */

@media (max-width: 599.98px) {
    .tk-banner[b-aiu8q4bzsf] {
        padding: 16px 16px 18px;
        border-radius: 18px;
        gap: 14px;
    }

    /* Buttons und Chips untereinander; die Buttons füllen die Breite. */
    .tk-kopfzeile[b-aiu8q4bzsf] {
        flex-direction: column;
        align-items: stretch;
    }

    .tk-aktionen[b-aiu8q4bzsf] {
        gap: 8px;
    }

    /* Buttons volle Breite – mit einer Ausnahme, die ohne :has() auskommt (die Eingrenzung
       des Stylesheets schreibt Selektoren um, und :has() ist dabei nicht verlässlich):
       - Der Zurück-Button wächst und füllt die Zeile (flex-basis auto).
       - Ein Zweitbutton mit Text nimmt eine ganze Zeile (flex-basis 100 %) und rutscht
         damit unter den Zurück-Button.
       - Ein reiner Icon-Button (Klasse tk-btn-icon, nur Sinnbild) bleibt so schmal wie
         nötig und steht NEBEN dem Zurück-Button in derselben Zeile. */
    .tk-banner[b-aiu8q4bzsf]  .tk-btn {
        flex: 1 1 100%;
    }

    .tk-banner[b-aiu8q4bzsf]  .tk-btn-zurueck {
        flex: 1 1 auto;
    }

    .tk-banner[b-aiu8q4bzsf]  .tk-btn-icon {
        flex: 0 0 auto;
        padding: 0 12px;
    }

    .tk-chips[b-aiu8q4bzsf] {
        justify-content: flex-start;
        margin-left: 0;
    }

    .tk-inhalt[b-aiu8q4bzsf] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .tk-links[b-aiu8q4bzsf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        flex-basis: auto;
    }

    .tk-logo[b-aiu8q4bzsf],
    .tk-gross .tk-logo[b-aiu8q4bzsf] {
        width: 112px;
        height: 64px;
        padding: 5px;
        border-radius: 12px;
    }

    .tk-titel[b-aiu8q4bzsf],
    .tk-gross .tk-titel[b-aiu8q4bzsf] {
        font-size: 24px;
    }

    /* Kennzahlen werden zu einer Chips-Zeile: Zahl und Beschriftung nebeneinander in einer
       Pille, statt großer Kacheln, die untereinander zu viel Höhe fressen. */
    .tk-rechts[b-aiu8q4bzsf] {
        align-items: stretch;
    }

    .tk-kennzahlen[b-aiu8q4bzsf] {
        justify-content: flex-start;
        gap: 8px;
    }

    .tk-kennzahl[b-aiu8q4bzsf],
    .tk-gross .tk-kennzahl[b-aiu8q4bzsf] {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .06);
    }

    .tk-kennzahl-wert[b-aiu8q4bzsf] {
        font-size: 15px;
        font-weight: 800;
    }

    .tk-kennzahl-label[b-aiu8q4bzsf] {
        font-size: 10.5px;
    }

    .tk-disziplinen[b-aiu8q4bzsf],
    .tk-rechts-unten[b-aiu8q4bzsf] {
        justify-content: flex-start;
    }
}

/* Bewegungsempfindliche Nutzer: keine Übergänge an den Buttons. */
@media (prefers-reduced-motion: reduce) {
    .tk-banner[b-aiu8q4bzsf]  .tk-btn {
        transition: none;
    }
}
/* /Components/Turnierschleife.razor.rz.scp.css */
/*
    Größe und Anmutung der Turnierschleife.

    Die Form selbst steckt im SVG der Komponente, hier steht nur, wie groß sie erscheint
    und wie der Sieger hervorgehoben wird.
*/

/*
    Der Halter sorgt dafür, dass die Schleife denselben Platz einnimmt wie die graue Plakette
    der nicht platzierten Reiter (dort min-width: 44px). Stehen beide in derselben Liste
    untereinander, springt die Rang-Spalte sonst sichtbar hin und her. Die Schleife selbst
    bleibt unverzerrt und sitzt mittig. (Frank, 12.09.2026)
*/
.turnierschleife-halter[b-stl3pr3ru3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
}

.turnierschleife[b-stl3pr3ru3] {
    display: block;
    width: 32px;
    height: 41px;

    /* Die Bänder laufen bis an den unteren Rand des Zeichenbereichs. Ohne diese Angabe
       würde eine Tabellenzeile die Schleife an ihrer Unterkante abschneiden. */
    overflow: visible;

    /* Die Zeilenhöhe soll sich an der Schleife ausrichten und nicht an der Schriftzeile,
       in der sie steht - sonst entsteht unter jeder Schleife ein zufälliger Zwischenraum. */
    vertical-align: middle;
}

/* Die Platzziffer in der Mitte. Bewusst hier und nicht im SVG: So bleibt sie über die
   Schriftfamilie der Seite gesteuert und passt zum übrigen Text. */
.turnierschleife text[b-stl3pr3ru3] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 700;

    /* Die Schleife ist klein; ohne engere Laufweite wird eine zweistellige Zahl zu breit. */
    letter-spacing: -0.02em;
}

/*
    Der Sieger bekommt zusätzlich einen weichen Schimmer.

    Warum: Auf dem dunklen Seitenhintergrund ist die weiße Schleife von Platz 3 heller als
    das Gold von Platz 1 - der dritte Platz sprang dadurch stärker ins Auge als der Sieger.
    Die Schleifenfarben bleiben fachlich korrekt, nur das Gewicht wird geradegerückt
    (Frank, 12.09.2026).
*/
.turnierschleife-sieger[b-stl3pr3ru3] {
    filter: drop-shadow(0 0 3px rgba(242, 201, 92, 0.5));
}

/*
    Auf schmalen Bildschirmen kleiner.

    Die Grenze liegt bei 599,98 Pixeln - genau dort, wo die Equi-Score-Ergebnisliste von der
    Tabelle auf ihre Kartenansicht umschaltet (siehe EquiscoreErgebnisliste.razor). Auf einem
    Handy steht dann jede Angabe untereinander, und eine Liste mit dreißig Startern wird sonst
    unnötig lang. Frank hat den ursprünglich gemeldeten Fehler auf genau so einem Bildschirm
    entdeckt.

    Bewusst NICHT 760 Pixel: Das ist die Grenze der Archiv-Listen, und dazwischen - auf einem
    Tablet im Hochformat - soll die Schleife noch in voller Größe stehen. Eine der beiden
    Grenzen muss es sein; die engere ist die richtige, weil nur dort der Platz wirklich knapp
    wird.
*/
@media (max-width: 599.98px) {
    /* --- ZURÜCKGENOMMEN am 2026-09-12: Hier schrumpfte der Halter auf schmalen Bildschirmen
       auf 36 Pixel mit. Verworfene Fassung:
       .turnierschleife-halter { min-width: 36px; }
       Grund: Die graue Plakette der nicht platzierten Reiter bleibt auf allen Seiten bei
       44 Pixeln. Der schrumpfende Halter hat damit auf dem Handy genau das Springen der
       Rang-Spalte wieder eingeführt, das er verhindern sollte - nur 8 Pixel statt 12, also
       subtiler und schwerer zu bemerken. Gefunden hat es die Codex-Zweitprüfung.
       Der Halter bleibt deshalb überall 44 Pixel breit. Die kleinere Schleife hat dann auf
       dem Handy etwas mehr Luft um sich - das ist der Preis dafür, dass nichts springt, und
       er kostet keinen Platz: Die Spalte muss für die Plakette ohnehin 44 Pixel breit sein. --- */

    .turnierschleife[b-stl3pr3ru3] {
        width: 26px;
        height: 33px;
    }

    .turnierschleife text[b-stl3pr3ru3] {
        font-size: 11.5px;
    }
}

/* Bewegungsempfindliche Nutzer: Der Schimmer ist statisch, hier gibt es nichts zu
   entschärfen - der Block steht nur, damit ein späterer Animationswunsch nicht
   unbedacht hinzukommt. */
@media (prefers-reduced-motion: reduce) {
    .turnierschleife[b-stl3pr3ru3] {
        transition: none;
    }
}
/* /Components/WertungsZeilen.razor.rz.scp.css */
/*
    Aussehen der Wertungszeilen.

    WARUM UNTEREINANDER: Frank hat am 13.09.2026 entschieden, dass die Werte eines Reiters
    nicht mehr in einer Zeile nebeneinander stehen, getrennt durch einen senkrechten Strich
    ("H: 69,688 % | C: 68,750 %"). Stattdessen bekommt jeder Wert seine eigene Zeile, und ein
    vorhandenes Gesamt steht fett unter einem feinen Trennstrich.

    FALLS ES DOCH WIEDER NEBENEINANDER SOLL: Dafür genügt es, in der ersten Regel die
    Richtung von "column" auf "row" umzustellen und den Abstand (gap) etwas zu vergrößern,
    damit die Werte nicht aneinanderkleben. Der Trennstrich müsste dann senkrecht werden
    (border-left statt border-top). Am Aufbau der Seiten ändert sich dafür nichts.

    Diese Datei gilt für alle Stellen, die den Baustein benutzen (Live-Ticker am Rechner und
    auf dem Handy, Handy-Karte der Ergebnisliste). Deshalb bewusst ohne Bildschirmregeln:
    Das Aussehen soll überall gleich sein.
*/

/*
    Der Behälter. inline-flex, damit er sich wie ein Stück Text in eine Tabellenzelle oder
    eine Kartenzeile einfügt, innen aber die Zeilen untereinander stapelt.
    align-items: flex-start sorgt dafür, dass jede Zeile nur so breit ist wie ihr Text und
    alle linksbündig untereinander beginnen.

    text-align: left, weil der Baustein auch in rechtsbündigen Behältern sitzt (etwa in der
    Handy-Karte der Ergebnisliste). Die Zeilen sollen trotzdem linksbündig untereinander
    stehen - sonst beginnen "H:", "C:" und "M:" versetzt und die Noten lassen sich nicht
    mehr auf einen Blick vergleichen.
*/
.wertungszeilen[b-vrvf6wsfg0] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    line-height: 1.25;
    text-align: left;
}

/*
    Eine einzelne Wertungszeile, z. B. "H: 69,688 %".

    font-weight: 400 steht hier ausdrücklich, obwohl das die normale Schriftstärke ist: Der
    umgebende Behälter einer Seite kann selbst fett sein (so in der Handy-Karte der
    Ergebnisliste). Ohne diese Angabe würden die Einzelnoten die Fettschrift erben, und das
    fette Gesamt hebt sich nicht mehr von ihnen ab.
*/
.wertungszeilen-zeile[b-vrvf6wsfg0] {
    display: block;
    font-weight: 400;
    /* Nachtrag 13.09.2026 (Version 1.1.40): Eine Wertungszeile wie "H: 72,353 %" darf nie
       innerhalb der Zeile umbrechen. Live gemessen in 1.1.39: In der Computer-Tabelle des
       Live-Tickers ist die Spalte "Wertung" schmal (bei 1024 Pixeln Fensterbreite nur 88 Pixel),
       dort brachen 24 von 26 Zeilen in "H:" / "72,353" / "%" auseinander, bei 1280 Pixeln noch jede
       Gesamtzeile. Mit nowrap bleibt jede Angabe einzeilig; die Tabellenspalte wird dafür etwas breiter. */
    white-space: nowrap;
}

/*
    Der feine Strich zwischen den Einzelwerten und dem Gesamt.

    align-self: stretch zieht ihn über die volle Breite des Behälters, also so breit wie die
    längste Zeile - sonst hätte er als leeres Element gar keine Breite.
    Die Farbe ist die Sekundärtextfarbe des Themes, stark abgeschwächt: Der Strich soll
    gliedern, nicht auffallen. Über die Variable passt er sich hellem und dunklem
    Erscheinungsbild automatisch an (definiert in wwwroot/css/mud-compat.css).
*/
.wertungszeilen-trenner[b-vrvf6wsfg0] {
    display: block;
    align-self: stretch;
    height: 0;
    margin: 0.12rem 0;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent);
}

/* Die Gesamtzeile, z. B. "Gesamt: 68,646 %" - fett, weil sie das eigentliche Ergebnis ist. */
.wertungszeilen-gesamt[b-vrvf6wsfg0] {
    display: block;
    font-weight: 700;
    /* Nachtrag 13.09.2026 (Version 1.1.40): Auch "Gesamt: 71,225 %" bleibt einzeilig — bei 1280 Pixeln
       Fensterbreite brach die fette Gesamtzeile im Live-Ticker sonst bei jedem Reiter um (siehe oben). */
    white-space: nowrap;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-3sfrbqmz31] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-3sfrbqmz31] {
    flex: 1;
}

.sidebar[b-3sfrbqmz31] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-3sfrbqmz31] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-3sfrbqmz31]  a, .top-row[b-3sfrbqmz31]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-3sfrbqmz31]  a:hover, .top-row[b-3sfrbqmz31]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-3sfrbqmz31]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-3sfrbqmz31] {
        justify-content: space-between;
    }

    .top-row[b-3sfrbqmz31]  a, .top-row[b-3sfrbqmz31]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-3sfrbqmz31] {
        flex-direction: row;
    }

    .sidebar[b-3sfrbqmz31] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-3sfrbqmz31] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-3sfrbqmz31]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-3sfrbqmz31], article[b-3sfrbqmz31] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.site-appbar-logo[b-3sfrbqmz31] {
    height: 40px;
    margin-left: 16px;
}

/* --- STILLGELEGT am 08.09.2026: Gestaltung des roten Feedback-Riegels und seines
       Zwillings in der Kopfzeile. Beide Bedienelemente sind in MainLayout.razor
       auskommentiert (Grund dort ausführlich beschrieben), deshalb greift diese
       Gestaltung ins Leere. Sie bleibt stehen, damit das Wiedereinschalten nur aus
       dem Entfernen der Kommentarklammern besteht. ---
.site-feedback-appbar-trigger {
    display: none;
}

.site-feedback-ribbon {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.8rem 0.9rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-right: none;
    border-radius: 18px 0 0 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, #ed2024, #971417);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.site-feedback-ribbon:hover {
    transform: translateY(-50%) translateX(-4px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36);
    filter: saturate(1.05);
}

.site-feedback-ribbon:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.site-feedback-ribbon__badge {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
    flex: 0 0 auto;
}

.site-feedback-ribbon__text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    letter-spacing: 0.2em;
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
}
*/

[b-3sfrbqmz31] .site-appbar-title {
    letter-spacing: 0.01em;
}

/* Abgedunkelter Hintergrund hinter dem offenen Menü — ergänzt am 05.09.2026 (Ticket #3987).
   Das Element wird in MainLayout.razor nur gerendert, solange das Menü offen ist. Am Desktop
   steht das Menü dauerhaft neben dem Inhalt, dort darf nichts abgedunkelt werden — deshalb ist
   die Fläche standardmäßig unsichtbar und wird erst in der Handy-Regel weiter unten eingeblendet. */
.site-drawer-backdrop[b-3sfrbqmz31] {
    display: none;
}

/* Handy-Breite: Die Grenze ist bewusst 959.98px und nicht 960px, damit sie exakt zur
   JavaScript-Entscheidung passt (equiDeckViewport.isDesktopLayout: Breite >= 960 = Desktop).
   Bei genau 960 px öffnet das Programm das Menü beim Start automatisch als Desktop-Menü; würde
   dort der Vorhang erscheinen, wäre der Inhalt dauerhaft abgedunkelt und unbedienbar. */
@media (max-width: 959.98px) {
    .site-drawer-backdrop[b-3sfrbqmz31] {
        display: block;
        position: fixed;
        /* Beginnt unter der Kopfzeile: Die AppBar ist auf schmalen Bildschirmen 52 px hoch
           (mud-compat.css, @media max-width 959.98px), das Menü selbst startet dort ebenfalls bei
           52 px. So bleibt der Hamburger-Knopf in der Kopfzeile frei antippbar. */
        inset: 52px 0 0 0;
        /* Schichtung: AppBar 1200 > Drawer 1190 > diese Fläche 1189 > Seiteninhalt.
           Damit liegt der Vorhang über dem Inhalt, aber unter Menü und Kopfzeile. */
        z-index: 1189;
        background: rgba(0, 0, 0, 0.45);
        cursor: pointer;
    }
}

/* --- STILLGELEGT am 08.09.2026: Diese Regel schaltete auf schmalen Bildschirmen und
       Touchgeräten vom Riegel auf den Knopf in der Kopfzeile um. Beide sind stillgelegt,
       also wird nichts mehr umgeschaltet. ---
@media (max-width: 1280px), (pointer: coarse) {
    .site-feedback-ribbon {
        display: none;
    }

    .site-feedback-appbar-trigger {
        display: inline-flex;
        align-items: center;
    }
}
*/

/* Geändert am 05.09.2026 (Codex-Nacharbeit zu Ticket #3987): vorher max-width 960px. Bei genau
   960 px gilt laut JavaScript und DrawerLayoutRegeln bereits Desktop; die Handy-Maße dürfen dort
   nicht mehr greifen. Dieselbe Grenze wie beim Vorhang oben und in mud-compat.css. */
@media (max-width: 959.98px) {
    .site-appbar-logo[b-3sfrbqmz31] {
        height: 32px;
        margin-left: 8px;
    }

    [b-3sfrbqmz31] .site-appbar-title {
        font-size: 1rem !important;
    }

    [b-3sfrbqmz31] .site-shell {
        margin-top: 0.75rem !important;
        margin-bottom: 1.5rem !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }
}

@media (max-width: 640px) {
    .site-appbar-logo[b-3sfrbqmz31] {
        height: 28px;
        margin-left: 6px;
    }

    [b-3sfrbqmz31] .site-appbar-title {
        display: none !important;
    }

    [b-3sfrbqmz31] .site-shell {
        margin-top: 0.6rem !important;
        margin-bottom: 1.25rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-xjg6ljx32o] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-xjg6ljx32o] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-xjg6ljx32o] {
    font-size: 1.1rem;
}

.bi[b-xjg6ljx32o] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-xjg6ljx32o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-xjg6ljx32o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-xjg6ljx32o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-graph-up-nav-menu[b-xjg6ljx32o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-graph-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07'/%3E%3C/svg%3E");
}

.bi-broadcast-nav-menu[b-xjg6ljx32o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-broadcast' viewBox='0 0 16 16'%3E%3Cpath d='M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707M8 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
}

.bi-archive-nav-menu[b-xjg6ljx32o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-archive' viewBox='0 0 16 16'%3E%3Cpath d='M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5zm13-3H1v2h14zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}

.nav-item[b-xjg6ljx32o] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-xjg6ljx32o] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-xjg6ljx32o] {
        padding-bottom: 1rem;
    }

    .nav-item[b-xjg6ljx32o]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-xjg6ljx32o]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-xjg6ljx32o]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-xjg6ljx32o] {
        display: none;
    }

    .collapse[b-xjg6ljx32o] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-xjg6ljx32o] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Admin/Zeiteinteilung/IndexEmbedded.razor.rz.scp.css */
.timeplanning-status[b-fj4egfyhbw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    justify-content: center;
}

.timeplanning-status-ok[b-fj4egfyhbw] {
    color: #15803d;
}

.timeplanning-status-missing[b-fj4egfyhbw] {
    color: #b91c1c;
}

.timeplanning-shows-page[b-fj4egfyhbw] {
    margin-top: 4px;
}

.timeplanning-shows-section-toggle[b-fj4egfyhbw] {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    box-sizing: border-box;
}

.timeplanning-shows-section-future[b-fj4egfyhbw] {
    background-color: color-mix(in srgb, #38bdf8 12%, transparent);
    cursor: pointer;
}

.timeplanning-shows-section-running[b-fj4egfyhbw] {
    background-color: color-mix(in srgb, #22c55e 16%, transparent);
    border-left: 4px solid #22c55e;
}

.timeplanning-shows-col-check[b-fj4egfyhbw] {
    text-align: center;
    white-space: nowrap;
}

.timeplanning-shows-col-actions[b-fj4egfyhbw] {
    text-align: right;
    white-space: nowrap;
}

[b-fj4egfyhbw] .timeplanning-shows-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
    transition: background-color 0.2s ease;
}

@media (min-width: 761px) {
    /* Das feste Raster muss auf dem echten table-Element liegen, nicht auf dem MudTable-Wrapper. */
    [b-fj4egfyhbw] .timeplanning-shows-table .mud-table-container > table {
        width: 100%;
        table-layout: fixed;
    }

    /* Die Summe bleibt bewusst bei 100 %, damit beide Tabellen identisch ausgerichtet bleiben. */
    [b-fj4egfyhbw] .timeplanning-shows-table .timeplanning-shows-col-show {
        width: 22%;
    }

    [b-fj4egfyhbw] .timeplanning-shows-table .timeplanning-shows-col-date {
        width: 19%;
        white-space: nowrap;
    }

    [b-fj4egfyhbw] .timeplanning-shows-table .timeplanning-shows-col-venue {
        width: 25%;
    }

    [b-fj4egfyhbw] .timeplanning-shows-table .timeplanning-shows-col-status {
        width: 10%;
        white-space: nowrap;
    }

    [b-fj4egfyhbw] .timeplanning-shows-table .timeplanning-shows-col-check {
        width: 7%;
    }

    [b-fj4egfyhbw] .timeplanning-shows-table .timeplanning-shows-col-actions {
        width: 10%;
    }

    [b-fj4egfyhbw] .timeplanning-shows-table td.timeplanning-shows-col-actions,
    [b-fj4egfyhbw] .timeplanning-shows-table th.timeplanning-shows-col-actions,
    [b-fj4egfyhbw] .timeplanning-shows-table td.timeplanning-shows-col-check,
    [b-fj4egfyhbw] .timeplanning-shows-table th.timeplanning-shows-col-check {
        text-align: center;
    }

    [b-fj4egfyhbw] .timeplanning-shows-table td.timeplanning-shows-col-actions,
    [b-fj4egfyhbw] .timeplanning-shows-table th.timeplanning-shows-col-actions {
        text-align: right;
    }
}

[b-fj4egfyhbw] .schedule-hero {
    width: 100%;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), transparent 34%),
        radial-gradient(circle at 82% 24%, color-mix(in srgb, #0f766e 18%, transparent), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--mud-palette-surface) 94%, transparent), color-mix(in srgb, var(--mud-palette-surface) 86%, black 14%));
}

.schedule-hero-header[b-fj4egfyhbw],
.schedule-day-header[b-fj4egfyhbw],
.schedule-day-header-main[b-fj4egfyhbw] {
    display: flex;
    align-items: center;
}

.schedule-hero-header[b-fj4egfyhbw] {
    justify-content: space-between;
    gap: 1rem;
}

.schedule-hero-header-editor[b-fj4egfyhbw] {
    align-items: flex-start;
}

.schedule-hero-copy[b-fj4egfyhbw] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.schedule-chip-row[b-fj4egfyhbw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.schedule-hero-actions[b-fj4egfyhbw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.timeplanning-mail-message-panel[b-fj4egfyhbw] {
    display: grid;
    gap: 8px;
    max-width: 760px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%);
}

.timeplanning-mail-message-input[b-fj4egfyhbw] {
    min-height: 112px;
    resize: vertical;
    line-height: 1.45;
}

[b-fj4egfyhbw] .schedule-notice-panel {
    width: 100%;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-surface) 98%, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) 2%), color-mix(in srgb, var(--mud-palette-surface) 94%, #151922 6%));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.schedule-editor-toolbar[b-fj4egfyhbw] {
    width: 100%;
}

.timeplanning-sticky-panel[b-fj4egfyhbw] {
    position: sticky;
    top: 12px;
    z-index: 20;
}

[b-fj4egfyhbw] .schedule-day-group {
    width: 100%;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 26%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-surface) 98%, #20242b 2%), color-mix(in srgb, var(--mud-palette-surface) 94%, #151922 6%));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.schedule-day-stack[b-fj4egfyhbw] {
    width: 100%;
    align-items: stretch !important;
}

.schedule-day-header[b-fj4egfyhbw] {
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0 0.95rem;
    border-bottom: 2px solid color-mix(in srgb, #ed2024 70%, transparent);
}

.schedule-day-header-main[b-fj4egfyhbw] {
    gap: 0.85rem;
    min-width: 0;
}

.schedule-day-badge[b-fj4egfyhbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,239,239,0.96));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.schedule-day-badge-number[b-fj4egfyhbw] {
    color: #222;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.schedule-day-badge-month[b-fj4egfyhbw] {
    margin-top: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #ed2024;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.2;
}

.schedule-discipline-section[b-fj4egfyhbw] {
    width: 100%;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent);
    overflow: hidden;
    background: color-mix(in srgb, var(--mud-palette-surface) 95%, #0f1420 5%);
}

.schedule-discipline-header[b-fj4egfyhbw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: color-mix(in srgb, var(--mud-palette-background-grey) 86%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
}

.schedule-discipline-section-dressage .schedule-discipline-header[b-fj4egfyhbw] {
    border-left: 4px solid #1d4ed8;
}

.schedule-discipline-section-jumping .schedule-discipline-header[b-fj4egfyhbw] {
    border-left: 4px solid #b91c1c;
}

.schedule-discipline-section-other .schedule-discipline-header[b-fj4egfyhbw] {
    border-left: 4px solid #64748b;
}

.schedule-grid-table[b-fj4egfyhbw] {
    width: 100%;
}

.schedule-grid-table-editor[b-fj4egfyhbw] {
    --schedule-grid-columns: minmax(7.4rem, 1.05fr) minmax(5.8rem, 0.85fr) minmax(16rem, 2.2fr) minmax(7rem, 0.9fr) minmax(7.4rem, 0.95fr) minmax(16rem, 1.65fr) minmax(14rem, 1.3fr);
}

.schedule-grid-header[b-fj4egfyhbw],
.schedule-grid-row[b-fj4egfyhbw] {
    display: grid;
    grid-template-columns: var(--schedule-grid-columns);
    align-items: stretch;
}

.schedule-grid-header[b-fj4egfyhbw] {
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, #0b1019 12%);
    color: color-mix(in srgb, var(--mud-palette-text-primary) 82%, #cfd8e3 18%);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
}

.schedule-grid-row[b-fj4egfyhbw] {
    min-height: 58px;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 14%, transparent);
}

.schedule-grid-row:nth-child(even)[b-fj4egfyhbw] {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

.schedule-grid-row:hover[b-fj4egfyhbw] {
    background: rgba(63, 5, 8, 0.42);
    transition: background-color 0.18s ease;
}

.schedule-grid-row:last-child[b-fj4egfyhbw] {
    border-bottom: 0;
}

.schedule-grid-cell[b-fj4egfyhbw] {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.8rem 0.95rem;
    text-align: left;
}

.schedule-grid-cell-caption[b-fj4egfyhbw],
.schedule-grid-cell-editor-drop[b-fj4egfyhbw] {
    justify-content: flex-start;
    text-align: left;
}

.schedule-grid-cell-editor-field[b-fj4egfyhbw],
.schedule-grid-cell-editor-drop[b-fj4egfyhbw] {
    align-items: stretch;
}

[b-fj4egfyhbw] .schedule-number-chip {
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    background: #b91c1c !important;
    border-color: #991b1b !important;
    color: #fff !important;
}

[b-fj4egfyhbw] .schedule-number-chip .mud-chip-content {
    color: #fff !important;
    font-weight: 700 !important;
}

.schedule-time-text[b-fj4egfyhbw] {
    font-weight: 700;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 92%, white 8%);
}

.schedule-caption-text[b-fj4egfyhbw] {
    width: 100%;
    text-align: left;
    font-weight: 500;
    line-height: 1.35;
}

.schedule-edit-input[b-fj4egfyhbw] {
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, #0f1420 8%);
    border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 32%, transparent);
}

.schedule-dropzone[b-fj4egfyhbw] {
    width: 100%;
}

.timeplanning-sticky-grid[b-fj4egfyhbw] {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 24px;
}

.timeplanning-selector-row[b-fj4egfyhbw],
.timeplanning-button-row[b-fj4egfyhbw] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.timeplanning-selector-row-search[b-fj4egfyhbw] {
    align-items: flex-start;
}

.timeplanning-select[b-fj4egfyhbw],
.timeplanning-input[b-fj4egfyhbw] {
    width: 100%;
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 28%, transparent);
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
}

.timeplanning-select[b-fj4egfyhbw] {
    flex: 1 1 220px;
}

.timeplanning-judge-search[b-fj4egfyhbw] {
    flex: 1 1 300px;
    min-width: 260px;
}

.timeplanning-judge-search-status[b-fj4egfyhbw] {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.timeplanning-judge-search-suggestions[b-fj4egfyhbw] {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.timeplanning-judge-search-suggestion[b-fj4egfyhbw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 20%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-surface) 98%, transparent);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
}

.timeplanning-judge-search-suggestion:hover[b-fj4egfyhbw] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 36%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.timeplanning-judge-search-suggestion-name[b-fj4egfyhbw] {
    font-weight: 700;
}

.timeplanning-judge-search-suggestion-mail[b-fj4egfyhbw] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.timeplanning-button[b-fj4egfyhbw] {
    min-height: 38px;
    border: none;
    border-radius: 10px;
    padding: 0 14px;
    background: var(--mud-palette-primary);
    color: white;
    cursor: pointer;
}

.timeplanning-button-secondary[b-fj4egfyhbw] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 30%, transparent);
    color: var(--mud-palette-text-primary);
}

.timeplanning-button-danger[b-fj4egfyhbw] {
    background: #b91c1c;
    color: white;
}

.timeplanning-new-judge-panel[b-fj4egfyhbw] {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.timeplanning-import-panel[b-fj4egfyhbw] {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.timeplanning-judge-pool[b-fj4egfyhbw] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.timeplanning-judge-pool-card[b-fj4egfyhbw] {
    position: relative;
    min-width: 180px;
    max-width: 220px;
    padding: 12px 34px 12px 12px;
    border-radius: 14px;
    cursor: grab;
    border: 1px solid transparent;
    color: #1f2937;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.timeplanning-judge-pool-card-active[b-fj4egfyhbw] {
    border-color: #b91c1c;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.16), 0 12px 24px rgba(15, 23, 42, 0.12);
}

.timeplanning-judge-pool-card-green[b-fj4egfyhbw] {
    background: color-mix(in srgb, #16a34a 18%, white);
    border-color: color-mix(in srgb, #16a34a 30%, transparent);
}

.timeplanning-judge-pool-card-orange[b-fj4egfyhbw] {
    background: color-mix(in srgb, #ea580c 18%, white);
    border-color: color-mix(in srgb, #ea580c 30%, transparent);
}

.timeplanning-judge-pool-card-red[b-fj4egfyhbw] {
    background: color-mix(in srgb, #dc2626 20%, white);
    border-color: color-mix(in srgb, #dc2626 42%, transparent);
}

.timeplanning-judge-pool-name[b-fj4egfyhbw] {
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.timeplanning-judge-pool-mail[b-fj4egfyhbw] {
    margin-top: 4px;
    font-size: 0.82rem;
    color: #374151;
    opacity: 1;
    word-break: break-word;
}

.timeplanning-judge-pool-actions[b-fj4egfyhbw] {
    margin-top: 10px;
}

.timeplanning-judge-preview-hint[b-fj4egfyhbw] {
    display: block;
    margin-top: 4px;
    color: #475569;
}

.timeplanning-judge-preview-link[b-fj4egfyhbw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(185, 28, 28, 0.28);
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(153, 27, 27, 0.12);
}

.timeplanning-judge-preview-link:hover[b-fj4egfyhbw] {
    background: rgba(255, 255, 255, 0.92);
    color: #7f1d1d;
}

.timeplanning-judge-edit-panel[b-fj4egfyhbw] {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, #b91c1c 24%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #b91c1c 6%, var(--mud-palette-surface));
}

.timeplanning-judge-remove[b-fj4egfyhbw] {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
}

.timeplanning-judge-remove:hover[b-fj4egfyhbw] {
    color: #111827;
}

.timeplanning-cell-dropzone[b-fj4egfyhbw] {
    min-height: 54px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-radius: 12px;
    padding: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.timeplanning-drop-placeholder[b-fj4egfyhbw] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.86rem;
}

.timeplanning-assignment-list[b-fj4egfyhbw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeplanning-assignment-chip[b-fj4egfyhbw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    cursor: context-menu;
}

.timeplanning-assignment-remove[b-fj4egfyhbw] {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
}

.timeplanning-position-menu-backdrop[b-fj4egfyhbw] {
    position: fixed;
    inset: 0;
    z-index: 89;
}

.timeplanning-position-menu[b-fj4egfyhbw] {
    position: fixed;
    box-sizing: border-box;
    width: 240px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
    z-index: 90;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    body[b-fj4egfyhbw] {
        background: white !important;
    }

    .timeplanning-sticky-panel[b-fj4egfyhbw],
    button[b-fj4egfyhbw],
    .mud-button-root[b-fj4egfyhbw] {
        display: none !important;
    }

    .mud-container[b-fj4egfyhbw],
    .mud-paper[b-fj4egfyhbw] {
        max-width: 100% !important;
    }

    .schedule-grid-row[b-fj4egfyhbw] {
        break-inside: avoid;
    }

    .mud-paper[b-fj4egfyhbw] {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
    }

    .schedule-grid-table-editor[b-fj4egfyhbw] {
        --schedule-grid-columns: 90px 70px minmax(180px, 1.2fr) 80px 90px minmax(170px, 1fr) minmax(140px, 0.85fr);
    }
}

@media (max-width: 1200px) {
    .schedule-grid-table-editor[b-fj4egfyhbw] {
        --schedule-grid-columns: 100px 86px minmax(220px, 1fr);
    }

    .schedule-grid-table-editor .schedule-grid-header > :nth-child(n+4)[b-fj4egfyhbw],
    .schedule-grid-table-editor .schedule-grid-row > :nth-child(n+4)[b-fj4egfyhbw] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .schedule-hero-header-editor[b-fj4egfyhbw] {
        flex-direction: column;
    }

    .schedule-hero-actions[b-fj4egfyhbw] {
        width: 100%;
        justify-content: flex-start;
    }

    .schedule-day-header[b-fj4egfyhbw] {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-day-header-main[b-fj4egfyhbw] {
        width: 100%;
    }

    .schedule-day-badge[b-fj4egfyhbw] {
        min-width: 54px;
        padding: 0.35rem 0.45rem;
    }

    .timeplanning-shows-toolbar[b-fj4egfyhbw] {
        gap: 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .timeplanning-shows-section-toggle[b-fj4egfyhbw] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .timeplanning-sticky-grid[b-fj4egfyhbw] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/UeberUns.razor.rz.scp.css */
.about-page-shell[b-chb64lalvq] {
    --about-surface: #10151d;
    --about-surface-strong: #0b0f14;
    --about-surface-soft: #1a212b;
    --about-line: rgba(255, 255, 255, 0.08);
    --about-text: #edf1f7;
    --about-muted: #aeb7c4;
    --about-accent: #ed2024;
    --about-accent-soft: #ff7a5f;
    max-width: 1340px;
    margin: 0 auto;
    padding: 22px 20px 70px;
    color: var(--about-text);
    position: relative;
}

.about-page-shell[b-chb64lalvq]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 18%, #000 82%, rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

.about-page-shell > *[b-chb64lalvq] {
    position: relative;
    z-index: 1;
}

.about-page-shell h1[b-chb64lalvq],
.about-page-shell h2[b-chb64lalvq],
.about-page-shell h3[b-chb64lalvq],
.about-page-shell p[b-chb64lalvq] {
    margin: 0;
}

.about-page-shell img[b-chb64lalvq] {
    display: block;
    max-width: 100%;
}

.about-hero[b-chb64lalvq] {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
    gap: 22px;
    margin-bottom: 34px;
}

/* --- AUSGELAGERT/VEREINHEITLICHT am 22.09.2026: Kartenform steht jetzt
   gemeinsam mit Jobs/Leistungen/Kontakt/Referenzen in css/page-showcase.css
   (Klasse "ps-card" im Markup). Radius war bisher 30px statt 28px, Schatten
   "0 16px 38px" statt "0 14px 36px" - im Zuge der Vereinheitlichung (Auftrag
   Frank, 22.09.2026, Punkt 4) jetzt auf denselben Wert wie die anderen
   Buehnen-Seiten angeglichen; der Unterschied ist auf dem Bildschirm kaum
   wahrnehmbar.
.about-hero-copy,
.about-team-card,
.about-timeline-shell {
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(10, 13, 18, 0.98), rgba(24, 30, 38, 0.95));
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
*/

.about-hero-copy[b-chb64lalvq] {
    padding: 32px 32px 30px;
    display: flex;
    flex-direction: column;
}

/* --- AUSGELAGERT am 22.09.2026: Kleinzeilen-Stil (Eyebrow) steht jetzt
   gemeinsam mit Jobs/Leistungen/Kontakt/Referenzen in css/page-showcase.css
   (Klasse "ps-eyebrow" im Markup). Werte waren bereits identisch.
.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffd7cf;
    margin-bottom: 14px;
}

.about-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--about-accent), rgba(237, 32, 36, 0.2));
}
*/

.about-hero-copy h1[b-chb64lalvq],
.about-section-header h2[b-chb64lalvq],
.about-history-header h2[b-chb64lalvq],
.about-team-header h3[b-chb64lalvq],
.about-timeline-stage-copy h3[b-chb64lalvq],
.about-highlight-card h2[b-chb64lalvq] {
    color: #fff;
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.about-hero-copy h1[b-chb64lalvq] {
    font-size: clamp(2rem, 3.45vw, 3.45rem);
    max-width: none;
    width: 100%;
    /* --- ERSETZT am 22.09.2026: "overflow-wrap: anywhere" durfte ein langes Wort
       MITTEN im Wort trennen ("Familienunternehm/en" bei 390px Breite), weil
       "anywhere" Trennstellen ignoriert. Die neue Fassung bricht nur noch an
       Wortgrenzen; ein zu langes Wort bekommt stattdessen per "hyphens: auto"
       einen Trennstrich am Silbenende (wirkt dank lang="de" auf <html> in
       index.html). ---
    overflow-wrap: anywhere;
    hyphens: auto;
    --- */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

.about-hero-copy p[b-chb64lalvq],
.about-section-header p[b-chb64lalvq],
.about-highlight-card p[b-chb64lalvq],
.about-team-body p[b-chb64lalvq],
.about-timeline-stage-copy p[b-chb64lalvq],
.about-history-source[b-chb64lalvq],
.about-history-subtitle[b-chb64lalvq] {
    color: var(--about-muted);
    line-height: 1.72;
}

.about-hero-lead[b-chb64lalvq] {
    margin-top: 16px !important;
    font-size: 1.08rem;
    color: #fff !important;
    max-width: 58ch;
}

.about-hero-copy p + p[b-chb64lalvq] {
    margin-top: 12px;
    max-width: 62ch;
}

.about-hero-metrics[b-chb64lalvq] {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.about-metric-card[b-chb64lalvq] {
    padding: 16px 16px 15px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(20, 26, 33, 0.98), rgba(28, 35, 44, 0.9));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.about-metric-value[b-chb64lalvq] {
    display: block;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.about-metric-label[b-chb64lalvq] {
    display: block;
    margin-top: 6px;
    color: var(--about-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.about-hero-stage[b-chb64lalvq] {
    display: grid;
    gap: 16px;
}

.about-logo-card[b-chb64lalvq] {
    display: grid;
    grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.1fr);
    gap: 18px;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
    align-items: center;
}

.about-logo-card.is-dark-mode[b-chb64lalvq] {
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.16), transparent 36%),
        linear-gradient(145deg, rgba(8, 12, 16, 0.98), rgba(24, 28, 34, 0.96));
}

.about-logo-card.is-light-mode[b-chb64lalvq] {
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.12), transparent 36%),
        linear-gradient(145deg, rgba(246, 248, 251, 0.98), rgba(228, 233, 239, 0.96));
}

.about-logo-image[b-chb64lalvq] {
    width: 100%;
    max-width: 280px;
    justify-self: center;
}

.about-logo-copy[b-chb64lalvq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- AUSGELAGERT am 22.09.2026: Grundform (Zentrierung, Radius, Innenabstand,
   Schriftstaerke, Grossbuchstaben) steht jetzt gemeinsam mit
   Jobs/Leistungen/Kontakt/Referenzen in css/page-showcase.css (Klasse
   "ps-badge" im Markup); width:fit-content und die Schriftgroesse 0.76rem sind
   hier lokal geblieben (identisch mit Jobs).
.about-logo-badge,
.about-highlight-label,
.about-team-role,
.about-timeline-stage-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    width: fit-content;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
*/
.about-logo-badge[b-chb64lalvq],
.about-highlight-label[b-chb64lalvq],
.about-team-role[b-chb64lalvq],
.about-timeline-stage-year[b-chb64lalvq] {
    width: fit-content;
    font-size: 0.76rem;
}

.about-logo-badge[b-chb64lalvq] {
    background: rgba(237, 32, 36, 0.14);
    color: #ed2024;
}

.about-logo-card.is-dark-mode .about-logo-badge[b-chb64lalvq] {
    color: #ffd0d1;
}

.about-capability-list[b-chb64lalvq],
.about-team-focus-list[b-chb64lalvq] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.about-capability-list li[b-chb64lalvq],
.about-team-focus-list li[b-chb64lalvq] {
    position: relative;
    padding-left: 28px;
    line-height: 1.6;
}

.about-logo-card.is-dark-mode .about-capability-list li[b-chb64lalvq] {
    color: #c9d2dd;
}

.about-logo-card.is-light-mode .about-capability-list li[b-chb64lalvq] {
    color: #526172;
}

.about-capability-list li[b-chb64lalvq]::before,
.about-team-focus-list li[b-chb64lalvq]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--about-accent), #991519);
    box-shadow: 0 0 0 4px rgba(237, 32, 36, 0.12);
}

.about-highlight-grid[b-chb64lalvq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* --- AUSGELAGERT am 22.09.2026: Radius/Schatten stehen jetzt gemeinsam mit
   Jobs/Leistungen in css/page-showcase.css (Klasse "ps-card-soft" im Markup);
   Werte waren bereits identisch (var(--about-line) = rgba(255,255,255,0.08)).
   Der eigene Verlauf bleibt lokal, weil er sich von der Jobs-Kachel
   unterscheidet.
.about-highlight-card {
    padding: 22px 22px 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.16), transparent 36%),
        linear-gradient(160deg, rgba(19, 23, 30, 0.98), rgba(26, 33, 42, 0.94));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px var(--about-line);
}
*/
.about-highlight-card[b-chb64lalvq] {
    padding: 22px 22px 20px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.16), transparent 36%),
        linear-gradient(160deg, rgba(19, 23, 30, 0.98), rgba(26, 33, 42, 0.94));
}

/* Foto-Kachel ergaenzt am 22.09.2026 (Auftrag: Bühne mit Foto wie bei
   Jobs/Leistungen/Kontakt/Referenzen). Gleicher Abdunkel-Verlauf wie die
   Jobs-Fotokarten, dieselbe Bildquelle wie "Dein Blick auf den Platz" auf der
   Jobs-Seite; Original bleibt unveraendert liegen. Ueberschreibt bewusst den
   Verlaufs-Hintergrund von .about-highlight-card (mehr Deckkraft noetig, damit
   der Text ueber dem Foto lesbar bleibt). */
.about-photo-turnieralltag[b-chb64lalvq] {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(0deg, rgba(7, 12, 18, 0.98), rgba(7, 12, 18, 0.72) 51%, rgba(7, 12, 18, 0.15) 100%),
        url('/images/jobs/richterturm-muted.jpg') center 55% / cover;
}

/* Ohne diese Zeile bliebe der Absatztext auf dem Foto im gedeckten Grau
   (var(--about-muted)) haengen - auf dem dunklen Foto schlechter lesbar als im
   reinen Verlauf. Gleiches Muster wie bei den Jobs-Fotokarten. */
.about-photo-turnieralltag p[b-chb64lalvq] {
    color: #eef2f6;
}

.about-highlight-label[b-chb64lalvq] {
    background: rgba(237, 32, 36, 0.14);
    color: #ffd0d1;
    margin-bottom: 14px;
}

.about-highlight-card h2[b-chb64lalvq] {
    font-size: 1.36rem;
}

.about-highlight-card p[b-chb64lalvq] {
    margin-top: 12px;
}

.about-section[b-chb64lalvq],
.about-history-section[b-chb64lalvq] {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.about-section-header[b-chb64lalvq],
.about-history-header[b-chb64lalvq] {
    margin-bottom: 22px;
}

.about-section-header h2[b-chb64lalvq],
.about-history-header h2[b-chb64lalvq] {
    font-size: clamp(1.95rem, 3vw, 3.2rem);
}

.about-section-header p[b-chb64lalvq] {
    margin-top: 10px;
    max-width: 72ch;
}

.about-team-grid[b-chb64lalvq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.about-team-card[b-chb64lalvq] {
    overflow: hidden;
    display: grid;
    grid-template-rows: 340px 1fr;
    min-height: 100%;
    height: 100%;
}

.about-team-media[b-chb64lalvq] {
    position: relative;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.18), transparent 36%),
        linear-gradient(145deg, rgba(13, 17, 23, 0.98), rgba(22, 28, 36, 0.96));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 0;
    height: 340px;
    overflow: hidden;
}

.about-team-media.is-placeholder[b-chb64lalvq] {
    display: grid;
    place-items: center;
    padding: 22px;
}

.about-team-media.is-placeholder img[b-chb64lalvq] {
    width: min(100%, 250px);
}

.about-team-media.has-gallery[b-chb64lalvq]  .services-carousel {
    height: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.about-team-media.has-gallery[b-chb64lalvq]  .services-carousel::after {
    background:
        linear-gradient(180deg, rgba(5, 9, 14, 0.08), rgba(5, 9, 14, 0.24) 76%, rgba(5, 9, 14, 0.44)),
        linear-gradient(90deg, rgba(5, 9, 14, 0.16), transparent 38%, rgba(5, 9, 14, 0.16));
}

.about-team-media.has-gallery[b-chb64lalvq]  .services-carousel-slide img {
    object-fit: cover;
    object-position: var(--about-team-image-position, center 18%);
    padding: 0;
    background: transparent;
}

/* Nachbesserung 23.09.2026: Die Bildfläche ist sonst fest 340px (mobil 300px) hoch, bei drei
   Spalten nebeneinander passt das fast genau zum Fotoformat von Sarah (1180x1000). Sobald die
   Karten aber untereinander stehen (Karte wird deutlich breiter als 340px hoch), schnitt
   "object-fit: cover" Kopf und Füße ab. Alternative wäre "object-fit: contain" gewesen, das
   erzeugt bei diesen breiten Kartenformen aber sehr große leere Ränder links und rechts vom
   Foto - schlechter lesbar/wirkt kaputt. Stattdessen bestimmt bei dieser einen Karte
   (".has-fixed-aspect", nur bei Sarah gesetzt) das echte Fotoformat selbst die Höhe der Fläche:
   "height: auto" plus "aspect-ratio" auf dem Karussell (Parameter AspectRatio, siehe
   UeberUns.razor) sorgen dafür, dass das Foto bei jeder Fensterbreite komplett und ohne leere
   Ränder zu sehen ist. Die beiden anderen Karten (Frank, Jan) behalten die feste Höhe. */
.about-team-card.has-fixed-aspect[b-chb64lalvq] {
    grid-template-rows: auto 1fr;
}

.about-team-media.has-fixed-aspect[b-chb64lalvq] {
    height: auto;
}

/* Hinweis "KI-bearbeitet" auf dem Foto von Sarah Steinfort (EU-KI-Verordnung,
   Artikel 50, siehe Kommentar bei ImageNotice in UeberUns.razor.cs). Sitzt als
   normaler Text im Bildbereich (kein Hintergrundbild), damit ihn auch
   Vorleseprogramme erreichen. Liegt dank ".about-team-media { position: relative }"
   direkt über dem Bild bzw. Karussell und bleibt dauerhaft sichtbar - kein
   Hover-Effekt, kein Ausblenden. pointer-events: none, damit der Hinweis nie
   einen Klick auf das darunterliegende Karussell abfaengt. */
.about-team-image-notice[b-chb64lalvq] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(11, 15, 20, 0.72);
    color: #f5f7fa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

.about-team-body[b-chb64lalvq] {
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.about-team-header[b-chb64lalvq] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 14px;
}

.about-team-role[b-chb64lalvq] {
    background: rgba(237, 32, 36, 0.14);
    color: #ffd0d1;
    margin-bottom: 12px;
}

.about-team-header h3[b-chb64lalvq] {
    font-size: 1.42rem;
}

.about-team-since[b-chb64lalvq] {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: right;
    opacity: 0.82;
}

.about-team-focus-list[b-chb64lalvq] {
    margin-top: auto;
}

.about-history-subtitle[b-chb64lalvq] {
    margin-top: 10px !important;
    font-size: 1.08rem;
    letter-spacing: 0.02em;
}

.about-history-source[b-chb64lalvq] {
    margin-top: 14px !important;
    max-width: 68ch;
}

.about-history-quote[b-chb64lalvq] {
    margin: 18px 0 0;
    padding: 22px 24px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 19, 25, 0.96), rgba(24, 31, 39, 0.92));
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.16),
        inset 0 0 0 1px rgba(237, 32, 36, 0.12);
    position: relative;
}

.about-history-quote[b-chb64lalvq]::before {
    content: "\"";
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 3.8rem;
    line-height: 1;
    color: rgba(237, 32, 36, 0.24);
    font-weight: 900;
}

.about-history-quote p[b-chb64lalvq] {
    padding-left: 20px;
    color: #f1f5fa;
    font-size: 1.04rem;
    line-height: 1.72;
}

.about-timeline-shell[b-chb64lalvq] {
    padding: 24px;
}

.about-timeline-toolbar[b-chb64lalvq] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
}

.about-timeline-jump[b-chb64lalvq],
.about-timeline-nav-button[b-chb64lalvq] {
    border: 0;
    border-radius: 999px;
    background: rgba(237, 32, 36, 0.12);
    color: #fff;
    font-weight: 800;
    transition: background-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.about-timeline-jump[b-chb64lalvq] {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-timeline-jump:hover[b-chb64lalvq],
.about-timeline-nav-button:hover[b-chb64lalvq] {
    background: rgba(237, 32, 36, 0.22);
    transform: translateY(-1px);
}

.about-timeline-jump:disabled[b-chb64lalvq],
.about-timeline-nav-button:disabled[b-chb64lalvq] {
    opacity: 0.35;
    transform: none;
    cursor: default;
}

.about-timeline-years[b-chb64lalvq] {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(237, 32, 36, 0.4) transparent;
}

.about-timeline-year[b-chb64lalvq] {
    min-width: 102px;
    padding: 12px 13px 11px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--about-muted);
    text-align: left;
    scroll-snap-align: center;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.about-timeline-year:hover[b-chb64lalvq] {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.about-timeline-year span[b-chb64lalvq],
.about-timeline-year small[b-chb64lalvq] {
    display: block;
}

.about-timeline-year span[b-chb64lalvq] {
    font-size: 1rem;
    font-weight: 800;
    color: inherit;
}

.about-timeline-year small[b-chb64lalvq] {
    margin-top: 4px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.82;
}

.about-timeline-year.is-active[b-chb64lalvq] {
    background: rgba(237, 32, 36, 0.12);
    border-color: rgba(237, 32, 36, 0.32);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(237, 32, 36, 0.16);
}

.about-timeline-stage[b-chb64lalvq] {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: 22px;
    align-items: start;
}

.about-timeline-stage-media[b-chb64lalvq] {
    min-width: 0;
}

.about-timeline-stage-media.is-white-surface[b-chb64lalvq]  .services-carousel {
    background: #fff;
}

.about-timeline-stage-media.is-white-surface[b-chb64lalvq]  .services-carousel::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.16));
}

.about-timeline-stage-copy[b-chb64lalvq] {
    padding: 24px 24px 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(12, 16, 22, 0.98), rgba(23, 29, 37, 0.94));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.about-timeline-stage-head[b-chb64lalvq] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

.about-timeline-stage-year[b-chb64lalvq] {
    margin-bottom: 12px;
    background: rgba(237, 32, 36, 0.14);
    color: #ffd0d1;
}

.about-timeline-stage-copy h3[b-chb64lalvq] {
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);
    max-width: 14ch;
}

.about-timeline-stage-index[b-chb64lalvq] {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.62;
    white-space: nowrap;
}

.about-timeline-stage-copy p + p[b-chb64lalvq] {
    margin-top: 12px;
}

.about-timeline-image-hint[b-chb64lalvq] {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #d9dfe7;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-history-placeholder[b-chb64lalvq] {
    min-height: clamp(260px, 35vw, 520px);
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 10px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.18), transparent 36%),
        linear-gradient(145deg, rgba(14, 18, 24, 0.98), rgba(24, 31, 40, 0.94));
    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.about-history-placeholder[b-chb64lalvq]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 9, 14, 0.04), rgba(5, 9, 14, 0.44) 74%, rgba(5, 9, 14, 0.72)),
        linear-gradient(90deg, rgba(5, 9, 14, 0.6), transparent 42%, rgba(5, 9, 14, 0.12));
    pointer-events: none;
}

.about-history-placeholder > *[b-chb64lalvq] {
    position: relative;
    z-index: 1;
}

.about-history-placeholder-year[b-chb64lalvq] {
    display: block;
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.16);
    line-height: 0.92;
}

.about-history-placeholder strong[b-chb64lalvq] {
    font-size: 1.3rem;
    color: #fff;
    max-width: 14ch;
    line-height: 1.1;
}

.about-history-placeholder p[b-chb64lalvq] {
    max-width: 28ch;
    color: #d0d8e2;
    line-height: 1.55;
}

.about-timeline-footer[b-chb64lalvq] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
}

.about-timeline-nav-button[b-chb64lalvq] {
    min-height: 42px;
    padding: 0 18px;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.about-timeline-progress-shell[b-chb64lalvq] {
    position: relative;
    padding-top: 4px;
}

.about-timeline-progress-labels[b-chb64lalvq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    margin-bottom: 12px;
    color: var(--about-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    gap: 12px;
}

.about-timeline-progress-labels span:first-child[b-chb64lalvq] {
    text-align: left;
}

.about-timeline-progress-labels span:nth-child(2)[b-chb64lalvq] {
    text-align: center;
    color: #fff;
}

.about-timeline-progress-labels span:last-child[b-chb64lalvq] {
    text-align: right;
}

.about-timeline-progress[b-chb64lalvq] {
    position: relative;
    height: 74px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.about-timeline-progress-line[b-chb64lalvq] {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.about-timeline-progress-fill[b-chb64lalvq] {
    position: absolute;
    top: 50%;
    left: 0;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--about-accent), var(--about-accent-soft));
    transform: translateY(-50%);
    transition: width 220ms ease;
}

.about-timeline-progress-current[b-chb64lalvq] {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    min-width: 112px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 12px 8px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.18), transparent 44%),
        linear-gradient(145deg, rgba(9, 12, 17, 0.98), rgba(22, 28, 36, 0.95));
    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.about-timeline-progress-current.is-edge-start[b-chb64lalvq] {
    transform: translate(0, -50%);
}

.about-timeline-progress-current.is-edge-end[b-chb64lalvq] {
    transform: translate(-100%, -50%);
}

.about-timeline-progress-current strong[b-chb64lalvq],
.about-timeline-progress-current small[b-chb64lalvq] {
    display: block;
    line-height: 1;
}

.about-timeline-progress-current strong[b-chb64lalvq] {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.about-timeline-progress-current small[b-chb64lalvq] {
    color: #d6dde7;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.about-timeline-stage-media[b-chb64lalvq]  .services-carousel-slide img {
    object-fit: contain;
    padding: 20px;
    background: rgba(6, 9, 13, 0.44);
}

@media (max-width: 1149.98px) {
    .about-hero[b-chb64lalvq],
    .about-timeline-stage[b-chb64lalvq] {
        grid-template-columns: 1fr;
    }

    .about-team-grid[b-chb64lalvq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 899.98px) {
    .about-hero-metrics[b-chb64lalvq],
    .about-highlight-grid[b-chb64lalvq],
    .about-logo-card[b-chb64lalvq] {
        grid-template-columns: 1fr;
    }

    .about-timeline-toolbar[b-chb64lalvq],
    .about-timeline-footer[b-chb64lalvq] {
        grid-template-columns: 1fr;
    }

    .about-timeline-jump[b-chb64lalvq] {
        display: none;
    }

    .about-timeline-stage-head[b-chb64lalvq] {
        flex-direction: column;
    }

    .about-timeline-stage-copy h3[b-chb64lalvq] {
        max-width: none;
    }

    .about-timeline-progress-labels[b-chb64lalvq] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .about-timeline-progress-labels span:first-child[b-chb64lalvq],
    .about-timeline-progress-labels span:nth-child(2)[b-chb64lalvq],
    .about-timeline-progress-labels span:last-child[b-chb64lalvq] {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .about-page-shell[b-chb64lalvq] {
        padding: 18px 14px 56px;
    }

    .about-hero-copy[b-chb64lalvq],
    .about-team-card[b-chb64lalvq],
    .about-timeline-shell[b-chb64lalvq],
    .about-logo-card[b-chb64lalvq],
    .about-highlight-card[b-chb64lalvq],
    .about-history-quote[b-chb64lalvq],
    .about-timeline-stage-copy[b-chb64lalvq],
    .about-history-placeholder[b-chb64lalvq] {
        border-radius: 22px;
    }

    .about-hero-copy[b-chb64lalvq] {
        padding: 24px 18px 24px;
    }

    .about-logo-card[b-chb64lalvq],
    .about-highlight-card[b-chb64lalvq],
    .about-timeline-shell[b-chb64lalvq] {
        padding: 20px 18px;
    }

    .about-team-body[b-chb64lalvq],
    .about-timeline-stage-copy[b-chb64lalvq] {
        padding: 20px 18px;
    }

    .about-team-media[b-chb64lalvq] {
        height: 300px;
    }

    .about-team-media.is-placeholder[b-chb64lalvq] {
        padding: 18px;
    }

    .about-hero-copy h1[b-chb64lalvq] {
        max-width: none;
        font-size: clamp(2.1rem, 11vw, 3.3rem);
        /* --- ERSETZT am 22.09.2026 (Fund vom Auftraggeber, nachgemessen im Handy-
           Breitenbild 390px): Diese Regel im Mobil-Block ueberschrieb die Korrektur
           in der Grundregel weiter oben erneut mit "anywhere" - "Familienunternehm/en"
           brach dadurch weiterhin mitten im Wort um. "normal" laesst jetzt "hyphens:
           auto" aus der Grundregel wirken: ein zu langes Wort bekommt einen
           Trennstrich am Silbenende statt mittendrin zu zerreissen. ---
        overflow-wrap: anywhere;
        --- */
        overflow-wrap: normal;
    }

    .about-section[b-chb64lalvq],
    .about-history-section[b-chb64lalvq] {
        margin-top: 28px;
        padding-top: 24px;
    }

    .about-timeline-year[b-chb64lalvq] {
        min-width: 92px;
    }

    .about-timeline-stage-media[b-chb64lalvq]  .services-carousel-slide img {
        padding: 12px;
    }
}
/* /Pages/Videowall.razor.rz.scp.css */
/* =====================================================================================
   Videowall mieten - Seiten-CSS der Blazor-Seite Pages/Videowall.razor

   HERKUNFT: Das ist das <style>-Blatt der früheren statischen Seite
   wwwroot/videowall/index.html (Kopie: railway/ersetzt/videowall-index.html). Seit 1.1.75 ist
   /videowall/ eine normale Blazor-Seite im gewöhnlichen Layout (Menü + Fuß); Farben, Abstände,
   Rundungen und Medienabfragen sind unverändert übernommen.

   WIE ES WIRKT: Dieses Blatt gehört zur Komponente (Blazor "CSS-Isolation"): Blazor hängt an jedes
   Element der Seite ein Kennzeichen und an jeden Selektor unten das passende Gegenstück. Die Regeln
   gelten also nur für Elemente dieser einen Seite und färben nicht auf andere Seiten ab.

   DREI ANPASSUNGEN GEGENÜBER DER ALTEN DATEI:
   1. Alle Klassennamen tragen das Präfix "vw-" (.btn -> .vw-btn, .hero -> .vw-hero ...). Grund: Die
      allgemeinen Stylesheets der Anwendung (css/app.css, css/mud-compat.css, css/page-showcase.css)
      benutzen ähnliche Namen - z. B. gibt es in app.css ein .btn-primary mit blauer Farbe. Ohne
      Präfix würden sich die Regeln gegenseitig stören. (Ids wie "kontakt" tragen KEIN Präfix: sie sind
      Sprungziele der Links und stehen nicht in diesem Blatt.)
   2. Was früher an :root, html, body und * hing, hängt jetzt am äußeren Rahmen .vw-seite
      (Farbvariablen, Hintergrund, Schrift, Zeilenhöhe, box-sizing). Das Layout der Anwendung bleibt
      dadurch unangetastet.
   3. JEDE Regel beginnt mit ".vw-seite ". Grund: Dieses Blatt wird in der Seite VOR css/app.css und
      css/mud-compat.css geladen. Bei gleicher Gewichtung gewinnt dann das spätere, also das
      allgemeine Blatt - z. B. färbt mud-compat.css besuchte Links ("a:visited") mit der Hauptfarbe
      der Anwendung. Mit dem Rahmen vorweg wiegt jede Regel hier einen Schritt schwerer. Weil das für
      ALLE Regeln gleich gilt, bleibt die Rangfolge untereinander wie in der alten Datei erhalten
      (z. B. schlägt ".vw-btn-primary" weiterhin die allgemeine Link-Regel "a").

   ENTFALLEN sind die Regeln für Teile der alten Datei, die es in der Blazor-Seite nicht mehr gibt,
   weil Menü und Fuß jetzt vom Layout kommen: .skip-link (Sprunglink), .site-header mit .logo-link und
   .home-link (eigener Seitenkopf), .site-footer (eigener Seitenfuß) samt der Handy-Regel, die den
   Logo-Schriftzug ausblendete. Die Medienabfragen unten sind sonst unverändert.
   ===================================================================================== */

/* =====================================================================================
   Farben (dunkel wie die Homepage) und Kontrast nach WCAG AA.
   Berechnet aus den echten Werten (verlangt: Fließtext 4,5 : 1, große Schrift und Knöpfe 3 : 1):
     Fließtext  #eef2f6 auf #121212 = 16,7 : 1 | auf Karte #181d24 = 15,1 : 1
                | auf Kopf/Fuß #0c0e12 = 17,2 : 1 | auf Kopfbereich #0a0d12 bis #181e26 = 14,9 bis 17,3 : 1
     Nebentext  #aeb8c5 auf #121212 = 9,3 : 1 | auf Karte = 8,4 : 1 | auf Kopfbereich = 8,4 bis 9,7 : 1
     Kleinzeile #ffd7cf auf #121212 = 14,2 : 1 | auf Karte = 12,8 : 1 | auf Kopfbereich = 12,7 bis 14,7 : 1
     Knopf rot  #ffffff auf #c81b1f = 5,8 : 1 (beim Überfahren #a9161a = 7,5 : 1)
     Knopf weiß umrandet: Schrift und Rand #ffffff auf #121212 = 18,7 : 1
   Das iTS-Rot #ed2024 hat auf #121212 nur 4,3 : 1 (auf der Karte 3,9 : 1) und wird deshalb
   NIE für Text benutzt, nur für Zierelemente (Strich vor Überschriften, Punkte der Liste,
   Unterstreichung der Links). Zierelemente brauchen mindestens 3 : 1 - erfüllt.
   ===================================================================================== */

/* Äußerer Rahmen der Seite: trägt die Farbvariablen (früher :root), den Seitenhintergrund und die
   Grundschrift (früher body). Der Hintergrund liegt hier am Rahmen, weil die Seite jetzt im
   Layout der Anwendung steht und nicht mehr die ganze Browserseite besitzt. */
.vw-seite[b-7g79o7frc0] {
    --bg: #121212;
    --band: #0c0e12;
    --card: #181d24;
    --text: #eef2f6;
    --muted: #aeb8c5;
    --eyebrow: #ffd7cf;
    --accent: #ed2024;
    --accent-strong: #c81b1f;
    --line: rgba(255, 255, 255, 0.14);

    width: 100%;
    background: var(--bg);
    color: var(--text);
    /* --- ERSETZT am 2026-10-19 (1.1.76): font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
       Grund: Der Name "Roboto" gehört auch Radzens 730-KB-Schrift RobotoFlex (die hier als ERSTE Schrift sogar am
       Windows-PC geladen würde); "iTS Roboto" ist die eigene, kleine Schrift (fonts/roboto.css). --- */
    font-family: "iTS Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

/* Früher "* { box-sizing: border-box }": gilt jetzt für den Rahmen und alles darin. */
.vw-seite[b-7g79o7frc0],
.vw-seite *[b-7g79o7frc0] {
    box-sizing: border-box;
}

.vw-seite img[b-7g79o7frc0] {
    display: block;
    max-width: 100%;
    height: auto;
}

.vw-seite a[b-7g79o7frc0] {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.vw-seite a:hover[b-7g79o7frc0] {
    text-decoration-color: var(--text);
}

/* Sichtbarer Tastatur-Fokus. Die helle Farbe hat auf dem dunklen Grund weit mehr als 3 : 1. */
.vw-seite a:focus-visible[b-7g79o7frc0] {
    outline: 3px solid var(--eyebrow);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ENTFALLEN (siehe Kopf): .skip-link - das Layout der Anwendung hat seine eigene Navigation. */

.vw-seite .vw-wrap[b-7g79o7frc0] {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 16px;
}

/* ENTFALLEN (siehe Kopf): "Kopfzeile" mit .site-header, .logo-link, .home-link - Kopf und Menü
   kommen jetzt vom Layout. */

/* ---------- Kopfbereich der Seite ---------- */
.vw-seite .vw-hero[b-7g79o7frc0] {
    padding: 40px 0 32px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.16), transparent 40%),
        linear-gradient(145deg, #0a0d12, #181e26);
    border-bottom: 1px solid var(--line);
}

.vw-seite .vw-eyebrow[b-7g79o7frc0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--eyebrow);
}

.vw-seite .vw-eyebrow[b-7g79o7frc0]::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), rgba(237, 32, 36, 0.2));
}

.vw-seite h1[b-7g79o7frc0] {
    margin: 0 0 16px;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text);
    /* Umbruch nur an Wortgrenzen bzw. mit Trennstrich, nie mitten im Wort. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

.vw-seite h2[b-7g79o7frc0] {
    margin: 0 0 14px;
    padding-left: 12px;
    border-left: 4px solid var(--accent);
    font-size: 1.4rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text);
}

.vw-seite h3[b-7g79o7frc0] {
    margin: 0 0 8px;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text);
}

.vw-seite p[b-7g79o7frc0] {
    margin: 0 0 1rem;
}

.vw-seite .vw-lead[b-7g79o7frc0] {
    max-width: 46rem;
    font-size: 1.05rem;
    color: var(--text);
}

.vw-seite .vw-muted[b-7g79o7frc0] {
    color: var(--muted);
}

/* ---------- Knöpfe ---------- */
.vw-seite .vw-actions[b-7g79o7frc0] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.vw-seite .vw-btn[b-7g79o7frc0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.vw-seite .vw-btn-primary[b-7g79o7frc0] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
}

.vw-seite .vw-btn-primary:hover[b-7g79o7frc0] {
    background: #a9161a;
    border-color: #a9161a;
}

.vw-seite .vw-btn-secondary[b-7g79o7frc0] {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.vw-seite .vw-btn-secondary:hover[b-7g79o7frc0] {
    background: rgba(255, 255, 255, 0.12);
}

/* ---------- Abschnitte ---------- */
.vw-seite section[b-7g79o7frc0] {
    padding: 32px 0 8px;
}

.vw-seite .vw-card[b-7g79o7frc0] {
    border-radius: 24px;
    padding: 22px 20px;
    background:
        radial-gradient(circle at top right, rgba(237, 32, 36, 0.1), transparent 34%),
        var(--card);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.vw-seite .vw-check-list[b-7g79o7frc0] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.vw-seite .vw-check-list li[b-7g79o7frc0] {
    position: relative;
    padding-left: 30px;
}

/* Haken als Zierzeichen vor jedem Listenpunkt; der Text daneben trägt die Aussage. */
.vw-seite .vw-check-list li[b-7g79o7frc0]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

.vw-seite .vw-wall-grid[b-7g79o7frc0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 16px;
}

.vw-seite .vw-wall-card[b-7g79o7frc0] {
    display: flex;
    flex-direction: column;
}

.vw-seite .vw-wall-card p[b-7g79o7frc0] {
    color: var(--text);
}

.vw-seite .vw-wall-card dl[b-7g79o7frc0] {
    margin: auto 0 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.vw-seite .vw-wall-card dt[b-7g79o7frc0] {
    color: var(--muted);
}

/* Werte wie "4,48 m × 2,56 m" nie mitten in der Angabe umbrechen. */
.vw-seite .vw-wall-card dd[b-7g79o7frc0] {
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

.vw-seite .vw-gallery[b-7g79o7frc0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
    margin: 0;
}

.vw-seite .vw-gallery figure[b-7g79o7frc0] {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--card);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.vw-seite .vw-gallery img[b-7g79o7frc0] {
    width: 100%;
    height: auto;
}

.vw-seite .vw-gallery figcaption[b-7g79o7frc0] {
    padding: 10px 14px 12px;
    font-size: 0.95rem;
    color: var(--muted);
}

.vw-seite .vw-contact-card address[b-7g79o7frc0] {
    margin: 0 0 1rem;
    font-style: normal;
}

.vw-seite .vw-contact-card .vw-big[b-7g79o7frc0] {
    font-size: 1.15rem;
    font-weight: 700;
}

.vw-seite .vw-more[b-7g79o7frc0] {
    padding: 24px 0 40px;
}

/* ENTFALLEN (siehe Kopf): "Fußzeile" mit .site-footer samt .wrap und nav - der Fuß kommt jetzt vom
   Layout. */

/* ---------- Größere Bildschirme ---------- */
@media (min-width: 700px) {
    .vw-seite .vw-wrap[b-7g79o7frc0] {
        padding: 0 28px;
    }

    .vw-seite .vw-hero[b-7g79o7frc0] {
        padding: 56px 0 44px;
    }

    .vw-seite h1[b-7g79o7frc0] {
        font-size: 2.4rem;
    }

    .vw-seite h2[b-7g79o7frc0] {
        font-size: 1.7rem;
    }

    .vw-seite .vw-card[b-7g79o7frc0] {
        padding: 28px;
    }

    .vw-seite section[b-7g79o7frc0] {
        padding: 44px 0 8px;
    }
}

/* ENTFALLEN (siehe Kopf): Handy-Regel (max-width: 420px), die den Logo-Schriftzug im alten Seitenkopf
   ausblendete - den Seitenkopf gibt es hier nicht mehr. */

/* NEU in der Blazor-Seite: Sprungziele (Knöpfe "Unsere Videowalls ansehen" und "Preis und Verfügbarkeit anfragen")
   landen unter der festen Kopfleiste der Anwendung (56 px hoch), wenn sie ganz oben am Fensterrand anliegen. Der
   Abstand schiebt den Abschnitt darunter. Die alte statische Seite hatte keine feste Kopfleiste. */
.vw-seite section[id][b-7g79o7frc0] {
    scroll-margin-top: 72px;
}