:root {
    --hintergrund: #f4f6f8;
    --karte: #ffffff;
    --text: #1f2933;
    --text-leise: #66717d;
    --rand: #e1e5ea;
    --akzent: #0b7cc1;
    --akzent-dunkel: #08629a;
    --akzent-hell: #e6f2fa;
    --gut: #1e8a4c;
    --gut-hell: #e5f5ec;
    --warn: #b86400;
    --warn-hell: #fdf1e2;
    --gefahr: #c0392b;
    --gefahr-hell: #fbe9e7;
    --schatten: 0 2px 10px rgba(20, 30, 45, 0.07);
    --radius: 14px;
    /* Diagramme: Reihenfolge der Serienfarben fest (geprüft auf Farbsehschwäche), Achsen zurückhaltend */
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;
    --raster: #e1e0d9;
    --achse: #c3c2b7;
    --achsen-text: #898781;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund: #14181d;
        --karte: #1d232a;
        --text: #e6e9ed;
        --text-leise: #9aa5b1;
        --rand: #2e363f;
        --akzent: #4aa8e8;
        --akzent-dunkel: #74bdf0;
        --akzent-hell: #1b3244;
        --gut: #4cc184;
        --gut-hell: #173326;
        --warn: #f0a24a;
        --warn-hell: #3a2a17;
        --gefahr: #ef6b5d;
        --gefahr-hell: #3d1d1a;
        --schatten: 0 2px 10px rgba(0, 0, 0, 0.3);
        --serie-1: #3987e5;
        --serie-2: #d95926;
        --serie-3: #199e70;
        --raster: #2c2c2a;
        --achse: #383835;
        --achsen-text: #898781;
    }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--hintergrund);
    color: var(--text);
    line-height: 1.45;
    padding: 0 16px 40px;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--akzent); }
code { background: var(--akzent-hell); padding: 1px 5px; border-radius: 5px; }

main { max-width: 900px; margin: 0 auto; }

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

.kopf {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0 14px;
}

.kopf h1 { margin: 0; font-size: 1.6rem; }

/* Logo mit Name darunter */
.marke {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.1;
}

.kopf h1.marke { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-leise); }
.logo { display: block; height: 48px; width: auto; max-width: 160px; }

.account-chip {
    border: 1px solid var(--rand);
    background: var(--karte);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.account-chip:hover { border-color: var(--akzent); }

h2 { font-size: 1.3rem; margin: 10px 0 16px; }
h3 { font-size: 1.05rem; margin: 0 0 12px; }
h3 small { font-weight: 400; color: var(--text-leise); font-size: 0.85rem; }

/* ---------- Bausteine ---------- */

.karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 18px;
    margin-bottom: 16px;
}

.karte-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.karte-kopf h3 { margin-bottom: 12px; }

.btn, .btn-leise, .btn-gefahr {
    border-radius: 10px;
    padding: 9px 16px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.btn { background: var(--akzent); color: #fff; }
.btn:hover { background: var(--akzent-dunkel); }
.btn:disabled { opacity: 0.55; cursor: wait; }

.btn-leise { background: transparent; border-color: var(--rand); }
.btn-leise:hover { border-color: var(--akzent); }

.btn-gefahr { background: transparent; border-color: var(--gefahr); color: var(--gefahr); }
.btn-gefahr:hover { background: var(--gefahr-hell); }

.link {
    border: 0;
    background: none;
    color: var(--akzent);
    font-weight: 600;
    padding: 0;
}

input[type="text"], input[type="password"], input[type="date"], select, textarea {
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--hintergrund);
}

input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: transparent; }

textarea { resize: vertical; }

.zeile { display: flex; gap: 8px; align-items: center; }
.emoji-feld { flex: 0 0 56px; text-align: center; font-size: 1.2rem; padding: 6px !important; }

.felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.felder label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; font-weight: 600; }

.form-fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.form-fuss .klein { margin-right: auto; }

.klein { font-size: 0.85rem; color: var(--text-leise); }
.klein.ok { color: var(--gut); }
.klein.warnung { color: var(--warn); }
.klein.fehler { color: var(--gefahr); }

