/* Formkurve. Ein Codestand fuer iPhone und Mac:
   am Telefon einspaltig und auf schnelles Abhaken ausgelegt,
   am Mac sieben Spalten nebeneinander.

   Klassennamen tragen ein Praefix nach Geltungsbereich:
   db- Dashboard, wo- Wochenansicht, an- Anmeldung, fo- Fotobereich,
   gm- seitenuebergreifend.
   Grund: .einheit und .herkunft waren beide zweimal belegt, einmal im
   Dashboard und einmal in der Wochenansicht, und haben dort Fehler erzeugt.
   Namen ohne Praefix sind Altbestand; die Liste in tests/test_darstellung.py
   haelt sie fest und darf nur kuerzer werden. */

/* Autorenregeln schlagen die Vorgabe des Browsers, unabhaengig von der
   Spezifitaet: eine eigene display-Regel macht das hidden-Attribut wirkungslos.
   Aufgefallen an "Kamera wechseln", das trotz hidden sichtbar blieb, weil
   .fo-knopf-neben ein display setzt. */
[hidden] { display: none !important; }

:root {
    --grund: #16181d;
    --flaeche: #1e2128;
    --flaeche-hoch: #262a33;
    --linie: #333844;
    --text: #e8eaf0;
    --text-leise: #949bad;
    --akzent: #6ea8fe;
    --erledigt: #4ec98a;
    --warnung: #e8a33d;

    --laufen: #6ea8fe;
    --kraft: #c99bf5;
    --rad: #4ec98a;
    --mobility: #e8a33d;
    --walking: #7fd4d0;
    --platform_tennis: #f58c8c;
    --unbekannt: #949bad;

    --schatten: rgba(0, 0, 0, .35);

    /* Stufen. Farbe ist nie das einzige Merkmal: jede Stufe hat zusaetzlich
       ein Zeichen und einen Text. */
    --stufe-gut: #4ec98a;
    --stufe-erhoeht: #e8a33d;
    --stufe-hoch: #f07171;
    --stufe-niedrig: #6ea8fe;
    --stufe-neutral: #949bad;

    --radius: 12px;
    --spalt: 10px;
}

/* Helle Tokens an genau einer Stelle definiert und zweimal angewandt:
   ohne eigene Wahl entscheidet das System, mit Wahl gewinnt data-theme. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --grund: #f4f5f8;
        --flaeche: #ffffff;
        --flaeche-hoch: #eceef4;
        --linie: #d8dce6;
        --text: #1c1f26;
        --text-leise: #5c6474;
        --schatten: rgba(20, 25, 40, .1);
        --stufe-gut: #17794f;
        --stufe-erhoeht: #a8620a;
        --stufe-hoch: #c0362c;
        --stufe-niedrig: #1a5fb4;
        --stufe-neutral: #5c6474;
    }
}

:root[data-theme="light"] {
    --grund: #f4f5f8;
    --flaeche: #ffffff;
    --flaeche-hoch: #eceef4;
    --linie: #d8dce6;
    --text: #1c1f26;
    --text-leise: #5c6474;
    --schatten: rgba(20, 25, 40, .1);
    --stufe-gut: #17794f;
    --stufe-erhoeht: #a8620a;
    --stufe-hoch: #c0362c;
    --stufe-niedrig: #1a5fb4;
    --stufe-neutral: #5c6474;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--grund);
    color: var(--text);
    font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
}

main { max-width: 1500px; margin: 0 auto; padding: 12px; }

/* --- Kopf --- */
.kopf { margin-bottom: 14px; }

