/*
 * Handgeschrieben, ohne Bauschritt. Reihenfolge: Schriften, Farben,
 * Grundlagen, Kopf und Navigation, Flaechen, Formulare, Tabellen,
 * Listen, Handy.
 */

/*
 * Die Schriften liegen unter public/fonts/ und kommen vom eigenen
 * Server. Nichts wird von fremden Servern nachgeladen, es entsteht
 * keine Abhaengigkeit und keine Datenweitergabe.
 *
 * Cormorant Garamond ist eine Garamond mit hohem Strichkontrast und
 * kommt dem Schriftzug des Logos nahe. Sie traegt die Ueberschriften.
 * Inter traegt den Fliesstext, ruhig und auf kleinen Bildschirmen gut
 * lesbar. Beide stehen unter der SIL Open Font License.
 */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/cormorant-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+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/cormorant-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cormorant-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+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cormorant-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Eine Datei fuer alle Strichstaerken von 400 bis 700. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Schmale Schrift für die Resultate (Katja, 2026-11-02: "Ein bisschen
   schmalere Schrift wäre übersichtlicher, das Datum ist zu breit"). */
@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-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+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-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+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Seit 2026-09-15: dunkler Hintergrund, helle Karten. Katja: "der
       Hintergrund dunkel, aber rest gerne heller". Die Variablen gelten
       fuer die Karten; was direkt auf dem Grund steht, nutzt --auf-grund. */
    color-scheme: light;
    --marke: #a08466;
    --marke-satt: #6f5a42;
    --marke-zart: #efe6d8;
    --auf-marke: #ffffff;
    --grau: #8a8178;

    --tinte: #27231f;
    --gedaempft: #6f675d;
    --grund: #1c1916;
    --auf-grund: #f1ebe2;
    --auf-grund-leise: #b3a99d;
    --karte: #f7f2ea;
    --karte-2: #ece4d8;
    --seite: #0f0e0c;
    --linie: #ddd3c5;
    --warnung: #a8321c;
    --warnung-zart: #f6e0da;
    --erfolg: #4f6e2a;
    --faellig: #946409;
    --faellig-zart: #f5ead2;
    --training: #36707f;
    --gesundheit: #b0692a;

    --rund: 0.7rem;
    --schatten: 0 1px 3px rgba(0, 0, 0, 0.35);
    --serif: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
    --grotesk: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--grotesk);
    font-size: 1rem;
    color: var(--tinte);
    background: var(--grund);
    line-height: 1.55;
    /* Inter sieht mit diesen beiden Angaben deutlich ruhiger aus. */
    font-feature-settings: "cv05" 1, "cv08" 1;
    -webkit-font-smoothing: antialiased;
}

/*
 * Die Garamond traegt weit, sie braucht mehr Groesse als eine Grotesk
 * und weniger Fettung. Deshalb grosse Grade bei Strichstaerke 400.
 */
h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.15;
    color: var(--tinte);
}

h1 { font-size: 2.4rem; margin: 0 0 1.5rem; }
h2 { font-size: 1.7rem; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.3rem; margin: 1.5rem 0 0.5rem; }

a { color: var(--marke-satt); text-decoration: none; }
a:hover { color: var(--tinte); }

:focus-visible {
    outline: 2px solid var(--marke-satt);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

/* ------------------------------------------------ Kopf und Navigation */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--karte);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--tinte);
}

.brand img { height: 2rem; width: auto; display: block; }

.brand span {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--marke-satt);
    /* Die Garamond sitzt optisch etwas hoch neben dem Zeichen. */
    transform: translateY(0.05em);
}

.hauptnav {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.hauptnav a {
    padding: 0.5rem 0.8rem;
    border-radius: var(--rund);
    color: var(--gedaempft);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.hauptnav a:hover { background: var(--marke-zart); color: var(--tinte); }
.hauptnav a[aria-current="page"] { background: var(--marke-zart); color: var(--marke-satt); }

/* Abmelden steht nur unten im Profil (Katja, 2026-10-24). */
.profil-abmelden { margin-top: 2.5rem; }
.profil-abmelden button { display: inline-flex; align-items: center; gap: 0.5rem; }
.profil-abmelden .navsymbol { width: 1.1rem; height: 1.1rem; }

/* Am Handy traegt die Leiste unten die vier Hauptwege. */
.tableiste { display: none; }

main {
    padding: 1.25rem 1rem 2rem;
    max-width: 62rem;
    margin: 0 auto;
}

/* ------------------------------------------------------------ Flaechen */

.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.karte > h2:first-child,
.karte > h3:first-child { margin-top: 0; }

/* Jedes Formular, das fuer sich auf der Seite steht, ist eine Karte.
   Das erspart es, jede Ansicht einzeln zu umhuellen. */
main > form:not(.planfilter),
.anmeldung form {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    padding: 0.5rem 1.1rem 1.2rem;
    margin-bottom: 1.25rem;
}

.reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.leer { color: var(--gedaempft); font-style: italic; }

.kopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
}

.kopfzeile h1 { margin-bottom: 0; }

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

label {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gedaempft);
}

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="file"],
input[type="search"], select, textarea {
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linie);
    border-radius: 0.4rem;
    background: var(--karte);
    color: var(--tinte);
    /* 1rem, sonst zoomt iOS beim Hineintippen. */
    font-size: 1rem;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--marke);
    outline: 2px solid var(--marke-zart);
    outline-offset: 0;
}

input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin-right: 0.4rem;
    vertical-align: -0.15rem;
}

label.kasten { display: flex; align-items: center; gap: 0.2rem; font-weight: 400; color: var(--tinte); }

button, .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    margin-top: 1rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--marke-satt);
    border-radius: 0.4rem;
    background: var(--marke-satt);
    color: var(--auf-marke);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

button:hover, .knopf:hover { background: var(--marke); border-color: var(--marke); color: var(--auf-marke); }

.knopf--still, button.still {
    background: var(--karte);
    border-color: var(--linie);
    color: var(--marke-satt);
}

.knopf--still:hover, button.still:hover {
    background: var(--marke-zart);
    border-color: var(--marke);
    color: var(--tinte);
}

.knopf--klein { min-height: 2.25rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; margin-top: 0; }

/* Selten gebrauchte Felder stehen zugeklappt, damit der haeufige Weg
   kurz bleibt. */
.mehr { margin-top: 1.25rem; border-top: 1px solid var(--linie); padding-top: 0.5rem; }

.mehr > summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--marke-satt);
    padding: 0.4rem 0;
    list-style-position: inside;
}

.errors {
    margin: 1rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--warnung);
    border-radius: 0.3rem;
    background: var(--warnung-zart);
    color: var(--warnung);
}

.hinweis {
    margin: 1rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--marke);
    border-radius: 0.3rem;
    background: var(--marke-zart);
}

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

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    background: var(--karte);
}

th, td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gedaempft);
    font-weight: 600;
}

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

.tabelle {
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    overflow: hidden;
}

/* Zwei Spalten, links die Beschriftung: das Datenblatt eines Pferdes. */
.datenblatt th { width: 40%; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }

/* ------------------------------------------------------- Terminliste */

.planfilter { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.planfilter label { margin-top: 0; }
.planfilter select { width: auto; min-width: 10rem; }

.weeknav { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }

.weeknav a {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--linie);
    border-radius: 0.4rem;
    background: var(--karte);
    text-decoration: none;
    font-size: 0.9rem;
}

.weeknav a:hover { border-color: var(--marke); }

.gruppe {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.75rem 0 0.5rem;
    font-size: 1.4rem;
    font-family: var(--serif);
    color: var(--marke-satt);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--linie);
}

.gruppe .kw { font-family: var(--grotesk); font-size: 0.75rem; color: var(--gedaempft); }

.liste {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.9rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--linie);
    /* Ein schmaler Streifen links sagt, worum es geht. */
    border-left: 3px solid transparent;
}

.eintrag:last-child { border-bottom: none; }
.eintrag .pferd { font-weight: 700; min-width: 8rem; }
.eintrag .was { flex: 1 1 10rem; }
.eintrag .zusatz { color: var(--gedaempft); font-size: 0.9rem; }
.eintrag .zeit { font-variant-numeric: tabular-nums; color: var(--gedaempft); font-size: 0.9rem; }

.eintrag--training { border-left-color: var(--marke); }
.eintrag--pflege { border-left-color: var(--grau); }
.eintrag--faellig { border-left-color: var(--faellig); }

/* Faelligkeiten stehen nur vorlaeufig da, bis jemand sie bestaetigt. */
.eintrag--faellig,
.eintrag--vorgemerkt { font-style: italic; color: var(--gedaempft); background: var(--faellig-zart); }
.eintrag--vorgemerkt { border-left-color: var(--faellig); }

.wecker { display: inline-flex; vertical-align: -0.2em; margin-right: 0.35rem; color: var(--faellig); }
.wecker svg { width: 1.05em; height: 1.05em; }
.eintrag--done { opacity: 0.55; }
.eintrag--cancelled { text-decoration: line-through; opacity: 0.55; }

.faelligform { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.faelligform button { margin-top: 0; min-height: 2.25rem; padding: 0.3rem 0.7rem; font-size: 0.82rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.actions form { margin: 0; }

/* -------------------------------------------------------- Uebersicht */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    text-decoration: none;
    color: var(--tinte);
    min-height: 3.5rem;
}

.kachel:hover { border-color: var(--marke); color: var(--tinte); }
.kachel .name { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; }
.kachel .naechstes { font-size: 0.85rem; color: var(--gedaempft); }

.schnell { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }
.schnell .knopf { margin-top: 0; width: 100%; }

.tageskopf { font-size: 0.85rem; font-weight: 600; color: var(--gedaempft); margin: 1rem 0 0.3rem; }

/* --------------------------------------------------------- Anmeldung */

.anmeldung { max-width: 22rem; margin: 2rem auto; text-align: center; }
.anmeldung img { width: 13rem; height: auto; margin-bottom: 1.5rem; }
.anmeldung form { text-align: left; }
.anmeldung button { width: 100%; }

/* ------------------------------------------------------------- Handy */

@media (max-width: 46rem) {
    .hauptnav { display: none; }

    main { padding-bottom: 5.5rem; }

    .tableiste {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        background: var(--karte);
        border-top: 1px solid var(--linie);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tableiste a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 3.4rem;
        padding: 0.4rem 0.2rem;
        color: var(--gedaempft);
        text-decoration: none;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .tableiste a[aria-current="page"] { color: var(--marke-satt); }
    .tableiste svg { width: 1.35rem; height: 1.35rem; }

    h1 { font-size: 1.95rem; }

    .eintrag .pferd { min-width: 0; width: 100%; }

    /* Tabellen mit vielen Spalten werden zu Karten. Die Beschriftung
       steht in data-label, damit es kein zweites Markup braucht. */
    table.karten,
    table.karten tbody,
    table.karten tr,
    table.karten td {
        display: block;
        width: 100%;
    }

    table.karten thead { display: none; }

    table.karten tr {
        margin-bottom: 0.6rem;
        padding: 0.6rem 0.8rem;
        background: var(--karte);
        border: 1px solid var(--linie);
        border-radius: var(--rund);
        box-shadow: var(--schatten);
    }

    table.karten td {
        border: none;
        padding: 0.2rem 0;
        display: flex;
        gap: 0.6rem;
        justify-content: space-between;
        align-items: baseline;
    }

    table.karten td:empty { display: none; }

    table.karten td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gedaempft);
        flex: 0 0 auto;
    }

    table.karten td > * { text-align: right; }

    .tabelle { border: none; box-shadow: none; }

    .datenblatt th { width: auto; }
}

/* Beschriftung fuer Vorleseprogramme, am Bildschirm unsichtbar. */
.unsichtbar {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Stillgelegte Zeilen treten zurueck, bleiben aber lesbar. */
tr.gedaempft td { color: var(--gedaempft); }

/* Unumkehrbares: rot umrandet, erst nach dem Aufklappen erreichbar. */
details.gefahr { margin-top: 2.5rem; border-top: 1px solid var(--linie); padding-top: 1rem; }
details.gefahr > summary { color: var(--warnung); cursor: pointer; }
button.gefahr { background: var(--karte); border-color: var(--warnung); color: var(--warnung); }
button.gefahr:hover { background: var(--warnung); border-color: var(--warnung); color: var(--auf-marke); }

/* Fristen wie der FEI-Pass: wie Faelligkeiten abgesetzt, mit eigenem Rand. */
.eintrag--frist { border-left-color: var(--warnung); }

.stallnotiz .notiztext { white-space: normal; line-height: 1.55; overflow-wrap: anywhere; }
.stallnotiz .zusatz { color: var(--gedaempft); font-size: 0.85rem; }

.regelform input[type="number"] { width: 6rem; }
.regelform select { width: auto; }
.regelform label { margin: 0; display: flex; gap: 0.35rem; align-items: center; }

/* ------------------------------------------------------- Pferdeakte */

.akte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}
.akte .karte { margin-bottom: 0; }
.akte-foto { padding: 0; overflow: hidden; }
.akte-foto img { display: block; width: 100%; height: 100%; max-height: 22rem; object-fit: cover; }
.akte-foto .leer { padding: 1rem 1.1rem; }

.angaben {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) 1fr;
    gap: 0.45rem 1rem;
    margin: 0;
}
.angaben dt { color: var(--gedaempft); font-size: 0.9rem; }
.angaben dd { margin: 0; overflow-wrap: break-word; }

.mehrzeilig { white-space: pre-line; line-height: 1.55; }

/* ------------------------------------------------------- Einstellungen */

.unternav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.25rem; }
.unternav a {
    padding: 0.4rem 0.75rem; border: 1px solid var(--linie); border-radius: 0.4rem;
    color: var(--tinte); text-decoration: none; font-size: 0.88rem; background: var(--karte);
}
.unternav a[aria-current="page"] { background: var(--marke-zart); border-color: var(--marke); }
.zugangneu > summary { list-style: none; cursor: pointer; }
.zugangneu > summary::-webkit-details-marker { display: none; }
.zugangneu[open] form { margin-top: 0.5rem; min-width: 16rem; }

.funktionen {
    border: 1px solid var(--linie); border-radius: var(--rund);
    padding: 0.6rem 0.9rem 0.8rem; margin: 1rem 0 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.2rem 1rem;
}
.funktionen legend { padding: 0 0.3rem; font-size: 0.9rem; color: var(--gedaempft); }
.funktionen label { margin: 0.25rem 0; display: flex; gap: 0.45rem; align-items: center; }
.regelform input[type="text"] { width: auto; flex: 1 1 10rem; min-width: 8rem; }
.regelform { flex-wrap: nowrap; align-items: center; }
@media (max-width: 46rem) { .regelform { flex-wrap: wrap; } }

/* ------------------------------------------------------- Plan: Leiste, Filter, Details */

.planleiste { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.5rem; }
.planleiste .weeknav { margin: 0; }

.gruppenwahl { display: inline-flex; border: 1px solid var(--linie); border-radius: 0.45rem; overflow: hidden; background: var(--karte); }
.gruppenwahl a { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.3rem; color: var(--gedaempft); }
.gruppenwahl a + a { border-left: 1px solid var(--linie); }
.gruppenwahl a[aria-current="page"] { background: var(--marke-zart); color: var(--marke-satt); }
.gruppenwahl svg { width: 1.2rem; height: 1.2rem; }

.filterbox { flex-basis: 100%; }
.filterbox > summary { list-style: none; cursor: pointer; display: inline-flex; }
.filterbox > summary::-webkit-details-marker { display: none; }
.filterbox[open] > summary { margin-bottom: 0.6rem; }
.filterbox .planfilter { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.75rem 0.9rem; }
.filterbox .planfilter select, .filterbox .planfilter input[type="date"] { min-width: 9rem; }

.eintrag .datum { flex: 0 0 4.6rem; font-variant-numeric: tabular-nums; color: var(--gedaempft); font-size: 0.9rem; }
.eintrag a.pferd { color: inherit; text-decoration: none; }
.eintrag a.pferd:hover { text-decoration: none; }
.eintrag details.was > summary { cursor: pointer; list-style: none; }
.eintrag details.was > summary::-webkit-details-marker { display: none; }
.eintrag details.was > summary .bezeichnung { text-decoration: none; text-decoration-color: var(--linie); text-underline-offset: 0.2em; }
.eintrag .vorschau { display: block; font-size: 0.82rem; color: var(--gedaempft); font-style: normal; margin-top: 0.1rem; }
.eintrag details[open] .vorschau { display: none; }
.eintrag-details { margin: 0.6rem 0 0.3rem; padding: 0.7rem 0.8rem; background: var(--grund); border-radius: 0.4rem; font-style: normal; color: var(--tinte); }
.eintrag-details .reihe { margin-top: 0.6rem; }

/* ------------------------------------------------------- Futterplan */

.futterkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.futterkarte { margin-bottom: 0; }
.futterkarte h2 a { color: inherit; text-decoration: none; }
.futterkarte .decke { font-size: 0.9rem; color: var(--gedaempft); }
.mahlzeit { border-top: 1px solid var(--linie); padding-top: 0.5rem; margin-top: 0.6rem; }
.mahlzeit h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gedaempft); margin: 0 0 0.25rem; }
.mahlzeit p { margin: 0.1rem 0 0.4rem; }
.vermerke { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0 0.4rem; }
.vermerk { font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 1rem; background: var(--marke-zart); color: var(--marke-satt); }
.gabe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; margin: 0.3rem 0; border-left: 3px solid var(--marke); background: var(--grund); border-radius: 0.3rem; }
.gabe--medication { border-left-color: var(--warnung); }
.gabe .art { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gedaempft); }
.gabe .was { flex: 1 1 10rem; }
.gabe form { margin: 0; }
.gabe .gegeben { color: var(--erfolg); font-size: 0.9rem; }
.gabe .offen { color: var(--warnung); font-size: 0.85rem; }
.namenskacheln form { margin: 0; }
.namenskacheln .kachel { width: 100%; min-height: 4.5rem; font-size: 1.1rem; }
.dauer label { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tabelle td .actions { flex-wrap: nowrap; }
.hinweis .angaben { margin-top: 0.5rem; font-size: 0.9rem; }
.hinweis .angaben dt { color: var(--tinte); font-weight: 600; }

/* Futterhinweise hervorgehoben. Der Futterplan als Tabelle steht weiter unten. */
.hinweisbox--betont { border-left: 4px solid var(--marke); background: var(--marke-zart); }
.planwege { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.8rem; border-top: 1px solid var(--linie); padding-top: 0.7rem; }
.planwege .reihe strong { min-width: 6rem; }
@media (max-width: 46rem) {
    .futterzeile { grid-template-columns: 1fr; gap: 0.2rem; }
}
.futtertext .zusatz { margin-top: 0.35rem; font-size: 0.82rem; color: var(--gedaempft); }

/* Futterhinweise: Stift-Symbol statt Text, das Formular klappt darunter auf. */
.hinweisedit > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.hinweisedit > summary::-webkit-details-marker { display: none; }
.hinweisedit > summary h2 { margin: 0; }
.hinweisbox > .hinweisedit[open] + p { display: none; }
.hinweisedit--leer { margin: 0 0 1rem; }
.stift { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--gedaempft); }
.stift:hover { background: var(--marke-zart); color: var(--marke-satt); }
.stift svg { width: 1.1rem; height: 1.1rem; }

/* Abhaken mit Kaestchen statt Knopf. Gross genug fuer Handschuhe. */
.abhaken label { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; margin: 0; }
.haken { appearance: none; -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin: 0; border: 2px solid var(--warnung); border-radius: 0.35rem; background: var(--karte); display: grid; place-items: center; cursor: pointer; flex: none; }
.haken:hover { background: var(--warnung-zart); }
.haken:checked { background: var(--erfolg); border-color: var(--erfolg); }
.haken:checked::after { content: ""; width: 0.4rem; height: 0.75rem; border: solid var(--grund); border-width: 0 0.18rem 0.18rem 0; transform: translateY(-0.08rem) rotate(45deg); }
.schnell--links { margin-top: 0.75rem; }
.schnell--links:empty { display: none; }

/* Wetter der naechsten Tage, eine Leiste quer ueber der Uebersicht. */
.wetter { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0 0 1rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.wetterort { display: flex; align-items: center; padding: 0.5rem 0.9rem; font-family: var(--serif); font-size: 1.25rem; background: var(--marke-zart); }
.wettertag { flex: 1 1 6rem; display: grid; justify-items: center; gap: 0.1rem; padding: 0.45rem 0.6rem; border-left: 1px solid var(--linie); line-height: 1.2; font-variant-numeric: tabular-nums; }
.wettertag small { color: var(--gedaempft); font-size: 0.75rem; }
.wettertag b { font-weight: 600; }
.wettertag b span { font-weight: 400; color: var(--gedaempft); }
.wettersymbol { width: 1.5rem; height: 1.5rem; color: var(--marke-satt); }
.wettersymbol--clear, .wettersymbol--partly { color: var(--faellig); }
.wettersymbol--rain, .wettersymbol--drizzle, .wettersymbol--storm { color: var(--training); }

/* Uebersicht: heute zu geben, je Mahlzeit. */
.heutegaben-mahlzeit { display: grid; gap: 0.25rem; margin-top: 0.6rem; }
.heutegaben-mahlzeit h3 { margin: 0; font-family: var(--grotesk); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedaempft); }
.heutegaben .gabe { margin: 0; }

/* Handlungen als Symbol, je ein Klick. */
.symbole { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.symbole form { margin: 0; }
.symbol { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; color: var(--gedaempft); cursor: pointer; }
.symbol svg { width: 1.2rem; height: 1.2rem; }
.symbol:hover { background: var(--marke-zart); color: var(--tinte); }
.symbol--einplanen { color: var(--faellig); }
.symbol--absagen:hover { color: var(--warnung); background: var(--warnung-zart); }

/* Uebersicht: Datum, ein Schnellweg und die Links in einer Zeile. */
.uebersichtkopf { flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.schnell-klein { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.schnell-klein .knopf { margin: 0; }

/* Aufgaben: Kaestchen links, Text, Stift rechts. */
.aufgabe { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--linie); }
.aufgabe:first-of-type { border-top: 0; }
.aufgabe .abhaken { margin: 0.1rem 0 0; }
.aufgabe .was { flex: 1; min-width: 0; }
.aufgabe .aufgabennotiz { display: block; }
.aufgabe--ueberfaellig strong { color: var(--warnung); }
.aufgabenliste > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.75rem; }
.aufgabenliste > summary::-webkit-details-marker { display: none; }
.aufgabenliste > summary h2 { margin: 0; }
.aufgabenliste > summary::after { content: "▸"; color: var(--gedaempft); margin-left: auto; }
.aufgabenliste[open] > summary::after { content: "▾"; }
.aufgabenzwischen { font-family: var(--grotesk); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedaempft); margin: 0.9rem 0 0.2rem; }
.felder { align-items: flex-end; }
.felder > div { display: grid; }
a.wetterort { text-decoration: none; color: var(--tinte); }
a.wetterort:hover { background: var(--marke); color: var(--auf-marke); }

/* Rundes Pferdebild, in Listen und auf Kacheln. */
.pferdebild { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; object-fit: cover; object-position: 30% 25%; background: var(--marke-zart); color: var(--marke-satt); font-family: var(--serif); font-size: 1.05rem; font-weight: 600; vertical-align: middle; }
.pferdewahl .kachel { display: flex; align-items: center; gap: 0.75rem; }
.pferdewahl .pferdebild { width: 3rem; height: 3rem; font-size: 1.4rem; }

/* Tagesplan der Uebersicht: Uhrzeit, Pferd, Reiter, Art klein. */
.tagesplan { display: grid; }
.tageszeile { display: grid; grid-template-columns: 3.2rem minmax(8rem, auto) 1fr auto; align-items: center; gap: 0.2rem 0.75rem; padding: 0.4rem 0; border-top: 1px solid var(--linie); }
.tageszeile:first-child { border-top: 0; }
.tageszeit { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinte); }
.tagespferd { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--tinte); }
.tagespferd strong { font-size: 1.05rem; }
.tageswer { color: var(--gedaempft); }
.tagesart { color: var(--gedaempft); font-size: 0.8rem; margin-left: 0.4rem; }
.tagesgesundheit { display: inline-flex; align-items: center; gap: 0.35rem; }
.tageszeile.eintrag--cancelled { opacity: 0.55; text-decoration: line-through; }
@media (max-width: 40rem) {
    .tageszeile { grid-template-columns: 3rem 1fr auto; }
    .tagesdetail { grid-column: 2 / 4; }
}
.tagesdetail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; min-width: 0; }

/* Futterplan als Tabelle mit eingebauten Gaben. */
.futtertabelle { width: 100%; }
.futtertabelle th[scope="row"] { text-align: left; vertical-align: top; min-width: 11rem; font-weight: 400; }
.futtertabelle td { vertical-align: top; }
.futtertabelle .futtertext { margin: 0 0 0.35rem; }
.futtertabelle .vermerke, .futtertabelle .futternotiz, .futtertabelle .decke { display: block; margin-top: 0.3rem; }
.futtertabelle .gabe { margin: 0.25rem 0 0; }
.futtertabelle .gabe .symbol { width: 1.8rem; height: 1.8rem; margin-left: auto; }
.symbole--links { margin: 0.3rem 0 0 -0.4rem; }
.symbol--plus { font-size: 1.4rem; line-height: 1; color: var(--marke-satt); }
@media (max-width: 46rem) {
    /* Futtertabelle am Handy: Pferd oben, je Mahlzeit ein Absatz, links buendig. */
    table.futtertabelle th[scope="row"] { display: block; padding: 0 0 0.4rem; border-bottom: 1px solid var(--linie); }
    table.futtertabelle td { display: block; padding: 0.45rem 0; border-bottom: 1px solid var(--linie); }
    table.futtertabelle td:last-child { border-bottom: 0; }
    table.futtertabelle td::before { display: block; margin-bottom: 0.15rem; }
    table.futtertabelle td > * { text-align: left; }
}
/* Die Pferdezelle ist ein Zeilenkopf, soll aber nicht wie ein Spaltenkopf aussehen. */
.futtertabelle th[scope="row"] { text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--tinte); }
.futtertabelle th[scope="row"] .futternotiz { font-size: 0.85rem; }
table.futtertabelle { width: 100%; table-layout: auto; }

/* Grosses Plus zum Anlegen, Fotos an Aufgaben, Kettensymbol an Links. */
.plus-gross { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--marke-satt); color: var(--auf-marke); box-shadow: var(--schatten); margin-left: auto; flex: none; }
.plus-gross svg { width: 1.5rem; height: 1.5rem; }
.plus-gross:hover { background: var(--marke); }
.aufgabenfoto { width: 3.25rem; height: 3.25rem; border-radius: 0.4rem; object-fit: cover; display: block; }
.aufgabenfoto--gross { width: auto; max-width: min(100%, 22rem); height: auto; margin: 0.3rem 0; }
.linkknopf { display: inline-flex; align-items: center; gap: 0.35rem; }
.linkknopf svg { width: 1rem; height: 1rem; flex: none; }

/* =====================================================================
   Layout seit 2026-09-15 (Entwurf 3): Seitenleiste am PC, Kopf und
   untere Leiste am Handy, Uebersicht in zwei Spalten.
   ===================================================================== */

