/*!
 * Daily To-do Tracker - das Stylesheet.
 *
 * Bis v3.55.0 stand alles hier als PHP-Zeichenkette in der Hauptdatei und
 * ging bei jedem Seitenaufruf inline mit. Als Datei kann der Browser es
 * zwischenspeichern, und der Editor hilft beim Bearbeiten.
 *
 * WAS NICHT HIER STEHT
 * Akzentfarbe, "Erledigt"-Farbe und der Hell/Dunkel-Modus sind pro Nutzer
 * verschieden. Sie koennen deshalb nicht in einer gemeinsamen Datei
 * stehen und haengen als CSS-Variablen bzw. data-Attribute direkt am
 * Container (siehe render() in inc/trait-render-tracker.php).
 *
 * ACHTUNG, ZWEIMAL DIESELBE PALETTE
 * Der dunkle Modus steht weiter unten ZWEIMAL: einmal fuer die bewusste
 * Wahl (data-mode=dark) und einmal fuer die Systemvorgabe
 * (data-mode=auto + prefers-color-scheme). Reines CSS kann eine
 * Deklarationsliste nicht ueber eine @media-Grenze hinweg teilen - als
 * PHP-Zeichenkette ging das, als Datei nicht mehr.
 *
 * Die beiden Bloecke MUESSEN identisch bleiben. tests/test-css.php
 * vergleicht sie Zeile fuer Zeile und schlaegt Alarm, sobald sie
 * auseinanderlaufen. Wer hier eine Farbe aendert, aendert sie zweimal.
 */


/* =====================================================================
 * Die Token-Schicht (v3.67.0)
 *
 * WARUM
 * Bis hierher stand jede Zahl dort, wo sie gebraucht wurde: 8px hier,
 * 9px da, 12,5px an dritter Stelle. Nichts davon war falsch, aber es
 * ergab keinen Rhythmus - und wer eine Kachel neu baute, riet die Werte
 * neu. Ab jetzt kommen Abstand, Radius, Schatten und Schriftgröße aus
 * einem festen, kleinen Satz. Wer sich daran hält, bekommt Optik, die
 * zum Rest passt, ohne darüber nachzudenken.
 *
 * WIE SIE ZU LESEN SIND
 * Die Stufen sind bewusst wenige und bewusst grob. Wenn ein Wert nicht
 * passt, ist meist nicht die Skala zu grob, sondern die Stelle noch
 * nicht durchdacht.
 *
 * MIGRATION
 * Die Umstellung des Bestands läuft schrittweise (siehe
 * docs/WORKLOG-schoenpass.md). Alte, hart geschriebene Werte sind kein
 * Fehler, nur noch nicht dran - neue Regeln aber gehören ab sofort auf
 * die Token.
 * =================================================================== */
.ddt, .ddt-stats {
    /* --- Abstände: 4 / 8 / 12 / 16 / 24 / 32 -----------------------
       Die klassische 4er-Leiter. s2 und s4 tragen den Großteil;
       s5/s6 trennen Abschnitte voneinander. */
    --ddt-s1:4px;
    --ddt-s2:8px;
    --ddt-s3:12px;
    --ddt-s4:16px;
    --ddt-s5:24px;
    --ddt-s6:32px;

    /* --- Radien -----------------------------------------------------
       sm = Bedienelemente (Knöpfe, Felder, Chips),
       md = Karten und Kacheln,
       lg = der äußere Rahmen und Overlays,
       pill = alles Runde (Punkte, Marken, Fortschrittsbalken).
       xs bleibt für Winziges: Balken im Diagramm, 2px-Kanten. */
    --ddt-r-xs:2px;
    --ddt-r-sm:8px;
    --ddt-r-md:12px;
    --ddt-r-lg:16px;
    --ddt-r-pill:999px;

    /* --- Schatten ---------------------------------------------------
       Zwei Stufen, mehr braucht es nicht: 1 hebt eine Fläche eine
       Idee an (Karten), 2 löst etwas vom Blatt (Overlays, Toast,
       Install-Balken). Die Farbe steckt in einer eigenen Variablen,
       damit der dunkle Modus sie tiefer setzen kann - auf dunklem
       Grund ist ein zarter Schatten schlicht unsichtbar. */
    --ddt-shadow-color:rgba(20,24,35,.10);
    --ddt-shadow-color-2:rgba(20,24,35,.22);
    --ddt-shadow-1:0 1px 2px var(--ddt-shadow-color);
    --ddt-shadow-2:0 8px 28px var(--ddt-shadow-color-2);

    /* --- Schriftgrößen: fünf Stufen --------------------------------
       Ersetzt die gewachsene Reihe 10/11/11,5/12/12,5/13/13,5/14/15
       (docs/AUDIT-UX.md, P3-12). Zuordnung:
         xs  Beschriftungen an Diagrammen, Einheiten, Fußnoten
         sm  Nebentext, Tabellenzellen, Chips
         md  der Normalfall in der App
         lg  Fließtext und Eingabefelder
         xl  kleine Überschriften und die großen Eingabefelder
       Das xl ist mit Absicht genau 16px: iOS Safari zoomt beim
       Antippen in jedes Feld, dessen Schrift KLEINER als 16px ist.
       Die Hauptfelder (Aufgabe, Notiz, Zahlen) liegen darum auf xl.
       Was darüber liegt (18px aufwärts: Kennzahlen, Titel), ist
       Einzelfall und bleibt ausgeschrieben. */
    --ddt-fs-xs:11px;
    --ddt-fs-sm:12px;
    --ddt-fs-md:13px;
    --ddt-fs-lg:14px;
    --ddt-fs-xl:16px;
}

/* Farbschemen: es wechseln nur Akzent- und Erledigt-Farbe; die
   Flächen kommen aus den Variablen darunter. Werte aus get_themes(). */