.navigation {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.navigation a {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    color: var(--text); text-decoration: none;
    font-size: 26px; line-height: 1;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.navigation a:hover { background: var(--flaeche-hoch); }

h1 { font-size: 19px; margin: 0; text-align: center; }
h1 small { display: block; font-size: 13px; font-weight: 400; color: var(--text-leise); }

.kennzahlen {
    display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
    margin-top: 10px; font-size: 13px; color: var(--text-leise);
}
.kennzahlen strong { color: var(--text); font-size: 15px; }
.kennzahlen .ungeplant { color: var(--warnung); }
.kennzahlen .heute {
    color: var(--akzent); text-decoration: none;
    border: 1px solid var(--linie); border-radius: 999px; padding: 1px 10px;
}

/* --- Ablagen --- */
.ablage.aktiv {
    outline: 2px dashed var(--akzent);
    outline-offset: -3px;
    background: var(--flaeche-hoch);
}

.pool {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 10px; margin-bottom: var(--spalt);
}
.pool h2 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.pool h2 small { font-weight: 400; color: var(--text-leise); text-transform: none; letter-spacing: 0; }
.pool .karten { display: flex; flex-wrap: wrap; gap: var(--spalt); }
.pool .karten > * { flex: 1 1 220px; max-width: 320px; }
/* Ein leerer Pool bleibt Ablageflaeche, soll aber am Telefon nicht den Platz
   der Tage wegnehmen. Der Hinweistext gibt ihm die noetige Hoehe. */
.pool:not(:has(.wo-einheit)) .karten { min-height: 0; }
.leer-hinweis { margin: 0; font-size: 12px; color: var(--text-leise); }
.pool:has(.wo-einheit) .leer-hinweis { display: none; }
.pool:has(.wo-einheit) .karten { margin-bottom: 0; }

/* --- Woche --- */
.woche { display: grid; gap: var(--spalt); grid-template-columns: 1fr; }

@media (min-width: 900px) {
    .woche { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; }
    main { padding: 18px; }
    .pool .karten > * { flex: 0 1 240px; }
}

.tag {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 92px;
}
.tag.heute { border-color: var(--akzent); }
.tag.vergangen { opacity: .72; }

.tag h2 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.tag .datum { font-weight: 400; color: var(--text-leise); letter-spacing: 0; }
.tag .karten { display: flex; flex-direction: column; gap: 8px; min-height: 10px; }

.hinzufuegen {
    align-self: stretch; min-height: 34px;
    background: transparent; color: var(--text-leise);
    border: 1px dashed var(--linie); border-radius: 8px;
    font-size: 18px; cursor: pointer;
}
.hinzufuegen:hover { color: var(--akzent); border-color: var(--akzent); }

/* --- Karten --- */
.wo-einheit, .aktivitaet {
    position: relative;
    background: var(--flaeche-hoch); border: 1px solid var(--linie);
    border-left: 3px solid var(--art-farbe, var(--text-leise));
    border-radius: 8px; padding: 8px 30px 8px 10px;
}
.wo-einheit { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.wo-einheit.zieht {
    cursor: grabbing; opacity: .9;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    transform: scale(1.02);
}
.wo-einheit.platzhalter { opacity: .35; }

.wo-einheit.laufen, .aktivitaet.laufen { --art-farbe: var(--laufen); }
.wo-einheit.kraft, .aktivitaet.kraft { --art-farbe: var(--kraft); }
.wo-einheit.rad, .aktivitaet.rad { --art-farbe: var(--rad); }
.wo-einheit.mobility, .aktivitaet.mobility { --art-farbe: var(--mobility); }
.wo-einheit.walking, .aktivitaet.walking { --art-farbe: var(--walking); }
.wo-einheit.platform_tennis, .aktivitaet.platform_tennis { --art-farbe: var(--platform_tennis); }

.wo-einheit header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.art {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--art-farbe, var(--text-leise));
}
.titel { margin: 2px 0 0; font-weight: 600; }
.soll { margin: 1px 0 0; font-size: 12.5px; color: var(--text-leise); }
/* Hinweis unter einer ungeplanten Aktivitaet in der Wochenansicht. */
.wo-quelle-hinweis { margin: 3px 0 0; font-size: 11px; color: var(--text-leise); font-style: italic; }

.wo-einheit.erledigt .titel { text-decoration: line-through; text-decoration-color: var(--text-leise); }
.wo-einheit.erledigt { border-left-color: var(--erledigt); }
.wo-einheit.verfallen { border-style: dashed; opacity: .6; }

/* Abhaken ist die haeufigste Aktion, deshalb grosszuegige Trefferflaeche. */
.haken {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid var(--linie); background: transparent;
    color: var(--erledigt); font-size: 15px; line-height: 1; cursor: pointer;
    touch-action: manipulation;
}
.wo-einheit.erledigt .haken { border-color: var(--erledigt); background: rgba(78, 201, 138, .14); }

.loeschen {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; padding: 0;
    background: transparent; border: 0; border-radius: 6px;
    color: var(--text-leise); font-size: 15px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .12s;
}
.wo-einheit:hover .loeschen, .wo-einheit:focus-within .loeschen { opacity: 1; }
.loeschen:hover { color: var(--warnung); background: var(--flaeche); }

/* --- Zuordnung Soll gegen Ist --- */
.match {
    margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--linie);
    font-size: 12px; color: var(--text-leise);
}
.match .ist { margin: 0; }
.match strong { color: var(--text); font-weight: 600; }
.match.confirmed .ist strong { color: var(--erledigt); }

.entscheidung { display: flex; gap: 6px; margin-top: 6px; }
.entscheidung button {
    flex: 1; min-height: 30px; padding: 3px 8px;
    background: var(--akzent); color: #10131a;
    border: 0; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
    touch-action: manipulation;
}
.entscheidung .sekundaer { background: transparent; color: var(--text-leise); border: 1px solid var(--linie); }

/* --- Dialog --- */
dialog {
    border: 1px solid var(--linie); border-radius: var(--radius);
    background: var(--flaeche); color: var(--text);
    padding: 18px; width: min(94vw, 360px);
}
dialog::backdrop { background: rgba(0, 0, 0, .5); }
dialog h2 { margin: 0 0 12px; font-size: 16px; }
dialog label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--text-leise); }
dialog input, dialog select {
    display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
    background: var(--grund); color: var(--text);
    border: 1px solid var(--linie); border-radius: 8px; font-size: 16px;
}
.knoepfe { display: flex; gap: 8px; margin-top: 14px; }
.knoepfe button {
    flex: 1; min-height: 40px;
    background: var(--akzent); color: #10131a;
    border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.knoepfe .sekundaer { background: transparent; color: var(--text); border: 1px solid var(--linie); }

.fussnote { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--text-leise); min-height: 18px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .wo-einheit.zieht { transform: none; }
}

