/*
 * Eigene Ergänzungen zu Pico.css
 *
 * Hell/Dunkel folgt der Systemeinstellung – wie break-in.de.
 * Akzentfarbe (Buttons, Links, angehakte Checkboxen, Statusboxen) aus dem Vereinswappen:
 *   hell:   Wappen-Blau  #315ab0, Buttons mit weißer Schrift
 *   dunkel: Wappen-Gelb  #eddf1e, Buttons mit dunkler Schrift (Blau wäre auf Dunkel zu schwach)
 *   Hintergrund/Text wie break-in.de: hell #ffffff/#111111, dunkel #222228/#fbfbfb
 *
 * Die Selektoren entsprechen denen von Pico, damit diese Werte Picos Standardwerte überschreiben.
 * Haken der Checkboxen: Picos Symbol, nur in der Akzentfarbe (in data:-URLs gehen keine CSS-Variablen).
 */

:root {
    --bi-yellow: #eddf1e;
    --bi-yellow-hover: #f5ea5a;
    --bi-blue: #315ab0;
    --bi-blue-hover: #24448a;
    --bi-dark: #231f20;
}

/* hell */
:root:not([data-theme=dark]),
[data-theme=light] {
    --pico-background-color: #ffffff;
    --bi-text: #111111;
    --pico-color: var(--bi-text);
    --bi-quiet: #4a5263; /* zurückhaltende Elemente (Abmelden), Kontrast 7,8:1 */

    /* Rand von Feldern, Checkboxen, Radios: Picos #cfd5e2 hat auf Weiß nur 1,5:1 – jetzt über 3:1 */
    --pico-form-element-border-color: #848c9c;

    --pico-primary: var(--bi-blue);
    --pico-primary-underline: rgba(49, 90, 176, 0.5);
    --pico-primary-hover: var(--bi-blue-hover);
    --pico-primary-hover-underline: var(--bi-blue-hover);
    --pico-primary-focus: rgba(49, 90, 176, 0.35);

    --pico-primary-background: var(--bi-blue);
    --pico-primary-border: var(--bi-blue);
    --pico-primary-hover-background: var(--bi-blue-hover);
    --pico-primary-hover-border: var(--bi-blue-hover);
    --pico-primary-inverse: #ffffff;

    --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(49, 90, 176)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/* dunkel */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --pico-background-color: #222228;
        --bi-text: #fbfbfb;
        --pico-color: var(--bi-text);
        --bi-quiet: #d5d9e0; /* Kontrast 11:1 */
        --pico-card-background-color: #2b2b32;
        --pico-card-sectioning-background-color: #313139;

        /* Formularfelder: Picos Rand ist im Dunkeln kaum zu sehen – dunkleres Feld, hellerer Rand (Kontrast über 3:1) */
        --pico-form-element-background-color: #1a1a1f;
        --pico-form-element-active-background-color: #1a1a1f;
        --pico-form-element-selected-background-color: #34343d;
        --pico-form-element-border-color: #7a7a86;

        --pico-primary: var(--bi-yellow);
        --pico-primary-underline: rgba(237, 223, 30, 0.5);
        --pico-primary-hover: var(--bi-yellow-hover);
        --pico-primary-hover-underline: var(--bi-yellow-hover);
        --pico-primary-focus: rgba(237, 223, 30, 0.35);

        --pico-primary-background: var(--bi-yellow);
        --pico-primary-border: var(--bi-yellow);
        --pico-primary-hover-background: var(--bi-yellow-hover);
        --pico-primary-hover-border: var(--bi-yellow-hover);
        --pico-primary-inverse: var(--bi-dark);

        --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(237, 223, 30)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    }
}