.ddt, .ddt-stats { --ddt-accent:#534AB7; --ddt-done:#639922; }
.ddt[data-theme=ocean],  .ddt-stats[data-theme=ocean]  { --ddt-accent:#2C7A9E; --ddt-done:#2E9E8F; }
.ddt[data-theme=sunset], .ddt-stats[data-theme=sunset] { --ddt-accent:#CE4B24; --ddt-done:#B7791F; }
.ddt[data-theme=forest], .ddt-stats[data-theme=forest] { --ddt-accent:#2E7D5B; --ddt-done:#6FA02C; }
.ddt[data-theme=berry],  .ddt-stats[data-theme=berry]  { --ddt-accent:#A23470; --ddt-done:#7C9A2E; }

/* --- Flächen, Text, Ränder ---
   Der helle Modus. Jede Farbe des Plugins kommt aus einer dieser
   Variablen; fest verdrahtet bleibt nur das Weiß auf der
   Akzentfarbe, das auch im Dunkeln weiß bleiben muss. */
.ddt, .ddt-stats {
    color-scheme:light;
    --ddt-surface:#fff; --ddt-page:#fff; --ddt-sunk:#f5f5f2; --ddt-soft:#eef1f7;
    --ddt-text:#1f2430; --ddt-text2:#4b5563;
    /* Nachgezogen in v3.68.1. Beide reichten auf Weiß knapp (4,8 und
       4,5), aber die Kacheln der Statistik liegen auf --ddt-sunk, und
       DORT fielen sie auf 4,4 bzw. 4,1 - unter die Grenze, ausgerechnet
       für den kleinsten Text der App. Jetzt 5,2 bzw. 4,7 auf sunk.
       Nebenbei stehen die beiden Stufen wieder erkennbar auseinander;
       vorher trennte sie fast nichts. */
    --ddt-muted:#5f6775;
    --ddt-faint:#666e7d;
    --ddt-border:#e3e8f0; --ddt-border2:#dcdcda;
    --ddt-danger:#b23b3b; --ddt-solid:#1f2430; --ddt-solid-hover:#333a4a;
    --ddt-ok-bg:#f3faf1; --ddt-ok-bg-hover:#e8f5e4; --ddt-ok-text:#3B6D11;
    --ddt-warn-bg:#fff8e6; --ddt-warn-border:#f0e0b0; --ddt-warn-text:#6b5b2a;
    --ddt-bad-bg:#f6e7e7; --ddt-bad-border:#f0d6d6;
    /* Der kräftigere Akzent beim Drücken. Fest verdrahtet war er
       nur für Indigo richtig; die zweite Zeile lässt ihn jedem
       Farbschema folgen und fällt in alten Browsern still auf
       die erste zurück. */
    --ddt-accent-strong:#443b9e;
    --ddt-accent-strong:color-mix(in srgb, var(--ddt-accent) 80%, #000);

    /* --- Farbe als TEXT ---
       Eine Farbe, die als Flaeche gut aussieht, ist als Schrift oft zu
       hell. Das faellt im Hellen kaum auf und im Dunkeln sofort: die
       Akzentfarbe des Nutzers steht dort auf fast schwarzem Grund und
       kam auf 2,2:1 - unlesbar. Darum zwei eigene Token, die ueberall
       dort stehen, wo die Farbe SCHRIFT oder ZEICHNUNG ist. Rahmen und
       Flaechen nehmen weiter --ddt-accent bzw. --ddt-done.

       Im Hellen ist der Akzent als Text unveraendert - er reicht in
       allen fuenf Schemen. Die Erledigt-Farbe reicht NICHT (3,1 bis 3,6
       je nach Schema) und bekommt deshalb einen Schuss Schwarz. */
    --ddt-accent-text:var(--ddt-accent);

    /* Der Akzent, fast durchsichtig: der Ring um ein fokussiertes Feld,
       die Flaeche einer Ablagezone, ein Hauch Schatten unter einer
       angefassten Kachel. Bis v3.69.4 stand an all diesen neun Stellen
       ein festes, halbdurchsichtiges Indigo - unabhaengig davon, welches
       Farbschema der Nutzer gewaehlt hatte. In den vier anderen Schemen
       leuchtete der Fokusring damit in der falschen Farbe, und niemand
       sah es: ein Fokusring faellt selten auf, und wer ihn braucht,
       vergleicht ihn nicht mit der Akzentfarbe daneben.

       Die erste Zeile ist der Rueckfall fuer Browser ohne color-mix -
       dort bleibt es beim alten Verhalten. */
    --ddt-accent-glow:rgba(83,74,183,.20);
    --ddt-accent-glow:color-mix(in srgb, var(--ddt-accent) 22%, transparent);
    --ddt-done-text:#4f7a1b;
    --ddt-done-text:color-mix(in srgb, var(--ddt-done) 80%, #000);
}
.ddt[data-mode=dark], .ddt-stats[data-mode=dark] {
    background:var(--ddt-page); color:var(--ddt-text);
    padding:var(--ddt-s4); border-radius:var(--ddt-r-lg);
    /* Sagt dem Browser Bescheid: Bildlaufleisten, Datumswähler und
       die aufgeklappte Liste eines select rendert er selbst. */
    color-scheme:dark;
    --ddt-surface:#232733; --ddt-page:#1a1d25; --ddt-sunk:#1c1f28; --ddt-soft:#2b303c;
    --ddt-text:#e8eaf0; --ddt-text2:#c3c8d4; --ddt-muted:#a2aab9; --ddt-faint:#949cad;
    --ddt-border:#333846; --ddt-border2:#3d4250;
    --ddt-danger:#f0908f; --ddt-solid:#3d4456; --ddt-solid-hover:#4b5468;
    --ddt-ok-bg:#1e2a22; --ddt-ok-bg-hover:#24352a; --ddt-ok-text:#9fd67a;
    --ddt-warn-bg:#2e2a1c; --ddt-warn-border:#4d4429; --ddt-warn-text:#e3d2a0;
    --ddt-bad-bg:#2f2222; --ddt-bad-border:#4a3232;
    /* Auf dunklem Grund verschwindet ein zarter Schatten - hier
       traegt er tiefer. Beide dunklen Bloecke MUESSEN gleich
       bleiben (tests/test-css.php vergleicht sie Zeile fuer Zeile). */
    --ddt-shadow-color:rgba(0,0,0,.35);
    --ddt-shadow-color-2:rgba(0,0,0,.55);
    /* Im Dunkeln andersherum: beide Farben brauchen Weiss, um sich
       vom Grund abzuheben. 65 % bzw. 85 % sind die Mischungen, bei
       denen ALLE fuenf Schemen ueber 4,5:1 kommen. */
    --ddt-accent-text:#8f89d0;
    --ddt-accent-text:color-mix(in srgb, var(--ddt-accent) 65%, #fff);
    --ddt-done-text:#7aa843;
    --ddt-done-text:color-mix(in srgb, var(--ddt-done) 85%, #fff);
    /* Auf dunklem Grund verschwindet ein 22-%-Hauch - hier kraeftiger. */
    --ddt-accent-glow:rgba(125,116,224,.34);
    --ddt-accent-glow:color-mix(in srgb, var(--ddt-accent-text) 34%, transparent);
    --ddt-accent-strong:#7d74e0;
    --ddt-accent-strong:color-mix(in srgb, var(--ddt-accent) 72%, #fff);
}
/* Ohne eigene Wahl entscheidet das Betriebssystem. */
@media (prefers-color-scheme: dark) {
    .ddt[data-mode=auto], .ddt-stats[data-mode=auto] {
        background:var(--ddt-page); color:var(--ddt-text);
        padding:var(--ddt-s4); border-radius:var(--ddt-r-lg);
        /* Sagt dem Browser Bescheid: Bildlaufleisten, Datumswähler und
           die aufgeklappte Liste eines select rendert er selbst. */
        color-scheme:dark;
        --ddt-surface:#232733; --ddt-page:#1a1d25; --ddt-sunk:#1c1f28; --ddt-soft:#2b303c;
        --ddt-text:#e8eaf0; --ddt-text2:#c3c8d4; --ddt-muted:#a2aab9; --ddt-faint:#949cad;
        --ddt-border:#333846; --ddt-border2:#3d4250;
        --ddt-danger:#f0908f; --ddt-solid:#3d4456; --ddt-solid-hover:#4b5468;
        --ddt-ok-bg:#1e2a22; --ddt-ok-bg-hover:#24352a; --ddt-ok-text:#9fd67a;
        --ddt-warn-bg:#2e2a1c; --ddt-warn-border:#4d4429; --ddt-warn-text:#e3d2a0;
        --ddt-bad-bg:#2f2222; --ddt-bad-border:#4a3232;
        /* Auf dunklem Grund verschwindet ein zarter Schatten - hier
           traegt er tiefer. Beide dunklen Bloecke MUESSEN gleich
           bleiben (tests/test-css.php vergleicht sie Zeile fuer Zeile). */
        --ddt-shadow-color:rgba(0,0,0,.35);
        --ddt-shadow-color-2:rgba(0,0,0,.55);
        /* Im Dunkeln andersherum: beide Farben brauchen Weiss, um sich
           vom Grund abzuheben. 65 % bzw. 85 % sind die Mischungen, bei
           denen ALLE fuenf Schemen ueber 4,5:1 kommen. */
        --ddt-accent-text:#8f89d0;
        --ddt-accent-text:color-mix(in srgb, var(--ddt-accent) 65%, #fff);
        --ddt-done-text:#7aa843;
        --ddt-done-text:color-mix(in srgb, var(--ddt-done) 85%, #fff);
        /* Auf dunklem Grund verschwindet ein 22-%-Hauch - hier kraeftiger. */
        --ddt-accent-glow:rgba(125,116,224,.34);
        --ddt-accent-glow:color-mix(in srgb, var(--ddt-accent-text) 34%, transparent);
        --ddt-accent-strong:#7d74e0;
        --ddt-accent-strong:color-mix(in srgb, var(--ddt-accent) 72%, #fff);
    }
}

/* Formularfelder färbt sonst der Browser - und zwar weiß, auch
   mitten im dunklen Modus. Keines von ihnen bringt eine eigene
   Fläche mit, darum kann diese eine Regel sie alle einsammeln;
   im hellen Modus ist var(--ddt-surface) ohnehin dasselbe Weiß
   wie zuvor. */
.ddt input, .ddt select, .ddt textarea,
.ddt-stats input, .ddt-stats select, .ddt-stats textarea {
    background:var(--ddt-surface); color:var(--ddt-text); }

/* --- Schmale Bildschirme ---
   Defensiv gemeint: alles, was eine feste Breite hat oder breiter
   werden kann als sein Kasten, bekommt hier eine Grenze oder
   einen Bildlauf. Ein Layout sieht man nur im Browser - lieber
   eine Regel zu viel als eine Seite, die seitlich wegläuft. */

/* box-sizing ist hier keine Kosmetik: im dunklen Modus trägt der
   Rahmen ein Innenpolster, und ohne border-box würden aus den
   560px unversehens 592px. */
.ddt, .ddt-stats { box-sizing:border-box; max-width:560px; width:100%; }

/* Kein Diagramm ragt aus seinem Kasten. */
.ddt svg, .ddt-stats svg { max-width:100%; }

/* Diese beiden haben Zellen fester Breite und können damit
   breiter werden als der Bildschirm - sie scrollen dann seitlich,
   statt die ganze Seite zu schieben.

   Das Liniendiagramm steht bewusst NICHT hier: sein SVG skaliert
   ohnehin mit, und ein overflow würde die Werte kappen, die
   absichtlich über den Zeichenbereich hinausragen. */
.ddt-heat, .ddt-bars { max-width:100%; overflow-x:auto; }
.ddt-xh-chart { max-width:100%; }

/* Lange Übungs- und Routinenamen brechen um, statt die Zeile
   aufzuspannen. */
.ddt-sport-ex, .ddt-slice-label, .ddt-pr-list li { min-width:0; overflow-wrap:anywhere; }
.ddt h4, .ddt-stats h4 { font-size:var(--ddt-fs-md); text-transform:uppercase; letter-spacing:.05em;
    color:var(--ddt-muted); margin:var(--ddt-s5) 0 var(--ddt-s3); }

/* --- Das Icon-Set ---
   Die Vorlagen-Sammlung selbst darf nichts einnehmen und nichts zeigen.
   display:none waere falsch: ein so verstecktes <symbol> laesst sich in
   manchen Browsern nicht mehr referenzieren. Also aus dem Fluss nehmen
   und auf null setzen. */
.ddt-sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Ein Icon ist so gross wie die Zeile, in der es steht, und traegt deren
   Farbe. 1.15em statt 1em: die Zeichnungen sind auf 24 gebaut und wirken
   auf exakt Schriftgroesse eine Spur zu klein neben Text.
   vertical-align haelt es auf der Grundlinie statt darunter. */
.ddt-icon { display:inline-block; width:1.15em; height:1.15em;
    vertical-align:-.22em; flex:0 0 auto;
    /* Der Strich fuer ALLE Icons, einmal. Frueher stand dieser Satz an
       jedem einzelnen <symbol>. Diese fuenf Eigenschaften werden
       vererbt, und die Vererbung reicht beim <use> in den geklonten
       Inhalt hinein - dieselbe Mechanik, die currentColor im Sprite
       funktionieren laesst. */
    fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }

/* Die Knoepfe, in denen ein Icon ALLEIN steht, hatten ihre Groesse
   bisher ueber die Schrift. Jetzt zeichnet ein SVG - also zentrieren
   wir es und nehmen ihm die Zeilenhoehe weg, sonst sitzt es schief. */
.ddt-delete, .ddt-tile-del button, .ddt-welcome-close, .ddt-install-close,
.ddt-modal-close, .ddt-block-del button { display:inline-flex; align-items:center;
    justify-content:center; line-height:1; }

/* --- Karten ---
   Ein Inhaltsblock sieht ab v3.67.8 ueberall gleich aus: Flaeche,
   Haarlinie, r-md und ein Schatten der ersten Stufe. Vorher hatte jede
   Sorte ihre eigene Mischung - mal mit Rahmen, mal mit vertiefter
   Flaeche, mal ohne beides -, und nebeneinander wirkte das wie
   verschiedene Zettel auf einem Tisch statt wie eine Oberflaeche.

   Der Schatten ist mit Absicht kaum zu sehen. Er soll die Kante
   ablesbar machen, nicht die Karte anheben; alles darueber faengt an,
   nach Zettel auszusehen. Wer eine Karte HERAUSHEBEN will (Overlays,
   Toast), nimmt Stufe 2.

   Die Sammelregel steht bewusst FRUEH: einzelne Karten duerfen danach
   abweichen (die Kacheln der Statistik zum Beispiel bleiben
   vertieft), und spaeter im Stylesheet gewinnt die speziellere Regel. */
.ddt-card, .ddt-sport-tile, .ddt-nj-list li, .ddt-routine, .ddt-day-add,
.ddt-wh-item {
    background:var(--ddt-surface); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-md); box-shadow:var(--ddt-shadow-1); }

/* --- Die Kopfleiste ---
   Logo und Name, ganz oben, ueber allem anderen. Bewusst leise
   gehalten: sie soll wie die Leiste einer App wirken, nicht wie eine
   zweite Ueberschrift neben der der WordPress-Seite. Der Trennstrich
   darunter macht aus zwei Zeilen einen Kopf.

   Die Farbe kommt aus der Akzentfarbe des Nutzers - das Logo zeichnet
   mit currentColor und erbt sie damit, in Hell wie Dunkel. */
.ddt-appbar { display:flex; align-items:center; gap:var(--ddt-s2);
    margin:0 0 var(--ddt-s4); padding-bottom:var(--ddt-s3);
    border-bottom:1px solid var(--ddt-border); }
.ddt-appbar-mark { flex:0 0 auto; display:inline-flex; color:var(--ddt-accent-text); }
.ddt-logo { display:block; width:26px; height:26px; }
/* Der Name traegt die Marke, nicht die Seite - darum klein, fest und
   ohne die Umformungen, die manche Themes h2 aufzwingen. */
.ddt-appbar-name { margin:0; font-size:var(--ddt-fs-xl); font-weight:700;
    line-height:1.2; letter-spacing:-.01em; color:var(--ddt-text);
    text-transform:none; }

/* --- Eigene Ueberschrift ---
   Steht ueber den Reitern und traegt die Seite, wenn die
   WordPress-Ueberschrift geraeumt ist. */
.ddt-head { margin:0 0 var(--ddt-s4); }
.ddt-head-title { margin:0 0 var(--ddt-s1); font-size:26px; line-height:1.2; color:var(--ddt-text);
    text-transform:none; letter-spacing:normal; }
.ddt-head-sub { margin:0; font-size:var(--ddt-fs-lg); color:var(--ddt-muted); }

/* --- Erststart: die Begruessung ---
   Ein Kasten in gedaempfter Akzentfarbe, direkt ueber der Reiterleiste.
   Er steht ausserhalb von #ddt-body und ueberlebt darum jeden
   AJAX-Austausch - weggeklickt wird er im Skript (siehe ddt.js).
   Farben ausschliesslich aus den Variablen: color-mix legt die
   Akzentfarbe hauchduenn auf die Flaeche, damit der Kasten in jedem
   Farbschema UND in beiden Modi von selbst passt. */
.ddt-welcome { position:relative; display:flex; align-items:flex-start; gap:var(--ddt-s2);
    margin:0 0 var(--ddt-s4); padding:var(--ddt-s4) var(--ddt-s4); border-radius:var(--ddt-r-md);
    border:1px solid var(--ddt-border);
    border-left:3px solid var(--ddt-accent);
    background:var(--ddt-soft);
    background:color-mix(in srgb, var(--ddt-accent) 7%, var(--ddt-surface)); }
.ddt-welcome-body { flex:1 1 auto; min-width:0; }
.ddt-welcome-title { margin:0 0 var(--ddt-s2); font-size:var(--ddt-fs-xl); line-height:1.3;
    color:var(--ddt-text); }
.ddt-welcome-text { margin:0 0 var(--ddt-s2); font-size:var(--ddt-fs-md); line-height:1.5;
    color:var(--ddt-text2); }
.ddt-welcome-go { margin:2px 0 0; padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-accent); color:#fff; font-size:var(--ddt-fs-md); font-weight:600;
    cursor:pointer; }
.ddt-welcome-go:hover { background:var(--ddt-accent-strong); }
.ddt-welcome-x { flex:0 0 auto; margin:0; }
.ddt-welcome-close { border:none; background:none; color:var(--ddt-faint);
    font-size:20px; line-height:1; padding:var(--ddt-s1) var(--ddt-s2); cursor:pointer; }
.ddt-welcome-close:hover { color:var(--ddt-text); }
/* Die drei Ansichts-Knoepfe: dieselbe Optik wie der Sprachwaehler. */
.ddt-modes { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); margin:0 0 var(--ddt-s2); }
.ddt-modes form { margin:0; }
.ddt-mode-btn { padding:var(--ddt-s2) var(--ddt-s4); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text); font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-mode-btn:hover { border-color:var(--ddt-accent); }
.ddt-mode-btn.is-active { background:var(--ddt-accent); border-color:var(--ddt-accent);
    color:#fff; font-weight:600; }

.ddt-toggle-btn { padding:var(--ddt-s2) var(--ddt-s4); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text); font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-toggle-btn:hover { border-color:var(--ddt-accent); }
.ddt-toggle-btn.is-on { background:var(--ddt-accent); border-color:var(--ddt-accent); color:#fff; }

/* Die Reiterleiste: sechs Reiter passen nicht auf 360px - die Leiste
   scrollt deshalb seitlich, statt die Beschriftungen zu quetschen. Der
   Scrollbalken selbst bleibt unsichtbar, der angeschnittene naechste
   Reiter zeigt an, dass es weitergeht. sticky haelt die Navigation beim
   Scrollen erreichbar; die WordPress-Adminleiste (falls sichtbar) gibt
   ihre Hoehe als CSS-Variable mit, sonst gilt 0. */
.ddt-tabs { display:flex; gap:2px; border-bottom:1px solid var(--ddt-border); margin:0 0 var(--ddt-s4);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:30;
    background:var(--ddt-page); }
.ddt-tabs::-webkit-scrollbar { display:none; }
/* min-height 44px: die Hauptnavigation ist das meistgetippte Element -
   sie bekommt die volle Touch-Hoehe auf jedem Geraet. flex:none, damit
   kein Reiter gequetscht wird (die Leiste scrollt stattdessen). */
.ddt-tab { flex:none; min-height:44px; padding:var(--ddt-s3) var(--ddt-s4); border:none; background:none; cursor:pointer;
    color:var(--ddt-muted); font-size:var(--ddt-fs-lg); border-bottom:2px solid transparent; margin-bottom:-1px; }
/* Icon und Name in einer Zeile. Das Icon liegt eine Spur blasser als
   der Name - es soll den Reiter wiedererkennbar machen, nicht um
   Aufmerksamkeit mit ihm ringen. Im aktiven Reiter zieht es mit. */
.ddt-tab { display:inline-flex; align-items:center; gap:var(--ddt-s2); }
.ddt-tab .ddt-icon { width:17px; height:17px; vertical-align:0; opacity:.75; }
.ddt-tab.is-active .ddt-icon { opacity:1; color:var(--ddt-accent-text); }
.ddt-tab:hover { color:var(--ddt-text); }
.ddt-tab.is-active { color:var(--ddt-text); border-bottom-color:var(--ddt-accent); font-weight:600; }
.ddt-panel { display:none; }
.ddt-panel.is-active { display:block; }
/* --- Leerzustaende ---
   Ein Zeichen, ein Satz. Das Zeichen sitzt oben buendig mit der ersten
   Textzeile (nicht mittig), damit es bei zwei- und dreizeiligen Saetzen
   nicht in die Mitte des Absatzes rutscht. Es ist blasser als der Text:
   es soll den Blick auffangen, nicht die Aussage uebertoenen. */
.ddt-soon { display:flex; align-items:flex-start; gap:var(--ddt-s2);
    margin:var(--ddt-s2) 0; color:var(--ddt-faint); font-size:var(--ddt-fs-lg);
    line-height:1.45; }
.ddt-soon-icon { width:20px; height:20px; margin-top:1px; opacity:.65;
    vertical-align:0; }

.ddt-note { width:100%; box-sizing:border-box; padding:var(--ddt-s3) var(--ddt-s4); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-md); font-size:var(--ddt-fs-xl); font-family:inherit; line-height:1.5; resize:vertical; }
.ddt-note:focus { outline:none; border-color:var(--ddt-accent); }
.ddt-note-bar { display:flex; align-items:center; gap:var(--ddt-s3); margin-top:var(--ddt-s3); }
.ddt-note-bar button { padding:var(--ddt-s3) var(--ddt-s4); border:none; border-radius:var(--ddt-r-md); cursor:pointer;
    background:var(--ddt-solid); color:#fff; font-size:var(--ddt-fs-lg); }
.ddt-note-bar button:hover { background:var(--ddt-solid-hover); }
.ddt-note-status { font-size:var(--ddt-fs-md); color:var(--ddt-done-text); }

.ddt-bar-col[data-date] { cursor:pointer; }
.ddt-bar-col[data-date] .ddt-bar { cursor:pointer; }
.ddt-bar-col[data-date]:hover .ddt-bar { opacity:.72; }

.ddt-modal[hidden] { display:none; }
.ddt-modal { position:fixed; inset:0; z-index:99999; display:flex;
    align-items:center; justify-content:center; }
.ddt-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
/* border-box: die Breite steht schon auf calc(100% - 32px), und ohne
   sie kaemen zweimal 24px Polster obendrauf - der Kasten waere
   breiter als das Fenster, das ihn zentriert. */
.ddt-modal-box { box-sizing:border-box; position:relative; background:var(--ddt-surface);
    border-radius:var(--ddt-r-lg); padding:var(--ddt-s5) var(--ddt-s5);
    width:calc(100% - 32px); max-width:420px; max-height:80vh; overflow:auto;
    box-shadow:var(--ddt-shadow-2); }
/* --- Trainingsmodus ---
   Eigenes Overlay, damit Escape und Hintergrundklick eine
   laufende Session NICHT wegwerfen - beendet wird nur ueber die
   beiden Knoepfe unten. */
.ddt-train-name { margin:0 0 2px; font-size:18px; }
.ddt-train-goal { margin:0 0 var(--ddt-s3); font-size:var(--ddt-fs-md); color:var(--ddt-muted);
    font-variant-numeric:tabular-nums; }
.ddt-train-wbox { margin-bottom:var(--ddt-s3); }
.ddt-train-weight { width:90px; }
.ddt-train-weight:disabled { background:var(--ddt-soft); color:var(--ddt-muted); }
.ddt-train-list { list-style:none; margin:0 0 var(--ddt-s3); padding:0;
    font-variant-numeric:tabular-nums; }
.ddt-train-list li { display:flex; justify-content:space-between; padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); margin-bottom:var(--ddt-s1);
    font-size:var(--ddt-fs-lg); background:var(--ddt-surface); }
/* Ein Satz unter dem Ziel - kein Fehler, aber sichtbar sein darf er. */
.ddt-train-list li.is-under { color:var(--ddt-danger); border-color:var(--ddt-bad-border); }
.ddt-train-current { display:flex; align-items:flex-end; flex-wrap:wrap; gap:var(--ddt-s2);
    padding:var(--ddt-s3); border:1px solid var(--ddt-accent); border-radius:var(--ddt-r-md);
    margin-bottom:var(--ddt-s3); }
.ddt-train-current[hidden] { display:none; }
.ddt-train-counter { flex-basis:100%; font-size:var(--ddt-fs-sm); font-weight:600;
    color:var(--ddt-accent-text); }
.ddt-train-reps { width:80px; }
.ddt-train-ok { padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-accent); color:#fff; font-weight:600; cursor:pointer; }
.ddt-train-add { display:block; width:100%; padding:var(--ddt-s2); margin-bottom:var(--ddt-s3);
    border:1px dashed var(--ddt-border); border-radius:var(--ddt-r-md); background:none;
    color:var(--ddt-muted); font-size:var(--ddt-fs-lg); cursor:pointer; }
.ddt-train-add[hidden] { display:none; }
.ddt-train-add:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }

.ddt-train-rest { padding:var(--ddt-s3); border-radius:var(--ddt-r-md); background:var(--ddt-soft);
    margin-bottom:var(--ddt-s3); text-align:center; }
.ddt-train-rest[hidden] { display:none; }
.ddt-train-restlabel { display:block; font-size:var(--ddt-fs-xs); font-weight:600;
    text-transform:uppercase; letter-spacing:.04em; color:var(--ddt-muted); }
.ddt-train-clock { display:block; font-size:34px; font-weight:600; line-height:1.1;
    font-variant-numeric:tabular-nums; }
.ddt-train-restbtns { display:flex; justify-content:center; gap:var(--ddt-s2); margin-top:var(--ddt-s2); }
.ddt-train-restbtns button { padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-train-restbtns button:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-train-over { margin:var(--ddt-s2) 0 0; font-size:var(--ddt-fs-md); font-weight:600; color:var(--ddt-done-text); }
.ddt-train-over[hidden] { display:none; }

/* Das Angebot fuers naechste Mal. Gruen wie der Abschluss, weil es
   nur nach geschafftem Ziel auftaucht - und deutlich genug, dass
   man es nicht uebersieht. Nicht gewaehlt ist es ein Umriss:
   gedrueckt aussehen darf nur, was auch gedrueckt wurde. */
.ddt-train-up { margin-bottom:var(--ddt-s3); padding:var(--ddt-s3); border-radius:var(--ddt-r-md);
    background:var(--ddt-ok-bg); }
.ddt-train-up[hidden] { display:none; }
.ddt-train-raise { display:block; width:100%; padding:var(--ddt-s3);
    border:1px solid var(--ddt-done); border-radius:var(--ddt-r-sm); background:var(--ddt-surface);
    color:var(--ddt-done-text); font-size:var(--ddt-fs-lg); font-weight:600; cursor:pointer; }
.ddt-train-raise:hover { background:var(--ddt-ok-bg-hover); }
.ddt-train-raise.is-on { background:var(--ddt-done); color:#fff; }
.ddt-train-uphint { margin:var(--ddt-s2) 0 0; }

.ddt-train-foot { display:flex; justify-content:space-between; gap:var(--ddt-s2);
    border-top:1px solid var(--ddt-border); padding-top:var(--ddt-s3); }
.ddt-train-cancel { padding:var(--ddt-s2) var(--ddt-s4); border:none; background:none;
    color:var(--ddt-muted); font-size:var(--ddt-fs-lg); cursor:pointer; }
.ddt-train-cancel:hover { color:var(--ddt-danger); }
.ddt-train-finish { padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-done); color:#fff; font-weight:600; cursor:pointer; }

/* Uebernehmen ist die Hauptaktion des Fensters - dieselbe Farbe
   wie sonst der Abschluss. */
.ddt-train-keep { padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-done); color:#fff; font-weight:600; cursor:pointer; }
.ddt-train-pick[hidden], .ddt-train-run[hidden] { display:none; }
.ddt-train-pick h3 { margin:0 0 var(--ddt-s1); font-size:var(--ddt-fs-xl); }

/* Schritt 1 des Trainingsmodus: die Routinen zur Auswahl. */
.ddt-pick-list { list-style:none; margin:var(--ddt-s3) 0 0; padding:0;
    display:flex; flex-direction:column; gap:var(--ddt-s2); }
.ddt-pick-btn { display:flex; align-items:center; justify-content:space-between;
    gap:var(--ddt-s3); width:100%; padding:var(--ddt-s3) var(--ddt-s4); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-md); background:var(--ddt-surface); color:var(--ddt-text); font-size:var(--ddt-fs-lg);
    text-align:left; cursor:pointer; }
.ddt-pick-btn:hover:not([disabled]) { border-color:var(--ddt-accent); }
/* Eine Routine ohne Uebungen laesst sich nicht trainieren - sie
   steht trotzdem da, sonst sucht man sie vergeblich. */
.ddt-pick-btn[disabled] { opacity:.5; cursor:not-allowed; }

/* --- Aktionsleiste ueber den Routinen (Kraft) --- */
.ddt-str-bar { display:flex; flex-wrap:wrap; align-items:flex-start;
    gap:var(--ddt-s2); margin:0 0 var(--ddt-s3); }
.ddt-bar-btn { padding:var(--ddt-s2) var(--ddt-s4); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-md); font-weight:600;
    white-space:nowrap; cursor:pointer; list-style:none; }
.ddt-bar-btn:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
/* Die Hauptaktion eines Bildschirms traegt als einzige die
   Akzentfarbe. Rein optisch: WAS der Knopf tut, sagen die
   Klassen daneben (.ddt-bar-train, .ddt-session-end). */
.ddt-bar-accent { border-color:var(--ddt-accent); background:var(--ddt-accent);
    color:#fff; }
.ddt-bar-accent:hover { border-color:var(--ddt-accent-strong); background:var(--ddt-accent-strong); color:#fff; }
.ddt-bar-accent[disabled] { opacity:.45; cursor:not-allowed; }
.ddt-bar-accent[disabled]:hover { border-color:var(--ddt-accent);
    background:var(--ddt-accent); }
/* Das Anlegen klappt unter der Leiste auf. Der Marker des
   <details> stoert dabei nur - der Knopf ist Beschriftung genug. */
.ddt-str-new > summary::-webkit-details-marker { display:none; }
.ddt-str-new[open] { flex:1 1 100%; }
.ddt-str-new .ddt-rt-new { margin-top:var(--ddt-s2); }

/* --- Uebung hinzufuegen, direkt in der Routine --- */
.ddt-addex { margin:var(--ddt-s2) var(--ddt-s3) var(--ddt-s3); }
.ddt-addex > summary { display:inline-block; font-size:var(--ddt-fs-md); color:var(--ddt-muted);
    cursor:pointer; list-style:none; }
.ddt-addex > summary::-webkit-details-marker { display:none; }
.ddt-addex > summary:hover { color:var(--ddt-accent-text); }
.ddt-addex-form { margin-top:var(--ddt-s2); padding-top:var(--ddt-s2); border-top:1px dashed var(--ddt-border); }
/* Ausserhalb des Verwaltungsblocks greifen dessen Feldregeln nicht
   mehr - hier noch einmal, damit die Maske gleich aussieht. */
.ddt-addex-form input[type=text] { flex:1; min-width:110px; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface);
    font-size:var(--ddt-fs-lg); color:var(--ddt-text); }
.ddt-addex-form input[type=number] { width:74px; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface);
    font-size:var(--ddt-fs-md); color:var(--ddt-text); }
.ddt-addex-form input:focus { outline:none; border-color:var(--ddt-accent);
    box-shadow:0 0 0 3px var(--ddt-accent-glow); }
.ddt-addex-form button[type=submit] { background:var(--ddt-surface); color:var(--ddt-text);
    padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-md);
    white-space:nowrap; cursor:pointer; }
.ddt-addex-form button[type=submit]:hover { border-color:var(--ddt-accent);
    color:var(--ddt-accent-text); }

/* --- Trainings-Screen --- */
.ddt-training-head { display:flex; align-items:flex-start; justify-content:space-between;
    gap:var(--ddt-s3); margin-bottom:var(--ddt-s3); }
.ddt-training-title h4 { margin:0; }
/* Fortschritt der Session: klein unter dem Routinennamen. */
.ddt-train-progress { margin:2px 0 0; font-size:var(--ddt-fs-sm); font-weight:600; color:var(--ddt-faint); }
.ddt-tex-list { list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:var(--ddt-s2); }
.ddt-tex { display:flex; align-items:center; gap:var(--ddt-s3); width:100%;
    padding:var(--ddt-s3) var(--ddt-s4); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md);
    background:var(--ddt-surface); color:var(--ddt-text); font-size:var(--ddt-fs-lg); text-align:left;
    cursor:pointer; }
.ddt-tex:hover { border-color:var(--ddt-accent); }
/* Erledigt heisst hier nicht abgeschlossen: die Uebung laesst sich
   erneut oeffnen und fortsetzen. Darum ein Haken, keine Sperre. */
.ddt-tex.is-done { border-color:var(--ddt-done); background:var(--ddt-ok-bg); }
.ddt-tex-mark { flex:0 0 18px; font-size:var(--ddt-fs-xl); font-weight:700;
    color:var(--ddt-done-text); }
.ddt-tex-name { flex:1; font-weight:600; }
.ddt-tex-info { font-size:var(--ddt-fs-sm); color:var(--ddt-faint); white-space:nowrap;
    font-variant-numeric:tabular-nums; }
.ddt-tex.is-done .ddt-tex-info { color:var(--ddt-done-text); }
.ddt-training-foot { margin-top:var(--ddt-s4); padding-top:var(--ddt-s3);
    border-top:1px solid var(--ddt-border); }
.ddt-session-cancel { padding:var(--ddt-s2) var(--ddt-s4); border:none; background:none;
    color:var(--ddt-muted); font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-session-cancel:hover { color:var(--ddt-danger); }

.ddt-modal-close { position:absolute; top:8px; right:12px; border:none; background:none;
    font-size:26px; line-height:1; color:var(--ddt-faint); cursor:pointer; }
.ddt-modal-close:hover { color:var(--ddt-text); }
.ddt-detail-date { margin:0 var(--ddt-s5) var(--ddt-s3) 0; font-size:18px; }
.ddt-detail-stats { display:flex; flex-wrap:wrap; gap:var(--ddt-s1) var(--ddt-s4); font-size:var(--ddt-fs-lg);
    color:var(--ddt-muted); margin:0 0 var(--ddt-s1); }
.ddt-detail-tasks { list-style:none; margin:0; padding:0; }
.ddt-detail-tasks li { display:flex; gap:var(--ddt-s2); padding:var(--ddt-s2) 0; border-bottom:1px solid var(--ddt-border);
    font-size:var(--ddt-fs-lg); }
.ddt-detail-mark { color:var(--ddt-done-text); }
.ddt-detail-tasks li.is-done span:last-child { text-decoration:line-through; color:var(--ddt-faint); }
.ddt-detail-vol { margin:0 0 var(--ddt-s2); font-size:var(--ddt-fs-md); color:var(--ddt-muted); font-weight:600;
    font-variant-numeric:tabular-nums; }
.ddt-detail-note { white-space:pre-wrap; font-size:var(--ddt-fs-lg); color:var(--ddt-text); background:var(--ddt-sunk);
    border-radius:var(--ddt-r-sm); padding:var(--ddt-s3) var(--ddt-s3); }
.ddt-detail-sched, .ddt-detail-metrics { list-style:none; margin:0; padding:0; }
.ddt-detail-sched li, .ddt-detail-metrics li { display:flex; gap:var(--ddt-s2); padding:var(--ddt-s2) 0;
    border-bottom:1px solid var(--ddt-border); font-size:var(--ddt-fs-lg); }
.ddt-detail-metrics li { justify-content:space-between; }
.ddt-detail-time { color:var(--ddt-accent-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ddt-detail-mval { color:var(--ddt-muted); }
.ddt-detail-sport { list-style:none; margin:0; padding:0; }
.ddt-detail-sport li { display:flex; gap:var(--ddt-s2); align-items:baseline; padding:var(--ddt-s2) 0;
    border-bottom:1px solid var(--ddt-border); font-size:var(--ddt-fs-lg); }

/* --- Sport-Reiter: Kacheln und Bildschirm-Navigation ---
   Farbwelt bewusst weiss + kuehles Grau + ein Blau (var(--ddt-accent)) als
   einziger Akzent. Die warmen Grautoene von frueher (#dcdcda,
   #fafaf8) sind raus - die haben neben dem Blau schmutzig gewirkt. */
.ddt-nav-form { margin:0; }
.ddt-tiles { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--ddt-s3); margin:var(--ddt-s3) 0 var(--ddt-s1); }
.ddt-tiles .ddt-nav-form { display:contents; }
.ddt-tiles-small { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
/* Feste Hoehe statt min-height: so sind ALLE Kacheln exakt gleich
   gross - auch die mit langem Namen oder langem Hinweis. Damit dabei
   nichts ueberlaeuft, sind Beschriftung und Hinweis auf je zwei
   Zeilen begrenzt und brechen notfalls mitten im Wort um; was dann
   noch zu lang ist, endet mit "…". */
/* box-sizing und font-family MUESSEN hier stehen: die Kachel ist mal
   ein <button> (angelegte Sportart), mal ein <summary> (neue Sportart
   anlegen). Buttons bringen border-box und eine eigene Schrift vom
   Browser mit, <summary> nicht - ohne diese zwei Zeilen waere die
   Anlegen-Kachel um Innenabstand und Rahmen hoeher, also 122 statt
   96 Pixel. */
.ddt-sport-tile { box-sizing:border-box; font-family:inherit; margin:0;
    width:100%; height:96px; display:flex; flex-direction:column;
    justify-content:center; gap:3px; padding:var(--ddt-s3) var(--ddt-s4); cursor:pointer; text-align:left;
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md); background:var(--ddt-surface); color:var(--ddt-text);
    overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.ddt-sport-tile:hover { border-color:var(--ddt-accent); box-shadow:0 1px 8px var(--ddt-accent-glow); }
.ddt-tile-label, .ddt-tile-hint { display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.ddt-tile-label { font-size:var(--ddt-fs-xl); font-weight:600; line-height:1.25; }
.ddt-tile-hint { font-size:var(--ddt-fs-xs); color:var(--ddt-muted); line-height:1.3; }
/* Zurueck-Knopf: Pfeil und Wort in einer Zeile. Der Pfeil kommt seit
   v3.67.6 als Icon aus dem Sprite, nicht mehr als Schriftzeichen im
   uebersetzten Text - er wird dadurch in jeder Sprache gleich gezeichnet.
   Die feste Icon-Groesse ist Absicht: der Knopf setzt fs-md, sein Label
   aber fs-xl, und ein an der Knopfschrift haengendes Icon saehe zu klein
   neben dem Wort aus. */
.ddt-sport-back { display:inline-flex; align-items:center; gap:var(--ddt-s2);
    background:none; border:none; padding:var(--ddt-s1) 0; margin-bottom:2px;
    color:var(--ddt-muted); font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-sport-back .ddt-icon { width:18px; height:18px; vertical-align:0; }
.ddt-sport-back:hover { color:var(--ddt-accent-text); }
.ddt-hint { margin:var(--ddt-s2) 0 0; font-size:var(--ddt-fs-sm); color:var(--ddt-muted); }
.ddt-primary { padding:var(--ddt-s3) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm); background:var(--ddt-accent);
    color:#fff; font-size:var(--ddt-fs-lg); font-weight:600; cursor:pointer; }
.ddt-primary:hover { background:var(--ddt-accent-strong); }

/* Kachel "Neue Sportart anlegen": ein <details>. Zugeklappt sieht es
   aus wie jede andere Kachel, aufgeklappt spannt es ueber die ganze
   Reihe und zeigt das Formular darunter. Die Hoehe kommt aus
   .ddt-sport-tile und ist ueberall dieselbe. */
.ddt-new-tile { min-width:0; margin:0; }
.ddt-new-tile > summary { list-style:none; }
.ddt-new-tile > summary::-webkit-details-marker { display:none; }
.ddt-new-tile .ddt-sport-tile { border-style:dashed; color:var(--ddt-accent-text); }
.ddt-new-tile[open] { grid-column:1 / -1; }
.ddt-new-tile[open] .ddt-sport-tile { border-style:solid; border-color:var(--ddt-accent);
    margin-bottom:var(--ddt-s3); }

/* Neue Ausdauer-Sportart anlegen */
.ddt-new-cardio { display:flex; flex-direction:column; gap:var(--ddt-s2); padding:var(--ddt-s4);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md); background:var(--ddt-surface); }
.ddt-new-cardio label { display:flex; align-items:center; gap:var(--ddt-s3); }
.ddt-new-cardio label > span { flex:0 0 120px; font-size:var(--ddt-fs-md); color:var(--ddt-text2); }
.ddt-new-cardio input[type=text] { flex:1; min-width:0; padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface); font-size:var(--ddt-fs-lg); color:var(--ddt-text); }
.ddt-new-cardio input[type=text]:focus { outline:none; border-color:var(--ddt-accent);
    box-shadow:0 0 0 3px var(--ddt-accent-glow); }
.ddt-new-cardio .ddt-primary { align-self:flex-start; }

/* Workout eintragen */
.ddt-workout { display:flex; flex-direction:column; gap:var(--ddt-s3); }
.ddt-workout-row { display:flex; align-items:center; gap:var(--ddt-s3); }
.ddt-workout-label { flex:0 0 120px; font-size:var(--ddt-fs-lg); color:var(--ddt-text2); }
.ddt-workout-note { align-items:flex-start; }
.ddt-workout textarea { flex:1; min-width:0; padding:var(--ddt-s3) var(--ddt-s3); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); font-size:var(--ddt-fs-lg); font-family:inherit;
    color:var(--ddt-text); resize:vertical; }
.ddt-workout textarea:focus { outline:none; border-color:var(--ddt-accent);
    box-shadow:0 0 0 3px var(--ddt-accent-glow); }
.ddt-workout .ddt-primary { align-self:flex-start; margin-top:2px; }

/* Eingabeleiste: Zahl links, Einheiten-Knopf rechts - optisch ein Feld.
   Heisst bewusst NICHT .ddt-bar: so heissen die Balken in den
   Statistik-Charts, deren Gruen sonst hier landet. */
.ddt-inputbar { flex:1; min-width:0; display:flex; align-items:stretch;
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface); overflow:visible; }
.ddt-inputbar:focus-within { border-color:var(--ddt-accent); box-shadow:0 0 0 3px var(--ddt-accent-glow); }
.ddt-inputbar input[type=number] { flex:1; min-width:0; padding:var(--ddt-s3) var(--ddt-s3); border:none;
    background:none; color:var(--ddt-text); font-size:var(--ddt-fs-xl); font-variant-numeric:tabular-nums;
    border-radius:var(--ddt-r-sm) 0 0 var(--ddt-r-sm); }
.ddt-inputbar input[type=number]:focus { outline:none; }

.ddt-unitpick { position:relative; display:flex; }
.ddt-unit-toggle { display:flex; align-items:center; gap:var(--ddt-s1); padding:0 var(--ddt-s3);
    border:none; border-left:1px solid var(--ddt-border); background:var(--ddt-surface); cursor:pointer;
    color:var(--ddt-text2); font-size:var(--ddt-fs-md); border-radius:0 var(--ddt-r-sm) var(--ddt-r-sm) 0; white-space:nowrap; }
.ddt-unit-toggle:hover { color:var(--ddt-accent-text); }
.ddt-caret { font-size:var(--ddt-fs-xs); color:var(--ddt-faint); }
/* Das Popup haengt rechts an seinem Knopf und ist 236px breit. Auf einem
   sehr schmalen Telefon ragte es damit links aus dem Container heraus -
   docs/AUDIT-UX.md, P3-13.

   box-sizing ist hier KEIN Beiwerk: ohne border-box begrenzt max-width
   nur den Inhalt, und die 26px aus Polster und Rahmen kaemen oben drauf.
   Die Regel saehe richtig aus und taete fast nichts. */
.ddt-unit-pop { position:absolute; top:calc(100% + 6px); right:0; z-index:50;
    box-sizing:border-box; width:236px; max-width:calc(100vw - 32px);
    padding:var(--ddt-s3) var(--ddt-s3) var(--ddt-s3); background:var(--ddt-surface); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-md); box-shadow:var(--ddt-shadow-2); }
.ddt-unit-pop[hidden] { display:none; }
.ddt-unit-group { display:block; margin:var(--ddt-s2) 0 var(--ddt-s1); font-size:var(--ddt-fs-xs); text-transform:uppercase;
    letter-spacing:.06em; color:var(--ddt-faint); }
.ddt-unit-group:first-child { margin-top:0; }
.ddt-unit-opts { display:flex; flex-wrap:wrap; gap:var(--ddt-s1); }
.ddt-unit-opt { padding:var(--ddt-s1) var(--ddt-s3); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-lg);
    background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-sm); cursor:pointer; }
.ddt-unit-opt:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-unit-opt.is-active { background:var(--ddt-accent); border-color:var(--ddt-accent); color:#fff; }
.ddt-unit-custom { width:100%; padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); font-size:var(--ddt-fs-md); color:var(--ddt-text); }
.ddt-unit-custom:focus { outline:none; border-color:var(--ddt-accent); }

/* Einheiten-Knopf allein (beim Anlegen einer Sportart) */
.ddt-new-cardio-unit { display:flex; align-items:center; gap:var(--ddt-s3); }
.ddt-new-cardio-unit > span { flex:0 0 120px; font-size:var(--ddt-fs-md); color:var(--ddt-text2); }
.ddt-new-cardio-unit .ddt-unit-toggle { border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm);
    padding:var(--ddt-s2) var(--ddt-s3); font-size:var(--ddt-fs-lg); }

/* x-Knopf auf einer Sportart-Kachel */
.ddt-tile-wrap { position:relative; display:flex; }
.ddt-tile-wrap .ddt-nav-form { flex:1; display:flex; }
.ddt-tile-del { position:absolute; top:4px; right:4px; margin:0; opacity:0;
    transition:opacity .15s; }
.ddt-tile-wrap:hover .ddt-tile-del, .ddt-tile-del:focus-within { opacity:1; }
.ddt-tile-del button { width:24px; height:24px; padding:0; border:none; border-radius:var(--ddt-r-sm);
    background:none; color:var(--ddt-danger); font-size:var(--ddt-fs-xl); line-height:1; cursor:pointer; }
.ddt-tile-del button:hover { background:var(--ddt-bad-bg); }

/* --- Statistik der Workouts --- */
.ddt-range { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); margin:var(--ddt-s3) 0 var(--ddt-s3); }
.ddt-range .ddt-nav-form { display:flex; }
.ddt-range-btn { padding:var(--ddt-s2) var(--ddt-s4); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-pill);
    background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-md); cursor:pointer; white-space:nowrap; }
.ddt-range-btn:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-range-btn.is-active { background:var(--ddt-accent); border-color:var(--ddt-accent); color:#fff; }
.ddt-range-sum { margin:0 0 var(--ddt-s1); font-size:var(--ddt-fs-lg); color:var(--ddt-text); font-weight:600;
    font-variant-numeric:tabular-nums; }
/* Die Konsistenz-Zahl steht unter der Summenzeile, leiser als
   sie: sie ergaenzt das Bild, sie ist nicht die Hauptaussage. */
.ddt-range-freq { margin:0 0 var(--ddt-s3); font-size:var(--ddt-fs-sm); color:var(--ddt-muted);
    font-variant-numeric:tabular-nums; }
/* Ueberschrift ueber Kraft- und Ausdauer-Tabelle. */
.ddt-st-head { margin:var(--ddt-s4) 0 var(--ddt-s2); font-size:var(--ddt-fs-sm); font-weight:600;
    text-transform:uppercase; letter-spacing:.06em; color:var(--ddt-muted); }

/* --- Haeufigkeit: kleiner als die Dashboard-Karten, die Zahlen
       sind hier Beiwerk zur Uebersicht, nicht ihr Kern. --- */
.ddt-freq { margin-bottom:var(--ddt-s4); grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); }
.ddt-freq .ddt-card { padding:var(--ddt-s3) var(--ddt-s3); }
.ddt-freq .ddt-card .l { font-size:var(--ddt-fs-xs); }
.ddt-freq .ddt-card .v { font-size:19px; font-variant-numeric:tabular-nums; }

/* --- Trainingskalender ---
   Zwei Ausrichtungen aus derselben Zellenliste: normal stehen die
   Wochen als Zeilen (sieben Spalten), ab 90 Tagen kippt das Raster
   und laeuft als Spalten nach rechts weg. */
.ddt-cal { margin:0 0 var(--ddt-s4); }
/* Die Spaltenzahl kommt vom Renderer: sieben Wochentage, oder
   genau die Tage eines kurzen Zeitraums. */
.ddt-cal-head { display:grid; grid-template-columns:repeat(var(--ddt-cal-cols,7),1fr); gap:var(--ddt-s1);
    margin-bottom:var(--ddt-s1); font-size:var(--ddt-fs-xs); color:var(--ddt-faint); text-align:center; }
.ddt-cal-grid { display:grid; grid-template-columns:repeat(var(--ddt-cal-cols,7),1fr); gap:var(--ddt-s1); }
.ddt-cal-cell { display:flex; align-items:center; justify-content:center;
    aspect-ratio:1; min-height:26px; border-radius:var(--ddt-r-sm); background:var(--ddt-sunk);
    font-size:var(--ddt-fs-xs); color:var(--ddt-faint); font-variant-numeric:tabular-nums; }
.ddt-cal-cell[data-date] { cursor:pointer; }
.ddt-cal-cell[data-date]:hover { outline:2px solid var(--ddt-accent); outline-offset:1px; }
.ddt-cal-cell.is-out { background:none; }
/* Trainiert: die volle Akzentfarbe. Keine Zwischenstufen - der
   Kalender beantwortet nur, OB an dem Tag trainiert wurde. */
.ddt-cal-cell.is-on { background:var(--ddt-accent); color:#fff; font-weight:600; }
.ddt-cal.is-compact .ddt-cal-grid { grid-auto-flow:column; grid-template-columns:none;
    grid-template-rows:repeat(7,1fr); gap:3px; overflow-x:auto; padding-bottom:var(--ddt-s1); }
.ddt-cal.is-compact .ddt-cal-cell { width:13px; height:13px; min-height:0;
    aspect-ratio:auto; border-radius:var(--ddt-r-xs); }
.ddt-cal-legend { display:flex; align-items:center; gap:var(--ddt-s1); margin:var(--ddt-s2) 0 0;
    font-size:var(--ddt-fs-xs); color:var(--ddt-faint); }
.ddt-cal-key { width:12px; height:12px; border-radius:var(--ddt-r-xs); display:inline-block;
    background:var(--ddt-sunk); }
.ddt-cal-key.is-on { background:var(--ddt-accent); }
/* Etwas Luft zwischen den beiden Paaren aus Kaestchen und Wort. */
.ddt-cal-legend .ddt-cal-key + span { margin-right:var(--ddt-s2); }

/* --- Kreisdiagramm + Legende ---
   Nebeneinander, solange Platz ist; darunter, wenn nicht. */
.ddt-split { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ddt-s4); margin:var(--ddt-s2) 0 var(--ddt-s3); }
.ddt-donut-wrap { flex:0 0 auto; }
.ddt-donut { width:150px; height:150px; display:block; }
.ddt-donut-seg { fill:none; stroke-width:22; }
.ddt-donut-mid { font-size:19px; font-weight:600; fill:var(--ddt-text); }
.ddt-donut-sub { font-size:var(--ddt-fs-xs); fill:var(--ddt-faint); }
.ddt-slices { flex:1 1 200px; display:flex; flex-direction:column; gap:var(--ddt-s1); min-width:0; }
.ddt-slices .ddt-nav-form { margin:0; }
.ddt-slice { display:flex; align-items:center; gap:var(--ddt-s2); width:100%; padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface); cursor:pointer;
    font-size:var(--ddt-fs-md); color:var(--ddt-text); text-align:left; }
.ddt-slice:hover { border-color:var(--ddt-accent); }
.ddt-slice-dot { width:11px; height:11px; border-radius:var(--ddt-r-xs); flex:0 0 auto; }
/* Der Name darf schrumpfen und umbrechen, die Zahlen nicht. */
.ddt-slice-label { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.ddt-slice-val { flex:0 0 auto; color:var(--ddt-muted); font-variant-numeric:tabular-nums; }
.ddt-slice-pct { flex:0 0 auto; min-width:42px; text-align:right; font-weight:600;
    font-variant-numeric:tabular-nums; }

/* --- Bestleistungen, einklappbar ---
       Im Stil der uebrigen Aufklapp-Bereiche (.ddt-sport-config),
       nur eine Spur kraeftiger: das hier ist eine Ueberschrift,
       kein Verwaltungslink. */
.ddt-pr-details { margin:var(--ddt-s4) 0 0; }
.ddt-pr-details > summary { cursor:pointer; display:flex; align-items:center; gap:var(--ddt-s2);
    font-size:var(--ddt-fs-xl); font-weight:600; color:var(--ddt-text); padding:var(--ddt-s1) 0; }
.ddt-pr-details > summary:hover { color:var(--ddt-accent-text); }
.ddt-pr-details > summary::-webkit-details-marker { display:none; }
/* Ein eigenes Dreieck, damit es links steht und mitdreht - der
   Browser-Marker sitzt je nach Engine woanders. */
.ddt-pr-details > summary::before { content:"▸"; display:inline-block;
    color:var(--ddt-faint); font-size:var(--ddt-fs-sm); transition:transform .12s ease; }
.ddt-pr-details[open] > summary::before { transform:rotate(90deg); }
/* Die Anzahl zugeklappt sichtbar: sonst weiss man nicht, ob sich
   das Aufklappen lohnt. */
.ddt-pr-count { font-size:var(--ddt-fs-xs); font-weight:600; color:var(--ddt-muted);
    background:var(--ddt-sunk); border-radius:var(--ddt-r-pill); padding:1px var(--ddt-s2);
    font-variant-numeric:tabular-nums; }
.ddt-pr-details .ddt-pr-list { margin-top:var(--ddt-s2); }

/* --- Bestwerte einer Ausdauer-Sportart --- */
.ddt-bests { margin-bottom:var(--ddt-s3); }
.ddt-best-days { list-style:none; margin:0 0 var(--ddt-s2); padding:0; }
.ddt-best-days li { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--ddt-s3);
    padding:var(--ddt-s2) var(--ddt-s3); border-bottom:1px solid var(--ddt-border); cursor:pointer; }
.ddt-best-days li:hover { background:var(--ddt-sunk); }
.ddt-best-lbl { font-size:var(--ddt-fs-sm); color:var(--ddt-muted); flex:0 0 auto; }
.ddt-best-val { font-size:var(--ddt-fs-md); font-weight:600; font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere; }
.ddt-best-day { margin-left:auto; font-size:var(--ddt-fs-sm); color:var(--ddt-faint);
    font-variant-numeric:tabular-nums; }
.ddt-st-head:first-of-type { margin-top:0; }

/* --- Tagesansicht --- */
/* Die Leiste bleibt beim Blaettern gleich breit: der
   Vorwaerts-Knopf wird an "heute" ausgeschaltet, nicht versteckt. */
.ddt-day-nav { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ddt-s2);
    margin:0 0 var(--ddt-s4); padding-bottom:var(--ddt-s3); border-bottom:1px solid var(--ddt-border); }
