/* Battle Bear 3vs3 — Bildschirm- und Druckregeln.
   Farben: Palette 2026 aus den Branding-Guidelines 5.2, Rollennamen wie in
   Plan.md Abschnitt 14. Barrierefreiheit nach Abschnitt 13, WCAG 2.2 AA. */

/* --- Schriften, selbst gehostet (Abschnitt 14) --------------------------- */

@font-face {
    font-family: "Stardos Stencil";
    src: url("fonts/StardosStencilBold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Condensed";
    src: url("fonts/RobotoCondensed-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}

/* --- Farbtoken ----------------------------------------------------------- */

:root {
    --bb-off-white: #FAF4F5;
    --bb-nebel: #F4F4F6;
    --bb-hellgrau: #E8E8E8;
    --bb-anthrazit: #303030;
    --bb-schiefer: #59626A;
    --bb-rot-500: #BE1E2D;
    --bb-rot-700: #9B1320;
    --bb-deep-red: #6D0000;
    --bb-gold: #D4AF37;
    --bb-erfolg-flaeche: #10B981;
    --bb-erfolg-text: #0A7C57;
    --bb-warnung-flaeche: #D35400;
    --bb-warnung-text: #A84300;

    /* Abschnitt 13: 24 px ist das Minimum nach WCAG 2.5.8, 44 px die
       komfortablere Hoehe fuer die primaeren Schaltflaechen der
       Turnierleitung, die im Stehen am Tisch bedient werden. */
    --ziel-min: 24px;
    --ziel-komfort: 44px;

    --schrift-text: "Roboto", "Segoe UI", system-ui, sans-serif;
    --schrift-eng: "Roboto Condensed", "Roboto", "Segoe UI", system-ui, sans-serif;
    --schrift-display: "Stardos Stencil", "Impact", "Segoe UI", sans-serif;
}

/* --- Grundlagen ---------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bb-off-white);
    color: var(--bb-anthrazit);
    font-family: var(--schrift-text);
    font-size: 1rem;
    line-height: 1.5;
}

/* Abschnitt 13: Fokus immer sichtbar, nie nur ueber die Farbflaeche. */
:focus-visible {
    outline: 2px solid var(--bb-rot-700);
    outline-offset: 2px;
}

/* Abschnitt 13: der Fokus darf nicht von feststehenden Elementen verdeckt
   werden. Kopf- und Fussbereich scrollen deshalb mit; das Layout kennt keine
   ortsfest angehefteten Leisten. */

a {
    color: var(--bb-rot-700);
}

a:hover {
    color: var(--bb-deep-red);
}

.sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--bb-off-white);
    color: var(--bb-rot-700);
    padding: 0.75rem 1rem;
    z-index: 10;
}

.sprungmarke:focus {
    left: 0;
}

/* --- Kopfbereich --------------------------------------------------------- */

.kopf {
    /* Signature-Verlauf, laut Guideline dem Kopfbereich vorbehalten. */
    background: linear-gradient(90deg, var(--bb-rot-500), var(--bb-deep-red));
    padding: 1rem 1.25rem;
}

.kopf__logo {
    display: block;
    width: 240px; /* Mindestbreite laut Guideline */
    max-width: 100%;
    height: auto;
    /* Die Datei traegt echtes Weiss - siehe static/img/HERKUNFT.md. Kein
       Filter noetig; ein Filter waere hier auch der falsche Ort, weil er im
       Druck und in E-Mail-Ansichten nicht greift. */
}

/* Grundzustand vor der Media Query: bei gleicher Spezifitaet gewinnt sonst die
   spaetere Regel und blendet die Bildmarke auch dort aus, wo sie einspringen
   soll. */
.kopf__bildmarke {
    display: none;
}

@media (max-width: 400px) {
    /* Unter der Mindestbreite tritt die Bildmarke an die Stelle des Logos. */
    .kopf__logo {
        display: none;
    }

    .kopf__bildmarke {
        display: block;
        height: 40px;
        width: auto;
    }
}

/* --- Inhalt -------------------------------------------------------------- */

main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

h1,
h2 {
    font-family: var(--schrift-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bb-deep-red);
}

/* Abschnitt 14: Stardos nie unter 24 px, nie fuer Fliesstext. */
h1 {
    font-size: 2rem; /* 32px */
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.5rem; /* 24px */
    margin: 2rem 0 0.5rem;
}

.metadaten {
    color: var(--bb-schiefer);
    font-family: var(--schrift-eng);
}

.karte {
    background: var(--bb-nebel);
    border: 1px solid var(--bb-hellgrau);
    border-radius: 6px;
    padding: 1.25rem;
}

/* --- Formulare ----------------------------------------------------------- */

.feld {
    margin-bottom: 1.25rem;
}

.feld label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.feld input {
    width: 100%;
    min-height: var(--ziel-komfort);
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--bb-anthrazit);
    background: #FFFFFF;
    border: 1px solid var(--bb-hellgrau);
    border-radius: 4px;
}