.meldung {
    background: var(--warn-hell);
    color: var(--warn);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.leer { color: var(--text-leise); text-align: center; padding: 16px 0; margin: 0; }

/* ---------- Account-Auswahl ---------- */

.account-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.account-karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: transform 0.15s, border-color 0.15s;
}

.account-karte:hover { transform: translateY(-2px); border-color: var(--akzent); }
.account-karte .symbol { font-size: 2.4rem; }
.account-karte .klein { font-weight: 400; }

/* ---------- Tabs ---------- */

.tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 2px;
}

.tabs button {
    flex: none;
    border: 1px solid var(--rand);
    background: var(--karte);
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 600;
}

.tabs button.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Anzahl offener Punkte am Reiter */
.zaehler {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--gefahr);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4em;
    text-align: center;
}

/* ---------- Übersicht ---------- */

.tabelle-rahmen { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--rand); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-leise); font-weight: 600; font-size: 0.8rem; }

.aktivitaet, .termin {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--rand);
}

.aktivitaet:last-child, .termin:last-child { border-bottom: 0; }

.sport-symbol {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--akzent-hell);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}

.aktivitaet .text, .termin .text { flex: 1; min-width: 0; }
.aktivitaet b, .termin b { display: block; overflow-wrap: anywhere; }

.werte { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--text-leise); }

/* ---------- Kalender ---------- */

.tag-kopf {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-leise);
    margin: 14px 0 2px;
}

.tag-kopf:first-child { margin-top: 0; }
.tag-kopf.heute { color: var(--akzent); }

.termin.keine-einheit .sport-symbol { background: var(--hintergrund); }

.tag-kopf.vergangen { font-weight: 600; }
.termin.vergangen { opacity: 0.55; }
.tag-leer { text-align: left; padding: 6px 0 10px; }

/* Monatsansicht */
.monat-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.monat-kopf h3 { margin: 0 6px; min-width: 9.5em; text-align: center; }
.monat-kopf #btn-monat-heute { margin-left: auto; }
.monat-pfeil { padding: 6px 12px; font-size: 1.1rem; line-height: 1; }

.monat {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    transition: opacity 0.15s;
}

.monat-wochentag { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--text-leise); padding-bottom: 2px; }

.monat-tag {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 72px;
    padding: 5px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--karte);
    text-align: left;
}

.monat-tag:hover { border-color: var(--akzent); }
.monat-tag.fremd { opacity: 0.45; }
.monat-tag.heute .tag-nr { background: var(--akzent); color: #fff; }
.monat-tag.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent) inset; }

.tag-nr {
    align-self: flex-start;
    min-width: 1.6em;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.tag-symbole { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.tag-mehr { font-size: 0.7rem; font-weight: 700; color: var(--text-leise); }

/* Erledigt: gefüllt grün hinterlegt. Geplant: blauer Ring. Vergangen geplant: blass */
.kal-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1;
}

.kal-icon.erledigt { background: var(--gut-hell); }
.kal-icon.geplant { box-shadow: 0 0 0 1.5px var(--akzent) inset; background: var(--akzent-hell); }
.kal-icon.geplant.alt { opacity: 0.45; }
.kal-icon.notiz { background: var(--hintergrund); }

.kalender-legende { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.kalender-legende .kal-icon { width: 22px; height: 22px; font-size: 0.8rem; }
.kalender-legende .kal-icon:not(:first-child) { margin-left: 8px; }

#tag-inhalt .aktivitaet, #tag-inhalt .termin { padding: 8px 0; }

/* Beim Neuladen bleibt das alte Bild blass stehen */
.laedt { opacity: 0.5; pointer-events: none; }

/* ---------- Diagramme ---------- */

.diagramm { margin-bottom: 18px; }
.diagramm h4 { margin: 0 0 6px; font-size: 0.95rem; }
.diagramm-flaeche { position: relative; }
.diagramm svg { display: block; max-width: 100%; overflow: visible; }
.diagramm svg:focus { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }

.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.82rem; color: var(--text-leise); margin-bottom: 4px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }

/* Linien-Schlüssel statt Kästchen, in Legende und Tooltip */
.key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: var(--serie-1); vertical-align: middle; }
.key.serie-2 { background: var(--serie-2); }
.key.serie-3 { background: var(--serie-3); }