.ddt-day-nav .ddt-nav-form { margin:0; }
.ddt-day-step { width:34px; height:34px; padding:0; border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-xl);
    line-height:1; cursor:pointer; }
.ddt-day-step:hover:not([disabled]) { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-day-step[disabled] { opacity:.35; cursor:not-allowed; }
.ddt-day-pick { display:flex; gap:var(--ddt-s2); margin:0; }
.ddt-day-pick input[type=date] { padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-md); color:var(--ddt-text); background:var(--ddt-surface); }
.ddt-day-pick button { padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-day-pick button:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-day-today { margin-left:auto; padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-accent);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-accent-text); font-size:var(--ddt-fs-md);
    font-weight:600; cursor:pointer; }
.ddt-day-today:hover { background:var(--ddt-accent); color:#fff; }
/* Der Hinweis, dass man gerade nicht an heute arbeitet. Er ist
   auffaellig genug, um nicht uebersehen zu werden, und ruhig
   genug, um nicht nach Fehler auszusehen. */
.ddt-day-hint { margin:0 0 var(--ddt-s3); padding:var(--ddt-s2) var(--ddt-s3); border-radius:var(--ddt-r-sm);
    background:var(--ddt-warn-bg); border:1px solid var(--ddt-warn-border); color:var(--ddt-warn-text); font-size:var(--ddt-fs-sm); }
.ddt-day-sub { margin:var(--ddt-s3) 0 var(--ddt-s1); font-size:var(--ddt-fs-sm); font-weight:600;
    text-transform:uppercase; letter-spacing:.05em; color:var(--ddt-faint); }
.ddt-day-list { margin-bottom:var(--ddt-s2); }
.ddt-day-sched { margin-bottom:var(--ddt-s2); }
.ddt-day-sched li { display:flex; align-items:baseline; gap:var(--ddt-s2); }
.ddt-day-schedadd { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); align-items:center;
    margin-bottom:var(--ddt-s2); }
.ddt-day-schedadd input[type=time], .ddt-day-schedadd input[type=number] { width:92px; }
.ddt-day-schedadd input { padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    font-size:var(--ddt-fs-md); }
.ddt-day-schedadd input[type=text] { flex:1 1 140px; }
.ddt-day-schedadd button { padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-day-schedadd button:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
/* Umbenennen einer Aufgabe: der Stift steht still neben dem Text
   und macht sich erst beim Darueberfahren bemerkbar. */
.ddt-task-edit { order:2; }
.ddt-task-edit > summary { cursor:pointer; padding:2px var(--ddt-s2); color:var(--ddt-faint);
    font-size:var(--ddt-fs-md); list-style:none; }
.ddt-task-edit > summary::-webkit-details-marker { display:none; }
.ddt-task-edit > summary:hover { color:var(--ddt-accent-text); }
.ddt-task-edit[open] > summary { color:var(--ddt-accent-text); }
.ddt-task-editform { display:flex; flex-basis:100%; gap:var(--ddt-s2); margin-top:var(--ddt-s2); }
.ddt-task-editform input[type=text] { flex:1; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-md); }
.ddt-task-editform button { padding:var(--ddt-s2) var(--ddt-s3); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-accent); color:#fff; font-size:var(--ddt-fs-sm); font-weight:600;
    cursor:pointer; }
/* Das aufgeklappte Feld braucht die volle Breite der Zeile. */
.ddt-list li { flex-wrap:wrap; }
.ddt-task-edit[open] { flex-basis:100%; display:flex; flex-wrap:wrap;
    align-items:center; }

/* Das Berichtigen eines Sport-Eintrags: aufgeklappt sichtbar,
   zugeklappt fast unsichtbar - man braucht es selten. */
.ddt-se-edit { flex-basis:100%; margin-top:var(--ddt-s1); }
.ddt-se-edit > summary { cursor:pointer; font-size:var(--ddt-fs-xs); color:var(--ddt-faint);
    list-style:none; }
.ddt-se-edit > summary::-webkit-details-marker { display:none; }
.ddt-se-edit > summary:hover { color:var(--ddt-accent-text); }
.ddt-se-edit[open] > summary { color:var(--ddt-accent-text); }
.ddt-se-form { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); align-items:flex-end;
    margin:var(--ddt-s2) 0 0; padding:var(--ddt-s3); border-radius:var(--ddt-r-sm); background:var(--ddt-soft); }
.ddt-se-form input[type=number], .ddt-se-form input[type=text] { width:88px;
    padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-md); }
.ddt-se-form input[type=text] { width:150px; }
.ddt-se-form button { padding:var(--ddt-s2) var(--ddt-s3); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-accent); color:#fff; font-size:var(--ddt-fs-md); font-weight:600;
    cursor:pointer; }
.ddt-se-edit .ddt-hint { margin:var(--ddt-s2) 0 0; }

.ddt-day-add { margin:var(--ddt-s2) 0; border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md);
    padding:var(--ddt-s2) var(--ddt-s3); background:var(--ddt-surface); }
.ddt-day-add > summary { cursor:pointer; font-size:var(--ddt-fs-md); font-weight:600; color:var(--ddt-text2); }
.ddt-day-add > summary:hover { color:var(--ddt-accent-text); }
.ddt-day-logform { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); align-items:flex-end;
    margin-top:var(--ddt-s3); }
.ddt-day-logform select { padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    font-size:var(--ddt-fs-md); flex:1 1 180px; }
.ddt-day-logform button { padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-accent); color:#fff; font-size:var(--ddt-fs-md); font-weight:600;
    cursor:pointer; }

/* Der Sprung aus dem Heatmap-Modal in den Reiter "Tag". */
.ddt-detail-open { margin:0 0 var(--ddt-s3); padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-accent);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-accent-text); font-size:var(--ddt-fs-md);
    font-weight:600; cursor:pointer; }
.ddt-detail-open:hover { background:var(--ddt-accent); color:#fff; }

/* --- Workout-Historie --- */
.ddt-wh-search { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); align-items:center;
    margin:0 0 var(--ddt-s3); }
.ddt-wh-search input[type=search] { flex:1 1 180px; padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-md); }
.ddt-wh-search button { padding:var(--ddt-s2) var(--ddt-s4); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-md);
    cursor:pointer; }
.ddt-wh-search button:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-wh-search .ddt-nav-form { margin:0; }
.ddt-wh-clear { background:none; border:none; padding:var(--ddt-s2) var(--ddt-s1); color:var(--ddt-muted);
    font-size:var(--ddt-fs-sm); cursor:pointer; }
.ddt-wh-clear:hover { color:var(--ddt-danger); }
.ddt-wh-count { margin:0 0 var(--ddt-s2); font-size:var(--ddt-fs-sm); color:var(--ddt-muted); }
.ddt-wh-list { list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:var(--ddt-s2); }
.ddt-wh-list .ddt-nav-form { margin:0; }
/* Die Karte eines Workouts: Datum klein darueber, Name gross,
   Kennzahlen leise darunter - in dieser Reihenfolge sucht man. */
.ddt-wh-item { display:flex; flex-direction:column; gap:3px; width:100%;
    padding:var(--ddt-s3) var(--ddt-s3); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md);
    background:var(--ddt-surface); text-align:left; cursor:pointer; }
.ddt-wh-item:hover { border-color:var(--ddt-accent); }
.ddt-wh-date { font-size:var(--ddt-fs-xs); color:var(--ddt-faint); }
.ddt-wh-title { font-size:var(--ddt-fs-lg); font-weight:600; color:var(--ddt-text); }
.ddt-wh-sum { font-size:var(--ddt-fs-sm); color:var(--ddt-muted); font-variant-numeric:tabular-nums; }

/* --- Datenexport --- */
.ddt-export { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); }
.ddt-export form { margin:0; }
.ddt-export-hint { margin:var(--ddt-s2) 0 0; font-size:var(--ddt-fs-xs); color:var(--ddt-faint); max-width:560px; }

/* --- Import ---
   Die Wahl zwischen Zusammenführen und Ersetzen steht als zwei Kästchen
   untereinander, nicht als zwei nackte Radioknöpfe: die Erklärung gehört
   in die Auswahl hinein, nicht darunter. Der gefährliche der beiden
   bekommt einen roten Rand, sobald er gewählt ist - vorher wäre das
   Panikmache, hinterher käme es zu spät. */
.ddt-import { display:flex; flex-direction:column; align-items:flex-start; gap:var(--ddt-s3);
    margin:var(--ddt-s3) 0 0; max-width:560px; }
.ddt-import input[type=file] { max-width:100%; font-size:var(--ddt-fs-md); color:var(--ddt-text2); }

.ddt-import-modes { display:flex; flex-direction:column; gap:var(--ddt-s2); width:100%; }
.ddt-import-mode { display:flex; align-items:flex-start; gap:var(--ddt-s2); padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); background:var(--ddt-surface);
    cursor:pointer; }
.ddt-import-mode:hover { border-color:var(--ddt-accent); }
.ddt-import-mode input { margin-top:2px; flex:none; }
.ddt-import-mode strong { display:block; font-size:var(--ddt-fs-md); color:var(--ddt-text); }
.ddt-import-mode em { display:block; margin-top:2px; font-style:normal; font-size:var(--ddt-fs-xs);
    color:var(--ddt-muted); }
/* :has() fehlt in aelteren Browsern - dann bleibt es beim normalen Rand.
   Die Warnung selbst steht im Text und ist nicht auf Farbe angewiesen. */
.ddt-import-mode--danger:has(input:checked) { border-color:var(--ddt-danger);
    background:var(--ddt-bad-bg); }
.ddt-import-mode--danger:has(input:checked) strong { color:var(--ddt-danger); }

/* 560px ist die Breite der ganzen App - mit Polster obendrauf waere
   die Meldung breiter als alles andere. */
.ddt-import-msg { box-sizing:border-box; margin:var(--ddt-s2) 0 0;
    padding:var(--ddt-s2) var(--ddt-s3); border-radius:var(--ddt-r-sm);
    font-size:var(--ddt-fs-sm); max-width:560px; }
.ddt-import-msg.is-ok  { background:var(--ddt-ok-bg); color:var(--ddt-ok-text);
    border:1px solid var(--ddt-ok-bg-hover); }
.ddt-import-msg.is-bad { background:var(--ddt-bad-bg); color:var(--ddt-danger);
    border:1px solid var(--ddt-bad-border); }

/* --- Notiz-Journal --- */
.ddt-nj { margin-top:var(--ddt-s6); }
.ddt-nj-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ddt-s2); }
.ddt-nj-search { display:flex; gap:var(--ddt-s2); flex:1 1 260px; margin:0; }
.ddt-nj-search input[type=search] { flex:1; min-width:0; padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-lg); }
.ddt-nj-search input[type=search]:focus { outline:none; border-color:var(--ddt-accent); }
.ddt-nj-clear { margin:0; }
.ddt-nj-list { list-style:none; margin:var(--ddt-s4) 0 0; padding:0;
    display:flex; flex-direction:column; gap:var(--ddt-s2); }
.ddt-nj-list li { padding:var(--ddt-s3) var(--ddt-s3); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md);
    background:var(--ddt-surface); cursor:pointer; }
.ddt-nj-list li:hover { border-color:var(--ddt-accent); }
.ddt-nj-date { display:block; font-size:var(--ddt-fs-xs); color:var(--ddt-faint); margin-bottom:3px; }
/* pre-line haelt die Zeilenumbrueche, die der Nutzer getippt hat -
   esc_html() macht aus ihnen kein <br>, und das soll es auch
   nicht: so kommt garantiert kein HTML durch. */
.ddt-nj-text { display:block; font-size:var(--ddt-fs-md); color:var(--ddt-text);
    white-space:pre-line; overflow-wrap:anywhere; }

/* --- Ein Workout im Detail --- */
.ddt-ws-head { margin:var(--ddt-s3) 0 2px; font-size:var(--ddt-fs-xl); }
.ddt-ws-sub { margin:0 0 2px; font-size:var(--ddt-fs-sm); color:var(--ddt-muted); }
.ddt-ws-sum { margin:0 0 var(--ddt-s3); font-size:var(--ddt-fs-sm); color:var(--ddt-muted);
    font-variant-numeric:tabular-nums; }
.ddt-ws-list { list-style:none; margin:0; padding:0; }
.ddt-ws-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--ddt-s2) var(--ddt-s3);
    padding:var(--ddt-s2) 0; border-bottom:1px solid var(--ddt-border); }
.ddt-ws-list li:last-child { border-bottom:none; }
.ddt-ws-ex { flex:1 1 140px; font-weight:600; font-size:var(--ddt-fs-md); }
.ddt-ws-sets { font-size:var(--ddt-fs-md); color:var(--ddt-text2); font-variant-numeric:tabular-nums; }
.ddt-ws-meta { margin-left:auto; font-size:var(--ddt-fs-sm); color:var(--ddt-muted); white-space:nowrap;
    font-variant-numeric:tabular-nums; }