/* ==========================================================================
   Dashboard-Kacheln
   Kompakt, grosse Kennzahl, Kontext klein darunter. Jede Stufe traegt Farbe,
   Zeichen und Text, damit Farbe nie das einzige Unterscheidungsmerkmal ist.
   ========================================================================== */

.dashboard-kopf .navigation { align-items: flex-start; }
.dashboard-kopf h1 { text-align: left; flex: 1; }

.kopf-knoepfe { display: flex; align-items: center; gap: 8px; }

.thema-schalter {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 12px;
    background: var(--flaeche); color: var(--text);
    border: 1px solid var(--linie); border-radius: 999px;
    font-size: 13px; cursor: pointer;
}
.thema-schalter:hover { background: var(--flaeche-hoch); }
.thema-zeichen { font-size: 14px; line-height: 1; }

.woche-link {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 12px;
    background: var(--flaeche); color: var(--text); text-decoration: none;
    border: 1px solid var(--linie); border-radius: 999px; font-size: 13px;
}
.woche-link:hover { background: var(--flaeche-hoch); }

.datenlage-hinweis {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 0; padding: 10px 12px;
    background: var(--flaeche); color: var(--text-leise);
    border: 1px solid var(--linie); border-left: 3px solid var(--stufe-erhoeht);
    border-radius: var(--radius); font-size: 13px;
}
.datenlage-hinweis .zeichen {
    flex: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--stufe-erhoeht); color: var(--grund);
    font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}

.kacheln {
    display: grid; gap: var(--spalt); margin-top: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.kachel {
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); padding: 12px 14px 14px;
    display: flex; flex-direction: column; gap: 2px;
}

.kachel > header {
    /* center statt baseline: an der Grundlinie ausgerichtet ragt das
       Herkunftszeichen unter die Ueberschrift und macht die Zeile hoeher als
       im Anpassen-Modus, wo an seiner Stelle Knoepfe ohne Text stehen. */
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 4px; min-height: 22px;
}
.kachel h2 {
    margin: 0; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise);
}

/* Herkunft steht an jeder Kachel, damit nie unklar ist, woher ein Wert kommt. */
.db-herkunft {
    /* Gleiche Hoehe wie Griff und Ausblenden, die im Anpassen-Modus an ihre
       Stelle treten: so ist die Kopfzeile in beiden Zustaenden gleich hoch. */
    display: inline-flex; align-items: center;
    flex: none; height: 22px; font-size: 10px; letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0 7px; border-radius: 999px; border: 1px solid var(--linie);
    color: var(--text-leise); white-space: nowrap;
}
.db-herkunft-garmin { border-style: solid; }
.db-herkunft-eigen { border-style: dashed; }