[data-theme=dark] {
    --pico-background-color: #222228;
    --bi-text: #fbfbfb;
    --pico-color: var(--bi-text);
    --bi-quiet: #d5d9e0;
    --pico-card-background-color: #2b2b32;
    --pico-card-sectioning-background-color: #313139;

    --pico-form-element-background-color: #1a1a1f;
    --pico-form-element-active-background-color: #1a1a1f;
    --pico-form-element-selected-background-color: #34343d;
    --pico-form-element-border-color: #7a7a86;

    --pico-primary: var(--bi-yellow);
    --pico-primary-underline: rgba(237, 223, 30, 0.5);
    --pico-primary-hover: var(--bi-yellow-hover);
    --pico-primary-hover-underline: var(--bi-yellow-hover);
    --pico-primary-focus: rgba(237, 223, 30, 0.35);

    --pico-primary-background: var(--bi-yellow);
    --pico-primary-border: var(--bi-yellow);
    --pico-primary-hover-background: var(--bi-yellow-hover);
    --pico-primary-hover-border: var(--bi-yellow-hover);
    --pico-primary-inverse: var(--bi-dark);

    --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(237, 223, 30)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/*
 * Einheitliche Maße – überall dieselben Abstände statt Einzelwerte:
 *   --bi-gap        kleiner Abstand (zwischen Buttons, in Listen)
 *   --pico-spacing  normaler Abstand (1rem, Pico)
 *   --bi-section    Abstand vor Abschnittsüberschriften
 */
:root {
    --bi-gap: 0.5rem;
    --bi-section: 2rem;
    --bi-small: 0.875rem; /* kleine Schrift: Hinweise, Fußzeile, Tabellen, kleine Buttons */
}

/* --- Seitenrahmen --- */

/* Symbol im Menü (Mein Konto) – Strichzeichnung in Linkfarbe */
.icon {
    width: 1.35em;
    height: 1.35em;
    vertical-align: -0.3em;
}

/*
 * Seitenbreite fließend statt in Picos festen Stufen (510/700/950px …), damit beim Verkleinern nichts springt:
 * volle Breite minus Seitenrand (wächst mit, 1–2rem); Kopf und Fußzeile höchstens 52,875rem (bei normaler Schrift 1100px),
 * Inhalt höchstens 42rem – so breit wie die Formulare, lange Zeilen bleiben lesbar.
 */
:root {
    --bi-gutter: clamp(1rem, 4vw, 2rem);
}

.container {
    max-width: calc(52.875rem + 2 * var(--bi-gutter));
    padding-inline: var(--bi-gutter);
}

main.container {
    max-width: calc(42rem + 2 * var(--bi-gutter));
}

/* Admin-Bereich: Inhalt so breit wie der Kopf (Tabellen brauchen den Platz); Formulare bleiben 42rem */
main.container.wide {
    max-width: calc(52.875rem + 2 * var(--bi-gutter));
}

/*
 * Maße in rem/em statt px: wer im Browser eine größere Schrift einstellt, bekommt Linien, Logo, Bilder und
 * Seitenbreite im selben Verhältnis größer; px nur für Unsichtbares (Bot-Feld, Pillen-Rundung 999px)
 */

/* Kopf kompakt: blaue Linie nah am Logo (Pico rechnet um jeden Menüeintrag 1rem Abstand) */
body > header {
    padding-block: 0.5rem;
    border-bottom: 0.15rem solid var(--bi-blue);
    margin-bottom: var(--pico-spacing);
}

/* Menü darf umbrechen: auf dem Handy steht das Admin-Menü unter dem Logo statt über den Rand hinaus */
body > header nav {
    --pico-nav-element-spacing-vertical: 0.25rem;
    flex-wrap: wrap;
    column-gap: var(--pico-spacing);
}

body > header nav ul {
    flex-wrap: wrap;
}

@media (max-width: 35.99em) {
    body > header nav {
        --pico-nav-element-spacing-horizontal: 0.25rem;
        --pico-nav-link-spacing-horizontal: 0.375rem;
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    --pico-color: var(--bi-text); /* Titel in Textfarbe statt Linkfarbe */
    text-decoration: none;
    white-space: nowrap;
}

.brand img {
    width: 1.925rem;
    height: 1.925rem;
}

body > footer {
    margin-top: var(--bi-section);
    border-top: 0.05rem solid var(--pico-muted-border-color);
    text-align: center;
}

/* --- Schriftgrößen --- */

/*
 * Grundschrift überall 20,8px (130 %) – Pico ließe sie auf schmalen Bildschirmen bis 16px schrumpfen.
 * Überschriften in ruhiger Stufung zum Fließtext (1rem):
 * h1 1,5 · h2 1,25 · h3 1,1 · kleine Schrift 0,875 (Pico: h1 2 · h2 1,75 · h3 1,5)
 */
:root {
    --pico-font-size: 130%;
}

h1 {
    --pico-font-size: 1.5rem;
    --pico-line-height: 1.25;
}

h2 {
    --pico-font-size: 1.25rem;
    --pico-line-height: 1.3;
}

h3 {
    --pico-font-size: 1.1rem;
    --pico-line-height: 1.35;
}

/* --- Überschriften und Abstände --- */

/* Aufzählungszeichen als Punkte statt Picos Quadrate */
main ul li {
    list-style: disc;
}

/* Abstand zwischen Listenpunkten (gilt auch für die Teilnehmerliste) */
main :is(ul, ol) li {
    margin-bottom: 0.25rem;
}

main h1 {
    margin-top: 0;
}

main h2 {
    margin-top: var(--bi-section);
}

/* "← zurück" gehört zur Überschrift darunter */
.back {
    margin-bottom: var(--bi-gap);
    font-size: var(--bi-small);
}

.back + h1 {
    margin-top: 0;
}

/* --- Buttons --- */

/* Pico macht Absende-Buttons 100 % breit – das gilt nur noch auf dem Handy */
@media (min-width: 36em) {
    button[type=submit] {
        width: auto;
    }
}

/* mehrere Buttons/Links nebeneinander, auf schmalen Bildschirmen umbrechend */
.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bi-gap);
    margin-bottom: var(--pico-spacing);
}

