/*
 * Waga Sim Racing Cup - Gestaltung
 *
 * Aufgebaut nach dem Designsystem von Mantine (mantine.dev), aber ohne
 * React und ohne Buildschritt: Die Tokens und Komponenten sind hier von Hand
 * als CSS geschrieben. Am Eventtag läuft damit weiterhin ein einziger
 * Python-Prozess, es braucht kein Node und keine Netzverbindung.
 *
 * Übernommen sind Mantines Massstäbe und seine Benennung, damit das System
 * für jeden lesbar bleibt, der Mantine kennt:
 *
 *   --mantine-spacing-*     xs 10, sm 12, md 16, lg 20, xl 32
 *   --mantine-radius-*      xs 2, sm 4, md 8, lg 16, xl 32
 *   --mantine-font-size-*   xs 12, sm 14, md 16, lg 18, xl 20
 *   --mantine-color-<name>-0..9   Farbskala je Farbe, 6 ist der Vollton
 *
 * Komponentenklassen tragen das Präfix .m- und die Variante im Namen, wie
 * bei Mantines variant-Eigenschaft: .m-button .m-button-filled,
 * .m-badge-light, .m-alert-light.
 *
 * Die Farben kommen aus dem CD Manual der Waga Spenglertechnik AG
 * («Farbwelt»), die Grundstimmung von den Vorlagen zum Tag der offenen Türe:
 * dunkelgraue Fläche mit einem dezenten Linienmuster, Grün als Primärfarbe,
 * Gelbgold als Akzent, weisse Schrift.
 *
 *   Waga Green Regular   #19a636   Primärfarbe, Stufe 6 der Skala «waga»
 *   Waga Light-green     #19c633   Stufe 5
 *   Waga Dark-green      #198633   Stufe 7
 *   Waga Yellow Regular  #e5ae00   Akzent: Hauptknopf, Untertitel, Marken
 *   Waga Yellow hell     #fad76c   Akzent auf dunklem Grund
 *   Waga Gray Dark       #464646   Karten und Flächen
 *   Waga Gray Regular    #969696   gedämpfter Text
 *   Waga Gray Light      #d2d2d2   Fliesstext auf dunklem Grund
 *   Hintergrund          #333333   aus den Vorlagen, Linien darin #3d3d3d
 *   Schrift              Raleway
 *
 * Raleway liegt als woff2 unter static/fonts/ im Projekt (SIL Open Font
 * License). Kein Verweis auf Google Fonts oder waga.ch - die Anwendung muss
 * am Eventtag ohne Internet laufen.
 *
 * Zeitangaben bleiben monospace, damit die Ziffern in der Rangliste
 * untereinander stehen.
 *
 * Gliederung:
 *   1. Schrift
 *   2. Tokens
 *   3. Grundlagen
 *   4. Komponenten     Paper, Button, Input, Badge, Alert, Table, ...
 *   5. Gerüst          Kopfleiste, Inhalt, Fusszeile
 *   6. Rangliste       TV
 *   7. Anmeldung       Handy, danach Tablet
 *   8. Rennleitung     Betreuer
 *   9. Einstiegsseite
 *  10. Einstellungen
 */

/* --------------------------------------------------------------------- */
/* 1. Schrift                                                              */
/* --------------------------------------------------------------------- */

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/raleway-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/raleway-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/raleway-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/raleway-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/raleway-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/raleway-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/*
 * Pinselschrift vom Plakat («Tag der offenen Türe»). Die Datei liegt noch
 * nicht im Projekt - sobald sie da ist (woff2 unter static/fonts/), diesen
 * Block einschalten. Die Regeln in Abschnitt 6 verweisen bereits auf
 * "Waga Pinsel" und fallen bis dahin auf Raleway kursiv zurück.
 *
 * @font-face {
 *     font-family: "Waga Pinsel";
 *     font-style: normal;
 *     font-weight: 400;
 *     font-display: swap;
 *     src: url("/static/fonts/waga-pinsel.woff2") format("woff2");
 * }
 */

/* --------------------------------------------------------------------- */
/* 2. Tokens                                                               */
/* --------------------------------------------------------------------- */

:root {
    /* -- Primärfarbe: Skala um Waga Green Regular #19a636, Stufe 6 ----- */
    --mantine-color-waga-0: #e8f7ec;
    --mantine-color-waga-1: #c6ebd0;
    --mantine-color-waga-2: #9fdcb0;
    --mantine-color-waga-3: #74cc8d;
    --mantine-color-waga-4: #4dbe6e;
    --mantine-color-waga-5: #19c633;
    --mantine-color-waga-6: #19a636;
    --mantine-color-waga-7: #198633;
    --mantine-color-waga-8: #146a29;
    --mantine-color-waga-9: #0e4f1f;

    /* -- Akzent: Waga Yellow ------------------------------------------- */
    --waga-gelb: #e5ae00;
    --waga-gelb-hell: #fad76c;
    --waga-gelb-dunkel: #c99700;
    --waga-gelb-kontrast: #1f1f1f;

    /* -- Neutrale Skala: Waga-Grau, nach oben und unten ergänzt -------- */
    --mantine-color-gray-0: #f4f4f4;
    --mantine-color-gray-1: #e6e6e6;
    --mantine-color-gray-2: #d2d2d2;   /* Waga Gray Light */
    --mantine-color-gray-3: #b4b4b4;
    --mantine-color-gray-4: #969696;   /* Waga Gray Regular */
    --mantine-color-gray-5: #6e6e6e;
    --mantine-color-gray-6: #5a5a5a;
    --mantine-color-gray-7: #464646;   /* Waga Gray Dark */
    --mantine-color-gray-8: #3d3d3d;
    --mantine-color-gray-9: #333333;   /* Hintergrund der Vorlagen */
    --mantine-color-gray-10: #262626;

    /* -- Rot für Fehler, Werte von Mantine ---------------------------- */
    --mantine-color-red-0: #fff5f5;
    --mantine-color-red-1: #ffe3e3;
    --mantine-color-red-4: #ff8787;
    --mantine-color-red-6: #fa5252;
    --mantine-color-red-8: #e03131;
    --mantine-color-red-9: #c92a2a;

    /* -- Metall für die Podestplätze 2 und 3 ------------------------- */
    --waga-silber: #c4c4c4;
    --waga-bronze: #c8905a;

    /* -- Primärfarbe, abgeleitet -------------------------------------- */
    --mantine-primary-color-filled: var(--mantine-color-waga-6);
    --mantine-primary-color-filled-hover: var(--mantine-color-waga-5);
    --mantine-primary-color-light: rgba(25, 166, 54, 0.16);
    --mantine-primary-color-light-hover: rgba(25, 166, 54, 0.28);
    --mantine-primary-color-light-color: var(--mantine-color-waga-4);
    --mantine-primary-color-contrast: #ffffff;

    /* -- Semantische Farben --------------------------------------------
     *
     * Die Vorgabe ist dunkel, wie die Vorlagen zum Tag der offenen Türe:
     * Fläche #333333 mit Linienmuster, Karten in Waga Gray Dark, Schrift
     * weiss bzw. Waga Gray Light.
     */
    --mantine-color-body: var(--mantine-color-gray-9);
    --mantine-color-body-image: url("/static/waga-muster.svg");
    --mantine-color-text: #ffffff;
    --mantine-color-text-soft: var(--mantine-color-gray-2);
    --mantine-color-dimmed: var(--mantine-color-gray-3);
    --mantine-color-placeholder: var(--mantine-color-gray-4);
    --mantine-color-default: var(--mantine-color-gray-8);
    --mantine-color-default-hover: var(--mantine-color-gray-7);
    --mantine-color-default-border: var(--mantine-color-gray-6);
    --mantine-color-default-color: var(--mantine-color-text);
    --mantine-color-error: #ff8a8a;
    --mantine-color-anchor: var(--mantine-color-waga-4);

    /* Karten und Flächen. */
    --mantine-color-card: var(--mantine-color-gray-7);
    --mantine-color-card-border: rgba(255, 255, 255, 0.09);
    --mantine-color-surface: rgba(255, 255, 255, 0.04);
    --mantine-color-surface-strong: rgba(255, 255, 255, 0.08);
    --mantine-color-divider: rgba(255, 255, 255, 0.1);
    --mantine-color-input: var(--mantine-color-gray-9);
    --mantine-color-header: rgba(38, 38, 38, 0.92);

    /* -- Schrift -------------------------------------------------------- */
    --mantine-font-family: "Raleway", Helvetica, Arial, Lucida, sans-serif;
    --mantine-font-family-monospace: Consolas, "Cascadia Mono",
        "Lucida Console", monospace;
    --mantine-font-family-headings: var(--mantine-font-family);

    --mantine-font-size-xs: 0.75rem;
    --mantine-font-size-sm: 0.875rem;
    --mantine-font-size-md: 1rem;
    --mantine-font-size-lg: 1.125rem;
    --mantine-font-size-xl: 1.25rem;

    --mantine-line-height: 1.55;
    --mantine-line-height-xs: 1.4;
    --mantine-line-height-sm: 1.45;

    --mantine-h1-font-size: 2.125rem;
    --mantine-h2-font-size: 1.625rem;
    --mantine-h3-font-size: 1.375rem;
    --mantine-h4-font-size: 1.125rem;
    --mantine-heading-font-weight: 700;

    /* -- Abstände, Radien, Schatten ------------------------------------ */
    --mantine-spacing-xs: 0.625rem;
    --mantine-spacing-sm: 0.75rem;
    --mantine-spacing-md: 1rem;
    --mantine-spacing-lg: 1.25rem;
    --mantine-spacing-xl: 2rem;

    --mantine-radius-xs: 0.125rem;
    --mantine-radius-sm: 0.25rem;
    --mantine-radius-md: 0.5rem;
    --mantine-radius-lg: 1rem;
    --mantine-radius-xl: 2rem;
    --mantine-radius-default: 0.375rem;

    --mantine-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
    --mantine-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3),
        0 10px 15px -5px rgba(0, 0, 0, 0.35);
    --mantine-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.3),
        0 20px 25px -5px rgba(0, 0, 0, 0.4);
    --mantine-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.3),
        0 28px 30px -7px rgba(0, 0, 0, 0.5);

    /* Mantines Fokusring - eine Umrandung, kein Schlagschatten. */
    --mantine-focus-ring: 2px solid var(--waga-gelb);
    --mantine-focus-ring-offset: 2px;
}

