@import '_content/FJ.Shared/FJ.Shared.kvnigenfwr.bundle.scp.css';

/* /Components/Base/RegistrationFields.razor.rz.scp.css */
/* Umschaltflächen ohne Großbuchstaben und in Daumenhöhe, Chips etwas höher. ::deep, weil MudBlazor die Elemente
   zeichnet und sie deshalb kein Scope-Attribut tragen - der Anker ist das eigene div außen. */
.registration-form[b-nqnc03snfr]  .mud-toggle-item {
    text-transform: none;
    min-height: 44px;
    font-weight: 500;
}

.registration-form[b-nqnc03snfr]  .mud-chip {
    height: 36px;
    font-size: 0.95rem;
}
/* /Components/Dialogs/RegistrationDialog.razor.rz.scp.css */
/* Die getönte Fläche neben dem Formular in der Farbe des Themas - im dunklen Schema die hellere. */
.registration-panel[b-gqixojefak] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-radius: 20px;
}
/* /Components/Layout/AccountMenu.razor.rz.scp.css */
/* Der Avatar in der Leiste: Anders als in der Immobilienverwaltung ist die Leiste hier farbig (Primärfarbe) -
   ein Avatar in Color.Primary verschwände darin, nur die Initiale bliebe stehen. Deshalb halbtransparent
   mit Rand in der Schriftfarbe der Leiste; das stimmt im hellen (orange) wie im dunklen Schema. MudBlazor hat
   dafür keine Farbe: Outlined gibt es nur für die Palettenfarben, nicht für Inherit. */
.account-menu[b-iaaskhzy4m]  .account-avatar {
    color: inherit;
    background-color: rgb(255 255 255 / 0.18);
    border: 2px solid currentColor;
}
/* /Components/Layout/AppTitle.razor.rz.scp.css */
/* min-width: 0, sonst gibt das Flex-Item in der Leiste nie nach und die Auslassungspunkte greifen nicht. */
.app-title[b-0p5gal1uu0] {
    min-width: 0;
}

