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

/* /Components/Base/DialogIntroPanel.razor.rz.scp.css */
/* Die getönte Fläche neben dem Inhalt in der Farbe des Themas - im dunklen Schema die hellere. Sie trennt Einleitung und
   Inhalt ohne eine weitere Linie. */
.dialog-intro-panel[b-0vqcawb3y8] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-radius: 20px;
}
/* /Components/Base/RaceInfoPanel.razor.rz.scp.css */
/* Die Ablagefläche für Dokumente. position:relative ist der Kern: Das versteckte <InputFile> von MudBlazor legt
   sich per position:absolute über seinen nächsten positionierten Vorfahren - ohne diese Zeile spannte es sich über
   irgendetwas weiter oben auf und finge den Drop woanders. Die Zwischenebenen von MudFileUpload sind
   display:contents und bilden selbst keine Fläche, deshalb steht es hier und nicht dort.

   ::deep, weil MudFileUpload das Element mit der Klasse selbst zeichnet. */
.race-documents-host[b-2pmqdg8x8i]  .race-documents {
    display: block;
    width: 100%;
}

.race-documents-host[b-2pmqdg8x8i]  .race-documents__area {
    position: relative;
    border: 2px dashed transparent;
    border-radius: 8px;
    padding: 8px;
    transition: border-color 120ms, background-color 120ms;
}