/*
 * Helles Farbschema als Ausweichmöglichkeit, einschaltbar über
 * WAGA_FARBSCHEMA=light (siehe app/config.py): weisse Karten auf hellem
 * Grau, wie das Anmeldeformular des Newsletters. Grün und Gelb bleiben.
 */
[data-mantine-color-scheme="light"] {
    --mantine-color-body: #f2f2f2;
    --mantine-color-body-image: none;
    --mantine-color-text: #21262a;
    --mantine-color-text-soft: #3a3f44;
    --mantine-color-dimmed: #5a6066;
    --mantine-color-placeholder: #969696;
    --mantine-color-default: #ffffff;
    --mantine-color-default-hover: #f4f4f4;
    --mantine-color-default-border: #c3ced5;
    --mantine-color-default-color: var(--mantine-color-text);
    --mantine-color-error: #d0342c;
    --mantine-color-anchor: var(--mantine-color-waga-7);

    --mantine-color-card: #ffffff;
    --mantine-color-card-border: #e2e2e2;
    --mantine-color-surface: #f7f7f7;
    --mantine-color-surface-strong: #ececec;
    --mantine-color-divider: #e6e6e6;
    --mantine-color-input: #ffffff;
    --mantine-color-header: rgba(255, 255, 255, 0.95);

    --mantine-primary-color-light: #e8f7ec;
    --mantine-primary-color-light-hover: #c6ebd0;
    --mantine-primary-color-light-color: var(--mantine-color-waga-7);

    --waga-gelb-hell: #b98c00;
    --waga-silber: #8a8a8a;
    --waga-bronze: #a97142;

    --mantine-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.1);
    --mantine-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05),
        0 10px 15px -5px rgba(0, 0, 0, 0.05), 0 7px 7px -5px rgba(0, 0, 0, 0.04);
    --mantine-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05),
        0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --mantine-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.05),
        0 28px 23px -7px rgba(0, 0, 0, 0.05), 0 12px 12px -7px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------- */
/* 3. Grundlagen                                                           */
/* --------------------------------------------------------------------- */

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-color: var(--mantine-color-body);
    background-image: var(--mantine-color-body-image);
    background-size: 45rem 45rem;
    background-attachment: fixed;
    color: var(--mantine-color-text);
    font-family: var(--mantine-font-family);
    font-size: var(--mantine-font-size-md);
    line-height: var(--mantine-line-height);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--mantine-color-anchor);
}

/* Mantine setzt den Fokusring nur für Tastaturbedienung. */
:focus-visible {
    outline: var(--mantine-focus-ring);
    outline-offset: var(--mantine-focus-ring-offset);
}

/* Das hidden-Attribut muss auch gegen display: flex/grid der Klassen
   gewinnen - der Browser selbst setzt es nur ohne !important. */
[hidden] {
    display: none !important;
}

/* Zeitangaben monospace, damit die Ziffern untereinander stehen. */
.zeit,
.mono {
    font-family: var(--mantine-font-family-monospace);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* 4. Komponenten                                                          */
/* --------------------------------------------------------------------- */

/* -- Container --------------------------------------------------------- */

.m-container {
    max-width: 1080px;
    margin: 0 auto;
    padding-left: var(--mantine-spacing-lg);
    padding-right: var(--mantine-spacing-lg);
}

.m-container-lg {
    max-width: 1400px;
}

/* -- Stack und Group: Mantines beide Grundlayouts ---------------------- */

.m-stack {
    display: flex;
    flex-direction: column;
    gap: var(--mantine-spacing-md);
}

.m-group {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-md);
    flex-wrap: wrap;
}

.m-group-apart {
    justify-content: space-between;
}

/* -- Paper und Card ---------------------------------------------------- */

.m-paper {
    background: var(--mantine-color-card);
    border-radius: var(--mantine-radius-md);
    color: var(--mantine-color-text);
}

.m-paper-border {
    border: 1px solid var(--mantine-color-card-border);
}

.m-paper-shadow-xs {
    box-shadow: var(--mantine-shadow-xs);
}

.m-paper-shadow-sm {
    box-shadow: var(--mantine-shadow-sm);
}

.m-paper-shadow-md {
    box-shadow: var(--mantine-shadow-md);
}

/* Mantines Card mit withBorder: Fläche in Waga Gray Dark, feine helle
   Kante, weicher Schatten gegen das Muster dahinter. */
.m-card {
    background: var(--mantine-color-card);
    border: 1px solid var(--mantine-color-card-border);
    border-radius: var(--mantine-radius-md);
    padding: var(--mantine-spacing-lg);
    box-shadow: var(--mantine-shadow-sm);
}

/* Mantines Card.Section: zieht sich über die Polsterung der Karte hinaus.
   Ein grüner Strich links markiert die Überschrift, wie ein Reiter. */
.m-card-section {
    margin: calc(var(--mantine-spacing-lg) * -1);
    margin-bottom: var(--mantine-spacing-md);
    padding: var(--mantine-spacing-sm) var(--mantine-spacing-lg);
    border-bottom: 1px solid var(--mantine-color-divider);
    background: var(--mantine-color-surface);
    border-radius: var(--mantine-radius-md) var(--mantine-radius-md) 0 0;
    box-shadow: inset 4px 0 0 var(--mantine-primary-color-filled);
}

/* Card.Section mit einem Knopf rechts in der Kopfzeile. */
.m-card-section-mit-aktion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mantine-spacing-md);
}

/* -- Modal: natives <dialog>, gestaltet wie Mantines Modal ------------- */
/*
 * Derselbe Aufbau wie eine Seite: dunkle Kopfleiste, darunter die Fläche mit
 * dem Linienmuster, darauf Karten. Der Dialog soll aussehen wie ein Stück
 * der Anwendung, nicht wie ein fremdes Fenster.
 */

.m-modal {
    width: min(64rem, calc(100vw - 2rem));
    height: min(52rem, calc(100vh - 2rem));
    padding: 0;
    border: 1px solid var(--mantine-color-card-border);
    border-radius: var(--mantine-radius-lg);
    background-color: var(--mantine-color-body);
    background-image: var(--mantine-color-body-image);
    background-size: 45rem 45rem;
    color: var(--mantine-color-text);
    box-shadow: var(--mantine-shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.m-modal[open] {
    display: flex;
}

.m-modal::backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
}

.m-modal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mantine-spacing-md);
    padding: var(--mantine-spacing-md) var(--mantine-spacing-xl);
    background: var(--mantine-color-header);
    border-bottom: 1px solid var(--mantine-color-divider);
}

.m-modal-kopf .m-eyebrow {
    display: block;
    margin-bottom: 0.15rem;
}

.m-modal-schliessen {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
}

.m-modal-werkzeuge {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-lg);
    padding: var(--mantine-spacing-md) var(--mantine-spacing-xl);
}