.app-title[b-0p5gal1uu0]  .mud-typography {
    font-size: clamp(0.95rem, 4.2vw, 1.25rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Layout/PrintLayout.razor.rz.scp.css */
/* Eine Seite A4 mit 10 mm Rand - der Aushang (Poster.razor.css) ist genau auf die verbleibende Fläche gebaut. */
@page {
    size: A4;
    margin: 10mm;
}

@media print {
    /* Knöpfe und Hinweise (print-hidden) - und alle Popover: Wer auf „Drucken" klickt, hat den Mauszeiger
       noch über dem Knopf, und dessen Tooltip stand sonst mit auf dem Papier. */
    .print-layout[b-u29as807fz]  .print-hidden,
    .print-layout[b-u29as807fz]  .mud-popover-provider {
        display: none !important;
    }

    /* Der Rand kommt von @page; der Container brächte seinen eigenen Innenabstand dazu. */
    .print-layout[b-u29as807fz]  .mud-container {
        max-width: none;
        padding: 0;
    }
}
/* /Components/Pages/Competition.razor.rz.scp.css */
/* Eigenes CSS nur, wo MudBlazor keinen Baustein hat: der Farbverlauf des Kopfes, die halbdurchsichtigen Chips darauf
   und der Infotext, der als Markup aus dem Editor kommt (MudBlazor setzt Abstände und Aufzählungszeichen zurück).
   ::deep, weil MudPaper, MudChip und das eingesetzte Markup kein Scope-Attribut tragen - der Anker ist das div
   .competition außen um die Seite bzw. .race-info um den Infotext. */

.competition[b-mti88w6w5e]  .race-hero {
    /* Die Farben des Zeichens fest und nicht aus der Palette: Im dunklen Schema ist das Primär-Orange heller,
       und weiße Schrift darauf wäre nicht mehr zu lesen. */
    background: linear-gradient(135deg, #EA580C 0%, #C2410C 55%, #9A3412 100%);
    color: #fff;
    border-radius: 20px;
}

.competition[b-mti88w6w5e]  .race-hero .race-hero__chip {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    margin: 0;
}

/* Der Knopf für die Disziplinen sieht aus wie die Chips daneben - halbdurchsichtig, rund, ohne Großbuchstaben -, damit
   er sich in die Reihe einfügt und trotzdem als Knopf erkennbar bleibt (Pfeil, Hover). */
/* Höhe und Schrift wie ein kleiner Chip (24 px): Mit der Höhe eines kleinen Knopfs (knapp 31 px) saß er in der Reihe
   sichtbar tiefer als die Chips daneben (gemessen am 2026-09-15). */
.competition[b-mti88w6w5e]  .race-hero .race-hero__toggle {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 16px;
    text-transform: none;
    height: 24px;
    min-height: 24px;
    padding-block: 0;
    padding-inline: 10px;
    font-size: 0.8125rem;
    line-height: 1;
}

.competition[b-mti88w6w5e]  .race-hero .race-hero__toggle:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Die Angaben nach der Anmeldung: dieselbe Tönung wie die Einleitung im Anmelde-Dialog, damit sie als Bestätigung
   liest und nicht als Formular. */
.competition[b-mti88w6w5e]  .confirmation-details {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    border-radius: 16px;
}

.competition[b-mti88w6w5e]  .race-card {
    border-radius: 20px;
}

.race-info[b-mti88w6w5e]  p,
.race-info[b-mti88w6w5e]  ul,
.race-info[b-mti88w6w5e]  ol,
.race-info[b-mti88w6w5e]  blockquote {
    margin-bottom: 0.5rem;
}

.race-info[b-mti88w6w5e]  ul,
.race-info[b-mti88w6w5e]  ol {
    padding-left: 1.5rem;
    list-style: revert;
}

/* Quill schreibt Aufzählungen als <ol> mit data-list="bullet". */
.race-info[b-mti88w6w5e]  li[data-list="bullet"] {
    list-style-type: disc;
}

.race-info[b-mti88w6w5e]  a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.race-info[b-mti88w6w5e]  > :last-child {
    margin-bottom: 0;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Eine zentrierte Karte statt loser Zeilen auf leerem Grund. Farben über die Palettenvariablen von MudBlazor,
   damit hell und dunkel ohne eigene Regeln stimmen. */
.home[b-513udw57zl] {
    max-width: 560px;
    margin: 16px auto 0;
}

@media (min-width: 600px) {
    .home[b-513udw57zl] {
        margin-top: 48px;
    }
}

.home[b-513udw57zl]  .home__card {
    overflow: hidden;
    border-radius: 20px;
}

/* Oben ein leiser Hauch des Orange, der nach unten ausläuft - hebt Logo, Name und Bild ab, ohne laut zu sein. */
.home__hero[b-513udw57zl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 24px 8px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0%,
        transparent 100%);
}

.home__hero[b-513udw57zl]  .home__logo {
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent));
}

/* "Wettkampfanmeldung" ist ein einziges langes Wort: Auf 360 px lief es aus der Karte. Kleiner werdend und notfalls
   getrennt (html lang="de" liefert die Trennregeln). */
.home__hero[b-513udw57zl]  .home__title {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.125rem);
    font-weight: 700;
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.home[b-513udw57zl]  .home__content {
    padding: 16px 24px 28px;
}

.home[b-513udw57zl]  .home__path-title {
    font-weight: 600;
    line-height: 1.3;
}

.home__path-icon[b-513udw57zl] {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
/* /Components/Pages/Poster.razor.rz.scp.css */
/* Der Aushang als Blatt A4. Die Fläche ist 190 x 277 mm - A4 abzüglich des 10-mm-Rands aus PrintLayout.razor.css.
   Auf dem Bildschirm dieselben Proportionen als Vorschau mit Schatten, damit man sieht, was aus dem Drucker kommt. */
.poster[b-1qd32emmzo] {
    width: min(100%, 190mm);
    aspect-ratio: 190 / 277;
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: #1c1917;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
    /* Ohne das lässt der Browser Hintergründe weg - das Band und die Chips kämen weiß aus dem Drucker. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.poster__band[b-1qd32emmzo] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    color: #fff;
    /* Der Verlauf des Zeichens (wwwroot/logo.svg), dunkles Ende links - dort steht der Name. */
    background: linear-gradient(120deg, #9a3412 0%, #c2410c 55%, #ea580c 100%);
}

.poster__logo[b-1qd32emmzo] {
    flex: none;
    width: 88px;
    height: 88px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 16px;
}

.poster__logo[b-1qd32emmzo]  .poster__logo-image {
    max-width: 100%;
    max-height: 100%;
}

.poster__heading[b-1qd32emmzo] {
    min-width: 0;
}

.poster__heading[b-1qd32emmzo]  .poster__title {
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

/* Der Rumpf nimmt, was zwischen Band und Fuß bleibt - und läuft nie über: Was nicht passt, holt sich der QR-Code
   zurück, und der Fuß bleibt in jedem Fall stehen. */
.poster__body[b-1qd32emmzo] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 12px;
    padding: 16px 28px;
}

/* Nichts im Rumpf schrumpft - außer dem Code. ::deep, weil Text, Chips und Stapel MudBlazor-Bausteine sind. */
.poster__body[b-1qd32emmzo]  > * {
    flex: none;
}

.poster__body[b-1qd32emmzo]  .poster__call {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Das eine Element, das schrumpft. In der Spalte ist die Höhe die Hauptachse; das Seitenverhältnis 1 : 1 leitet die
   Breite daraus ab. Höchstens gut 10 cm, mindestens 7 cm - kleiner liest ihn aus ein paar Metern kein Handy mehr. */
.poster__body > .poster__qr[b-1qd32emmzo] {
    flex: 0 1 105mm;
    min-height: 70mm;
    aspect-ratio: 1;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 4px solid #c2410c;
    border-radius: 20px;
    background: #fff;
}

.poster__qr[b-1qd32emmzo]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

.poster__steps[b-1qd32emmzo] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.poster__step[b-1qd32emmzo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.poster__step-icon[b-1qd32emmzo] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(194 65 12 / 0.1);
}

.poster__step[b-1qd32emmzo]  .poster__step-text {
    font-size: 1.05rem;
    line-height: 1.25;
}

/* Disziplinen und Meldeschluss sollen aus ein paar Metern lesbar sein - größer als ein Chip am Bildschirm. */
.poster__body[b-1qd32emmzo]  .poster__chip {
    height: 40px;
    padding: 0 18px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* --- Viele Disziplinen (9 bis 16): Chips, Schritte und Aufruf eine Stufe kleiner. --- */
.poster--compact .poster__body[b-1qd32emmzo] {
    gap: 10px;
    padding: 12px 24px;
}

.poster--compact .poster__body[b-1qd32emmzo]  .poster__call {
    font-size: 3rem;
}

.poster--compact .poster__step-icon[b-1qd32emmzo] {
    width: 52px;
    height: 52px;
}

.poster--compact .poster__step[b-1qd32emmzo]  .poster__step-text {
    font-size: 0.95rem;
}

.poster--compact .poster__body[b-1qd32emmzo]  .poster__chip {
    height: 32px;
    padding: 0 12px;
    margin: 2px;
    font-size: 0.95rem;
}

/* --- Sehr viele Disziplinen (ab 17): Schritte in einer Zeile nebeneinander, Chips klein und dicht. --- */
.poster--dense .poster__body[b-1qd32emmzo] {
    gap: 8px;
    padding: 10px 20px;
}

.poster--dense .poster__body[b-1qd32emmzo]  .poster__call {
    font-size: 2.5rem;
}

.poster--dense .poster__steps[b-1qd32emmzo] {
    gap: 8px;
}

.poster--dense .poster__step[b-1qd32emmzo] {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
}

.poster--dense .poster__step-icon[b-1qd32emmzo] {
    flex: none;
    width: 40px;
    height: 40px;
}

.poster--dense .poster__step[b-1qd32emmzo]  .poster__step-text {
    font-size: 0.9rem;
    text-align: left;
}

.poster--dense .poster__body[b-1qd32emmzo]  .poster__events {
    gap: 4px;
}

.poster--dense .poster__body[b-1qd32emmzo]  .poster__chip {
    height: 26px;
    padding: 0 10px;
    margin: 1px;
    font-size: 0.85rem;
}

/* Der Meldeschluss bleibt auch dicht gesetzt auffällig - er ist die eine Frist auf dem Blatt. */
.poster--dense .poster__body[b-1qd32emmzo]  .poster__deadline {
    height: 32px;
    font-size: 0.95rem;
}

.poster__footer[b-1qd32emmzo] {
    flex: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 28px 16px;
    border-top: 1px solid #e7e5e4;
    background: #fafaf9;
}

.poster__link[b-1qd32emmzo] {
    min-width: 0;
}

.poster__link[b-1qd32emmzo]  .poster__url {
    font-weight: 500;
    word-break: break-all;
}

.poster__footer[b-1qd32emmzo]  .poster__brand {
    flex: none;
}

@media print {
    /* Genau die Seite füllen: feste Höhe statt Seitenverhältnis, kein Schatten, kein Abstand -
       ein Millimeter zu viel, und der Fuß wanderte auf eine zweite Seite. */
    .poster[b-1qd32emmzo] {
        width: 100%;
        height: 276mm;
        aspect-ratio: auto;
        margin: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    /* Auf Papier ist der Link Text - ohne Unterstreichung, in der Farbe des Fußes. */
    .poster__link[b-1qd32emmzo]  .poster__url {
        text-decoration: none;
    }
}

/* Auf dem Handy nur Vorschau - dort druckt niemand, aber die Seite soll nicht zerfallen. */
@media screen and (max-width: 599.98px) {
    .poster[b-1qd32emmzo] {
        aspect-ratio: auto;
    }

    .poster__body[b-1qd32emmzo] {
        overflow: visible;
    }

    .poster__steps[b-1qd32emmzo] {
        grid-template-columns: 1fr;
    }
}