.button-row > *,
.button-row button[type=submit] {
    margin: 0;
}

/* Buttons oben/unten knapper als Eingabefelder (Pico gibt beiden dasselbe Innenpolster) */
:is(button, [type=submit], [type=button], [role=button]):not(.btn-small, .poster-open, .lightbox button) {
    padding-block: 0.3rem;
}

/* zurückhaltender Button (Abmelden): Rahmen und Text gut lesbar, aber ohne Füllung */
.btn-quiet {
    --pico-color: var(--bi-quiet);
    --pico-border-color: var(--bi-quiet);
    background: transparent;
}

.btn-quiet:is(:hover, :focus, :active) {
    --pico-color: var(--bi-text);
    --pico-border-color: var(--bi-text);
    background: transparent;
}

/* kleine Buttons: Aktionsleisten, Tabellen, Menü – normale Schrift, nur weniger Innenabstand */
.btn-small,
button.btn-small[type=submit] {
    width: auto;
    margin: 0;
    padding: 0.25rem 0.75rem;
}

/* --- Formulare --- */

/*
 * angehakte Checkbox: Haken in der Akzentfarbe auf leerem Feld, Rahmen in der Akzentfarbe –
 * eindeutiger als Picos gefülltes Feld (Haken-Symbol je Modus oben bei den Farben)
 */
[type=checkbox]:not([role=switch]):is(:checked, :checked:active, :checked:focus) {
    --pico-background-color: var(--pico-form-element-background-color);
    --pico-border-color: var(--pico-primary-border);
    background-size: 0.9em auto;
}

/*
 * engere Feldabstände: Pico rechnet in Formularen alle Abstände aus --pico-spacing
 * (unter dem Feld 1×, Beschriftung 0,375×, Hinweis darunter −0,75×) – kleiner gesetzt, schrumpft alles im Verhältnis
 */
main form {
    --pico-spacing: 0.75rem;
}