.ddt-ws-vol { margin-left:var(--ddt-s2); color:var(--ddt-faint); }

/* --- Der Uebungsname als Knopf zum Verlauf ---
   Er soll wie Text aussehen und sich wie ein Link verhalten: die
   Zeile darf nicht springen, nur weil sie jetzt anklickbar ist.
   Deshalb kein Rahmen, kein Hintergrund, keine Polsterung. */
.ddt-ex-link { padding:0; border:none; background:none; cursor:pointer;
    font:inherit; color:inherit; text-align:left; }
.ddt-ex-link:hover { color:var(--ddt-accent-text); text-decoration:underline; }
.ddt-ws-ex .ddt-nav-form, .ddt-ex-name .ddt-nav-form { display:inline; margin:0; }
.ddt-ws-ex { display:flex; align-items:baseline; gap:var(--ddt-s2); }

/* --- Verlauf einer Uebung --- */
.ddt-xh-head { margin:var(--ddt-s3) 0 2px; font-size:var(--ddt-fs-xl); }
.ddt-xh-sub { margin:0 0 var(--ddt-s3); font-size:var(--ddt-fs-sm); color:var(--ddt-muted); }
/* --- Uebungs-Verlauf als Liniendiagramm ---
       Das SVG bringt sein eigenes Koordinatensystem mit (640x230)
       und skaliert ueber die Breite - deshalb bleibt es auf jedem
       Bildschirm scharf und braucht keine Mindestbreite. */
.ddt-xh-chart { margin:var(--ddt-s2) 0 0; }
.ddt-line { display:block; width:100%; height:auto; overflow:visible; }
.ddt-line-grid { stroke:var(--ddt-border); stroke-width:1; }
.ddt-line-ylab { font-size:var(--ddt-fs-xs); fill:var(--ddt-faint); }
.ddt-line-xlab { font-size:var(--ddt-fs-xs); fill:var(--ddt-faint); }
/* Der Wert am Punkt steht mitten im Diagramm und kreuzt dabei zwangs-
   laeufig mal die Linie, mal eine Gitterlinie. paint-order:stroke legt
   erst den Rand, dann die Fuellung - die Zahl bekommt damit einen
   schmalen Hof in der Seitenfarbe und bleibt lesbar, egal was hinter
   ihr liegt. Ohne den Hof half nur, die Zahlen wegzulassen. */
.ddt-line-val  { font-size:var(--ddt-fs-xs); font-weight:600; fill:var(--ddt-text);
    paint-order:stroke; stroke:var(--ddt-page); stroke-width:3px;
    stroke-linejoin:round; }
/* Die beiden Linien unterscheiden sich in Farbe UND Strichart:
   Farbe allein traegt nicht, wenn jemand sie schlecht auseinander
   halten kann - und die gestrichelte Linie ist die geschaetzte. */
.ddt-line-top { fill:none; stroke:var(--ddt-accent); stroke-width:2.5;
    stroke-linejoin:round; stroke-linecap:round; }
.ddt-line-rm  { fill:none; stroke:var(--ddt-faint); stroke-width:2;
    stroke-dasharray:5 4; stroke-linejoin:round; stroke-linecap:round; }
.ddt-dot-top { fill:var(--ddt-accent); }
.ddt-dot-rm  { fill:var(--ddt-faint); }
/* Unsichtbare Trefferflaeche: ein 3,5-Pixel-Punkt ist mit dem
   Finger nicht zu treffen, eine ganze Spalte schon. */
.ddt-line-hit { fill:transparent; cursor:pointer; }
.ddt-line-hit:hover { fill:var(--ddt-accent); fill-opacity:.07; }
.ddt-legend2 .k.top { background:var(--ddt-accent); }
.ddt-legend2 .k.rm  { background:var(--ddt-faint); }
/* Die Legendenmarke der Schaetzung als Strich statt als Klotz -
   dieselbe Sprache wie die gestrichelte Linie im Diagramm. */
.ddt-legend2 .k.rm { height:0; border-top:2px dashed var(--ddt-faint); background:none;
    border-radius:0; }

.ddt-xh-list { list-style:none; margin:var(--ddt-s4) 0 0; padding:0; }
.ddt-xh-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--ddt-s2) var(--ddt-s3);
    padding:var(--ddt-s2) 0; border-bottom:1px solid var(--ddt-border); cursor:pointer; }
.ddt-xh-list li:last-child { border-bottom:none; }
.ddt-xh-list li:hover { background:var(--ddt-surface); }
.ddt-xh-date { flex:1 1 110px; font-weight:600; font-size:var(--ddt-fs-md); }
.ddt-xh-sets { font-size:var(--ddt-fs-md); color:var(--ddt-text2); font-variant-numeric:tabular-nums; }
.ddt-xh-meta { margin-left:auto; font-size:var(--ddt-fs-sm); color:var(--ddt-muted); white-space:nowrap;
    font-variant-numeric:tabular-nums; }

/* Die Tabelle darf schmaler werden als ihr Inhalt - dann scrollt
   sie in sich, statt die ganze Seite breit zu ziehen. */
.ddt-table-scroll { overflow-x:auto; }
.ddt-stats-table { width:100%; border-collapse:collapse; font-size:var(--ddt-fs-md);
    font-variant-numeric:tabular-nums; }
.ddt-stats-table th { text-align:left; padding:0 var(--ddt-s3) var(--ddt-s2) 0; font-size:var(--ddt-fs-xs);
    font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ddt-faint);
    white-space:nowrap; border-bottom:1px solid var(--ddt-border); }
.ddt-stats-table td { padding:var(--ddt-s3) var(--ddt-s3) var(--ddt-s3) 0; border-bottom:1px solid var(--ddt-border);
    vertical-align:top; white-space:nowrap; color:var(--ddt-text); }
.ddt-stats-table tr:last-child td { border-bottom:none; }
.ddt-st-name { font-weight:600; white-space:normal; min-width:110px; }
.ddt-st-sub, .ddt-st-extra { display:block; margin-top:2px; font-size:var(--ddt-fs-xs);
    font-weight:400; color:var(--ddt-muted); }
.ddt-st-extra { white-space:normal; }
.ddt-st-none { color:var(--ddt-faint); }
.ddt-trend { font-weight:600; }
.ddt-trend.is-up { color:var(--ddt-accent-text); }
.ddt-trend.is-down { color:var(--ddt-danger); }

@media (max-width:520px) {
    /* Der umgebrochene Donut steht mittig statt am linken Rand
       zu kleben, und die Legende darunter nimmt die volle
       Breite. */
    .ddt-split { justify-content:center; }
    .ddt-donut-wrap { margin:0 auto; }
    .ddt-slices { flex-basis:100%; }

    /* Zwei Kennzahlen nebeneinander bleiben lesbar, drei nicht
       mehr - die Karten dürfen darum schmaler werden. */
    .ddt-freq { grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:var(--ddt-s2); }
    .ddt-cards { gap:var(--ddt-s2); }

    /* Die Statistik-Tabelle scrollt bereits; etwas kleiner
       gesetzt muss sie seltener dazu greifen. */
    .ddt-stats-table { font-size:var(--ddt-fs-sm); }
    .ddt-stats-table th, .ddt-stats-table td { padding-right:var(--ddt-s2); }

    /* Der Kalender wird sonst zum Streifen aus Strichen. */
    .ddt-cal-cell { min-height:22px; font-size:var(--ddt-fs-xs); }

    .ddt-tiles { grid-template-columns:1fr; }
    .ddt-new-cardio label, .ddt-new-cardio-unit,
    .ddt-workout-row { flex-direction:column; align-items:stretch; gap:var(--ddt-s1); }
    .ddt-new-cardio label > span, .ddt-new-cardio-unit > span,
    .ddt-workout-label { flex:none; }
    .ddt-new-cardio-unit .ddt-unitpick { align-self:flex-start; }
    .ddt-tile-del { opacity:1; }
}

/* --- Breakpoint-Staffel ---
   Die 520px-Regeln oben sind der Feinschliff fuer sehr schmale Schirme.
   Diese Stufe hier greift frueher: alles, was aus zwei Spalten besteht,
   stapelt rechtzeitig, bevor es sich gegenseitig zerquetscht. */
@media (max-width:600px) {
    /* Zeitplan: die 190px-Seitenspalte neben dem Zeitstrahl ergibt unter
       600px zwei zu schmale Haelften - erst die Liste und die Formulare
       in voller Breite, darunter der Strahl in voller Breite. */
    .ddt-sched-side { flex:1 1 100%; }

    /* Das Modal darf auf dem Handy mehr vom Bildschirm nutzen. */
    /* Ohne border-box waeren es 100% - 20px BREITE plus 32px Polster,
       also zwoelf Pixel ueber den Rand hinaus. */
    .ddt-modal-box { box-sizing:border-box; padding:var(--ddt-s4);
        width:calc(100% - 20px); max-height:86vh; }

    /* Die eigene Ueberschrift eine Stufe kleiner - 26px Schrift frisst
       auf 360px eine halbe Zeile mehr als noetig. */
    .ddt-head-title { font-size:22px; }
    /* Kompakt auf dem Handy: das Logo eine Nummer kleiner, der Kopf
       naeher am Inhalt - der Platz gehoert dort den Reitern. */
    .ddt-appbar { gap:var(--ddt-s2); margin-bottom:var(--ddt-s3); padding-bottom:var(--ddt-s2); }
    .ddt-logo { width:22px; height:22px; }
    .ddt-appbar-name { font-size:var(--ddt-fs-lg); }
}

/* Sehr schmale Geraete: Innenabstaende eine Spur kompakter, damit der
   Inhalt die Breite bekommt, nicht das Polster. */
@media (max-width:380px) {
    /* .ddt-list li stand hier bis v3.75.0 - P4 am Dateiende setzt das
       Polster jetzt schon ab 600px enger, diese Zeile waere folgenlos. */
    .ddt-card { padding:var(--ddt-s3); }
    .ddt-card .v { font-size:21px; }
    .ddt-modal-box { padding:var(--ddt-s4) var(--ddt-s3); }
}

/* --- Tastatur sichtbar ---
   :focus-visible feuert nur bei Tastatur-Fokus, nie beim Klick - der
   Ring stoert also niemanden mit der Maus, zeigt aber jedem mit Tab,
   wo er steht. Eingabefelder behalten zusaetzlich ihren Akzent-Rand. */
.ddt :focus-visible, .ddt-stats :focus-visible {
    outline:2px solid var(--ddt-accent); outline-offset:2px; }

/* --- Bewegung reduzieren ---
   Wer im System "Bewegung reduzieren" waehlt, bekommt keine Uebergaenge
   und Animationen - der Lade-Kreisel steht dann still, die Sperre am
   Knopf und das Ausgrauen bleiben als Rueckmeldung. */
/* --- Bewegung ---
   Alles hier steht unter "no-preference": es laeuft NUR, wenn das
   System nicht ausdruecklich weniger Bewegung verlangt hat. Weiter
   unten steht zusaetzlich der harte Riegel fuer den reduce-Fall - der
   eine Block ist die Absicht, der andere die Versicherung.

   Was hier NICHT steht, und warum: eine Animation beim Abhaken einer
   Aufgabe. Nach jeder Aktion tauscht das Skript #ddt-body komplett aus,
   und eine Eintritts-Animation liefe dann bei JEDEM Haken der Liste neu
   los - ein Zucken ueber den ganzen Bildschirm statt einer Rueckmeldung
   an einer Stelle. Der Haken im Trainingsmodus darf sie haben: dort
   setzt das Skript ihn von Hand, ohne Austausch. */
@media (prefers-reduced-motion: no-preference) {

    /* Reiterwechsel: der neue Inhalt kommt eine Idee von unten herauf.
       Kurz genug, dass es sich nach Reaktion anfuehlt und nicht nach
       Warten. */
    .ddt-panel.is-active { animation:ddt-panel-in .18s ease-out; }
    @keyframes ddt-panel-in {
        from { opacity:0; transform:translateY(4px); }
        to   { opacity:1; transform:none; }
    }

    /* Der Haken im Trainingsmodus, wenn ein Satz sitzt. */
    .ddt-check-pop { animation:ddt-pop .22s ease-out; }
    @keyframes ddt-pop {
        0%   { transform:scale(.4); opacity:0; }
        60%  { transform:scale(1.12); opacity:1; }
        100% { transform:scale(1); }
    }

    /* Unter dem Finger nachgeben. Kein Keyframe, nur ein Zustand -
       das ueberlebt jeden DOM-Austausch, weil es keinen Anfang hat,
       der neu abgespielt werden koennte. */
    .ddt input[type=checkbox] { transition:transform .12s ease-out; }
    .ddt input[type=checkbox]:active { transform:scale(.88); }
    .ddt-primary, .ddt-add button, .ddt-sport-tile, .ddt-wh-item {
        transition:transform .12s ease-out, border-color .15s, box-shadow .15s; }
    .ddt-primary:active, .ddt-add button:active { transform:scale(.97); }

    /* Laeuft eine Anfrage laenger als eine Viertelsekunde, wird der
       Bereich eine Spur blasser. Die Verzoegerung IM Uebergang ist der
       ganze Trick: bei einer schnellen Antwort passiert sichtbar nichts,
       und nur wer wirklich wartet, sieht, dass gewartet wird. */
    .ddt[aria-busy=true] #ddt-body { opacity:.55; transition:opacity .15s .25s; }
    #ddt-body { transition:opacity .15s; }
}

@media (prefers-reduced-motion: reduce) {
    .ddt *, .ddt-stats * { transition:none !important; animation:none !important; }
}

/* --- Rueckmeldung bei AJAX-Aktionen ---
   Der ausloesende Knopf ist waehrend der Anfrage gesperrt und traegt
   einen kleinen Kreisel; so fuehlt sich ein Klick auch bei langsamem
   Netz "angekommen" an. Fehler meldet ein Toast am unteren Rand -
   er haengt IM Container, damit die CSS-Variablen gelten. */
button.is-loading { opacity:.65; cursor:progress; }
button.is-loading::after { content:""; display:inline-block; width:11px; height:11px;
    margin-left:var(--ddt-s2); vertical-align:-1px; border-radius:50%;
    border:2px solid currentColor; border-right-color:transparent;
    animation:ddt-spin .7s linear infinite; }
@keyframes ddt-spin { to { transform:rotate(360deg); } }

.ddt-toast { position:fixed; left:50%; bottom:18px; transform:translate(-50%, 8px);
    z-index:100001; max-width:calc(100vw - 32px); box-sizing:border-box;
    background:var(--ddt-solid); color:#fff; padding:var(--ddt-s3) var(--ddt-s4); border-radius:var(--ddt-r-md);
    font-size:var(--ddt-fs-md); box-shadow:var(--ddt-shadow-2);
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.ddt-toast.is-show { opacity:1; transform:translate(-50%, 0); }
.ddt-toast.is-bad { background:var(--ddt-danger); }

/* --- "Als App installieren" ---
   Ein leiser Balken am unteren Rand, einmalig und wegklickbar. Er haengt
   IM Container, damit die Farbvariablen gelten. */
/* Ein- und Ausblenden statt Springen: die Klasse is-show setzt das
   Skript einen Frame nach dem Anhaengen (siehe assets/ddt.js). */
.ddt-install { position:fixed; left:50%; bottom:14px;
    z-index:100000; display:flex; align-items:center; gap:var(--ddt-s3);
    width:max-content; max-width:calc(100vw - 24px); box-sizing:border-box;
    padding:var(--ddt-s3) var(--ddt-s3) var(--ddt-s3) var(--ddt-s4); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-md); background:var(--ddt-surface); color:var(--ddt-text);
    box-shadow:var(--ddt-shadow-2);
    /* Ein- und Ausblenden statt Springen. is-show setzt das Skript
       einen Frame nach dem Anhaengen; beim Schliessen nimmt es die
       Klasse weg und raeumt den Balken danach weg (assets/ddt.js). */
    opacity:0; transform:translate(-50%, 10px);
    transition:opacity .22s ease-out, transform .22s ease-out; }
.ddt-install.is-show { opacity:1; transform:translate(-50%, 0); }
.ddt-install-txt { font-size:var(--ddt-fs-md); }
.ddt-install-go { padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-accent); color:#fff; font-size:var(--ddt-fs-md); font-weight:600;
    cursor:pointer; white-space:nowrap; }
.ddt-install-go:hover { background:var(--ddt-accent-strong); }
.ddt-install-close { border:none; background:none; color:var(--ddt-faint);
    font-size:20px; line-height:1; padding:var(--ddt-s2) var(--ddt-s2); cursor:pointer; }
.ddt-install-close:hover { color:var(--ddt-text); }

/* --- Touch-Ziele ---
   Apple und Google empfehlen mindestens 44px Trefferflaeche. Die meisten
   Knoepfe des Plugins liegen bei 28-34px - am Schreibtisch mit der Maus
   voellig in Ordnung, mit dem Daumen nicht. Dieser Block greift nur auf
   Geraeten, deren HAUPT-Zeiger grob ist (Handy, Tablet); die
   Desktop-Optik bleibt unveraendert.

   Bei den kleinen x- und Stift-Knoepfen waechst die POLSTERUNG, nicht
   das Zeichen: die Trefferflaeche wird gross, die Optik bleibt leise. */
@media (pointer:coarse) {
    /* Alle "normalen" Knoepfe und Felder auf volle Hoehe. */
    .ddt-mode-btn, .ddt-toggle-btn, .ddt-lang-btn, .ddt-theme-btn,
    .ddt-range-btn, .ddt-day-pick button, .ddt-day-pick input[type=date],
    .ddt-day-today, .ddt-bar-btn, .ddt-ex-done, .ddt-step-up, .ddt-primary,
    .ddt-train-ok, .ddt-train-restbtns button, .ddt-unit-toggle, .ddt-slice,
    .ddt-wh-search button, .ddt-nj-search button, .ddt-nj-search input[type=search],
    .ddt-sched-add button, .ddt-sched-window button, .ddt-sched-window select,
    .ddt-metric-number button, .ddt-metric-save, .ddt-metric-add button,
    .ddt-metric-add select, .ddt-metric-add input[type=text],
    .ddt-day-schedadd button, .ddt-add button, .ddt-note-bar button,
    .ddt-export button, .ddt-import button, .ddt-demo button, .ddt-detail-open,
    .ddt-day-logform button, .ddt-day-logform select, .ddt-se-form button,
    .ddt-task-editform button, .ddt-addex-form button[type=submit],
    .ddt-sport-config button[type=submit]:not(.ddt-metric-del),
    .ddt-ex-manage .ddt-ex-edit button[type=submit],
    .ddt-train-finish, .ddt-train-keep, .ddt-train-cancel, .ddt-session-cancel,
    .ddt-train-add, .ddt-pick-btn, .ddt-wh-item { min-height:44px; }

    /* Die 1-10-Skalen (Zufriedenheit, Metriken): hoeher und etwas
       breiter - sie brechen dank flex-wrap sauber in zwei Reihen um. */
    .ddt-rating-btn, .ddt-mbtn { min-width:38px; height:44px; }

    /* Quadratische Schritt-Knoepfe. */
    .ddt-day-step, .ddt-step-down { width:44px; height:44px; }

    .ddt-unit-opt { min-height:38px; padding:var(--ddt-s2) var(--ddt-s4); }

    /* Aufgaben: Checkbox und die leisen Werkzeuge daneben. */
    .ddt-toggle input[type=checkbox] { width:22px; height:22px; }
    .ddt-toggle label { min-height:36px; }
    .ddt-delete { padding:var(--ddt-s3) var(--ddt-s2); }
    .ddt-task-edit > summary { padding:var(--ddt-s3); }
    .ddt-drag { padding:var(--ddt-s2) var(--ddt-s1); }

    /* x-Knoepfe: grosse Polsterung, gleiches Zeichen. */
    .ddt-metric-del { padding:var(--ddt-s3) var(--ddt-s3); }
    .ddt-sport-del button { padding:var(--ddt-s3); }
    .ddt-pr-reset button { padding:var(--ddt-s3) var(--ddt-s2); }
    .ddt-tile-del button { width:36px; height:36px; }
    .ddt-block-del button { padding:var(--ddt-s2); }
    .ddt-modal-close { padding:var(--ddt-s2) var(--ddt-s4); top:2px; right:2px; }

    /* Zurueck im Sport-Reiter und die Aufklapp-Zeilen. */
    .ddt-sport-back { padding:var(--ddt-s3) var(--ddt-s2) var(--ddt-s3) 0; }
    .ddt-wh-clear { padding:var(--ddt-s3) var(--ddt-s2); }
    .ddt-mt > summary, .ddt-se-edit > summary, .ddt-addex > summary,
    .ddt-ex-manage > summary,
    .ddt-sport-config > summary, .ddt-metric-config summary,
    .ddt-day-add > summary { padding:var(--ddt-s3) 0; }
}

.ddt-sport-list { list-style:none; margin:0 0 var(--ddt-s2); padding:0; }
.ddt-sport-list li { display:flex; align-items:center; gap:var(--ddt-s3); padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md); margin-bottom:var(--ddt-s2); background:var(--ddt-surface); }
.ddt-sport-type { flex-shrink:0; font-size:var(--ddt-fs-xs); text-transform:uppercase; letter-spacing:.04em;
    color:#fff; background:var(--ddt-accent); border-radius:var(--ddt-r-sm); padding:2px var(--ddt-s2); }
.ddt-sport-ex { flex:1; font-size:var(--ddt-fs-lg); }
.ddt-sport-meta { color:var(--ddt-muted); font-size:var(--ddt-fs-md); font-variant-numeric:tabular-nums; }
.ddt-sport-del { margin:0; }
.ddt-sport-del button { background:none; border:none; color:var(--ddt-danger); cursor:pointer;
    font-size:var(--ddt-fs-xl); line-height:1; padding:2px var(--ddt-s1); opacity:.6; }
.ddt-sport-del button:hover { opacity:1; }
.ddt-sport-routine { font-style:normal; font-size:var(--ddt-fs-xs); color:var(--ddt-accent-text); font-weight:600;
    margin-right:var(--ddt-s2); }

/* Bestleistungen: gleiche Kartenoptik wie die Liste darunter,
   damit der Statistik-Reiter nicht in Stile zerfaellt. */
.ddt-pr-list { list-style:none; margin:0 0 var(--ddt-s2); padding:0; }
.ddt-pr-list li { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ddt-s3);
    padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md);
    margin-bottom:var(--ddt-s2); background:var(--ddt-surface); }
.ddt-pr-1rm { color:var(--ddt-faint); font-size:var(--ddt-fs-sm); font-variant-numeric:tabular-nums;
    white-space:nowrap; }

/* --- Training: Kategorie aufklappen, Uebungen abarbeiten --- */
.ddt-routine { border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md); margin-bottom:var(--ddt-s2);
    background:var(--ddt-surface); }
.ddt-routine > summary { display:flex; align-items:center; justify-content:space-between;
    gap:var(--ddt-s3); padding:var(--ddt-s3) var(--ddt-s3); cursor:pointer; font-size:var(--ddt-fs-lg); font-weight:600; }
.ddt-routine-count { font-size:var(--ddt-fs-sm); font-weight:400; color:var(--ddt-faint); }
.ddt-ex { padding:var(--ddt-s3) var(--ddt-s3); border-top:1px solid var(--ddt-border); }
.ddt-ex-head { display:flex; align-items:baseline; justify-content:space-between;
    gap:var(--ddt-s3); margin-bottom:var(--ddt-s2); }
.ddt-ex-name { font-size:var(--ddt-fs-lg); font-weight:600; }
/* Kein nowrap mehr: seit der 1RM-Schaetzung dahinter steht, wuerde
   die Zeile auf schmalen Bildschirmen sonst herausragen. */
.ddt-ex-plan { font-size:var(--ddt-fs-sm); color:var(--ddt-muted); font-variant-numeric:tabular-nums;
    text-align:right; }
.ddt-ex-1rm { color:var(--ddt-faint); margin-left:var(--ddt-s2); white-space:nowrap; }
/* Erfolgsmeldung der Auto-Progression - deshalb die Erledigt-Farbe. */
.ddt-ex-auto { margin:0 0 var(--ddt-s2); font-size:var(--ddt-fs-sm); color:var(--ddt-done-text); font-weight:600; }
.ddt-ex-pr { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ddt-s2);
             margin:0 0 var(--ddt-s2); font-size:var(--ddt-fs-sm); color:var(--ddt-muted);
             font-variant-numeric:tabular-nums; }
.ddt-pr-day { color:var(--ddt-faint); font-size:var(--ddt-fs-sm); white-space:nowrap; }
/* Nur in der Bestleistungs-Liste ans rechte Ende - in der
   Uebungszeile gehoert dieser Platz dem x-Knopf. Zwei auto-Raender
   in einer Flex-Zeile wuerden den freien Raum unter sich
   aufteilen und das Datum in die Mitte schieben. */