.m-modal-werkzeuge .m-input {
    flex: 1 1 16rem;
    background: var(--mantine-color-card);
}

.m-modal-werkzeuge .m-checkbox {
    align-items: center;
    white-space: nowrap;
}

.m-modal-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 var(--mantine-spacing-xl) var(--mantine-spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--mantine-spacing-md);
}

.m-modal .meldung {
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-xl);
    background: var(--mantine-color-header);
    border-top: 1px solid var(--mantine-color-divider);
    margin: 0;
}

/* Ein Fahrer in der Übersicht: eine Karte mit Kopfzeile und Rundentabelle. */
.fahrer-block {
    /* Im scrollenden Flex-Container nicht zusammendruecken lassen. */
    flex: 0 0 auto;
    background: var(--mantine-color-card);
    border: 1px solid var(--mantine-color-card-border);
    border-radius: var(--mantine-radius-md);
    box-shadow: var(--mantine-shadow-sm);
    overflow: hidden;
}

.fahrer-kopf {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-sm);
    padding: var(--mantine-spacing-sm) var(--mantine-spacing-lg);
    background: var(--mantine-color-surface);
    border-bottom: 1px solid var(--mantine-color-divider);
    box-shadow: inset 4px 0 0 var(--mantine-primary-color-filled);
}

.fahrer-kopf .name {
    font-weight: 700;
    font-size: var(--mantine-font-size-lg);
}

.fahrer-kopf .firma {
    color: var(--mantine-color-dimmed);
}

.fahrer-kopf .bestzeit-block {
    margin-left: auto;
    text-align: right;
    line-height: 1.15;
}

.fahrer-kopf .bestzeit {
    font-weight: 700;
    font-size: var(--mantine-font-size-lg);
    color: var(--waga-gelb);
}

.fahrer-kopf .m-label {
    display: block;
}

/* Rundentabelle: feste Spalten, damit die Zeiten untereinander stehen. */
.fahrer-runden {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mantine-font-size-sm);
    /* Feste Spaltenbreiten, damit alle Karten dieselben Kanten haben. */
    table-layout: fixed;
}

.fahrer-runden th:nth-child(1) { width: 8rem; }
.fahrer-runden th:nth-child(2) { width: 7rem; }
.fahrer-runden th:nth-child(3) { width: 6rem; }
.fahrer-runden th:nth-child(5) { width: 11rem; }

.fahrer-runden th {
    text-align: left;
    font-size: var(--mantine-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mantine-color-dimmed);
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
    border-bottom: 1px solid var(--mantine-color-divider);
}

.fahrer-runden td {
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
    border-bottom: 1px solid var(--mantine-color-divider);
    vertical-align: middle;
}

.fahrer-runden tr:last-child td {
    border-bottom: none;
}

.fahrer-runden tbody tr:nth-child(even) td {
    background: var(--mantine-color-surface);
}

.fahrer-runden .sp-zeit {
    font-weight: 700;
    font-size: var(--mantine-font-size-md);
}

.fahrer-runden .sp-quelle,
.fahrer-runden .sp-uhrzeit {
    color: var(--mantine-color-dimmed);
    white-space: nowrap;
}

.fahrer-runden .sp-status {
    color: var(--mantine-color-dimmed);
}

.fahrer-runden .sp-aktion {
    white-space: nowrap;
    text-align: right;
}

.fahrer-runden tr.beste .sp-zeit {
    color: var(--waga-gelb);
}

.fahrer-runden tr.geloescht td {
    color: var(--mantine-color-placeholder);
}

.fahrer-runden tr.geloescht .sp-zeit {
    text-decoration: line-through;
    font-weight: 400;
    color: var(--mantine-color-placeholder);
}

.fahrer-block.abgemeldet .fahrer-kopf {
    box-shadow: inset 4px 0 0 var(--mantine-color-gray-5);
}

.fahrer-block.abgemeldet .name {
    color: var(--mantine-color-dimmed);
    text-decoration: line-through;
}

.uebersicht-leer {
    padding: var(--mantine-spacing-xl) 0;
    text-align: center;
    color: var(--mantine-color-placeholder);
}

/* -- Titel und Text ---------------------------------------------------- */

.m-title {
    font-family: var(--mantine-font-family-headings);
    font-weight: var(--mantine-heading-font-weight);
    line-height: 1.3;
    margin: 0;
}

.m-title-1 {
    font-size: var(--mantine-h1-font-size);
}

.m-title-2 {
    font-size: var(--mantine-h2-font-size);
}

.m-title-3 {
    font-size: var(--mantine-h3-font-size);
}

.m-title-4 {
    font-size: var(--mantine-h4-font-size);
}

.m-text {
    margin: 0;
}

.m-text-dimmed {
    color: var(--mantine-color-dimmed);
}

.m-text-sm {
    font-size: var(--mantine-font-size-sm);
}

.m-text-xs {
    font-size: var(--mantine-font-size-xs);
}

.m-text-lg {
    font-size: var(--mantine-font-size-lg);
}

.m-text-bold {
    font-weight: 700;
}

.m-text-primary {
    color: var(--mantine-primary-color-light-color);
}

.m-text-error {
    color: var(--mantine-color-error);
}

/* Mantines Text mit tt="uppercase" fw={700} fz="xs" c="dimmed" - die
   Beschriftung über einem Wert. */
.m-label {
    font-size: var(--mantine-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mantine-color-dimmed);
}

/* Die gelbe Marke aus den Vorlagen: Übertitel in Versalien. */
.m-eyebrow {
    font-size: var(--mantine-font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--waga-gelb);
}

/* -- Divider ----------------------------------------------------------- */

.m-divider {
    border: none;
    border-top: 1px solid var(--mantine-color-divider);
    margin: var(--mantine-spacing-md) 0;
}

/* -- Button ------------------------------------------------------------ */

.m-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mantine-spacing-xs);
    height: 2.25rem;
    padding: 0 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--mantine-radius-default);
    font-family: var(--mantine-font-family);
    font-size: var(--mantine-font-size-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms ease, border-color 100ms ease,
        color 100ms ease;
}

.m-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* variant="filled" - Grün, der gewöhnliche Aktionsknopf */
.m-button-filled {
    background: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast);
}

.m-button-filled:hover:not(:disabled) {
    background: var(--mantine-primary-color-filled-hover);
}

/* variant="filled" color="yellow" - der eine Hauptknopf einer Seite, wie
   «Jetzt teilnehmen» im Wettbewerbsformular: Gelbgold mit dunkler Schrift. */
.m-button-gelb {
    background: var(--waga-gelb);
    color: var(--waga-gelb-kontrast);
}

.m-button-gelb:hover:not(:disabled) {
    background: var(--waga-gelb-hell);
}

/* variant="light" */
.m-button-light {
    background: var(--mantine-primary-color-light);
    color: var(--mantine-primary-color-light-color);
}

.m-button-light:hover:not(:disabled) {
    background: var(--mantine-primary-color-light-hover);
}

/* variant="default" - der neutrale Knopf */
.m-button-default {
    background: var(--mantine-color-default);
    border-color: var(--mantine-color-default-border);
    color: var(--mantine-color-default-color);
}

.m-button-default:hover:not(:disabled) {
    background: var(--mantine-color-default-hover);
}

/* variant="subtle" - trägt keine Fläche, bis man darauf zeigt */
.m-button-subtle {
    background: transparent;
    color: var(--mantine-color-dimmed);
    font-weight: 600;
}

.m-button-subtle:hover:not(:disabled) {
    background: var(--mantine-color-surface-strong);
    color: var(--mantine-color-text);
}

/* Löschen und Verwerfen: subtile Variante in Rot. */
.m-button-subtle-red:hover:not(:disabled) {
    background: rgba(224, 49, 49, 0.18);
    color: var(--mantine-color-red-4);
}

[data-mantine-color-scheme="light"] .m-button-subtle-red:hover:not(:disabled) {
    background: var(--mantine-color-red-0);
    color: var(--mantine-color-red-9);
}

/* Grössen. Mantines Vorgabe ist sm; xs für die Rennleitung, lg und xl fürs iPad. */
.m-button-xs {
    height: 1.875rem;
    padding: 0 0.875rem;
    font-size: var(--mantine-font-size-xs);
}

.m-button-lg {
    height: 3.125rem;
    padding: 0 2rem;
    font-size: var(--mantine-font-size-lg);
}

.m-button-xl {
    height: 4rem;
    padding: 0 2.5rem;
    font-size: var(--mantine-font-size-xl);
}

.m-button-block {
    width: 100%;
}

/* -- Input ------------------------------------------------------------- */

.m-input-wrapper {
    display: block;
}