/* unter Eingabefeldern nur 10px; ein Hinweis darunter bleibt nah am Feld und hat danach ebenfalls 10px */
main form :is(input:not([type=checkbox], [type=radio]), select, textarea) {
    margin-bottom: 0.5rem;
}

/* Abstand Beschriftung → Feld doppelt so groß wie bei Pico (0,25 × Formularabstand) */
main form label > :where(input:not([type=checkbox], [type=radio]), select, textarea) {
    margin-top: calc(var(--pico-spacing) * 0.5);
}

main form :where(input, select, textarea) + small {
    margin-top: -0.3125rem;
    margin-bottom: 0.5rem;
}

/* in Pico addieren sich auf dem Handy der Zeilenabstand des Grids und der Abstand unter jedem Feld */
form .grid {
    row-gap: 0;
}

/*
 * Weniger Innenabstand in Feldern als bei Pico, sonst würden sie bei 20px Grundschrift über 60px hoch
 * (gilt bei Pico auch für Buttons, beide bleiben gleich hoch)
 */
:root {
    --pico-form-element-spacing-vertical: 0.5rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
}

/* ab Tablet-Breite: Felder nebeneinander, Formulare nicht breiter als nötig */
@media (min-width: 48em) {

    /*
     * Felder nebeneinander immer auf einer Höhe, auch wenn eine Beschriftung umbricht:
     * Beschriftung, Feld und Hinweis jeder Spalte teilen sich drei Zeilen des Grids (Subgrid).
     * Nur in Grids aus lauter Feldern – ein fieldset daneben (Radio-Buttons) würde die erste Zeile strecken.
     */
    form .grid:not(:has(> :not(label))) > label {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        align-content: start;
    }

    /* mittig, wenn der Inhaltsbereich breiter ist; die Infobox über dem Anmeldeformular genauso breit */
    main form:not(.inline),
    .signup-info {
        max-width: 42rem;
        margin-inline: auto;
    }

    /* schmale Formulare (Login, Link vergessen) */
    main form.narrow {
        max-width: 28rem;
    }
}

form.inline {
    display: inline;
    margin: 0;
}

.form-error,
.field-error {
    display: block;
    color: var(--pico-del-color);
}

/* Nach einer fehlerhaften Anmeldung bleibt der Formularanfang mit etwas Abstand im Blick. */
#anmeldeformular {
    scroll-margin-top: var(--pico-spacing);
}

/* unsichtbares Feld gegen Bots – für Menschen nicht sichtbar, auch nicht für Screenreader */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Hinweisboxen: Status (Teilnehmer) und Meldungen (Admin) sehen gleich aus --- */

.status,
.flash {
    padding: var(--pico-spacing) calc(var(--pico-spacing) * 1.25);
    border-left: 0.2rem solid var(--pico-primary-background);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
    margin-bottom: var(--pico-spacing);
}

/* Karten und Hinweisboxen: unten so viel Innenraum wie oben – kein Abstand unter dem letzten Element */
article > :last-child,
article > form > :last-child,
.status p:last-child {
    margin-bottom: 0;
}

.flash {
    border-left-color: var(--bi-blue);
}

.flash-error {
    border-left-color: var(--pico-del-color);
}

/* lange Adressen dürfen auf dem Handy umbrechen */
.url {
    overflow-wrap: anywhere;
}

/* --- Listen mit Eckdaten (dt/dd zweispaltig) --- */

.facts {
    display: grid;
    grid-template-columns: fit-content(45%) 1fr;
    gap: 0.5rem var(--pico-spacing); /* Abstand zwischen den Punkten; Zeilenhöhe in einem Wert (z. B. mehrzeiliger Ort) bleibt */
}

.facts dt {
    font-weight: 600;
}

.facts dd {
    margin: 0;
    overflow-wrap: anywhere; /* lange E-Mail-Adressen, IBAN */
}

/* auf dem Handy: Bezeichnung über dem Wert – zweispaltig bliebe für den Wert zu wenig Platz */
@media (max-width: 35.99em) {
    .facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .facts dd {
        margin-bottom: 0.75rem;
    }
}