body { background: var(--grund); }
.topbar, .brand { display: none; }
.nur-handy { display: none; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

main { max-width: 84rem; }
main > form:not(.planfilter) { max-width: 48rem; }

.seitenleiste {
    position: fixed; inset: 0 auto 0 0; width: 13rem; z-index: 20;
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 1.1rem 0.75rem 0.9rem; background: var(--seite); border-right: 1px solid #221e1a; overflow-y: auto;
}
.seitenmarke img { width: 3.6rem; height: auto; display: block; margin: 0.1rem 0 0 0.5rem; }
.seitenleiste .hauptnav { display: grid; gap: 0.1rem; flex: none; justify-content: stretch; }
.seitenleiste .hauptnav a {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 0.5rem;
    color: #d8cec1; font-weight: 500; font-size: 0.95rem; text-decoration: none;
}
.seitenleiste .hauptnav a:hover { background: #221e1a; color: #fff; }
.seitenleiste .hauptnav a[aria-current="page"] { background: #2a251f; color: #fff; box-shadow: inset 2px 0 0 var(--marke-satt); }
.navsymbol { width: 1.15rem; height: 1.15rem; flex: none; }
.seitenlinks h2 { margin: 0 0.7rem 0.3rem; font-family: var(--grotesk); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8076; font-weight: 600; }
.seitenlink { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 0.45rem; color: #cfc4b6; font-size: 0.85rem; text-decoration: none; }
.seitenlink:hover { background: #221e1a; color: #fff; }
.seitenwer { margin-top: auto; display: flex; align-items: center; gap: 0.3rem; padding-top: 0.75rem; border-top: 1px solid #221e1a; }
.seitenprofil { flex: 1; display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: #d8cec1; text-decoration: none; font-size: 0.88rem; padding: 0.3rem; border-radius: 0.45rem; }
.seitenprofil:hover, .seitenprofil[aria-current="page"] { background: #221e1a; color: #fff; }
.seitenprofil small { display: block; color: #8a8076; font-size: 0.72rem; }
.kuerzel { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--marke); color: var(--auf-marke); font-size: 0.75rem; font-weight: 700; flex: none; }

body.mit-leiste main { margin-left: 13rem; margin-right: 0; padding: 1.4rem 1.75rem 2.5rem; }
.handykopf { display: none; }
.tableiste { display: none; }

h1 { font-size: 2.1rem; }
.karte { box-shadow: none; }
.karte h2 { font-size: 1.45rem; }

/* Uebersicht */
.uebersichtkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 1.1rem; }
.uebersichtkopf h1 { margin: 0; }
.uebersichtkopf .wetter { margin: 0; }
.uebersicht-raster { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.uebersicht-links, .uebersicht-rechts { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.uebersicht-raster .karte { margin: 0; }
.titel-mit-plus { display: flex; align-items: center; gap: 0.6rem; }
.titel-mit-plus .plus-gross, .aufgabenliste > summary .plus-gross { width: 2.2rem; height: 2.2rem; }
.titel-mit-plus .plus-gross svg, .aufgabenliste > summary .plus-gross svg { width: 1.2rem; height: 1.2rem; }
.aufgabenliste > summary .plus-gross { margin-left: auto; }
.aufgabenliste > summary::after { margin-left: 0.5rem; }
.plusgruppe { margin-left: auto; display: flex; gap: 0.4rem; }
.plus-klein { font-family: var(--grotesk); font-size: 0.82rem; font-weight: 600; text-decoration: none; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--tinte); }
.plus-klein.bereich--training { border-color: var(--training); color: var(--training); }
.plus-klein.bereich--gesundheit { border-color: var(--gesundheit); color: var(--gesundheit); }
.plus-klein:hover { background: var(--karte-2); }

.heutegaben .gabe { border-left: 0; background: var(--karte-2); gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.5rem; }
.heutegaben .gabe--medication { background: var(--warnung-zart); }
.aufgaben-scroll { max-height: 22rem; overflow-y: auto; }

.kalender { display: flex; flex-direction: column; }
.kalenderliste { max-height: calc(100vh - 11rem); min-height: 18rem; overflow-y: auto; margin: 0 -1.1rem; padding: 0 1.1rem; }
.tag-kopf { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 0.45rem; padding: 0.55rem 0 0.35rem; background: var(--karte); border-bottom: 1px solid var(--linie); font-size: 0.9rem; color: var(--tinte); }
.tag-kopf strong { font-weight: 700; }
.tag-kopf--vorbei { color: var(--gedaempft); }
.tag-kopf--heute { color: var(--marke-satt); }
.heute-marke { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: var(--marke-satt); color: var(--auf-marke); padding: 0.05rem 0.45rem; border-radius: 999px; }
.tag-leer { margin: 0.4rem 0 0.2rem; font-size: 0.88rem; }
.kalender-fuss { margin: 0.6rem 0 0; font-size: 0.88rem; }

.tageszeile { border-left: 3px solid transparent; padding-left: 0.5rem; }
.tageszeile.bereich--training { border-left-color: var(--training); }
.tageszeile.bereich--gesundheit { border-left-color: var(--gesundheit); }
.tageszeile.eintrag--vorgemerkt, .tageszeile.eintrag--faellig { background: var(--faellig-zart); }

.pferdebild { background: var(--karte-2); color: var(--marke-satt); }
.wetter { background: var(--karte); }
.wetterort { background: var(--karte-2); }

/* Tabellen und Formulare auf dunklem Grund */
table { background: transparent; }
.tabelle { box-shadow: none; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"],
input[type="file"], input[type="search"], input[type="url"], select, textarea { background: var(--karte-2); color: var(--tinte); }
.kachel { box-shadow: none; }
.kachel:hover { border-color: var(--marke-satt); }

/* ---------------------------------------------------------------- Handy */
@media (max-width: 64rem) {
    .seitenleiste { display: none; }
    .nur-handy { display: flex; }
    body.mit-leiste main { margin-left: auto; margin-right: auto; padding: 0.9rem 0.8rem 6.5rem; }
    .handykopf {
        display: flex; align-items: center; gap: 0.7rem; position: sticky; top: 0; z-index: 20;
        padding: 0.55rem 0.9rem; background: var(--seite); color: #efe9e1; border-bottom: 1px solid #221e1a;
    }
    .handykopf img { width: 2.1rem; height: auto; display: block; }
    .handykopf span { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
    .handyprofil { margin-left: auto; color: #d8cec1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
    .handyprofil .navsymbol { width: 1.4rem; height: 1.4rem; }

    .tableiste {
        display: flex; align-items: flex-end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: var(--seite); border-top: 1px solid #221e1a; padding: 0.3rem 0.2rem calc(0.4rem + env(safe-area-inset-bottom));
    }
    .tableiste > a, .tableiste .plusmenue { flex: 1; }
    .tableiste > a {
        display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-height: 3.3rem; justify-content: center;
        color: #8f857a; text-decoration: none; font-size: 0.68rem; font-weight: 600;
    }
    .tableiste > a[aria-current="page"] { color: var(--marke-satt); }
    .tableiste .navsymbol { width: 1.4rem; height: 1.4rem; }
    .plusmenue > summary { list-style: none; display: flex; justify-content: center; cursor: pointer; }
    .plusmenue > summary::-webkit-details-marker { display: none; }
    .plusrund { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-top: -1.6rem; border-radius: 50%; background: var(--marke-satt); color: var(--auf-marke); border: 4px solid var(--grund); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
    .plusrund .navsymbol { width: 1.6rem; height: 1.6rem; }
    .plusblatt {
        position: fixed; left: 0.6rem; right: 0.6rem; bottom: calc(4.6rem + env(safe-area-inset-bottom));
        display: grid; gap: 0.4rem; padding: 0.6rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 1rem; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    }
    .plusblatt a { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border-radius: 0.7rem; background: var(--karte-2); color: var(--tinte); text-decoration: none; font-weight: 600; }
    .plusblatt .plusblatt-knopf { gap: 0.75rem; padding: 0.8rem 0.9rem; border-radius: 0.7rem; background: var(--karte-2); font-weight: 600; }

    .uebersicht-raster { display: flex; flex-direction: column; gap: 0.9rem; }
    .uebersicht-links, .uebersicht-rechts { display: contents; }
    .uebersicht-raster .stallnotiz { order: 1; }
    .uebersicht-raster .heutegaben { order: 2; }
    .uebersicht-raster .kalender { order: 3; }
    .uebersicht-raster .aufgaben { order: 4; }
    .kalenderliste { max-height: 70vh; }
    .uebersichtkopf h1 { font-size: 1.6rem; }
}
.tageszeile.eintrag--vorgemerkt, .tageszeile.eintrag--faellig { font-style: normal; color: var(--tinte); }
.tageszeile.eintrag--vorgemerkt .tagesgesundheit, .tageszeile.eintrag--faellig .tagesgesundheit { color: var(--faellig); }

/* ---------------------------------------------------------------------
   Helle Karten auf dunklem Grund (Rueckmeldung 2026-09-15). Was direkt
   auf dem Grund steht, bekommt helle Schrift.
   --------------------------------------------------------------------- */
main { color: var(--auf-grund); }
main > h1, main > h2, main > h3, .kopfzeile h1, .uebersichtkopf h1, main > .kopfzeile .zusatz { color: var(--auf-grund); }
main > p, main > .leer, main > .zusatz, .kopfzeile .zusatz { color: var(--auf-grund-leise); }
main > p a, .kopfzeile a:not(.knopf):not(.plus-gross) { color: var(--marke-zart); }
.gruppe { color: var(--auf-grund); border-bottom-color: #3a342c; }
.gruppe .kw { color: var(--auf-grund-leise); }
.tageskopf { color: var(--auf-grund-leise); }
.karte, .liste, .tabelle, main > form, .kachel, .wetter, .hinweis, .errors, table, details.mehr, .plusblatt { color: var(--tinte); }
.karte h1, .karte h2, .karte h3, .tabelle th { color: var(--tinte); }
.karte .tabelle th, table th { color: var(--gedaempft); }
.karte { border-color: transparent; box-shadow: var(--schatten); }
main > form:not(.planfilter) { border-color: transparent; }
.unternav a { background: #2b2620; color: var(--auf-grund); border-color: #3a342c; }
.unternav a[aria-current="page"] { background: var(--karte); color: var(--tinte); }
.planfilter label { color: var(--auf-grund-leise); }
.weeknav a { color: var(--tinte); }
main > .mehr { border-top-color: #3a342c; }
main > .mehr > summary { color: var(--marke-zart); }

/* Tage im Kalender: ein kraeftiger Balken je Tag. */
.tag-kopf {
    margin: 0.7rem -0.35rem 0.25rem; padding: 0.45rem 0.7rem; border: 0; border-radius: 0.45rem;
    background: #2f2923; color: #f7f2ea; font-size: 0.98rem; letter-spacing: 0.01em;
}
.tag-kopf strong { font-weight: 700; }
.tag-kopf--vorbei { background: #d9d0c3; color: #4a433b; }
.tag-kopf--heute { background: var(--marke-satt); color: #fff; }
.tag-kopf--heute .heute-marke { background: #fff; color: var(--marke-satt); }
.tag-kopf--ueberfaellig { background: var(--warnung); color: #fff; margin-top: 0.2rem; }
.ueberfaellig { margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--warnung-zart); }

/* Bestaetigte Termine klar, Vormerkungen und errechnete Faelligkeiten
   kursiv und leise, bis sie bestaetigt sind. */
.tageszeile { color: var(--tinte); }
.tageszeile .tagespferd strong { font-weight: 700; }
.tageszeile .tagesgesundheit { font-weight: 600; }
.tageszeile.eintrag--vorgemerkt, .tageszeile.eintrag--faellig { background: none; font-style: italic; color: var(--gedaempft); }
.tageszeile.eintrag--vorgemerkt .tagespferd strong, .tageszeile.eintrag--faellig .tagespferd strong { font-weight: 400; color: var(--gedaempft); }
.tageszeile.eintrag--vorgemerkt .tagesgesundheit, .tageszeile.eintrag--faellig .tagesgesundheit { font-weight: 400; color: var(--gedaempft); }
.tageszeile.eintrag--vorgemerkt .pferdebild, .tageszeile.eintrag--faellig .pferdebild { opacity: 0.6; }
.tageszeile.eintrag--vorgemerkt .wecker, .tageszeile.eintrag--faellig .wecker { color: var(--gedaempft); }
.tageszeile.eintrag--vorgemerkt.bereich--gesundheit, .tageszeile.eintrag--faellig.bereich--gesundheit { border-left-style: dashed; }
.ueberfaellig .tageszeile { font-style: normal; color: var(--tinte); }
.ueberfaellig .tageszeile .tagespferd strong, .ueberfaellig .tageszeile .tagesgesundheit { font-weight: 700; color: var(--tinte); }
.ueberfaellig .tageszeile .pferdebild { opacity: 1; }

.heutegaben .gabe { background: var(--karte-2); }
.heutegaben .gabe--medication { background: var(--warnung-zart); }
.plus-klein { background: var(--karte); }
.wetter { border-color: transparent; }
.wettertag small, .wetterart { color: var(--gedaempft); }
.wetterort { color: var(--tinte); }
@media (max-width: 64rem) {
    .uebersicht-raster { align-items: stretch; }
}
.symbol--erledigen { color: var(--erfolg); }
.symbol--erledigen:hover { background: #e6eed9; color: var(--erfolg); }
.symbole form { display: inline-flex; }
.tageszeit--seit { font-size: 0.78rem; font-weight: 700; color: var(--warnung); white-space: nowrap; }
/* Stallnotiz: Stift statt Text. */
.notizedit > summary { list-style: none; cursor: pointer; }
.notizedit > summary::-webkit-details-marker { display: none; }
.notizedit > summary h2 { margin: 0; }
.notizedit > summary .stift { margin-left: auto; }
.notizedit[open] ~ .notiztext, .notizedit[open] ~ .zusatz { display: none; }
.notiztext { margin-top: 0.5rem; }
button.plus-klein { margin: 0; min-height: 0; background: var(--karte); color: var(--tinte); }
button.plus-klein:hover { background: var(--karte-2); color: var(--tinte); border-color: var(--linie); }

/* Rueckmeldung 2026-09-15: Mahlzeit deutlicher, Mittel verlinkt, und
   alles, was bisher dunkel auf dunkel stand, hell hinterlegt. */
.heutegaben-mahlzeit h3 {
    display: inline-block; margin: 0.5rem 0 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px;
    background: var(--marke-satt); color: #fff; font-size: 0.8rem; letter-spacing: 0.1em;
}
.gabelink { color: var(--tinte); text-decoration: none; text-decoration-color: var(--marke); text-underline-offset: 0.2em; }
.gabelink:hover { color: var(--marke-satt); }

.gabe { background: var(--karte-2); color: var(--tinte); }
.gabe .art { color: var(--gedaempft); }
.tabelle, .tabelle table { background: var(--karte); color: var(--tinte); }
.tabelle th { color: var(--gedaempft); }
.datenblatt, .datenblatt th, .datenblatt td { color: var(--tinte); }
main > .liste, main > section:not(.karte) .liste { background: var(--karte); }
fieldset { border-color: var(--linie); }

/* =====================================================================
   Rueckmeldungen 2026-09-15 (Nachmittag): nicht zu brav in Beige-Braun,
   Seitenleiste nicht dunkel, Titel auffaelliger als der Text, Text
   dezenter und kompakter, Knoepfe erkennbar, Formulare kleiner,
   Futtertabelle strukturiert.
   ===================================================================== */
:root {
    --akzent: #1e6a6f;
    --akzent-dunkel: #15514f;
    --akzent-zart: #e1eeec;
    --marke-satt: #1e6a6f;
    --marke: #5f9a9c;
    --marke-zart: #e7f1ef;
    --karte: #fbf9f5;
    --karte-2: #f0ece4;
    --linie: #d9d2c6;
    --linie-stark: #b9b0a2;
    --seitenleiste: #f3efe8;
}

/* Grundschrift dezenter und kompakter, Titel bleiben gross. */
body { font-size: 0.94rem; line-height: 1.42; }
.karte p, .karte dd, .karte li, .karte td { line-height: 1.4; }
.karte h2 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--tinte); }
.karte h3 { font-size: 1.25rem; margin: 0 0 0.35rem; color: var(--tinte); }
.datenblatt th, .angaben dt { font-size: 0.8rem; color: var(--gedaempft); font-weight: 500; }
.datenblatt td, .angaben dd { font-size: 0.9rem; }
.datenblatt th, .datenblatt td { padding: 0.28rem 0.4rem; }
.zusatz.klein, .klein { font-size: 0.8rem; }

/* Seitenleiste hell. */
.seitenleiste { background: var(--seitenleiste); border-right: 1px solid #ddd5c8; }
.seitenleiste .hauptnav a { color: #3b352e; }
.seitenleiste .hauptnav a:hover { background: #e7e0d5; color: var(--tinte); }
.seitenleiste .hauptnav a[aria-current="page"] { background: var(--akzent); color: #fff; box-shadow: none; }
.seitenlinks h2 { color: #8a8076; }
.seitenlink { color: #4a433b; }
.seitenlink:hover { background: #e7e0d5; color: var(--tinte); }
.seitenwer { border-top-color: #ddd5c8; }
.seitenprofil { color: #3b352e; }
.seitenprofil:hover, .seitenprofil[aria-current="page"] { background: #e7e0d5; color: var(--tinte); }
.seitenprofil small { color: #8a8076; }
.kuerzel { background: var(--akzent); color: #fff; }
.seitenmarke img { width: 3.2rem; }

@media (max-width: 64rem) {
    .handykopf { background: var(--seitenleiste); color: var(--tinte); border-bottom-color: #ddd5c8; }
    .handyprofil { color: #3b352e; }
    .tableiste { background: var(--seitenleiste); border-top-color: #ddd5c8; }
    .tableiste > a { color: #6f675d; }
    .tableiste > a[aria-current="page"] { color: var(--akzent); }
    .plusrund { background: var(--akzent); color: #fff; }
}

/* Knoepfe: auf dunklem Grund klar als Knopf erkennbar. */
button, .knopf { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button:hover, .knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.knopf--still, button.still { background: var(--karte); border-color: var(--linie-stark); color: var(--akzent-dunkel); }
.knopf--still:hover, button.still:hover { background: var(--akzent-zart); border-color: var(--akzent); color: var(--akzent-dunkel); }
.kopfzeile .knopf, .kopfzeile .knopf--still { background: var(--akzent); border-color: #5f9a9c; color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.kopfzeile .knopf:hover { background: var(--akzent-dunkel); }
/* Genau so hoch wie die Knoepfe daneben und auf gleicher Mitte
   (Katja, 2026-09-21: "horizontal eingemittet mit den Buttons"). */
.kopfzeile .symbol { background: var(--akzent); color: #fff; width: 2.25rem; height: 2.25rem; align-self: center; }
.kopfzeile .symbol:hover { background: var(--akzent-dunkel); color: #fff; }
.plus-gross { background: var(--akzent); color: #fff; }
.plus-gross:hover { background: var(--akzent-dunkel); }
.heute-marke { color: var(--akzent); }
.tag-kopf--heute { background: var(--akzent); }
.tag-kopf--heute .heute-marke { color: var(--akzent); }
.heutegaben-mahlzeit h3 { background: var(--akzent); }
a { color: var(--akzent-dunkel); }
.gabelink { color: var(--tinte); }
.unternav a[aria-current="page"] { background: var(--akzent); color: #fff; border-color: var(--akzent); }

/* Formulare am PC kompakt, Felder nebeneinander. */
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"],
input[type="file"], input[type="search"], input[type="url"], select, textarea {
    min-height: 2.4rem; padding: 0.4rem 0.6rem; font-size: 0.95rem;
}
label { margin-top: 0.65rem; font-size: 0.82rem; }
button, .knopf { min-height: 2.4rem; padding: 0.45rem 0.95rem; font-size: 0.92rem; }
main > form:not(.planfilter) { max-width: 42rem; padding: 0.4rem 1.1rem 1.1rem; }
.formraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.formraster .feld--breit, .formraster .mittelfelder, .formraster details { grid-column: 1 / -1; }
.formraster .mittelfelder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.formraster .mittelfelder[hidden] { display: none; }
/* Das Kaestchen Erinnerung steht auf der Hoehe von Zustaendig daneben
   (Katja, 2026-09-21: "Erinnerung hängt in der Luft"). */
.formraster .feld--erinnerung { align-self: end; }
.formraster .feld--erinnerung .kasten { min-height: 2.4rem; }
.formraster details.mehr { margin-top: 0.8rem; padding-top: 0.3rem; }
.ganztaegig { margin-top: 0.35rem; font-weight: 500; }
@media (max-width: 40rem) {
    .formraster, .formraster .mittelfelder { grid-template-columns: 1fr; }
}

/* Futtertabelle: senkrechte Linien, kraeftige waagrechte Linien,
   Mahlzeiten betont, Gaben mit Trennlinien. */
table.futtertabelle { border-collapse: collapse; }
.futtertabelle thead th { background: var(--akzent); color: #fff; font-size: 0.95rem; letter-spacing: 0.06em; padding: 0.55rem 0.8rem; }
.futtertabelle thead th:first-child { background: #3b352e; }
.futtertabelle tbody th, .futtertabelle tbody td { border-bottom: 2px solid var(--linie-stark); padding: 0.6rem 0.8rem; }
.futtertabelle td, .futtertabelle thead th + th { border-left: 1px solid var(--linie-stark); }
.futtertabelle tbody tr:last-child th, .futtertabelle tbody tr:last-child td { border-bottom: 0; }
.futtertabelle .futtertext { font-size: 0.95rem; font-weight: 500; }
.futtertabelle .gabe { margin: 0; padding: 0.35rem 0.2rem 0.35rem 0; border-radius: 0; border-left: 0; background: none; border-top: 1px dashed var(--linie-stark); font-size: 0.85rem; }
.futtertabelle .gabe:first-of-type { margin-top: 0.4rem; }
.futtertabelle .gabe--medication strong { color: var(--warnung); }
.pferdwege { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.minikopf { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border: 1px solid var(--linie-stark); border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-decoration: none; color: var(--akzent-dunkel); background: #fff; }
.minikopf svg { width: 0.85rem; height: 0.85rem; }
.minikopf:hover { background: var(--akzent-zart); border-color: var(--akzent); }
@media (max-width: 46rem) {
    table.futtertabelle thead { display: none; }
    table.futtertabelle td { border-left: 0; }
    table.futtertabelle td::before { color: #fff; background: var(--akzent); display: inline-block; padding: 0 0.45rem; border-radius: 0.3rem; margin-bottom: 0.3rem; }
}

/* Futterplan auf der Pferdeseite: Mahlzeit vorne, je Zeile eine Linie. */
.mahlzeitplan { border-top: 2px solid var(--linie-stark); margin-top: 0.4rem; }
.mahlzeitplan-zeile { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--linie); font-size: 0.9rem; }
.mahlzeitplan-name { font-weight: 700; color: var(--akzent-dunkel); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; padding-top: 0.12rem; }
.vermerkedit fieldset { margin-top: 0.4rem; }
.vermerke { margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.vermerk { font-size: 0.78rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--akzent-zart); color: var(--akzent-dunkel); border: 0; }

/* Pferdeliste mit Fotos. */
.pferdekacheln { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.pferdekachel { padding: 0; overflow: hidden; gap: 0; }
.pferdekachel-foto { display: block; width: 100%; height: 11rem; object-fit: cover; object-position: 40% 25%; }
.pferdekachel-foto--leer { display: grid; place-items: center; background: var(--akzent-zart); color: var(--akzent); font-family: var(--serif); font-size: 3rem; }
.pferdekachel .name { padding: 0.6rem 0.9rem 0; }
.pferdekachel .naechstes { padding: 0 0.9rem 0.7rem; }

/* Pferdeseite ruhig nach Katjas Vorlage (2026-09-15). */
.akte-kopf { align-items: center; }
.akte-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.akte-titel h1 { margin: 0 0.4rem 0 0; }
.pille { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.75rem; border-radius: 999px; background: #2f2a24; color: var(--auf-grund); font-size: 0.82rem; font-weight: 600; }
.pille--status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #6cc070; }

.akte-haupt { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); gap: 1.4rem; padding: 1.2rem; margin-bottom: 1.1rem; }
.akte-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 40% 25%; border-radius: 0.6rem; display: block; }
.akte-angaben h2 { font-size: 1.35rem; margin: 0 0 0.35rem; }
.akte-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
.akte-spalten > div + div { border-left: 1px solid var(--linie); padding-left: 1.6rem; }
.akte-abschnitt { border-top: 1px solid var(--linie); margin-top: 0.8rem; padding-top: 0.7rem; }
.akte-angaben .angaben { display: grid; grid-template-columns: 9rem 1fr; gap: 0.15rem 0.8rem; margin: 0; }
.akte-angaben .angaben dt { font-size: 0.8rem; color: var(--gedaempft); padding-top: 0.1rem; }
.akte-angaben .angaben dd { margin: 0; font-size: 0.9rem; }
.akte-mehr > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem; }
.akte-mehr > summary::-webkit-details-marker { display: none; }
.akte-mehr > summary h2 { margin: 0; flex: none; }
.akte-mehr > summary .zusatz { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akte-mehr > summary::after { content: "▾"; color: var(--gedaempft); }
.akte-mehr[open] > summary .zusatz { visibility: hidden; }
.akte-mehr p { font-size: 0.88rem; margin: 0.4rem 0 0; }

.akte-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: start; margin-bottom: 1.1rem; }
.akte-paar > .karte { margin: 0; }
.akte-paar h2 { font-size: 1.35rem; margin: 0; }
.akte-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; padding: 0.35rem 0; border-top: 1px solid var(--linie); font-size: 0.88rem; }
.akte-zeile .symbole { margin-left: auto; }
.akte-datum { min-width: 5.2rem; font-variant-numeric: tabular-nums; color: var(--gedaempft); font-size: 0.82rem; }
.akte-was { font-weight: 600; }
.akte-zeile--offen .akte-was { font-style: italic; font-weight: 500; }
.akte-fuss { margin: 0.5rem 0 0; font-size: 0.85rem; }
.akte-unterkopf { margin-top: 0.9rem; }
.akte-unterkopf h3 { margin: 0; font-size: 1.1rem; }
.akte-futter .titel-mit-plus .symbol { margin-left: auto; }
.vermerkzeile { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.4rem; }
.vermerkzeile .vermerke { margin: 0; }
.vermerkedit > summary { display: inline-flex; align-items: center; gap: 0.2rem; }
.vermerkedit[open] { flex-basis: 100%; }
.akte-futter .mahlzeitplan { margin-top: 0.2rem; }
.kalender-luft { flex: none; }

@media (max-width: 64rem) {
    .akte-haupt, .akte-paar, .akte-spalten { grid-template-columns: 1fr; }
    .akte-spalten > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); margin-top: 0.7rem; padding-top: 0.7rem; }
    .akte-bild img { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   Katjas Vorlage vom 2026-09-15 abends: Karten in klarem Weiss, sehr
   helles neutrales Grau als Hintergrund, Bronze nur fuer kleine Akzente
   und Aktionen, weniger schwere Balken und Rahmen. Seitenleiste dunkel.
   Ueberschreibt die Farbangaben der Abschnitte davor.
   ===================================================================== */
:root {
    color-scheme: light;
    --grund: #f3f2ef;
    --auf-grund: #1f1d1b;
    --auf-grund-leise: #6f6a64;
    --karte: #ffffff;
    --karte-2: #f6f5f2;
    --tinte: #1f1d1b;
    --gedaempft: #6f6a64;
    --linie: #ebe8e3;
    --linie-stark: #d9d4cc;
    --akzent: #7a5a3c;
    --akzent-dunkel: #5e442c;
    --akzent-zart: #f4ede5;
    --marke: #a3805c;
    --marke-satt: #7a5a3c;
    --marke-zart: #f4ede5;
    --training: #3d7ea6;
    --gesundheit: #c8773b;
    --erfolg: #3e8a52;
    --faellig: #a8761e;
    --faellig-zart: #faf4e6;
    --warnung: #b43b27;
    --warnung-zart: #fbebe7;
    --seite: #1c1917;
    --schatten: 0 1px 2px rgba(30, 25, 20, 0.06), 0 4px 14px rgba(30, 25, 20, 0.04);
}

body { background: var(--grund); color: var(--tinte); }
main { color: var(--tinte); }
.karte { background: var(--karte); border: 1px solid #ecebe7; box-shadow: var(--schatten); border-radius: 0.9rem; }
main > form:not(.planfilter) { background: var(--karte); border: 1px solid #ecebe7; }
h1 { color: var(--tinte); }

/* Seitenleiste wieder dunkel wie in der Vorlage. */
.seitenleiste { background: var(--seite); border-right: 0; }
.seitenleiste .hauptnav a { color: #e7e2da; }
.seitenleiste .hauptnav a:hover { background: #2a2622; color: #fff; }
.seitenleiste .hauptnav a[aria-current="page"] { background: #332e29; color: #fff; box-shadow: none; }
.seitenlinks h2 { color: #8f877d; }
.seitenlink { color: #d9d2c8; }
.seitenlink:hover { background: #2a2622; color: #fff; }
.seitenwer { border-top-color: #2e2a26; }
.seitenprofil { color: #e7e2da; }
.seitenprofil:hover, .seitenprofil[aria-current="page"] { background: #2a2622; color: #fff; }
.seitenprofil small { color: #8f877d; }
.kuerzel { background: #a3805c; color: #fff; }
.seitenmarke img { width: 3.4rem; }
@media (max-width: 64rem) {
    .handykopf { background: var(--seite); color: #f1ebe2; border-bottom-color: #2e2a26; }
    .handyprofil { color: #e7e2da; }
    .tableiste { background: var(--seite); border-top-color: #2e2a26; }
    .tableiste > a { color: #a39b90; }
    .tableiste > a[aria-current="page"] { color: #fff; }
    .plusrund { background: var(--akzent); color: #fff; border-color: var(--grund); }
}

/* Knoepfe und Akzente in Bronze, sparsam. */
button, .knopf { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button:hover, .knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.knopf--still, button.still, .kopfzeile .knopf--still { background: #fff; border-color: var(--linie-stark); color: var(--tinte); box-shadow: none; }
.knopf--still:hover, button.still:hover, .kopfzeile .knopf--still:hover { background: var(--karte-2); border-color: var(--akzent); color: var(--tinte); }
.kopfzeile .knopf { box-shadow: none; }
.kopfzeile .symbol { background: var(--akzent); color: #fff; }
.plus-gross { background: var(--akzent); color: #fff; box-shadow: none; }
.plus-gross:hover { background: var(--akzent-dunkel); }
button.plus-klein, .plus-klein { background: #fff; color: var(--tinte); border: 1px solid var(--linie-stark); }
.plus-klein.bereich--training { color: var(--training); border-color: var(--training); }
.plus-klein.bereich--gesundheit { color: var(--gesundheit); border-color: var(--gesundheit); }
a { color: var(--akzent-dunkel); }
.unternav a { background: #fff; color: var(--tinte); border-color: var(--linie-stark); }
.unternav a[aria-current="page"] { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.pille { background: #fff; color: var(--tinte); border: 1px solid var(--linie-stark); }
.pille--status::before { background: #3e8a52; }
.gruppe { color: var(--tinte); border-bottom-color: var(--linie-stark); }
.gruppe .kw, .tageskopf, main > p, main > .leer, main > .zusatz, .kopfzeile .zusatz { color: var(--gedaempft); }
main > p a, .kopfzeile a:not(.knopf):not(.plus-gross):not(.symbol) { color: var(--akzent-dunkel); }
main > .mehr { border-top-color: var(--linie); }
main > .mehr > summary { color: var(--akzent-dunkel); }
.planfilter label { color: var(--gedaempft); }

/* Wetter kompakt und ruhig. */
.wetter { background: #fff; border: 1px solid #ecebe7; box-shadow: var(--schatten); border-radius: 0.8rem; }
.wetterort, a.wetterort { background: #fff; color: var(--tinte); }
a.wetterort:hover { background: var(--karte-2); color: var(--tinte); }
.wettertag { border-left-color: var(--linie); }
.wettersymbol--clear, .wettersymbol--partly { color: var(--faellig); }

/* Kalender: leichte Tagekoepfe statt Balken. */
.kalenderliste { max-height: none; min-height: 0; overflow: visible; margin: 0; padding: 0; }
.tag-kopf { position: static; margin: 0.9rem 0 0; padding: 0.45rem 0.2rem; background: none; color: var(--tinte); border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; font-size: 1rem; }
.tag-kopf strong { font-weight: 600; }
.tag-kopf--heute { background: var(--karte-2); color: var(--tinte); border-bottom: 0; border-radius: 0.5rem; padding: 0.55rem 0.8rem; margin-top: 0.6rem; }
.tag-kopf--heute .heute-marke, .heute-marke { background: none; color: var(--tinte); padding: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.tag-kopf--vorbei { color: var(--gedaempft); background: none; }
.tag-kopf--ueberfaellig { background: var(--warnung-zart); color: var(--warnung); border-radius: 0.5rem; border: 0; padding: 0.5rem 0.8rem; margin-top: 0.3rem; font-weight: 600; }
.ueberfaellig { border-bottom: 0; margin-bottom: 0.3rem; }
.vergangen { margin-top: 0.4rem; border: 1px solid var(--linie); border-radius: 0.5rem; padding: 0 0.8rem; }
.vergangen > summary { cursor: pointer; padding: 0.55rem 0; color: var(--tinte); list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.vergangen > summary::-webkit-details-marker { display: none; }
.vergangen > summary::before { content: "›"; font-size: 1.2rem; color: var(--gedaempft); transition: transform .15s; }
.vergangen[open] > summary::before { transform: rotate(90deg); }
.vergangen[open] { padding-bottom: 0.6rem; }
.kalender-zwischen { margin: 1.3rem 0 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--linie-stark); font-family: var(--grotesk); font-size: 1rem; font-weight: 500; color: var(--tinte); }
.tag-leer { margin: 0.5rem 0.8rem; }

.tageszeile { grid-template-columns: 4.2rem 11rem minmax(0, 1fr) auto; min-height: 3rem; padding: 0.3rem 0 0.3rem 0.6rem; border-top: 0; border-bottom: 1px solid var(--linie); border-left: 3px solid transparent; }
.tageszeile .tageszeit { border-right: 1px solid var(--linie); align-self: stretch; display: flex; align-items: center; font-weight: 500; }
.tageszeile.bereich--training { border-left-color: var(--training); }
.tageszeile.bereich--gesundheit { border-left-color: var(--gesundheit); }
.tageszeile .tagesdetail { font-size: 0.92rem; }
.tageszeile .tageswer, .tageszeile small.tageswer { color: var(--gedaempft); font-size: 0.82rem; }
.tageszeile .tagesgesundheit { font-weight: 500; }
.tageszeile.eintrag--vorgemerkt, .tageszeile.eintrag--faellig { background: none; color: var(--gedaempft); font-style: italic; }
.symbole .symbol--erledigen { color: var(--erfolg); }
.symbole .symbol--einplanen { color: var(--akzent); }
.symbole .symbol--absagen { color: #8f877d; }
.tageszeit--seit { color: var(--warnung); border-right: 1px solid var(--linie); }

/* Supplement heute. */
.heutegaben-mahlzeit { gap: 0; margin-top: 0.7rem; border: 1px solid var(--linie); border-radius: 0.6rem; overflow: hidden; }
.heutegaben-mahlzeit h3 { display: block; margin: 0; padding: 0.45rem 0.8rem; border-radius: 0; background: var(--karte-2); color: var(--tinte); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; }
.heutegaben .gabe, .heutegaben .gabe--medication { background: #fff; border: 0; border-top: 1px solid var(--linie); border-radius: 0; padding: 0.6rem 0.8rem; gap: 0.7rem; }
.heutegaben .gabe:first-of-type { border-top: 0; }
.heutegaben .pferdebild { width: 2.4rem; height: 2.4rem; }
.heutegaben .was { display: grid; line-height: 1.25; }
.gabepferd { font-weight: 700; color: var(--tinte); text-decoration: none; }
.gabemittel { color: var(--gedaempft); font-size: 0.85rem; }
.gabemittel .gabelink { color: var(--gedaempft); text-decoration: none; text-decoration-color: var(--linie-stark); }
.heutegaben .gegeben { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--erfolg); font-size: 0.85rem; }
.heutegaben .gegeben svg { width: 1.1rem; height: 1.1rem; }
.heutegaben .gabe--medication .gabepferd { color: var(--tinte); }

/* Aufgaben */
.aufgaben .leer { text-align: center; font-style: normal; color: var(--tinte); margin: 0.8rem 0; }
.aufgabenzwischen { color: var(--gedaempft); display: flex; align-items: center; gap: 0.6rem; }
.aufgabenzwischen::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.haken { border-color: var(--warnung); background: #fff; }

/* Futtertabelle leichter */
.futtertabelle thead th, .futtertabelle thead th:first-child { background: var(--karte-2); color: var(--tinte); }
.futtertabelle tbody th, .futtertabelle tbody td { border-bottom: 1px solid var(--linie-stark); }
.futtertabelle td, .futtertabelle thead th + th { border-left: 1px solid var(--linie); }
.minikopf { background: #fff; color: var(--tinte); }
.vermerk { background: var(--karte-2); color: var(--tinte); }
.mahlzeitplan-name { color: var(--tinte); }
.hinweisbox--betont { background: var(--faellig-zart); border-left-color: var(--faellig); }
.akte-spalten > div + div { border-left-color: var(--linie); }
.pferdekachel-foto--leer { background: var(--karte-2); color: var(--akzent); }
@media (max-width: 46rem) {
    table.futtertabelle td::before { background: var(--karte-2); color: var(--tinte); }
}
.karte h3.kalender-zwischen { font-family: var(--grotesk); font-size: 1rem; font-weight: 500; margin: 1.3rem 0 0; }

/* Pferdeseite, 2026-09-15 abends: Futterplan mit Menue links und Supplementen
   rechts, Training und Gesundheit mit eigener Scrollleiste. */
.akte-futter { margin-bottom: 1.1rem; }
.futter-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; margin-top: 0.4rem; }
.futter-gaben { border-left: 1px solid var(--linie); padding-left: 1.6rem; }
.futter-gaben .titel-mit-plus h3 { margin: 0; font-size: 1.1rem; }
.akte-scroll { max-height: 22rem; overflow-y: auto; margin-right: -0.4rem; padding-right: 0.4rem; }
.akte-pass { margin: 0.6rem 0 0; font-size: 0.88rem; }
.akte-kopf h1 { margin: 0; }
@media (max-width: 64rem) {
    .futter-spalten { grid-template-columns: 1fr; }
    .futter-gaben { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); padding-top: 0.8rem; }
}

/* Katja, 15.9. spaet: Wetter als kleine Zeile oben rechts, heute mit eigenem
   Hintergrund, Training und Gesundheit mit eigener Farbe, erledigt heller. */
.uebersichtkopf .wetter { order: 9; margin: 0 0 0 auto; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.75rem; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; color: var(--tinte); text-decoration: none; font-size: 0.8rem; }
.uebersichtkopf .wetter:hover { background: none; text-decoration: none; }
.uebersichtkopf .wettertag { flex: none; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0; border: 0; line-height: 1; }
.uebersichtkopf .wettertag small { font-size: 0.75rem; color: var(--gedaempft); }
.uebersichtkopf .wettersymbol { width: 1rem; height: 1rem; }
.uebersichtkopf .wettertag b { font-weight: 600; }
.wettermin { color: var(--gedaempft); margin-left: 0.1rem; }
@media (max-width: 46rem) {
    .uebersichtkopf .wetter { margin-left: 0; gap: 0.55rem; }
}

.kalendertag--heute { margin-top: 0.6rem; padding: 0.15rem 0.6rem 0.6rem; background: #efe6da; border: 1px solid #dfcfba; border-radius: 0.7rem; }
.kalendertag--heute .tag-kopf--heute { margin: 0; padding: 0.45rem 0.1rem; background: none; border: 0; color: var(--akzent-dunkel); }
.kalendertag--heute .tag-kopf--heute strong, .kalendertag--heute .heute-marke { color: var(--akzent-dunkel); font-weight: 700; }

.kalenderliste .tageszeile, .ueberfaellig .tageszeile { margin-top: 0.25rem; border-bottom: 0; border-left-width: 4px; border-radius: 0.45rem; }
.tageszeile.bereich--training { background: #dcebf4; }
.tageszeile.bereich--gesundheit { background: #f8e1cf; }
.tageszeile .tageszeit { border-right-color: rgba(0, 0, 0, 0.08); }
.tageszeile.eintrag--done { opacity: 1; color: var(--gedaempft); }
.tageszeile.eintrag--done.bereich--training { background: #f1f6fa; border-left-color: #a9c7da; }
.tageszeile.eintrag--done.bereich--gesundheit { background: #fcf3ec; border-left-color: #e5bf9f; }
.tageszeile.eintrag--done .tagespferd strong, .tageszeile.eintrag--done .tagesgesundheit { color: var(--gedaempft); font-weight: 500; }
.tageszeile.eintrag--done .pferdebild { opacity: 0.65; }
.tageszeile.eintrag--vorgemerkt, .tageszeile.eintrag--faellig { background: #fff; border: 1px dashed #e5bf9f; border-left: 4px dashed var(--gesundheit); }
.tageszeile.eintrag--cancelled { background: #f4f3f1; border-left-color: var(--linie-stark); }

.symbol--beschriftet { width: auto; height: auto; min-height: 1.9rem; display: inline-flex; gap: 0.3rem; padding: 0.2rem 0.6rem; border: 1px solid var(--akzent); border-radius: 999px; background: #fff; font-size: 0.78rem; font-style: normal; font-weight: 600; white-space: nowrap; text-decoration: none; }
.symbol--beschriftet svg { width: 1rem; height: 1rem; }
.symbole .symbol--beschriftet:hover { background: var(--akzent); color: #fff; }
@media (max-width: 46rem) {
    .symbol--beschriftet span { display: none; }
    .symbol--beschriftet { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; border-radius: 50%; }
}

.gabenuebersicht h2 { margin-top: 0; }
.titellink { color: inherit; text-decoration: none; }
.titellink:hover { text-decoration: none; text-underline-offset: 0.2em; }
.titellink::after { content: " ›"; color: var(--gedaempft); font-weight: 400; }

/* Tagekoepfe mit Hintergrund, Symbole als sichtbare Knoepfe. Katja, 15.9.
   spät: "viel mehr mit Hintergründen arbeiten im Kalender und kompakter.
   Icons für löschen und editieren seh ich nicht mal am Handy." */
.kalenderliste > .kalendertag > .tag-kopf, .vergangen .tag-kopf { margin-top: 0.7rem; padding: 0.35rem 0.6rem; background: #e8e5df; border: 0; border-radius: 0.4rem; }
.kalendertag--heute > .tag-kopf--heute { background: none; }
.vergangen .tag-kopf { color: var(--gedaempft); }
.tageszeile .symbole { gap: 0.25rem; padding-right: 0.35rem; }
.tageszeile .symbol:not(.symbol--beschriftet) { width: 2rem; height: 2rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); }
.tageszeile .symbol svg { width: 1.05rem; height: 1.05rem; }

/* ---------------------------------------------- Handy, 15.9. spät */
.handymenue-blatt { display: none; }
@media (max-width: 64rem) {
    .handykopf { gap: 0.3rem; padding: 0.45rem 0.6rem; }
    .handykopf .handymarke img { width: 2.3rem; }
    .handyaktionen { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
    .handysymbol { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #e7e2da; list-style: none; cursor: pointer; }
    .handysymbol::-webkit-details-marker { display: none; }
    .handysymbol .navsymbol { width: 1.45rem; height: 1.45rem; }
    .handysymbol:hover, .handymenue[open] > .handysymbol { background: #2e2a26; color: #fff; }
    .handymenue[open] > .handymenue-blatt {
        display: grid; gap: 0.1rem; position: fixed; top: 3.5rem; left: 0; right: 0; z-index: 40;
        max-height: calc(100vh - 3.5rem); overflow-y: auto; padding: 0.5rem 0.8rem 1.2rem;
        background: var(--seite); border-bottom: 1px solid #2e2a26; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    }
    .handymenue-blatt > a { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.6rem; border-radius: 0.5rem; color: #e7e2da; text-decoration: none; font-size: 1rem; }
    .handymenue-blatt > a[aria-current="page"] { background: #2e2a26; color: #fff; }
    .handymenue-blatt .navsymbol { width: 1.35rem; height: 1.35rem; }
    .handymenue-links { margin: 0.3rem 0; padding: 0.4rem 0; border-top: 1px solid #2e2a26; border-bottom: 1px solid #2e2a26; }
    .handymenue-links .seitenlink { padding: 0.6rem 0.6rem; font-size: 0.95rem; }
    .handymenue-blatt form { margin: 0; }

    /* Wetter steht am Handy als Sonne in der Kopfzeile. */
    .uebersichtkopf .wetter { display: none; }
    .uebersichtkopf { margin-bottom: 0.6rem; }
    .uebersichtkopf h1 { font-size: 1.25rem; }
}
@media (max-width: 46rem) {
    .kalender.karte { padding-left: 0.6rem; padding-right: 0.6rem; }
    .kalendertag--heute { padding: 0.1rem 0.35rem 0.4rem; }
    .kalenderliste .tageszeile, .ueberfaellig .tageszeile {
        grid-template-columns: 2.9rem minmax(0, 1fr) auto; grid-template-areas: "zeit pferd symbole" "zeit detail symbole";
        gap: 0 0.5rem; min-height: 0; padding: 0.3rem 0 0.3rem 0.4rem;
    }
    .tageszeile .tageszeit { grid-area: zeit; font-size: 0.82rem; }
    .tageszeile .tageszeit--seit { font-size: 0.72rem; line-height: 1.15; }
    .tageszeile .tagespferd { grid-area: pferd; min-width: 0; gap: 0.4rem; }
    .tageszeile .tagespferd strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tageszeile .pferdebild { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
    .tageszeile .tagesdetail { grid-area: detail; grid-column: auto; font-size: 0.82rem; }
    .tageszeile .symbole { grid-area: symbole; margin: 0; }
    .tageszeile .symbol:not(.symbol--beschriftet), .symbol--beschriftet { width: 2.1rem; height: 2.1rem; }
}
@media (max-width: 64rem) {
    .tableiste > a { min-height: 3rem; }
    .tableiste > a .navsymbol { width: 1.6rem; height: 1.6rem; }
}

/* Aufgaben, 15.9. spät: immer offen mit Scroll, Wiederholung "alle N Einheiten". */
.aufgabenkopf { display: flex; align-items: baseline; gap: 0.75rem; }
.aufgabenkopf h2 { margin: 0; }
.aufgabenkopf .plus-gross { margin-left: auto; align-self: center; }
.aufgaben-scroll { max-height: 24rem; overflow-y: auto; margin-top: 0.4rem; }
fieldset.wiederholen { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.wiederholen legend { padding: 0; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
.wiederholen { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.wiederholen-alle { display: inline-flex; align-items: center; gap: 0.4rem; }
.wiederholen-alle[hidden] { display: none; }
.wiederholen-alle label { margin: 0; font-weight: 400; }
.wiederholen input[type="number"] { width: 4.5rem; }
@media (max-width: 64rem) {
    .aufgaben-scroll { max-height: 20rem; }
}

/* Mehrere Pferde waehlen: Chips mit Bild, gewaehlt in Bronze. */
.pferdechips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pferdechips legend { width: 100%; padding: 0; margin: 0.65rem 0 0.35rem; font-size: 0.82rem; font-weight: 600; }
.pferdechip { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.25rem 0.7rem 0.25rem 0.3rem; border: 1px solid var(--linie-stark); border-radius: 999px; background: #fff; font-size: 0.9rem; font-weight: 500; color: var(--tinte); cursor: pointer; user-select: none; }
.pferdechip input { position: absolute; opacity: 0; pointer-events: none; }
.pferdechip .pferdebild { width: 1.8rem; height: 1.8rem; }
/* Pferdewahl und Angaben sind zwei Raster: Abstand vor dem Feld darunter (Katja, 2026-11-09). */
.form--gesundheit > .formraster + .formraster { margin-top: 1.25rem; }
.pferdechip:has(input:checked) { background: var(--akzent); border-color: var(--akzent); color: #fff; }
/* Kein Rahmen um ein Pferd, auch nicht beim Fokus (Katja, 2026-10-16). */
.pferdechip:has(input:focus-visible) { outline: none; }

/* Liste Training und Gesundheit, 15.9. spät: dicht, nach Wochen gruppiert,
   Stand als Symbol, Notiz als Anleser mit i. */
.kopfzeile .symbol--gruppe { margin-left: auto; background: #fff; border: 1px solid var(--linie-stark); color: var(--tinte); }
.eintragsliste { padding-top: 0.2rem; }
.eintragsgruppe { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.9rem 0 0.2rem; padding: 0.3rem 0.6rem; background: #e8e5df; border-radius: 0.4rem; font-family: var(--grotesk); font-size: 0.9rem; font-weight: 600; color: var(--tinte); }
.eintragsgruppe:first-child { margin-top: 0.3rem; }
.eintragsgruppe .zusatz { font-weight: 400; font-size: 0.8rem; }
.eintragzeile { display: grid; grid-template-columns: 1.4rem 5.2rem minmax(0, 1fr) auto; align-items: start; gap: 0 0.5rem; padding: 0.28rem 0.2rem; border-bottom: 1px solid var(--linie); font-size: 0.9rem; line-height: 1.35; }
.eintragstand { padding-top: 0.05rem; }
.eintragstand svg { width: 1.1rem; height: 1.1rem; }
.eintragzeile--erledigt .eintragstand { color: var(--erfolg); }
.eintragzeile--geplant .eintragstand { color: var(--training); }
.eintragzeile--automatisch .eintragstand { color: var(--gesundheit); }
.eintragzeile--automatisch .eintragwas { font-style: italic; }
.eintragzeile--abgesagt { color: var(--gedaempft); }
.eintragzeile--abgesagt .eintragwas { text-decoration: line-through; }
.eintragdatum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eintragdatum small { color: var(--gedaempft); margin-left: 0.2rem; }
.eintragperson, .eintragart { color: var(--gedaempft); }
.eintragnotiz { display: block; color: var(--gedaempft); font-size: 0.82rem; }
.notiz-i { display: inline; }
.notiz-i > summary { display: inline-grid; place-items: center; list-style: none; cursor: pointer; vertical-align: -0.2rem; color: var(--akzent); }
.notiz-i > summary::-webkit-details-marker { display: none; }
.notiz-i > summary svg { width: 1.05rem; height: 1.05rem; }
.notiz-voll { display: block; margin: 0.3rem 0 0.2rem; padding: 0.45rem 0.6rem; background: var(--karte-2); border-radius: 0.4rem; color: var(--tinte); }
.eintragzeile .symbole { gap: 0.1rem; }
.eintragzeile .symbol { width: 1.9rem; height: 1.9rem; }
@media (max-width: 46rem) {
    .eintragzeile { grid-template-columns: 1.3rem minmax(0, 1fr) auto; }
    .eintragdatum { grid-column: 2; font-size: 0.8rem; color: var(--gedaempft); }
    .eintragwas { grid-column: 2; }
    .eintragzeile .symbole { grid-column: 3; grid-row: 1 / span 2; }
}

/* Gesundheitsformular, 15.9. spät: Datum und Uhrzeit in einer Zeile, auch am Handy. */
.datumzeit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 0.7rem; }
.datumzeit .ganztaegig { grid-column: 2; margin-top: 0.35rem; }
input[type="date"], input[type="time"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
.formraster input, .formraster select, .formraster textarea { max-width: 100%; box-sizing: border-box; }

/* Katja, 15.9. spät: heute gelb, Erledigt als gruenes Feld mit weissem Haken,
   weniger Luft auf dem Dashboard. */
.kalendertag--heute { background: #fff4c7; border: 2px solid #e8c547; }
.kalendertag--heute .tag-kopf--heute, .kalendertag--heute .tag-kopf--heute strong, .kalendertag--heute .heute-marke { color: #6b5200; }
.symbole .symbol--erledigen, .tageszeile .symbole .symbol--erledigen, .symbol--erledigen { background: var(--erfolg); border-color: var(--erfolg); color: #fff; }
.symbole .symbol--erledigen:hover, .symbol--erledigen:hover { background: #2f6b3a; border-color: #2f6b3a; color: #fff; }
.symbol--erledigen .symbol-erledigen circle { fill: none; stroke: none; }
.symbol--erledigen .symbol-erledigen path { stroke-width: 2.6; }
@media (max-width: 64rem) {
    .karte { padding: 0.75rem 0.8rem; margin-bottom: 0.7rem; }
    .karte h2, .karte h2.titel-mit-plus { font-size: 1.3rem; margin: 0; }
    .titel-mit-plus .plus-gross, .aufgabenkopf .plus-gross { width: 2rem; height: 2rem; }
    .plus-klein { padding: 0.2rem 0.6rem; font-size: 0.82rem; min-height: 0; }
    .uebersichtkopf h1 { font-size: 1.15rem; }
    .stallnotiz-neu { padding: 0.2rem 0.6rem; font-size: 0.82rem; }
    .kalender-zwischen, .karte h3.kalender-zwischen { margin-top: 0.8rem; font-size: 0.9rem; }
    .kalenderliste > .kalendertag > .tag-kopf { margin-top: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.9rem; }
    .kalendertag--heute .tag-kopf--heute { padding: 0.3rem 0.1rem; }
    .tageszeile .symbol:not(.symbol--beschriftet), .symbol--beschriftet { width: 1.9rem; height: 1.9rem; }
    .tageszeile .symbol svg { width: 0.95rem; height: 0.95rem; }
}

/* Eingabemasken ueberall kompakter, damit Speichern auf einer Seite sichtbar
   ist (Katja, 15.9. spät). Schrift bleibt 16px, sonst zoomt das iPhone. */
label { margin-top: 0.5rem; margin-bottom: 0; font-size: 0.8rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"],
input[type="file"], input[type="search"], input[type="url"], input[type="email"], select, textarea {
    min-height: 2.35rem; margin-top: 0.15rem; padding: 0.3rem 0.55rem; font-size: 1rem;
}
textarea { min-height: 3.6rem; }
input[type="date"], input[type="time"] { height: 2.35rem; -webkit-appearance: none; appearance: none; text-align: left; }
main > form, .karte > form { padding-top: 0.2rem; }
button, .knopf { min-height: 2.4rem; margin-top: 0.7rem; }
.formraster details.mehr { margin-top: 0.5rem; padding-top: 0; }
.formraster details.mehr > summary { font-size: 0.85rem; }
.formknoepfe { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }
.formknoepfe button, .formknoepfe .knopf { margin-top: 0; }
main > h1 { margin-bottom: 0.4rem; }
@media (max-width: 64rem) {
    main > h1, .kopfzeile h1 { font-size: 1.45rem; line-height: 1.15; }
    main > form { padding: 0.6rem 0.8rem 0.8rem; }
    .pferdechip { padding: 0.15rem 0.55rem 0.15rem 0.2rem; font-size: 0.85rem; }
    .pferdechip .pferdebild { width: 1.5rem; height: 1.5rem; }
    .formraster { gap: 0 0.6rem; }
}

/* Korrektur 15.9. spät: offen = weisser Knopf mit gruenem Haken,
   erledigt = gruener Kreis mit weissem Haken. */
.symbole .symbol--erledigen, .tageszeile .symbole .symbol--erledigen, .symbol--erledigen { background: #fff; border: 1px solid var(--erfolg); color: var(--erfolg); }
.symbole .symbol--erledigen:hover, .symbol--erledigen:hover { background: #e6eed9; border-color: var(--erfolg); color: var(--erfolg); }
.symbol--erledigen .symbol-erledigen circle { stroke: none; }
.symbol--erledigt, .tageszeile .symbole .symbol--erledigt { background: var(--erfolg); border: 1px solid var(--erfolg); color: #fff; cursor: default; }
.symbol--erledigt:hover { background: var(--erfolg); color: #fff; }
.symbol--erledigt .symbol-erledigen circle { stroke: none; }
.symbol--erledigt .symbol-erledigen path { stroke-width: 2.6; }
.eintragzeile--erledigt .eintragstand .symbol-erledigen circle { fill: var(--erfolg); stroke: var(--erfolg); }
.eintragzeile--erledigt .eintragstand .symbol-erledigen path { stroke: #fff; stroke-width: 2.4; }

/* Start und Ende, 15.9. spät: ganztaegig blendet die Uhrzeiten zurueck. */
.zeitraum .datumzeit + .datumzeit { margin-top: 0.1rem; }
.zeitraum .ganztaegig { margin-top: 0.4rem; }
.zeitraum--ganztaegig input[type="time"] { opacity: 0.45; }
.kalenderwoche, .karte h3.kalenderwoche { margin: 0.9rem 0 0.1rem; font-family: var(--grotesk); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gedaempft); }
.kalenderliste > .kalenderwoche:first-child { margin-top: 0.4rem; }
.tableiste > a, .tableiste .plusmenue { flex: 1 1 0; }

/* Kalenderseite, 15.9. spät: kompakt, Wochen auf- und zuklappbar, eine Zeile
   je Termin, Monat als Raster mit farbigen Symbolen, Details als Fenster. */
.kalenderkopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.kalenderkopf h1 { margin: 0; }
.ansichtwahl { display: flex; gap: 0.25rem; margin-left: auto; }
.ansichtwahl .symbol { width: 2.2rem; height: 2.2rem; margin: 0; background: #fff; border: 1px solid var(--linie-stark); color: var(--tinte); }
.ansichtwahl .symbol[aria-current="page"], .ansichtwahl .symbol--aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
#kalenderfilter { margin-bottom: 0.6rem; }
.planergebnis { display: grid; gap: 0.45rem; }

.planwoche { background: #fff; border-radius: 0.6rem; box-shadow: var(--schatten); overflow: hidden; }
.planwoche-kopf { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.9rem; }
.planwoche-kopf::-webkit-details-marker { display: none; }
.planwoche-kopf::before { content: "›"; color: var(--gedaempft); transition: transform .15s; display: inline-block; }
.planwoche[open] > .planwoche-kopf::before { transform: rotate(90deg); }
.planwoche-kopf .zusatz { margin-left: auto; font-weight: 400; }
.planwoche[open] { padding-bottom: 0.4rem; }
.plantag { margin: 0 0.5rem 0.3rem; }
.plantag-kopf { padding: 0.25rem 0.5rem; background: #e8e5df; border-radius: 0.35rem; font-size: 0.85rem; }
.plantag--heute { background: #fff4c7; border: 2px solid #e8c547; border-radius: 0.5rem; padding: 0.15rem 0.3rem 0.3rem; }
.plantag--heute .plantag-kopf { background: none; color: #6b5200; font-weight: 600; }

.terminzeile { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; align-items: center; gap: 0 0.4rem; margin-top: 0.2rem; padding: 0.15rem 0.3rem 0.15rem 0.35rem; border-left: 4px solid transparent; border-radius: 0.4rem; min-height: 2.4rem; }
.terminzeile.bereich--training { background: #dcebf4; border-left-color: var(--training); }
.terminzeile.bereich--gesundheit { background: #f8e1cf; border-left-color: var(--gesundheit); }
.terminzeile.eintrag--done.bereich--training { background: #f1f6fa; border-left-color: #a9c7da; color: var(--gedaempft); }
.terminzeile.eintrag--done.bereich--gesundheit { background: #fcf3ec; border-left-color: #e5bf9f; color: var(--gedaempft); }
.terminzeile.eintrag--vorgemerkt, .terminzeile.eintrag--faellig { background: #fff; border: 1px dashed #e5bf9f; border-left: 4px dashed var(--gesundheit); font-style: italic; }
.terminzeile.eintrag--cancelled { background: #f4f3f1; border-left-color: var(--linie-stark); text-decoration: line-through; color: var(--gedaempft); }
.tz-zeit { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.tz-was { display: flex; align-items: center; gap: 0.4rem; min-width: 0; min-height: 0; margin: 0; padding: 0.15rem 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.tz-was:hover { background: none; color: inherit; }
.tz-was .pferdebild { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.tz-was strong { font-size: 0.92rem; }
.tz-art { overflow: hidden; text-overflow: ellipsis; font-size: 0.82rem; color: var(--gedaempft); }
.tz-art .wecker { width: 0.9rem; height: 0.9rem; vertical-align: -0.1rem; }
.terminzeile .symbole { margin: 0; }
.terminzeile .symbol { width: 1.9rem; height: 1.9rem; margin: 0; }
.terminzeile .symbol svg { width: 0.95rem; height: 0.95rem; }

.planmonat { padding: 0.6rem; }
.planmonat-titel { margin: 0 0 0.4rem; font-size: 1.1rem; }
.monatsraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.monatskopf { text-align: center; font-size: 0.72rem; color: var(--gedaempft); padding-bottom: 0.15rem; }
.monatstag { min-height: 3.4rem; padding: 0.15rem; background: #f7f6f3; border-radius: 0.3rem; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; }
.monatstag--fremd { background: none; }
.monatstag--fremd .monatstag-zahl { color: #c9c3ba; }
.monatstag--heute { background: #fff4c7; outline: 2px solid #e8c547; }
.monatstag-zahl { width: 100%; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--gedaempft); }
.termin-punkt-halter { display: contents; }
.termin-punkt { width: 1.35rem; height: 1.35rem; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 0; font-size: 0.7rem; font-weight: 700; color: #fff; display: inline-grid; place-items: center; cursor: pointer; }
.termin-punkt.bereich--training { background: var(--training); }
.termin-punkt.bereich--gesundheit { background: var(--gesundheit); }
.termin-punkt.eintrag--done { opacity: 0.45; }
.termin-punkt.eintrag--vorgemerkt, .termin-punkt.eintrag--faellig { background: #fff; color: var(--gesundheit); box-shadow: inset 0 0 0 1.5px var(--gesundheit); }
.termin-punkt.eintrag--cancelled { opacity: 0.3; text-decoration: line-through; }

.termindetails { width: min(26rem, calc(100vw - 2rem)); padding: 0.8rem 0.9rem 0.9rem; border: 0; border-top: 5px solid var(--linie-stark); border-radius: 0.8rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); color: var(--tinte); font-style: normal; text-decoration: none; white-space: normal; }
.termindetails::backdrop { background: rgba(20, 18, 15, 0.45); }
.termindetails.bereich--training { border-top-color: var(--training); }
.termindetails.bereich--gesundheit { border-top-color: var(--gesundheit); }
.termindetails-kopf { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--gedaempft); }
.termindetails-kopf form { margin: 0; }
.termindetails-kopf .symbol { width: 2rem; height: 2rem; margin: 0; background: none; border: 0; color: var(--gedaempft); font-size: 1rem; }
.termindetails .tagespferd { margin-top: 0.2rem; }
.termindetails-was { margin: 0.35rem 0; font-weight: 600; }
.termindetails .angaben { margin: 0.3rem 0; font-size: 0.88rem; }
.termindetails-symbole { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.termindetails-symbole .symbol { width: 2.3rem; height: 2.3rem; background: #fff; border: 1px solid var(--linie-stark); }

/* Katja, 2026-09-15 nachts: "etwas weniger plump, kleiner feiner - die Titel
   der Wochen sind so heftig. Es sollte eleganter aussehen. Uhrzeit ist
   abgeschnitten." und "Filter oben: Auswahlfelder weiss hinterlegen.
   Beschriftung schöner lösen der Filterfelder." Filter in einer Zeile. */
.karte h2.eintragsgruppe { display: flex; align-items: baseline; gap: 0.45rem; margin: 1.1rem 0 0.1rem; padding: 0 0.2rem 0.3rem; background: none; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; font-family: var(--grotesk); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); }
.karte h2.eintragsgruppe:first-child { margin-top: 0.2rem; }
.karte h2.eintragsgruppe .zusatz { margin-left: auto; font-size: 0.72rem; font-weight: 400; letter-spacing: 0; }

.planfilter, .filterbox .planfilter { display: flex; flex-wrap: nowrap; gap: 0.4rem; align-items: flex-end; overflow-x: auto; padding: 0 0 0.15rem; background: none; border: 0; box-shadow: none; }
.planfilter.karte { padding: 0.45rem 0.55rem; background: var(--karte); }
.planfilter > div { flex: 1 1 0; min-width: 6.5rem; }
.planfilter label { display: block; margin: 0 0 0.12rem 0.25rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); }
.planfilter select, .planfilter input[type="date"], .planfilter input[type="text"], .filterbox .planfilter select, .filterbox .planfilter input[type="date"] { width: 100%; min-width: 0; height: 2rem; min-height: 0; padding: 0.15rem 0.45rem; background-color: #fff; border: 1px solid var(--linie); border-radius: 0.45rem; font-size: 0.82rem; color: var(--tinte); box-shadow: none; }
.planfilter .knopf { flex: 0 0 auto; align-self: flex-end; }
@media (max-width: 46rem) {
    .planfilter { flex-wrap: wrap; }
    .planfilter > div { flex: 1 1 40%; }
}

.planwoche { box-shadow: none; border: 1px solid #ecebe7; border-radius: 0.5rem; }
.planwoche + .planwoche { margin-top: 0.3rem; }
.planwoche-kopf { padding: 0.4rem 0.7rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); }
.planwoche[open] > .planwoche-kopf { color: var(--tinte); }
.planwoche-kopf .zusatz { font-size: 0.72rem; letter-spacing: 0; }
.planwoche--leer .planwoche-kopf { cursor: default; color: #aaa39a; }
.planwoche--leer .planwoche-kopf::before { visibility: hidden; }
.plantag-kopf { padding: 0.15rem 0.45rem; background: none; border-bottom: 1px solid var(--linie); border-radius: 0; font-size: 0.78rem; color: var(--gedaempft); }
.tz-was { justify-content: flex-start; }
.terminzeile { grid-template-columns: 3.1rem minmax(0, 1fr) auto; }
.tz-zeit { white-space: nowrap; }
.nachladen { height: 1px; }
.planfilter[hidden], [hidden] { display: none !important; }

/* Kalender: Titel und Filter bleiben am PC oben stehen, nur Monate und Wochen
   scrollen (Katja, 2026-09-15 nachts). */
.kalenderoben { position: sticky; top: 0; z-index: 5; margin: 0 -0.25rem 0.5rem; padding: 0.25rem 0.25rem 0.4rem; background: var(--grund, #f3f1ed); }
.kalenderoben .kopfzeile { margin-bottom: 0.3rem; }
.kalenderoben .planfilter { margin-bottom: 0; }
@media (max-width: 46rem) { .kalenderoben { position: static; } }
.frueher-laden { display: block; margin: 0 auto 0.5rem; padding: 0.2rem 0.8rem; min-height: 0; background: none; border: 1px dashed var(--linie-stark); border-radius: 1rem; color: var(--gedaempft); font-size: 0.75rem; }
.frueher-laden:hover { background: #fff; color: var(--tinte); border-color: var(--linie-stark); }
.planmonat + .planmonat { margin-top: 0.6rem; }
.planmonat-titel { font-size: 1.05rem; }

/* Ein Symbol je Stand, überall gleich (Katja, 2026-09-15 nachts). */
.standsymbol { display: inline-grid; place-items: center; width: 1.3rem; }
.standsymbol svg { width: 1.05rem; height: 1.05rem; }
.stand--planned { color: var(--training); }
.stand--vorgemerkt, .stand--faellig { color: var(--gesundheit); }
.stand--done { color: var(--erfolg); }
.stand--cancelled { color: var(--gedaempft); }
.terminzeile { grid-template-columns: 1.3rem 3.1rem minmax(0, 1fr) auto; }
.symbol--vormerken { color: var(--gesundheit); }

/* Ansicht als andere Rolle, nur für den Admin in der Testphase. */
.ansichtals { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; margin: 0 0 0.4rem; padding: 0; background: none; border: 0; }
.ansichtals label { margin: 0; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gedaempft); }
.ansichtals select { width: auto; min-width: 8rem; height: 1.9rem; min-height: 0; padding: 0.1rem 0.4rem; background-color: #fff; border: 1px solid var(--linie); border-radius: 0.45rem; font-size: 0.8rem; }
.ansichtals-balken { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; padding: 0.35rem 0.7rem; background: #fff4c7; border: 1px solid #e8c547; border-radius: 0.5rem; font-size: 0.82rem; color: #6b5200; }
.ansichtals-balken form { margin: 0; padding: 0; background: none; border: 0; }

/* Katja, 2026-09-16, zum Dashboard: "Zu unaufgeräumt. Titel verschwinden,
   Einträge zu gross." Ansicht als ohne Karte, oben rechts in einer Zeile. */
body.mit-leiste main { position: relative; }
main > form.ansichtals.ansichtals { position: absolute; top: 0.35rem; right: 1.75rem; z-index: 6; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
@media (max-width: 46rem) { main > form.ansichtals.ansichtals { position: static; margin: 0 0 0.4rem; } }

.karte.kalender .kalenderwoche { margin: 1.2rem 0 0.25rem; padding: 0 0 0.25rem; border-bottom: 1px solid var(--linie-stark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; color: var(--tinte); }
.karte.kalender .kalenderliste > .kalenderwoche:first-child { margin-top: 0.3rem; }
.kalenderliste > .kalendertag > .tag-kopf, .ueberfaellig .tag-kopf { margin-top: 0.45rem; padding: 0.05rem 0.15rem; background: none; border: 0; border-radius: 0; font-size: 0.8rem; color: var(--gedaempft); }
.kalenderliste > .kalendertag > .tag-kopf strong { color: var(--tinte); }
.kalendertag--heute { margin-top: 0.45rem; padding: 0.05rem 0.4rem 0.35rem; border-width: 1px; border-radius: 0.5rem; }
.kalenderliste .tageszeile, .ueberfaellig .tageszeile { grid-template-columns: 3rem 8.5rem minmax(0, 1fr) auto; min-height: 2.2rem; margin-top: 0.15rem; padding: 0.05rem 0 0.05rem 0.45rem; border-left-width: 3px; border-radius: 0.35rem; font-size: 0.85rem; }
.tageszeile .tageszeit { font-size: 0.78rem; font-weight: 500; }
.tageszeile .tagespferd { gap: 0.4rem; }
.tageszeile .tagespferd strong { font-size: 0.88rem; }
.tageszeile .pferdebild { width: 1.45rem; height: 1.45rem; font-size: 0.75rem; }
.tageszeile .tagesdetail, .tageszeile .tagesgesundheit { font-size: 0.84rem; }
.tageszeile .tageswer, .tageszeile small.tageswer { font-size: 0.76rem; }
.tageszeile .symbole { gap: 0.2rem; padding-right: 0.25rem; }
.tageszeile .symbol:not(.symbol--beschriftet) { width: 1.65rem; height: 1.65rem; }
.tageszeile .symbol svg { width: 0.85rem; height: 0.85rem; }
.tageszeile .symbol--beschriftet { height: 1.65rem; padding: 0 0.5rem; font-size: 0.74rem; }
.tageszeile .standsymbol { width: 1rem; }
.tageszeile .standsymbol svg { width: 0.85rem; height: 0.85rem; }

/* Katja, 2026-09-16: "Verlinkte Titel ohne Unterstreichung bei Mouse over.
   Farbe ändern oder sonst etwas". */
.titellink:hover, a.titellink:hover, .tagespferd:hover, .karte h2 a:hover { text-decoration: none; color: var(--akzent-dunkel, #3f7072); }
.titellink:hover::after { color: var(--akzent-dunkel, #3f7072); }

/* Monatsansicht: Samstag und Sonntag ganz dezent hinterlegt. */
.monatsraster > .monatstag:nth-child(7n + 6), .monatsraster > .monatstag:nth-child(7n + 7) { background: #efece6; }
.monatsraster > .monatstag--fremd:nth-child(7n + 6), .monatsraster > .monatstag--fremd:nth-child(7n + 7) { background: none; }
.monatsraster > .monatstag--heute { background: #fff4c7; }

/* Termin-Fenster: breiter, alles sichtbar, Knöpfe umbrechen statt querscrollen. */
.termindetails { width: min(34rem, calc(100vw - 2rem)); overflow-x: hidden; }
.termindetails .angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.2rem 0.9rem; }
.termindetails .angaben dd { margin: 0; overflow-wrap: anywhere; }
.termindetails-symbole .symbole { flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }

/* Listen Training und Gesundheit: Wochen als Balken, Pferdenamen ruhiger. */
.karte h2.eintragsgruppe { margin: 0.9rem -0.4rem 0.15rem; padding: 0.3rem 0.6rem; background: #ebe7e0; border: 0; border-radius: 0.35rem; color: var(--tinte); }
.eintragwas strong { font-weight: 600; }
.eintragzeile { font-size: 0.86rem; }
.planfilter > div:has(> label.unsichtbar) { padding-top: 0; }
.gruppenwahl { font-weight: 700; }

/* Aufgabenformular ruhiger (Katja, 2026-09-16: "Wiederholung irgendwo fett
   drin, dann das Feld Wochen so gross"). */
.aufgabenraster { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 7rem) minmax(0, 12rem); gap: 0.5rem 0.8rem; align-items: end; margin: 0.4rem 0 0.6rem; }
.aufgabenraster .feld--breit { grid-column: 1 / -1; }
.aufgabenraster label { margin: 0 0 0.15rem; }
.wiederholen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.wiederholen-zeile select.klein { width: auto; min-width: 0; }
.wiederholen-zeile input.zahl { width: 4rem; }
.wiederholen-zeile input.klein { width: auto; }
.wiederholen-mehr { display: inline-flex; align-items: center; gap: 0.4rem 0.7rem; flex-wrap: wrap; }
.wiederholen-mehr[hidden] { display: none; }
.wiederholen-ende label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; font-weight: 400; color: var(--tinte); }
@media (max-width: 46rem) { .aufgabenraster { grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); } }
.wiederholen-alle-text { margin: 0 !important; font-weight: 400; color: var(--tinte); }

/* Ansicht als in der Seitenleiste (Katja, 2026-09-16: überdeckte oben rechts
   die Symbole der Seite). */
.seitenleiste .ansichtals { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; margin: 0.4rem 0.6rem 0.2rem; }
.seitenleiste .ansichtals label { color: #9d948a; font-size: 0.62rem; }
.seitenleiste .ansichtals select { width: 100%; min-width: 0; height: 1.8rem; background-color: #2a2622; border-color: #3a342c; color: #e8e2d8; font-size: 0.78rem; }

/* Titel in der feinen Garamond, aber gross genug gegenüber dem übrigen Text
   (Katja, 2026-09-16: "die feine war schöner aber in richtiger Relation zum
   anderen Text"). Die Zwischentitel darunter werden leiser, damit die Titel
   nicht mehr verschwinden. */
h1, h2, h3, .karte h2, .planmonat-titel, .kachel .name { font-family: var(--serif); font-weight: 600; letter-spacing: 0; color: var(--tinte); }
h1 { font-size: 2.35rem; line-height: 1.1; }
.karte h2 { font-size: 1.75rem; line-height: 1.15; }
.planmonat-titel { font-size: 1.6rem; }
h3 { font-size: 1.35rem; }
.karte.kalender .kalenderwoche, .karte h2.eintragsgruppe, .listenwoche-kopf, .planwoche-kopf { font-weight: 600; }
.karte .mahlzeit-titel, .karte h3.kalenderwoche { font-family: var(--grotesk); }

/* Früher laden als kleiner Pfeil. */
.frueher-laden { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; }

/* Listen Training und Gesundheit (Katja, 2026-09-16): Wochenbalken kräftig
   und höher, je Eintrag eine volle Zeile mit Zuständigem daneben. */
.eintragsliste { padding: 0.5rem 0.7rem 0.7rem; }
.listenwoche + .listenwoche { margin-top: 0.35rem; }
.listenwoche-kopf { background: none; display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.8rem; border-radius: 0.45rem; cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinte); }
.listenwoche-kopf::-webkit-details-marker { display: none; }
.listenwoche-kopf::before { content: "›"; display: inline-block; color: var(--gedaempft); transition: transform .15s; }
.listenwoche[open] > .listenwoche-kopf::before { transform: rotate(90deg); }
.listenwoche-kopf .zusatz { margin-left: auto; font-weight: 600; letter-spacing: 0; }
.listenwoche--leer .listenwoche-kopf { background: #efebe5; color: var(--gedaempft); cursor: default; }
.listenwoche--leer .listenwoche-kopf::before { visibility: hidden; }
.listenzeile { display: grid; grid-template-columns: 1.3rem 6.5rem minmax(6rem, 9rem) minmax(8rem, 12rem) minmax(8rem, 12rem) minmax(0, 1fr) auto; align-items: center; gap: 0 0.8rem; min-height: 2.4rem; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--linie); font-size: 0.88rem; }
.listenzeile--heute { background: #fff8dc; }
.l-datum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-datum small { margin-left: 0.25rem; color: var(--gedaempft); }
.l-pferd { font-weight: 600; }
.l-art { color: var(--tinte); }
.l-person, .l-notiz { color: var(--gedaempft); font-size: 0.84rem; }
.l-notiz { min-width: 0; overflow-wrap: anywhere; }
.listenzeile.eintrag--vorgemerkt .l-art, .listenzeile.eintrag--vorgemerkt .l-pferd { font-style: italic; }
.listenzeile.eintrag--cancelled .l-art { text-decoration: line-through; color: var(--gedaempft); }
.listenzeile .symbole { gap: 0.15rem; }
.listenzeile .symbol { width: 1.8rem; height: 1.8rem; }
@media (max-width: 46rem) {
    .listenzeile { grid-template-columns: 1.2rem minmax(0, 1fr) auto; gap: 0 0.5rem; padding: 0.35rem 0.2rem; }
    .listenzeile .l-datum, .listenzeile .l-pferd, .listenzeile .l-art, .listenzeile .l-person, .listenzeile .l-notiz { grid-column: 2; }
    .listenzeile .symbole { grid-column: 3; grid-row: 1 / span 4; }
    .listenzeile .standsymbol { grid-row: 1; }
}

/* Aufgaben: Datum und Uhrzeit vorne (Katja, 2026-09-16). */
.aufgabe-wann { min-width: 4.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.85rem; color: var(--tinte); }
.aufgabe-wann small { display: block; color: var(--gedaempft); font-size: 0.78rem; }

/* Bearbeiten im Fenster (Katja, 2026-09-16: "wie in Equipe"). */
.fenster { width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-top: 5px solid var(--akzent, #5f9a9c); border-radius: 0.8rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: auto; }
.fenster::backdrop { background: rgba(20, 18, 15, 0.5); }
/* Am iPhone stand das Fenster nach dem Scrollen oberhalb des sichtbaren
   Bereichs (Katja, 2026-10-14). Darum ausdrücklich am Bildschirm verankert
   und höchstens so hoch wie der sichtbare Bereich (dvh, ohne Adressleiste). */
.fenster[open] { position: fixed; inset: 0; margin: auto; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.fenster-schliessen { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; margin: 0; padding: 0.4rem 0.5rem 0; background: #fff; border: 0; }
.fenster-schliessen .symbol { width: 2rem; height: 2rem; background: none; border: 0; color: var(--gedaempft); font-size: 1rem; }
.fensterinhalt { padding: 0 1.2rem 1.1rem; }
.fensterinhalt > h1 { margin: -1.6rem 2.5rem 0.8rem 0; font-size: 1.7rem; }
.fensterinhalt > form { max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.fensterinhalt .formknoepfe { position: sticky; bottom: 0; margin: 0.8rem -1.2rem -1.1rem; padding: 0.7rem 1.2rem; background: #fff; border-top: 1px solid var(--linie); }
.formknoepfe .gefahr { margin-left: auto; color: var(--warnung, #a33); border-color: #e3c3c3; }
[data-fenster-ziel] { cursor: pointer; }

/* ============================================================
   Dashboard nach Katjas Layoutvorschlag (2026-09-16).
   ============================================================ */
.uebersichtkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 1rem; }
.uebersichtkopf h1 { margin: 0; }
.uebersichtkopf .wetter { margin-left: auto; }
.wichtig { display: flex; align-items: flex-start; gap: 0.6rem; max-width: 36rem; padding: 0.5rem 0.7rem; background: #fff4c7; border: 1px solid #e8c547; border-radius: 0.55rem; font-size: 0.86rem; color: #5a4600; }
.wichtig .notiztext { flex: 1; margin: 0; }
.wichtig-zeichen { display: inline-grid; place-items: center; flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #8a6d00; color: #fff; font-weight: 700; font-size: 0.8rem; }
.wichtig-stift { width: 1.7rem; height: 1.7rem; background: none; border: 0; color: #8a6d00; }

.uebersicht-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: 1.1rem; align-items: start; }
.uebersicht-links, .uebersicht-rechts { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.uebersicht-raster .karte { margin: 0; padding: 0.9rem 1rem; }

.blaetterkopf { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.blaetterkopf h2 { margin: 0; }
.blaettern { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--tinte); text-decoration: none; font-size: 1.15rem; }
.blaettern:hover { background: #efebe5; color: var(--tinte); }
.heute-link { margin-left: auto; font-size: 0.82rem; }

.tabellenkopf { display: grid; gap: 0 0.8rem; padding: 0.45rem 0.6rem; background: #f3f0ea; border-radius: 0.4rem 0.4rem 0 0; font-size: 0.74rem; font-weight: 600; color: var(--gedaempft); }
.tageszeile-kopf, .tagesplan .tageszeile { grid-template-columns: 5rem minmax(7rem, 1.2fr) minmax(6rem, 1fr) minmax(7rem, 1.3fr) auto; }
.tagesplan-scroll { max-height: 22rem; overflow-y: auto; }
.tagesplan .tageszeile { display: grid; align-items: center; gap: 0 0.8rem; min-height: 3rem; margin: 0; padding: 0.3rem 0.6rem; background: #fff; border: 0; border-bottom: 1px solid var(--linie); border-left: 3px solid transparent; border-radius: 0; font-size: 0.88rem; }
.tagesplan .tageszeile.bereich--training { border-left-color: var(--training); }
.tagesplan .tageszeile.bereich--gesundheit { border-left-color: var(--gesundheit); }
.tagesplan .tageszeile.eintrag--done { color: var(--gedaempft); }
.tagesplan .tageszeile.eintrag--vorgemerkt, .tagesplan .tageszeile.eintrag--faellig { font-style: italic; border-left-style: dashed; }
.tagesplan .tageszeit { border: 0; font-variant-numeric: tabular-nums; }
.tagesplan .tagespferd { display: flex; align-items: center; gap: 0.5rem; color: var(--tinte); }
.tagesplan .tagespferd strong { font-weight: 500; }
.tagesplan .tageswer { color: var(--gedaempft); font-size: 0.85rem; }
.tagesplan .tagesart { display: flex; align-items: center; gap: 0.35rem; }
.tagesplan .symbole { justify-content: flex-end; }

.wochenraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linie); border-radius: 0.45rem; overflow: hidden; }
.wochenspalte { min-height: 14rem; max-height: 26rem; overflow-y: auto; padding: 0 0.3rem 0.4rem; border-left: 1px solid var(--linie); }
.wochenspalte:first-child { border-left: 0; }
.wochenspalte--wochenende { background: #faf8f4; }
.wochenspalte--heute { background: #eaf1f5; }
.wochenspalte-kopf { position: sticky; top: 0; margin: 0 -0.3rem 0.35rem; padding: 0.4rem 0.2rem; background: #f3f0ea; text-align: center; font-size: 0.78rem; line-height: 1.2; color: var(--gedaempft); }
.wochenspalte-kopf strong { display: block; color: var(--tinte); }
.wochenspalte--heute .wochenspalte-kopf { background: #d6e5ee; }
.wochenkarte { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.3rem; padding: 0.35rem 0.4rem; background: #fff; border: 1px solid var(--linie); border-left: 3px solid var(--linie-stark); border-radius: 0.35rem; font-size: 0.74rem; line-height: 1.25; }
.wochenkarte.bereich--training { border-left-color: var(--training); }
.wochenkarte.bereich--gesundheit { background: #fdf3ea; border-left-color: var(--gesundheit); }
.wochenkarte.eintrag--done { opacity: 0.6; }
.wochenkarte.eintrag--vorgemerkt, .wochenkarte.eintrag--faellig { font-style: italic; border-style: dashed; }
.wk-zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-pferd { display: flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--tinte); }
.wk-pferd .pferdebild { width: 1.1rem; height: 1.1rem; font-size: 0.6rem; }
.wk-wer { color: var(--gedaempft); }
.wk-art { font-weight: 600; color: var(--tinte); }

.uebersicht-rechts .aufgaben-scroll { max-height: 20rem; overflow-y: auto; }

.plus-schwebend { position: fixed; left: calc(50% + 6.5rem); bottom: 1.2rem; z-index: 20; transform: translateX(-50%); }
.plus-schwebend > summary { list-style: none; cursor: pointer; }
.plus-schwebend > summary::-webkit-details-marker { display: none; }
.plus-schwebend .plusrund { display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--marke-satt, #7a5a3a); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.plus-schwebend .plusrund svg { width: 1.6rem; height: 1.6rem; }
.plus-schwebend .plusblatt { position: absolute; bottom: 4.2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; min-width: 13rem; padding: 0.4rem; background: #fff; border-radius: 0.7rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
.plus-schwebend .plusblatt a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.45rem; color: var(--tinte); text-decoration: none; }
.plus-schwebend .plusblatt a:hover { background: #f3f0ea; }
.plus-schwebend .plusblatt svg { width: 1.2rem; height: 1.2rem; }

@media (max-width: 64rem) {
    .uebersicht-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 46rem) {
    .plus-schwebend { display: none; }
    .tageszeile-kopf { display: none; }
    .tagesplan .tageszeile { grid-template-columns: 3.2rem minmax(0, 1fr) auto; grid-template-areas: "zeit pferd symbole" "zeit art symbole" "zeit wer symbole"; }
    .tagesplan .tageszeit { grid-area: zeit; }
    .tagesplan .tagespferd { grid-area: pferd; }
    .tagesplan .tagesart { grid-area: art; }
    .tagesplan .tageswer { grid-area: wer; }
    .tagesplan .symbole { grid-area: symbole; }
    .wochenraster { grid-template-columns: minmax(0, 1fr); }
    .wochenspalte { min-height: 0; max-height: none; border-left: 0; border-top: 1px solid var(--linie); }
    .wochenspalte-kopf { text-align: left; }
    .wochenspalte-kopf strong { display: inline; }
}

/* Handy-Ansicht am PC (Katja, 2026-09-16). */
.handyknopf { display: block; margin: 0.3rem 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid #3a342c; border-radius: 0.45rem; color: #d8d0c4; font-size: 0.78rem; text-decoration: none; }
.handyknopf:hover { background: #2a2622; color: #fff; }
.handyseite { display: flex; flex-direction: column; align-items: center; min-height: 100vh; margin: 0; padding: 1rem; background: #2a2622; }
.handyleiste { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; color: #d8d0c4; font-size: 0.85rem; }
.handyrahmen { width: 390px; height: 844px; max-height: calc(100vh - 5rem); border: 10px solid #111; border-radius: 2.2rem; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.nur-handy { display: none; }
/* Tagesliste: Initialen vor dem Namen, damit das "…" sie nicht abschneidet (Katja, 2026-10-14). */
.tageswer .kuerzel-klein { margin-right: .35rem; }

/* Am Handy: Titel deutlich kleiner, mehr Inhalt auf den ersten Blick
   (Katja, 2026-09-16: "viel zu riesige Titel - kaum infos auf den ersten Blick"). */
@media (max-width: 46rem) {
    .nur-gross { display: none; }
    .nur-handy { display: inline; }
    h1, .uebersichtkopf h1 { font-size: 1.45rem; }
    .karte h2, .blaetterkopf h2 { font-size: 1.25rem; line-height: 1.2; }
    h3, .planmonat-titel { font-size: 1.1rem; }
    .uebersichtkopf { margin-bottom: 0.6rem; }
    .wichtig { padding: 0.4rem 0.55rem; font-size: 0.82rem; }
    .uebersicht-raster { gap: 0.7rem; }
    .uebersicht-raster .karte { padding: 0.6rem 0.65rem; }
    .blaetterkopf { gap: 0.3rem; margin-bottom: 0.35rem; flex-wrap: nowrap; }
    .blaetterkopf h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .blaettern { width: 1.8rem; height: 1.8rem; font-size: 1rem; flex: none; }
    .tagesplan .tageszeile { min-height: 0; padding: 0.3rem 0.35rem; font-size: 0.84rem; gap: 0 0.5rem; }
    .tagesplan .tageszeile .pferdebild { width: 1.3rem; height: 1.3rem; }
    .tagesplan .tageswer { font-size: 0.76rem; }
    .tagesplan .symbol { width: 1.8rem; height: 1.8rem; }
    .wochenspalte-kopf { margin-bottom: 0.15rem; padding: 0.2rem 0.4rem; font-size: 0.76rem; }
    .wochenspalte { padding-bottom: 0.2rem; }
    .wochenkarte { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin-top: 0.2rem; padding: 0.25rem 0.4rem; font-size: 0.78rem; }
}
/* Formulare ruhiger (Katja, 2026-09-16): Von und Bis in je einer Zeile,
   Datum und Uhrzeit gleich hoch, deutsche Datumsanzeige, Erledigt und
   Absagen als Symbole. */
.zeitraum-zeile { display: grid; grid-template-columns: 2.4rem minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 0 0.5rem; margin-bottom: 0.4rem; }
.zeitraum-titel { font-size: 0.82rem; font-weight: 600; color: var(--gedaempft); }
.zeitraum-zeile input[type="date"], .zeitraum-zeile select { height: 2.6rem; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; }
.zeitraum-haken { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin: 0.1rem 0 0 2.9rem; }
.zeitraum-haken .kasten { margin: 0; }
.datumfeld { position: relative; display: block; }
.datumfeld input[type="date"] { width: 100%; color: transparent; -webkit-text-fill-color: transparent; }
.datumfeld input[type="date"]::-webkit-datetime-edit { color: transparent; }
.datumfeld input[type="date"]:focus { color: var(--tinte); -webkit-text-fill-color: var(--tinte); }
.datumfeld input[type="date"]:focus + .datumanzeige { visibility: hidden; }
.datumanzeige { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-variant-numeric: tabular-nums; color: var(--tinte); }
.fensterinhalt > h1 { margin: 0 2.4rem 0.7rem 0; font-size: 1.35rem; line-height: 1.2; }
.fenster-schliessen { height: 0; padding: 0; overflow: visible; }
.fenster-schliessen .symbol { position: absolute; top: 0.45rem; right: 0.45rem; }
.fensterinhalt { padding-top: 0.9rem; }
.formknoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.formknoepfe .formsymbol { width: 2.6rem; height: 2.6rem; margin: 0; background: #fff; border: 1px solid var(--linie-stark); }
.formknoepfe .formsymbol:first-of-type { margin-left: auto; }
.formknoepfe .symbol--absagen { color: var(--warnung, #a33); }
.formknoepfe .symbol--erledigen { color: var(--erfolg); }
.formknoepfe .knopf--still { order: 1; }
.formknoepfe .formsymbol { order: 2; }
/* Abhaken steht neben Abbrechen, so gross wie die Knoepfe daneben
   (Katja, 2026-09-21: "Abhakicon ist zu klein"). */
.formknoepfe .hakenfeld { order: 3; }

/* Woche am Handy: eine Zeile je Eintrag (Katja, 2026-09-16: "1 Zeile pro
   Eintrag, da muss viel mehr rein passen!"). */
@media (max-width: 46rem) {
    .wochenkarte { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 0 0.4rem; margin-top: 0.15rem; padding: 0.2rem 0.35rem; font-size: 0.78rem; white-space: nowrap; }
    .wochenkarte > span { overflow: hidden; text-overflow: ellipsis; }
    .wochenkarte .wk-zeit { grid-column: 1; }
    .wochenkarte .wk-pferd { grid-column: 2; }
    .wochenkarte .wk-art { grid-column: 3; }
    .wochenkarte .wk-wer { display: none; }
    .wochenspalte-kopf { padding: 0.15rem 0.4rem; }
    .zeitraum-zeile { grid-template-columns: 2.2rem minmax(0, 1.3fr) minmax(0, 1fr); }
    .zeitraum-haken { margin-left: 0; }
}
/* ============================================================
   Dashboard, Feinschliff 2026-09-17 (Wortlaut in ROHNOTIZEN.md).
   ============================================================ */
.uebersichtkopf { min-height: 2.6rem; }
.blaettertitel { margin: 0; }
.blaettertitel--aktuell, .blaettertitel--aktuell a { color: var(--gesundheit, #c2703d); }
.titellink--ohnepfeil::after { content: none; }
.blaettern { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--linie); border-radius: 50%; background: #fff; color: var(--tinte); }
.blaettern svg { width: 1rem; height: 1rem; }

/* Tag: links ausgerichtet in festen Spalten, nur der Haken rechts. */
.tageszeile-kopf, .tagesplan .tageszeile { grid-template-columns: 5.5rem minmax(8rem, 1.1fr) minmax(8rem, 1.2fr) minmax(7rem, 1fr) 2.2rem; }
.tageszeile-kopf span, .tagesplan .tageszeile > span { text-align: left; justify-self: stretch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagesplan .tageszeile { min-height: 2.6rem; background: #fff; border-left-width: 3px; color: var(--tinte); }
.tagesplan .tageszeile.bereich--training { background: #f4f8fb; }
.tagesplan .tageszeile.bereich--gesundheit { background: #fbf4ee; }
.tagesplan .tageszeile.eintrag--done, .tagesplan .tageszeile.eintrag--done .tageswer { color: #9a938a; }
/* Heute Erledigtes bleibt stehen, grau und durchgestrichen wie bei den
   Aufgaben (Katja, 2026-09-21). */
.tagesplan .tageszeile.eintrag--done :is(.tageszeit, .tagespferd-name, .tagesart, .tageswer) { color: #9a938a; text-decoration: line-through; text-decoration-color: #b9b2a9; }
.tagesplan .tageszeile.eintrag--done .pferdebild { opacity: 0.55; }
.tagesplan .tageszeile.eintrag--vorgemerkt, .tagesplan .tageszeile.eintrag--faellig { font-style: italic; }
.tagesplan .tagespferd { display: flex; align-items: center; gap: 0.45rem; }
.tagesplan .tagespferd-name { font-weight: 400; }
.tagesplan .tagesart { font-weight: 400; }
.tagesplan .tageszeit--seit { color: var(--gedaempft); font-size: 0.8rem; }
.tageshaken { display: flex; justify-content: flex-end; overflow: visible !important; }
.hakenform { display: inline; margin: 0; padding: 0; background: none; border: 0; }
.symbol--erledigen.symbol--ueberfaellig { border-color: #c0392b; color: #c0392b; background: #fff; }
.tageshaken .symbol, .wk-kopf .symbol { width: 1.7rem; height: 1.7rem; margin: 0; }
.tageshaken .symbol svg, .wk-kopf .symbol svg { width: 0.85rem; height: 0.85rem; }

/* Woche: nichts fett, Haken im Kärtchen, Farben wie beim Tag. */
.wochenspalte-kopf, .wochenspalte-kopf strong { font-weight: 400; }
.wochenkarte { font-weight: 400; }
.wochenkarte.bereich--training { background: #f4f8fb; }
.wochenkarte.bereich--gesundheit { background: #fbf4ee; }
.wochenkarte.eintrag--done { opacity: 1; color: #9a938a; }
.wochenkarte.eintrag--done .wk-pferd, .wochenkarte.eintrag--done .wk-art { color: #9a938a; }
.wk-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 1.7rem; }
.wk-zeit, .wk-pferd, .wk-art { font-weight: 400; }
.kuerzel-klein { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.2rem; border: 1px solid var(--linie-stark); border-radius: 50%; font-size: 0.62rem; font-style: normal; font-weight: 600; color: var(--gedaempft); vertical-align: middle; }

/* Aufgaben einzeilig, fällige hinterlegt, Haken rechts. */
.aufgaben h2, .heutegaben h2 { margin: 0 0 0.5rem; }
/* Datum schmal, der Titel nimmt den Platz, Initialen und Haken bekommen
   ihre eigene Spalte statt ueber Titel und Bild zu liegen (Katja,
   2026-09-21: "Datum kann schmaler sein. Platz ausnutzen, icons nicht
   übereinander"). */
.aufgabenzeile { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 2rem auto; align-items: center; gap: 0 0.6rem; min-height: 2.4rem; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--linie); font-size: 0.86rem; }
.aufgabenzeile.aufgabe--faellig { background: #f4f8fb; }
.aufgabenzeile.aufgabe--ueberfaellig .az-wann { color: #c0392b; }
.az-wann { color: var(--gedaempft); font-size: 0.8rem; line-height: 1.2; }
.az-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-bild { width: 1.9rem; height: 1.9rem; object-fit: cover; border-radius: 0.3rem; }
.aufgabenzeile .abhaken { grid-column: 4; justify-self: end; margin: 0; }

/* Supplements: eine Zeile je Gabe, nichts unterstrichen. */
.gabezeile { display: grid; grid-template-columns: 1.6rem minmax(4rem, auto) minmax(0, 1fr) auto 2rem; align-items: center; gap: 0 0.5rem; min-height: 2.3rem; padding: 0.15rem 0.3rem; border-bottom: 1px solid var(--linie); font-size: 0.86rem; }
.gabezeile .pferdebild { width: 1.5rem; height: 1.5rem; }
.gz-mittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gedaempft); }
.gabezeile .abhaken { justify-self: end; margin: 0; }
.gabezeile .abhaken label { margin: 0; }
.heutegaben-mahlzeit h3 { margin: 0.5rem 0 0.1rem; font-family: var(--grotesk); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); }
.plusblatt-knopf { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; width: 100%; min-height: 0; margin: 0; padding: 0.55rem 0.7rem; background: none; border: 0; border-radius: 0.45rem; color: var(--tinte); font: inherit; text-align: left; }
.plusblatt-knopf:hover { background: #f3f0ea; color: var(--tinte); }
/* Wichtig steht links wie die Links daneben, der Knopf-Grundstil zentriert
   sonst (Katja, 2026-09-28: "Wichtig bitte links ausrichten"). */
.plusblatt-knopf .wichtig-zeichen { width: 1.2rem; height: 1.2rem; }

/* Handy: gleiche Farben und Schriften wie am PC, mehr auf eine Zeile,
   Reihenfolge Heute, Supplements, Aufgaben, Woche (Katja, 2026-09-17). */
@media (max-width: 46rem) {
    /* Jede Karte volle Breite, auch wenn wenig drinsteht (Katja,
       2026-09-21: "2 Termine gelöscht und dann wurde der Block schmaler"). */
    .uebersicht-raster { display: flex; flex-direction: column; align-items: stretch; }
    .uebersicht-links, .uebersicht-rechts { display: contents; }
    .uebersicht-raster .tagesplan { order: 1; }
    .uebersicht-raster .heutegaben { order: 2; }
    .uebersicht-raster .aufgaben { order: 3; }
    .uebersicht-raster .wochenplan { order: 4; }
    .tagesplan .tageszeile { grid-template-columns: 2.9rem minmax(0, 1fr) minmax(0, 1.2fr) 1.6rem 1.9rem; grid-template-areas: none; min-height: 2.3rem; padding: 0.15rem 0.3rem; font-size: 0.82rem; gap: 0 0.35rem; }
    .tagesplan .tageszeile > * { grid-area: auto; }
    .tagesplan .tagespferd .pferdebild { display: none; }
    .tagesplan .tageszeit--seit { font-size: 0.68rem; }
    .aufgabenzeile { grid-template-columns: 3.4rem minmax(0, 1fr) 2rem auto; font-size: 0.82rem; }
    .gabezeile { font-size: 0.82rem; }
}
/* ============================================================
   Fenster, Termin-Fenster, Kalender und Seitenleiste, 2026-09-17.
   ============================================================ */
/* Fenster: Hintergrund getönt, Felder weiss, Titel grösser, Rest kleiner, kompakt. */
.fenster { background: #f6f3ee; }
.fenster-schliessen, .fensterinhalt .formknoepfe { background: #f6f3ee; }
.fensterinhalt > h1 { font-size: 1.75rem; }
.fensterinhalt label { margin: 0 0 0.1rem; font-size: 0.72rem; }
.fensterinhalt input:not([type="checkbox"]):not([type="radio"]), .fensterinhalt select, .fensterinhalt textarea { background-color: #fff; font-size: 0.86rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.fensterinhalt select, .fensterinhalt input[type="date"] { height: 2.2rem; min-height: 0; }
.fensterinhalt .formraster { gap: 0.55rem 0.8rem; }
.fensterinhalt .formraster > * { margin: 0; }
.fensterinhalt .kasten { font-size: 0.82rem; }
.fensterinhalt .datumanzeige { font-size: 0.86rem; }
.formknoepfe .knopf--still { background: #efe4d6; border-color: #dccab4; color: #5d4630; }
.formknoepfe .knopf--still:hover { background: #e6d6c3; color: #4a3826; }
.formknoepfe button:not(.symbol) { font-size: 0.9rem; }

/* PC: Von und Bis über den Feldern, alles in einer Zeile. Handy: zwei Zeilen. */
.zeitraum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.35rem 0.8rem; }
.zeitraum-zeile { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.1rem 0.4rem; margin: 0; }
.zeitraum-zeile .zeitraum-titel { grid-column: 1 / -1; font-size: 0.72rem; }
.zeitraum-zeile > label.unsichtbar { position: absolute; }
.zeitraum-haken { grid-column: 1 / -1; margin: 0; }
@media (max-width: 46rem) { .zeitraum { grid-template-columns: minmax(0, 1fr); } }

/* Erinnerung: alles kursiv, kurzer leiser Hinweis. */
.formular--erinnerung, .formular--erinnerung input, .formular--erinnerung select, .formular--erinnerung textarea, .formular--erinnerung .datumanzeige { font-style: italic; }
.erinnerung-hinweis { margin: 0 0 0.5rem; font-size: 0.78rem; font-style: italic; color: var(--gedaempft); }
.erinnerung-hinweis::before { content: "Erinnerung · "; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
html[lang="en"] .erinnerung-hinweis::before, html[lang="es"] .erinnerung-hinweis::before { content: none; }
.formknoepfe .symbol--erledigen.formsymbol { background: #fff; border-color: var(--erfolg); color: var(--erfolg); }

/* Termin-Fenster */
.termindetails-erinnerung { margin: 0.2rem 0 0; font-size: 0.72rem; font-style: italic; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gesundheit); }
.termindetails-symbole { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.termindetails-symbole .symbole { margin: 0; }
.symbol--gesperrt { opacity: 0.4; cursor: not-allowed; }

/* Kalender: Initialen im Punkt, Titel ohne Pfeil, Sprungziel unter dem Kopf. */
.termin-punkt { width: auto; min-width: 1.35rem; padding: 0 0.3rem; border-radius: 0.7rem; gap: 0.15rem; }
.punkt-kuerzel { margin-left: 0.15rem; padding-left: 0.2rem; border-left: 1px solid rgba(255, 255, 255, 0.55); font-size: 0.58rem; font-weight: 600; }
.titellink::after, .titellink:hover::after { content: none; }
#heute, .planmonat, .planwoche { scroll-margin-top: 7.5rem; }
.frueher-laden svg { width: 1rem; height: 1rem; }

/* Seitenleiste: Ansicht beieinander. */
.ansicht-gruppe { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.3rem 0 0.6rem; }
.ansicht-gruppe .ansichtals, .ansicht-gruppe .handyknopf { margin-top: 0; margin-bottom: 0; }
/* Training & Gesundheit als eine Liste, wie im Dashboard (Katja, 2026-09-17). */
.eintragsliste .listenzeile { grid-template-columns: 6.8rem minmax(6rem, 9rem) minmax(8rem, 12rem) minmax(7rem, 11rem) minmax(0, 1fr) 2.2rem; gap: 0 0.8rem; min-height: 2.4rem; font-size: 0.86rem; color: var(--tinte); }
.listenzeile.bereich--training { background: #f4f8fb; }
.listenzeile.bereich--gesundheit { background: #fbf4ee; }
.listenzeile + .listenzeile { border-top: 1px solid #fff; }
.listenzeile.eintrag--done, .listenzeile.eintrag--done .l-person, .listenzeile.eintrag--done .l-notiz { color: #9a938a; }
.listenzeile.eintrag--vorgemerkt, .listenzeile.eintrag--faellig { font-style: italic; }
.listenzeile.listenzeile--heute { box-shadow: inset 3px 0 0 #e8c547; }
.listenzeile .l-pferd { font-weight: 400; }
.listenzeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-haken { display: flex; justify-content: flex-end; overflow: visible !important; }
.listenwoche-kopf { font-size: 0.8rem; letter-spacing: 0.03em; text-transform: none; }
@media (max-width: 46rem) {
    .eintragsliste .listenzeile { grid-template-columns: 3.3rem minmax(0, 1fr) minmax(0, 1.2fr) 1.6rem 1.9rem; gap: 0 0.35rem; padding: 0.15rem 0.3rem; font-size: 0.8rem; }
    .listenzeile .l-datum, .listenzeile .l-pferd, .listenzeile .l-art, .listenzeile .l-person { grid-column: auto; }
    .listenzeile .l-datum small, .listenzeile .l-notiz { display: none; }
    .listenzeile .l-haken { grid-column: auto; grid-row: auto; }
}
/* Kalenderpunkte lesbar: zwei Buchstaben vom Pferd, Initialen ohne Trennstrich-Rand,
   zentriert und eng (Katja, 2026-09-17). */
.termin-punkt { display: inline-flex; align-items: center; justify-content: center; height: 1.35rem; min-width: 1.9rem; padding: 0 0.35rem; border-radius: 0.7rem; font-size: 0.68rem; font-weight: 600; line-height: 1; letter-spacing: 0; }
.punkt-kuerzel { margin: 0; padding: 0; border: 0; font-size: 0.68rem; font-weight: 600; }
/* 2026-09-17 nachmittags: anthrazit Balken mit weisser Schrift, gruener
   Haken nach dem Abhaken, schmale Schrift fuer die Trainingsart, Titel wie F5. */
:root { --schmal: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif-condensed, var(--grotesk); }
.tabellenkopf, .wochenspalte-kopf , .planwoche-kopf { background: #2f2c29; color: #fff; }
.tabellenkopf span, .wochenspalte-kopf { color: #fff; }
.wochenspalte--heute .wochenspalte-kopf { background: #2f2c29; color: #f0b27a; font-weight: 600; }
.listenwoche--leer .listenwoche-kopf, .planwoche--leer .planwoche-kopf { background: #5a5550; color: #e8e2d8; }
.listenwoche-kopf::before, .planwoche-kopf::before { color: #cfc8bd; }
.listenwoche-kopf .zusatz, .planwoche-kopf .zusatz { color: #cfc8bd; }
.symbol.symbol--erledigt, button.symbol.symbol--erledigt, .formknoepfe .symbol.symbol--erledigt { background: var(--erfolg) !important; border-color: var(--erfolg) !important; color: #fff !important; }
.wk-art { font-family: var(--schmal); font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.wk-art .kuerzel-klein { font-family: var(--grotesk); }
.termin-punkt, .punkt-kuerzel { font-family: var(--schmal); white-space: nowrap; }
main h1, .blaettertitel { cursor: pointer; }
.knopf--pass { background: #fff; border: 1px solid var(--linie-stark); color: var(--tinte); text-decoration: none; }
.knopf--pass:hover { background: #efe4d6; color: var(--tinte); text-decoration: none; }
@media (max-width: 46rem) {
    .termin-punkt { font-size: 0.62rem; padding: 0 0.2rem; min-width: 0; }
}
/* Haken je Bereich (Katja, 2026-09-17): erledigt Gesundheit dunkelorange und
   Training blau, jeweils mit weissem Haken; offen umgekehrt. */
.symbol.symbol--erledigt.haken--gesundheit { background: #b8612a !important; border-color: #b8612a !important; color: #fff !important; }
.symbol.symbol--erledigt.haken--training { background: var(--training) !important; border-color: var(--training) !important; color: #fff !important; }
.symbol.symbol--erledigen.haken--gesundheit { background: #fff; border: 1.5px solid #b8612a; color: #b8612a; }
.symbol.symbol--erledigen.haken--training { background: #fff; border: 1.5px solid var(--training); color: var(--training); }
.symbol.symbol--erledigen.symbol--ueberfaellig { border-color: #c0392b; color: #c0392b; }

/* Aufgabenverlauf */
.verlaufzeile { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem minmax(4rem, 9rem) 2rem; align-items: center; gap: 0 0.7rem; min-height: 2.3rem; padding: 0.15rem 0.4rem; border-bottom: 1px solid var(--linie); font-size: 0.86rem; }
.vz-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-wann, .vz-wer { color: var(--gedaempft); font-size: 0.8rem; white-space: nowrap; }
.verlaufzeile .symbol { width: 1.7rem; height: 1.7rem; margin: 0; }
/* 2026-09-17 spaeter: Titel von heute und von der aktuellen Woche gleich
   orange, Woche ohne eigene Scrollleiste und dichter, kleinere Haken,
   Mahlzeiten der Supplements als dunkle Balken. */
.karte h2.blaettertitel--aktuell, .karte h2.blaettertitel--aktuell a, .karte h2.blaettertitel--aktuell span { color: #b8612a; }
.wochenspalte { max-height: none; min-height: 10rem; overflow: visible; }
.wochenkarte { gap: 0; margin-top: 0.2rem; padding: 0.2rem 0.35rem; line-height: 1.2; }
.wk-kopf { min-height: 1.3rem; }
.tageshaken .symbol, .wk-kopf .symbol { width: 1.35rem; height: 1.35rem; }
.tageshaken .symbol svg, .wk-kopf .symbol svg { width: 0.7rem; height: 0.7rem; }
.heutegaben-mahlzeit { margin-top: 0.4rem; border: 0; border-radius: 0.4rem; overflow: hidden; }
.heutegaben-mahlzeit h3 { margin: 0; padding: 0.3rem 0.6rem; background: #2f2c29; color: #fff; }
/* Art überall schmal auf einer Zeile (Katja, 2026-09-17: "Art des Trainings:
   Kleinere Schrift, condensed, muss auf eine Zeile passen."). */
.tagesplan .tagesart, .listenzeile .l-art, .tz-art { font-family: var(--schmal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Titel Aufgaben und Supplements im gleichen Braun wie die verlinkten Titel,
   auch auf den eigenen Seiten (Katja, 2026-09-17). */
.karte.aufgaben h2 a, .karte.heutegaben h2 a, h1.titel-braun { color: #b8612a; }

/* Pferdeseite: enge Zeilen nach Monat, Klick oeffnet das Fenster (2026-09-17). */
.akte-monat { margin: 0.5rem 0 0.1rem; padding: 0.2rem 0.5rem; background: #2f2c29; border-radius: 0.3rem; color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.akte-monat:first-child { margin-top: 0; }
.akte-zeile { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 0.6rem; min-height: 1.9rem; padding: 0.1rem 0.4rem; border-bottom: 1px solid var(--linie); font-size: 0.84rem; }
.akte-zeile.bereich--training { background: #f4f8fb; }
.akte-zeile.bereich--gesundheit { background: #fbf4ee; }
.akte-zeile .akte-was { font-family: var(--schmal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.akte-zeile .zusatz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akte-zeile.eintrag--vorgemerkt { font-style: italic; }
/* Liste: Uhrzeit gleich gross wie das Datum, zwischen Tagen eine etwas
   dunklere Linie als zwischen Eintraegen (Katja, 2026-09-17). */
.l-datum small { font-size: inherit; color: var(--tinte); margin-left: 0.35rem; }
.listenzeile + .listenzeile { border-top: 1px solid #fff; }
.listenzeile.listenzeile--neuer-tag { border-top: 1px solid #b9b1a6 !important; }
.plantag + .plantag { border-top: 1px solid #b9b1a6; }
/* Versuch Von–Bis in einem Feld (Katja, 2026-09-18), nur im Trainingsformular. */
.zeitraum--bereich { grid-template-columns: minmax(0, 1fr); }
.zeitraum-zeile--bereich { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.bereichwahl { position: relative; }
.bereichwahl-feld { display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 2.2rem; min-height: 0; margin: 0; padding: 0 0.7rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.45rem; color: var(--tinte); font: inherit; font-size: 0.88rem; text-align: left; }
.bereichwahl-feld:hover { background: #fff; color: var(--tinte); border-color: var(--linie-stark); }
.bereichwahl-feld svg { width: 1rem; height: 1rem; color: var(--gedaempft); }
.bereichwahl-kalender { position: absolute; top: calc(100% + 0.3rem); left: 0; z-index: 30; width: 17rem; padding: 0.6rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.bw-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; font-weight: 600; font-size: 0.88rem; }
.bw-blaettern { width: 1.8rem; height: 1.8rem; min-height: 0; margin: 0; padding: 0; background: none; border: 1px solid var(--linie); border-radius: 50%; color: var(--tinte); }
.bw-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bw-tagname { text-align: center; font-size: 0.68rem; color: var(--gedaempft); }
.bw-tag { height: 2rem; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0.35rem; color: var(--tinte); font-size: 0.82rem; }
.bw-tag:hover { background: #efe4d6; color: var(--tinte); }
.bw-heute { font-weight: 700; color: #b8612a; }
.bw-dazwischen { background: #dcebf4; border-radius: 0; }
.bw-start, .bw-ende { background: var(--training); color: #fff; }
.bw-hinweis { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--gedaempft); }
@media (max-width: 46rem) { .zeitraum-zeile--bereich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .zeitraum-zeile--bereich .bereichwahl { grid-column: 1 / -1; } }
/* Erledigte Zeilen der Liste ganz in einer hellen Farbe, auch Uhrzeit und
   Art (Katja, 2026-09-18). */
.listenzeile.eintrag--done > :not(.l-haken), .listenzeile.eintrag--done > :not(.l-haken) * { color: #9a938a !important; }

/* Futter & Supplements (Katja, 2026-09-17/18): standardmaessig nur die
   Supplements je Pferd, Supplements in der Farbe des Trainings. */
.futterwahl { margin-bottom: 0.9rem; }
.supplementliste { padding: 0.4rem 0.9rem; }
.supp-pferd { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.4rem 1rem; align-items: start; padding: 0.5rem 0; border-top: 1px solid var(--linie); }
.supp-pferd:first-child { border-top: 0; }
.supp-pferd .tagespferd strong { font-size: 0.98rem; }
.supp-produkte { display: flex; flex-direction: column; gap: 0.25rem; }
.supp-produkt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; padding: 0.3rem 0.6rem; background: #f4f8fb; border-left: 3px solid #a9c7da; border-radius: 0.3rem; }
.supp-produkt[data-fenster-ziel] { cursor: pointer; }
.supp-produkt[data-fenster-ziel]:hover { background: #e8f1f7; }
.supp-produkt.gabe--medication { background: #fbf4ee; border-left-color: #e5bf9f; }
.supp-was { flex: 1 1 12rem; }
.supp-produkt .zusatz { font-size: 0.82rem; }
.supp-geben { display: inline-flex; align-items: center; gap: 0.3rem; }
.supp-geben .abhaken { margin: 0; }
.supplementverlauf h2 { margin-bottom: 0.5rem; }
.verlauffilter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.verlauffilter select { width: auto; min-width: 10rem; background: #fff; }
.verlaufzeile { display: grid; grid-template-columns: 9.5rem 7rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; padding: 0.3rem 0.2rem; border-top: 1px solid var(--linie); font-size: 0.9rem; }
.verlaufzeile[data-fenster-ziel] { cursor: pointer; }
.verlaufzeile[data-fenster-ziel]:hover { background: #f4f8fb; }
.v-datum { font-variant-numeric: tabular-nums; color: var(--gedaempft); }
.v-pferd { font-weight: 600; }
.futtertabelle tbody tr[data-fenster-ziel] { cursor: pointer; }
.futtertabelle tbody tr[data-fenster-ziel]:hover { background: #fbf8f4; }
.futtertabelle th[scope="row"], .futtertabelle td { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.futtertabelle .futtertext { margin: 0 0 0.25rem; font-size: 0.9rem; }
.futtertabelle .gabe { background: #f4f8fb; border-left: 3px solid #a9c7da; padding: 0.2rem 0.45rem; margin: 0.2rem 0 0; font-size: 0.85rem; }
.futtertabelle .gabe.gabe--medication { background: #fbf4ee; border-left-color: #e5bf9f; }
.futtertabelle .gabe a.was { color: var(--tinte); text-decoration: none; }
.futtertabelle .futternotiz, .futtertabelle .vermerke, .futtertabelle .decke { margin-top: 0.15rem; }
.akte-zeile[data-fenster-ziel] { cursor: pointer; }
.akte-zeile--frueher, .akte-zeile--frueher strong { color: #9a938a; }
@media (max-width: 46rem) {
    .supp-pferd { grid-template-columns: minmax(0, 1fr); }
    .verlaufzeile { grid-template-columns: 5.2rem 1fr; }
    .verlaufzeile .v-was, .verlaufzeile .v-zeiten { grid-column: 2; }
}

/* Von–Bis: Feld so breit wie noetig, Datum links, Zeiten schmal, Text
   eingebbar (Katja, 2026-09-19). */
.zeitraum-zeile--bereich { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.zeitraum-zeile--bereich .zeitraum-titel { flex-basis: 100%; }
.zeitraum-zeile--bereich select, .zeitraum-zeile--bereich .uhrwahl { width: 6.4rem; flex: 0 0 auto; }
.zeitraum-zeile--bereich .bereichwahl { flex: 0 0 auto; }
.bereichwahl-feld { display: inline-flex; width: auto; justify-content: flex-start; padding: 0 0.5rem 0 0.2rem; gap: 0.1rem; }
.bw-oeffnen { width: 2rem; height: 2rem; min-height: 0; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--gedaempft); }
.bw-oeffnen:hover { background: none; color: var(--tinte); }
.bw-oeffnen svg { width: 1rem; height: 1rem; }
.bereichwahl-text { width: auto; height: 2rem; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.88rem; font-variant-numeric: tabular-nums; text-align: left; box-shadow: none; }
.bereichwahl-text:focus { outline: none; }
.bereichwahl-feld:focus-within { border-color: var(--training); }

/* Abhakfeld einheitlich: blau Training, orange Gesundheit (2026-09-19). */
.form--training input[type="checkbox"] { accent-color: var(--training); }
.form--gesundheit input[type="checkbox"] { accent-color: #b8612a; }
.form--training .formknoepfe .symbol--erledigen.formsymbol { background: #fff; border-color: var(--training); color: var(--training); }
.form--training .formknoepfe .symbol--erledigt.formsymbol, .form--training .formknoepfe .symbol--erledigt.formsymbol:hover { background: var(--training); border-color: var(--training); color: #fff; }
.form--gesundheit .formknoepfe .symbol--erledigen.formsymbol { background: #fff; border-color: #b8612a; color: #b8612a; }
.form--gesundheit .formknoepfe .symbol--erledigt.formsymbol, .form--gesundheit .formknoepfe .symbol--erledigt.formsymbol:hover { background: #b8612a; border-color: #b8612a; color: #fff; }
.form--training .formknoepfe .symbol--erledigen.formsymbol:hover { background: #eaf2f8; color: var(--training); }
.form--gesundheit .formknoepfe .symbol--erledigen.formsymbol:hover { background: #fbeee4; color: #b8612a; }
/* Abgehakt auf der Uebersicht: nur ein Haken im Rechteck, Text grau und
   durchgestrichen, dazu wer (Katja, 2026-09-19). */
.aufgaben .haken:checked, .heutegaben .haken:checked { background: #fff; border-color: #b9b2a9; }
.aufgaben .haken:checked::after, .heutegaben .haken:checked::after { border-color: #8a8279; }
.heutegaben .haken:disabled { cursor: default; opacity: 1; }
.aufgabenzeile--erledigt .az-titel, .aufgabenzeile--erledigt .az-wann, .gabezeile--erledigt .gz-pferd, .gabezeile--erledigt .gz-mittel { color: #9a938a; text-decoration: line-through; text-decoration-color: #b9b2a9; }
.aufgabenzeile--erledigt { background: transparent; }
.gabezeile--erledigt .pferdebild { opacity: 0.55; }
.az-wer, .gz-wer { margin-left: auto; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: #9a938a; white-space: nowrap; }
.gz-wer + .haken { margin-left: 0.5rem; }

/* Futter & Supplements, 2026-09-19: alles orange wie Gesundheit, Abhakfeld
   links, gegeben grau. Abhakfeld: rotes Rechteck, gegeben mit gruenem
   Haken. */
.haken:checked, .aufgaben .haken:checked, .heutegaben .haken:checked { background: #fff; border-color: var(--warnung); }
.haken:checked::after, .aufgaben .haken:checked::after, .heutegaben .haken:checked::after { border-color: var(--erfolg); }
.haken:disabled { cursor: default; opacity: 1; }
.haken:disabled:not(:checked) { border-color: #d9d2c8; background: #f6f3ef; }
.futterkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.8rem; }
.futterkopf .blaetterkopf { margin: 0; }
.futterkopf .futterwahl { margin: 0; }
.futterwahl a.aktuell-gross { background: var(--marke-zart); border-color: var(--marke); }
@media (max-width: 46rem) {
    .futterwahl a.aktuell-gross { background: none; border-color: var(--linie); }
    .futterwahl a.aktuell-handy { background: var(--marke-zart); border-color: var(--marke); }
    div.futteransicht.nur-handy { display: block; }
}
.supp-produkte { gap: 0.2rem; }
.supp-zeile { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem; background: #fbf4ee; border-left: 3px solid #e5bf9f; border-radius: 0.3rem; font-size: 0.92rem; }
.supp-zeile[data-fenster-ziel] { cursor: pointer; }
.supp-zeile[data-fenster-ziel]:hover { background: #f7e9dc; }
.supp-zeile .abhaken, .gabe .abhaken { margin: 0; display: inline-flex; }
.supp-zeile .abhaken label, .gabe .abhaken label { display: inline-flex; margin: 0; }
.sz-einzug { display: inline-block; width: 1.6rem; flex: none; }
.sz-zeit { font-weight: 700; }
.sz-wer { margin-left: auto; font-size: 0.78rem; color: #9a938a; white-space: nowrap; }
.supp-zeile--gegeben, .gabe--gegeben { background: #f3f1ee; border-left-color: #cfc8bf; color: #9a938a; }
.supp-zeile--gegeben .sz-zeit, .gabe--gegeben .was { color: #9a938a; }
.futtertabelle .gabe { display: flex; align-items: center; gap: 0.45rem; background: #fbf4ee; border-left: 3px solid #e5bf9f; }
.futtertabelle .gabe.gabe--gegeben { background: #f3f1ee; border-left-color: #cfc8bf; }
.futtertabelle .gabe .haken { width: 1.35rem; height: 1.35rem; }
.futtertabelle .gabe .sz-einzug { width: 1.35rem; }
.verlauffilter .kasten { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; }
.verlaufzeile--inaktiv, .verlaufzeile--inaktiv .v-pferd { color: #a8a198; }

/* Supplement-Formular kompakt und buendig (2026-09-19). */
.titel-mit-pferd { display: flex; align-items: center; gap: 0.6rem; }
.titel-mit-pferd .pferdebild { width: 2.4rem; height: 2.4rem; }
.gabenraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem 1rem; }
.gabenraster .feld { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.gabenraster .feld--breit { grid-column: 1 / -1; }
.gabenraster label:not(.kasten), .gabenraster .feldtitel { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--gedaempft); }
.gabenraster input[type="text"], .gabenraster input[type="date"], .gabenraster input[type="number"], .gabenraster select { height: 2.5rem; min-height: 0; margin: 0; }
.gabenraster textarea { margin: 0; }
.kaestchenreihe { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; min-height: 2.5rem; align-items: center; }
.gabenraster .kasten { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 500; }
.dauerzeile { display: flex; gap: 0.5rem; }
.dauerzeile select { flex: 1 1 auto; }
.dauerzeile input { flex: 0 0 9.5rem; width: 9.5rem; }
.dauerzeile input[type="number"] { flex-basis: 5rem; width: 5rem; }
@media (max-width: 46rem) { .gabenraster { grid-template-columns: minmax(0, 1fr); } }
/* Supplement-Formular, zweite Runde (2026-09-19): eine Spalte, Menge und
   Beginn kurz, daneben Zeiten bzw. Dauer auf gleicher Hoehe. */
.gabenraster { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.gabenzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.2rem; }
.gabenzeile .feld--kurz { flex: 0 0 10rem; width: 10rem; }
.gabenzeile .feld:not(.feld--kurz) { flex: 1 1 14rem; }
.gabenzeile .kaestchenreihe { min-height: 2.5rem; }
.dauerzeile select { flex: 0 1 12rem; }
/* Kopfzeile des Futterplans dunkel mit weisser Schrift wie auf der
   Uebersicht (Katja, 2026-09-19). */
.futtertabelle thead th { background: #2f2c29; color: #fff; border-color: #2f2c29; }
.futtertabelle thead th:first-child { border-top-left-radius: 0.5rem; }
.futtertabelle thead th:last-child { border-top-right-radius: 0.5rem; }

/* Teamtermine aus dem Google-Kalender (REQ-016): eigenes ruhiges Gruen,
   nicht abhakbar. */
:root { --team: #5f7f5a; }
.tageszeile.bereich--team, .tagesplan .tageszeile.bereich--team { background: #eef3ec; border-left-color: var(--team); }
.wochenkarte.bereich--team { background: #eef3ec; border-left-color: var(--team); }
.terminzeile.bereich--team { background: #eef3ec; border-left-color: var(--team); }
.termin-punkt.bereich--team { background: var(--team); }
.termindetails.bereich--team { border-top-color: var(--team); }

/* 2026-09-19 abends: Kopfzeile ganz dunkel, Filtertext normal, Fenster
   fuer Training leicht blau und fuer Gesundheit leicht orange, Haken im
   Formular kraeftiger, Von-Bis-Textfeld ohne eigenen Rahmen. */
table.futtertabelle thead th, table.futtertabelle thead th:first-child { background: #2f2c29; color: #fff; }
.verlauffilter .kasten { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--tinte); font-size: 0.88rem; }
.fenster:has(form.form--training), main:has(> form.form--training) { background: #eef4f9; }
.fenster:has(form.form--gesundheit), main:has(> form.form--gesundheit) { background: #fbf3ec; }
.formknoepfe .formsymbol svg { width: 1.3rem; height: 1.3rem; }
.formknoepfe .symbol--erledigen .symbol-erledigen path, .formknoepfe .symbol--erledigt .symbol-erledigen path { stroke-width: 2.8; }
.bereichwahl .bereichwahl-feld input.bereichwahl-text { border: 0; background: transparent; box-shadow: none; height: 2rem; min-height: 0; margin: 0; padding: 0 0.2rem; width: auto; }
.sz-wer { font-size: 0.72rem; }
/* Teamtermine: Balken ueber der Woche, Marke statt Pferd, Details per
   Klick (2026-09-19). */
.wochenbalken { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem 0; margin-bottom: 0.3rem; }
.wochenbalken-termin { margin: 0 0.15rem; padding: 0.25rem 0.55rem; background: #dfe9dc; border-left: 3px solid var(--team); border-radius: 0.35rem; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
@media (hover: hover) { .wochenbalken-termin:hover, [data-details]:hover { filter: brightness(0.97); } }
[data-details] { cursor: pointer; }
.team-marke { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 1rem; background: var(--team); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.termindetails-google { margin: 0.6rem 0 0; }
.termindetails-google a { color: var(--team); font-weight: 600; text-decoration: none; }
@media (max-width: 46rem) {
    .wochenbalken { grid-template-columns: minmax(0, 1fr); }
    .wochenbalken-termin { grid-column: 1 / -1 !important; white-space: normal; }
}
/* Wochentage als kleine Knoepfe zum An- und Abwaehlen (2026-09-19). */
.wochentagwahl { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wochentag { position: relative; margin: 0; cursor: pointer; }
.wochentag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wochentag span { display: inline-grid; place-items: center; width: 2.3rem; height: 2.1rem; border: 1px solid var(--linie-stark); border-radius: 0.4rem; background: #fff; color: var(--gedaempft); font-size: 0.85rem; font-weight: 600; }
.wochentag input:checked + span { background: #b8612a; border-color: #b8612a; color: #fff; }
.wochentag input:focus-visible + span { outline: 2px solid var(--training); outline-offset: 1px; }
/* Supplements Uebersicht: Titel und Filter auf beigem Grund (2026-09-19). */
.supplementverlauf { overflow: hidden; }
.verlaufkopf { margin: -1rem -1.1rem 0.4rem; padding: 0.9rem 1.1rem 0.5rem; background: #ece4d8; border-bottom: 1px solid #e0d6c8; }
.verlaufkopf h2 { margin: 0 0 0.5rem; }
.verlaufkopf .verlauffilter { margin: 0; }
.verlaufkopf select { background: #fff; }

/* Formular Teamtermin leicht gruen (REQ-016). */
.fenster:has(form.form--team), main:has(> form.form--team) { background: #eff4ed; }
.form--team input[type="checkbox"] { accent-color: var(--team); }

/* Woche am PC: Tageskoepfe ueber den Balken, in den Spalten ausgeblendet.
   Am Handy wie bisher (2026-09-19). */
.wochenkoepfe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 0.3rem; border-radius: 0.45rem; overflow: hidden; }
.wochenkoepfe .wochenspalte-kopf { position: static; margin: 0; padding: 0.4rem 0.2rem; border-left: 1px solid #45403a; }
.wochenkoepfe .wochenspalte-kopf:first-child { border-left: 0; }
.wochenkoepfe .wochenspalte-kopf--heute { color: #f0b27a; font-weight: 600; }
.wochenbalken { grid-auto-flow: row dense; }
@media (min-width: 46.01rem) { .wochenraster .wochenspalte-kopf { display: none; } .wochenspalte { padding-top: 0.35rem; } }
@media (max-width: 46rem) { .wochenkoepfe { display: none; } }

/* Monat: Teamtermine duenn und hell, einzelne ohne Buchstaben. Unten Platz
   fuer bis zu drei gestapelte Balken, sonst liegen sie ueber den Punkten
   (Katja, 2026-09-29: "der Tag nach heute noch nicht gut"). */
.monatstag { padding-bottom: 1.6rem; }
.monatsbalken { align-self: end; height: 5px; margin: 0 3px; border-radius: 3px; background: #a9c4a3; opacity: 0.85; cursor: pointer; z-index: 1; }
@media (hover: hover) { .monatsbalken:hover { background: var(--team); } }
.monatsbalken dialog { cursor: default; }
.termin-punkt.bereich--team { min-width: 0.7rem; width: 0.7rem; height: 0.7rem; padding: 0; background: #a9c4a3; }
/* Abschnittstitel und Filter auf dem Seitenhintergrund, die Liste in der
   Karte darunter (Katja, 2026-09-19). */
.abschnittstitel { margin: 1.4rem 0 0.5rem; }
.supplementuebersicht .verlaufkopf { margin: 0; padding: 0; background: none; border: 0; }
.supplementuebersicht .verlauffilter, .aufgabenverlauf-filter, main > .verlauffilter { margin: 0 0 0.6rem; }
.verlauffilter input[type="text"], .verlauffilter input[type="date"] { width: 9rem; background: #fff; }
.supplementverlauf { padding-top: 0.4rem; }
/* Einstellungen nach Themen, ruhig unter dem Titel (2026-09-19). */
.einstellungsnav { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 0 0 1.2rem; padding: 0.7rem 0 0.8rem; border-bottom: 1px solid var(--linie); }
.einstellungsgruppe { display: flex; flex-direction: column; gap: 0.15rem; min-width: 9rem; }
.einstellungsgruppe-titel { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); margin-bottom: 0.15rem; }
.einstellungsgruppe a { color: var(--tinte); text-decoration: none; font-size: 0.9rem; }
.einstellungsgruppe a:hover { color: #b8612a; }
.einstellungsgruppe a[aria-current="page"] { color: #b8612a; font-weight: 600; }

/* Personenliste kompakt, Kopf dunkel mit weisser Schrift. */
.personenliste { padding: 0; overflow: hidden; }
.personenzeile { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr 1.5fr 2rem; gap: 0.6rem; align-items: center; padding: 0.35rem 0.9rem; border-top: 1px solid var(--linie); font-size: 0.92rem; }
.personenzeile[data-fenster-ziel] { cursor: pointer; }
.personenzeile[data-fenster-ziel]:hover { background: #faf7f2; }
.personenzeile--kopf { background: #2f2c29; color: #fff; border-top: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.personenzeile--still { color: #9a938a; }
.pz-nachname { font-weight: 600; }
.personenzeile .symbol { width: 1.8rem; height: 1.8rem; }
@media (max-width: 46rem) {
    .personenzeile { grid-template-columns: 1fr 1fr 2rem; }
    .personenzeile .pz-funktionen, .personenzeile .pz-zugang, .personenzeile--kopf span:nth-child(n+3) { display: none; }
}

/* Login im selben Formular wie die Person (Katja, 2026-10-25). Schalter aus
   blendet die Felder aus; gespeichert wird trotzdem alles mit einem Knopf. */
.funktionen .feldhinweis { grid-column: 1 / -1; }
.feldhinweis { margin: 0.15rem 0 0.4rem; font-size: 0.82rem; color: var(--gedaempft); }
.feldwert { margin: 0.35rem 0 0; }
.loginteil { border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.6rem 0.9rem 0.8rem; margin: 1rem 0 0; }
.loginteil legend { padding: 0 0.3rem; font-size: 0.9rem; color: var(--gedaempft); }
.login-schalter { display: flex; gap: 0.5rem; align-items: center; margin: 0.2rem 0 0; font-weight: 600; }
.loginteil:not(:has(#login:checked)) .loginfelder { display: none; }
.loginfelder { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--linie); }
.loginfelder .resultate-wahl { display: flex; gap: 0.45rem; align-items: center; margin-top: 0.4rem; }
.loginfelder .resultate-wahl[hidden], .loginfelder .feldhinweis[hidden] { display: none; }

/* Heute liegt im Monat ueber den Teambalken (2026-09-19). */
.monatsraster > .monatstag--heute { position: relative; z-index: 2; }
/* Am Handy ohne leeren Kopf ueber der Uebersicht, das Wetter steht oben. */
@media (max-width: 46rem) {
    .uebersichtkopf .wetter { display: none; }
    .uebersichtkopf:not(:has(.wichtig)) { display: none; }
}
/* Uebersicht: jede Zeile auf eine Zeile, wer und wann nur beim Ueberfahren,
   Aufgaben am Handy in voller Breite (Katja, 2026-09-19). */
/* Wer die Gabe gegeben hat, steht sichtbar in der Zeile (Katja,
   2026-09-26). Bei Aufgaben genuegt weiterhin der Hinweis beim Ueberfahren. */
.aufgabenzeile .az-wer { display: none; }
.gabezeile .gz-wer { display: inline; grid-column: 4; }
.gabezeile .abhaken, .gabezeile > .haken, .gabezeile .sz-einzug { grid-column: 5; justify-self: end; }
.gabezeile--erledigt .haken, .aufgabenzeile--erledigt .haken { justify-self: end; }
.gz-pferd, .az-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 46rem) {
    .uebersicht-raster > .karte, .uebersicht-raster .karte.aufgaben, .uebersicht-raster .karte.heutegaben { width: 100%; align-self: stretch; }
}
/* Mehr Luft vor der Supplements Uebersicht (Katja, 2026-09-19). */
.supplementuebersicht { margin-top: 2.2rem; }
.supplementuebersicht .abschnittstitel { margin-top: 0; }

/* Filter: alle Felder gleich hoch (2026-09-19). */
.verlauffilter select, .verlauffilter input[type="text"], .verlauffilter input[type="date"] { height: 2.4rem; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; box-sizing: border-box; font-size: 0.9rem; }
/* Aufgaben-Verlauf mit Abhakfeld links. */
.aufgabenverlauf .verlaufzeile { grid-template-columns: 1.6rem minmax(0, 1.6fr) 5.5rem minmax(0, 1fr); }
.aufgabenverlauf .verlaufzeile .abhaken { margin: 0; }
.aufgabenverlauf .vz-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pferdeseite: verlinkte Titel braun, Supplements wie ueberall. */
.akte-futter h2 .titellink, .akte-training h2 .titellink, .akte-gesundheit h2 .titellink { color: #b8612a; }
.futter-gaben h2 { font-size: 1.35rem; margin: 0 0 0.4rem; }
.futter-gaben .akte-zeile { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; }
.futter-gaben .akte-datum { color: var(--gedaempft); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
/* Einstellungen: Navigation bleibt beim Scrollen stehen, Links mit
   Listenzeichen (Katja, 2026-09-19). */
.einstellungswahl { position: sticky; top: 0; z-index: 20; background: var(--grund, #f3f1ec); }
.einstellungsnav { background: var(--grund, #f3f1ec); }
.einstellungsgruppe a::before { content: "•"; margin-right: 0.4rem; color: #c9bfb2; }
.einstellungsgruppe a[aria-current="page"]::before { color: #b8612a; }

/* Erklaerung als i mit Info beim Ueberfahren. */
.info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.35rem; cursor: help; outline: none; }
.info-i { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid #b9b2a9; color: var(--gedaempft); font: italic 600 0.72rem/1 Georgia, serif; }
.info:hover .info-i, .info:focus .info-i { border-color: #b8612a; color: #b8612a; }
.info-text { display: none; position: absolute; left: 0; top: calc(100% + 0.4rem); z-index: 40; width: min(24rem, 80vw); padding: 0.7rem 0.8rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.5rem; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15); font: 400 0.78rem/1.45 var(--grotesk); color: var(--gedaempft); text-transform: none; letter-spacing: normal; white-space: normal; }
.info:hover .info-text, .info:focus .info-text, .info:focus-within .info-text { display: block; }
.info-text dl { margin: 0.5rem 0 0; }
.info-text dt { font-weight: 600; margin-top: 0.3rem; }
.info-text dd { margin: 0; }

/* Kompakte Tabellen in den Einstellungen, Kopf dunkel, nichts bricht um. */
.kompakttabelle { font-size: 0.9rem; }
.kompakttabelle thead th { background: #2f2c29; color: #fff; padding: 0.45rem 0.6rem; }
.kompakttabelle td { padding: 0.25rem 0.6rem; vertical-align: middle; white-space: nowrap; }
.kompakttabelle input[type="text"], .kompakttabelle input[type="number"], .kompakttabelle select { height: 2.1rem; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; font-size: 0.88rem; }
.kompakttabelle .reihe, .kompakttabelle .actions { flex-wrap: nowrap; gap: 0.3rem; }
.kompakttabelle button.knopf--klein { padding: 0.25rem 0.55rem; font-size: 0.8rem; }
/* Pferdeakte: Identitaet rutscht unter den Steckbrief, sobald neben dem
   Bild der Platz fehlt. Lange Nummern brechen um statt abgeschnitten zu
   werden (Katja, 2026-09-19: "Ipad oder kleine Bildschirme"). */
.akte-angaben { container-type: inline-size; min-width: 0; }
.akte-angaben .angaben dd { overflow-wrap: anywhere; }
@container (max-width: 44rem) {
    .akte-spalten { grid-template-columns: minmax(0, 1fr); }
    .akte-spalten > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); margin-top: 0.7rem; padding-top: 0.7rem; }
}
@media (max-width: 70rem) {
    .akte-haupt { grid-template-columns: minmax(0, 1fr); }
    .akte-bild img { aspect-ratio: 4 / 3; max-height: 22rem; }
}

/* Impfuebersicht (2026-09-19). */
.impfliste { padding: 0; overflow-x: auto; }
.impftabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.impftabelle thead th { background: #2f2c29; color: #fff; padding: 0.4rem 0.6rem; font-weight: 600; font-size: 0.8rem; text-align: left; white-space: nowrap; }
.impftabelle .impf-unterkopf th, .impftabelle .impf-unterkopf td { background: #f3f0ea; color: var(--gedaempft); font-weight: 600; font-size: 0.74rem; padding: 0.25rem 0.6rem; border-top: 0; }
.impftabelle th[scope="colgroup"] { border-left: 1px solid #5a544c; }
.impftabelle td, .impftabelle tbody th { padding: 0.35rem 0.6rem; border-top: 1px solid var(--linie); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Senkrechte Trennlinien zwischen Pferd und je Art, etwas staerker
   (Katja, 2026-09-21). */
.impftabelle td:nth-child(2n), .impftabelle .impf-unterkopf th:nth-child(2n) { border-left: 1.5px solid var(--linie-stark); }
/* Das Datum fuehrt zum Eintrag, ohne die Farbe zu aendern. */
.impf-ziel { color: inherit; text-decoration: none; }
.impf-ziel:hover .impf-faellig { text-decoration: none; }
.impftabelle tbody th { font-weight: 600; }
.impftabelle .pferdebild { width: 1.6rem; height: 1.6rem; }
.impf-letzte { color: var(--gedaempft); }
.impf-faellig--ueberfaellig { color: #c0392b; font-weight: 700; }
.impf-faellig--bald { color: #b8612a; font-weight: 600; }
/* Fest eingeplant ist gruen und ruhig (Katja, 2026-09-21). */
.impf-faellig--geplant { color: var(--erfolg); font-weight: 600; }
.nur-drucken { display: none; }
@media print {
    .seitenleiste, .tableiste, .plus-schwebend, .nicht-drucken, .handyleiste { display: none !important; }
    .nur-drucken { display: block; }
    body, main { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .karte { box-shadow: none !important; border: 1px solid #ccc !important; }
    /* Im Druck ohne dunkle Flaechen, spart Tinte (Katja, 2026-09-19). */
    .impftabelle thead th, .impftabelle thead td { background: none !important; color: #000 !important; border-bottom: 1px solid #000; }
    .impftabelle th[scope="colgroup"] { border-left: 1px solid #999; }
    .impftabelle .pferdebild { display: none; }
    a { color: #000; text-decoration: none; }
}
/* Rueckfrage Erinnerung nach dem Abhaken (2026-09-19). */
.erinnerungsfrage { max-width: 26rem; border: 0; border-top: 4px solid #b8612a; border-radius: 0.7rem; padding: 1rem 1.2rem; box-shadow: 0 18px 50px rgba(0,0,0,0.25); }
.erinnerungsfrage .ef-frage { margin: 0 0 0.7rem; font-weight: 600; }
.erinnerungsfrage .ef-wahl { display: flex; gap: 1.5rem; margin-bottom: 0.6rem; }
.erinnerungsfrage .ef-wahl input { accent-color: #b8612a; }
.erinnerungsfrage .ef-datum-zeile { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.erinnerungsfrage .ef-datum { width: auto; margin: 0; }

/* Eintaegige Arten ohne Bis (2026-09-19). */
.zeitraum--eintaegig .zeitraum-zeile--bis, .zeitraum--eintaegig .jedertag { display: none !important; }

/* Erinnerungsuebersicht: am Handy Karten statt Tabelle (2026-09-19). */
.erinnerungskarten { display: none; }
.erinnerungskarte { padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }
.erinnerungskarte .tagespferd { margin-bottom: 0.3rem; }
.ek-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) 4.8rem 4.8rem; gap: 0.5rem; padding: 0.25rem 0; border-top: 1px solid var(--linie); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.ek-art { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impftabelle th { text-transform: none; letter-spacing: normal; }
@media (max-width: 46rem) {
    .impfliste { display: none; }
    .erinnerungskarten { display: block; }
}
@media print {
    .impfliste { display: block !important; }
    .erinnerungskarten { display: none !important; }
}

/* Report je Pferd (REQ-015). Aufbau nach Katja, 2026-09-19: Logo zentriert,
   Kopf gegliedert wie die Pferdeseite, Liste klein, Notizen noch kleiner. */
.report { max-width: 60rem; }
.report-kopf { text-align: center; margin-bottom: 1.2rem; }
.report-logo { display: block; width: 4.5rem; height: auto; margin: 0 auto 0.6rem; }
.report-kopf h1 { margin: 0; }
.report-zeitraum { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--gedaempft); }
.report-daten { display: flex; gap: 1.6rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-bottom: 1.2rem; }
.report-daten > div { flex: 1; min-width: 0; }
.report-foto { width: 8.5rem; height: 8.5rem; object-fit: cover; border-radius: 0.5rem; flex: none; }
.report-daten h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.report-daten dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.9rem; margin: 0; font-size: 0.8rem; }
.report-daten dt { color: var(--gedaempft); }
.report-daten dd { margin: 0; }
.reporttabelle { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.reporttabelle th { text-align: left; padding: 0.3rem 0.45rem; background: #f1efeb; color: var(--tinte); font-size: 0.7rem; font-weight: 600; text-transform: none; letter-spacing: normal; border-bottom: 1px solid #d8d3cb; }
.reporttabelle td { text-align: left; vertical-align: top; padding: 0.28rem 0.45rem; border-bottom: 1px solid #e6e2dc; }
.reporttabelle td:first-child { white-space: nowrap; }
.report-notiz { white-space: pre-line; font-size: 0.7rem; color: #444; }
.report-fuss { margin-top: 1.2rem; font-size: 0.7rem; color: var(--gedaempft); text-align: left; }
@media print {
    .report { max-width: none; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
    .report-kopf h1 { font-size: 18pt; }
    .report-daten dl, .reporttabelle { font-size: 8.5pt; }
    .reporttabelle th { font-size: 7.5pt; background: #f1efeb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-notiz { font-size: 7.5pt; }
    .reporttabelle tr { break-inside: avoid; }
    .reporttabelle thead { display: table-header-group; }
}

/* Link fett mit Pfeil nach rechts, z. B. Pferdepass (Katja, 2026-09-19). */
.pfeillink { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; text-decoration: none; }
.pfeillink svg { width: 0.9em; height: 0.9em; }
.pfeillink:hover { color: var(--akzent-dunkel, #3f7072); }

/* Namensleiste fuer den gemeinsamen Stallzugang (REQ-014, 2026-09-19). */
.namensleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.6rem 0.8rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.namensleiste-frage { font-weight: 600; margin-right: 0.4rem; }
.namenskachel { min-height: 44px; padding: 0.4rem 1rem; border: 1px solid var(--linie-stark); border-radius: 2rem; background: #fff; color: var(--tinte); font-weight: 600; }
.namenskachel--aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Kioskmodus am Stallbildschirm, 27 Zoll mit Touch (REQ-014, 2026-09-19). */
html:has(body.kiosk) { font-size: 18px; }
/* Grosse Flaechen, aber Kaestchen bleiben quadratisch (Katja, 2026-09-19:
   "Abhak Vierecke rechts sind sehr verzogen"). */
body.kiosk button:not(.haken), body.kiosk .knopf, body.kiosk .symbol, body.kiosk select, body.kiosk input:not([type="checkbox"]):not([type="radio"]) { min-height: 48px; }
body.kiosk .symbol { min-width: 48px; }
body.kiosk .haken { width: 2.2rem; height: 2.2rem; min-height: 0; }
/* Logo groesser, Menue mit Abstand darunter (Katja, 2026-09-19). */
body.kiosk .seitenmarke img { width: 5.5rem; margin-top: 0.4rem; }
body.kiosk .seitenmarke { margin-bottom: 2.2rem; }
/* Neu laden dezent, nur fuer den Notfall. */
.kiosk-neu { width: 100%; min-height: 0 !important; margin: 0; padding: 0.35rem; background: none; border: 1px solid var(--linie); color: var(--gedaempft); font-size: 0.8rem; font-weight: 500; }

/* Namensleiste: am PC dezent unten links in der Seitenleiste, am Handy oben
   auf dem Dashboard (Katja, 2026-09-19: "Dezent unten links?"). */
.namensleiste--seite { margin: auto 0 0.6rem; padding: 0.5rem 0 0; background: none; border: 0; border-top: 1px solid #ddd5c8; border-radius: 0; gap: 0.35rem; }
.namensleiste--seite .namensleiste-frage { width: 100%; margin: 0 0 0.1rem; font-size: 0.72rem; font-weight: 500; color: var(--gedaempft); }
.namensleiste--seite .namenskachel { min-height: 2rem !important; padding: 0.2rem 0.7rem; font-size: 0.82rem; font-weight: 500; background: transparent; }
.namensleiste--seite .namenskachel--aktiv { background: var(--akzent); color: #fff; }
/* Auf der dunklen Seitenleiste helle Schrift, sonst sind die Namen
   unsichtbar (Stallbildschirm, 2026-09-21). */
.seitenleiste .namensleiste--seite { border-top-color: #4a443d; }
.seitenleiste .namensleiste--seite .namenskachel:not(.namenskachel--aktiv) { color: #e8e0d4; border-color: #6b645b; }
.namensleiste--seite + .seitenwer { margin-top: 0; }
@media (min-width: 64.01rem) {
    .namensleiste--oben { display: none; }
}

/* Alle Knoepfe mit heller Farbe statt weiss, damit man sie sieht (Katja,
   2026-09-19: "alle buttons brauchen eine farbe, können hell sein"). */
.knopf--still, button.still, .kopfzeile .knopf--still, .regelform button[type="submit"].still { background: #f1e7da; border-color: #dccab4; color: #5d4630; }
.knopf--still:hover, button.still:hover, .kopfzeile .knopf--still:hover, .regelform button[type="submit"].still:hover { background: #e7d7c3; border-color: #c9ae8e; color: #4a3826; }

/* Leerer Platz in der Handyleiste, damit das Plus mittig bleibt (2026-09-19). */
.tableiste > .tabluecke { flex: 1 1 0; }

/* Dreisprachige Namen (2026-09-19). */
.name-uebersetzt { width: 9rem; font-size: 0.85rem; }
.umbenennen > summary { cursor: pointer; list-style: none; }
.umbenennen > summary::-webkit-details-marker { display: none; }
.umbenennen-stift { color: var(--gedaempft); font-size: 0.8rem; margin-left: 0.25rem; }
.umbenennen-form { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.umbenennen-form input { width: 9rem; font-size: 0.85rem; }

/* Einstellungsmenue am Handy: je zwei Gruppen nebeneinander, kleinere
   Schrift, damit das Menue weniger Platz braucht (Katja, 2026-09-19). */
@media (max-width: 64rem) {
    .einstellungsnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; padding: 0.5rem 0 0.6rem; }
    .einstellungsgruppe { min-width: 0; gap: 0.05rem; }
    .einstellungsgruppe a { font-size: 0.8rem; line-height: 1.35; }
    .einstellungsgruppe-titel { font-size: 0.62rem; }
    /* Spanisch und Englisch nebeneinander statt untereinander. */
    .name-uebersetzt { width: calc(50% - 0.25rem) !important; display: inline-block; }
}

/* Wochenliste am Handy: Haken in eigener Spalte rechts statt halb hinter
   dem Pferdebild (Katja, 2026-09-19: "sieht etwas komisch aus"). */
@media (max-width: 46rem) {
    .wochenkarte { grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1.2fr) auto; }
    .wochenkarte > .wk-kopf { display: contents; }
    .wochenkarte .wk-kopf > :not(.wk-zeit) { grid-column: 4; grid-row: 1; }
    .wochenkarte .wk-pferd, .wochenkarte .wk-art, .wochenkarte .wk-zeit { grid-row: 1; }
}

/* Am Handy und am iPad im Hochformat: erst Stallnotiz, Supplements und
   Aufgaben, dann der Tag, die Wochenübersicht zuletzt (Katja, 2026-09-20). */
@media (max-width: 64rem) {
    .uebersicht-raster .stallnotiz { order: 1; }
    .uebersicht-raster .heutegaben { order: 2; }
    .uebersicht-raster .aufgaben { order: 3; }
    .uebersicht-raster .tagesplan { order: 4; }
    .uebersicht-raster .kalender { order: 5; }
    .uebersicht-raster .wochenplan { order: 6; }
}

/* Katja, 2026-09-20: der Tag zuerst, danach Supplements und Aufgaben,
   die Wochenübersicht zuletzt. Gilt am Handy und am iPad im Hochformat. */
@media (max-width: 64rem) {
    /* Ohne die beiden Spalten-Huellen greift die Reihenfolge auch bei
       breiteren Handys (Katja, 2026-09-21, Android des Mitarbeiters: "erst
       der Tag, dann wieder die Woche und dann erst die Tareas"). */
    .uebersicht-raster { display: flex; flex-direction: column; align-items: stretch; }
    .uebersicht-links, .uebersicht-rechts { display: contents; }
    .uebersicht-raster .stallnotiz { order: 1; }
    .uebersicht-raster .tagesplan { order: 2; }
    .uebersicht-raster .heutegaben { order: 3; }
    .uebersicht-raster .aufgaben { order: 4; }
    .uebersicht-raster .kalender { order: 5; }
    .uebersicht-raster .wochenplan { order: 6; }
}

/* Initialen neben dem Abhakfeld beim gemeinsamen Stallzugang (Katja, 2026-09-20). */
.abhaken { display: inline-flex; align-items: center; gap: 0.3rem; }
.wer-knopf { min-height: 0; padding: 0.12rem 0.4rem; border: 1px solid var(--linie-stark); border-radius: 1rem; background: #f1e7da; color: #5d4630; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; }
.wer-knopf:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }
body.kiosk .wer-knopf { min-height: 2.2rem; font-size: 0.8rem; padding: 0.2rem 0.6rem; }

/* Zuständige Person einer Aufgabe, deutlich sichtbar (Katja, 2026-09-20). */
.kuerzel-zustaendig { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.3rem; margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 0.8rem; background: var(--akzent); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: 0.05rem; }

/* Mehrere Einträge auswählen und löschen (Katja, 2026-09-20). */
.l-wahl { display: none; }
body.auswahl-modus .l-wahl { display: inline-grid; place-items: center; margin-right: 0.35rem; }
body.auswahl-modus .listenzeile { cursor: pointer; }
.loeschleiste { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; padding: 0.5rem 0.8rem; background: var(--karte); border: 1px solid var(--linie-stark); border-radius: var(--rund); }
.loeschleiste-zahl { min-width: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinte); }
.loeschleiste .symbol { width: 2.25rem; height: 2.25rem; }
.loeschleiste .symbol svg { width: 1.25rem; height: 1.25rem; }
.loeschleiste .loeschleiste-weg { background: #b0402c; color: #fff; }
.loeschleiste #auswahl-aus { color: var(--tinte); }

/* Kopfzeile von Training & Gesundheit am Handy: Titel oben, die Knöpfe
   klein und rechtsbündig darunter (Katja, 2026-09-20). Auf den anderen
   Seiten bleiben Titel und Symbole auf einer Zeile (2026-09-29: "Die icons
   kommen auch auf die Höhe vom Titel"). */
@media (max-width: 46rem) {
    .kopfzeile { flex-wrap: wrap; row-gap: 0.4rem; }
    .kopfzeile--zweizeilig h1 { flex: 1 1 0; min-width: 0; }
    .kopfzeile--zweizeilig > .symbol--drucken { order: 1; }
    .kopfzeile--zweizeilig .reihe { order: 2; flex: 1 1 100%; justify-content: flex-end; gap: 0.4rem; }
    .kopfzeile h1 ~ .reihe, .kopfzeile .ansichtwahl, .kopfzeile .plus-gross { margin-left: auto; }
    .kopfzeile .knopf--klein, .kopfzeile button.knopf--klein { min-height: 2rem; padding: 0.25rem 0.6rem; font-size: 0.78rem; }
    .kopfzeile .symbol { width: 2rem; height: 2rem; }
}

/* Nachtbild am Stallbildschirm: dunkel, das Logo klein in der Mitte
   (Katja, 2026-09-21). Der Bildschirm bleibt an und reagiert auf Berührung. */
#nachtbild { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #050505; }
#nachtbild[hidden] { display: none; }
#nachtbild img { width: 6rem; opacity: 0.18; }

/* Untere Leiste am Handy als festes Raster mit sieben Plätzen: drei links,
   das Plus in der Mitte, drei rechts. Fehlt einer Rolle ein Punkt, bleibt
   sein Platz leer und das Plus steht trotzdem mittig (Katja, 2026-09-21). */
@media (max-width: 64rem) {
    .tableiste { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; }
    .tableiste > a, .tableiste > .tabluecke, .tableiste .plusmenue { flex: none; }
}

/* Auswählen und Erinnerungsübersicht in einer Reihe, gleiche Höhe
   (Katja, 2026-09-21: "Auswählen ist immer noch nicht in einer Reihe"). */
.kopfzeile { align-items: center; }
.kopfzeile .reihe { align-items: center; }
.kopfzeile .knopf--klein, .kopfzeile button.knopf--klein { display: inline-flex; align-items: center; justify-content: center; min-height: 2.1rem; line-height: 1.1; }

/* Erledigt im Formular als rundes Abhak-Symbol wie in den Listen: leer
   offen, ausgefüllt erledigt (Katja, 2026-09-21). */
.hakenfeld { display: inline-flex; cursor: pointer; }
.hakenfeld input { position: absolute; opacity: 0; width: 0; height: 0; }
.hakenfeld--training { --farbe: var(--training); }
.hakenfeld--gesundheit { --farbe: #b8612a; }
/* Angehakt sieht es aus wie ein erledigter Eintrag in der Liste. */
.hakenfeld input:checked + .symbol--erledigen { background: var(--farbe); border-color: var(--farbe); color: #fff; }
.hakenfeld input:focus-visible + .symbol { outline: 2px solid var(--farbe); outline-offset: 2px; }

/* Auswählen und Erinnerungsübersicht exakt gleich hoch (Katja, 2026-09-21). */
.kopfzeile .knopf--klein, .kopfzeile a.knopf--klein, .kopfzeile button.knopf--klein { min-height: 2.25rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; line-height: 1.2; }

/* Erinnerungsübersicht: senkrechte Linien zwischen den Arten (Katja, 2026-09-21). */
.impftabelle td:nth-child(2n), .impftabelle .impf-unterkopf td:nth-child(2n), .impftabelle .impf-unterkopf th:nth-child(2n) { border-left: 1px solid #d8d3cb; }
.impftabelle thead th[scope="colgroup"] { border-left: 1px solid #6b635a; }

/* Liste Training & Gesundheit drucken, so wie sie gefiltert ist (Katja, 2026-09-21). */
.listen-druckkopf { font-size: 0.85rem; color: #333; margin: 0 0 0.5rem; }
@media print {
    .kalenderoben .planfilter, .loeschleiste, .nachladen, .plus-schwebend { display: none !important; }
    .listenwoche-kopf { background: none !important; color: #000 !important; border-bottom: 1px solid #000; }
    .listenzeile { break-inside: avoid; }
    .eintragsliste { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
    .l-haken, .l-wahl { display: none !important; }
}

/* Gruppentitel der Liste: kein Balken, nur fett (Katja, 2026-09-21). */
.listenwoche-kopf { background: none !important; color: var(--tinte) !important; padding: 0.5rem 0.2rem 0.2rem; border-bottom: 1px solid var(--linie); border-radius: 0; font-size: 0.9rem; font-weight: 700; text-transform: none; letter-spacing: 0.01em; }
.listenwoche--leer .listenwoche-kopf { color: var(--gedaempft) !important; }
.listenwoche-kopf .zusatz { color: var(--gedaempft); }

/* Woche oder Monat als Symbole in der Filterzeile (Katja, 2026-09-21). */
.gruppenwahl-symbole { display: flex; align-items: center; gap: 0.2rem; }
.gruppenwahl-symbole .symbol { width: 2rem; height: 2rem; min-height: 0; border: 1px solid transparent; }
.gruppenwahl-symbole .symbol[aria-current="page"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Aufgaben: Bildspalte fest, damit Initialen und Haken in jeder Zeile
   rechts buendig untereinander stehen. Der Titel darf zwei Zeilen
   nutzen statt nach einem Buchstaben abzubrechen (Katja, 2026-09-22:
   "Abhak icons rechts ausrichten bitte soll schöner aussehen"). */
.aufgabenzeile .az-bild, .aufgabenzeile .az-wer { grid-column: 3; justify-self: center; }
.aufgabenzeile .abhaken { grid-column: 4; justify-self: end; }
.aufgabenzeile .az-titel { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.aufgaben-scroll { overflow-x: hidden; }

/* Bildschirmtastatur fuer die Anmeldung am Stallbildschirm (2026-09-22). */
.bildschirmtastatur { margin: 1rem auto 0; max-width: 44rem; display: grid; gap: 0.4rem; user-select: none; }
.bt-reihe { display: flex; justify-content: center; gap: 0.4rem; }
.bt-taste { flex: 1 1 0; max-width: 3.6rem; min-height: 3.2rem; margin: 0; padding: 0; font-size: 1.25rem; font-weight: 500; background: #fff; color: var(--tinte); border: 1px solid var(--linie-stark); border-radius: 0.5rem; }
.bt-taste:active { background: var(--akzent); color: #fff; }
.bt-taste--breit { max-width: 5.4rem; flex-grow: 1.5; }
.bt--gross .bt-taste[data-taste]:not([data-taste=umschalt]):not([data-taste=loeschen]) { text-transform: uppercase; }
.bt--gross .bt-taste[data-taste=umschalt] { background: var(--akzent); color: #fff; }
body.kiosk .anmeldung { max-width: 46rem; }
body.kiosk .anmeldung form { max-width: 22rem; margin: 0 auto; }

/* Der Zusatz "geplant" oder "Erinnerung" in derselben Farbe wie das Datum
   daneben (Katja, 2026-09-25). */
.impf-faellig .zusatz { color: inherit; font-weight: 400; }

/* Wann und wer beim Haken, kleiner hinter dem Mittel (Katja, 2026-09-26). */
.verlaufzeile--haken .v-verabreicht { font-size: 0.8em; color: var(--gedaempft); }

/* Am Handy das Datum allein, darunter beide Uhrzeiten auf einer Zeile, auch
   bei breiterem Handy oder groesserer Schrift (Katja, 2026-09-26: "Bei
   Handys immer von bis Uhrzeit auf eine Zeile"). */
@media (max-width: 46rem) { .zeitraum-zeile--bereich .bereichwahl { flex-basis: 100%; min-width: 0; } .zeitraum-zeile--bereich select, .zeitraum-zeile--bereich .uhrwahl { flex: 1 1 0; width: auto; min-width: 0; max-width: 6.4rem; } }
@media (max-width: 46rem) { .zeitraum-zeile--bereich .bereichwahl-feld { max-width: 100%; } .zeitraum-zeile--bereich .bereichwahl .bereichwahl-feld input.bereichwahl-text { flex: 1 1 auto; min-width: 0; } }

/* Anwesenheit des Trainers wie ein Teamtermin, aber blau (REQ-019). */
:root { --anwesenheit: #4a74a0; }
.tageszeile.art--anwesenheit, .tagesplan .tageszeile.art--anwesenheit,
.wochenkarte.art--anwesenheit, .terminzeile.eintrag--anwesenheit { background: #e7eef6; border-left-color: var(--anwesenheit); }
.wochenbalken-termin.art--anwesenheit { background: #dbe6f2; border-left-color: var(--anwesenheit); }
.termindetails.art--anwesenheit { border-top-color: var(--anwesenheit); }
.termin-punkt.art--anwesenheit { background: #9bb6d3; }
.monatsbalken.art--anwesenheit { background: #9bb6d3; }
@media (hover: hover) { .monatsbalken.art--anwesenheit:hover { background: var(--anwesenheit); } }
.jahrwahl { display: flex; align-items: center; gap: 1.2rem; margin: 1.2rem 0 0.4rem; }
.trainingszahlen { max-width: 26rem; }
.trainingszahlen .zahl { text-align: right; }
/* Die duennen Balken im Monat sind mit dem Finger kaum zu treffen: groessere,
   unsichtbare Tippflaeche, der Balken bleibt duenn (Katja, 2026-09-29: "Das
   funktioniert nur schwierig, nicht bei jedem Mal drauf klicken"). */
.monatsbalken { position: relative; }
.monatsbalken::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -4px; }
/* Am iPhone zeigt der erste Tipp sonst nur die Hover-Farbe und erst der
   zweite oeffnet die Info (Katja, 2026-09-29: "Ich kann die Balken gut
   anklicken und markieren, dann müssten sie aber auch schon die Info
   anzeigen"). Deshalb Hover nur mit Maus, siehe oben. */
.monatsbalken, [data-details] { touch-action: manipulation; }
/* Jans Zeiten: kompakte Zeilen, links, Bemerkung daneben (2026-09-29). */
.anwesenheitsliste { padding: 0.2rem 0; }
.anwesenheitszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; padding: 0.45rem 0.9rem; border-bottom: 1px solid var(--linie); font-size: 0.92rem; text-align: left; cursor: pointer; }
.anwesenheitszeile:last-child { border-bottom: 0; }
.anwesenheitszeile--vorbei { background: #f1efeb; color: var(--gedaempft); }
.anwesenheitszeile--jetzt { background: #dbe6f2; box-shadow: inset 4px 0 0 var(--anwesenheit); font-weight: 600; }
.anw-wann { font-variant-numeric: tabular-nums; white-space: nowrap; }
.anw-notiz { color: var(--gedaempft); font-size: 0.85rem; }
@media (hover: hover) { .anwesenheitszeile:hover { background: #f4f7fb; } }
/* Angetippte Zeile, bis das Fenster geladen ist (2026-09-29). */
[data-fenster-ziel].angetippt { background-color: #e3eaf2; transition: none; }

/* Eigene Uhrzeitliste (Katja, 2026-10-01): 08:00 oben, frueher nach oben
   gescrollt. Das select bleibt unsichtbar als Wertetraeger. */
.uhrwahl { position: relative; display: block; min-width: 0; }
.uhrwahl > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.uhrwahl-feld { display: flex; align-items: center; width: 100%; height: 2.2rem; min-height: 0; margin: 0; padding: 0 1.8rem 0 0.7rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.55rem center / 1rem; border: 1px solid var(--linie); border-radius: 0.45rem; color: var(--tinte); font: inherit; font-size: 0.88rem; font-weight: 400; font-variant-numeric: tabular-nums; text-align: left; box-shadow: none; }
.uhrwahl-feld:hover, .uhrwahl-feld:focus { background-color: #fff; color: var(--tinte); border-color: var(--linie-stark); }
.uhrwahl-feld[aria-expanded="true"] { border-color: var(--training); }
.uhrwahl-liste { position: absolute; top: calc(100% + 0.3rem); left: 0; z-index: 30; display: flex; flex-direction: column; width: max(100%, 6.5rem); max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.3rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.uhrwahl-liste[hidden] { display: none; }
.uhrwahl-liste button { flex: none; width: 100%; min-height: 0; margin: 0; padding: 0.45rem 0.7rem; background: none; border: 0; border-radius: 0.35rem; color: var(--tinte); font: inherit; font-size: 0.92rem; font-weight: 400; font-variant-numeric: tabular-nums; text-align: left; justify-content: flex-start; }
.uhrwahl-liste button:hover { background: #f3f0ea; color: var(--tinte); }
.uhrwahl-liste button[aria-selected="true"] { background: var(--marke-satt); color: var(--auf-marke); font-weight: 600; }
/* Foto waehlen oder aus der Zwischenablage einfuegen (2026-10-02). */
.fotowahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fotowahl input[type="file"] { flex: 1 1 14rem; min-width: 0; }
.fotowahl .foto-einfuegen { margin: 0; }
.foto-vorschau { margin-top: 0.5rem; }

/* Arbeitsplan (REQ-020). */
.ap-arbeitszeit { margin: 0.4rem 0 0.8rem; padding: 0.6rem 0.9rem; background: #fff4c7; border-radius: 0.6rem; font-size: 1.05rem; color: var(--tinte); }
.ap-arbeitszeit span { color: var(--gedaempft); font-size: 0.85rem; }
.ap-blaettern { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.ap-blaettern h2 { margin: 0; }
.ap-raster { width: 100%; border-collapse: collapse; background: var(--karte); border-radius: 0.6rem; overflow: hidden; font-size: 0.88rem; color: var(--tinte); }
.ap-raster th, .ap-raster td { padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--linie); text-align: left; }
.ap-raster thead th { background: #2b2620; color: #fff; }
.ap-raster tbody th { white-space: nowrap; font-weight: 400; font-variant-numeric: tabular-nums; }
.ap-zelle { width: calc(55% / var(--ap-spalten)); cursor: pointer; text-align: center !important; font-weight: 600; }
.ap-wochenende { background: #efece6; }
.ap-festtag { background: #f6dede; }
.ap-heute th { box-shadow: inset 4px 0 0 #e8c547; }
.ap-ohne-vertrag { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0, 0, 0, 0.07) 5px 7px); color: var(--gedaempft); }
.ap-art--full { background-color: #dfe9dc; }
.ap-art--half { background-color: #eef3ec; }
.ap-art--off { color: var(--gedaempft); font-weight: 400; }
.ap-art--vacation { background-color: #dbe6f2; }
.ap-art--half_vacation { background-color: #e7eef6; }
.ap-festtagname { color: #b0402c; font-weight: 600; }
.ap-notiz { cursor: pointer; color: var(--gedaempft); font-size: 0.82rem; }
.ap-raster tfoot th, .ap-raster tfoot td { font-weight: 600; background: #f6f3ee; }
.ap-raster tfoot td { text-align: center; }
.ap-auswahl { position: absolute; z-index: 40; display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: 19rem; padding: 0.4rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.ap-auswahl[hidden] { display: none; }
.ap-auswahl button { min-height: 0; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--linie); border-radius: 0.4rem; background-color: #fff; color: var(--tinte); font-weight: 600; }
.ap-auswahl button:hover { color: var(--tinte); border-color: var(--linie-stark); }
.ap-zelle--gewaehlt { outline: 2px solid var(--training); outline-offset: -2px; }

/* Arbeitsplan: Einstellungen (REQ-020) */
.ap-zahlfeld { width: 4.5rem; }
.ap-festtage { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.ap-festtage li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.2rem 0; border-bottom: 1px solid var(--linie); }
.ap-festtage form { margin: 0; }
.ap-einstellungen .regelform input[type="date"] { width: auto; min-width: 9.5rem; flex: 0 0 auto; }
.ap-einstellungen .regelform input[type="time"] { width: auto; flex: 0 0 auto; }
.ap-einstellungen .angaben { grid-template-columns: max-content 1fr; margin-bottom: 0.6rem; }
.ap-einstellungen .regelform { margin-bottom: 0.7rem; }
.ap-jahr { overflow-x: auto; }
.ap-jahr .ap-raster thead th { font-size: 0.7rem; letter-spacing: 0; white-space: normal; }
.ap-jahr .ap-raster td { text-align: right; font-variant-numeric: tabular-nums; }
.ap-jahr .angaben { margin-top: 0.6rem; }
.ap-jahr .ap-raster thead th + th { text-align: right; }

/* Ansichtswahl im Kalender: Symbole dunkelbraun statt fast weiss (Katja,
   2026-10-04: "Arbeitsplan Icon sieht man kaum, auch Listensymbol nicht"). */
.kopfzeile .ansichtwahl a.symbol:not([aria-current="page"]) { color: var(--akzent-dunkel); }
.kopfzeile .ansichtwahl a.symbol:not([aria-current="page"]):hover { color: var(--akzent-dunkel); background: var(--akzent-zart); }
.kopfzeile .ansichtwahl a.symbol[aria-current="page"] { color: #fff; }

/* Arbeitsplan: geblockte Tage (REQ-021) */
.ap-datum { cursor: pointer; }
.ap-datum:hover { text-decoration: none; }
.ap-zelle--gesperrt { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(122, 90, 60, 0.12) 6px 9px); }
.ap-zelle--gesperrt .symbol-schloss { width: 0.95rem; height: 0.95rem; color: var(--akzent-dunkel); vertical-align: middle; }
.ap-zelle--konflikt { outline: 2px solid var(--warnung); outline-offset: -2px; }
.ap-blockgrund { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--akzent-dunkel); font-weight: 600; }
.ap-blockgrund .symbol-schloss { width: 0.9rem; height: 0.9rem; }
.ap-auswahl-hinweis { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--akzent-dunkel); }
.ap-auswahl-hinweis[hidden], .ap-auswahl button[hidden] { display: none; }
.ap-auswahl-hinweis .symbol-schloss { width: 0.85rem; height: 0.85rem; vertical-align: -0.1rem; }
.ap-blockwahl { position: absolute; z-index: 40; display: flex; flex-direction: column; gap: 0.45rem; width: 16rem; padding: 0.7rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); color: var(--tinte); }
.ap-blockwahl[hidden] { display: none; }
.ap-blockwahl label { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.ap-blockwahl .reihe { gap: 0.3rem; flex-wrap: wrap; }
.ap-blockwahl button[hidden] { display: none; }

/* Arbeitsplan: Arbeitszeit waehlen (REQ-022) */
.ap-arbeitszeit--waehlbar { cursor: pointer; }
.ap-arbeitszeit--waehlbar:hover, .ap-arbeitszeit--waehlbar:focus-visible { outline: 2px solid #e8d48a; }
.ap-arbeitszeit .ap-zeitab { color: var(--akzent-dunkel); font-weight: 600; }
.ap-arbeitszeit .ap-zeittrenner { margin: 0 0.3rem; }
.ap-zeitwahl { position: absolute; z-index: 40; display: flex; flex-direction: column; gap: 0.5rem; width: min(22rem, calc(100vw - 2rem)); padding: 0.8rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); color: var(--tinte); }
.ap-zeitwahl[hidden], .ap-zeitneu[hidden], .ap-zeitfehler[hidden] { display: none; }
.ap-zeitwahl label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; font-size: 0.85rem; color: var(--gedaempft); }
.ap-zeitneu { display: flex; flex-direction: column; gap: 0.4rem; }
.ap-zeitneu .reihe { align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
.ap-zeitneu input[type="time"] { width: auto; flex: 1 1 0; min-width: 0; }
.ap-zeitfehler { margin: 0; color: var(--warnung); font-size: 0.85rem; }

/* Arbeitsplan uebersichtlicher (REQ-023, Katja 2026-10-04): senkrechte
   Linien, Kreise statt Text, Summen oben, Standardwoche, Druck. */
.ap-kopf { align-items: center; }
.ap-kopf .reihe { gap: 0.4rem; align-items: center; margin-left: auto; }
.ap-kopf .knopf, .ansichtwahl .knopf { margin: 0; }
.ap-jahrtitel { display: flex; align-items: center; gap: 0.6rem; }
.ap-jahrtitel h1 { margin: 0; }
.ap-arbeitszeit .ap-zeittitel { font-weight: 700; color: var(--tinte); font-size: 0.95rem; }

.ap-raster th, .ap-raster td { border-right: 1px solid var(--linie-stark); }
.ap-raster th:last-child, .ap-raster td:last-child { border-right: 0; }
.ap-raster thead th { border-right-color: #4a423a; }
.ap-art--full, .ap-art--half, .ap-art--vacation, .ap-art--half_vacation { background-color: transparent; }
.ap-wochenende .ap-zelle, .ap-festtag .ap-zelle { background-color: transparent; }

.ap-kreis { display: inline-block; width: 1.05rem; height: 1.05rem; border-radius: 50%; vertical-align: middle; flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ap-kreis--full { background: #d23c32; }
.ap-kreis--off { background: #3e9a52; }
.ap-kreis--vacation { background: #2f74c0; }
.ap-kreis--half { background: linear-gradient(90deg, #d23c32 50%, #3e9a52 50%); }
.ap-kreis--half_vacation { background: linear-gradient(90deg, #d23c32 50%, #2f74c0 50%); }

.ap-legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.2rem 0 0.6rem; font-size: 0.82rem; color: var(--gedaempft); }
.ap-legende span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ap-legende .symbol-schloss { width: 0.95rem; height: 0.95rem; color: var(--akzent-dunkel); }

.ap-summen { width: auto; min-width: min(100%, 34rem); margin: 0 0 0.6rem; border-collapse: collapse; background: var(--karte); border-radius: 0.6rem; overflow: hidden; font-size: 0.88rem; color: var(--tinte); }
.ap-summen th, .ap-summen td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--linie); border-right: 1px solid var(--linie-stark); text-align: right; font-variant-numeric: tabular-nums; }
.ap-summen th:last-child, .ap-summen td:last-child { border-right: 0; }
.ap-summen thead th { background: #f1ece4; color: var(--tinte); font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ap-summen tbody th { text-align: left; font-weight: 600; }
.ap-summen .ap-minus { color: var(--warnung); font-weight: 600; }
.ap-summen .ap-plus { color: var(--erfolg); font-weight: 600; }

.ap-auswahl button { display: inline-flex; align-items: center; gap: 0.35rem; }
.ap-auswahl button .symbol-kreuz { width: 1rem; height: 1rem; }
.ap-kopfperson { cursor: pointer; text-decoration: none; text-underline-offset: 0.2rem; }
.ap-musterwahl { position: absolute; z-index: 40; display: flex; flex-direction: column; gap: 0.35rem; width: min(17rem, calc(100vw - 2rem)); padding: 0.7rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); color: var(--tinte); }
.ap-musterwahl[hidden] { display: none; }
.ap-musterwahl label { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: 0.4rem; margin: 0; }
.ap-musterwahl select { width: 100%; margin: 0; }
.ap-musterhinweis { margin: 0.2rem 0; font-size: 0.78rem; color: var(--gedaempft); }
.ap-musterwahl .reihe, .ap-blockwahl .reihe, .ap-zeitwahl .reihe { gap: 0.3rem; flex-wrap: wrap; }
.ap-musterwahl .reihe button, .ap-blockwahl .reihe button, .ap-zeitwahl .reihe button { margin: 0; }

.ap-jahr .ap-raster th, .ap-jahr .ap-raster td { border-right: 1px solid var(--linie-stark); }
.ap-jahr .ap-raster th:last-child, .ap-jahr .ap-raster td:last-child { border-right: 0; }

@media print {
    .ap-kopf .reihe, .ap-blaettern .blaettern, .ap-auswahl, .ap-blockwahl, .ap-musterwahl, .ap-zeitwahl { display: none !important; }
    .ap-arbeitszeit { background: none !important; border: 1px solid #999; padding: 0.3rem 0.6rem; margin: 0 0 0.4rem; }
    .ap-raster { font-size: 8.5pt; border-radius: 0; }
    .ap-raster th, .ap-raster td { padding: 0.12rem 0.35rem; border-color: #999 !important; }
    .ap-raster thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ap-wochenende, .ap-festtag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ap-raster tr { break-inside: avoid; }
    .ap-kopfperson { text-decoration: none; }
    .ap-summen { font-size: 8.5pt; }
    .ap-legende { font-size: 8pt; color: #000; }
}
.ap-summen tbody th, .ap-summen thead th { text-transform: none; letter-spacing: 0; }
@media (max-width: 46rem) {
    .ap-summen { width: 100%; min-width: 0; table-layout: fixed; font-size: 0.8rem; }
    .ap-summen th, .ap-summen td { padding: 0.25rem 0.3rem; }
    .ap-summen thead th { font-size: 0.62rem; white-space: normal; line-height: 1.15; }
    .ap-summen tbody th { overflow: hidden; text-overflow: ellipsis; }
}
.ap-festtagslink { font-weight: 600; color: var(--akzent-dunkel); }

/* Einstellungen Arbeitsplan aufgeraeumt (REQ-025, Katja 2026-10-04:
   "ein Chaos", "Wo Eingaben erforderlich sind, weisser Hintergrund",
   "Querlinien nach einem Thema", "Ferientage enger zusammen"). */
.ap-einstellungen { display: flex; flex-direction: column; gap: 1rem; }
.ap-einstellkarte { padding: 1rem 1.1rem; margin: 0; }
.ap-einstellkarte > h2, .ap-einstellkarte > summary h2 { margin: 0 0 0.2rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--linie-stark); }
.ap-einstellkarte h3 { margin: 1rem 0 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--linie); font-size: 0.95rem; }
.ap-erklaerung { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; color: var(--gedaempft); }
details.ap-einstellkarte > summary { cursor: pointer; list-style: none; }
details.ap-einstellkarte > summary::-webkit-details-marker { display: none; }
details.ap-einstellkarte > summary h2 { display: inline-block; width: 100%; }
details.ap-einstellkarte > summary h2::after { content: ' ▸'; color: var(--gedaempft); font-size: 0.9rem; }
details.ap-einstellkarte[open] > summary h2::after { content: ' ▾'; }
.ap-einstellungen input:not([type="hidden"]):not([type="file"]), .ap-einstellungen select { background: #fff; border: 1px solid var(--linie-stark); }
.ap-einstelltabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ap-einstelltabelle th, .ap-einstelltabelle td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
.ap-einstelltabelle thead th { font-size: 0.72rem; font-weight: 600; color: var(--gedaempft); text-transform: none; letter-spacing: 0; background: none; }
.ap-einstelltabelle tbody th { font-weight: 600; white-space: nowrap; }
.ap-einstelltabelle input { margin: 0; width: auto; min-width: 0; }
.ap-einstelltabelle input[type="date"] { min-width: 9.5rem; }
.ap-aktionen { width: 1%; white-space: nowrap; text-align: right !important; }
.ap-aktionen form { display: inline; margin: 0; }
.ap-aktuell { background: #fff8dc; }
.ap-marke { display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 0.6rem; background: #f1c40f33; color: var(--akzent-dunkel); font-size: 0.72rem; font-weight: 600; }
.ap-marke--leise { background: #efebe5; color: var(--gedaempft); font-weight: 400; }
.ap-feldreihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.7rem; margin: 0.3rem 0 0; }
.ap-feldreihe label { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; font-size: 0.78rem; color: var(--gedaempft); }
.ap-feldreihe input, .ap-feldreihe select { margin: 0; width: auto; }
.ap-feldreihe .ap-breit { flex: 1 1 12rem; }
.ap-feldreihe .ap-breit input { width: 100%; }
.ap-feldreihe button { margin: 0; }
.ap-von-bis { display: inline-flex; align-items: center; gap: 0.3rem; }
.ap-bildstatus { align-self: center; font-size: 0.88rem; }
.ap-bildstatus a { font-weight: 600; }
.ap-reiter { display: flex; gap: 0.3rem; margin: 0 0 0.6rem; }
.ap-reiter a { padding: 0.25rem 0.8rem; border: 1px solid var(--linie-stark); border-radius: 1rem; color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 0.85rem; background: #fff; }
.ap-reiter a[aria-current="page"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.ap-einstellkarte .ap-festtage { margin: 0.6rem 0 0; }
.ap-einstellkarte .ap-festtage li { padding: 0.05rem 0; font-size: 0.88rem; align-items: flex-start; }
.ap-einstellkarte .ap-festtage .symbol { width: 1.7rem; height: 1.7rem; }
.ap-bearbeiten { flex: 1; min-width: 0; }
.ap-bearbeiten > summary { cursor: pointer; list-style: none; padding: 0.2rem 0; }
.ap-bearbeiten > summary::-webkit-details-marker { display: none; }
.ap-bearbeiten > summary strong { display: inline-block; min-width: 5.2rem; font-variant-numeric: tabular-nums; }
.ap-stift { display: inline-flex; vertical-align: middle; margin-left: 0.3rem; color: var(--akzent-dunkel); opacity: 0.55; }
.ap-stift svg { width: 0.9rem; height: 0.9rem; }
.ap-bearbeiten > summary:hover .ap-stift, .ap-bearbeiten[open] .ap-stift { opacity: 1; }
.ap-bearbeiten[open] { padding-bottom: 0.5rem; }

/* "Horario links mit Plan de Trabajo ausrichten" (REQ-025). */
.ap-arbeitszeit { margin-left: -0.9rem; margin-right: -0.9rem; }

/* Ferienblock in der Jahresuebersicht: "kleiner Block, Vacaciones als
   titel, dann total, tomadas und restantes" (REQ-025). */
.ap-ferienblock { display: inline-block; margin-top: 0.7rem; padding: 0.5rem 0.8rem; background: #f5efe6; border: 1px solid #e3d6c3; border-radius: 0.6rem; }
.ap-ferienblock h3 { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--akzent-dunkel); }
.ap-ferienblock dl { display: flex; gap: 1.4rem; margin: 0; }
.ap-ferienblock dl > div { display: flex; flex-direction: column; }
.ap-ferienblock dt { font-size: 0.72rem; color: var(--gedaempft); }
.ap-ferienblock dd { margin: 0; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-ferienblock .ap-ferien-rest dd { color: var(--erfolg); }

@media (max-width: 46rem) {
    .ap-einstelltabelle input[type="date"] { min-width: 0; width: 100%; }
    .ap-einstelltabelle th, .ap-einstelltabelle td { padding: 0.25rem 0.2rem; }
    .ap-feldreihe label, .ap-feldreihe .ap-breit { flex: 1 1 100%; }
    .ap-feldreihe input, .ap-feldreihe select { width: 100%; }
    .ap-von-bis input { flex: 1 1 0; }
}
.ap-jahr .ap-raster td.ap-minus { color: var(--warnung); font-weight: 600; }
.ap-jahr .ap-raster td.ap-plus { color: var(--erfolg); font-weight: 600; }
.ap-kopf .ap-festtagslink { color: #fff; }
@media print {
    .ap-jahr { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; padding: 0.5rem !important; }
    .ap-jahr .ap-raster { font-size: 8.5pt; }
    .ap-jahr .ap-raster td.ap-minus, .ap-jahr .ap-raster td.ap-plus, .ap-ferienblock { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ap-jahrtitel .blaettern { display: none !important; }
}

/* Raster schmaler, Sa/So getrennt schattiert (REQ-025, Katja: "Spalten
   bitte enger", "Sa/So andere Schattierung, Sa ein bisschen heller"). */
.ap-raster { table-layout: fixed; }
.ap-raster th:first-child { width: 6.2rem; }
.ap-raster .ap-zelle, .ap-raster thead th:not(:first-child):not(:last-child) { width: 4.6rem; }
.ap-raster thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-samstag { background: #f4f1ec; }
.ap-sonntag { background: #e8e3da; }
.ap-legende-schraffur { display: inline-block; width: 1.05rem; height: 1.05rem; border: 1px solid var(--linie-stark); border-radius: 0.2rem; background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, 0.15) 3px 4px); }
@media (max-width: 46rem) {
    .ap-raster th:first-child { width: 4.9rem; }
    .ap-raster .ap-zelle, .ap-raster thead th:not(:first-child):not(:last-child) { width: 3.4rem; }
}
.ap-raster .ap-zelle, .ap-raster thead th:not(:first-child):not(:last-child) { width: 5.8rem; }
@media (max-width: 46rem) {
    .ap-raster .ap-zelle, .ap-raster thead th:not(:first-child):not(:last-child) { width: 4.2rem; }
    .ap-raster thead th { font-size: 0.72rem; padding-left: 0.25rem; padding-right: 0.25rem; }
}
.ap-einstelltabelle tbody th { text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--tinte); }
.ap-einstelltabelle .ap-zahlfeld { width: 4.5rem; }
/* Festtage gruen, da frei (Katja, 2026-10-04). */
.ap-festtag { background: #e3f1e1; }
.ap-festtagname { color: #2f7a40; }

/* Turniere (REQ-026, Katja: "während dem Turnier Joa die Tage leicht rot
   einfärben"). Nur Markierung. */
.ap-raster .ap-zelle--turnier { background-color: #fbe1de !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ap-legende-turnier { display: inline-block; width: 1.05rem; height: 1.05rem; border-radius: 0.2rem; background: #fbe1de; border: 1px solid #efb9b2; }
.ap-turniername { display: inline-block; margin-right: 0.3rem; color: #b33a2c; font-weight: 600; }
.ap-turnierwahl { position: absolute; z-index: 40; display: flex; flex-direction: column; gap: 0.45rem; width: min(20rem, calc(100vw - 2rem)); padding: 0.8rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); color: var(--tinte); }
.ap-turnierwahl[hidden] { display: none; }
.ap-turnierwahl label { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; font-size: 0.8rem; color: var(--gedaempft); }
.ap-turnierwahl input[type="text"], .ap-turnierwahl input[type="date"] { margin: 0; width: 100%; background: #fff; }
.ap-turnierwahl .reihe { gap: 0.4rem; flex-wrap: nowrap; }
.ap-turnierwahl .reihe label { flex: 1 1 0; min-width: 0; }
.ap-turnierwahl .reihe button { margin: 0; }
.ap-turnierwahl button[hidden] { display: none; }
.ap-turnier-personen { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.ap-turnier-personen label { flex-direction: row; align-items: center; gap: 0.3rem; color: var(--tinte); font-size: 0.88rem; }
.ap-turnierliste { list-style: none; margin: 0 0 0.3rem; padding: 0 0 0.4rem; border-bottom: 1px solid var(--linie); }
.ap-turnierliste button { min-height: 0; margin: 0.1rem 0; padding: 0.25rem 0.5rem; background: #fbe1de; border: 1px solid #efb9b2; color: var(--tinte); font-size: 0.85rem; font-weight: 600; border-radius: 0.4rem; }
.ap-kopf .ap-turnierknopf { margin: 0; }

/* Arbeitszeit als Etikett neben dem Titel (Katja, 2026-10-04: "Horario
   vielleicht neben dem Titel? ... Überrasch mich mit einer schicken
   Lösung"). Ersetzt den Balken darunter. */
.ap-kopf { flex-wrap: wrap; gap: 0.5rem 1rem; }
.ap-kopf h1 { margin-bottom: 0; }
.ap-kopf .ap-arbeitszeit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.45rem; margin: 0; padding: 0.35rem 0.85rem 0.35rem 0.6rem; background: #fff4c7; border: 1px solid #f0dc8a; border-radius: 999px; font-size: 0.95rem; line-height: 1.3; color: var(--tinte); }
.ap-kopf .ap-arbeitszeit .symbol-uhr { width: 1.05rem; height: 1.05rem; color: #a67c00; flex: none; }
.ap-kopf .ap-arbeitszeit .ap-zeittitel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a6a00; }
.ap-kopf .ap-arbeitszeit strong { font-variant-numeric: tabular-nums; }
.ap-kopf .ap-arbeitszeit .ap-zeitstunden { padding: 0 0.4rem; border-radius: 999px; background: #fde68a; font-size: 0.8rem; font-weight: 600; }
.ap-kopf .ap-arbeitszeit--waehlbar:hover, .ap-kopf .ap-arbeitszeit--waehlbar:focus-visible { outline: none; border-color: #d4b23a; box-shadow: 0 0 0 3px #fff1b3; }
@media (max-width: 46rem) {
    .ap-kopf h1 { flex: 1 1 auto; }
    .ap-kopf .ap-arbeitszeit { order: 3; flex: 1 1 100%; justify-content: flex-start; border-radius: 0.8rem; }
}
@media print {
    .ap-kopf .ap-arbeitszeit { background: none !important; border: 1px solid #999; }
}
/* "horario muss am Handy auf eine Zeile passen" (Katja, 2026-10-04). */
@media (max-width: 46rem) {
    .ap-kopf .ap-arbeitszeit { flex-wrap: nowrap; white-space: nowrap; font-size: 0.84rem; padding: 0.3rem 0.6rem 0.3rem 0.5rem; gap: 0.35rem; flex: 0 1 auto; border-radius: 999px; }
    .ap-kopf .ap-arbeitszeit .ap-zeittitel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ap-kopf .ap-arbeitszeit .ap-zeitstunden { font-size: 0.74rem; }
}

/* Auswahl nur Symbole, Bis-Knopf (REQ-029). */
.ap-auswahl { gap: 0.25rem; max-width: none; }
.ap-auswahl button { padding: 0.45rem; min-width: 2.4rem; justify-content: center; }
.ap-auswahl button .ap-kreis { width: 1.35rem; height: 1.35rem; }
.ap-auswahl button svg { width: 1.2rem; height: 1.2rem; }
.ap-auswahl .ap-bisknopf { margin-left: 0.3rem; border-color: var(--akzent); color: var(--akzent-dunkel); }
/* Oben und durchlässig: unten verdeckte er die letzten Tage des Monats (Katja, 2026-10-21: "Ich kann das letzte Datum nicht auswählen, die Info ist im Weg"). */
.ap-bishinweis { position: fixed; left: 50%; top: calc(var(--handykopf, 0px) + 0.6rem); bottom: auto; pointer-events: none; z-index: 60; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.55rem 1rem; border-radius: 999px; background: var(--akzent-dunkel); color: #fff; font-size: 0.9rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
.ap-bishinweis[hidden] { display: none; }
.ap-bishinweis svg { width: 1rem; height: 1rem; }
/* Datum antippbar (Blocken, nur Admin). */
.ap-datum { text-decoration: none; text-underline-offset: 0.2rem; }

/* Einfache Listen schmal, Aktionen als Symbole (REQ-028). */
.liste-kompakt td { vertical-align: middle; }
.liste-felder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.liste-felder input { margin: 0; width: auto; flex: 1 1 8rem; min-width: 0; background: #fff; }
.liste-felder .liste-url { flex: 2 1 14rem; }
.liste-status { font-size: 0.75rem; color: var(--gedaempft); padding: 0 0.4rem; border-radius: 0.6rem; background: #efebe5; }
.liste-aktionen { width: 1%; white-space: nowrap; text-align: right; }
.liste-aktionen form { display: inline; margin: 0; }
.liste-aktionen .symbol { width: 2rem; height: 2rem; vertical-align: middle; }
.liste-aktionen .symbol:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 46rem) {
    .liste-aktionen { white-space: normal; text-align: left; }
}

/* Legende hinter einem i neben dem Monat (Katja, 2026-10-04). */
.ap-legende-info { position: relative; }
.ap-legende-info > summary { list-style: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--linie-stark); border-radius: 50%; background: #fff; color: var(--gedaempft); font-family: var(--serif); font-style: italic; font-weight: 700; cursor: pointer; }
.ap-legende-info > summary::-webkit-details-marker { display: none; }
.ap-legende-info[open] > summary { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.ap-legende-info .ap-legende { position: absolute; z-index: 45; top: 2rem; left: 0; display: flex; flex-direction: column; gap: 0.4rem; width: max-content; max-width: calc(100vw - 2rem); margin: 0; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); font-size: 0.88rem; color: var(--tinte); }
@media (max-width: 46rem) { .ap-legende-info .ap-legende { left: auto; right: -0.5rem; } }

/* Wechsel der Arbeitszeit ankuendigen (REQ-027). */
.zeitwechsel-hinweis { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; background: #fff4c7; border: 1px solid #f0dc8a; border-left: 5px solid #e0b100; border-radius: 0.6rem; color: var(--tinte); }
.zeitwechsel-hinweis > svg { width: 1.5rem; height: 1.5rem; color: #a67c00; flex: none; }
.zeitwechsel-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.zeitwechsel-text span { font-variant-numeric: tabular-nums; }
.zeitwechsel-hinweis form { margin: 0; }
.zeitwechsel-hinweis button { margin: 0; }
.zeitwechsel-status { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--gedaempft); }
.zeitwechsel-status .zw-ja { color: var(--erfolg); font-weight: 600; }
.zeitwechsel-status .zw-nein { color: var(--warnung); font-weight: 600; }

/* Festtage-Bild im Fenster mit x (Katja: "Nicht vollbild öffnen"). */
.ap-bildfenster { position: relative; width: min(56rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 2.6rem 0.8rem 0.8rem; border: 0; border-radius: 0.8rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.ap-bildfenster::backdrop { background: rgba(20, 16, 12, 0.55); }
.ap-bildfenster img { display: block; width: 100%; height: auto; }
.ap-bildfenster iframe { display: block; width: 100%; height: 70vh; border: 0; }
.ap-bildfenster-zu { position: absolute; top: 0.4rem; right: 0.4rem; width: 2.2rem; height: 2.2rem; background: #f1ece4; color: var(--tinte); }

/* Jahresuebersicht am Handy: Spaltentitel lesbar, Ferien als wichtigster
   Block (Katja: "Titel der Spalten müssen lesbar sein", "Vacaciones ist
   kleiner als der Rest. Muss das wichtigste sein ... Zahlen ein bisschen
   kleiner"). */
.ap-jahr .ap-raster thead th { white-space: normal; overflow: visible; text-overflow: clip; text-transform: none; letter-spacing: 0; font-size: 0.74rem; line-height: 1.15; vertical-align: bottom; hyphens: auto; }
.ap-ferienblock { display: block; max-width: 22rem; padding: 0.7rem 1rem; }
.ap-ferienblock h3 { font-family: inherit; font-size: 1.05rem; font-weight: 700; color: var(--tinte); margin-bottom: 0.4rem; }
.ap-ferienblock dl { gap: 1.8rem; }
.ap-ferienblock dt { font-size: 0.82rem; font-weight: 400; color: var(--gedaempft); }
.ap-ferienblock dd { font-size: 1rem; font-weight: 700; }
@media (max-width: 46rem) {
    .ap-jahr .ap-raster th:first-child { width: 3.6rem; }
    .ap-jahr .ap-raster td { font-size: 0.86rem; padding-left: 0.3rem; padding-right: 0.35rem; }
    .ap-jahr .ap-raster thead th { font-size: 0.68rem; padding-left: 0.3rem; padding-right: 0.35rem; }
}

/* Bemerkungen schmaler, Turniername ohne Titel, x zum Loeschen
   (Katja, 2026-10-04). */
.ap-raster td.ap-notiz { font-size: 0.76rem; line-height: 1.25; letter-spacing: -0.01em; }
.ap-turniername { font-weight: 600; font-size: 0.76rem; }
.ap-notiz-weg { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; min-height: 0; margin: 0 0 0 0.25rem; padding: 0; border: 0; border-radius: 50%; background: #efebe5; color: var(--gedaempft); vertical-align: middle; }
.ap-notiz-weg svg { width: 0.75rem; height: 0.75rem; }
.ap-notiz-weg:hover { background: var(--warnung); color: #fff; }
.ap-turnier-zeitraum { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--gedaempft); }
.ap-turnier-zeitraum .bereichwahl-text { background: #fff; }

/* Teamtermin als Turnier mit Mitarbeitern (REQ-030). */
.team-turnier { display: flex; flex-direction: column; gap: 0.4rem; }
.team-turnier-art { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.team-turnier-personen { display: none; flex-wrap: wrap; gap: 0.3rem 1rem; padding-left: 1.6rem; }
.team-turnier.ist-turnier .team-turnier-personen, .team-turnier:has(.team-turnier-art input:checked) .team-turnier-personen { display: flex; }
.team-turnier-personen label { display: inline-flex; align-items: center; gap: 0.3rem; }
/* FEI nur bei Turnieren (REQ-036). */
.team-turnier-fei { display: none; padding-left: 1.6rem; margin: 0; }
.team-turnier.ist-turnier .team-turnier-fei, .team-turnier:has(.team-turnier-art input:checked) .team-turnier-fei { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.team-turnier-fei label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.team-fei-tage select { width: auto; padding: .15rem .4rem; }
.ap-turnierliste a { display: inline-block; margin: 0.1rem 0; padding: 0.25rem 0.5rem; background: #fbe1de; border: 1px solid #efb9b2; border-radius: 0.4rem; color: var(--tinte); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.ap-turnier-uebertragen { margin: 0.4rem 0 0; padding-top: 0.4rem; border-top: 1px solid var(--linie); }
.ap-turnier-uebertragen p { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--gedaempft); }

/* Kopf des Arbeitsplans auf einer Zeile mit Symbolen (REQ-031). */
.ap-kopf .ap-kopfsymbole { gap: 0.25rem; flex-wrap: nowrap; }
.ap-kopfsymbol { width: 2.3rem; height: 2.3rem; background: #fff; border: 1px solid var(--linie-stark); color: var(--akzent-dunkel) !important; }
.ap-kopfsymbol:hover { background: var(--akzent-zart); }
.ap-kopfsymbol svg { width: 1.25rem; height: 1.25rem; }
.zeitwechsel-info { position: relative; align-self: center; }
.zeitwechsel-info > summary { list-style: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid #f0dc8a; border-radius: 50%; background: #fff4c7; color: #8a6a00; font-family: var(--serif); font-style: italic; font-weight: 700; cursor: pointer; }
.zeitwechsel-info > summary::-webkit-details-marker { display: none; }
.zeitwechsel-info .zeitwechsel-status { position: absolute; z-index: 45; top: 1.9rem; left: 0; display: block; width: max-content; max-width: calc(100vw - 2rem); margin: 0; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.zeitwechsel-info .zeitwechsel-status p { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; margin: 0.15rem 0; }
@media (max-width: 46rem) {
    .ap-kopf h1 { flex: 1 1 auto; }
    .zeitwechsel-info { order: 4; }
    .zeitwechsel-info .zeitwechsel-status { left: auto; right: 0; }
}
/* Turnierseite (REQ-031). */
.ap-turnierseite { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ap-turnierseite li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; padding: 0.6rem 0.9rem; border-left: 4px solid #e8a49b; }
.ap-turnier-titel { font-weight: 700; color: var(--akzent-dunkel); }
.ap-turnier-datum { font-variant-numeric: tabular-nums; color: var(--tinte); }
.ap-turnier-leute { color: var(--gedaempft); font-size: 0.9rem; }
.ap-kopf h1 .symbol-schleife { width: 1.6rem; height: 1.6rem; vertical-align: -0.2rem; color: var(--akzent-dunkel); }
.ap-kopf .ap-kopfsymbol, .ap-kopf .ap-kopfsymbol:hover { background: var(--akzent); border: 0; color: #fff !important; }
.ap-kopf .ap-kopfsymbol:hover { background: var(--akzent-dunkel); }

/* Training und Gesundheit: Symbole zusammen neben dem Titel, Drucken bei
   Liste/Kalender (Katja, 2026-10-04: "Icons zusammen. Drucken zum
   Kalender"). */
.kopfzeile .symbol--initiale { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.gruppenwahl-symbole .symbol--drucken { margin-left: 0.4rem; background: var(--akzent); color: #fff; border-color: var(--akzent); }
/* Futterhinweis nur als Text mit Stift (Katja, 2026-10-04). */
.hinweiskopf--text { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.hinweiskopf--text .mehrzeilig { margin: 0; flex: 1; }

/* Futteransicht als zweigeteilter Knopf auf einer Zeile, aktiver Teil
   gefuellt (Katja, 2026-10-04: "Ganze Liste muss ein erkennbarer Button
   sein. Auf eine Zeile. Erkennbar, was aktiv ist"). */
.futterwahl { display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 0; border: 1px solid var(--akzent); border-radius: 999px; overflow: hidden; background: #fff; }
.futterwahl a { margin: 0; padding: 0.4rem 0.95rem; border: 0 !important; border-radius: 0; background: #fff; color: var(--akzent-dunkel); font-size: 0.88rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.futterwahl a + a { border-left: 1px solid var(--akzent) !important; }
.futterwahl a[aria-current="page"], .futterwahl a.aktuell-gross { background: var(--akzent) !important; color: #fff !important; }
@media (max-width: 46rem) {
    .futterwahl a.aktuell-gross { background: #fff !important; color: var(--akzent-dunkel) !important; }
    .futterwahl a.aktuell-handy, .futterwahl a[aria-current="page"] { background: var(--akzent) !important; color: #fff !important; }
    .futterwahl a { padding: 0.4rem 0.75rem; font-size: 0.84rem; }
}
.sprungmarke { display: block; scroll-margin-top: 4.5rem; }

/* Turniere im Kalender rot wie im Arbeitsplan (Katja, 2026-10-04:
   "Concurso muss im Kalender eine andere Farbe haben ... rötlich"). */
:root { --turnier: #c0473b; }
.tageszeile.art--turnier, .tagesplan .tageszeile.art--turnier,
.wochenkarte.art--turnier, .terminzeile.eintrag--turnier { background: #fbe1de; border-left-color: var(--turnier); }
.wochenbalken-termin.art--turnier { background: #f7d2cd; border-left-color: var(--turnier); }
.termindetails.art--turnier { border-top-color: var(--turnier); }
.termin-punkt.art--turnier { background: #e08a80; }
.monatsbalken.art--turnier { background: #e08a80; }
@media (hover: hover) { .monatsbalken.art--turnier:hover { background: var(--turnier); } }
/* FEI-Erinnerungen in Turnierfarbe (Katja, 2026-10-11). */
.tageszeile.art--fei, .tagesplan .tageszeile.art--fei, .wochenkarte.art--fei { background: #fbe1de; border-left-color: var(--turnier); }
.wochenbalken-termin.art--fei { background: #f7d2cd; border-left-color: var(--turnier); }
.termindetails.art--fei { border-top-color: var(--turnier); }
.termin-punkt.art--fei, .monatsbalken.art--fei { background: #e08a80; }

/* Jahreszahl als runder Knopf statt Kalendersymbol (Katja: "Icon für Jahr
   darf nicht das gleiche wie der Kalender sein. Sonst die jahrzahl als
   Button"); das i direkt neben der Arbeitszeit. */
.ap-kopf .ap-jahrknopf { width: auto; min-width: 2.3rem; padding: 0 0.6rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; text-decoration: none; }
@media (max-width: 46rem) {
    .zeitwechsel-info { order: 3; margin-left: -0.6rem; }
}

/* Heute deutlich gelb umrandet und zuoberst (Katja, 2026-10-04). */
.ap-raster tr.ap-heute td, .ap-raster tr.ap-heute th { border-top: 2px solid #e0b100; border-bottom: 2px solid #e0b100; background-color: #fff8d6; }
.ap-raster tr.ap-heute th:first-child { box-shadow: inset 3px 0 0 #e0b100; font-weight: 700; color: var(--tinte); }
.ap-raster tr.ap-heute td:last-child { box-shadow: inset -3px 0 0 #e0b100; }
.ap-raster tr#heute { scroll-margin-top: 0.5rem; }
@media (max-width: 46rem) { .ap-raster tr#heute { scroll-margin-top: 4rem; } }
/* Gesehen-Liste kompakt (Katja, 2026-10-04). */
.zeitwechsel-info .zeitwechsel-status { font-size: 0.8rem; padding: 0.5rem 0.7rem; }
.zeitwechsel-info .zeitwechsel-status strong { display: block; margin-bottom: 0.2rem; font-size: 0.75rem; color: var(--gedaempft); }
.zeitwechsel-info .zeitwechsel-status dl { display: grid; grid-template-columns: auto auto; gap: 0.1rem 0.8rem; margin: 0 0 0.3rem; }
.zeitwechsel-info .zeitwechsel-status dt { font-weight: 600; color: var(--tinte); }
.zeitwechsel-info .zeitwechsel-status dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Jahresuebersicht: Monate als Links ohne Unterstreichung, am PC schmal
   mit Ferienblock daneben (Katja, 2026-10-04: "Monate nicht
   unterstrichen", "Differenz soll gleich daneben kommen ... Ferien-
   übersicht dann daneben bringen"). */
.ap-jahr .ap-monatslink { text-decoration: none; font-weight: 700; color: var(--akzent-dunkel); white-space: nowrap; }
.ap-jahr .ap-monatslink::after { content: ' ›'; color: var(--akzent); }
.ap-jahr .ap-monatslink:hover { color: var(--akzent); }
@media (min-width: 46rem) {
    .ap-jahr { display: grid; grid-template-columns: minmax(0, 32rem) minmax(12rem, 16rem); column-gap: 1.4rem; align-items: start; }
    .ap-jahr > h2 { grid-column: 1 / -1; }
    .ap-jahr .ap-raster { width: 100%; }
    .ap-jahr .ap-ferienblock { margin-top: 0; }
}

/* Tage blocken ueber einen Zeitraum (Katja, 2026-10-04) und Symbole in
   den Fenstern ("können wir mit Symbolen arbeiten?"). */
.ap-blockzeitraum { position: absolute; z-index: 45; display: flex; flex-direction: column; gap: 0.5rem; width: min(20rem, calc(100vw - 2rem)); padding: 0.8rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); color: var(--tinte); }
.ap-blockzeitraum[hidden] { display: none; }
.ap-blockzeitraum input[type="text"] { margin: 0; width: 100%; background: #fff; }
.ap-blockzeitraum .reihe { gap: 0.4rem; }
.ap-fensterknopf { width: 2.4rem; height: 2.4rem; margin: 0; background: var(--akzent); color: #fff; border: 0; }
.ap-fensterknopf:hover { background: var(--akzent-dunkel); color: #fff; }
.ap-fensterknopf[data-aktion="abbrechen"] { background: #efebe5; color: var(--tinte); }
.ap-fensterknopf[data-aktion="abbrechen"]:hover { background: #e2dcd2; color: var(--tinte); }
.ap-fensterknopf svg { width: 1.2rem; height: 1.2rem; }
.ap-fensterknopf[hidden] { display: none; }

/* Bemerkung im eigenen Fenster statt prompt() (Katja, 2026-10-04). */
.ap-notizwahl { position: absolute; z-index: 45; display: flex; flex-direction: column; gap: 0.45rem; width: min(18rem, calc(100vw - 2rem)); padding: 0.7rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); color: var(--tinte); }
.ap-notizwahl[hidden] { display: none; }
.ap-notizwahl textarea { margin: 0; width: 100%; background: #fff; font-size: 0.9rem; }
.ap-notizwahl .reihe { gap: 0.4rem; }
.ap-blockgrund { cursor: pointer; }
.ap-turniername, .ap-festtagname { cursor: default; }
/* Trennlinien auch auf rotem Turnier-Hintergrund (Katja, 2026-10-04). */
.ap-raster .ap-zelle--turnier { border-bottom: 1px solid #e3a59d !important; }

/* Tage im eigenen Scrollbereich, Kopf fest (Katja, 2026-10-04). */
.ap-rasterbox { overflow-y: auto; border-radius: 0.6rem; -webkit-overflow-scrolling: touch; }
.ap-rasterbox .ap-raster { overflow: visible; border-radius: 0; }
.ap-rasterbox .ap-raster thead th { position: sticky; top: 0; z-index: 3; }
.ap-raster tr#heute { scroll-margin-top: 0; }
.ap-ferienlink { color: inherit; text-decoration: none; text-underline-offset: 0.2rem; }
th .ap-ferienlink { color: inherit; }
.ap-ferienblock { scroll-margin-top: 4.5rem; }
@media print { .ap-rasterbox { max-height: none !important; overflow: visible !important; } }

/* Formular ist abgeschickt, Antwort steht aus (Katja, 2026-10-05: drei
   gleiche Eintraege nach ungeduldigem Klicken). Knopf sichtbar beschaeftigt. */
form.sendet { cursor: progress; }
form.sendet button:not([type=button]),
form.sendet .knopf { opacity: 0.55; cursor: progress; pointer-events: none; }

/* Fuetterungszeiten: ab wann abgehakt werden kann (2026-10-06). */
.liste-uhrzeit { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: 0.85rem; color: var(--text-leise, #7a7168); }
.liste-uhrzeit input[type=time] { width: auto; }

/* Show (REQ-033) ---------------------------------------------------------- */
.sh-liste { list-style: none; padding: 0; display: grid; gap: .5rem; }
.sh-listeneintrag { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.sh-liste-name { font-weight: 600; }
.sh-archiv { margin-top: 1.5rem; }
.sh-pferdewahl { list-style: none; padding: 0; display: grid; gap: .35rem; }
.sh-pferdewahl li { display: flex; gap: .75rem; align-items: center; }
.sh-pferdewahl input[type=number] { width: 5rem; }
.sh-reiter { opacity: .7; min-width: 5rem; }
/* Turnierplätze je Show (REQ-045). */
.sh-turnierplaetze { display: grid; gap: .4rem; margin-bottom: 1.2rem; max-width: 30rem; }
.sh-turnierplatz { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto 2.25rem; gap: .5rem; align-items: center; }
.sh-turnierplatz input { margin: 0; }
.sh-turnierplatz-einheit { font-size: .85rem; color: var(--gedaempft); white-space: nowrap; }
.sh-logo-vorschau { display: block; width: auto; max-width: 14rem; height: auto; max-height: 3rem; object-fit: contain; margin-bottom: .25rem; }
.sh-tage { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: .5rem 0 1rem; font-size: 1.1rem; }
.sh-tage a, .sh-tage-rand { padding: .25rem .75rem; }
.sh-tage-rand { opacity: .25; }
.sh-fest { font-weight: 700; color: #d8232a; text-transform: uppercase; }
.sh-notiz { font-size: .85rem; opacity: .75; }
.sh-quelle { font-size: .75rem; opacity: .6; }
.sh-hinweis { font-size: .8rem; color: var(--faellig); }
.sh-alt { opacity: .55; font-weight: 400; }
.sh-konflikt-grund { font-size: .8rem; color: var(--warnung); }
.sh-kopieren { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.sh-teilen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.sh-equipe { font-size: .85rem; opacity: .8; display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.sh-equipe--fehler { color: #e8a33c; opacity: 1; }
/* Groom Schedule als Tabelle (Katja, 2026-10-11: "Tabellenansicht. Alles
   für eine Prüfung auf einer Zeile"), helle Karte auf dunklem Grund. */
.sh-tabellenrahmen { overflow-x: auto; background: var(--karte); color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--rund); }
.sh-tabelle { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.sh-tabelle th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; padding: .5rem; background: var(--marke-satt); color: var(--auf-marke); white-space: nowrap; }
.sh-tabelle td { padding: .45rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; background: var(--karte); }
.sh-tabelle th:first-child, .sh-tabelle td.sh-beginn { position: sticky; left: 0; z-index: 1; min-width: 4rem; }
.sh-tabelle th.sh-spalte-pferd, .sh-tabelle td.sh-spalte-pferd { position: sticky; left: 4.5rem; z-index: 1; }
.sh-terminzeile td { padding-top: .8rem; padding-bottom: .8rem; }
.sh-terminzeit, .sh-terminhaken { display: inline-block; min-width: 4rem; font-weight: 700; }
.sh-terminhaken { margin: 0; }
.sh-trenner td { font-weight: 700; padding-top: 1rem; }
.sh-zelle form { margin: 0; }
.sh-zeitknopf { background: none; border: 0; padding: 0; margin: 0; min-height: 0; height: auto; box-shadow: none; font: inherit; color: inherit; cursor: pointer; text-decoration: none; text-underline-offset: 3px; }
td.sh-erledigt, .sh-terminzeile.sh-erledigt .sh-zeitknopf { color: var(--erfolg); }
td.sh-erledigt .sh-zeitknopf::after, .sh-terminzeile.sh-erledigt .sh-zeitknopf::after { content: " ✓"; }
.sh-tabelle .sh-naechster td { background: var(--faellig-zart); }
/* Nächster Termin: gelber Rand nur aussen um die Zeile, keine senkrechten
   Linien dazwischen (Katja, 2026-10-14). */
.sh-tabelle .sh-naechster td { box-shadow: inset 0 2px 0 #e8a33c, inset 0 -2px 0 #e8a33c; }
.sh-tabelle .sh-naechster td:first-child { box-shadow: inset 0 2px 0 #e8a33c, inset 0 -2px 0 #e8a33c, inset 2px 0 0 #e8a33c; }
.sh-tabelle .sh-naechster td:last-child { box-shadow: inset 0 2px 0 #e8a33c, inset 0 -2px 0 #e8a33c, inset -2px 0 0 #e8a33c; }
.sh-abreiteplatz { display: block; font-size: .7rem; opacity: .8; }
.sh-tabelle td.sh-konfliktzeit { color: var(--warnung); font-weight: 700; box-shadow: inset 0 -3px 0 var(--warnung); cursor: help; }
.sh-hinweiszeile td { padding-top: 0; font-size: .8rem; }
.sh-hinweiszeile .sh-hinweis + .sh-hinweis::before, .sh-konflikt-grund + .sh-hinweis::before { content: " · "; }
.sh-gestrichen td { opacity: .45; text-decoration: line-through; }
.sh-aktionen { white-space: nowrap; }
.sh-aktionen a { margin-left: .35rem; }
h1 .sh-titelstift { margin-left: .4rem; display: inline-flex; vertical-align: middle; }
.sh-neu { display: inline-flex; gap: .35rem; align-items: center; }
.sh-titelzeile { display: flex; align-items: center; gap: .7rem; }
.sh-neu svg { width: 1rem; height: 1rem; }
.sh-verspaetung .reihe { display: flex; gap: .5rem; margin-bottom: .75rem; }
/* Show-Kopfzeile und Formular (Katja, 2026-10-10) */
h1 .symbol-schleife { width: 1.6rem; height: 1.6rem; vertical-align: -0.2rem; color: var(--akzent-dunkel); }
.sh-pferdetabelle { border-collapse: collapse; margin-bottom: 1rem; }
.sh-pferdetabelle th { text-align: left; font-weight: 600; font-size: .85rem; padding: .3rem .9rem .3rem 0; }
.sh-pferdetabelle th small { font-weight: 400; opacity: .7; }
.sh-pferdetabelle td { padding: .25rem .9rem .25rem 0; vertical-align: middle; }
.sh-pferdetabelle td label { display: flex; gap: .5rem; align-items: center; margin: 0; }
.sh-pferdetabelle input[type=number] { width: 5rem; }
.team-turnier-titel { display: block; flex-basis: 100%; font-size: .8rem; font-weight: 600; opacity: .75; margin-top: .35rem; }
/* Startmaske: ein Start je Maske (Katja, 2026-10-13), übersichtlicher
   (2026-10-14): Initialen neben dem Pferd zum Antippen, Beginn links vom
   Prüfungsnamen, alle Zeiten überschreibbar, Sekunden pro Start unten rechts. */
.sh-startkopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.sh-startkopf > select { flex: 1; min-width: 0; }
.sh-startpferd { font-size: 1.2rem; }
.sh-reiterwahl { position: relative; flex: none; margin: 0; cursor: pointer; }
.sh-reiterwahl .sh-initialen { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 1.9rem; padding: 0 .5rem; border-radius: 1rem; background: #a08466; color: #fff; font-size: .85rem; font-weight: 600; }
.sh-reiterwahl select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sh-startzeile-pruefung { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 .75rem; }
.sh-startzeile-platz { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem; gap: 0 .75rem; }
.sh-startnummer { margin: .45rem 0 0; }
.sh-startzeiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .75rem; align-items: start; }
.sh-startzeiten .sh-equipe-neu { display: block; margin-top: .25rem; font-size: .8rem; }
@media (max-width: 600px) {
    .sh-startzeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-startzeile-pruefung { grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0 .5rem; }
    .sh-startzeile-platz { grid-template-columns: minmax(0, 1fr) 3.6rem 4.6rem; gap: 0 .5rem; } }
/* Stoppuhr schlicht, rot erst mit erfasster Zeitänderung (Katja, 2026-10-14). */
.formknoepfe .sh-uhr { order: 1; }
.formknoepfe:has(.sh-uhr) { gap: .4rem; }
.formknoepfe:has(.sh-uhr) > button:not(.symbol), .formknoepfe:has(.sh-uhr) > .knopf { padding-inline: .7rem; }
/* Stoppuhr kräftig, rot mit erfasster Zeitänderung: in der Tabelle nur das
   Symbol, in der Maske im weissen Kreis wie der Papierkorb (Katja, 2026-10-14). */
.formknoepfe .sh-uhr, .sh-beginn .sh-uhr { background: transparent; color: var(--tinte); }
.sh-beginn .sh-uhr { width: 2rem; height: 2rem; border-radius: 0; }
.formknoepfe .sh-uhr { width: 2.6rem; height: 2.6rem; background: #fff; border: 1px solid var(--linie-stark); }
.formknoepfe .sh-uhr svg, .sh-beginn .sh-uhr svg { width: 1.45rem; height: 1.45rem; stroke-width: 2.8; }
.formknoepfe .sh-uhr.sh-uhr--aktiv, .sh-beginn .sh-uhr.sh-uhr--aktiv { color: #c0473b; }
.sh-startnotiz { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 400; color: var(--gedaempft); white-space: normal; }
/* Prüfungsmaske (Katja, 2026-10-12): Beginn und Sekunden auf einer Zeile,
   Verspätung als kleine Auswahl am Titel, Stoppuhr rot hinterlegt. */
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.sh-maskentitel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sh-verspaetungswahl { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-family: var(--grotesk); font-size: .9rem; }
.sh-verspaetungswahl select { width: auto; padding: .2rem .4rem; font-size: .9rem; }
.sh-uhr { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #c0473b; color: #fff; font-size: .9rem; line-height: 1; text-decoration: none; }
.feld-hinweis { display: block; font-size: .8rem; opacity: .7; margin-top: .2rem; }
.hinweis-inline { font-weight: 400; opacity: .7; margin-left: .35rem; }
/* Tagesplan am Bildschirm (Katja, 2026-10-12): saubere Trennlinien, "Jetzt",
   verschobene Zeiten markiert, Course-walk zweizeilig, Knöpfe einfarbig. */
.sh-tabelle td { border-bottom: 1px solid #d9cfc1; }
.sh-tabelle th.sh-spalte-cw { white-space: normal; max-width: 5.5rem; }
.sh-tabelle td.sh-verschoben { background: #fdf0d5; }
/* Stoppuhr unter dem Prüfungsbeginn: schlicht, rot erst mit Zeitänderung (Katja, 2026-10-14). */
.sh-beginn .sh-uhr { display: flex; justify-content: flex-start; margin-top: .3rem; }
.sh-startzeit { white-space: nowrap; }
.sh-tabelle .sh-abreiteplatz { display: block; }
/* Katja, 2026-10-12: senkrechte Trennlinien, Kopfzeile anthrazit wie im
   übrigen Tool, Prüfung schmal und zweizeilig, Reiter-Initialen nach dem Pferd. */
.sh-tabelle th { background: var(--grund); }
.sh-tabelle th + th, .sh-tabelle td + td { border-left: 1px solid #d9cfc1; }
.sh-tabelle th + th { border-left-color: #3a3530; }
.sh-tabelle .sh-spalte-pruefung { font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif; font-stretch: condensed; letter-spacing: -.01em; max-width: 14rem; white-space: normal; line-height: 1.25; }
.sh-initialen { margin-left: .3rem; font-size: .78em; font-weight: 600; color: var(--gedaempft); }
.sh-verspaetung-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.sh-verspaetung-zeile select { width: auto; }
/* Katja, 2026-10-12: Tagesplanung leicht grau, Zeit nicht fett; Aufsteigen fett;
   Verspätungen rot; Tabellenkopf weniger dominant. */
.sh-tabelle .sh-terminzeile td { background: #efebe5; }
.sh-tabelle .sh-terminzeit { font-weight: 700; }
.sh-tabelle td.sh-aufsteigen { font-weight: 700; }
.sh-tabelle td.sh-verschoben { background: transparent; color: #c0392b; }
.sh-tabelle td.sh-verschoben b { color: #c0392b; }
/* Katja, 2026-10-12: Zeiten am wichtigsten; geänderte Zeit alt klein
   durchgestrichen oben, neu fett darunter; Prüfungsbeginn zurückgenommen. */
.sh-tabelle .sh-zelle { font-weight: 700; font-size: 1.05em; }
.sh-tabelle .sh-alt { display: block; font-size: .72em; font-weight: 400; opacity: .6; }
.sh-tabelle .sh-beginn { font-weight: 400; color: var(--gedaempft); }
/* Kopf fest anthrazit: --grund ist in der hellen Ansicht hell (Katja, 2026-10-12: "Unlesbar so"). */
.sh-tabelle th { background: #2b2825; color: #fff; }
.sh-tabelle th.sh-spalte-pruefung { font-family: inherit; font-stretch: normal; letter-spacing: .04em; }
.sh-tabelle td.sh-spalte-pruefung { font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif; }
/* Katja, 2026-10-12: Initialen im Kreis wie im Kalender, Tagesplanung an den
   Spalten ausgerichtet, nur Aufsteigen fett, eleganter. */
.sh-tabelle .sh-spalte-pferd { white-space: nowrap; }
.sh-initialen { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.35rem; margin: 0 .15rem 0 0; padding: 0 .3rem; border-radius: .7rem; background: var(--marke); color: #fff; font-size: .66rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle; }
.sh-tabelle .sh-zelle { font-weight: 500; }
.sh-tabelle td.sh-aufsteigen { font-weight: 700; }
.sh-tabelle td.sh-aufsteigen { background-image: linear-gradient(rgba(160, 132, 102, .07), rgba(160, 132, 102, .07)); }
.sh-tabelle .sh-abreiteplatz { white-space: nowrap; font-weight: 400; }
.sh-tabelle .sh-terminnotiz { color: var(--gedaempft); font-size: .9em; }
.sh-tabelle th { padding-top: .35rem; padding-bottom: .35rem; }
.sh-zeitwege { display: grid; gap: .6rem; margin-bottom: 1rem; }
.sh-zeitwege input[type=number] { width: 5rem; }
.sh-zeitwege input[type=time] { width: auto; }
.sh-knopfform { display: inline; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
/* Knöpfe am Handy zu zweit gleich breit (Katja, 2026-10-13). */
@media (max-width: 600px) { .sh-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
    .sh-knoepfe > .knopf, .sh-knoepfe > .sh-knopfform, .sh-knoepfe > .sh-knopfform > .knopf { width: 100%; justify-content: center; box-sizing: border-box; }
    .sh-knoepfe > .sh-knopfform { display: block; } }
/* Serie: nur dieser Tag oder ab diesem Tag (REQ-040). */
.sh-umfang { border: 0; padding: 0; margin: 0; }
.sh-umfang legend { padding: 0; margin-bottom: .3rem; font-size: .85rem; font-weight: 600; }
.sh-umfang label { display: block; font-weight: 400; margin: .15rem 0; }
.sh-equipe-geaendert { color: #c0392b; }
/* Tagesplanung: eigene, kühle Farbe; die Zeit bleibt Tabellenzelle (Katja, 2026-10-12). */
.sh-tabelle td.sh-terminzeit { display: table-cell; min-width: 0; }
.sh-tabelle .sh-terminzeile td { background: #e8eef2; }
/* Equipe-Schild am Abgleich-Knopf, im Stil des Equipe-Logos (Katja, 2026-10-12). */
.sh-equipe-knopf { background: #2d3149; border-color: #2d3149; color: #fff; }
.sh-equipe-marke { font-weight: 700; }
/* Anthrazit statt schwarz (Katja, 2026-10-12: "Titelzeile Anthrazit, nicht schwarz probieren"). */
.sh-tabelle th { background: #4a4743; color: #fff; }
.sh-tabelle th + th { border-left-color: #5d5a56; }
/* Gastpferde als schmale Kacheln (Katja, 2026-10-12). */
.gastkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; margin-bottom: 1.5rem; }
.gastkachel { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; color: var(--tinte); text-decoration: none; }
.gastkachel:hover { border-color: var(--marke); }
.sh-zurueck { display: inline-block; padding: 0 .3rem 0 0; color: var(--auf-grund-leise); text-decoration: none; font-family: system-ui, sans-serif; font-size: .8em; line-height: 1; vertical-align: .08em; }
.sh-zurueck:hover { color: var(--auf-grund); }
/* Resultate (REQ-038). */
.sh-resultat { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-resultat a { color: inherit; text-decoration: none; display: block; }
.sh-resultat .sh-rang { display: block; color: var(--gedaempft); font-size: .8rem; }
.sh-resultat.sh-platziert .sh-rang, .rs-platziert { color: var(--erfolg, #2f7d4f); font-weight: 600; }
.sh-resultat-neu { color: var(--gedaempft) !important; font-size: 1.2rem; text-align: center; }
.sh-resultat-equipe { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--gedaempft); }
.rs-filter { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; margin-bottom: 1rem; }
.rs-filter .feld { margin: 0; }
.rs-filter label.rs-haken { display: inline-flex; gap: .3rem; align-items: center; }
.rs-filter input[type=number] { width: 5rem; }
.rs-tabelle { width: 100%; border-collapse: collapse; font-family: "Barlow Semi Condensed", var(--grotesk); font-size: 1.05rem; }
.rs-tabelle th, .rs-tabelle td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--linie, #ddd); vertical-align: top; }
.rs-tabelle td.rs-zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-rahmen { overflow-x: auto; background: #fff; border: 1px solid var(--linie, #ddd); border-radius: var(--rund); }
/* Am PC heller Hintergrund (Katja, 2026-11-02), am Handy tragen die Karten ihn. */
/* Am Handy jeder Start als weisse Karte mit vier Blöcken (Katja, 2026-11-02):
   Datum fett mit Videos darunter | Show fett mit Prüfung | Pferd mit Reiter |
   Resultat mit Rang; der Kommentar klein und kursiv unter der Show. */
@media (max-width: 40rem) {
    .rs-rahmen { background: none; border: 0; }
    .rs-tabelle thead { display: none; }
    .rs-tabelle, .rs-tabelle tbody { display: block; }
    .rs-tabelle tr { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) 4.1rem 4.7rem; align-items: start; gap: .1rem .4rem; padding: .55rem .55rem; font-size: .92rem; margin-bottom: .5rem; background: #fff; border: 1px solid var(--linie, #ddd); border-radius: var(--rund); }
    .rs-tabelle td { display: block; padding: 0; border: 0; }
    .rs-tabelle td.rs-datum { display: contents; }
    .rs-tabelle .rs-datum-text { grid-row: 1; grid-column: 1; font-weight: 600; }
    .rs-tabelle .rs-datum-videos { grid-row: 2; grid-column: 1; margin-top: .15rem; font-size: 1.15rem; }
    .rs-tabelle td.rs-show { grid-row: 1; grid-column: 2; font-weight: 600; }
    .rs-tabelle td.rs-pruefung { grid-row: 2; grid-column: 2; color: var(--gedaempft); font-size: .9rem; overflow-wrap: anywhere; hyphens: auto; }
    .rs-tabelle td.rs-show { overflow-wrap: anywhere; hyphens: auto; }
    .rs-tabelle tr:not(:has(.rs-show)) td.rs-pruefung { grid-row: 1 / 3; }
    .rs-tabelle td.rs-pferd { grid-row: 1; grid-column: 3; }
    .rs-tabelle td.rs-reiter { grid-row: 2; grid-column: 3; color: var(--gedaempft); }
    .rs-tabelle tr:not(:has(.rs-pferd)) td.rs-reiter { grid-row: 1; }
    .rs-tabelle td.rs-ergebnis { grid-row: 1; grid-column: 4; text-align: right; }
    .rs-tabelle td.rs-rang { grid-row: 2; grid-column: 4; text-align: right; }
    .rs-tabelle td.rs-kommentar { grid-row: 3; grid-column: 2 / 5; font-size: .85rem; font-style: italic; color: var(--gedaempft); margin-top: .2rem; }
    .rs-tabelle td.rs-kommentar:empty { display: none; }
}
.sh-vorlage { margin-left: auto; font-size: .85rem; color: var(--gedaempft); }
/* Farbwahl je Person (Katja, 2026-10-12). */
/* Ein Farbregler statt Muster (Katja, 2026-10-12). */
.farbregler { margin: .5rem 0 1rem; }
.farbregler-zeile { display: flex; align-items: center; gap: .9rem; max-width: 26rem; margin-top: .35rem; }
.farbregler-vorschau { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 2rem; border-radius: 1rem; color: #fff; font-size: .85rem; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.farbregler input[type="range"] { flex: 1; min-width: 0; height: .7rem; margin: 0; padding: 0; border: 0; border-radius: .35rem; cursor: pointer; -webkit-appearance: none; appearance: none;
    background: linear-gradient(to right, hsl(0 var(--s) var(--l)), hsl(60 var(--s) var(--l)), hsl(120 var(--s) var(--l)), hsl(180 var(--s) var(--l)), hsl(240 var(--s) var(--l)), hsl(300 var(--s) var(--l)), hsl(360 var(--s) var(--l))); }
.farbregler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; border: 2px solid var(--tinte); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.farbregler input[type="range"]::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; border: 2px solid var(--tinte); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.farbregler input[type="range"]:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; }
/* Erledigte Termine im Kalender: nur der Hintergrund verblasst, die Initialen
   bleiben kräftig (Katja, 2026-10-12: "die würde ich nicht verblassen lassen"). */
.termin-punkt.eintrag--done { opacity: 1; background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)); }
.termin-punkt.eintrag--cancelled { opacity: 1; background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)); }
/* Initialen im Kalenderpunkt als kleiner Kreis in der Farbe der Person (Katja, 2026-10-12). */
.termin-punkt .punkt-kuerzel[style] { margin-left: .2rem; padding: 0 .25rem; border-radius: .5rem; color: #fff; }
/* Resultate: Anzahl neben dem Titel (Katja, 2026-10-16: "kleiner kursiv"). */
.rs-anzahl { font-size: .55em; font-style: italic; color: var(--gedaempft); font-weight: normal; }
.rs-filter .rs-zeitraum .bereichwahl-text { min-width: 11rem; }
/* Show bearbeiten kompakt (Katja, 2026-10-16). */
.sh-standardzeiten { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.sh-standardzeiten .feld { margin: 0; }
.sh-standardzeiten input { width: 6rem; }
.sh-wahltitel { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sh-wahltitel .sh-gastplus { font-family: var(--grotesk); font-size: .8rem; display: inline-flex; align-items: center; gap: .25rem; }
.sh-wahltitel .sh-gastplus svg { width: .9rem; height: .9rem; }
.sh-wahlliste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.sh-wahlliste[hidden], .sh-wahlliste [hidden], tr[data-wahl][hidden] { display: none; }
/* Plus-Liste am iPad zentriert statt über die ganze Breite (Katja, 2026-10-16). */
@media (min-width: 40rem) and (max-width: 64rem) {
    .tableiste .plusblatt { left: 50%; right: auto; width: min(24rem, calc(100vw - 2rem)); transform: translateX(-50%); }
}
/* Fußleiste weg, solange die Tastatur offen ist. */
.tableiste.leiste-weg { display: none !important; }
/* Pferdeformular: drei kurze oder zwei lange Werte je Zeile (Katja, 2026-10-16). */
.pf-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1rem; }
.pf-raster > .feld { grid-column: span 2; margin: 0; }
.pf-raster > .pf-zwei { grid-column: span 3; }
.pf-raster > .pf-breit { grid-column: 1 / -1; }
.pf-raster > .pf-anfang { grid-column-start: 1; }
.pf-raster > .pf-haken { align-self: end; padding-bottom: .6rem; }
.pf-raster input, .pf-raster select, .pf-raster textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 40rem) {
    .pf-raster { grid-template-columns: 1fr; }
    .pf-raster > .feld, .pf-raster > .pf-zwei { grid-column: 1 / -1; }
}
/* iPad hoch: stehender Titel unter der dunklen Kopfzeile, nicht dahinter
   (Katja, 2026-10-16: "Wenn ich in training und Gesundheit nach oben scrolle
   verschwindet die Kopfzeile"). */
@media (min-width: 46.01rem) and (max-width: 64rem) {
    .kalenderoben { top: var(--handykopf, 3.5rem); }
}
/* Arbeitsplan-Einstellungen: Plus neben dem Titel (Katja, 2026-10-16). */
.ap-einstellkarte h2 { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ap-einstellkarte h2 .ap-titelplus { margin-left: .2rem; }
/* iPad hoch: nur das Plus in der Fußleiste, nicht zusätzlich das schwebende. */
@media (max-width: 64rem) { body.mit-leiste .plus-schwebend { display: none; } }
/* Runterziehen zum Neuladen (Katja, 2026-10-16). */
.neuladen { position: fixed; top: 0; left: 50%; z-index: 80; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--karte, #fff); color: var(--gedaempft); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); font-size: 1.3rem; transform: translate(-50%, -50px); pointer-events: none; }
.neuladen--bereit, .neuladen--laeuft { color: var(--marke-satt, #7a5a3a); }
.neuladen--laeuft { animation: neuladen-dreh .8s linear infinite; }
@keyframes neuladen-dreh { from { transform: translate(-50%, 70px) rotate(0); } to { transform: translate(-50%, 70px) rotate(360deg); } }
/* Analyse der Resultate wie in EC Horse Search (Katja, 2026-10-16). */
.an-analyse { margin-top: 1rem; }
.an-wahl { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: .9rem; }
.an-jahre { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem; border-radius: .6rem; background: var(--karte-2, #f3ece2); }
.an-jahre a { padding: .35rem .7rem; border-radius: .45rem; color: var(--tinte); text-decoration: none; font-size: .9rem; }
.an-jahre a[aria-current="page"] { background: var(--akzent, #b8612a); color: #fff; font-weight: 600; }
.an-reiter { color: var(--gedaempft); }
.an-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; }
.an-kachel { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .8rem; border-radius: .6rem; background: var(--karte-2, #f3ece2); border: 1px solid var(--linie); }
.an-titel { font-size: .8rem; color: var(--gedaempft); }
.an-kachel strong { font-size: 1.7rem; line-height: 1.15; color: var(--akzent-dunkel, #8a4a22); }
.an-kachel strong small { font-size: .85rem; font-weight: 600; color: var(--gedaempft); }
.an-klein { font-size: .75rem; color: var(--gedaempft); }
.an-marke { display: inline-block; padding: 0 .3rem; border-radius: .25rem; background: #b3352a; color: #fff; font-size: .68rem; font-weight: 700; }
.an-analyse h3 { margin: 1.1rem 0 .4rem; font-size: .95rem; }
.an-letzte { display: flex; flex-wrap: wrap; gap: .9rem; }
.an-start { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.an-datum { font-size: .72rem; color: var(--gedaempft); }
.an-kreis { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-weight: 700; font-size: .9rem; }
.an-kreis--clear { background: #dcefd9; color: #2f6b2a; }
.an-kreis--faults { background: #f6dcc8; color: #8a4a22; }
.an-kreis--points { background: #e4e1f2; color: #4a3f8a; }
.an-kreis--out { background: #b3352a; color: #fff; font-size: .75rem; }
.an-hoehen { width: 100%; border-collapse: collapse; }
.an-hoehen th, .an-hoehen td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--linie, #ddd); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-hoehen th { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gedaempft); }
.an-hoehen small { color: var(--gedaempft); }
.an-balken { display: inline-block; width: 4rem; height: .4rem; border-radius: .2rem; background: #eadfd2; vertical-align: middle; margin-right: .3rem; overflow: hidden; }
.an-balken span { display: block; height: 100%; background: var(--akzent, #b8612a); }
/* Show bearbeiten, zweite Runde (Katja, 2026-10-16). */
.sh-turnierplatz { align-items: center; }
.sh-turnierplatz .symbol--absagen { flex: none; }
.sh-pferdeliste { max-width: 20rem; margin: 0 0 .8rem; }
.sh-logo-von { margin-top: .4rem; }
#gast-neu .fensterinhalt input, #gast-neu .fensterinhalt select { width: 100%; }
/* Showtag: Pfeile ohne Unterstrich, Datum öffnet die Turniertage (Katja, 2026-10-16). */
.sh-tage a { text-decoration: none; }
.sh-tagwahl { position: relative; }
.sh-tagwahl > summary { list-style: none; cursor: pointer; padding: .2rem .6rem; border-radius: .5rem; }
.sh-tagwahl > summary::-webkit-details-marker { display: none; }
.sh-tagwahl > summary::after { content: " ▾"; font-size: .7em; color: var(--gedaempft); }
.sh-tagwahl[open] > summary { background: var(--karte-2, #f3ece2); }
.sh-tagliste { position: absolute; left: 50%; top: calc(100% + .3rem); transform: translateX(-50%); z-index: 30; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .25rem; width: min(24rem, 90vw); max-height: 60vh; overflow-y: auto; padding: .5rem; background: var(--karte, #fff); border: 1px solid var(--linie); border-radius: .7rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); font-size: .95rem; }
.sh-tagliste a { padding: .4rem .5rem; border-radius: .4rem; color: var(--tinte); text-align: center; }
.sh-tagliste a:hover { background: var(--akzent-zart, #f6e9dd); }
.sh-tagliste a[aria-current="page"] { background: var(--akzent, #b8612a); color: #fff; font-weight: 600; }
/* Wochenliste: Initialen links von der Art (Katja, 2026-10-17). */
.wk-art .kuerzel-klein { margin: 0 .3rem 0 0; }
/* Erscheinungsbild: kleine Vorschau der Bilder auf ihrem Grund (REQ-047). */
.eb-form { max-width: 40rem; }
.eb-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.eb-vorschau { display: inline-grid; place-items: center; width: 7rem; height: 4.5rem; padding: .4rem; border-radius: .5rem; border: 1px solid var(--linie); box-sizing: border-box; }
.eb-vorschau img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.eb-dunkel { background: #0f0e0c; }
.eb-hell { background: #fff; }
/* Pferde mehrfach abhaken (Katja, 2026-10-18). */
.sh-pferdeliste { max-width: 26rem; padding: .7rem .8rem; border: 1px solid var(--linie); border-radius: .7rem; background: var(--karte, #fff); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.sh-pferdeliste[hidden] { display: none; }
.sh-pferdeliste-eintraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .8rem; max-height: 50vh; overflow-y: auto; }
.sh-pferdeliste-eintraege .kasten { margin: 0; padding: .3rem 0; }
.sh-pferdeliste-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linie); }
/* Eigenes Logo einer Kopie der App: grösser und mittig in der Leiste (Katja, 2026-10-18). */
.seitenmarke--eigen { display: block; }
.seitenmarke--eigen img { width: 8.5rem; margin: 0.5rem auto 0.2rem; }

/* Show-Archiv kompakt mit Suche, Rückblick und Blättern (Katja, 2026-10-18). */
.sh-archiv summary { cursor: pointer; font-weight: 600; }
.sh-archivsuche { margin: .6rem 0 .4rem; max-width: 22rem; background: #fff; }
.sh-archivliste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie, #ddd); }
.sh-archivzeile a { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .4rem .3rem; border-bottom: 1px solid var(--linie, #ddd); color: var(--tinte); text-decoration: none; }
.sh-archivzeile a:hover { background: var(--karte-2, #f3ece2); }
.sh-archivdatum { font-size: .85rem; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.sh-archivname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-archivort { font-size: .85rem; color: var(--gedaempft); white-space: nowrap; }
@media (max-width: 40rem) { .sh-archivort { display: none; } .sh-archivzeile a { grid-template-columns: 4.6rem minmax(0, 1fr); } }
.sh-rueckblick-zeile { margin: -.4rem 0 .6rem; color: var(--gedaempft); }
.sh-rueckblick-knoepfe { display: flex; flex-wrap: nowrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.sh-rueckblick-knoepfe form { margin: 0; }
.rs-auswertung { margin: 0 0 1rem; }
.rs-auswertung > summary { cursor: pointer; list-style: none; }
.rs-auswertung > summary::-webkit-details-marker { display: none; }
.rs-auswertung > summary h2 { display: inline; }
.rs-auswertung > summary h2::after { content: ' ▾'; font-size: .7em; color: var(--gedaempft); }
.rs-auswertung:not([open]) > summary h2::after { content: ' ▸'; }
.blaettern { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; margin: 1rem 0; }
.blaettern span[aria-disabled] { opacity: .4; pointer-events: none; }
.blaettern-stand { font-size: .9rem; color: var(--gedaempft); }

/* Handykopf unter der Statusleiste des iPhones halten (Katja, 2026-10-18:
   "Maelle sieht die headline nicht ... Man kann nicht ganz nach oben gehen").
   Als Web-App mit durchsichtiger Statusleiste lag der Kopf sonst dahinter. */
@media (max-width: 64rem) {
    .handykopf { padding-top: calc(0.45rem + env(safe-area-inset-top)); }
    .handymenue[open] > .handymenue-blatt { top: var(--handykopf, calc(3.5rem + env(safe-area-inset-top))); max-height: calc(100vh - var(--handykopf, 3.5rem)); }
}
a.sh-listeneintrag { color: var(--tinte); text-decoration: none; }
a.sh-listeneintrag:hover { border-color: var(--marke-satt); }
a.sh-listeneintrag .sh-liste-name { color: var(--marke-satt, #7a5a3a); }

/* Anleitung "auf den Startbildschirm" (Katja, 2026-10-19, wie bei Yumories). */
@media (display-mode: standalone) { [data-nur-im-browser] { display: none !important; } }
.in-seite { max-width: 40rem; font-size: 1.1rem; }
.in-gross { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .9rem 1.2rem; margin: 1rem 0 .3rem; border-radius: .75rem; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
a.in-gross { background: var(--marke-satt, #7a5a3a); color: #fff; }
.in-gross .navsymbol { width: 1.4rem; height: 1.4rem; }
.in-hinweis { color: var(--gedaempft); margin: .3rem 0 1rem; }
.in-fertig { padding: .9rem 1rem; border-radius: .75rem; background: #dcefd9; color: #2f6b2a; }
.in-anleitung h2 { margin: 1.2rem 0 .5rem; }
.in-anleitung ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.in-anleitung li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .8rem 1rem; background: var(--karte, #fff); border: 1px solid var(--linie, #ddd); border-radius: .75rem; }
.in-nummer { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--marke-satt, #7a5a3a); color: #fff; font-weight: 700; }
.in-symbol { color: var(--marke-satt, #7a5a3a); display: inline-flex; }
.in-symbol .in-sym { width: auto; max-width: 7rem; height: 2.6rem; }
.in-weitere { margin-top: 1.5rem; }
.in-weitere > summary { cursor: pointer; color: var(--gedaempft); }
.login-installieren { margin-top: 1.2rem; text-align: center; font-size: .95rem; }
.seiten-installieren { display: flex; align-items: center; gap: .5rem; margin: .4rem .9rem 0; font-size: .85rem; color: #a99d8f; text-decoration: none; }
.seiten-installieren .navsymbol { width: 1.1rem; height: 1.1rem; }
.seiten-installieren:hover { color: #efe9e1; }
.in-anleitung li.in-wichtig { border-color: #b0402c; background: #fbeee9; font-weight: 700; }
.in-wichtig .in-nummer { background: #b0402c; }
.in-wichtig .in-symbol { color: #b0402c; }

/* Auswahlmodus: das Kästchen bekommt eine eigene schmale Spalte vorn, die
   Zeile bleibt einzeilig wie sonst (Katja, 2026-10-19: "Zeilen angleichen"). */
body.auswahl-modus .eintragsliste .listenzeile { grid-template-columns: 1.4rem 6.8rem minmax(6rem, 9rem) minmax(8rem, 12rem) minmax(7rem, 11rem) minmax(0, 1fr) 2.2rem; }
body.auswahl-modus .l-wahl { margin-right: 0; }
body.auswahl-modus .l-wahl input { margin: 0; }
@media (max-width: 46rem) {
    body.auswahl-modus .eintragsliste .listenzeile { grid-template-columns: 1.3rem 3.3rem minmax(0, 1fr) minmax(0, 1.2fr) 1.6rem 1.9rem; }
}

/* Bild aus der Zwischenablage (Katja, 2026-10-19). */
.einfuegen-hinweis { display: block; margin-top: .2rem; font-size: .78rem; color: var(--gedaempft); }
input[type=file].bild-eingefuegt { outline: 2px solid var(--marke-satt, #7a5a3a); outline-offset: 2px; }
.einfuegen-ziel { display: block; }

/* Kreuz zum Leeren eines freiwilligen Datums (Katja, 2026-10-20). Rechts im
   Feld, über dem Kalendersymbol des Geräts liegt es nicht. */
.datum-leeren { position: absolute; right: 2.3rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--karte-2, #eee6db); color: var(--gedaempft); font-size: 1.1rem; line-height: 1; cursor: pointer; z-index: 2; }
.datum-leeren[hidden] { display: none; }
@media (pointer: coarse) { .datum-leeren { right: .5rem; width: 2rem; height: 2rem; } }

/* Standardwoche mit Punkten, Rest ganz als roter Punkt (Katja, 2026-10-21). */
.ap-mustertag { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: 0.4rem; position: relative; }
.ap-musterpunkt > summary { list-style: none; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--linie); border-radius: 50%; cursor: pointer; color: var(--gedaempft); }
.ap-musterpunkt > summary::-webkit-details-marker { display: none; }
.ap-musterpunkt > summary .ap-kreis { width: 1.35rem; height: 1.35rem; }
.ap-musterpunkt[open] > summary { border-color: var(--marke-satt, #7a5a3a); }
.ap-musterliste { position: absolute; left: 2.6rem; top: 0; z-index: 45; display: grid; gap: 0.1rem; min-width: 10rem; padding: 0.3rem; background: #fff; border: 1px solid var(--linie); border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.ap-musterliste button { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.2rem; margin: 0; padding: 0.2rem 0.5rem; border: 0; background: none; color: var(--tinte); text-align: left; font-weight: 400; }
.ap-musterliste button:hover { background: var(--karte-2, #f3ece2); }
.ap-rest-ganz .ap-kreis { width: 1.35rem; height: 1.35rem; }

/* Links als Datei, Option Show (REQ-048); ruhiger angeordnet (2026-10-21). */
.regelform--quelle { flex-wrap: wrap; }
.liste-quelle { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.liste-quelle input[type=url] { flex: 1 1 16rem; min-width: 12rem; margin: 0; }
.liste-oder { color: var(--gedaempft); font-size: .9rem; }
.dateiwahl { display: inline-flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; min-width: 0; }
.dateiwahl-knopf { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px solid var(--linie-stark, #cfc6b8); border-radius: .5rem; background: var(--karte, #fff); color: var(--tinte); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.dateiwahl-knopf svg { width: 1rem; height: 1rem; }
.dateiwahl:hover .dateiwahl-knopf, .dateiwahl:focus-within .dateiwahl-knopf { border-color: var(--marke-satt, #7a5a3a); }
.dateiwahl-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--gedaempft); }
.dateiwahl-name:empty { display: none; }
.liste-show { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .9rem; white-space: nowrap; }
.liste-felder .liste-quelle { flex: 1 1 100%; gap: .4rem .7rem; }
.liste-felder .liste-quelle .liste-url { flex: 1 1 16rem; min-width: 10rem; background: #fff; }
/* Datei-Link: die Adresse bleibt leer, der Dateiname steht beim Knopf. */
.liste-felder .dateiwahl-name { color: var(--tinte); font-weight: 600; }

/* Funktionen als ruhige Liste wie die Personen, Bearbeiten im Fenster
   (Katja, 2026-10-25). Am Handy: Name, Zweck darunter, Pfeile und Stift. */
.funktionsliste { padding: 0; overflow: hidden; }
.funktionszeile { display: grid; grid-template-columns: 1.4fr 1.4fr 5rem auto; gap: 0.6rem; align-items: center; padding: 0.35rem 0.9rem; border-top: 1px solid var(--linie); font-size: 0.92rem; }
.funktionszeile[data-fenster-ziel] { cursor: pointer; }
.funktionszeile[data-fenster-ziel]:hover { background: #faf7f2; }
.funktionszeile--kopf { background: #2f2c29; color: #fff; border-top: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.funktionszeile--still { color: #9a938a; }
.fz-name { font-weight: 600; }
.fz-name small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--gedaempft); }
.fz-name em { font-weight: 400; }
.fz-marke { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--marke-zart); color: var(--tinte); font-size: 0.82rem; }
.fz-personen { text-align: center; color: var(--gedaempft); }
.fz-aktionen { display: flex; gap: 0.1rem; justify-content: flex-end; }
.fz-aktionen form { margin: 0; }
.funktionszeile .symbol { width: 1.8rem; height: 1.8rem; }
.funktionszeile .symbol:disabled { opacity: 0.25; cursor: default; background: none; }
@media (max-width: 46rem) {
    .funktionszeile { grid-template-columns: 1fr auto; grid-template-areas: "name aktionen" "zweck aktionen"; row-gap: 0.15rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .funktionszeile--kopf { display: none; }
    .fz-name { grid-area: name; }
    .fz-zweck { grid-area: zweck; }
    .fz-personen { display: none; }
    .fz-aktionen { grid-area: aktionen; }
}

/* Einstellungsmenue am Handy in zwei schmalen Zeilen: Bereiche, darunter
   die Seiten des Bereichs als Knoepfe (Katja, 2026-10-25, Variante A). Am
   grossen Bildschirm bleibt die offene Liste. */
.einstellungsbereiche, .einstellungsseiten { display: none; }
.funktion-personen { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.funktion-personen a { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--linie-stark, var(--linie)); border-radius: 999px; background: #fff; color: var(--tinte); text-decoration: none; font-size: 0.85rem; }
.funktion-personen a:hover { border-color: var(--marke); }
@media (max-width: 46rem) {
    .einstellungswahl { margin: 0 0 0.9rem; padding: 0.3rem 0 0.55rem; border-bottom: 1px solid var(--linie); }
    .einstellungswahl .einstellungsnav { display: none; }
    .einstellungsbereiche { display: flex; gap: 0.7rem; justify-content: space-between; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-bottom: 0.45rem; }
    .einstellungsbereiche::-webkit-scrollbar { display: none; }
    .einstellungsbereiche button { margin: 0; padding: 0.2rem 0 0.3rem; min-height: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--gedaempft); font: inherit; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
    .einstellungsbereiche button[aria-pressed="true"] { color: var(--tinte); border-bottom-color: #b8612a; }
    .einstellungsseiten { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .einstellungsseiten[hidden] { display: none; }
    .einstellungsseiten a { padding: 0.3rem 0.75rem; border: 1px solid var(--linie-stark, var(--linie)); border-radius: 999px; background: #fff; color: var(--tinte); text-decoration: none; font-size: 0.88rem; }
    .einstellungsseiten a[aria-current="page"] { background: #b8612a; border-color: #b8612a; color: #fff; font-weight: 600; }
}
/* iOS zoomt beim Antippen in Felder unter 16 px und laesst das Fenster
   dann ueber den Rand ragen (Katja, 2026-10-25, Funktion im Fenster). */
@media (pointer: coarse) {
    .fensterinhalt input:not([type="checkbox"]):not([type="radio"]), .fensterinhalt select, .fensterinhalt textarea { font-size: 16px; }
}

/* Watchlist (REQ-049): vorgemerkte Reiter und Pferde, Suche darunter. */
.sh-watch { margin-top: 1.25rem; }
.sh-watch h2 { margin-top: 0; }
.sh-watch-liste { list-style: none; margin: .5rem 0; padding: 0; }
.sh-watch-liste li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--linie); }
.sh-watch-liste li:last-child { border-bottom: 0; }
.sh-watch-liste small { color: var(--gedaempft); }
.sh-watch-liste form { margin: 0; }
.sh-watch-drin { color: var(--erfolg); font-weight: 700; padding: 0 .5rem; }
.sh-watch-suche { display: flex; gap: .5rem; margin-top: .75rem; }
.sh-watch-suche input { flex: 1; min-width: 0; font-size: 16px; }
.sh-watch-pruefung { display: block; font-size: .8rem; color: var(--gedaempft); }
.sh-watch-pferd { display: block; font-weight: 400; }
.kopfzeile .sh-watch-teilen { margin-left: auto; }
.sh-watchtabelle .sh-spalte-pferd { white-space: normal; min-width: 8rem; }
.sh-watchtabelle .sh-nr { margin-left: .4rem; padding-left: .4rem; border-left: 1px solid var(--linie); font-weight: 400; color: var(--gedaempft); }
.sh-watchtabelle .sh-kopfstrich { display: inline-block; width: 1px; height: .8em; margin: 0 .4rem; background: currentColor; opacity: .5; vertical-align: -1px; }
.sh-watch-resultat { display: block; font-size: .8rem; font-weight: 600; color: var(--erfolg); white-space: normal; }
.sh-watchtabelle td.sh-spalte-pruefung { font-family: inherit; font-stretch: normal; }
.sh-watchtabelle .sh-watch-pruefung { font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif; font-stretch: condensed; margin-top: .15rem; }

/* Glocke (REQ-050). */
h1 .sh-glocke-link { vertical-align: middle; }
.sh-glocke { display: grid; gap: .6rem; max-width: 32rem; }
.sh-glocke-schalter { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.sh-glocke input[type="number"] { max-width: 6rem; font-size: 16px; }

/* Kopf der Watchlist als eigener, klebender Block mit festen Spalten (Katja, 2026-10-30). */
.sh-watchtabelle { table-layout: fixed; }
.sh-watch-spalte1 { width: 18%; }
.sh-watch-spalte2 { width: 32%; }
.sh-watch-spalte3 { width: 50%; }
.sh-watchkopf { position: sticky; top: var(--watch-kopf, 0); z-index: 3; display: grid; grid-template-columns: 18% 32% 50%; background: #3b3632; color: #fff; border-radius: var(--rund) var(--rund) 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sh-watchkopf > span { padding: .7rem .6rem; }
.sh-watchkopf .sh-kopfstrich { display: inline-block; width: 1px; height: .8em; margin: 0 .4rem; background: currentColor; opacity: .5; vertical-align: -1px; }
.sh-watchblock .sh-tabellenrahmen { border-top-left-radius: 0; border-top-right-radius: 0; }
.sh-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sh-watchtabelle td { overflow-wrap: anywhere; }

/* Glocke und Equipe-Abgleich als Symbole im Titel, zusammen (Katja, 2026-10-30). */
h1 .sh-titelsymbole { display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; }
h1 .sh-titelsymbole .sh-knopfform { display: flex; }
h1 .sh-titelsymbole .symbol { width: 2.25rem; height: 2.25rem; }
h1 .sh-equipe-knopf { font-size: 1.2rem; font-family: var(--grotesk); }
.sh-glocke-meldung { font-size: 1.1rem; font-weight: 600; margin: 0; }
.sh-equipe-treffer { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.sh-equipe-treffer button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .1rem; }
.sh-equipe-treffer small { font-weight: 400; opacity: .75; }
.pf-resultate { margin-top: 1rem; }

/* Videos zu Starts (REQ-052): Abspiel-Symbol vor dem Kommentar, öffnet bei der Quelle. */
.abspielen, .symbol-cmh { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.symbol-cmh { border-radius: 22%; width: 1em; height: 1em; }
/* Eigene Videos braun (Katja, 2026-11-02). */
.rs-video .abspielen { color: var(--marke-satt); }
.rs-video--nur-link .symbol-cmh { filter: grayscale(1); opacity: .55; }
.rs-video { display: inline-flex; align-items: center; gap: .15rem; margin-right: .4rem; text-decoration: none; white-space: nowrap; }
.rs-video small { font-size: .7rem; color: var(--gedaempft); }
/* Videos unter dem Datum (Katja, 2026-11-02): mehr Platz für den Kommentar. */
.rs-datum-videos { display: flex; flex-wrap: wrap; gap: .1rem .4rem; margin-top: .2rem; }
.rs-datum-videos .rs-video { margin-right: 0; }
.rs-videos { margin-top: 1.2rem; }
.rs-videos ul { list-style: none; padding: 0; margin: 0 0 .6rem; }
.rs-videos li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.rs-videos li a { overflow-wrap: anywhere; }
.rs-videos form.inline { display: inline; }
.rs-video-neu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.rs-video-neu .feld { flex: 1 1 16rem; margin: 0; }
.cmh-anleitung textarea { width: 100%; font-family: monospace; font-size: .75rem; }
.cmh-vorschau td small { display: block; color: var(--gedaempft); }
.cmh-vorschau tr.cmh-no_start td, .cmh-vorschau tr.cmh-unsure td { color: var(--gedaempft); }
.cmh-vorschau tr.cmh-matched td:last-child { font-weight: 600; }
/* Nur Text, nicht als Knopf (Katja, 2026-10-31: "Weniger dominant, nur Text"). */
/* Schmal und rechts, auch wenn die Zeile umbricht (Katja, 2026-11-02). */
.rs-cmh-link { margin-left: auto; font-family: "Barlow Semi Condensed", var(--grotesk); font-size: .9rem; color: var(--gedaempft); text-decoration: none; white-space: nowrap; }
.rs-cmh-link::before { content: "› "; }
/* Oben rechts: Meldungen zu den CMH-Videos (REQ-057). */
.rs-cmh-meldungen { margin-left: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .3rem 1.1rem; }
.rs-cmh-meldungen .rs-cmh-link { margin-left: 0; }
.rs-cmh-stand { font-weight: 600; color: var(--tinte); }
.rs-cmh-fehler { color: #a33a2a; }
.rs-cmh-bereit-stapel { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.rs-cmh-meldungen .rs-cmh-bereit { border-color: var(--akzent); text-decoration: none; }
.rs-cmh-ordner { font-size: .85rem; color: var(--gedaempft); }
.rs-cmh-download { margin: 0; padding: 0; max-width: none; background: none; border: 0; box-shadow: none; }
.rs-cmh-download button { min-height: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-family: "Barlow Semi Condensed", var(--grotesk); font-size: .9rem; font-weight: 400; color: var(--akzent-dunkel); white-space: nowrap; cursor: pointer; }
.rs-cmh-download button::before { content: "› "; }
/* Vorschau der Fotos: Haken und kleines Standbild. */
.cmh-haken { width: 1.2rem; height: 1.2rem; margin: 0 .5rem 0 0; vertical-align: middle; }
.cmh-bild { height: 3rem; width: auto; max-width: 6rem; border-radius: .25rem; object-fit: cover; vertical-align: middle; margin-right: .5rem; }
.rs-cmh-link:hover { text-decoration: none; text-underline-offset: .2em; }
/* Links nirgends unterstreichen (Katja, 2026-10-31: "Bitte Links nirgends für mich unterstreichen"). */
a, a:hover, a:focus, a:active { text-decoration: none; }
.cmh-uebernehmen { margin: 0 0 1rem; }
.cmh-ohne-start { margin-top: 1.2rem; } .cmh-ohne-start summary { cursor: pointer; color: var(--gedaempft); }
/* Videos ohne Start direkt zuordnen (Katja, 2026-11-02). */
.cmh-ohne-start-liste li { margin-bottom: .7rem; }
.cmh-zuordnen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.cmh-zuordnen select { flex: 1 1 14rem; max-width: 100%; }
.cmh-kein-start { display: block; color: var(--gedaempft); }
.cmh-ausblenden { margin-top: .3rem; }