.raster { stroke: var(--raster); stroke-width: 1; }
.achse { stroke: var(--achse); stroke-width: 1; }
.achsen-text { fill: var(--achsen-text); font-size: 11px; font-variant-numeric: tabular-nums; }

.linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--serie-1); }
.linie.serie-2 { stroke: var(--serie-2); }
.linie.serie-3 { stroke: var(--serie-3); }

/* Endpunkt mit Ring in der Kartenfarbe, damit er über Linien lesbar bleibt */
.punkt { fill: var(--serie-1); stroke: var(--karte); stroke-width: 2; }
.punkt.serie-2 { fill: var(--serie-2); }
.punkt.serie-3 { fill: var(--serie-3); }

.balken { fill: var(--serie-1); }
.fadenkreuz { stroke: var(--achse); stroke-width: 1; }

.diagramm-tipp {
    position: absolute;
    top: 4px;
    z-index: 5;
    min-width: 120px;
    padding: 7px 10px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--karte);
    box-shadow: var(--schatten);
    font-size: 0.82rem;
    color: var(--text-leise);
    pointer-events: none;
    white-space: nowrap;
}

.diagramm-tipp .tipp-tag { font-weight: 700; color: var(--text); margin-bottom: 3px; }
.diagramm-tipp div { display: flex; align-items: center; gap: 6px; }
.diagramm-tipp b { color: var(--text); font-variant-numeric: tabular-nums; }

.diagramm-info { border-top: 1px solid var(--rand); padding-top: 10px; }
.diagramm-info p { margin: 0 0 6px; }
.diagramm-tabelle { margin-top: 8px; }

.verpasst-etikett { background: var(--hintergrund); color: var(--text-leise); }