.m-input-label {
    display: block;
    font-size: var(--mantine-font-size-sm);
    font-weight: 600;
    margin-bottom: 0.3125rem;
    color: var(--mantine-color-text);
}

.m-input-required {
    color: var(--waga-gelb);
    margin-left: 0.15em;
}

.m-input-description {
    font-size: var(--mantine-font-size-xs);
    color: var(--mantine-color-dimmed);
    margin-bottom: 0.3125rem;
}

.m-input {
    display: block;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    background: var(--mantine-color-input);
    color: var(--mantine-color-text);
    font-family: var(--mantine-font-family);
    font-size: var(--mantine-font-size-md);
    border: 1px solid var(--mantine-color-default-border);
    border-radius: var(--mantine-radius-default);
    transition: border-color 100ms ease, box-shadow 100ms ease;
    color-scheme: dark;
}

[data-mantine-color-scheme="light"] .m-input {
    color-scheme: light;
}

.m-input::placeholder {
    color: var(--mantine-color-placeholder);
}

.m-input:focus {
    outline: none;
    border-color: var(--mantine-primary-color-filled);
    box-shadow: 0 0 0 3px var(--mantine-primary-color-light);
}

.m-input-error {
    border-color: var(--mantine-color-error);
}

.m-input-lg {
    height: 3.125rem;
    font-size: var(--mantine-font-size-lg);
}

.m-input-xl {
    height: 4rem;
    padding: 0 1rem;
    font-size: 1.5rem;
}

/* Mantines Textarea: dasselbe Feld, mehrzeilig. */
.m-textarea {
    height: auto;
    padding: 0.5rem 0.75rem;
    line-height: var(--mantine-line-height);
    resize: vertical;
}

/* -- Checkbox ---------------------------------------------------------- */

.m-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--mantine-spacing-md);
    cursor: pointer;
}

.m-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    accent-color: var(--mantine-primary-color-filled);
    cursor: pointer;
}

.m-checkbox-label {
    font-size: var(--mantine-font-size-sm);
    line-height: var(--mantine-line-height-sm);
    color: var(--mantine-color-text-soft);
}

/* Mantines Checkbox.Card: die ganze Fläche ist anklickbar. */
.m-checkbox-card {
    background: var(--mantine-color-surface);
    border: 1px solid var(--mantine-color-default-border);
    border-radius: var(--mantine-radius-md);
    padding: var(--mantine-spacing-lg);
}

.m-checkbox-card:has(input:checked) {
    border-color: var(--mantine-primary-color-filled);
    background: var(--mantine-primary-color-light);
}

/* -- Badge ------------------------------------------------------------- */

.m-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast);
    border: 1px solid transparent;
    /* Mantines Badge ist eine Pille, kein Kästchen. */
    border-radius: var(--mantine-radius-xl);
    padding: 0.1em 0.6em;
    font-family: var(--mantine-font-family-monospace);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
}

.m-badge-light {
    background: var(--mantine-primary-color-light);
    color: var(--mantine-primary-color-light-color);
}

.m-badge-outline {
    background: transparent;
    border-color: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-filled);
}

.m-badge-gray {
    background: var(--mantine-color-surface-strong);
    color: var(--mantine-color-dimmed);
}

/* Die Startnummer ist überall dasselbe Element: ein Badge im Vollton. Sie
   behält ihren eigenen Namen, weil sie im Aufbau eine Rolle hat und nicht
   nur eine Gestaltung. */
.startnummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast);
    border-radius: var(--mantine-radius-xl);
    padding: 0.1em 0.6em;
    font-family: var(--mantine-font-family-monospace);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
}

/* -- Alert ------------------------------------------------------------- */

.m-alert {
    border-radius: var(--mantine-radius-md);
    padding: var(--mantine-spacing-lg);
}

/* variant="light" mit farbigem Balken links, wie Mantines withBorder. Der
   Alarm ist gelb - das ist die eine Stelle, die eine Entscheidung verlangt. */
.m-alert-light {
    background: rgba(229, 174, 0, 0.12);
    border: 1px solid rgba(229, 174, 0, 0.35);
    border-left: 4px solid var(--waga-gelb);
    color: var(--mantine-color-text);
}

.m-alert-title {
    font-weight: 700;
    font-size: var(--mantine-font-size-md);
    color: var(--waga-gelb);
    margin: 0 0 var(--mantine-spacing-xs);
}

/* -- Table ------------------------------------------------------------- */

.m-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mantine-font-size-sm);
}

.m-table th {
    text-align: left;
    font-weight: 700;
    font-size: var(--mantine-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mantine-color-dimmed);
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
    border-bottom: 1px solid var(--mantine-color-default-border);
    white-space: nowrap;
}

.m-table td {
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
    border-bottom: 1px solid var(--mantine-color-divider);
    vertical-align: middle;
}

.m-table tbody tr:last-child td {
    border-bottom: none;
}

.m-table-right {
    text-align: right;
}

/* -- Liste mit Aktionen rechts ----------------------------------------- */

.m-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.m-list-item {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-sm);
    padding: var(--mantine-spacing-xs);
    border-bottom: 1px solid var(--mantine-color-divider);
}

.m-list-item:last-child {
    border-bottom: none;
}

.m-list-item-body {
    min-width: 0;
}

.m-list-item-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-xs);
    flex-shrink: 0;
}

.m-list-empty {
    color: var(--mantine-color-placeholder);
    padding: var(--mantine-spacing-xs);
}

/* --------------------------------------------------------------------- */
/* 5. Gerüst: Kopfleiste, Inhalt, Fusszeile                               */
/* --------------------------------------------------------------------- */
/*
 * Aufgebaut wie Mantines AppShell: eine schmale, fast schwarze Kopfleiste
 * mit dem Logo, darunter der Inhalt in einem Container auf dem Muster.
 */

.m-appshell-header {
    background: var(--mantine-color-header);
    border-bottom: 1px solid var(--mantine-color-divider);
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(6px);
}

/* Mantines AppShell-Header ist 60px hoch; hier etwas mehr Luft fürs Logo. */
.m-appshell-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mantine-spacing-lg);
    min-height: 4.25rem;
}

.logo {
    display: block;
    height: 2.75rem;
    width: auto;
}

/* Navigation als Mantine-Knöpfe: der aktive Punkt in Grün. */
.m-navbar {
    display: flex;
    gap: var(--mantine-spacing-xs);
    align-items: center;
}

.m-navbar a {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 var(--mantine-spacing-md);
    border-radius: var(--mantine-radius-xl);
    font-size: var(--mantine-font-size-sm);
    font-weight: 600;
    color: var(--mantine-color-dimmed);
    text-decoration: none;
    transition: background-color 100ms ease, color 100ms ease;
}

.m-navbar a:hover {
    background: var(--mantine-color-surface-strong);
    color: var(--mantine-color-text);
}

.m-navbar a.aktiv {
    background: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast);
}

/* Auf dem Handy passen vier Punkte nicht neben das Logo: Die Navigation
   lässt sich dann seitlich wischen, statt über den Rand zu laufen. */
@media (max-width: 36rem) {
    .m-appshell-header-inner {
        gap: var(--mantine-spacing-sm);
    }

    .m-navbar {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .m-navbar a {
        flex: 0 0 auto;
        padding: 0 var(--mantine-spacing-sm);
    }
}

/* Seitentitel über dem Inhalt: gelber Übertitel, weisser Titel - die
   Reihenfolge der Vorlagen. */
.seitentitel {
    padding: var(--mantine-spacing-xl) 0 0;
}

.seitentitel .m-title-1 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.01em;
}

.seitentitel .m-text-dimmed {
    margin-top: 0.25rem;
    font-size: var(--mantine-font-size-lg);
}

.inhalt {
    padding-top: var(--mantine-spacing-xl);
    padding-bottom: 3.75rem;
}

.fusszeile {
    border-top: 1px solid var(--mantine-color-divider);
    color: var(--mantine-color-dimmed);
    font-size: var(--mantine-font-size-sm);
    padding: var(--mantine-spacing-lg) 0;
}

.fusszeile strong {
    color: var(--mantine-color-text);
    font-weight: 700;
}

/* --------------------------------------------------------------------- */
/* 6. Rangliste für den TV                                                */
/* --------------------------------------------------------------------- */
/*
 * Der TV steht drei bis vier Meter entfernt. Alle Grössen hängen deshalb
 * an der Fensterbreite (vw) und -höhe (vh) und nicht an rem - die Ansicht
 * soll denselben Eindruck machen, egal ob der Browser auf 1080p oder 4K
 * läuft.
 *
 * Aufbau: Kopf mit Titel und Event; darunter das Podest als Bühne
 * und die Liste ab Platz 4; unten die Fusszeile mit dem, der gerade fährt.
 */