.feld__hinweis {
    display: block;
    margin-top: 0.35rem;
    color: var(--bb-schiefer);
    font-size: 0.9rem;
}

/* Abschnitt 13: primaere Schaltflaechen mindestens 44 CSS-Pixel hoch. */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ziel-komfort);
    min-width: var(--ziel-komfort);
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-weight: 500;
    color: #FFFFFF;
    background: var(--bb-rot-500);
    border: 1px solid var(--bb-rot-700);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.knopf:hover {
    background: var(--bb-rot-700);
    color: #FFFFFF;
}

.knopf:active {
    background: var(--bb-deep-red);
}

/* Jedes uebrige Ziel haelt das Minimum aus WCAG 2.5.8 ein. */
.knopf--schlicht {
    min-height: var(--ziel-min);
    min-width: var(--ziel-min);
    color: var(--bb-rot-700);
    background: transparent;
    border-color: var(--bb-hellgrau);
}

.knopf--schlicht:hover {
    color: var(--bb-deep-red);
    background: var(--bb-hellgrau);
}

/* --- Meldungen ----------------------------------------------------------- */

/* Abschnitt 13: Status nie nur ueber Farbe - jede Meldung traegt ihr Wort. */
.meldung {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid;
    border-radius: 4px;
    background: var(--bb-nebel);
}

.meldung__art {
    font-weight: 700;
    margin-right: 0.35rem;
}

.meldung--fehler {
    border-left-color: var(--bb-warnung-flaeche);
    color: var(--bb-warnung-text);
}

.meldung--hinweis {
    border-left-color: var(--bb-erfolg-flaeche);
    color: var(--bb-erfolg-text);
}

/* --- Fussbereich --------------------------------------------------------- */

.fuss {
    background: var(--bb-deep-red);
    color: var(--bb-off-white);
    padding: 1rem 1.25rem;
    font-family: var(--schrift-eng);
    font-size: 0.9rem;
}

.fuss a {
    color: var(--bb-off-white);
}

/* --- Kopfnavigation ------------------------------------------------------ */

.kopf__nav {
    margin-top: 0.75rem;
}

.kopf__nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ziel-min);
    padding: 0.25rem 0.5rem;
    color: var(--bb-off-white);
    font-family: var(--schrift-eng);
}

/* --- Tabellen ------------------------------------------------------------ */

/* Abschnitt 13: Kopfzellen und Beschriftung, Sortierung im Text benannt. */
.tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.tabelle caption {
    text-align: left;
    color: var(--bb-schiefer);
    font-family: var(--schrift-eng);
    padding-bottom: 0.5rem;
}

.tabelle th,
.tabelle td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bb-hellgrau);
}

.tabelle thead th {
    background: var(--bb-nebel);
    font-family: var(--schrift-eng);
}

/* Breite Tabellen scrollen in sich, die Seite nie waagerecht. */
.tabelle-rahmen {
    overflow-x: auto;
}

/* --- Kennzahlen ---------------------------------------------------------- */

.kennzahlen {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1.5rem;
}

.kennzahlen dt {
    color: var(--bb-schiefer);
    font-family: var(--schrift-eng);
}

.kennzahlen dd {
    margin: 0;
}

/* --- Formulare, Fortsetzung ---------------------------------------------- */

.feldgruppe {
    border: 1px solid var(--bb-hellgrau);
    border-radius: 4px;
    padding: 1rem;
    margin: 0 0 1.25rem;
}