/* Turnier-Eckdaten: der längste Wert bestimmt den gemeinsamen Umbruch (tournament-facts.js). */
.tournament-facts[data-layout="inline"] {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem var(--pico-spacing);
}

.tournament-facts[data-layout="inline"] :is(dt, dd) {
    white-space: nowrap;
    overflow-wrap: normal;
    margin: 0;
}

.tournament-facts[data-layout="stacked"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.tournament-facts[data-layout="stacked"] :is(dt, dd) {
    white-space: normal;
    overflow-wrap: anywhere;
}

.tournament-facts[data-layout="stacked"] dd {
    margin: 0 0 0.75rem;
}

/* Kurzzeitig angelegte Messkopie: volle Textbreiten, außerhalb des Seitenlayouts. */
.facts.facts-measure {
    position: fixed;
    inset: 0 auto auto 0;
    width: max-content;
    max-width: none;
    grid-template-columns: max-content max-content;
    gap: 0.5rem var(--pico-spacing);
    visibility: hidden;
    pointer-events: none;
}

.facts-measure :is(dt, dd) {
    white-space: nowrap;
    overflow-wrap: normal;
    margin: 0;
}

/* --- Tabellen (Admin) --- */

table.compact th,
table.compact td {
    padding: 0.4rem 0.5rem;
    white-space: nowrap; /* auf dem Handy lieber seitlich scrollen als Codes und Daten dreizeilig */
    vertical-align: top;
}

/* Spaltenköpfe dürfen umbrechen – lange Wörter nur an weichen Trennstellen (­) */
table.compact th {
    white-space: normal;
}

/* kurze Texte (z. B. Ereignis im Protokoll) dürfen umbrechen, ohne Mindestbreite */
table.compact td.text {
    white-space: normal;
}

/* Spalten mit längerem Text dürfen umbrechen */
table.compact td.wrap {
    white-space: normal;
    min-width: 12rem;
}

/* Überschrift mit einem selten gebrauchten Button direkt daneben (z. B. "Neues Turnier") */
.title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bi-gap) var(--pico-spacing);
    margin-bottom: var(--pico-typography-spacing-vertical);
}

.title-row h1 {
    margin: 0;
}

/* Status-Badge und Turniertitel an der Schriftgrundlinie ausrichten. */
.title-row:has(> .badge) {
    align-items: baseline;
}

/* Status-Label neben der Turnier-Überschrift: offen gefüllt in der Akzentfarbe, sonst zurückhaltend umrandet */
.badge {
    padding: 0.1rem 0.7rem;
    border: 0.1rem solid var(--pico-muted-color);
    border-radius: 999px;
    color: var(--pico-muted-color);
    font-size: var(--bi-small);
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.badge-open {
    border-color: var(--pico-primary-background);
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}

.badge-draft {
    border-style: dashed;
}

/* Testanmeldungen löschen: unter der Tabelle, linksbündig wie die Tabelle */
main form.test-delete {
    margin: var(--pico-spacing) 0 0;
}

td.actions {
    text-align: right;
}

/* Anmeldungen eines Turniers: zweite Angabe einer Zelle (Code, Kanal) klein und gedämpft; lange Adressen umbrechen */
table.registrations small {
    color: var(--pico-muted-color);
}

table.registrations td.contact {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 8rem;
}

/* Zulassen / Nachrücken untereinander statt nebeneinander */
table.registrations td.actions form.inline {
    display: block;
}

table.registrations td.actions form.inline + form.inline {
    margin-top: var(--bi-gap);
}

/* Anmeldungen eines Turniers: Statusgruppen durch eine kräftigere Linie getrennt */
table.registrations tbody + tbody tr:first-child td {
    border-top: 0.1rem solid var(--pico-muted-border-color);
}

/* --- öffentliche Seiten --- */

/* Turnierkopf: Eckdaten links, Plakat rechts (auf schmalen Bildschirmen untereinander) */
.tournament-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pico-spacing);
    margin-bottom: var(--pico-spacing);
}