.plan-bezug { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--text-leise); }
.analyse-link { display: inline-block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.analyse-link:hover { text-decoration: underline; }

.erledigt-etikett, .geplant-etikett, .verpasst-etikett {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: 1px;
}

.erledigt-etikett { background: var(--gut-hell); color: var(--gut); }
.geplant-etikett { background: var(--akzent-hell); color: var(--akzent); }

/* Im Kalender stehen erledigte Aktivitäten und Termine eines Tages direkt untereinander */
#kalender .aktivitaet, #kalender .termin { border-bottom: 0; padding: 6px 0; }
#kalender .tag-kopf { border-top: 1px solid var(--rand); padding-top: 12px; }
#kalender .tag-kopf:first-child { border-top: 0; padding-top: 0; }

details { margin-top: 4px; }
summary { cursor: pointer; font-size: 0.85rem; color: var(--akzent); }

.workout-text {
    white-space: pre-wrap;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
    background: var(--hintergrund);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 6px 0 0;
    overflow-x: auto;
}

/* ---------- Trainer ---------- */

.chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.chat-leer {
    color: var(--text-leise);
    background: var(--karte);
    border: 1px dashed var(--rand);
    border-radius: var(--radius);
    padding: 16px;
}

.chat-leer ul { margin: 8px 0 0; padding-left: 20px; }

.blase {
    max-width: 85%;
    border-radius: 14px;
    padding: 10px 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.blase.ich { align-self: flex-end; background: var(--akzent); color: #fff; border-bottom-right-radius: 4px; }
.blase.ki { align-self: flex-start; background: var(--karte); border: 1px solid var(--rand); border-bottom-left-radius: 4px; }
.blase.fehler { background: var(--gefahr-hell); color: var(--gefahr); border-color: transparent; }

.denkt::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: punkte 1.4s steps(4, end) infinite;
}

@keyframes punkte {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

.vorschlag {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.vorschlag h4 { margin: 0 0 8px; font-size: 0.95rem; }

.aenderung {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    border-left: 4px solid var(--gut);
    background: var(--gut-hell);
}

.aenderung.aendern { border-color: var(--warn); background: var(--warn-hell); }
.aenderung.loeschen { border-color: var(--gefahr); background: var(--gefahr-hell); }
.aenderung input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.aenderung .text { flex: 1; min-width: 0; }
.aenderung b { overflow-wrap: anywhere; }

.etikett {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: 6px;
    margin-right: 6px;
    background: var(--gut);
    color: #fff;
}

.aendern .etikett { background: var(--warn); }
.loeschen .etikett { background: var(--gefahr); }

.vorher { font-size: 0.82rem; color: var(--text-leise); text-decoration: line-through; }

.ergebnisse { margin: 8px 0 0; padding-left: 20px; font-size: 0.9rem; }
.ergebnisse .fehler { color: var(--gefahr); }

.form-plan label { display: block; font-weight: 700; margin-bottom: 8px; }

.claude-chat p { margin: 0; }
.form-fuss.links { justify-content: flex-start; margin-bottom: 18px; }
.form-fuss.links .klein { margin-right: 0; }
.import-label { display: block; font-weight: 700; margin-bottom: 8px; padding-top: 14px; border-top: 1px solid var(--rand); }

/* ---------- Gemeinsame Läufe ---------- */

.lauf { padding: 14px 0; border-bottom: 1px solid var(--rand); }
.lauf:first-child { padding-top: 0; }
.lauf:last-child { border-bottom: 0; padding-bottom: 0; }
.lauf.zu > :not(.form-fuss) { opacity: 0.65; }

.lauf-kopf { display: flex; gap: 12px; align-items: flex-start; }
.lauf-kopf .text { flex: 1; min-width: 0; }
.lauf-kopf b { display: block; overflow-wrap: anywhere; }

.lauf-status {
    flex: none;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--akzent-hell);
    color: var(--akzent);
    max-width: 45%;
    text-align: right;
}

.lauf-status.uebernommen { background: var(--gut-hell); color: var(--gut); }
.lauf-status.abgesagt, .lauf-status.abgelehnt { background: var(--gefahr-hell); color: var(--gefahr); }

.lauf h4 { margin: 12px 0 4px; font-size: 0.95rem; }
.lauf h4 small { font-weight: 400; color: var(--text-leise); }

.nachricht {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--hintergrund);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 10px 0 0;
}

.freigabe-text { margin-top: 10px; }
.freigabe-text p { margin: 0 0 6px; }
.freigabe-text ul { margin: 0 0 10px; padding-left: 22px; }

.haken { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.haken input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

.ersetzt b { text-decoration: line-through; }
.ersetzt .termin { opacity: 0.7; }

.neu-planen { margin-top: 12px; }
.neu-planen > summary { font-weight: 600; }
.lauf .vorschlag { margin-top: 12px; }

.freigaben { list-style: none; padding: 0; margin: 8px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.freigaben li:not(.klein) {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--rand);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
}

/* ---------- Einrichtung ---------- */

.schritt p { margin: 0 0 8px; }
.schritt ol { margin: 0; padding-left: 22px; }
.schritt li { margin-bottom: 4px; }

.nr {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--akzent);
    color: #fff;
    font-size: 0.85rem;
}

.schritt.erledigt .nr { background: var(--gut); }

/* Sporteinstellungen */
.sport-zeile { padding: 10px 0; border-bottom: 1px solid var(--rand); }
.sport-zeile:last-child { border-bottom: 0; }
.sport-zeile .klein { display: block; margin-top: 2px; }
.fehlt { color: var(--gefahr); font-weight: 700; }

.hinweise { margin: 8px 0; padding-left: 20px; }
.hinweise li { margin-bottom: 3px; }
.warnung-liste { color: var(--warn); }

.checkliste { margin-top: 10px; }
.checkliste ul { margin: 0; padding-left: 22px; }
.checkliste li { margin-bottom: 4px; }
a.btn-leise { text-decoration: none; color: inherit; display: inline-block; }

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

.anmelde-karte { max-width: 420px; margin: 24px auto; }
.anmelde-karte p { margin: 0 0 12px; }
.anmelde-karte .felder { grid-template-columns: 1fr; }
.anmelde-karte .btn { width: 100%; margin-top: 4px; }
.anmelde-karte .fehlertext { color: var(--gefahr); font-size: 0.9rem; min-height: 1.3em; margin: 10px 0 0; }

/* ---------- Einrichtungs-Assistent ---------- */

.assistent { max-width: 620px; margin: 8px auto 0; }
.assistent h2 { margin-top: 0; }
.assistent-schritt p { margin: 0 0 12px; }
.assistent-schritt ol { margin: 0 0 12px; padding-left: 22px; }
.assistent-schritt li { margin-bottom: 4px; }
.assistent-schritt textarea { margin-top: 4px; }
.assistent-schritt .form-fuss.links { margin: 0 0 12px; }
.assistent-schritt .zurueck { margin-right: auto; }
.assistent-schritt .fehlertext { color: var(--gefahr); font-size: 0.9rem; margin: 8px 0 0; }
.assistent-schritt .fehlertext:empty { display: none; }
.assistent-fuss { text-align: center; margin: 0; }

/* Fortschritt: nummerierte Punkte mit Linie dazwischen */
.fortschritt {
    list-style: none;
    counter-reset: schritt;
    display: flex;
    padding: 0;
    margin: 0 0 18px;
}

.fortschritt li {
    counter-increment: schritt;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-leise);
    text-align: center;
}

.fortschritt li::before {
    content: counter(schritt);
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--rand);
    background: var(--karte);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Linie zum vorherigen Punkt */
.fortschritt li + li::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--rand);
}