.ddt-pr-list .ddt-pr-day { margin-left:auto; }
/* Zuruecksetzen ist die Ausnahme, nicht die Einladung: derselbe
   zurueckhaltende x-Knopf wie beim Loeschen eines Log-Eintrags. */
.ddt-pr-reset { margin:0 0 0 auto; }
.ddt-pr-reset button { background:none; border:none; color:var(--ddt-danger); cursor:pointer;
    font-size:var(--ddt-fs-lg); line-height:1; padding:0 2px; opacity:.5; }
.ddt-pr-reset button:hover { opacity:1; }
/* Der Rekord-Marker soll auffallen, ohne die ruhige Zeile zu
   sprengen - darum klein, rund und in der Erledigt-Farbe. */
.ddt-pr-new { display:inline-block; margin-left:var(--ddt-s2); padding:1px var(--ddt-s2);
              border-radius:var(--ddt-r-pill); background:var(--ddt-done); color:#fff;
              font-size:var(--ddt-fs-xs); font-weight:600; white-space:nowrap; }
/* Beschriftete Eingabefelder: Text darueber, Einheit daneben.
   Die Beschriftung bricht NICHT um - lieber schiebt das ganze
   Feld in die naechste Zeile, als dass "Ziel: Wiederholungen"
   zweizeilig die Reihe verzerrt. */
.ddt-exf { display:flex; flex-direction:column; gap:2px; }
.ddt-exf-label { font-size:var(--ddt-fs-xs); font-weight:600; color:var(--ddt-muted); white-space:nowrap; }
.ddt-exf-in { display:flex; align-items:center; gap:var(--ddt-s1); }
.ddt-exf-unit { font-size:var(--ddt-fs-xs); color:var(--ddt-faint); white-space:nowrap; }

.ddt-ex-log { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--ddt-s2); margin:0 0 var(--ddt-s2); }
.ddt-ex-log input[type=number] { width:66px; padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-text); font-size:var(--ddt-fs-md); }
.ddt-ex-log input[type=number]:focus { outline:none; border-color:var(--ddt-accent);
    box-shadow:0 0 0 3px var(--ddt-accent-glow); }
.ddt-ex-done { padding:var(--ddt-s2) var(--ddt-s4); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface);
    color:var(--ddt-text2); cursor:pointer; font-size:var(--ddt-fs-md); }
.ddt-ex-done:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-ex-step { display:flex; gap:var(--ddt-s2); }
.ddt-ex-step form { margin:0; }

/* Uebung bearbeiten/loeschen direkt an der Uebung (v3.104.0).
   Zugeklappt ist es eine graue Zeile - der Kraft-Bildschirm gehoert
   dem Eintragen. Aufgeklappt sitzt es auf einer eigenen Flaeche,
   damit klar ist: hier aendert man den PLAN, nicht den heutigen Satz. */
.ddt-ex-manage { margin-top:var(--ddt-s2); }
.ddt-ex-manage > summary { cursor:pointer; font-size:var(--ddt-fs-xs); color:var(--ddt-faint);
    list-style:none; }
.ddt-ex-manage > summary::-webkit-details-marker { display:none; }
.ddt-ex-manage > summary:hover { color:var(--ddt-accent-text); }
.ddt-ex-manage[open] > summary { color:var(--ddt-accent-text); }
.ddt-ex-manage .ddt-ex-cfg { margin:var(--ddt-s2) 0 0; padding:var(--ddt-s3);
    border-radius:var(--ddt-r-sm); background:var(--ddt-soft); }
.ddt-ex-manage .ddt-ex-edit button[type=submit] { padding:var(--ddt-s2) var(--ddt-s3);
    border:none; border-radius:var(--ddt-r-sm); background:var(--ddt-accent); color:#fff;
    font-size:var(--ddt-fs-md); font-weight:600; cursor:pointer; }
.ddt-ex-manage .ddt-hint { margin:var(--ddt-s2) 0 0; }
.ddt-step-down { width:34px; height:34px; border:1px solid var(--ddt-border); background:var(--ddt-surface);
    border-radius:var(--ddt-r-sm); cursor:pointer; font-size:var(--ddt-fs-xl); color:var(--ddt-muted); }
.ddt-step-down:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
/* Der "Next"-Button ist die Hauptaktion: Arbeitsgewicht dauerhaft hoeher. */
.ddt-step-up { padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm); background:var(--ddt-accent);
    color:#fff; cursor:pointer; font-size:var(--ddt-fs-md); font-weight:600;
    font-variant-numeric:tabular-nums; }
.ddt-step-up:hover { background:var(--ddt-accent-strong); }

/* --- Verwaltung der Sportarten (gleiche Farbwelt wie die Kacheln) --- */
.ddt-sport-config { margin:var(--ddt-s4) 0 0; }
.ddt-sport-config > summary { cursor:pointer; font-size:var(--ddt-fs-md); color:var(--ddt-muted); }
.ddt-sport-config > summary:hover { color:var(--ddt-accent-text); }
.ddt-stype { border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md); padding:var(--ddt-s3) var(--ddt-s3);
    margin:var(--ddt-s3) 0; }
.ddt-stype-head, .ddt-rt-head { display:flex; align-items:center; gap:var(--ddt-s2); }
.ddt-stype-edit, .ddt-rt-edit { display:flex; flex:1; flex-wrap:wrap; align-items:center;
    gap:var(--ddt-s2); margin:0; }
.ddt-routines { margin-top:var(--ddt-s3); padding-left:var(--ddt-s3); border-left:2px solid var(--ddt-border); }
.ddt-routine-cfg { margin-bottom:var(--ddt-s2); }
.ddt-routine-cfg > summary { cursor:pointer; font-size:var(--ddt-fs-md); font-weight:600; padding:var(--ddt-s1) 0; }
.ddt-ex-cfg { display:flex; align-items:flex-end; gap:var(--ddt-s2); margin:var(--ddt-s2) 0; }
/* flex-end statt center: die Felder tragen jetzt eine Beschriftung
   und sind dadurch hoeher als Knoepfe. Auf einer gemeinsamen
   Unterkante stehen alle Eingaben in einer Linie. */
.ddt-ex-edit { display:flex; flex:1; flex-wrap:wrap; align-items:flex-end; gap:var(--ddt-s2); margin:0; }
.ddt-ex-edit input[type=number] { width:74px; }
/* Der Uebungsname ist immer das erste beschriftete Feld und darf
   als einziges mitwachsen - Namen sind laenger als Zahlen. */
.ddt-ex-edit .ddt-exf:first-of-type { flex:1 1 150px; }
.ddt-ex-edit .ddt-exf:first-of-type input[type=text] { box-sizing:border-box; width:100%; }
.ddt-ex-new { margin-top:var(--ddt-s2); padding-top:var(--ddt-s2); border-top:1px dashed var(--ddt-border); }
.ddt-rt-new { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); margin-top:var(--ddt-s2); }

/* --- Messgroessen einer Ausdauer-Sportart --- */
.ddt-cfields { margin-top:var(--ddt-s3); padding-left:var(--ddt-s3); border-left:2px solid var(--ddt-border); }
.ddt-cfield { display:flex; align-items:center; gap:var(--ddt-s2); margin:var(--ddt-s2) 0; }
.ddt-cfield-edit { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--ddt-s2); margin:0; }
.ddt-cfield-new { margin-top:var(--ddt-s2); padding-top:var(--ddt-s2); border-top:1px dashed var(--ddt-border); }
.ddt-sport-config input.ddt-unit-input { flex:0 0 70px; min-width:0; }

.ddt-sport-config input[type=text] { flex:1; min-width:110px; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface); font-size:var(--ddt-fs-lg); color:var(--ddt-text); }
.ddt-sport-config input[type=number] { width:60px; padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); font-size:var(--ddt-fs-md); color:var(--ddt-text); }
.ddt-sport-config input:focus { outline:none; border-color:var(--ddt-accent);
    box-shadow:0 0 0 3px var(--ddt-accent-glow); }
.ddt-sport-config button[type=submit]:not(.ddt-metric-del) { padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm); background:var(--ddt-surface); cursor:pointer;
    color:var(--ddt-text2); font-size:var(--ddt-fs-md); white-space:nowrap; }
.ddt-sport-config button[type=submit]:not(.ddt-metric-del):hover { border-color:var(--ddt-accent);
    color:var(--ddt-accent-text); }

.ddt-schedule { display:flex; flex-wrap:wrap; gap:var(--ddt-s4); align-items:flex-start; }
.ddt-sched-side { flex:0 0 190px; }
.ddt-sched-side h4 { margin:0 0 var(--ddt-s2); }
.ddt-sched-pool { list-style:none; margin:0 0 var(--ddt-s2); padding:0; }
.ddt-sched-pool li { padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border); border-radius:var(--ddt-r-sm);
    margin-bottom:var(--ddt-s2); background:var(--ddt-surface); font-size:var(--ddt-fs-lg); }
.ddt-sched-pool li.is-done { text-decoration:line-through; color:var(--ddt-faint); }
.ddt-sched-pool li[data-id] { cursor:grab; touch-action:none; }
.ddt-sched-pool li.is-dragging { opacity:.4; }
.ddt-drag-ghost { position:fixed; z-index:100000; transform:translate(-50%,-50%);
    pointer-events:none; background:var(--ddt-accent); color:#fff; padding:var(--ddt-s1) var(--ddt-s3); border-radius:var(--ddt-r-sm);
    font-size:var(--ddt-fs-md); box-shadow:0 4px 14px rgba(0,0,0,.3); opacity:.92; white-space:nowrap; }
.ddt-sched-add select, .ddt-sched-add input[type=text], .ddt-sched-add input[type=time] {
    width:100%; box-sizing:border-box; padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-lg); margin-bottom:var(--ddt-s2); }
.ddt-sched-row { display:flex; gap:var(--ddt-s2); margin-bottom:0; }
.ddt-sched-row select, .ddt-sched-row input[type=time] { margin-bottom:0; }
.ddt-sched-add button { padding:var(--ddt-s2) var(--ddt-s3); border:none; border-radius:var(--ddt-r-sm); background:var(--ddt-solid);
    color:#fff; cursor:pointer; font-size:var(--ddt-fs-md); white-space:nowrap; }
.ddt-sched-add button:hover { background:var(--ddt-solid-hover); }

/* --- Das Fenster des Zeitstrahls ---
   Steht unter dem Einplanen-Formular in derselben Seitenspalte, sieht
   deshalb aus wie dieses. Die beiden Auswahlfelder teilen sich die
   Breite, damit der Knopf daneben nicht umbricht. */
.ddt-sched-window { margin:0; }
.ddt-sched-window select { flex:1 1 0; min-width:0; margin-bottom:0; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); background:var(--ddt-surface);
    color:var(--ddt-text); font-size:var(--ddt-fs-md); }
.ddt-sched-window button { flex:none; padding:var(--ddt-s2) var(--ddt-s3); border:none; border-radius:var(--ddt-r-sm);
    background:var(--ddt-solid); color:#fff; font-size:var(--ddt-fs-md); cursor:pointer; }
.ddt-sched-window button:hover { background:var(--ddt-solid-hover); }
.ddt-sched-to { align-self:center; color:var(--ddt-faint); font-size:var(--ddt-fs-md); }
.ddt-sched-window .ddt-hint { margin:var(--ddt-s2) 0 0; }

.ddt-timeline { position:relative; flex:1 1 240px; border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md); }
.ddt-sched-grid { position:absolute; inset:0; }
.ddt-slot { position:relative; border-top:1px solid var(--ddt-border); box-sizing:border-box; }
.ddt-slot:first-child { border-top:none; }
.ddt-slot.is-hour { border-top-color:var(--ddt-border2); }
.ddt-slot-time { position:absolute; left:6px; top:1px; font-size:var(--ddt-fs-xs); color:var(--ddt-faint); }
.ddt-blocks { position:absolute; left:52px; right:8px; top:0; bottom:0; }
/* Flex-Spalte + enge line-height: sonst blaeht das Theme die Zeilenhoehe auf
   und der Text wird im 28px hohen Slot abgeschnitten. */
.ddt-block { position:absolute; left:0; right:0; background:var(--ddt-accent); color:#fff; border-radius:var(--ddt-r-sm);
    padding:2px var(--ddt-s5) 2px var(--ddt-s2); font-size:var(--ddt-fs-sm); line-height:1.2; overflow:hidden; box-sizing:border-box;
    display:flex; flex-direction:column; justify-content:center;
    cursor:grab; touch-action:none; user-select:none; }
.ddt-block.is-dragging { cursor:grabbing; opacity:.9; z-index:5;
    box-shadow:0 5px 16px rgba(0,0,0,.28); }
.ddt-block.is-resizing { cursor:ns-resize; z-index:5;
    box-shadow:0 5px 16px rgba(0,0,0,.28); }
/* Griff am unteren Rand. Der Streifen ist unsichtbar (aber greifbar),
   der kleine Strich darin taucht beim Hovern auf. */
.ddt-block-resize { position:absolute; left:0; right:0; bottom:0; height:10px;
    cursor:ns-resize; touch-action:none; }
.ddt-block.is-short .ddt-block-resize { height:8px; }
.ddt-block-resize::after { content:""; position:absolute; left:50%; bottom:2px;
    width:22px; height:2px; margin-left:-11px; border-radius:var(--ddt-r-xs);
    background:rgba(255,255,255,.6); opacity:0; transition:opacity .15s; }
.ddt-block:hover .ddt-block-resize::after,
.ddt-block.is-resizing .ddt-block-resize::after { opacity:1; }
/* 30-Minuten-Block: Zeit und Text nebeneinander statt untereinander. */
.ddt-block.is-short { flex-direction:row; align-items:center; gap:var(--ddt-s2); }
.ddt-block.is-short .ddt-block-time { font-size:var(--ddt-fs-xs); flex:0 0 auto; }
.ddt-block.is-short .ddt-block-text { font-size:var(--ddt-fs-xs); flex:1 1 auto; min-width:0; }
.ddt-block-time { display:block; font-size:var(--ddt-fs-xs); opacity:.8; }
.ddt-block-text { display:block; font-weight:600; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; }
/* Zeigt beim Ziehen, in welchem Slot der Block landen wuerde. */
.ddt-drop-line { position:absolute; left:0; right:0; box-sizing:border-box;
    border:2px dashed var(--ddt-accent); border-radius:var(--ddt-r-sm); background:var(--ddt-accent-glow);
    pointer-events:none; z-index:4; }
.ddt-block-del { position:absolute; top:1px; right:3px; margin:0; }
.ddt-block-del button { background:none; border:none; color:#fff; opacity:.7; cursor:pointer;
    font-size:var(--ddt-fs-xl); line-height:1; padding:2px; }
.ddt-block-del button:hover { opacity:1; }

.ddt-daily-stats { margin:0 0 var(--ddt-s2); }
.ddt-metrics { display:flex; flex-direction:column; }
/* flex-wrap seit v3.43.0: der aufklappbare Verlauf ist das dritte
   Kind und soll UNTER der Zeile stehen, nicht neben ihr. */
.ddt-metric { display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:var(--ddt-s3);
    padding:var(--ddt-s2) 0; border-bottom:1px solid var(--ddt-border); }
.ddt-metric-label { font-size:var(--ddt-fs-lg); }

/* --- Verlauf einer Metrik --- */
.ddt-mt { flex:1 1 100%; }
.ddt-mt > summary { display:inline-block; font-size:var(--ddt-fs-sm); color:var(--ddt-faint);
    cursor:pointer; list-style:none; }
.ddt-mt > summary::-webkit-details-marker { display:none; }
/* Doppelte Anfuehrungszeichen sind Pflicht: styles() gibt das
   ganze CSS als einfach-gequoteten PHP-String zurueck, ein
   Apostroph hier bricht die Datei. */
.ddt-mt > summary::before { content:"▸ "; }
.ddt-mt[open] > summary::before { content:"▾ "; }
.ddt-mt > summary:hover { color:var(--ddt-accent-text); }
/* 30 schmale Spalten - dieselbe Enge wie im Monats-Chart. */
.ddt-mt-bars { gap:3px; max-width:100%; height:64px; margin-top:var(--ddt-s2); }
.ddt-mt-bar { background:var(--ddt-accent); border-radius:var(--ddt-r-xs) var(--ddt-r-xs) 0 0; }
/* Ein Nein ist eine Antwort, kein fehlender Tag: grauer Stummel
   statt gar nichts. */
.ddt-mt-bar.is-no { background:var(--ddt-border2); }
.ddt-mt-foot { margin:var(--ddt-s2) 0 0; font-size:var(--ddt-fs-xs); color:var(--ddt-faint);
    font-variant-numeric:tabular-nums; }
.ddt-metric-right { display:flex; align-items:center; gap:var(--ddt-s2); }
/* 1–10 sind viele Buttons: umbrechen statt die Zeile zu sprengen. */
.ddt-metric-btns { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--ddt-s1); }
.ddt-mbtn { min-width:30px; height:32px; padding:0 var(--ddt-s2); border:1px solid var(--ddt-border2); background:var(--ddt-surface);
    border-radius:var(--ddt-r-sm); cursor:pointer; font-size:var(--ddt-fs-md); }
.ddt-mbtn:hover { border-color:var(--ddt-accent); }
.ddt-mbtn.is-active { background:var(--ddt-accent); color:#fff; border-color:var(--ddt-accent); }
.ddt-metric-number { display:flex; gap:var(--ddt-s2); margin:0; }
.ddt-metric-number input[type=number] { width:80px; padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-lg); }
.ddt-metric-number button { padding:var(--ddt-s2) var(--ddt-s3); border:none; border-radius:var(--ddt-r-sm); background:var(--ddt-solid);
    color:#fff; cursor:pointer; font-size:var(--ddt-fs-md); }
.ddt-metric-config { margin:var(--ddt-s4) 0 0; }
.ddt-metric-config summary { cursor:pointer; font-size:var(--ddt-fs-md); color:var(--ddt-muted); }
.ddt-metric-list { list-style:none; margin:var(--ddt-s3) 0; padding:0; }
.ddt-metric-list li { display:flex; align-items:center; gap:var(--ddt-s2);
    padding:var(--ddt-s2) 0; font-size:var(--ddt-fs-lg); }
.ddt-metric-list em { color:var(--ddt-faint); font-style:normal; font-size:var(--ddt-fs-sm); }
.ddt-metric-edit { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--ddt-s2); margin:0; }
.ddt-metric-edit input[type=text] { flex:1; min-width:120px; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-lg); }
.ddt-metric-edit select { padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-md); }
.ddt-metric-save { padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); background:var(--ddt-surface);
    cursor:pointer; font-size:var(--ddt-fs-md); }
.ddt-metric-save:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-metric-delform { margin:0; }
.ddt-metric-del { background:none; border:none; color:var(--ddt-danger); cursor:pointer; font-size:var(--ddt-fs-xl);
    padding:2px var(--ddt-s2); opacity:.6; }
.ddt-metric-del:hover { opacity:1; }
.ddt-version { text-align:right; font-size:var(--ddt-fs-xs); color:var(--ddt-faint); margin:var(--ddt-s4) 0 0; }
.ddt-metric-mname { flex:1; font-size:var(--ddt-fs-lg); }
.ddt-metric-mtype { font-size:var(--ddt-fs-md); color:var(--ddt-muted); }
.ddt-metric-list li.is-removed { opacity:.55; }
.ddt-metric-list li.is-removed .ddt-metric-save { border-color:var(--ddt-done); color:var(--ddt-ok-text); opacity:1; }
.ddt-metric-add { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); margin-top:var(--ddt-s2); }
.ddt-metric-add input[type=text] { flex:1; min-width:130px; padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-lg); }
.ddt-metric-add select { padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-lg); }
.ddt-metric-add button { padding:var(--ddt-s2) var(--ddt-s4); border:none; border-radius:var(--ddt-r-sm); background:var(--ddt-solid);
    color:#fff; cursor:pointer; font-size:var(--ddt-fs-md); }

.ddt-add { display:flex; gap:var(--ddt-s2); margin:0 0 var(--ddt-s2); }
.ddt-add input[type=text] { flex:1; padding:var(--ddt-s3) var(--ddt-s3); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-md); font-size:var(--ddt-fs-xl); }
.ddt-add button { padding:var(--ddt-s3) var(--ddt-s4); border:none; border-radius:var(--ddt-r-md); cursor:pointer;
    background:var(--ddt-solid); color:#fff; font-size:var(--ddt-fs-lg); }
.ddt-add button:hover { background:var(--ddt-solid-hover); }

.ddt-completion { font-size:var(--ddt-fs-xl); margin:var(--ddt-s4) 0 var(--ddt-s2); }
.daily-todo-progress-wrapper { width:100%; margin:0 0 var(--ddt-s1); }
.daily-todo-progress { display:block; width:100%; height:14px; margin:0; border:none;
    border-radius:var(--ddt-r-sm); overflow:hidden; background:var(--ddt-soft); }
.daily-todo-progress::-webkit-progress-bar { background:var(--ddt-soft); border-radius:var(--ddt-r-sm); }
.daily-todo-progress::-webkit-progress-value { background:var(--ddt-done); border-radius:var(--ddt-r-sm); }
.daily-todo-progress::-moz-progress-bar { background:var(--ddt-done); }

/* Gleiche Optik wie die Skala-Metriken, damit die Zeile sich einreiht. */
.ddt-rating { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--ddt-s1); }
.ddt-rating-btn { min-width:30px; height:32px; padding:0 var(--ddt-s2); border:1px solid var(--ddt-border2);
    background:var(--ddt-surface); border-radius:var(--ddt-r-sm); cursor:pointer; font-size:var(--ddt-fs-md); transition:.15s; }
.ddt-rating-btn:hover { border-color:var(--ddt-accent); }
.ddt-rating-btn.is-active { background:var(--ddt-accent); color:#fff; border-color:var(--ddt-accent); }

.ddt-list { list-style:none; margin:0; padding:0; }
.ddt-list li { display:flex; align-items:center; gap:var(--ddt-s3); padding:var(--ddt-s3) var(--ddt-s4);
    border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md); margin-bottom:var(--ddt-s2); background:var(--ddt-surface); }
.ddt-list li:hover { border-color:var(--ddt-border2); }
.ddt-drag { cursor:grab; color:var(--ddt-faint); font-size:18px; line-height:1; user-select:none; }
.ddt-toggle { flex:1; margin:0; }
.ddt-toggle label { display:flex; align-items:center; gap:var(--ddt-s3); cursor:pointer; margin:0; }
.ddt-toggle input[type=checkbox] { width:19px; height:19px; accent-color:var(--ddt-done); }
.ddt-del-form { margin:0; }
.ddt-delete { background:none; border:none; color:var(--ddt-danger); cursor:pointer; font-size:var(--ddt-fs-md);
    opacity:.55; padding:var(--ddt-s1); }
.ddt-delete:hover { opacity:1; }
.ddt-empty { color:var(--ddt-faint); font-size:var(--ddt-fs-lg); margin:0 0 var(--ddt-s2); }

.ddt-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:var(--ddt-s3); margin:0 0 var(--ddt-s2); }

/* Konstanz: Kalender und beide Serien in einem Aufklapper (v3.105.0).
   Das <summary> ersetzt die frühere <h4> und sieht deshalb aus wie
   eine - sonst haette der Reiter eine Ueberschrift, die aus der Reihe
   faellt. Das Dreieck ist dasselbe wie bei "Erweitert". */
.ddt-consistency { margin:var(--ddt-s5) 0 var(--ddt-s3); }
.ddt-consistency > summary { display:flex; align-items:center; gap:var(--ddt-s2);
    list-style:none; cursor:pointer; color:var(--ddt-muted);
    font-size:var(--ddt-fs-md); text-transform:uppercase; letter-spacing:.05em; }
.ddt-consistency > summary::-webkit-details-marker { display:none; }
.ddt-consistency > summary::before { content:"B8"; display:inline-block;
    color:var(--ddt-faint); }
.ddt-consistency[open] > summary::before { transform:rotate(90deg); }
.ddt-consistency > summary:hover { color:var(--ddt-text); }
/* Die beiden Serien stehen nebeneinander und duerfen schmaler sein als
   die uebrigen Kacheln - es sind zwei, keine vier. */
.ddt-cards-streak { grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
    margin-top:var(--ddt-s3); }
.ddt-consistency .ddt-hint { margin:0 0 var(--ddt-s3); }
/* Die Kennzahlen-Kacheln bleiben VERTIEFT statt erhoben: sie tragen
   Zahlen, keine Handlung, und ein Feld, in dem eine Zahl liegt, liest
   sich ruhiger als eine Karte, die sich anbietet. Radius und Rahmen
   kommen trotzdem aus der Familie - nur Flaeche und Schatten weichen ab. */
.ddt-card { background:var(--ddt-sunk); box-shadow:none; padding:var(--ddt-s4); }
.ddt-card .l { margin:0; font-size:var(--ddt-fs-md); color:var(--ddt-muted); }
.ddt-card .v { margin:var(--ddt-s1) 0 0; font-size:24px; font-weight:600; }

.ddt-heat { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr);
    gap:3px; margin:0 0 var(--ddt-s2); }