.kennzahl-zeile { display: flex; align-items: center; gap: 12px; }
.kennzahl { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.zahl {
    font-size: 34px; font-weight: 650; line-height: 1.05;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kennzahl .db-einheit { font-size: 13px; color: var(--text-leise); }

.kontext { margin: 3px 0 0; font-size: 13px; color: var(--text-leise); }
.zusatz { margin: 1px 0 0; font-size: 12px; color: var(--text-leise); }
.erlaeuterung {
    margin: 6px 0 0; font-size: 11px; color: var(--text-leise);
    font-style: italic; line-height: 1.35;
}

/* Stufe: Farbe plus Zeichen plus Text. */
.stufe-zeile { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; font-size: 12.5px; }
.stufe-zeichen { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.stufe-text { color: var(--text-leise); }

.kachel.stufe-gut .stufe-zeichen { background: var(--stufe-gut); border-radius: 50%; }
.kachel.stufe-erhoeht .stufe-zeichen { background: var(--stufe-erhoeht); border-radius: 1px; }
.kachel.stufe-hoch .stufe-zeichen {
    background: var(--stufe-hoch);
    /* Dreieck: unterscheidbar auch ohne Farbwahrnehmung */
    clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0;
}
.kachel.stufe-niedrig .stufe-zeichen {
    background: var(--stufe-niedrig);
    clip-path: polygon(50% 100%, 100% 0, 0 0); border-radius: 0;
}
.kachel.stufe-neutral .stufe-zeichen { background: var(--stufe-neutral); }

.kachel.stufe-gut .zahl { color: var(--stufe-gut); }
.kachel.stufe-erhoeht .zahl { color: var(--stufe-erhoeht); }
.kachel.stufe-hoch .zahl { color: var(--stufe-hoch); }
.kachel.stufe-niedrig .zahl { color: var(--stufe-niedrig); }

/* Ring */
.ring { flex: none; width: 54px; height: 54px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-spur { stroke: var(--linie); }
.ring-wert { stroke: var(--stufe-neutral); stroke-linecap: round; }
.ring.stufe-gut .ring-wert { stroke: var(--stufe-gut); }
.ring.stufe-erhoeht .ring-wert { stroke: var(--stufe-erhoeht); }
.ring.stufe-hoch .ring-wert { stroke: var(--stufe-hoch); }
.ring.stufe-niedrig .ring-wert { stroke: var(--stufe-niedrig); }

/* Sparkline */
.sparkline {
    width: 100%; height: 30px; margin-top: 9px;
    overflow: visible; display: block;
}
.sparkline polyline {
    fill: none; stroke: var(--stufe-neutral); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.kachel.stufe-gut .sparkline polyline { stroke: var(--stufe-gut); }
.kachel.stufe-erhoeht .sparkline polyline { stroke: var(--stufe-erhoeht); }
.kachel.stufe-hoch .sparkline polyline { stroke: var(--stufe-hoch); }
.kachel.stufe-niedrig .sparkline polyline { stroke: var(--stufe-niedrig); }

/* Teilfaktoren der Bereitschaft */
.faktoren { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 4px; }
.faktoren li {
    display: grid; grid-template-columns: 5.6em 1fr 3.4em;
    align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-leise);
}
.faktor-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faktor-balken {
    height: 7px; background: var(--grund);
    border: 1px solid var(--linie); border-radius: 4px; overflow: hidden;
}
.faktor-balken > span {
    display: block; height: 100%;
    background: var(--stufe-neutral); opacity: .85;
}
.kachel.stufe-gut .faktor-balken > span { background: var(--stufe-gut); }
.kachel.stufe-erhoeht .faktor-balken > span { background: var(--stufe-erhoeht); }
.kachel.stufe-hoch .faktor-balken > span { background: var(--stufe-hoch); }
.kachel.stufe-niedrig .faktor-balken > span { background: var(--stufe-niedrig); }
.faktor-wert {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Kachel ohne belastbaren Wert */
.zustand-unsicher, .zustand-leer { justify-content: flex-start; }
.kachel .hinweis {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 4px 0 0; font-size: 13px; color: var(--text-leise); line-height: 1.4;
}
.kachel .hinweis .zeichen {
    flex: none; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--linie); color: var(--text-leise);
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.zustand-unsicher { border-left: 3px solid var(--stufe-erhoeht); }
.zustand-unsicher .hinweis .zeichen {
    background: var(--stufe-erhoeht); color: var(--grund); border-color: transparent;
}

@media (min-width: 900px) {
    .kacheln { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

/* Der Umschalter steht auch in der Wochenansicht, dort in der Kennzahlenzeile. */
.kennzahlen .thema-schalter { min-height: 26px; padding: 0 10px; font-size: 12px; }

/* Im hellen Thema wirkt Abschwaechung staerker als im dunklen: die Opazitaet
   von vergangenem Tag und verfallener Einheit multipliziert sich auf 0,43, was
   auf hellem Grund nicht mehr lesbar ist. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .tag.vergangen { opacity: .88; }
    :root:not([data-theme="dark"]) .wo-einheit.verfallen { opacity: .78; }
}
:root[data-theme="light"] .tag.vergangen { opacity: .88; }
:root[data-theme="light"] .wo-einheit.verfallen { opacity: .78; }

/* --- Anmeldung --- */
.anmeldung {
    max-width: 340px; margin: 12vh auto 0;
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); padding: 24px;
}
.anmeldung h1 { font-size: 20px; text-align: center; margin: 0 0 18px; }
.anmeldung label { display: block; font-size: 13px; color: var(--text-leise); }
.anmeldung input {
    display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
    background: var(--grund); color: var(--text);
    border: 1px solid var(--linie); border-radius: 8px;
    font-size: 16px;  /* unter 16px zoomt iOS beim Fokus hinein */
}
.anmeldung button {
    width: 100%; min-height: 44px; margin-top: 14px;
    background: var(--akzent); color: #10131a;
    border: 0; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.anmeldung .fehler {
    margin: 0 0 14px; padding: 10px 12px; font-size: 13px;
    background: var(--flaeche-hoch); color: var(--text);
    border: 1px solid var(--linie); border-left: 3px solid var(--stufe-hoch);
    border-radius: 8px;
}
.anmeldung code { font-size: 12px; }

/* --- Quellenstatus --- */
.quellen { margin-top: 18px; }
.quellen h2 {
    margin: 0 0 8px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise);
}
.quellen ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.quelle {
    display: grid; gap: 2px; padding: 9px 12px;
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: 10px; font-size: 12.5px;
}
.quelle-name { font-weight: 600; text-transform: capitalize; }
.quelle-zustand { display: flex; align-items: center; gap: 6px; color: var(--text-leise); }
.quelle-zeit, .quelle-fehler { color: var(--text-leise); font-size: 11.5px; }
.quelle-fehler { color: var(--stufe-hoch); }

.quelle.zustand-ok .stufe-zeichen { background: var(--stufe-gut); border-radius: 50%; }
.quelle.zustand-error .stufe-zeichen {
    background: var(--stufe-hoch); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.quelle.zustand-running .stufe-zeichen { background: var(--stufe-niedrig); border-radius: 2px; }

.quellen-fuss { margin: 10px 0 0; font-size: 12px; color: var(--text-leise); }
.quellen-fuss a { color: var(--akzent); }
.inline { display: inline; }
.verweis {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--akzent); font: inherit; text-decoration: underline;
}
#jetzt-aktualisieren[disabled] { opacity: .6; cursor: progress; }

/* --- Wortmarke ---
   Als Text statt als Bild: skaliert mit der Schriftgroesse, folgt dem Thema
   und bleibt bei jeder Aufloesung scharf. Rot ist die Markenfarbe und wird
   nur hier verwendet; die Akzentfarbe der Bedienelemente bleibt blau. */
.wortmarke {
    font-weight: 700;
    letter-spacing: -.015em;
    /* Kein Leerzeichen zwischen den Teilen, sie bilden ein Wort. */
    white-space: nowrap;
}
.wm-form { color: #EA0215; }
.wm-kurve { color: var(--text); }

.anmeldung h1 .wortmarke { font-size: 26px; }
.dashboard-kopf h1 .wortmarke { font-size: 21px; }

/* --- Hinweis auf zwischengespeicherte Daten --- */
.cache-hinweis {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 0; padding: 9px 12px;
    background: var(--flaeche); color: var(--text-leise);
    border: 1px solid var(--linie); border-left: 3px solid var(--stufe-niedrig);
    border-radius: var(--radius); font-size: 13px;
}
.cache-hinweis .zeichen {
    flex: none; color: var(--stufe-niedrig); font-size: 14px; line-height: 1.3;
}

/* Nebenwerte einer Kachel, etwa Körperfett und Muskelmasse */
.nebenwerte { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.nebenwerte li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 12.5px; color: var(--text-leise);
}
.nebenwert-wert { font-variant-numeric: tabular-nums; color: var(--text); }

/* --- Heute-Kachel --- */
.kachel-ziel { color: inherit; text-decoration: none; }
.kachel-ziel:hover { color: var(--akzent); }

.heute-einheiten { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.heute-einheiten li {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 8px; font-size: 13px;
}
.heute-einheiten .haken { width: 26px; height: 26px; font-size: 13px; }
.heute-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heute-einheiten .erledigt .heute-titel {
    text-decoration: line-through; color: var(--text-leise);
}
.heute-art { font-size: 11px; color: var(--text-leise); white-space: nowrap; }
.heute-einheiten li.erledigt .haken {
    border-color: var(--stufe-gut); background: color-mix(in srgb, var(--stufe-gut) 14%, transparent);
}

/* --- Wochenbalken --- */
.wochenbalken {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.wochenbalken li { display: grid; gap: 3px; text-align: center; }
.wb-tag { font-size: 10px; color: var(--text-leise); }
.wb-feld {
    display: flex; align-items: center; justify-content: center;
    min-height: 22px; border-radius: 5px; font-size: 10px;
    border: 1px solid var(--linie); color: var(--text-leise);
}
.wb-feld.voll { background: var(--stufe-gut); border-color: var(--stufe-gut); color: var(--grund); }
.wb-feld.teil { border-color: var(--stufe-erhoeht); color: var(--stufe-erhoeht); }
.wb-feld.offen { border-style: dashed; }
.wochenbalken li.heute .wb-tag { color: var(--akzent); font-weight: 600; }

.db-herkunft-withings, .db-herkunft-plan { border-style: solid; }
.db-herkunft-plan { opacity: .8; }

/* --- Kacheln anpassen ---
   Griff und Ausblenden stehen in der Kopfzeile und treten dort an die Stelle
   der Herkunft. Dadurch aendert sich beim Umschalten weder Hoehe noch Breite
   der Kachel, das Raster springt also nicht. */

/* Im Normalzustand aus dem Fluss genommen, nicht nur unsichtbar. */
.kachel-ausblenden,
.kachel-griff { display: none; }

body.anpassen .kachel > header .db-herkunft { display: none; }

body.anpassen .kachel-griff,
body.anpassen .kachel-ausblenden {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 24px; height: 22px; padding: 0;
    background: transparent; border: 1px solid var(--linie); border-radius: 6px;
    color: var(--text-leise); font-size: 12px; line-height: 1;
}
body.anpassen .kachel-ausblenden { margin-left: 4px; cursor: pointer; }
body.anpassen .kachel-griff { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }

/* Die Knoepfe bleiben klein, ihre Trefferflaeche nicht: 24 Pixel sind mit dem
   Finger nicht zuverlaessig zu treffen. Der unsichtbare Bereich vergroessert
   sie auf ueber 40 Pixel, ohne die Kopfzeile hoeher zu machen. */
body.anpassen .kachel-griff,
body.anpassen .kachel-ausblenden { position: relative; }
body.anpassen .kachel-griff::after,
body.anpassen .kachel-ausblenden::after {
    content: ""; position: absolute; inset: -10px;
}
body.anpassen .kachel-griff:hover { color: var(--text); border-color: var(--text-leise); }
.kachel-ausblenden:hover { color: var(--stufe-hoch); border-color: var(--stufe-hoch); }

/* Der Rahmen zeigt den Modus an, ohne Platz zu beanspruchen. */
body.anpassen .kachel { position: relative; border-style: dashed; }
body.anpassen .kachel-ziel { pointer-events: none; }

.kachel.zieht {
    cursor: grabbing; opacity: .95;
    box-shadow: 0 14px 34px var(--schatten);
    border-style: solid;
}
.kachel-platzhalter {
    border: 2px dashed var(--akzent); border-radius: var(--radius);
    background: color-mix(in srgb, var(--akzent) 8%, transparent);
}

/* Nur fuer Screenreader, nimmt keinen Platz ein. */
.nur-vorlesen {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ausgeblendet { margin-top: 16px; }
.ausgeblendet h2 {
    margin: 0 0 8px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise);
}
.ausgeblendet ul {
    list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.ausgeblendet li {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; font-size: 12.5px;
    background: var(--flaeche); border: 1px dashed var(--linie); border-radius: 999px;
}
.ausgeblendet li button {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--akzent); font: inherit; text-decoration: underline;
}
.ausgeblendet:not([hidden]) ~ .quellen { margin-top: 16px; }

/* ==========================================================================
   Fotobereich (Praefix fo-)
   ========================================================================== */

.fo-pin { max-width: 340px; margin: 12vh auto 0; padding: 0 16px; }
.fo-pin h1 { margin: 0 0 6px; font-size: 20px; }
.fo-pin-text { margin: 0 0 16px; color: var(--text-leise); font-size: 13.5px; }
.fo-pin form { display: flex; flex-direction: column; gap: 12px; }
.fo-pin label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-leise); }
.fo-pin input {
    padding: 10px 12px; font-size: 17px; letter-spacing: .25em;
    border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); color: var(--text);
}
.fo-zurueck { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--text-leise); }

.fo-schutz-hinweis {
    margin: 0 0 14px; font-size: 12.5px; color: var(--text-leise);
    border-left: 3px solid var(--stufe-niedrig); padding-left: 10px;
}

/* Faelligkeit: Zeichen und Text tragen die Aussage, die Farbe kommt dazu. */
.fo-faellig {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--linie); border-radius: 10px;
    background: var(--flaeche); border-left: 3px solid var(--stufe-gut);
}
.fo-faellig-jetzt { border-left-color: var(--stufe-erhoeht); }
.fo-faellig-text { margin: 0; flex: 1 1 220px; font-size: 14px; }
.fo-faellig-zeichen { color: var(--stufe-gut); margin-right: 6px; }
.fo-faellig-jetzt .fo-faellig-zeichen { color: var(--stufe-erhoeht); }

.fo-knopf-haupt {
    display: inline-block; padding: 9px 16px; border-radius: 8px;
    border: 1px solid var(--akzent); background: var(--akzent); color: var(--grund);
    font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.fo-knopf-haupt:disabled { opacity: .45; cursor: default; }
.fo-knopf-neben {
    display: inline-block; padding: 9px 14px; border-radius: 8px;
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
    font-size: 13.5px; cursor: pointer;
}
.fo-sperren {
    padding: 6px 12px; border: 1px solid var(--linie); border-radius: 8px;
    font-size: 12.5px; color: var(--text-leise); text-decoration: none;
}

.fo-abschnitt { margin: 22px 0 8px; font-size: 14px; color: var(--text-leise); font-weight: 600; }
.fo-leer { color: var(--text-leise); font-size: 13.5px; }
.fo-vergleich-link { margin: 14px 0 0; font-size: 14px; }

.fo-termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fo-termin a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 11px 13px; border: 1px solid var(--linie); border-radius: 10px;
    background: var(--flaeche); text-decoration: none; color: var(--text);
}
.fo-termin-datum { font-weight: 600; font-variant-numeric: tabular-nums; }
.fo-termin-inhalt { display: flex; align-items: baseline; gap: 8px; }
.fo-zaehler { font-size: 12.5px; color: var(--text-leise); }
.fo-marke {
    font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
    border: 1px solid var(--linie); color: var(--text-leise);
}

/* --- Aufnahme --- */

.fo-datum { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.fo-datum label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-leise); }
.fo-datum input, .fo-datum button {
    padding: 7px 10px; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); color: var(--text); font-size: 14px;
}

.fo-ansichten { display: flex; gap: 8px; margin-bottom: 10px; }
.fo-ansicht {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 6px; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); color: var(--text-leise); font-size: 13.5px; cursor: pointer;
}
/* Der aktive Reiter ist nicht nur farbig, sondern auch fett und umrandet. */
.fo-ansicht-aktiv { color: var(--text); font-weight: 600; border-color: var(--akzent); }
.fo-ansicht-zeichen { font-size: 11px; }
.fo-ansicht[data-vorhanden="ja"] .fo-ansicht-zeichen { color: var(--stufe-gut); }

/* Die Buehne haelt Video und Overlay deckungsgleich uebereinander. */
.fo-buehne {
    position: relative; aspect-ratio: 3 / 4; max-height: 62vh; margin: 0 auto;
    background: var(--grund); border: 1px solid var(--linie); border-radius: 12px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.fo-video, .fo-overlay {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Das Overlay ist Hilfslinie, keine Bedienflaeche. */
.fo-overlay { pointer-events: none; }
.fo-kamera-hinweis {
    /* Ueber der Buehne, mit eigenem Grund: sonst steht er auf dem Bild und
       ist nicht zu lesen. */
    position: relative; z-index: 1; margin: 0 16px; padding: 12px 16px;
    text-align: center; font-size: 13.5px; color: var(--text-leise);
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
}

.fo-regler { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 12.5px; color: var(--text-leise); }
.fo-regler input[type="range"] { flex: 1; }
.fo-regler output { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

.fo-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fo-datei { cursor: pointer; }

.fo-meldung { margin: 8px 0 0; font-size: 13px; color: var(--text-leise); min-height: 1.2em; }
.fo-meldung[data-art="fehler"] { color: var(--stufe-hoch); }
.fo-meldung[data-art="gut"] { color: var(--stufe-gut); }

.fo-vorschauen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fo-vorschau { display: flex; flex-direction: column; gap: 4px; }
.fo-vorschau-name { font-size: 11.5px; color: var(--text-leise); }
.fo-vorschau img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); }
.fo-vorschau-leer {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 3 / 4; border: 1px dashed var(--linie); border-radius: 8px;
    color: var(--text-leise); font-size: 12px;
}

/* --- Massband --- */

.fo-masse-hinweis { margin: 0 0 10px; font-size: 12.5px; color: var(--text-leise); }
.fo-massfelder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fo-massfeld { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--text-leise); }
.fo-massfeld > span:first-child { grid-column: 1 / -1; }
.fo-massfeld input {
    padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); color: var(--text); font-size: 15px; width: 100%;
    font-variant-numeric: tabular-nums;
}
.fo-mass-einheit { font-size: 12px; }
.fo-notiz { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; font-size: 12.5px; color: var(--text-leise); }
.fo-notiz textarea {
    padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); color: var(--text); font-size: 14px; font-family: inherit;
    resize: vertical;
}