/* Beim Ziehen sichtbar werden: Ohne Rückmeldung weiß niemand, ob die Fläche die Datei überhaupt annimmt. */
.race-documents-host[b-2pmqdg8x8i]  .race-documents__area--dragging {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* Nur die Liste scrollt (siehe CLAUDE.md). Der Reiter selbst scrollt nicht mehr (RaceDialog); dieser Wurzel-Block ist
   das Flex-Item im Reiter. Schmal (Telefon, Spalten untereinander) scrollt er als Ganzes - ein Formular mit Editor,
   Logo und Dokumenten lässt sich dort nicht sinnvoll in feste Bereiche teilen. */
.race-info[b-2pmqdg8x8i] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Ab mittlerer Breite (Spalten nebeneinander): Der Block scrollt nicht, jede Spalte bekommt die volle Höhe. Links
   scrollt der Infotext, rechts bleibt der Logo-Bereich stehen, und in den Dokumenten scrollt nur die Liste unter ihrem
   Kopf. Die Kette läuft über die Ablagefläche: MudFileUpload und seine Zwischenebenen (display: contents) bis zur
   Fläche mit der ScrollListSection darin. */
@media (min-width: 960px) {
    .race-info[b-2pmqdg8x8i] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .race-info[b-2pmqdg8x8i]  .race-info__grid {
        flex: 1 1 auto;
        min-height: 0;
        flex-wrap: nowrap;
    }

    .race-info[b-2pmqdg8x8i]  .race-info__text {
        overflow-y: auto;
    }

    .race-info[b-2pmqdg8x8i]  .race-info__side {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .race-info[b-2pmqdg8x8i]  .race-info__side-stack {
        flex: 1 1 auto;
        min-height: 0;
    }

    .race-info .race-documents-host[b-2pmqdg8x8i] {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .race-documents-host[b-2pmqdg8x8i]  .race-documents {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .race-documents-host[b-2pmqdg8x8i]  .race-documents__area {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
}
/* /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;
}

/* Touch (Finger statt Maus, pointer: coarse): Disziplinen größer - ein 36 px hoher Chip ist mit dem Daumen schnell
   daneben getippt, gerade wenn viele dicht nebeneinander stehen. 48 px ist die übliche Mindestgröße einer Tippfläche.
   An der Eingabeart statt an der Bildschirmbreite, weil auch ein Tablet quer oder ein Touch-Laptop breit ist. */
@media (pointer: coarse) {
    .registration-form[b-nqnc03snfr]  .mud-chip {
        height: 48px;
        padding: 0 18px;
        font-size: 1.05rem;
        border-radius: 24px;
    }
}
/* /Components/Base/ThemeSwitcher.razor.rz.scp.css */
/* Der gewählte Modus fett - dazu farbig über IconColor. Ein Haken wie bei der Sprache hätte das Symbol des Modus verdrängt. */
.theme-switcher__current[b-rng0vvjyze] {
    font-weight: 600;
}
/* /Components/Dialogs/EditCodeDialog.razor.rz.scp.css */
/* Der Code in einer Schrift, die 0/O, 1/l/I auseinanderhält - dieselbe wie in der orangen Box. Ein Zeichen je Kästchen,
   mittig und groß. */
.edit-code-dialog[b-mc0titr9q8]  .edit-code-box input {
    font-family: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding-inline: 0;
    min-width: 0;
    width: 100%;
}

/* Die acht Kästchen teilen sich die Breite, statt je 46 px zu behalten: Auf dem iPhone 14 (390 px) waren das mit Abständen
   396 px, und die Reihe ließ sich waagerecht scrollen. Höchstens 3 rem je Kästchen, damit sie am Schreibtisch nicht zu
   breiten Balken werden; min-width 0 an jeder Ebene, sonst schrumpft ein Flex-Element nie unter seinen Inhalt. */
.edit-code-dialog[b-mc0titr9q8]  .mud-code-input-inner {
    width: 100%;
    justify-content: center;
}

.edit-code-dialog[b-mc0titr9q8]  .mud-code-input-inner > .mud-input-control {
    flex: 1 1 0;
    min-width: 0;
    max-width: 3rem;
}

.edit-code-dialog[b-mc0titr9q8]  .mud-code-input-inner .mud-input-control-input-container,
.edit-code-dialog[b-mc0titr9q8]  .mud-code-input-inner .mud-input > div {
    min-width: 0;
    width: 100%;
}

/* MudCodeInput schreibt jedem Kästchen style="width: 42px" ins Markup - gegen einen Inline-Stil hilft nur !important. */
.edit-code-dialog[b-mc0titr9q8]  .mud-code-input-inner .mud-input {
    min-width: 0;
    width: 100% !important;
}
/* /Components/Layout/AppTitle.razor.rz.scp.css */
.app-title[b-0p5gal1uu0] {
    min-width: 0;
}

/* Auf dem Telefon wird der Titel KLEINER statt abgeschnitten (gewünscht am 2026-09-16): Die Schrift folgt der
   Fensterbreite und steht nie mit Auslassungspunkten da. 3,3vw sind bei 360 px rund 11,9 px - so passt
   „Digitale Wettkampfanmeldung" neben Menü, Sprache, Thema und Konto bzw. „Anmelden". Ab etwa 600 px greift die
   volle Größe (1,25rem). Gemessen bei 320, 360 und 412 px, angemeldet und ohne Anmeldung. */
.app-title[b-0p5gal1uu0]  .mud-typography {
    font-size: clamp(0.7rem, 3.3vw, 1.25rem);
    white-space: nowrap;
}

/* Wortmarke: etwas enger und halbfett, der zweite Teil mager - dieselbe Anmutung wie AppWordmark in der
   Immobilienverwaltung. Das Leerzeichen steht im Text (siehe AppTitle.razor), nicht als Abstand im CSS. */
.app-title[b-0p5gal1uu0]  .mud-typography {
    font-weight: 600;
    letter-spacing: -0.015em;
}

.app-title[b-0p5gal1uu0]  .app-title__rest {
    font-weight: 400;
}
/* /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;
}

/* Die Logo-Kachel im Kopf. Weiß ist hier FEST und nicht die Fläche des Themas (MudPaper nähme im dunklen Modus
   #1C1917): Ein Vereinslogo ist für weißes Papier gemacht, oft schwarze Linien auf durchsichtigem Grund - auf der
   dunklen Fläche war es nicht mehr zu erkennen. Dieselbe Überlegung wie bei Aushang und PDF, die ohnehin weiß sind. */
.competition[b-mti88w6w5e]  .race-hero__logo {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background-color: #ffffff;
}

/* Der Code in der orangen Box: groß, in einer Schrift, die 0/O und 1/l/I auseinanderhält (Atkinson Hyperlegible Mono,
   entworfen für gute Lesbarkeit) - er wird abgeschrieben und abgetippt. */
.competition[b-mti88w6w5e]  .edit-code {
    font-family: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
    /* Auf schmalen Handys (iPhone SE, 320 px) mit der Breite kleiner, sonst ragte die Box über die Karte. */
    font-size: clamp(1.75rem, 9vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.1;
    user-select: all;
}

/* „ODER" zwischen „Jetzt anmelden" und „Code eingeben": Linie, Wort, Linie auf einer Mittellinie. Die Linien teilen sich den
   Platz (MudDivider ist sonst 100 % breit und schrumpft nicht - beide zusammen ragten über die Karte); das Wort in
   Großbuchstaben, die overline in MudBlazor 9 nicht mehr setzt. */
.competition[b-mti88w6w5e]  .or-divider hr {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.competition[b-mti88w6w5e]  .or-divider .mud-typography-overline {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}
/* /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;
    }
}