.feldgruppe legend {
    font-family: var(--schrift-eng);
    color: var(--bb-schiefer);
    padding: 0 0.35rem;
}

.feld select {
    width: 100%;
    min-height: var(--ziel-komfort);
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--bb-anthrazit);
    background: #FFFFFF;
    border: 1px solid var(--bb-hellgrau);
    border-radius: 4px;
}

.feld select:disabled,
.feld input:disabled {
    background: var(--bb-hellgrau);
    color: var(--bb-schiefer);
}

.token {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    background: var(--bb-nebel);
    border: 1px solid var(--bb-hellgrau);
    border-radius: 4px;
    font-family: var(--schrift-eng);
    word-break: break-all;
}

/* --- Warnmeldung --------------------------------------------------------- */

.meldung--warnung {
    border-left-color: var(--bb-warnung-flaeche);
    color: var(--bb-warnung-text);
}

/* --- Runden und Tische --------------------------------------------------- */

.tisch {
    margin-bottom: 1.5rem;
}

.tisch h2 {
    margin-top: 0;
}

.tisch__teams {
    font-family: var(--schrift-display);
    font-size: 1.5rem; /* 24px - Stardos nie kleiner (14) */
    text-transform: uppercase;
    color: var(--bb-deep-red);
    margin: 0 0 1rem;
}

.tisch__gegen {
    font-family: var(--schrift-eng);
    font-size: 1rem;
    text-transform: none;
    color: var(--bb-schiefer);
    padding: 0 0.5rem;
}

.rundenliste {
    list-style: none;
    padding: 0;
}

.rundenliste li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--bb-hellgrau);
}

.rundenliste a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ziel-min);
}

/* --- Ergebniseingabe und Abschluss (Phase 6) ----------------------------- */

/* Das Formular ist selbst die Karte; das Fieldset traegt nur die Gruppierung
   fuer die Vorlesereihenfolge, keinen zweiten Rahmen. */
.tisch fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.tisch fieldset legend {
    font-family: var(--schrift-eng);
    font-size: 1.1rem;
    color: var(--bb-schiefer);
    padding: 0;
    margin-bottom: 1rem;
}

.tisch__nummer {
    font-family: var(--schrift-display);
    font-size: 1.5rem; /* 24px - Stardos nie kleiner (14) */
    text-transform: uppercase;
    color: var(--bb-deep-red);
    display: block;
}

/* Abschnitt 13: Kontrollkaestchen mindestens 24 x 24 CSS-Pixel, die
   Beschriftung daneben und mit ihm verbunden. */
.feld--wahl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.feld--wahl input[type="checkbox"] {
    width: var(--ziel-min);
    height: var(--ziel-min);
    min-height: var(--ziel-min);
    flex: none;
    margin: 0;
}

.feld--wahl label {
    margin: 0;
}

/* 7.3: die auflosenden Aktionen stehen unmittelbar neben dem Hinweis. */
.meldung__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0;
}

.meldung__aktionen form {
    margin: 0;
}

/* --- Oeffentliche Uebersicht und Tischzettel (Phase 7) ------------------- */

/* Nur auf dem Bildschirm sinnvoll: Erklaerungen, Navigation, Schaltflaechen.
   Auf Papier waeren sie Ballast oder ins Leere zeigende Links. */
@media print {
    .nur-bildschirm {
        display: none !important;
    }
}

/* 14: die Uebersichtsliste ist dicht gesetzt - mehrere Paarungen je Seite. */
.uebersicht th[scope="rowgroup"] {
    text-align: left;
    vertical-align: top;
    font-family: var(--schrift-eng);
}

.uebersicht tbody {
    border-top: 2px solid var(--bb-hellgrau);
}