@media (min-width: 48em) {
    .tournament-head:has(> .poster-open) {
        grid-template-columns: minmax(0, 1fr) 11.5rem;
    }
}

.poster {
    width: 100%;
    max-width: 11.5rem;
    border-radius: var(--pico-border-radius);
}

/* Plakat und Großansicht sind Buttons (Popover-API), Picos Button-Optik zurücksetzen */
.poster-open,
.lightbox button {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: zoom-in;
}

.lightbox button {
    cursor: zoom-out;
}

.lightbox {
    padding: 0;
    border: 0;
    background: none;
}

/*
 * Öffnen/Schließen animiert: das Plakat wächst aus der Mitte, der Hintergrund blendet ein (und rückwärts).
 * @starting-style = Zustand beim Einblenden; allow-discrete hält das Popover beim Ausblenden sichtbar,
 * bis die Animation fertig ist. Browser ohne Unterstützung öffnen und schließen wie bisher ohne Animation.
 */
.lightbox {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}

.lightbox:popover-open {
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    .lightbox:popover-open {
        opacity: 0;
        transform: scale(0.6);
    }
}

.lightbox::backdrop {
    background: rgb(0 0 0 / 0);
    transition: background-color 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}

.lightbox:popover-open::backdrop {
    background: rgb(0 0 0 / 0.8);
}

@starting-style {
    .lightbox:popover-open::backdrop {
        background: rgb(0 0 0 / 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox::backdrop {
        transition: none;
    }
}

.lightbox img {
    display: block;
    max-width: 95vw;
    max-height: 95vh;
    border-radius: var(--pico-border-radius);
}

.tournament-card {
    display: flex;
    gap: var(--pico-spacing);
    align-items: center;
}

.tournament-card h2 {
    margin: 0 0 var(--bi-gap);
}

.tournament-card p {
    margin: 0;
}

.thumb {
    width: 3.85rem;
    border-radius: var(--pico-border-radius);
}

/* Bild-Upload im Turnierformular: Vorschau neben Dateiauswahl */
.image-field {
    display: flex;
    gap: var(--pico-spacing);
    align-items: flex-start;
    margin-bottom: var(--pico-spacing);
}

.image-field > div {
    flex: 1;
    min-width: 0;
}

.image-field > div > :last-child {
    margin-bottom: 0;
}

/* Zwischenüberschriften (## ) der Turnierbeschreibung: etwas Luft davor, eng am folgenden Text */
.description h3 {
    margin-top: 1.0em;
    margin-bottom: 0.6em;
}

/* öffentliche Teilnehmerliste: mehrspaltig, so viele Spalten wie passen */
.participants ul {
    columns: 11rem;
    margin: 0.25rem 0 var(--pico-spacing);
    padding-left: 1.25rem;
}

.participants li {
    break-inside: avoid;
}

/* Datenschutz-Bestätigung im Anmeldeformular etwas von den Feldern darüber absetzen */
.consent {
    margin-top: 1rem; /* Außenabstände fallen zusammen – der größte zählt, nicht die Summe */
}

/* Infobox über dem Anmeldeformular: deutlich vom Formular absetzen */
.signup-info {
    margin-bottom: var(--bi-section);
}

/* --- Admin-Bereich --- */

.mail-body {
    white-space: pre-wrap;
    font-size: var(--bi-small);
    padding: 0.75rem;
}

/* Druck (Teilnehmerliste): nur Turnierkopf und Zugelassene, ohne Menü und Knöpfe */
@media print {
    body > header,
    body > footer,
    .no-print,
    .flash,
    form,
    button {
        display: none !important;
    }

    :root {
        --pico-background-color: #ffffff;
        --pico-color: #000000;
    }

    .container,
    main.container {
        max-width: 100%;
        padding: 0;
    }

    table.compact td,
    table.compact th {
        padding: 0.2rem 0.4rem;
        font-size: 10pt;
    }
}