.tv {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* -- Kopf -------------------------------------------------------------- */

.tv-kopf {
    flex: 0 0 auto;
    background: var(--mantine-color-header);
    border-bottom: 1px solid var(--mantine-color-divider);
    padding: 1.4vh 2vw;
    display: flex;
    align-items: center;
    gap: 2.5vw;
}

.tv-logo {
    height: 7.5vh;
    width: auto;
}

.tv-titelblock {
    display: flex;
    align-items: center;
    gap: 1.4vw;
    min-width: 0;
    padding-left: 2.5vw;
    border-left: 1px solid var(--mantine-color-divider);
}

.tv-titel {
    margin: 0;
    font-size: 2.4vw;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mantine-color-text);
    white-space: nowrap;
}

/* Das Event als gelbe Pille - dieselbe Form wie in der Rennleitung. */
.tv-event {
    padding: 0.15em 0.7em;
    border: 0.15vw solid var(--waga-gelb);
    border-radius: var(--mantine-radius-xl);
    background: rgba(229, 174, 0, 0.14);
    color: var(--waga-gelb);
    font-size: 1.6vw;
    font-weight: 700;
    white-space: nowrap;
}

/* -- Raster: Podest und Liste ------------------------------------------ */

.tv-raster {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 2.5vw;
    min-height: 0;
    padding: 3vh 2.5vw 2.5vh;
}

/* Noch kein Platz 4: das Podest allein, gross in der Mitte. */
.tv-raster.nur-podest {
    grid-template-columns: 1fr;
    justify-items: center;
}

.tv-raster.nur-podest .tv-tabelle {
    display: none;
}

.tv-raster.nur-podest .podest {
    width: min(70vw, 120vh);
}

/* -- Podest ------------------------------------------------------------ */

.podest {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: end;
    gap: 1vw;
    min-height: 0;
    width: 100%;
}

.podest-platz {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5vh;
    min-width: 0;
}

.podest-kopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8vh;
    margin-bottom: 0.4vh;
}

/* Rennfahrer-Symbol, Füllfarbe je Platz. */
.podest-fahrer {
    width: 5vw;
    height: 5vw;
    display: block;
}

.platz-1 .podest-fahrer {
    width: 6.8vw;
    height: 6.8vw;
    fill: var(--waga-gelb);
    filter: drop-shadow(0 0 1.2vw rgba(229, 174, 0, 0.35));
}

.platz-2 .podest-fahrer {
    fill: var(--waga-silber);
}

.platz-3 .podest-fahrer {
    fill: var(--waga-bronze);
}

.podest-platz.offen .podest-fahrer {
    fill: var(--mantine-color-gray-7);
}

.podest-startnummer {
    font-size: 1.4vw;
}

.platz-1 .podest-startnummer {
    font-size: 1.8vw;
}

/* Namen dürfen zweizeilig werden statt abgeschnitten - auf dem Podest
   soll jeder seinen ganzen Namen sehen. */
.podest-name {
    font-size: 1.6vw;
    font-weight: 700;
    line-height: 1.12;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.platz-1 .podest-name {
    font-size: 2.1vw;
}

.podest-platz.offen .podest-name {
    color: var(--mantine-color-placeholder);
    font-weight: 400;
}

.podest-firma {
    font-size: 1vw;
    color: var(--mantine-color-dimmed);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podest-zeit {
    margin-top: 0.6vh;
    font-size: 1.9vw;
    font-weight: 700;
}

.platz-1 .podest-zeit {
    font-size: 2.6vw;
    color: var(--waga-gelb);
}

.podest-delta {
    font-size: 1.1vw;
    color: var(--mantine-color-dimmed);
}

/* Der Sockel, Höhe nach Platz gestaffelt. Die Kante oben in der Farbe der
   Medaille. */
.podest-block {
    width: 100%;
    margin-top: 1.2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mantine-radius-md) var(--mantine-radius-md) 0 0;
    background: linear-gradient(180deg, var(--mantine-color-card),
        var(--mantine-color-surface));
    border: 1px solid var(--mantine-color-card-border);
    border-top: 0.5vh solid var(--mantine-color-gray-7);
    border-bottom: none;
    box-shadow: var(--mantine-shadow-sm);
}

/* Der einzige grüne Vollton auf dem Bildschirm: der Sockel des Siegers. */
.platz-1 .podest-block {
    height: 26vh;
    background: linear-gradient(180deg, var(--mantine-color-waga-5),
        var(--mantine-color-waga-7));
    border-color: var(--mantine-color-waga-5);
    border-top-color: var(--waga-gelb);
}

.platz-2 .podest-block {
    height: 18vh;
    border-top-color: var(--waga-silber);
}

.platz-3 .podest-block {
    height: 12vh;
    border-top-color: var(--waga-bronze);
}

.podest-platz.offen .podest-block {
    border-top-color: var(--mantine-color-gray-7);
    opacity: 0.6;
}

.podest-rang {
    font-family: var(--mantine-font-family-monospace);
    font-weight: 700;
    font-size: 6vh;
    line-height: 1;
    color: var(--mantine-color-dimmed);
}

.platz-1 .podest-rang {
    color: var(--mantine-primary-color-contrast);
    font-size: 10vh;
}

.platz-2 .podest-rang {
    color: var(--waga-silber);
}

.platz-3 .podest-rang {
    color: var(--waga-bronze);
}

.podest-platz.offen .podest-rang {
    color: var(--mantine-color-placeholder);
}

.podest-platz.aktiv .podest-block {
    outline: 3px solid var(--waga-gelb);
    outline-offset: -3px;
}

/* -- Liste ab Platz 4 -------------------------------------------------- */

.tv-tabelle {
    display: flex;
    flex-direction: column;
    align-self: start;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--mantine-color-card);
    border: 1px solid var(--mantine-color-card-border);
    border-radius: var(--mantine-radius-md);
    box-shadow: var(--mantine-shadow-sm);
}

.tv-spaltenkopf,
.tv-zeile {
    display: grid;
    grid-template-columns: 3.2vw 5.5vw 1fr 9vw 6.5vw;
    align-items: center;
    gap: 1vw;
}

.tv-spaltenkopf {
    font-size: 0.95vw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mantine-color-dimmed);
    padding: 1.3vh 1.2vw;
    border-bottom: 1px solid var(--mantine-color-divider);
    background: var(--mantine-color-surface);
}

.tv-zeile {
    font-size: 1.6vw;
    min-height: 7vh;
    padding: 0.6vh 1.2vw;
    border-bottom: 1px solid var(--mantine-color-divider);
}

.tv-zeile:last-child {
    border-bottom: none;
}

/* Mantines striped-Tabelle. */
.tv-zeile:nth-child(even) {
    background: var(--mantine-color-surface);
}

/* Der aktuell fahrende Teilnehmer wird in der Liste markiert. */
.tv-zeile.aktiv {
    outline: 3px solid var(--waga-gelb);
    outline-offset: -3px;
}

.tv-namensblock {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.tv-rang {
    font-family: var(--mantine-font-family-monospace);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mantine-color-dimmed);
    text-align: right;
}

.tv-startnummer {
    font-size: 0.85em;
    justify-self: start;
}

.tv-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-firma {
    color: var(--mantine-color-dimmed);
    font-size: 0.62em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-bestzeit {
    text-align: right;
    font-weight: 700;
}

.tv-delta {
    text-align: right;
    color: var(--mantine-color-dimmed);
    font-size: 0.75em;
}

/* -- Neue Bestzeit: kurzes Aufleuchten --------------------------------- */

@keyframes tv-aufleuchten {
    0%, 30% {
        box-shadow: 0 0 0 0.25vw var(--waga-gelb), 0 0 3vw rgba(229, 174, 0, 0.55);
        background-color: rgba(229, 174, 0, 0.22);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        background-color: transparent;
    }
}

.tv-zeile.neu {
    animation: tv-aufleuchten 6s ease-out 1;
}

.podest-platz.neu .podest-block,
.podest-platz.neu .podest-zeit {
    animation: tv-aufleuchten 6s ease-out 1;
    border-radius: var(--mantine-radius-md);
}

@media (prefers-reduced-motion: reduce) {
    .tv-zeile.neu,
    .podest-platz.neu .podest-block,
    .podest-platz.neu .podest-zeit {
        animation: none;
    }
}

/* -- Vor der ersten Zeit ----------------------------------------------- */

.tv-leer {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    text-align: center;
}

/* Wie die gelbe Pinselschrift «Tag der offenen Türe» auf dem Plakat:
   Versalien, schräg, Gelbgold. Sobald die Plakatschrift als Datei unter
   static/fonts/ liegt, den @font-face-Block in Abschnitt 1 einschalten -
   bis dahin stellt Raleway 700 kursiv die Form nach. */
.tv-leer-titel {
    font-family: "Waga Pinsel", var(--mantine-font-family);
    font-size: 4.2vw;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--waga-gelb);
}