.zettel {
    background: var(--bb-nebel);
    border: 1px solid var(--bb-hellgrau);
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* 14: die Tischnummer ist das groesste Element - der Zettel soll aus einigen
   Metern zuzuordnen sein. */
.zettel__tisch {
    font-family: var(--schrift-display);
    font-size: 3rem;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: var(--bb-deep-red);
    margin: 0 0 0.75rem;
}

.zettel__teams {
    font-family: var(--schrift-display);
    font-size: 1.75rem; /* 28px - Stardos nie unter 24px (14) */
    line-height: 1.35;
    text-transform: uppercase;
    text-align: center;
    color: var(--bb-anthrazit);
    margin: 0 0 1.25rem;
}

.zettel__gegen {
    font-family: var(--schrift-eng);
    font-size: 1rem;
    text-transform: none;
    color: var(--bb-schiefer);
}

.zettel__boards {
    width: 100%;
    border-collapse: collapse;
}

.zettel__boards th,
.zettel__boards td {
    border: 1px solid var(--bb-hellgrau);
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.zettel__boards thead th {
    font-family: var(--schrift-eng);
    background: #FFFFFF;
}

.zettel__fuss {
    margin: 1rem 0 0;
    text-align: center;
    font-family: var(--schrift-eng);
    color: var(--bb-schiefer);
}

/* Abschnitt 13 verlangt, dass die greifende Ausnahme nach WCAG 2.5.8 hier
   benannt wird. Beim Ruecklink am Seitenende ist es die **Abstandsausnahme**:
   Er steht allein in einem eigenen Absatz und traegt die Zeilenhoehe des
   Fliesstextes, also rund 19 statt 24 CSS-Pixel. Gemessen auf 375 CSS-Pixeln
   liegt das naechste Ziel 143 Pixel entfernt - ein Kreis von 24 Pixeln
   Durchmesser um seinen Mittelpunkt schneidet keinen anderen. Er wird deshalb
   nicht kuenstlich vergroessert, sondern behaelt die Textzeile. */
.ruecklink {
    display: inline-block;
}

/* --- Druck DIN A5 (Abschnitt 14) ---------------------------------------- */

@page {
    size: A5;
    margin: 12mm;
}

@media print {
    /* Schwarz-weiss-tauglich: keine Information haengt an einer Farbe. */
    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 10pt;
    }

    /* Nur die fluechtigen Rueckmeldungen verschwinden. Dauerhafte Hinweise
       - etwa "vorzeitig beendet" nach 5.1 - gehoeren auch aufs Papier. */
    .sprungmarke,
    .kopf,
    .fuss,
    .meldung--flash,
    .knopf {
        display: none !important;
    }

    main {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    /* Der Scrollrahmen des Bildschirms wuerde auf Papier abschneiden. */
    .tabelle-rahmen {
        overflow: visible;
    }

    .tabelle,
    .tabelle th,
    .tabelle td,
    .zettel__boards,
    .zettel__boards th,
    .zettel__boards td {
        border-color: #000000;
    }

    .tabelle thead th,
    .zettel__boards thead th {
        background: transparent;
    }

    /* Auf dem Bildschirm scrollt eine breite Tabelle in sich; auf Papier gibt
       es kein Scrollen. Neun Spalten passen nur enger gesetzt auf den
       A5-Satzspiegel - gemessen: 539 px waren es vorher, 468 px stehen zur
       Verfuegung. */
    .tabelle {
        font-size: 8pt;
    }

    .tabelle th,
    .tabelle td {
        padding: 0.2rem 0.3rem;
    }

    /* Kopfzeilen wiederholen sich ueber Seitengrenzen, Zeilengruppen bleiben
       zusammen - eine Paarung wird nie zwischen zwei Seiten zerrissen. */
    thead {
        display: table-header-group;
    }

    tbody tr,
    .uebersicht tbody {
        break-inside: avoid;
    }

    /* 14: eine A5-Seite je Paarung mit zwei Teams. */
    .zettel {
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        break-after: page;
        break-inside: avoid;
    }

    .zettel:last-of-type {
        break-after: auto;
    }

    /* Gemessen auf dem A5-Satzspiegel: rund 21 mm hohe Ziffern - aus einigen
       Metern lesbar, und der Zettel passt weiterhin auf eine Seite (14). */
    .zettel__tisch {
        font-size: 60pt;
        color: #000000;
    }

    .zettel__teams {
        font-size: 20pt;
        color: #000000;
    }

    .zettel__gegen,
    .zettel__fuss,
    .metadaten {
        color: #000000;
    }

    .zettel__boards th,
    .zettel__boards td {
        font-size: 12pt;
        padding: 0.4rem 0.5rem;
    }
}