.ddt-cell { width:14px; height:14px; border-radius:var(--ddt-r-xs); cursor:help; }
.ddt-cell[data-date] { cursor:pointer; }
.ddt-cell[data-date]:hover { outline:2px solid var(--ddt-accent); outline-offset:1px; }
.ddt-legend { display:flex; align-items:center; gap:3px; font-size:var(--ddt-fs-sm); color:var(--ddt-muted); margin:0; }
.ddt-legend span { width:12px; height:12px; border-radius:var(--ddt-r-xs); display:inline-block; }

.ddt-bars { display:flex; gap:var(--ddt-s2); align-items:flex-end; height:100px; max-width:420px; }
.ddt-bar-col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.ddt-bar { background:var(--ddt-done); border-radius:var(--ddt-r-xs) var(--ddt-r-xs) 0 0; min-height:2px;
    cursor:help; transition:opacity .15s; }
.ddt-bar:hover { opacity:.72; }
.ddt-bar-labels { display:flex; gap:var(--ddt-s2); margin-top:var(--ddt-s2); max-width:420px; }
.ddt-bar-labels span { flex:1; text-align:center; font-size:var(--ddt-fs-xs); color:var(--ddt-muted); }
/* Die Werte-Zeile unter den Wochentagen. Enger an der Beschriftung als
   diese am Diagramm, damit Tag und Zahl als ein Block gelesen werden,
   und eine Spur blasser - der Tag fuehrt, die Zahl folgt.
   tabular-nums haelt die Ziffern in Spur: sonst tanzen die Zahlen von
   Tag zu Tag, weil eine 1 schmaler ist als eine 8. */
.ddt-bar-values { margin-top:2px; }
.ddt-bar-values span { color:var(--ddt-faint); font-variant-numeric:tabular-nums;
    white-space:nowrap; }

.ddt-bars-month { gap:3px; max-width:100%; }
.ddt-bars-month .ddt-bar { border-radius:var(--ddt-r-xs) var(--ddt-r-xs) 0 0; }
.ddt-bar-labels-month { gap:3px; max-width:100%; }
.ddt-bar-labels-month span { font-size:var(--ddt-fs-xs); white-space:nowrap; }

.ddt-bars-3 { max-width:300px; gap:var(--ddt-s4); }
.ddt-bars-3 .ddt-group { flex-direction:row; align-items:flex-end;
    justify-content:center; gap:var(--ddt-s1); }
.ddt-bars-3 .ddt-group .ddt-bar { flex:1; max-width:30px; }
.ddt-bar-labels-3 { max-width:300px; }
.ddt-bar-done { background:var(--ddt-done); }
.ddt-bar-sat  { background:var(--ddt-accent); }
.ddt-legend2 { display:flex; align-items:center; gap:var(--ddt-s2); margin:var(--ddt-s2) 0 0;
    font-size:var(--ddt-fs-sm); color:var(--ddt-muted); }
.ddt-legend2 .k { width:12px; height:12px; border-radius:var(--ddt-r-xs); display:inline-block;
    margin-left:var(--ddt-s2); }
.ddt-legend2 .k.done { background:var(--ddt-done); }
.ddt-legend2 .k.sat  { background:var(--ddt-accent); }

.ddt-list.is-empty { min-height:48px; border:1px dashed var(--ddt-border2); border-radius:var(--ddt-r-md);
    display:flex; align-items:center; justify-content:center; }
.ddt-list.is-empty::after { content:attr(data-empty-label); color:var(--ddt-faint); font-size:var(--ddt-fs-md); }

.ddt-demo { display:flex; gap:var(--ddt-s2); margin:var(--ddt-s5) 0 0; }
.ddt-demo button { padding:var(--ddt-s2) var(--ddt-s4); border:1px solid var(--ddt-border2); background:var(--ddt-surface);
    border-radius:var(--ddt-r-sm); cursor:pointer; font-size:var(--ddt-fs-md); color:var(--ddt-text2); }
.ddt-demo button:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
/* Sprachknoepfe: kurz, gleich breit, der aktive gefuellt. Zwei
   Kuerzel nebeneinander sollen wie eine Gruppe wirken, nicht wie
   vier einzelne Knoepfe. */
.ddt-langs { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); margin-bottom:var(--ddt-s4); }
.ddt-langs form { margin:0; display:inline; }
.ddt-lang-btn { min-width:44px; padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-text2); font-size:var(--ddt-fs-sm);
    font-weight:700; letter-spacing:.04em; cursor:pointer; }
.ddt-lang-btn:hover { border-color:var(--ddt-accent); color:var(--ddt-accent-text); }
.ddt-lang-btn.is-active { background:var(--ddt-accent); border-color:var(--ddt-accent);
    color:#fff; }

.ddt-themes { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); }
.ddt-themes .ddt-nav-form, .ddt-themes form { margin:0; display:inline; }
.ddt-theme-btn { display:inline-flex; align-items:center; gap:var(--ddt-s2); padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); background:var(--ddt-surface); cursor:pointer; font-size:var(--ddt-fs-md); }
.ddt-theme-btn:hover { border-color:var(--ddt-accent); }
.ddt-theme-btn.is-active { border-color:var(--ddt-accent); box-shadow:0 0 0 2px var(--ddt-accent); }
.ddt-theme-dots { display:inline-flex; gap:3px; }
.ddt-theme-dots span { width:11px; height:11px; border-radius:50%; display:inline-block; }
.ddt-theme-custom-wrap { margin-top:var(--ddt-s2); }
.ddt-theme-custom { display:inline-flex; align-items:center; flex-wrap:wrap; gap:var(--ddt-s2); margin:0;
    padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm); background:var(--ddt-surface); }
.ddt-theme-custom-lbl { font-size:var(--ddt-fs-md); color:var(--ddt-muted); }
.ddt-theme-clabel { display:inline-flex; align-items:center; gap:var(--ddt-s1); font-size:var(--ddt-fs-sm); color:var(--ddt-muted); }
.ddt-theme-clabel input[type=color] { width:30px; height:26px; padding:0; border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); background:none; cursor:pointer; }
.ddt-card--danger .v { color:var(--ddt-danger); }

/* =====================================================================
   App-Gefuehl auf Touch (v3.66.1)

   Eine Website verraet sich auf dem Handy durch drei Dinge: das graue
   Aufblitzen beim Tippen, das Kopieren-Menue auf Knoepfen und den
   Zoom beim Doppeltipp. Alles drei hat in Bedienelementen nichts
   verloren - Eingabefelder und normaler Text bleiben bewusst
   unangetastet, dort ist Auswaehlen richtig.
   =================================================================== */
.ddt, .ddt-stats { -webkit-tap-highlight-color:transparent; }
.ddt button, .ddt summary, .ddt .ddt-tab, .ddt label,
.ddt-stats button, .ddt-stats summary {
    touch-action:manipulation;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; }
/* In einem <label> kann ein Eingabefeld stecken - das bleibt normal. */
.ddt label input, .ddt label textarea, .ddt label select {
    -webkit-user-select:auto; user-select:auto; }

/* Seitliche Scroller rollen mit Schwung aus statt abrupt zu stoppen,
   und ihr Ueberziehen reisst nicht die ganze Seite mit. */
.ddt-heat, .ddt-bars, .ddt-table-scroll, .ddt-cal.is-compact .ddt-cal-grid {
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }

/* =====================================================================
   Installierte App (display-mode: standalone)

   Nur wenn die Seite als App laeuft: kein Gummiband-Ueberziehen nach
   oben (das wuerde in einer App wie ein Fehler aussehen) und Polster
   gegen Notch und Home-Balken. env() liefert im Browserfenster 0 -
   die Regeln sind dort folgenlos, der Desktop bleibt unveraendert.
   Das viewport-Meta traegt dafuer viewport-fit=cover (siehe
   maybe_pwa_head() in daily-todo-tracker.php).
   =================================================================== */
@media (display-mode: standalone) {
    html { overscroll-behavior-y:none; }
    body { padding-top:env(safe-area-inset-top, 0px);
           padding-right:env(safe-area-inset-right, 0px);
           padding-bottom:env(safe-area-inset-bottom, 0px);
           padding-left:env(safe-area-inset-left, 0px); }
    /* Die klebende Reiterleiste haelt zusaetzlich Abstand zur Notch. */
    .ddt-tabs { top:calc(var(--wp-admin--admin-bar--height, 0px) + env(safe-area-inset-top, 0px)); }
}

/* Fest positionierte Elemente ruecken ueber den Home-Balken. Ausserhalb
   der App ist env() 0 und alles steht, wo es stand; Browser ohne env()
   lassen diese Deklaration fallen und behalten den Wert von oben. */
.ddt-toast { bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
.ddt-install { bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }


/* =====================================================================
   Handy-Nachbesserungen (ab v3.71.0)

   Alles in diesem Abschnitt kommt aus EINEM Test am echten Geraet -
   Android, rund 360 px breit, dunkler Modus, ueber einen Live Link.
   Am Schreibtisch war nichts davon zu sehen; die responsive Ansicht der
   Entwicklerwerkzeuge zeigt zwar die Breite, aber nicht den Daumen.

   Der Abschnitt steht bewusst am ENDE der Datei: jede Regel hier
   korrigiert etwas weiter oben, und bei gleicher Spezifitaet gewinnt
   die spaetere. Wer eine dieser Regeln liest, sieht damit sofort, dass
   sie eine Korrektur ist und nicht der Ursprung.
   =================================================================== */

/* ---------------------------------------------------------------------
   P1  Der dunkle Modus reicht bis an den Bildschirmrand

   WAS FALSCH WAR
   Der dunkle Modus ist als KARTE gebaut: Polster, Radius, dunkle
   Flaeche - auf dem Schreibtisch genau richtig, eine ruhige Flaeche in
   einer hellen Seite. Auf dem Handy ist die App aber nicht eine Karte
   IN einer Seite, sie IST die Seite. Die Theme-Spalte laesst links und
   rechts ein paar Pixel Rand, und dort schimmerte der helle
   Theme-Grund durch - dazu vier runde Ecken mit Hell dahinter. Das
   sieht nicht nach dunklem Modus aus, das sieht nach kaputt aus.

   WAS JETZT GILT (nur unter 600 px, nur im Dunkeln)
   1. Die Karte wird flach: kein Radius mehr.
   2. Sie zieht sich per Full-Bleed ueber die volle Breite. Der
      Kniff calc(50% - 50vw) rechnet aus der Mitte der Theme-Spalte
      heraus bis an den Rand des Fensters - unabhaengig davon, wieviel
      Polster das Theme vorgibt.
   3. min-height:100vh, damit unterhalb des Inhalts kein heller Rest
      stehen bleibt.
   4. Und weil 1-3 nur die Flaeche der App abdecken, nicht das, was das
      Theme darueber und darunter setzt, legt ::before eine feste
      dunkle Rueckwand hinter die ganze Seite. Sie liegt auf z-index:-1
      und damit hinter allem, was Inhalt ist - sichtbar wird sie nur
      dort, wo sonst der nackte Seitengrund durchkaeme.

   Der Desktop bleibt unberuehrt: die zentrierte Karte mit Radius ist
   dort richtig, und ueber 600 px greift keine dieser Regeln.
   ------------------------------------------------------------------- */
@media (max-width:600px) {
    .ddt[data-mode=dark], .ddt-stats[data-mode=dark] {
        border-radius:0;
        width:100vw; max-width:100vw;
        margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
        padding:var(--ddt-s4) var(--ddt-s4) var(--ddt-s6);
        min-height:100vh;
    }
    .ddt[data-mode=dark]::before, .ddt-stats[data-mode=dark]::before {
        content:""; position:fixed; inset:0; z-index:-1;
        background:var(--ddt-page);
    }
}
@media (max-width:600px) and (prefers-color-scheme: dark) {
    .ddt[data-mode=auto], .ddt-stats[data-mode=auto] {
        border-radius:0;
        width:100vw; max-width:100vw;
        margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
        padding:var(--ddt-s4) var(--ddt-s4) var(--ddt-s6);
        min-height:100vh;
    }
    .ddt[data-mode=auto]::before, .ddt-stats[data-mode=auto]::before {
        content:""; position:fixed; inset:0; z-index:-1;
        background:var(--ddt-page);
    }
}

/* ---------------------------------------------------------------------
   P2 A  Die 1-10-Skalen brechen nicht mehr um

   WAS FALSCH WAR
   .ddt-rating und .ddt-metric-btns standen auf flex-wrap:wrap mit
   justify-content:flex-end. Auf 360 px passten sieben Knoepfe in die
   Zeile, die 8, 9 und 10 rutschten in eine zweite, rechtsbuendige
   Reihe. Zehn Stufen, die man nicht auf einen Blick sieht, sind keine
   Skala mehr - man zaehlt, statt zu schauen.

   WAS JETZT GILT
   Nie zwei Reihen: flex-wrap:nowrap fuer beide Skalen. Damit das auf
   schmalen Schirmen passt, klappt die ganze Zeile um - die
   Beschriftung oben, die Skala darunter ueber die volle Breite - und
   die zehn Knoepfe teilen sich diese Breite zu gleichen Teilen
   (flex:1 1 0 an den Formularen, width:100% am Knopf). Kleiner werden
   sie also, statt umzubrechen; die Hoehe bleibt bei den 44 px, die der
   Daumen braucht (@media pointer:coarse weiter oben).

   WARUM DIE FORMULARE UND NICHT DIE KNOEPFE WACHSEN
   Jeder Knopf steckt in einem eigenen <form> - sonst haette ein Klick
   keinen Nonce dabei. Die Flex-Kinder der Skala sind also die
   Formulare; ein flex:1 am Knopf ginge ins Leere.
   ------------------------------------------------------------------- */
.ddt-rating, .ddt-metric-btns.is-scale { flex-wrap:nowrap; }

@media (max-width:600px) {
    /* Beschriftung oben, Bedienelement darunter - fuer JEDE Metrik,
       nicht nur die Skalen: 360 px sind fuer zwei Spalten zu wenig. */
    .ddt-metric { align-items:flex-start; gap:var(--ddt-s2); }
    .ddt-metric > .ddt-rating, .ddt-metric > .ddt-metric-right { flex:1 1 100%; }
    .ddt-metric-btns { justify-content:flex-start; }

    /* Die Skala fuellt die Zeile, das x der Metrik bleibt daneben. */
    .ddt-metric-right .ddt-metric-btns.is-scale { flex:1 1 auto; min-width:0; }
    .ddt-rating > form, .ddt-metric-btns.is-scale > form { flex:1 1 0; min-width:0; margin:0; }
    .ddt-rating-btn, .ddt-metric-btns.is-scale .ddt-mbtn {
        width:100%; min-width:0; padding:0; }
}

/* Ganz schmale Geraete: die Ziffern eine Stufe kleiner, damit auch die
   zweistellige 10 nicht an die Kanten stoesst. */
@media (max-width:360px) {
    .ddt-rating-btn, .ddt-metric-btns.is-scale .ddt-mbtn { font-size:var(--ddt-fs-sm); }
}

/* ---------------------------------------------------------------------
   P3  Die klebende Reiterleiste wird auf dem Handy kompakt

   WAS FALSCH WAR
   Dass die Leiste beim Scrollen oben bleibt, ist richtig und soll so
   bleiben. Nur war sie mit Icon UND Beschriftung so hoch, dass sie ein
   gutes Stueck des Inhalts verdeckte - und weil sechs Reiter mit Text
   auf 360 px nicht nebeneinander passen, musste man sie auch noch
   seitlich schieben, um an "Tag" zu kommen.

   WAS JETZT GILT (unter 600 px)
   Nur noch die Symbole. Alle sechs passen damit nebeneinander, jeder
   Reiter bekommt denselben Anteil an der Breite (flex:1 1 0), die
   Leiste scrollt nicht mehr. Welcher Reiter offen ist, sagen weiterhin
   Akzentfarbe und Unterstrich.

   Die Beschriftung wird NICHT geloescht, nur unsichtbar gemacht: sie
   ist der zugaengliche Name des Knopfes. Mit display:none hiesse der
   Reiter fuer einen Screenreader gar nichts mehr.

   UND DIE UEBERLAPPUNGEN
   Die Leiste liegt auf z-index:60, jedes Panel bekommt mit
   position:relative + z-index:0 einen eigenen Stapel. Damit kann
   NICHTS aus dem Inhalt mehr ueber der Leiste landen - weder der Knopf
   "Aufgabe hinzufuegen" noch ein Einheiten-Popup, das weiter oben auf
   z-index:50 steht. Modal, Toast und Install-Balken haengen ausserhalb
   der Panels und bleiben oben drueber, wo sie hingehoeren.

   scroll-margin-top sorgt dafuer, dass ein Feld, in das der Browser
   hineinspringt, nicht unter der Leiste landet.
   ------------------------------------------------------------------- */


.ddt-tabs { z-index:60; }
/* Jedes Panel ein eigener Stapel, fest unter der Leiste. */
.ddt-panel { position:relative; z-index:0; }
/* Die Begruessung steht ueber der Leiste im Markup und ist positioniert -
   ohne eigene Stufe koennte sie beim Hochscrollen darueber laufen. */
.ddt-welcome { z-index:0; }

@media (max-width:600px) {
    .ddt-tabs { gap:0; margin-bottom:var(--ddt-s3); }
    /* Sechs gleiche Anteile statt sechs Textbreiten - damit passt alles
       nebeneinander und die Leiste muss nicht mehr scrollen. */
    .ddt-tab { flex:1 1 0; min-width:0; justify-content:center; gap:0;
        padding:var(--ddt-s2) var(--ddt-s1); }
    .ddt-tab .ddt-tab-text { position:absolute; width:1px; height:1px;
        overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    /* Ohne Text darf das Symbol eine Spur groesser und deutlicher sein. */
    .ddt-tab .ddt-icon { width:20px; height:20px; opacity:.8; }

    /* Woraufhin der Browser springt, soll auch sichtbar sein. */
    .ddt-panel input, .ddt-panel textarea, .ddt-panel select,
    .ddt-panel button, .ddt-panel summary {
        scroll-margin-top:calc(var(--wp-admin--admin-bar--height, 0px) + 60px); }
}

/* ---------------------------------------------------------------------
   P4  Die Aufgaben-Liste wird eine ordentliche Reihe

   WAS FALSCH WAR
   Das <li> steht auf flex-wrap:wrap - noetig, damit das aufgeklappte
   Umbenennen-Feld eine eigene Zeile bekommt. Der Textblock daneben
   (.ddt-toggle) hatte aber flex:1 mit flex-basis:auto und damit eine
   Mindestbreite, die sich nach dem laengsten Wort richtet. Wurde der
   Text laenger, passte die Zeile nicht mehr, und der Stift kippte unter
   den Text. Bei kurzen Aufgaben stand er daneben, bei langen darunter -
   in derselben Liste. Genau das sah ausgefranst aus.

   WAS JETZT GILT
   min-width:0 und flex-basis:0 am Textblock: er darf schmaler werden
   als sein Inhalt, der Text bricht INNEN um, die Zeile bleibt eine
   Zeile. Damit sitzen Griff, Kasten, Text, Loeschen und Stift immer an
   derselben Stelle - egal ob der Text ein- oder dreizeilig ist. Die
   Reihenfolge steht jetzt ausdruecklich in order:, statt sich aus der
   Markup-Reihenfolge und einem einzelnen order:2 zu ergeben.

   Aufgeklappt bekommt das Umbenennen weiterhin die volle Breite und
   damit eine zweite Zeile - das ist gewollt und war nie das Problem.

   ZOOM UND GROSSE SYSTEMSCHRIFT
   Der Kasten und der Griff messen jetzt in em, wachsen also mit der
   Schrift mit. Die Breite kommt ohnehin allein aus flex, nichts in der
   Zeile hat eine feste Pixelbreite - bei 150 % Zoom wird der Text
   groesser, die Zeile bleibt ganze Breite, und ein ueberlanges Wort
   bricht um statt hinauszulaufen.
   ------------------------------------------------------------------- */
.ddt-list li { align-items:center; }
.ddt-drag      { order:0; flex:0 0 auto; font-size:1.3em; }
.ddt-toggle    { order:1; flex:1 1 0; min-width:0; }
.ddt-del-form  { order:2; flex:0 0 auto; }
.ddt-task-edit { order:3; flex:0 0 auto; }
/* Ein ueberlanges Wort (eine URL, ein Dateiname) sprengt sonst die
   Zeile, statt umzubrechen. */
.ddt-toggle label { min-width:0; }
.ddt-toggle label > span, .ddt-toggle label > s { min-width:0; overflow-wrap:anywhere; }
/* Waechst mit der Schrift statt bei 19px stehen zu bleiben. */
.ddt-toggle input[type=checkbox] { flex:0 0 auto; width:1.35em; height:1.35em; }

@media (pointer:coarse) {
    .ddt-toggle input[type=checkbox] { width:1.6em; height:1.6em; }
}

/* Kompakter auf dem Handy: die Zeilen sind kurz, das Polster war es
   nicht. Der Platz gehoert dem Text, nicht dem Rand. */
@media (max-width:600px) {
    .ddt-list li { padding:var(--ddt-s2) var(--ddt-s3); gap:var(--ddt-s2);
        margin-bottom:var(--ddt-s1); }
    .ddt-task-edit[open] { margin-top:var(--ddt-s1); }
}

/* ---------------------------------------------------------------------
   P5  Der Zeitplan wird mit dem Finger bedienbar

   WAS FALSCH WAR
   Vom Pool auf den Zeitstrahl fuehrte genau ein Weg: ziehen. Auf dem
   Handy steht der Pool UEBER dem Strahl (die Seitenspalte klappt unter
   600 px auf volle Breite), man muesste also waehrend des Ziehens
   scrollen - und das geht nicht. Der ganze Reiter war am Telefon
   praktisch unbenutzbar.

   WAS JETZT GILT
   Jeder Pool-Eintrag ist ein <details>: antippen, Startzeit und Dauer
   waehlen, einplanen. Das Markup steht in render_schedule()
   (inc/trait-render-tracker.php), es laeuft ueber dieselbe Aktion
   add_schedule und damit durch dieselbe Nonce-Pruefung und
   Server-Validierung wie das Formular darunter - und es funktioniert
   auch ohne JavaScript.

   Das Ziehen mit der Maus bleibt daneben bestehen. Deshalb faellt hier
   touch-action:none am Pool-Eintrag weg: gezogen wird dort nur noch
   mit der Maus (siehe startPoolDrag in assets/ddt.js), und mit dem
   Finger soll man ueber die Liste scrollen koennen.

   Die Bloecke auf dem Strahl liessen sich schon per Pointer-Events
   verschieben und in der Dauer aendern - touch-action:none steht an
   ihnen seit jeher, die Geste kommt also auch vom Finger an. Was
   fehlte, war der GRIFF: 10 px hoch und nur beim Hovern sichtbar. Auf
   einem Touchscreen gibt es kein Hovern und keine 10-px-Genauigkeit.
   ------------------------------------------------------------------- */
.ddt-sched-pool li[data-id] { touch-action:manipulation; }

/* Der Eintrag im Pool: die Beschriftung ist jetzt das aufklappende
   <summary>, die Zeitauswahl steht darunter. */
.ddt-sched-quick > summary { cursor:pointer; list-style:none; }
.ddt-sched-quick > summary::-webkit-details-marker { display:none; }
/* Ein leises Zeichen, dass hier etwas aufgeht - und wohin. */
.ddt-sched-quick > summary::after { content:" +"; color:var(--ddt-faint); font-weight:600; }
.ddt-sched-quick[open] > summary::after { content:" −"; }
.ddt-sched-quick > summary:hover { color:var(--ddt-accent-text); }
.ddt-sched-quickform { display:flex; flex-wrap:wrap; gap:var(--ddt-s2); margin:var(--ddt-s2) 0 0; }
.ddt-sched-quickform input[type=time] { flex:1 1 auto; min-width:0; box-sizing:border-box;
    padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); font-size:var(--ddt-fs-xl); }
.ddt-sched-quickform select { flex:0 1 auto; min-width:0; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text); font-size:var(--ddt-fs-md); }
.ddt-sched-quickform button { flex:1 1 100%; padding:var(--ddt-s2) var(--ddt-s3); border:none;
    border-radius:var(--ddt-r-sm); background:var(--ddt-accent); color:#fff;
    font-size:var(--ddt-fs-md); font-weight:600; cursor:pointer; }
.ddt-sched-quickform button:hover { background:var(--ddt-accent-strong); }
/* Eine abgehakte Aufgabe bleibt durchgestrichen - ihr Formular nicht. */
.ddt-sched-pool li.is-done .ddt-sched-quickform { text-decoration:none; }

@media (pointer:coarse) {
    /* Aufklappen, Zeitfeld, Dauer und Einplanen auf volle Trefferhoehe. */
    .ddt-sched-quick > summary { min-height:44px; display:flex; align-items:center; }
    .ddt-sched-quickform input[type=time], .ddt-sched-quickform select,
    .ddt-sched-quickform button { min-height:44px; }

    /* Der Griff am unteren Rand eines Blocks: dreimal so hoch und
       dauerhaft sichtbar. Ohne Maus gibt es kein Hovern, das ihn
       einblenden koennte - unsichtbar waere er hier schlicht nicht da. */
    .ddt-block-resize { height:22px; }
    .ddt-block.is-short .ddt-block-resize { height:14px; }
    .ddt-block-resize::after { opacity:1; }
}