.tv-leer-text {
    font-size: 1.4vw;
    color: var(--mantine-color-dimmed);
}

/* -- Fusszeile: wer fährt, wer kommt ----------------------------------- */
/*
 * Zweigeteilt und bewusst ungleich: Wer gerade fährt, ist die Hauptsache,
 * der Nächste die Nebeninformation. Damit weiss der Wartende, dass er
 * gemeint ist, ohne dass der Betreuer rufen muss.
 */
.tv-fuss {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    align-items: center;
    gap: 2vw;
    background: var(--mantine-color-header);
    border-top: 1px solid var(--mantine-color-divider);
    padding: 1.4vh 2vw;
    font-size: 1.9vw;
    min-height: 9vh;
}

.tv-fuss-block {
    display: flex;
    align-items: center;
    gap: 1.2vw;
    min-width: 0;
}

/* «Live» mit pulsierendem Punkt, nur solange jemand am Steuer sitzt. */
.tv-live {
    display: none;
    align-items: center;
    gap: 0.5vw;
    padding: 0.2em 0.6em;
    border-radius: var(--mantine-radius-sm);
    background: var(--mantine-color-red-8, #c92a2a);
    color: #fff;
    font-size: 0.85vw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.tv-live::before {
    content: "";
    width: 0.55vw;
    height: 0.55vw;
    border-radius: 50%;
    background: #fff;
    animation: tv-puls 1.4s ease-in-out infinite;
}

@keyframes tv-puls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-live::before {
        animation: none;
    }
}

.tv-fuss-steuer.ist-live .tv-live {
    display: inline-flex;
}

/* Die Trennlinie steht am Block und nicht als eigenes Element - so
   verschiebt sich nichts, wenn eine der beiden Seiten leer ist. */
.tv-fuss-naechster {
    border-left: 1px solid var(--mantine-color-divider);
    padding-left: 2vw;
    font-size: 0.75em;
}

.tv-fuss-naechster .tv-fuss-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-fuss-naechster .startnummer {
    background: transparent;
    color: var(--mantine-primary-color-light-color);
    border: 2px solid var(--mantine-primary-color-filled);
}

.tv-fuss-marke {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.95vw;
    color: var(--waga-gelb);
    white-space: nowrap;
}

.tv-fuss-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-fuss-rang {
    margin-left: auto;
    padding: 0.15em 0.7em;
    border-radius: var(--mantine-radius-xl);
    background: var(--mantine-primary-color-light);
    color: var(--mantine-primary-color-light-color);
    font-weight: 700;
    font-size: 1.3vw;
    white-space: nowrap;
}

.tv-fuss-rang:empty {
    display: none;
}

/* --------------------------------------------------------------------- */
/* 7. Anmeldung auf dem Handy                                              */
/* --------------------------------------------------------------------- */
/*
 * Aufgebaut wie das Wettbewerbsformular des Newsletters: eine Karte in der
 * Mitte, oben das Bild vom Waga-Bus auf der Rennstrecke, darunter Titel,
 * ein Satz und die Felder. Geöffnet wird die Seite über den QR-Code am
 * Stand auf dem eigenen Handy; das Tablet kommt erst an zweiter Stelle.
 * Die Grundregeln unten gelten fürs Tablet, der Block «Handy» am Ende des
 * Abschnitts macht alles kompakter und lässt die Karte randlos laufen.
 */

.anmeldung {
    max-width: 38rem;
    margin: 0 auto;
}

/* Das Bild läuft randlos bis an die Kante der Karte. */
.anmeldung-bild {
    display: block;
    width: calc(100% + 2 * var(--mantine-spacing-lg));
    margin: calc(var(--mantine-spacing-lg) * -1);
    margin-bottom: var(--mantine-spacing-lg);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--mantine-radius-md) var(--mantine-radius-md) 0 0;
}

.anmeldung-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: var(--mantine-spacing-md);
}

/* Der Titel wie die gelbe Pinselschrift auf dem Plakat - dieselbe Regel wie
   «Noch keine Zeiten» auf dem TV, siehe .tv-leer-titel. */
.anmeldung-kopf .m-title {
    font-family: "Waga Pinsel", var(--mantine-font-family);
    /* Auf einer Zeile, auch im Hochformat des iPads: Groesse mit der
       Breite, nach oben bei 1.7rem gedeckelt, kein Umbruch. */
    font-size: clamp(1.1rem, 3.1vw, 1.7rem);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    white-space: nowrap;
    color: var(--waga-gelb);
}

.anmeldung-kopf .m-text {
    color: var(--mantine-color-text-soft);
    font-size: var(--mantine-font-size-lg);
}

.anmeldung .m-input-label {
    font-size: var(--mantine-font-size-md);
    font-weight: 700;
    margin-bottom: var(--mantine-spacing-xs);
}

.anmeldung .m-checkbox input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
}

/* Kein grauer Blitz beim Antippen und kein Verzögern für den Doppeltipp-Zoom. */
.anmeldung-seite .m-segment-option,
.anmeldung-seite .m-checkbox,
.anmeldung-seite .m-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.anmeldung .m-checkbox-label {
    font-size: var(--mantine-font-size-md);
}

.anmeldung .fehler {
    color: var(--mantine-color-error);
    font-size: var(--mantine-font-size-md);
    min-height: 1.5rem;
}

/* Kopfleiste ohne Navigation: nur Logo und Übertitel. Vom Tablet aus soll
   niemand in die Rennleitung oder auf die Rangliste kommen. */
.anmeldung-kopfleiste {
    justify-content: space-between;
}

/* Anrede als zwei grosse Schaltflächen, wie Mantines SegmentedControl -
   mit dem Finger sicherer zu treffen als zwei kleine Kästchen. */
.anrede {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.anrede legend {
    padding: 0;
}

.m-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mantine-spacing-sm);
}

.m-segment-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    border: 1px solid var(--mantine-color-default-border);
    border-radius: var(--mantine-radius-default);
    background: var(--mantine-color-input);
    font-size: var(--mantine-font-size-xl);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 100ms ease, background-color 100ms ease;
}

.m-segment-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.m-segment-option:has(input:checked) {
    border-color: var(--mantine-primary-color-filled);
    background: var(--mantine-primary-color-light);
    color: var(--mantine-primary-color-light-color);
    box-shadow: inset 0 0 0 1px var(--mantine-primary-color-filled);
}

.m-segment-option:has(input:focus-visible) {
    outline: var(--mantine-focus-ring);
    outline-offset: var(--mantine-focus-ring-offset);
}

/* Häkchen direkt unter einem Feld, wie beim Newsletter im Wettbewerbsformular. */
.m-checkbox-inline {
    margin-top: var(--mantine-spacing-sm);
    align-items: center;
}

.anmeldung .m-checkbox-inline input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
}

.anmeldung .m-checkbox-inline .m-checkbox-label {
    font-size: var(--mantine-font-size-sm);
}

/* Teilnahmebedingungen: Fliesstext, gedämpft, mit etwas Abstand. */
.bedingungen {
    display: flex;
    flex-direction: column;
    gap: var(--mantine-spacing-xs);
    color: var(--mantine-color-dimmed);
    padding-top: var(--mantine-spacing-xs);
    border-top: 1px solid var(--mantine-color-divider);
}

.bedingungen strong {
    color: var(--mantine-color-text-soft);
}

/* Bestätigung mit sehr grosser Startnummer, überlagert die ganze Seite.
   Die beiden Leerelemente zentrieren den Inhalt senkrecht; anders als
   justify-content: center schneiden sie oben nichts ab, wenn das Handy quer
   liegt und der Inhalt höher ist als der Bildschirm. Dann wird gescrollt. */
.bestaetigung {
    position: fixed;
    inset: 0;
    background-color: var(--mantine-color-body);
    background-image: var(--mantine-color-body-image);
    background-size: 45rem 45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mantine-spacing-lg);
    padding: var(--mantine-spacing-xl);
    text-align: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 10;
}

.bestaetigung[hidden] {
    display: none;
}

.bestaetigung::before,
.bestaetigung::after {
    content: "";
    flex: 1 0 0;
}

/* Die Seite darunter scrollt nicht mit. */
body.bestaetigung-offen {
    overflow: hidden;
}

.bestaetigung-logo {
    height: 4.5rem;
    width: auto;
}