.fortschritt li.aktiv { color: var(--text); font-weight: 700; }
.fortschritt li.aktiv::before { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.fortschritt li.erledigt::before { content: "✓"; border-color: var(--gut); background: var(--gut); color: #fff; }
.fortschritt li.erledigt + li::after, .fortschritt li.erledigt + li.aktiv::after { background: var(--gut); }

.hinweis-box {
    background: var(--akzent-hell);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 4px 0 4px;
}

.hinweis-box .form-fuss { margin: 10px 0 0 !important; }

.erfolg-box {
    background: var(--gut-hell);
    color: var(--gut);
    font-weight: 600;
    border-radius: 12px;
    padding: 10px 14px;
}

/* Zwei Wege zum Verbinden */
.weg {
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 10px;
}

.weg h3 { margin-bottom: 6px; }
.weg p { margin-bottom: 0; }
.weg .form-fuss.links { margin: 10px 0 0 !important; }
.weg > summary { color: var(--text); font-size: 1rem; }
.weg[open] > summary { margin-bottom: 10px; }
.weg .felder { margin-top: 4px; }

.etikett-empfohlen {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: 2px;
    background: var(--gut-hell);
    color: var(--gut);
}

/* Schwellenwerte je Sportart */
.sport-werte {
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: 4px 14px 14px;
    margin: 0 0 10px;
}

.sport-werte legend { font-weight: 700; padding: 0 6px; }
.sport-werte .felder { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 4px; }
.sport-werte input.leer-feld { border-color: var(--warn); }

.rechte { list-style: none; padding: 0 !important; margin: 0 0 12px; }
.rechte li { padding: 6px 0; border-bottom: 1px solid var(--rand); }
.rechte li:last-child { border-bottom: 0; }

/* ---------- Textseiten (Datenschutz) ---------- */

.text-seite { max-width: 760px; }
.text-seite h4 { margin: 14px 0 4px; font-size: 0.95rem; }
.text-seite p { margin: 0 0 10px; }
.text-seite ul { margin: 0 0 8px; padding-left: 22px; }
.text-seite li { margin-bottom: 4px; }
.kopf a.btn-leise { white-space: nowrap; }

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 50;
    max-width: calc(100% - 32px);
    background: var(--text);
    color: var(--karte);
    padding: 11px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.toast.fehler { background: var(--gefahr); color: #fff; }

@media (max-width: 520px) {
    .kopf h1 { font-size: 1.35rem; }
    .karte { padding: 14px; }
    .blase { max-width: 95%; }
    .monat { gap: 2px; }
    .monat-tag { min-height: 58px; padding: 3px; border-radius: 8px; }
    .kal-icon { width: 20px; height: 20px; font-size: 0.75rem; border-radius: 6px; }
    .tag-symbole { gap: 2px; }
    .monat-kopf h3 { min-width: 0; font-size: 0.95rem; }
    .logo { height: 38px; }
    .fortschritt li { font-size: 0; gap: 0; }   /* nur Punkte, Beschriftung nur beim aktuellen Schritt */
    .fortschritt li.aktiv { font-size: 0.75rem; gap: 4px; }
    .form-neu .zeile { flex-wrap: wrap; }
    .form-neu .zeile input[type="text"]:not(.emoji-feld) { flex: 1 1 140px; }
}