/* =====================================================================
   Handy-UX Runde 2 (ab v3.76.2)

   Zweiter Lauf nach einem Test am echten Geraet. Auch dieser Abschnitt
   steht am ENDE der Datei und korrigiert Regeln weiter oben - nicht
   nach oben sortieren, sonst kippt die Reihenfolge und damit die
   Wirkung.
   =================================================================== */

/* ---------------------------------------------------------------------
   A1  Die Reiterleiste ist auf dem Handy die oberste Kante

   WAS FALSCH WAR
   Im Markup steht ueber der Leiste noch einiges: die Kopfleiste mit
   Logo und "Mein Tag", die abschaltbare Ueberschrift und der
   Willkommenskasten. Am Schreibtisch ist das genau richtig - eine
   Anwendung in einer Seite. Auf dem Handy IST die Anwendung die Seite,
   und dort konnte man ueber die Reiter hinaus nach oben scrollen: erst
   Logo, dann Ueberschrift, dann leerer Raum, dann das Gummiband des
   Browsers. Man schaute aus der App hinaus.

   WAS JETZT GILT (unter 600 px)
   1. .ddt wird eine Flex-SPALTE. Die Kinder stehen weiterhin
      untereinander wie im normalen Fluss - aber jetzt laesst sich
      ihre Reihenfolge steuern, ohne das HTML anzufassen. Das ist
      wichtig: der Server rendert fuer beide Geraete dasselbe Markup,
      und ein Screenreader liest weiterhin die Quellreihenfolge.
   2. Die Leiste bekommt order:-1 und ist damit das erste sichtbare
      Element. Kopfleiste, Ueberschrift und Begruessung ruecken
      darunter und scrollen unter ihr weg.
   3. padding-top:0 an der App: der Full-Bleed aus P1 setzt oben ein
      Polster von 16 px, und genau dieses Polster waere der "leere
      Raum" ueber den Reitern. Die Modus-Selektoren stehen mit dabei,
      weil ein Attribut-Selektor sonst gewinnt - egal, wer spaeter
      steht.
   4. Kein Gummiband mehr: overscroll-behavior-y:none an html. Damit
      faellt auch das Ueberziehen nach oben weg, das den nackten
      Seitengrund ueber der App zeigte.

   NICHT TEIL DES PLUGINS
   Was das WordPress-Theme UEBER dem Shortcode setzt - Kopfbereich,
   Seitentitel - liegt ausserhalb. Wer die App wirklich ganz oben
   beginnen lassen will, stellt die Tracker-Seite auf ein
   rahmenloses/Full-Width-Template um (Notiz in
   docs/WORKLOG-mobile-r2.md).

   Der Desktop bleibt unberuehrt: ueber 600 px greift nichts davon,
   die Leiste sitzt weiter unter der Kopfleiste.
   ------------------------------------------------------------------- */
@media (max-width:600px) {
    html { overscroll-behavior-y:none; }

    .ddt { display:flex; flex-direction:column; padding-top:0; }
    /* Der Full-Bleed aus P1 setzt das Polster ueber einen
       Attribut-Selektor - der gewinnt gegen .ddt allein, unabhaengig
       von der Reihenfolge. Also hier in derselben Staerke dagegen. */
    .ddt[data-mode=dark], .ddt[data-mode=light], .ddt[data-mode=auto] { padding-top:0; }

    /* Das eine, worauf es ankommt. Alles andere in .ddt bleibt auf
       order:0 und behaelt damit seine Quellreihenfolge. */
    .ddt-tabs { order:-1; }
}

/* Die klebende Leiste sitzt auf dem Handy wirklich am oberen Rand.

   WARUM top:0 UND NICHT DER ADMINLEISTEN-VERSATZ
   WordPress stellt die eigene Adminleiste unter 782 px auf
   position:absolute - sie scrollt dort weg, statt oben zu bleiben.
   Ein Versatz um ihre Hoehe wuerde also genau die leere Luecke ueber
   den Reitern erzeugen, die dieser Fix beseitigen soll. Ueber 782 px
   ist die Leiste fest, und der Versatz von weiter oben gilt
   unveraendert weiter. Die Breite ist WordPress' eigene Grenze,
   nicht unsere - deshalb steht hier 782 und nicht 600. */
@media (max-width:782px) {
    .ddt-tabs { top:0; }
}
@media (display-mode: standalone) and (max-width:782px) {
    /* In der installierten App bleibt nur der Abstand zur Notch. */
    .ddt-tabs { top:env(safe-area-inset-top, 0px); }
}

/* ---------------------------------------------------------------------
   A3  Der Zeitplan bekommt zwei Anordnungen und einen Tipp

   WAS FALSCH WAR
   Unter 600 px klappte die Seitenspalte auf volle Breite: erst die
   Liste, weit darunter der Zeitstrahl. Man sah nie beides zugleich,
   Ziehen war unmoeglich, und einen Termin anzulegen hiess: aufklappen,
   Zeit stellen, Dauer waehlen, einplanen - vier Handgriffe.

   WAS JETZT GILT
   1. Ein Umschalter im Reiter: "Nebeneinander" stellt Pool und
      Zeitstrahl in zwei Spalten, "Untereinander" laesst alles wie
      bisher. Die Wahl liegt in user_meta (get_sched_layout), der
      Server schreibt sie als Klasse is-side / is-stack an
      .ddt-schedule - das Layout entscheidet sich also allein hier im
      CSS, das Markup ist in beiden Faellen dasselbe.
   2. Der Pool-Eintrag ist ein KNOPF geworden. Ein Tipp plant ihn auf
      die naechste freie Halbstunde; die Zeit steht rechts daneben, man
      sieht vorher, wohin er faellt. Das Uhr-Symbol daneben klappt die
      genaue Auswahl auf wie bisher.
   3. Nebeneinander darf auch der Finger ziehen (touch-action:pan-y):
      senkrecht scrollt weiter die Seite, waagerecht - und waagerecht
      liegt genau der Zeitstrahl.

   Der Desktop behaelt beides: Ziehen wie immer, und den Umschalter
   dazu. Untereinander ist dort naemlich auch etwas wert, wenn der
   Zeitstrahl breit sein soll.
   ------------------------------------------------------------------- */

/* Der Umschalter sitzt ueber beiden Spalten - .ddt-schedule ist ein
   Flex-Container, also nimmt er sich ausdruecklich die volle Zeile. */
.ddt-sched-switch { flex:1 1 100%; }
.ddt-sched-switch h4 { margin-top:0; }

/* Der Pool-Eintrag: links der Tipp-Knopf, rechts das Uhr-Symbol.
   flex-wrap, damit die aufgeklappte Zeitauswahl eine eigene Zeile
   bekommt (siehe [open] weiter unten). */
.ddt-sched-pool li[data-id] { display:flex; flex-wrap:wrap; align-items:center;
    gap:var(--ddt-s2); }

/* Der Tipp selbst. Er sieht aus wie Text, nicht wie ein Knopf: er IST
   die Zeile, und eine Liste aus lauter Knoepfen liest sich als Formular
   statt als Liste. Erkennbar bleibt er trotzdem - der Zeiger und die
   Akzentfarbe beim Hovern sagen, dass hier etwas passiert. */
.ddt-sched-tapform { flex:1 1 0; min-width:0; margin:0; }
.ddt-sched-tap { display:flex; width:100%; align-items:baseline; gap:var(--ddt-s2);
    padding:0; border:none; background:none; cursor:pointer;
    color:inherit; font:inherit; text-align:left; }
.ddt-sched-tap:hover { color:var(--ddt-accent-text); }
/* Der Name darf schmaler werden als sein laengstes Wort - sonst
   sprengt eine lange Aufgabe die schmale Spalte. */
.ddt-sched-tap-text { flex:1 1 0; min-width:0; overflow-wrap:anywhere; }
/* Die Zielzeit: leise, aber immer sichtbar. Sie ist die Antwort auf
   "und wohin?", bevor man tippt. */
.ddt-sched-tap-at { flex:0 0 auto; color:var(--ddt-faint);
    font-size:var(--ddt-fs-sm); font-variant-numeric:tabular-nums; }
.ddt-sched-tap:hover .ddt-sched-tap-at { color:var(--ddt-accent-text); }

/* Das Uhr-Symbol daneben - der Weg zur genauen Zeit. */
.ddt-sched-quick > summary { color:var(--ddt-faint); }
.ddt-sched-quick > summary::after { content:none; }
.ddt-sched-quick[open] > summary { color:var(--ddt-accent-text); }
/* Aufgeklappt nimmt sich die Auswahl die ganze naechste Zeile: das
   Zeitfeld und die Dauer brauchen mehr Platz, als neben dem Namen
   uebrig ist. */
.ddt-sched-quick[open] { flex:1 1 100%; }

/* Eine abgehakte Aufgabe bleibt durchgestrichen - der Knopf erbt das
   nicht von selbst, weil er font/color zuruecksetzt. */
.ddt-sched-pool li.is-done .ddt-sched-tap { text-decoration:line-through; }

@media (pointer:coarse) {
    /* Beide Bedienelemente auf volle Trefferhoehe. */
    .ddt-sched-tap { min-height:44px; }
    .ddt-sched-quick > summary { min-width:44px; justify-content:center; }
}

/* --- Nebeneinander --------------------------------------------------
   Die Breakpoint-Staffel weiter oben stellt .ddt-sched-side unter
   600 px auf volle Breite. Das gilt weiterhin - aber nur fuer
   "untereinander". Nebeneinander teilen sich beide Spalten die Breite
   zu gleichen Teilen; min-width:0 ist dabei das Entscheidende, sonst
   waechst eine Flex-Spalte nie unter die Breite ihres Inhalts.

   Die beiden Formulare "Einplanen" und "Zeitfenster" stehen weiterhin
   unter dem Pool in der linken Spalte. Sie sind dort schmal - aber sie
   sind auch nicht mehr der Weg, auf dem man etwas einplant: dafuer gibt
   es den Tipp. Ihre Zeilen duerfen dafuer umbrechen.
   ------------------------------------------------------------------ */
@media (max-width:600px) {
    .ddt-schedule.is-side .ddt-sched-side { flex:1 1 0; min-width:0; }
    .ddt-schedule.is-side .ddt-timeline   { flex:1 1 0; min-width:0; }

    /* Schmale Spalte, kleinere Schrift - und lange Woerter brechen,
       statt die Spalte aufzuspannen. */
    .ddt-schedule.is-side .ddt-sched-tap,
    .ddt-schedule.is-side .ddt-sched-pool li { font-size:var(--ddt-fs-sm); }
    .ddt-schedule.is-side .ddt-sched-tap-at { font-size:var(--ddt-fs-xs); }
    /* Der Name darf umbrechen; die Zielzeit rutscht dann darunter. */
    .ddt-schedule.is-side .ddt-sched-tap { flex-wrap:wrap; align-items:flex-start; }

    /* Auch der Zeitstrahl wird schmal: Uhrzeit und Text im Block
       untereinander statt nebeneinander. */
    .ddt-schedule.is-side .ddt-block-text { font-size:var(--ddt-fs-xs); }

    /* Die Formulare in der schmalen Spalte: jede Zeile darf umbrechen. */
    .ddt-schedule.is-side .ddt-sched-row { flex-wrap:wrap; }
    .ddt-schedule.is-side .ddt-sched-row > * { flex:1 1 100%; min-width:0; }
    .ddt-schedule.is-side .ddt-sched-quickform > * { flex:1 1 100%; min-width:0; }

    /* Und hier darf der Finger ziehen: senkrecht scrollt der Browser
       weiter, waagerecht ist unsere Geste - und waagerecht liegt der
       Zeitstrahl. Untereinander bleibt es bei manipulation, sonst
       liesse sich die Liste nicht mehr scrollen. */
    .ddt-schedule.is-side .ddt-sched-pool li[data-id] { touch-action:pan-y; }
}

/* Das "+"/"−" aus P5 hing an der Beschriftung im <summary>. Die steht
   jetzt im Tipp-Knopf daneben, das <summary> traegt nur noch die Uhr -
   ein Pluszeichen dahinter waere nur noch Rauschen. Beide Zustaende
   einzeln abraeumen: die [open]-Regel von P5 ist die staerkere und
   brauchte sonst nur auf ihren Moment zu warten. */
.ddt-sched-quick[open] > summary::after { content:none; }

/* ---------------------------------------------------------------------
   A4b  Die Mini-Hilfe unter jedem Reiter

   Sie soll da sein, wenn man sie sucht, und sonst nicht auffallen.
   Also: eine einzelne, blasse Zeile, keine Umrandung, kein Kasten -
   erst aufgeklappt bekommt sie eine eigene Flaeche und einen Streifen
   in der Akzentfarbe an der Seite. Zugeklappt darf sie nicht wie ein
   Hinweis aussehen, den man wegklicken muss.

   Das Dreieck kommt von uns, nicht vom Browser: die Standardmarkierung
   sieht in jedem Browser anders aus und laesst sich nicht faerben. Sie
   dreht sich beim Aufklappen - unter prefers-reduced-motion ohne
   Uebergang, den Riegel dafuer setzt der reduce-Block weiter oben.
   ------------------------------------------------------------------- */
.ddt-help { margin:0 0 var(--ddt-s3); }
.ddt-help > summary { display:flex; align-items:center; gap:var(--ddt-s2);
    list-style:none; cursor:pointer; color:var(--ddt-faint);
    font-size:var(--ddt-fs-sm); }
.ddt-help > summary::-webkit-details-marker { display:none; }
/* Das Dreieck. Ein Zeichen statt eines SVG: es ist Teil der Zeile,
   nicht ein Bild darin. */
.ddt-help > summary::before { content:"\25B8"; display:inline-block;
    color:var(--ddt-faint); }
.ddt-help[open] > summary::before { transform:rotate(90deg); }
.ddt-help > summary:hover { color:var(--ddt-text); }
.ddt-help[open] > summary { color:var(--ddt-muted); }
.ddt-help-body { margin:var(--ddt-s2) 0 0; padding:var(--ddt-s3);
    border-left:2px solid var(--ddt-accent); border-radius:var(--ddt-r-sm);
    background:var(--ddt-soft); }
.ddt-help-text { margin:0; color:var(--ddt-muted); font-size:var(--ddt-fs-md);
    line-height:1.5; }
/* Die Beispiele sind Handlungen, keine Aufzaehlung von Merkmalen -
   deshalb kein Punkt davor, sondern ein leiser Pfeil. */
.ddt-help-ex { margin:var(--ddt-s2) 0 0; padding:0; list-style:none; }
.ddt-help-ex li { position:relative; margin:0 0 var(--ddt-s1);
    padding-left:var(--ddt-s4); color:var(--ddt-faint);
    font-size:var(--ddt-fs-sm); line-height:1.45; }
.ddt-help-ex li:last-child { margin-bottom:0; }
.ddt-help-ex li::before { content:"\2192"; position:absolute; left:0;
    color:var(--ddt-accent-text); }

@media (pointer:coarse) {
    /* Aufklappen ist ein Tippziel wie jedes andere. */
    .ddt-help > summary { min-height:44px; }
}

@media (prefers-reduced-motion: no-preference) {
    .ddt-help > summary::before { transition:transform .15s; }
}

/* =====================================================================
   Handy-Runde 3 (ab v3.83.0)

   Dritter Lauf, wieder nach einem Test am echten Geraet. Auch dieser
   Abschnitt steht am ENDE der Datei und korrigiert Regeln weiter oben.
   =================================================================== */

/* ---------------------------------------------------------------------
   A1 (zweiter Anlauf)  Ueber den Reitern liegt NICHTS mehr von der App

   WAS IN RUNDE 2 PASSIERT IST
   Der Kniff dort war richtig, aber zu leise: .ddt wurde eine
   Flex-Spalte und die Leiste bekam order:-1. Die Kopfleiste stand
   damit UNTER den Reitern - sie war aber weiterhin da, gut einen
   Zentimeter hoch, und schob beim Hochscrollen von unten wieder ins
   Bild. Zusammen mit dem Kopfbereich des Themes ergab das die drei bis
   vier Zentimeter, die Marc gesehen hat.

   WAS JETZT GILT (unter 600 px)
   Die App-eigene Kopfzeile verschwindet ganz:

   1. .ddt-appbar wird UNSICHTBAR, aber nicht geloescht. Sie traegt ein
      <h2> mit dem Namen der Anwendung - fuer einen Screenreader ist das
      die Ueberschrift, an der er die App erkennt. clip-path statt
      display:none nimmt ihr den Platz, laesst sie aber im Baum. Das ist
      dasselbe Muster wie bei .ddt-tab-text (P3, Runde 1).
   2. .ddt-head faellt ganz weg. Sie sagt dasselbe wie die Kopfleiste,
      nur groesser, und ist ohnehin abschaltbar - auf einem Telefon ist
      sie reine Wiederholung.
   3. order:-1 an der Leiste BLEIBT. Es kostet nichts und faengt alles
      ab, was kuenftig ueber die Reiter geraet, ohne dass jemand daran
      denkt.

   WAS NICHT DAZUGEHOERT
   Was das WordPress-Theme ueber dem Shortcode zeichnet - Site-Logo,
   Website-Titel, Menue - liegt ausserhalb des Plugins. Steht nach
   diesem Fix noch etwas ueber den Reitern, ist es das Theme; die
   Loesung dafuer ist ein rahmenloses Seitentemplate und keine
   CSS-Regel von uns (docs/WORKLOG-mobile-r3.md).
   ------------------------------------------------------------------- */
@media (max-width:600px) {
    /* Unsichtbar, aber vorhanden - der Name der App bleibt fuer den
       Screenreader die erste Ueberschrift. */
    .ddt-appbar { position:absolute; width:1px; height:1px;
        margin:0; padding:0; overflow:hidden; clip-path:inset(50%);
        white-space:nowrap; border:none; }
    /* Die grosse Wiederholung derselben Worte braucht hier niemand. */
    .ddt-head { display:none; }
}

/* ---------------------------------------------------------------------
   A2  Der Abschnitt „Erweitert“

   Er sieht aus wie die Mini-Hilfe: eine schmale, blasse Zeile, die man
   uebersieht, solange man sie nicht sucht. Der Unterschied ist der
   Abstand darueber - er steht am ENDE des Reiters und soll sich vom
   Vorhergehenden loesen, nicht daran kleben.

   Aufgeklappt bekommt er keinen farbigen Streifen wie die Hilfe: was
   darin steht, sind Werkzeuge, keine Erklaerung. Eine feine Linie
   genuegt, um zu zeigen, dass es dazugehoert.
   ------------------------------------------------------------------- */
.ddt-advanced { margin:var(--ddt-s5) 0 0; border-top:1px solid var(--ddt-border);
    padding-top:var(--ddt-s3); }
.ddt-advanced > summary { display:flex; align-items:center; gap:var(--ddt-s2);
    list-style:none; cursor:pointer; color:var(--ddt-faint);
    font-size:var(--ddt-fs-sm); text-transform:uppercase; letter-spacing:.05em; }
.ddt-advanced > summary::-webkit-details-marker { display:none; }
.ddt-advanced > summary::before { content:"\25B8"; display:inline-block;
    color:var(--ddt-faint); }
.ddt-advanced[open] > summary::before { transform:rotate(90deg); }
.ddt-advanced > summary:hover { color:var(--ddt-text); }
.ddt-advanced[open] > summary { color:var(--ddt-muted); }
/* Die erste Ueberschrift im Inneren braucht keinen Abstand nach oben -
   die Zeile darueber ist schon der Abstand. */
.ddt-advanced-body > h4:first-of-type { margin-top:var(--ddt-s3); }

@media (pointer:coarse) {
    .ddt-advanced > summary, .ddt-consistency > summary { min-height:44px; }
}

@media (prefers-reduced-motion: no-preference) {
    .ddt-advanced > summary::before,
    .ddt-consistency > summary::before { transition:transform .15s; }
}

/* ---------------------------------------------------------------------
   B1  Die Reiterleiste wird durchsichtig, die Icons bleiben lesbar

   WAS FALSCH WAR
   Die klebende Leiste war deckend. Beim Scrollen verschwand der Inhalt
   dahinter vollstaendig - auf einem Telefon ist das ein gutes Stueck
   Bildschirm, das man verliert, und es sieht nach Balken aus, nicht
   nach App.

   DIE SPANNUNG DABEI
   Durchsichtig heisst: hinter den Icons zieht Text vorbei. Genau der
   macht sie unlesbar, wenn man nichts weiter tut. Ein Weichzeichner
   ueber die ganze Leiste waere die uebliche Antwort - aber der nimmt
   einem genau das, was hier gewollt ist: den Inhalt dahinter noch
   entziffern zu koennen.

   WAS JETZT GILT
   Die Leiste selbst wird durchsichtig (62 % der Seitenfarbe). Der
   Inhalt dahinter bleibt damit erkennbar. Die Lesbarkeit der Icons
   kommt nicht von der Leiste, sondern von den Icons selbst - jedes
   bekommt seine eigene kleine Scheibe:

   1. Eine runde Flaeche hinter dem Symbol (::before), deutlich
      deckender als die Leiste und mit einem KLEINEN Weichzeichner
      dahinter. Weichgezeichnet wird also nur der Fleck hinter dem
      Icon, nicht die halbe Seite.
   2. Zusaetzlich ein Lichthof direkt am Strich des Symbols
      (drop-shadow in der Seitenfarbe). Der wirkt auch dort, wo es
      backdrop-filter nicht gibt - und das ist der eigentliche Grund
      fuer ihn: die Scheibe ist die Kuer, der Lichthof die Pflicht.
   3. Der offene Reiter bekommt eine Scheibe in der Akzentfarbe. Er
      war bisher an Farbe und Unterstrich zu erkennen; beides bleibt,
      die Scheibe macht ihn zusaetzlich auf einen Blick auffindbar.

   RUECKFALL UND RUECKSICHT
   Vor jeder color-mix-Zeile steht dieselbe Deklaration in der reinen
   Variablen: ein Browser, der color-mix nicht kennt, behaelt die
   deckende Leiste - haesslicher, aber lesbar. Und wer im System
   „Transparenz reduzieren“ eingestellt hat, bekommt sie ebenfalls
   deckend. Lesbarkeit hat Vorrang.
   ------------------------------------------------------------------- */

/* Die Leiste. Erst der Rueckfall, dann die durchsichtige Fassung.

   ZWEI STUFEN, UND ZWAR AUS EINEM GERECHNETEN GRUND
   Auf dem Handy traegt die Leiste nur Symbole, und jedes bekommt seine
   eigene Scheibe (unten). Unter der Scheibe liegen dann 80 % Scheibe
   ueber 62 % Leiste, zusammen ueber 92 % Seitenfarbe - der Kontrast des
   Symbols faellt im schlechtesten Fall auf 5,25:1 und bleibt damit weit
   ueber den 4,5:1, die ein Text braucht. 62 % sind hier also gefahrlos,
   und man sieht viel vom Inhalt dahinter.

   Am Schreibtisch steht in der Leiste TEXT, und Text bekommt keine
   Scheibe - ein Kaestchen hinter jeder Beschriftung saehe aus wie ein
   Fehler. Bei 62 % faellt die Beschriftung eines geschlossenen Reiters
   dort auf 2,3:1: unlesbar. Deshalb bleibt die Leiste ueber 600 px bei
   92 %, schlechtester Fall 5,20:1. Das ist nur noch ein Hauch
   Durchsicht - aber Lesbarkeit hat Vorrang, und am Schreibtisch war
   der verdeckte Inhalt ohnehin nie das Problem.

   Nachgerechnet in tests/test-contrast.php, Abschnitt "Durchsichtige
   Reiterleiste". Wer die Prozente aendert, aendert sie dort mit - der
   Test rechnet sie aus dem Stylesheet heraus. */
.ddt-tabs { background:var(--ddt-page); }
.ddt-tabs { background:color-mix(in srgb, var(--ddt-page) 92%, transparent); }

@media (max-width:600px) {
    .ddt-tabs { background:var(--ddt-page); }
    .ddt-tabs { background:color-mix(in srgb, var(--ddt-page) 62%, transparent); }
}

/* Der Lichthof am Strich - gilt ueberall, auch neben dem Text auf dem
   Desktop, und braucht keine neue Technik. */
.ddt-tab .ddt-icon { filter:drop-shadow(0 0 2px var(--ddt-page)); }