.bestaetigung .m-label {
    color: var(--waga-gelb);
    font-size: var(--mantine-font-size-md);
    letter-spacing: 0.14em;
}

.bestaetigung-nummer {
    font-size: clamp(8rem, 30vw, 20rem);
    line-height: 1;
    padding: 0.06em 0.18em;
    border-radius: var(--mantine-radius-lg);
    box-shadow: var(--mantine-shadow-lg);
}

.bestaetigung-name {
    font-size: 1.75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bestaetigung-hinweis {
    font-size: var(--mantine-font-size-lg);
    color: var(--mantine-color-dimmed);
    max-width: 32rem;
}

/* -- Handy ------------------------------------------------------------- */
/*
 * Bis 36rem (576px) - jedes Handy im Hochformat. Die Karte läuft randlos von
 * Kante zu Kante wie eine App, die Kopfleiste scrollt mit weg, statt Platz
 * zu belegen, und die Felder werden etwas flacher, bleiben aber gross genug
 * für den Daumen. Schrift in den Feldern bleibt über 16px: Darunter zoomt
 * iOS beim Antippen hinein.
 */
@media (max-width: 36rem) {
    .anmeldung-seite .m-appshell-header {
        position: static;
    }

    .anmeldung-seite .m-appshell-header-inner {
        min-height: 3.5rem;
    }

    .anmeldung-seite .logo {
        height: 2.25rem;
    }

    /* Der Übertitel steht schon im Titel der Karte. */
    .anmeldung-kopfleiste .m-eyebrow {
        display: none;
    }

    .anmeldung-seite .inhalt {
        padding: 0 0 var(--mantine-spacing-xl);
    }

    .anmeldung-karte {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        box-shadow: none;
    }

    .anmeldung-bild {
        border-radius: 0;
        aspect-ratio: 16 / 10;
    }

    /* Auf dem Handy darf der Titel umbrechen - auf einer Zeile wäre er zu
       klein zum Lesen. */
    .anmeldung-kopf .m-title {
        font-size: 1.5rem;
        white-space: normal;
        line-height: 1.1;
    }

    .anmeldung-kopf .m-text {
        font-size: var(--mantine-font-size-md);
    }

    .anmeldung .m-input-xl {
        height: 3.5rem;
        font-size: 1.25rem;
    }

    .m-segment-option {
        height: 3.5rem;
        font-size: var(--mantine-font-size-lg);
    }

    .anmeldung .m-checkbox-card {
        padding: var(--mantine-spacing-md);
    }

    .anmeldung .m-checkbox input[type="checkbox"] {
        width: 1.75rem;
        height: 1.75rem;
    }

    .anmeldung .m-button-xl {
        height: 3.5rem;
        padding: 0 var(--mantine-spacing-lg);
    }

    .anmeldung-seite .fusszeile {
        font-size: var(--mantine-font-size-xs);
    }

    .anmeldung-seite .fusszeile .m-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .bestaetigung {
        padding: var(--mantine-spacing-lg);
        gap: var(--mantine-spacing-md);
    }

    .bestaetigung-logo {
        height: 3rem;
    }

    .bestaetigung-nummer {
        font-size: clamp(5.5rem, 34vw, 10rem);
    }

    .bestaetigung-name {
        font-size: 1.5rem;
    }

    .bestaetigung-hinweis {
        font-size: var(--mantine-font-size-md);
    }

    .bestaetigung .m-button {
        width: 100%;
    }
}

/* Handy quer: wenig Höhe, die Nummer soll trotzdem ohne Scrollen passen. */
@media (max-height: 30rem) {
    .bestaetigung {
        padding: var(--mantine-spacing-md);
        gap: var(--mantine-spacing-xs);
    }

    .bestaetigung-logo {
        display: none;
    }

    .bestaetigung-nummer {
        font-size: 30vh;
    }

    .bestaetigung-name {
        font-size: 1.25rem;
    }
}

/* --------------------------------------------------------------------- */
/* 8. Rennleitung                                                          */
/* --------------------------------------------------------------------- */

.rennleitung-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mantine-spacing-lg);
    align-items: start;
}

@media (max-width: 60rem) {
    .rennleitung-raster {
        grid-template-columns: 1fr;
    }
}

/* Das laufende Event, gross neben «Rennleitung»: Der Betreuer soll auf einen
   Blick sehen, wohin Anmeldungen und Zeiten gehen. Gelb wie der Akzent der
   Vorlagen, als Pille, damit es nicht als Teil des Titels gelesen wird. */
.rennleitung-event {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.5em;
    border: 2px solid var(--waga-gelb);
    border-radius: var(--mantine-radius-xl);
    background: rgba(229, 174, 0, 0.14);
    color: var(--waga-gelb);
    vertical-align: middle;
}

.rennleitung-event.kein-event {
    border-color: var(--mantine-color-error);
    background: transparent;
    color: var(--mantine-color-error);
}

/* Kopfzeile unter dem Titel: Watcher-Lämpchen und Zähler. */
.rennleitung-kopfzeile {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
}

.watcher-lampe {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.2em 0.8em;
    border: 1px solid var(--mantine-color-default-border);
    border-radius: var(--mantine-radius-xl);
    background: var(--mantine-color-surface);
    color: var(--mantine-color-text-soft);
    font: inherit;
    font-size: var(--mantine-font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.watcher-lampe::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background: var(--mantine-primary-color-filled);
    box-shadow: 0 0 0 3px var(--mantine-primary-color-light);
}

.watcher-lampe.ist-aus {
    border-color: var(--mantine-color-error);
    color: var(--mantine-color-error);
}

.watcher-lampe.ist-aus::before {
    background: var(--mantine-color-error);
    box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.25);
}

/* -- Cockpit: wer fährt, wer kommt als Nächstes ------------------------ */
/*
 * Das Einzige, was der Betreuer den ganzen Tag braucht, steht hier gross:
 * links die Person am Steuer, rechts die nächste mit dem gelben Knopf
 * «Ans Steuer». Gelb, weil es der Hauptknopf ist wie «Jetzt teilnehmen»
 * im Anmeldeformular.
 */
.cockpit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mantine-spacing-lg);
}

/* Auf dem Tablet im Hochformat bleiben beide nebeneinander - erst auf dem
   Handy wird gestapelt. */
@media (max-width: 44rem) {
    .cockpit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 60rem) {
    .cockpit-karte {
        padding: var(--mantine-spacing-lg);
    }

    .cockpit-nummer {
        font-size: 2rem;
    }

    .cockpit-name {
        font-size: 1.4rem;
    }

    .cockpit-fuss {
        flex-wrap: wrap;
    }
}

.cockpit-karte {
    display: flex;
    flex-direction: column;
    gap: var(--mantine-spacing-md);
    padding: var(--mantine-spacing-xl);
}

.cockpit-karte .m-label {
    color: var(--waga-gelb);
    letter-spacing: 0.14em;
}

.cockpit-steuer.ist-besetzt {
    border-color: var(--mantine-primary-color-filled);
    box-shadow: inset 4px 0 0 var(--mantine-primary-color-filled), var(--mantine-shadow-sm);
}

.cockpit-person {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-lg);
    min-height: 4.5rem;
}

.cockpit-nummer {
    font-size: 2.5rem;
    min-width: 2.6em;
    padding: 0.1em 0.4em;
    border-radius: var(--mantine-radius-md);
}

.cockpit-naechster .cockpit-nummer {
    background: transparent;
    color: var(--mantine-color-text);
    border: 2px solid var(--mantine-color-default-border);
}

.cockpit-name-block {
    min-width: 0;
}

.cockpit-name {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.cockpit-ort {
    color: var(--mantine-color-dimmed);
}

.cockpit-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mantine-spacing-md);
    margin-top: auto;
}

.cockpit-zeit {
    font-size: var(--mantine-font-size-lg);
    font-weight: 600;
    color: var(--mantine-color-text-soft);
}

.cockpit-los {
    flex: 1 1 auto;
}

.cockpit-los:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Die Meldung unter dem Cockpit nimmt nur Platz, wenn sie etwas sagt. */
.rennleitung > .meldung:empty {
    display: none;
}

/* Warteschlange und Rangliste: feste Höhe, scrollen innen. Bei sechzig
   Fahrern am Tag würden sie sonst die Werkzeuge darunter aus dem Bild
   schieben. Etwa sechs Zeilen sind sichtbar; läuft die Liste weiter, wird
   sie unten ausgeblendet. */
.rennleitung-liste {
    max-height: min(28rem, 40vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.rennleitung-liste.laeuft-weiter {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 3rem), transparent);
}