/* --- Vergleich --- */

.fo-vergleich-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fo-vergleich-wahl select {
    padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); color: var(--text); font-size: 14px;
}
.fo-vergleich-wahl button {
    padding: 8px 14px; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche-hoch); color: var(--text); font-size: 13.5px; cursor: pointer;
}
.fo-gegen { color: var(--text-leise); font-size: 12.5px; }
.fo-vergleich-hinweis { margin: 8px 0 0; font-size: 12.5px; color: var(--text-leise); }

.fo-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fo-bild { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.fo-bild figcaption { font-size: 11.5px; color: var(--text-leise); font-variant-numeric: tabular-nums; }
/* Hoehe begrenzt, damit ein Paar ohne Scrollen nebeneinander steht. Ein
   Vergleich, fuer den man scrollen muss, ist keiner. */
.fo-bild img {
    width: auto; max-width: 100%; max-height: 62vh; align-self: start;
    border-radius: 10px; border: 1px solid var(--linie);
}
.fo-bild-leer {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4;
    margin: 0; border: 1px dashed var(--linie); border-radius: 10px;
    color: var(--text-leise); font-size: 12.5px;
}

.fo-masstabelle table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fo-masstabelle th, .fo-masstabelle td {
    padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--linie);
    font-variant-numeric: tabular-nums;
}
.fo-masstabelle th[scope="row"], .fo-masstabelle thead th:first-child { text-align: left; font-weight: 500; }
.fo-differenz-zeichen { font-size: 10px; margin-right: 2px; }

@media (min-width: 700px) {
    .fo-massfelder { grid-template-columns: repeat(4, 1fr); }
    .fo-buehne { max-width: 480px; }
}