@media (max-width:600px) {
    /* Auf dem Handy traegt die Leiste nur Symbole - hier lohnt die
       Scheibe. Neben einer Beschriftung saehe sie fehl am Platz aus. */
    .ddt-tab { position:relative; }
    .ddt-tab::before {
        content:""; position:absolute; left:50%; top:50%;
        width:2.1em; height:2.1em; transform:translate(-50%, -50%);
        border-radius:var(--ddt-r-pill);
        /* z-index:-1 legt die Scheibe hinter das Symbol, aber vor die
           Flaeche der Leiste. Das geht auf, weil .ddt-tabs mit
           position:sticky und z-index einen eigenen Stapel aufmacht. */
        z-index:-1;
        background:var(--ddt-page);
        background:color-mix(in srgb, var(--ddt-page) 80%, transparent);
        -webkit-backdrop-filter:blur(6px);
        backdrop-filter:blur(6px);
    }
    /* Der offene Reiter: Scheibe in der Akzentfarbe, deckend. */
    .ddt-tab.is-active::before {
        background:var(--ddt-soft);
        background:color-mix(in srgb, var(--ddt-accent) 18%, var(--ddt-page));
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
}

/* Wer Transparenz abbestellt hat, bekommt die deckende Leiste zurueck -
   in beiden Teilen, sonst schwebten die Scheiben auf einer deckenden
   Flaeche. */
@media (prefers-reduced-transparency: reduce) {
    .ddt-tabs { background:var(--ddt-page); }
    .ddt-tab::before { background:var(--ddt-page);
        -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ---------------------------------------------------------------------
   B2  Koerpergewichts-Uebungen

   Der Schalter steht ueber den Feldern, die er abschaltet - man
   entscheidet zuerst, worum es geht, und fuellt dann aus, was uebrig
   bleibt. Er sieht aus wie eine Zeile Text mit Kaestchen, nicht wie ein
   Formularfeld: es ist eine Eigenschaft der Uebung, keine Eingabe.
   ------------------------------------------------------------------- */
.ddt-ex-bw { display:flex; align-items:center; gap:var(--ddt-s2);
    margin:0 0 var(--ddt-s2); cursor:pointer;
    font-size:var(--ddt-fs-md); color:var(--ddt-muted); }
.ddt-ex-bw input[type=checkbox] { flex:0 0 auto; width:1.2em; height:1.2em; margin:0; }
.ddt-ex-bw span { min-width:0; }
/* Der Block, der beim Umschalten verschwindet. Er hat keine eigene
   Optik - er ist nur die Klammer um Gewicht und Steigerung. */
.ddt-ex-weight { display:contents; }
.ddt-ex-weight[hidden] { display:none; }

/* Die Marke „Körpergewicht“ in den Bestleistungen steht dort, wo sonst
   der 1RM steht - also in derselben Zeile, aber ohne dessen Gewicht. */
.ddt-pr-bw { font-style:italic; }

@media (pointer:coarse) {
    /* Das Kaestchen ist ein Tippziel wie jedes andere. */
    .ddt-ex-bw { min-height:44px; }
    .ddt-ex-bw input[type=checkbox] { width:1.5em; height:1.5em; }
}

/* ---------------------------------------------------------------------
   ZWISCHENBEMERKUNG ZU DEN FARBIGEN RAENDERN (Konsistenz-Durchgang C8)

   Im Stylesheet gibt es zwei Breiten fuer den farbigen Streifen links,
   und das ist Absicht, keine Schlamperei:

     3px  eine MELDUNG, die eine eigene Zeile einnimmt und den Blick
          holen soll - der Tagesgruss und das Maskottchen.
     2px  ein UNTERGEORDNETER Block, der zu etwas darueber gehoert -
          die Routinen, die Konfigurationsfelder, die Mini-Hilfe.

   Wer sie zu einer Breite zusammenzieht, nimmt der Oberflaeche genau
   diese Unterscheidung. Also stehen lassen.
   ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   B3  Das Maskottchen

   Eine Zeile, kein Kasten: Gesicht links, Satz daneben, das Ausblenden
   rechts. Es soll da sein, ohne den Reiter anzufuehren - die Zahlen
   darunter sind die Hauptsache.

   Die Farbe kommt aus der Stimmung, aber leise: eine ruhige Flaeche
   und ein farbiger Rand links. Die Staffel laeuft gruen - neutral -
   bernstein - gedaempftes Rot und nutzt die Status-Farben, die das
   Plugin ohnehin hat. Gefaerbt werden nur Rand und Gesicht; der Text
   bleibt in der Lesefarbe. Ein Kasten, der als Ganzes rot leuchtet,
   waere ein Alarm - und ein Alarm ist es ausdruecklich nicht.
   ------------------------------------------------------------------- */
.ddt-mood { display:flex; align-items:center; gap:var(--ddt-s3);
    margin:0 0 var(--ddt-s4); padding:var(--ddt-s3);
    border-radius:var(--ddt-r-md); border-left:3px solid var(--ddt-border2);
    background:var(--ddt-sunk); }
.ddt-mood-face { flex:0 0 auto; display:inline-flex; color:var(--ddt-muted); }
.ddt-mood-icon { width:28px; height:28px; }
.ddt-mood-text { flex:1 1 auto; min-width:0; margin:0;
    font-size:var(--ddt-fs-md); line-height:1.4; color:var(--ddt-muted); }
.ddt-mood-x { flex:0 0 auto; margin:0; }
.ddt-mood-close { border:none; background:none; color:var(--ddt-faint);
    line-height:1; padding:var(--ddt-s1); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; }
.ddt-mood-close:hover { color:var(--ddt-text); }

/* Die vier Stimmungen. Nur Rand und Gesicht faerben sich - der Text
   bleibt in der Lesefarbe, damit er lesbar bleibt. */
.ddt-mood.is-happy   { border-left-color:var(--ddt-ok-text); }
.ddt-mood.is-happy   .ddt-mood-face { color:var(--ddt-ok-text); }
.ddt-mood.is-neutral { border-left-color:var(--ddt-border2); }
.ddt-mood.is-sad     { border-left-color:var(--ddt-warn-text); }
.ddt-mood.is-sad     .ddt-mood-face { color:var(--ddt-warn-text); }
.ddt-mood.is-verysad { border-left-color:var(--ddt-danger); }
.ddt-mood.is-verysad .ddt-mood-face { color:var(--ddt-danger); }

@media (pointer:coarse) {
    .ddt-mood-close { min-width:44px; min-height:44px; }
}

/* ---------------------------------------------------------------------
   B4  Die Ansicht fuer Ausgeloggte

   Sie ist fuer viele das ERSTE, was sie von der App sehen. Also nicht
   die Fehlermeldung, die sie vorher war, sondern eine ruhige Karte:
   Zeichen, Name, ein Satz, ein Knopf.

   Sie steht mittig und schmal - auf dem Handy wie am Schreibtisch
   dasselbe Bild. Der Knopf traegt die Akzentfarbe, der Registrieren-Link
   darunter nicht: es ist eine Entscheidung mit einer klaren Hauptsache.
   ------------------------------------------------------------------- */
.ddt-gate { display:flex; justify-content:center; }
/* box-sizing ist hier keine Kosmetik: 340px Kasten plus zweimal 16px
   Polster waeren 372px - auf einem 360px-Schirm zwoelf Pixel, die
   seitlich hinauslaufen. Genau so ein Fehler faellt am Schreibtisch
   nie auf. */
.ddt-gate-box { box-sizing:border-box; display:flex; flex-direction:column;
    align-items:center; gap:var(--ddt-s3); max-width:340px; width:100%;
    padding:var(--ddt-s6) var(--ddt-s4); text-align:center; }
.ddt-gate-mark { display:inline-flex; color:var(--ddt-accent-text); }
.ddt-gate-mark svg { width:44px; height:44px; }
.ddt-gate-title { margin:0; font-size:22px; line-height:1.2; color:var(--ddt-text); }
.ddt-gate-text { margin:0; font-size:var(--ddt-fs-lg); line-height:1.5;
    color:var(--ddt-muted); }
.ddt-gate-btn { display:block; width:100%; box-sizing:border-box;
    margin-top:var(--ddt-s2); padding:var(--ddt-s3) var(--ddt-s4);
    border-radius:var(--ddt-r-md); background:var(--ddt-accent);
    color:#fff; font-size:var(--ddt-fs-xl); font-weight:600;
    text-decoration:none; }
.ddt-gate-btn:hover { background:var(--ddt-accent-strong); color:#fff; }
.ddt-gate-link { font-size:var(--ddt-fs-md); color:var(--ddt-accent-text); }
.ddt-gate-note { margin:var(--ddt-s3) 0 0; font-size:var(--ddt-fs-sm);
    line-height:1.5; color:var(--ddt-faint); }

@media (pointer:coarse) {
    .ddt-gate-btn  { min-height:44px; }
    .ddt-gate-link { display:inline-flex; align-items:center; min-height:44px; }
}

/* =====================================================================
   Handy-Runde 4 (ab v3.99.0)

   Vierter Lauf nach einem Test am echten Geraet. Wie in den Runden
   davor steht dieser Abschnitt am ENDE der Datei: jede Regel hier
   korrigiert etwas weiter oben und gewinnt bei gleicher Spezifitaet,
   weil sie spaeter steht. Nicht nach oben sortieren.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A1 (dritter Anlauf)  Die Reiter sind die oberste Kante

   WAS NACH RUNDE 3 UEBRIG WAR
   Alles, was dem Plugin gehoerte, war weg: Kopfleiste unsichtbar,
   Ueberschrift geloescht, Leiste auf order:-1, kein Polster mehr. Was
   BLIEB, gehoert dem WordPress-Theme: Site-Logo, Website-Titel, Menue,
   Seitenueberschrift. Das steht im Dokument VOR dem Shortcode, und aus
   .ddt heraus kommt kein Selektor daran.

   WAS JETZT GILT (unter 600 px, nur mit eingeschaltetem Vollbild)
   appTop() in assets/ddt.js markiert beim Laden alles, was im Dokument
   vor der App steht, mit .ddt-above und die Behaelter auf dem Weg mit
   .ddt-host. Hier steht, was daraus folgt:

   1. .ddt-above verschwindet. display:none und nicht clip-path - das
      sind fremde Elemente, kein Teil unserer Vorlese-Reihenfolge, und
      sie sollen auch keinen Platz mehr belegen.
   2. .ddt-host verliert sein oberes Polster. Ohne das bliebe genau
      dort die Luecke stehen, die der Fix beseitigen soll.
      :not(body) ist wichtig: am <body> haengt in der installierten App
      das Polster gegen die Notch (display-mode: standalone weiter
      oben), und das muss bleiben.
   3. !important, weil hier gegen fremdes Theme-CSS gearbeitet wird -
      dessen Spezifitaet kennen wir nicht. Das ist der eine Ort im
      Stylesheet, an dem das gerechtfertigt ist.

   Ueber 600 px ist die Klasse folgenlos: die Kopfleiste des Themes
   steht dort, wo sie hingehoert, und die App ist wieder eine Karte in
   einer Seite. Deshalb muss appTop() beim Drehen auch nichts neu
   rechnen.
   ------------------------------------------------------------------- */
@media (max-width:600px) {
    .ddt-above { display:none !important; }
    .ddt-host:not(body) { padding-top:0 !important; margin-top:0 !important; }
}

/* ---------------------------------------------------------------------
   B  Die Aufgaben-Sammlung

   Sie sieht aus wie "Metriken verwalten" im Statistik-Reiter und wie
   "Erweitert" darunter: eine schmale, blasse Zeile, die man uebersieht,
   solange man sie nicht sucht. Der Reiter gehoert dem heutigen Tag.

   EINE ZEILE, DREI TEILE
   Name (waechst), Schalter (fest), Loeschen (fest). Der Name bekommt
   min-width:0, sonst wird die Flex-Spalte nie schmaler als ihr laengstes
   Wort und der Loeschknopf rutscht auf 360 px aus der Zeile - derselbe
   Fehler wie bei .ddt-toggle in Runde 1 (P4).

   Eine ruhende Aufgabe wird blasser und kursiv gesetzt, nicht
   durchgestrichen: durchgestrichen heisst in dieser App "erledigt", und
   das ist etwas anderes. Die Farbe allein traegt die Auskunft nicht -
   der Schalter daneben sagt sie in Worten ("Im Tag" / "Ruht").
   ------------------------------------------------------------------- */
.ddt-collection { margin:var(--ddt-s5) 0 0; border-top:1px solid var(--ddt-border);
    padding-top:var(--ddt-s3); }
.ddt-collection > summary { display:flex; align-items:center; gap:var(--ddt-s2);
    list-style:none; cursor:pointer; color:var(--ddt-faint);
    font-size:var(--ddt-fs-sm); text-transform:uppercase; letter-spacing:.05em; }
.ddt-collection > summary::-webkit-details-marker { display:none; }
.ddt-collection > summary::before { content:"\25B8"; display:inline-block;
    color:var(--ddt-faint); }
.ddt-collection[open] > summary::before { transform:rotate(90deg); }
.ddt-collection > summary:hover { color:var(--ddt-text); }
.ddt-collection[open] > summary { color:var(--ddt-muted); }

.ddt-coll-list { list-style:none; margin:var(--ddt-s3) 0 0; padding:0; }
.ddt-coll-list li { display:flex; align-items:center; gap:var(--ddt-s2);
    padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-md); margin-bottom:var(--ddt-s1);
    background:var(--ddt-surface); }
.ddt-coll-name { flex:1 1 0; min-width:0; color:var(--ddt-text);
    font-size:var(--ddt-fs-lg); overflow-wrap:anywhere; }
.ddt-coll-list li.is-resting { background:var(--ddt-sunk); }
.ddt-coll-list li.is-resting .ddt-coll-name { color:var(--ddt-muted); font-style:italic; }
.ddt-coll-toggle, .ddt-coll-del { flex:0 0 auto; margin:0; }
.ddt-coll-toggle .ddt-toggle-btn { white-space:nowrap; }

/* ---------------------------------------------------------------------
   C  Ziele und der woechentliche Check-in

   DER CHECK-IN IST DAS ERSTE, WAS MAN SIEHT
   Eine Frage, drei Knoepfe, darunter acht Kaestchen. Die Knoepfe teilen
   sich die Zeile zu gleichen Teilen (flex:1 1 0 an den FORMULAREN -
   jeder Knopf steckt wegen des Nonce in einem eigenen form, genau wie
   bei der Zufriedenheits-Skala). Auf 360 px bleiben sie damit in einer
   Reihe, statt umzubrechen.

   DIE FARBE TRAEGT DIE AUSKUNFT NICHT ALLEIN
   Jedes Kaestchen im Verlauf hat einen title UND einen vorlesbaren
   Namen (.ddt-sr). Wer die Farben nicht unterscheidet, liest sie.
   Die drei Zustaende nehmen die vorhandenen Status-Paare: ok fuer ja,
   warn fuer teilweise, bad fuer nein - dieselben, die auch die
   Import-Meldungen und die Tages-Hinweise benutzen.

   Die drei Zeitraeume sind <details> und keine Umschalter: siehe die
   Begruendung in render_goals().
   ------------------------------------------------------------------- */
.ddt-sr { position:absolute; width:1px; height:1px; margin:0; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.ddt-goals { margin-top:var(--ddt-s5); }
.ddt-goal-checkin { padding:var(--ddt-s3); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-md); background:var(--ddt-surface);
    margin-bottom:var(--ddt-s3); }
.ddt-goal-q { margin:0 0 var(--ddt-s2); color:var(--ddt-text); font-size:var(--ddt-fs-lg); }
.ddt-goal-btns { display:flex; flex-wrap:nowrap; gap:var(--ddt-s2); }
.ddt-goal-btns > form { flex:1 1 0; min-width:0; margin:0; }
.ddt-goal-btn { width:100%; min-height:36px; padding:var(--ddt-s2) var(--ddt-s2);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text); cursor:pointer;
    font-size:var(--ddt-fs-md); }
.ddt-goal-btn:hover { border-color:var(--ddt-accent); }
.ddt-goal-btn.is-yes.is-on    { background:var(--ddt-ok-bg);   border-color:var(--ddt-ok-bg-hover); }
.ddt-goal-btn.is-partly.is-on { background:var(--ddt-warn-bg); border-color:var(--ddt-warn-border); color:var(--ddt-warn-text); }
.ddt-goal-btn.is-no.is-on     { background:var(--ddt-bad-bg);  border-color:var(--ddt-bad-border); }
.ddt-goal-hint { margin:var(--ddt-s2) 0 0; color:var(--ddt-faint); font-size:var(--ddt-fs-sm); }

.ddt-goal-trail { display:flex; gap:var(--ddt-s1); list-style:none;
    margin:var(--ddt-s3) 0 0; padding:0; }
.ddt-goal-dot { flex:1 1 0; min-width:0; height:10px; border-radius:var(--ddt-r-xs);
    border:1px solid var(--ddt-border2); background:var(--ddt-sunk); }
.ddt-goal-dot.is-yes    { background:var(--ddt-ok-bg);   border-color:var(--ddt-ok-bg-hover); }
.ddt-goal-dot.is-partly { background:var(--ddt-warn-bg); border-color:var(--ddt-warn-border); }
.ddt-goal-dot.is-no     { background:var(--ddt-bad-bg);  border-color:var(--ddt-bad-border); }

.ddt-goal-group { border:1px solid var(--ddt-border); border-radius:var(--ddt-r-md);
    margin-bottom:var(--ddt-s2); background:var(--ddt-surface);
    padding:var(--ddt-s2) var(--ddt-s3); }
.ddt-goal-group > summary { cursor:pointer; color:var(--ddt-text);
    font-size:var(--ddt-fs-lg); }
.ddt-goal-now { margin:var(--ddt-s2) 0; color:var(--ddt-faint); font-size:var(--ddt-fs-sm); }
.ddt-goal-list { list-style:none; margin:0 0 var(--ddt-s2); padding:0; }
.ddt-goal-list li { display:flex; align-items:center; gap:var(--ddt-s2);
    margin-bottom:var(--ddt-s1); }
.ddt-goal-edit { display:flex; flex:1 1 0; min-width:0; gap:var(--ddt-s2); margin:0; }
.ddt-goal-edit input[type=text] { flex:1 1 0; min-width:0;
    padding:var(--ddt-s2) var(--ddt-s2); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-text);
    font-size:var(--ddt-fs-md); }
.ddt-goal-edit button { flex:0 0 auto; padding:var(--ddt-s2) var(--ddt-s3);
    border:1px solid var(--ddt-border2); border-radius:var(--ddt-r-sm);
    background:var(--ddt-surface); color:var(--ddt-text); cursor:pointer;
    font-size:var(--ddt-fs-md); }
.ddt-goal-del { flex:0 0 auto; margin:0; }
.ddt-goal-add { display:flex; gap:var(--ddt-s2); margin:0; }
.ddt-goal-add input[type=text] { flex:1 1 0; min-width:0;
    padding:var(--ddt-s2) var(--ddt-s3); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-sm); background:var(--ddt-surface); color:var(--ddt-text);
    font-size:var(--ddt-fs-md); }
.ddt-goal-add button { flex:0 0 auto; padding:var(--ddt-s2) var(--ddt-s4);
    border:none; border-radius:var(--ddt-r-sm); background:var(--ddt-solid);
    color:#fff; cursor:pointer; font-size:var(--ddt-fs-md); }

/* Auf dem Handy bekommen die Zeilen zwei Reihen: Feld und Knopf
   nebeneinander waeren beide zu schmal, um sie zu treffen. */
@media (max-width:600px) {
    .ddt-goal-list li { flex-wrap:wrap; }
    .ddt-goal-edit { flex:1 1 100%; }
    .ddt-goal-add { flex-wrap:wrap; }
    .ddt-goal-add input[type=text] { flex:1 1 100%; }
    .ddt-goal-add button { flex:1 1 100%; }
}

/* ---------------------------------------------------------------------
   D  Die Sport-Statistik in Klartext

   DIE UEBERSICHTS-KARTE steht ganz oben und beantwortet drei Fragen:
   wie oft, woran, wo besser. Sie ist eine Karte und keine Tabelle -
   Tabellen liest man, Karten sieht man.

   DIE FORTSCHRITTS-ZEILE hat drei Teile: Name (waechst), sprechender
   Wert (fest), Pfeil mit Prozent (fest). Der Name bekommt min-width:0,
   sonst wird die Flex-Spalte nie schmaler als ihr laengstes Wort und
   der Pfeil rutscht auf 360 px aus der Zeile.

   DIE PFEILFARBE IST NIE DIE EINZIGE AUSKUNFT. Neben jedem Pfeil steht
   die Prozentzahl, und im Markup steht das Wort dazu (.ddt-sr, nur fuer
   Vorlese-Programme). Die Richtung sagt ausserdem schon das Zeichen
   selbst - Pfeil hoch heisst in dieser App immer besser, auch beim
   Tempo, wo die kleinere Zahl die schnellere ist.

   Farben: die vorhandenen Status-Paare. Neue Hex-Werte gibt es hier
   nicht - tests/test-css.php laesst sie ohnehin nicht durch.
   ------------------------------------------------------------------- */
.ddt-glance { padding:var(--ddt-s3); border:1px solid var(--ddt-border);
    border-radius:var(--ddt-r-md); background:var(--ddt-surface);
    margin-bottom:var(--ddt-s3); }
.ddt-glance-lead { margin:0; color:var(--ddt-text); font-size:var(--ddt-fs-lg);
    line-height:1.4; }
.ddt-glance-lead strong { color:var(--ddt-accent-text); }

.ddt-glance-split { display:flex; flex-wrap:wrap; gap:var(--ddt-s2);
    list-style:none; margin:var(--ddt-s3) 0 0; padding:0; }
.ddt-glance-split li { display:flex; align-items:baseline; gap:var(--ddt-s1);
    padding:var(--ddt-s1) var(--ddt-s3); border:1px solid var(--ddt-border2);
    border-radius:var(--ddt-r-pill); background:var(--ddt-sunk); }
.ddt-glance-name { color:var(--ddt-text); font-size:var(--ddt-fs-md); }
/* Die Anzahl steht NICHT in der Akzentfarbe. Auf der vertieften Pille
   faellt sie bei zwei der fuenf Schemen unter 4,5:1 (ocean 4,38, sunset
   4,13) - nachgerechnet in tests/test-contrast.php. Fett genuegt: die
   Zahl ist ohnehin das kurze Wort in der Zeile. */
.ddt-glance-count { color:var(--ddt-text); font-size:var(--ddt-fs-md);
    font-weight:700; }

.ddt-glance-head { margin:var(--ddt-s4) 0 var(--ddt-s2); color:var(--ddt-muted);
    font-size:var(--ddt-fs-sm); text-transform:uppercase; letter-spacing:.05em; }

.ddt-prog-list { list-style:none; margin:0; padding:0; }
.ddt-prog { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--ddt-s2);
    padding:var(--ddt-s2) 0; border-bottom:1px solid var(--ddt-border); }
.ddt-prog:last-child { border-bottom:none; }
.ddt-prog-name { flex:1 1 0; min-width:0; color:var(--ddt-text);
    font-size:var(--ddt-fs-lg); overflow-wrap:anywhere; }
.ddt-prog-val { flex:0 0 auto; color:var(--ddt-text); font-size:var(--ddt-fs-lg);
    font-weight:700; }
.ddt-prog-trend { flex:0 0 auto; display:inline-flex; align-items:baseline;
    gap:var(--ddt-s1); padding:var(--ddt-s1) var(--ddt-s2);
    border-radius:var(--ddt-r-pill); font-size:var(--ddt-fs-md);
    background:var(--ddt-sunk); color:var(--ddt-muted); }
.ddt-prog-trend.is-up   { background:var(--ddt-ok-bg);   color:var(--ddt-ok-text); }
.ddt-prog-trend.is-down { background:var(--ddt-bad-bg);  color:var(--ddt-danger); }
.ddt-prog-trend.is-flat { background:var(--ddt-sunk);    color:var(--ddt-muted); }
.ddt-prog-from { flex:1 1 100%; color:var(--ddt-faint); font-size:var(--ddt-fs-sm); }

/* Auf dem Handy bekommt der Wert eine eigene Zeile: Name und Wert
   nebeneinander waeren beide zu kurz, um sie zu lesen. */
@media (max-width:600px) {
    .ddt-prog-name { flex:1 1 100%; }
    .ddt-glance-split li { flex:1 1 auto; }
}

/* Die neuen Bedienelemente unter dem Daumen (Runde 4).

   Die Regel weiter oben (@media pointer:coarse, ab v3.61.0) zaehlt
   Klassen einzeln auf - sie kann die aus dieser Runde also nicht
   kennen. .ddt-toggle-btn war schon dabei und deckt damit den
   Sammlungs-Schalter mit ab; hier kommen die Ziel-Knoepfe dazu.

   Der Check-in-Knopf steht bewusst NICHT in der Aufzaehlung dort
   oben: er hat schon eine eigene Mindesthoehe, und drei Knoepfe
   nebeneinander auf 360 px brauchen die volle Breite mehr als die
   volle Hoehe. 44 px bekommt er hier trotzdem - er ist die eine
   Frage, die man jede Woche beantwortet. */
@media (pointer:coarse) {
    .ddt-goal-btn, .ddt-goal-edit button, .ddt-goal-add button,
    .ddt-goal-add input[type=text], .ddt-goal-edit input[type=text] { min-height:44px; }
}