.liste-anzahl {
    margin-left: 0.4em;
    font-size: var(--mantine-font-size-xs);
    vertical-align: middle;
}

/* Position in der Warteschlange und Rang in der Rangliste. */
.m-list-item .position,
.m-list-item .rang {
    flex: 0 0 1.75rem;
    text-align: right;
    color: var(--mantine-color-dimmed);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.m-list-item.ist-naechster .position {
    color: var(--waga-gelb);
}

.m-list-item .zeit {
    font-weight: 700;
}

/* -- Weitere Werkzeuge: zugeklappt am Ende ----------------------------- */

.werkzeuge {
    display: flex;
    flex-direction: column;
    gap: var(--mantine-spacing-sm);
    margin-top: var(--mantine-spacing-lg);
}

.werkzeuge-titel {
    margin: 0;
}

.werkzeug {
    padding: 0;
}

.werkzeug-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem var(--mantine-spacing-md);
    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
    cursor: pointer;
    list-style: none;
}

.werkzeug-kopf::-webkit-details-marker {
    display: none;
}

/* Pfeil wie Mantines Accordion-Chevron. */
.werkzeug-kopf::before {
    content: "";
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--mantine-color-dimmed);
    border-bottom: 2px solid var(--mantine-color-dimmed);
    transform: rotate(-45deg);
    transition: transform 150ms ease;
}

.werkzeug[open] > .werkzeug-kopf::before {
    transform: rotate(45deg);
}

.werkzeug-kopf .m-title {
    font-size: var(--mantine-font-size-md);
}

.werkzeug-inhalt {
    padding: 0 var(--mantine-spacing-lg) var(--mantine-spacing-md);
}

/* Leiste am unteren Bildschirmrand mit Sprungmarken zu den Werkzeugen. */
.werkzeugleiste {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mantine-spacing-xs);
    margin: var(--mantine-spacing-md) calc(var(--mantine-spacing-lg) * -1) 0;
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
    background: var(--mantine-color-header);
    border-top: 1px solid var(--mantine-color-divider);
    backdrop-filter: blur(6px);
}

.werkzeugleiste-titel {
    margin-right: var(--mantine-spacing-xs);
    font-size: var(--mantine-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--waga-gelb);
}

/* Derselbe Punkt wie beim Lämpchen oben. */
.werkzeugleiste-watcher::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--mantine-primary-color-filled);
}

.werkzeugleiste-watcher.ist-aus {
    border-color: var(--mantine-color-error);
    color: var(--mantine-color-error);
}

.werkzeugleiste-watcher.ist-aus::before {
    background: var(--mantine-color-error);
}

.werkzeug-meldung {
    padding: 0 var(--mantine-spacing-lg) var(--mantine-spacing-sm);
}

/* Die Zeile eines Teilnehmers in Warteschlange und Bestenliste. */
.m-list-item .name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-list-item .firma {
    color: var(--mantine-color-dimmed);
    font-size: var(--mantine-font-size-sm);
}

.m-list-item.ist-aktiv {
    background: var(--mantine-primary-color-light);
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: -2px;
    border-radius: var(--mantine-radius-sm);
}

/* Geparkte Zeiten: der einzige Alarm in der Rennleitung, deshalb ein Alert. */
.geparkt .m-list-item {
    flex-wrap: wrap;
    border-bottom-color: rgba(229, 174, 0, 0.25);
}

/* Statuszeilen des Watchers. */
.status-zeile {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 0.375rem var(--mantine-spacing-md);
    font-size: var(--mantine-font-size-sm);
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--mantine-color-divider);
}

.status-zeile:last-child {
    border-bottom: none;
}

.status-wert {
    overflow-wrap: anywhere;
    color: var(--mantine-color-text-soft);
}

.status-wert.warnung {
    color: var(--mantine-color-error);
    font-weight: 600;
}

.status-wert.gut {
    color: var(--mantine-primary-color-light-color);
    font-weight: 600;
}

/* Formulare in der Rennleitung: eine Reihe, die auf schmalen Fenstern umbricht. */
.formular-reihe {
    display: flex;
    gap: var(--mantine-spacing-sm);
    align-items: flex-end;
    flex-wrap: wrap;
}

.formular-feld {
    flex: 1 1 8rem;
}

/* Select im selben Kleid wie die Eingabefelder. */
select.m-input {
    padding-right: 2rem;
    cursor: pointer;
}

/* Nacherfassung: die Häkchenreihe mit dem Knopf rechts aussen. */
.nacherfassung-haken {
    align-items: center;
    gap: var(--mantine-spacing-lg);
}

.nacherfassung-haken .m-checkbox {
    align-items: center;
}

.nacherfassung-haken .m-button {
    margin-left: auto;
}

.meldung {
    min-height: 1.375rem;
    font-size: var(--mantine-font-size-sm);
    margin-top: var(--mantine-spacing-xs);
}

.meldung.fehler {
    color: var(--mantine-color-error);
}

.meldung.erfolg {
    color: var(--mantine-primary-color-light-color);
    font-weight: 600;
}

/* --------------------------------------------------------------------- */
/* 9. Einstiegsseite                                                       */
/* --------------------------------------------------------------------- */
/*
 * Drei Kacheln, die zu Rangliste, Anmeldung und Rennleitung fuehren.
 *
 * Jede Kachel ist ein ganzes <a> und keine Karte mit einem Link darin:
 * So ist die komplette Flaeche anklickbar. Auf einem Tablet ist das der
 * Unterschied zwischen "trifft immer" und "trifft meistens".
 */

.start-kacheln {
    display: grid;
    /* Drei nebeneinander, solange Platz ist; darunter bricht es von selbst
     * auf zwei und dann auf eine Spalte um. Kein Media Query noetig. */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--mantine-spacing-lg);
    margin: 0 0 var(--mantine-spacing-xl);
}

.start-kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mantine-spacing-sm);

    background: var(--mantine-color-card);
    border: 1px solid var(--mantine-color-card-border);
    border-radius: var(--mantine-radius-md);
    padding: var(--mantine-spacing-xl);
    box-shadow: var(--mantine-shadow-sm);

    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease,
                transform 120ms ease;
}

.start-kachel:hover,
.start-kachel:focus-visible {
    border-color: var(--mantine-primary-color-filled);
    box-shadow: var(--mantine-shadow-md);
    transform: translateY(-2px);
}

/* Ein Finger auf dem Tablet loest kein :hover aus - beim Antippen soll
 * trotzdem sichtbar etwas passieren. */
.start-kachel:active {
    transform: translateY(0);
    background: var(--mantine-primary-color-light);
}

.start-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--mantine-radius-md);
    background: var(--mantine-primary-color-light);
    color: var(--mantine-color-waga-5);
}

.start-symbol svg {
    width: 2rem;
    height: 2rem;
}

.start-kachel-titel {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.start-kachel-text {
    font-size: var(--mantine-font-size-sm);
    color: var(--mantine-color-dimmed);
    line-height: 1.5;
}

/* --------------------------------------------------------------------- */
/* 10. Einstellungen                                                       */
/* --------------------------------------------------------------------- */

.einstellungen-werkzeuge {
    align-items: center;
    gap: var(--mantine-spacing-lg);
}

.einstellungen-werkzeuge .m-text {
    flex: 1 1 20rem;
}

/* Ein Event als Karte; das laufende mit grünem Rand wie der aktive Fahrer. */
.event-karte {
    display: flex;
    flex-direction: column;
    gap: var(--mantine-spacing-sm);
}

.event-karte.ist-aktiv {
    border-color: var(--mantine-primary-color-filled);
    box-shadow: inset 4px 0 0 var(--mantine-primary-color-filled), var(--mantine-shadow-sm);
}

.event-karte-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
}

.event-karte-titel {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-sm);
    min-width: 0;
}

.event-zustand {
    font-family: var(--mantine-font-family);
    font-size: var(--mantine-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.event-karte-zeit {
    font-weight: 600;
    color: var(--mantine-color-text-soft);
}

.event-karte-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mantine-spacing-sm);
}

.event-karte-aktionen a.m-button {
    text-decoration: none;
}

.event-loeschen {
    margin-left: auto;
}

/* Der Dialog trägt ein Formular; es füllt ihn, damit Inhalt scrollt und
   die Knöpfe unten stehen bleiben. */
.event-formular {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.event-dialog .m-modal-inhalt {
    padding-top: var(--mantine-spacing-lg);
}

.event-dialog .m-card {
    flex: 0 0 auto;
}

.event-dialog-fuss {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-sm);
    padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
    background: var(--mantine-color-header);
    border-top: 1px solid var(--mantine-color-divider);
}

.event-dialog .event-dialog-fuss .meldung {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}