/* SmallAndOften – Aussehen
   Farben und Abstände stehen als Variablen ganz oben (:root).
   Wer das Aussehen anpassen will, ändert am besten nur die.
   Aufbau: Grundlagen → Bausteine → Ansichten → mobile Anpassungen */

:root{
  /* Platz, den die untere Navigationsleiste einnimmt. Auf dem Rechner sitzt
     sie oben, dort ist der Wert 0. Alles, was unten schwebt (Notizzettel,
     Musikknopf, Meldungen, Installier-Balken), rechnet ab jetzt mit DIESEM
     Wert - dadurch kann sich nichts mehr dahinter verstecken. */
  --navraum: 0px;
  /* Groesse der schwebenden Knoepfe. Als Variable, weil ihre Grundregeln
     weiter unten im Blatt stehen als der Mobil-Block - ein direkter Wert
     dort wuerde vom spaeteren wieder ueberschrieben. */
  --fabgroesse: 52px;
  --bg:#eef1f5; --card:#ffffff; --ink:#1d2530; --muted:#68727f;
  --line:#dbe1e8; --hover:rgba(29,37,48,.04);
  --accent:#c9860f; --accent-ink:#241a05; --accent-soft:#f6ead0;
  --green:#2e8b61; --red:#c14b4b; --amber:#a97b12;
  /* Der Urlaubston. Es ist derselbe Gruenton, den das ganze
     Urlaubsthema als Akzent nimmt - damit ein Urlaubstag im
     Kalender dieselbe Farbe traegt wie die App an dem Tag. */
  --gruen-urlaub:#3f7d5c;
  /* Der Wachstumston der Microhabits (8.5). Eigene Variablen statt
     color-mix: Das gaebe es auf aelteren iOS-Geraeten nicht, und der
     Kasten stuende dort ohne Fuellung da. */
  --mikro-weich:#e6f2eb; --mikro-rand:#bcdccb;
  /* Krank (8.7): ein gedaempftes Schieferblau - kein Rot. Rot heisst
     in dieser App "nicht geschafft", und Kranksein ist das nicht. */
  --krank-ton:#56688a;
  --morgen:#e0873c; --mittag:#3d7bbf; --abend:#7b6bd6;
  /* Die acht Dimensionen (7.0). Die Kennungen stehen in
     LEBENSBEREICHE (01-basis.js); wer dort eine aendert, muss hier
     mit. Gedaempfte Toene mit Absicht: Acht kraeftige Farben
     nebeneinander sind ein Farbkasten und kein Bild.
     --morgen/--mittag/--abend bleiben unberuehrt. */
  --dim-finanzen:#c9903c; --dim-bildung:#5b87c4; --dim-familie:#cf7a70;
  --dim-beruf:#6f8298;    --dim-sport:#4f9e6f;   --dim-person:#9b7ac4;
  --dim-geist:#4aa3a8;    --dim-sonst:#98a2b1;
  --shadow:0 1px 2px rgba(29,37,48,.05),0 10px 26px -14px rgba(29,37,48,.16);
  --radius:14px;
  /* Ohne diese beiden Zeilen zeichnet der Browser alles, was er selbst
     macht, in seinem eigenen Geschmack: das Kalendersymbol im
     Datumsfeld, das Auswahlfenster dahinter, die Pfeile am Zahlenfeld,
     Haken und Radioknoepfe. Im dunklen Design hiess das ein schwarzes
     Symbol auf dunklem Grund und ein WEISSES Kalenderfenster. Genau
     das sah "gar nicht nach dem Rest" aus.
     color-scheme sagt ihm, in welchem Licht er zeichnen soll,
     accent-color gibt ihm unsere Farbe dafuer. */
  color-scheme:light;
  accent-color:var(--accent);
  /* Grundgroesse aller Texte. Alle Schriftgroessen im Stylesheet rechnen in
     rem, haengen also an diesem einen Wert. Wird ueber Darstellung gesetzt. */
  --root-fs:16px;
  --app-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --head-font:"Avenir Next","Segoe UI Variable Display","Trebuchet MS",system-ui,sans-serif;
}
/* ---------- Vier Stufen fuer die Schriftgroesse ---------- */
:root[data-fs="s"] {--root-fs:14.4px}
:root[data-fs="m"] {--root-fs:16px}
:root[data-fs="l"] {--root-fs:17.8px}
:root[data-fs="xl"]{--root-fs:19.8px}
/* ---------- Schriftarten: nur im System vorhandene, nichts wird geladen ---------- */
:root[data-font="serif"]{
  --app-font:Georgia,"Iowan Old Style","Times New Roman",serif;
  --head-font:Georgia,"Iowan Old Style","Times New Roman",serif;
}
:root[data-font="lesbar"]{
  --app-font:Verdana,Tahoma,"DejaVu Sans",sans-serif;
  --head-font:Verdana,Tahoma,"DejaVu Sans",sans-serif;
}
:root[data-font="technisch"]{
  --app-font:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
  --head-font:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
}
:root[data-theme=dark]{
  --dim-finanzen:#dcab5f; --dim-bildung:#84a9df; --dim-familie:#e3948b;
  --dim-beruf:#93a5b9;  --dim-sport:#6dbd8d;   --dim-person:#b79ada;
  --dim-geist:#68c1c6;  --dim-sonst:#aab3c0;
  --bg:#12161e; --card:#1a2029; --ink:#e8ecf3; --muted:#8d97a6;
  --line:#2b3340; --hover:rgba(232,236,243,.05);
  --accent:#e3a83c; --accent-ink:#241a05; --accent-soft:#3a2f17;
  --green:#57b184; --red:#e07474; --amber:#d9ab4e;
  --gruen-urlaub:#69b98d;
  --mikro-weich:#1b2b24; --mikro-rand:#2f5344;
  --krank-ton:#93a2c0;
  --morgen:#efa35c; --mittag:#6aa3dd; --abend:#a396e6;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -14px rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --dim-finanzen:#dcab5f; --dim-bildung:#84a9df; --dim-familie:#e3948b;
    --dim-beruf:#93a5b9;    --dim-sport:#6dbd8d;   --dim-person:#b79ada;
    --dim-geist:#68c1c6;    --dim-sonst:#aab3c0;
    --bg:#12161e; --card:#1a2029; --ink:#e8ecf3; --muted:#8d97a6;
    --line:#2b3340; --hover:rgba(232,236,243,.05);
    --accent:#e3a83c; --accent-ink:#241a05; --accent-soft:#3a2f17;
    --green:#57b184; --red:#e07474; --amber:#d9ab4e;
    --gruen-urlaub:#69b98d;
    --mikro-weich:#1b2b24; --mikro-rand:#2f5344;
  --krank-ton:#93a2c0;
    --morgen:#efa35c; --mittag:#6aa3dd; --abend:#a396e6;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -14px rgba(0,0,0,.55);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{font-size:var(--root-fs)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--app-font);
  font-size:.9688rem;line-height:1.55;
  transition:background .3s,color .3s;
}
h1,h2,h3,.datelabel strong{
  font-family:var(--head-font);
  letter-spacing:-.01em;margin:0;
}
.mono{font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace}
/* 7.5: Kein Knopf ist Text zum Markieren. Wer beim Tippen ein paar
   Pixel verrutscht - auf dem Handy also fast immer -, zog sonst
   die blaue Auswahl ueber Symbol und Beschriftung, und der Klick
   kam gar nicht erst an. */
button{font:inherit;cursor:pointer;color:inherit;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{max-width:680px;margin:0 auto;padding:22px 16px calc(var(--navraum) + 40px)}
/* Bis die Übersetzungsdatei da ist, wird nichts gezeigt – sonst
   blitzt bei einem englischen Nutzer die deutsche Fassung auf.
   Freigegeben wird in 07-start.js; die index.html hat eine Uhr
   als Rückversicherung. visibility statt display: Die Höhe steht
   damit schon, und beim Erscheinen springt nichts. */
html:not(.sao-bereit) .app,html:not(.sao-bereit) #oriEcke{visibility:hidden}

/* ---------- Kopf ---------- */
/* flex-wrap ist das Sicherheitsnetz: Passen Schriftzug und Knoepfe bei
   grosser Schrift nicht mehr nebeneinander, rutschen die Knoepfe eine
   Zeile tiefer, statt sich zu ueberlappen. */
header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
/* Waechst mit der eingestellten Schriftgroesse, aber nie ueber das hinaus,
   was der Bildschirm hergibt. */
h1{font-size:min(1.75rem,7.2vw);font-weight:700;line-height:1.05;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
header .brand{min-width:0}
/* Zeichen neben dem Schriftzug: dieselbe Sonne wie im App-Symbol.
   Groesse haengt an der Schriftgroesse, Farbe an --accent. */
/* Zeichen und Schriftzug bleiben immer beieinander; umbrechen darf
   hoechstens das Schild dahinter. */
.brandlockup{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;min-width:0}
/* Seit 4.0 ist das Logo ein Knopf. Es soll aussehen wie vorher – also
   erbt es Schrift und Farbe von der Überschrift und bringt selbst
   keinen Rahmen, keine Fläche und keinen Innenabstand mit. */
button.brandlockup{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;border-radius:8px;
}
button.brandlockup:hover .brandname{text-decoration:underline;text-underline-offset:3px}
button.brandlockup:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.brandmark{display:inline-flex;align-items:center;justify-content:center;width:1.04em;height:1.04em;flex:none;color:var(--accent)}
.brandmark svg{width:100%;height:100%;display:block}
.brandname{white-space:nowrap}
/* Reifegrad-Schild (Beta). Wird aus RELEASE_STAGE in 01-basis.js gefuellt. */
.stagetag{
  font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
  font-size:0.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);
  padding:3px 8px;border-radius:999px;flex:none;align-self:center;line-height:1.3;
  cursor:help;
}
.stagetag[hidden]{display:none}
.iconbtn{
  border:1px solid var(--line);background:var(--card);border-radius:10px;
  width:38px;height:38px;font-size:1rem;box-shadow:var(--shadow);flex:none;
  display:grid;place-items:center;color:var(--ink);padding:0;
}
/* Zeichen der Kopfzeile. Sie erben die Textfarbe des Knopfes, dadurch
   stimmen sie in hell und dunkel automatisch. */
.ikon{width:1.25rem;height:1.25rem;display:block}
.pikon{width:1.0625rem;height:1.0625rem;display:block}
.pplus{font-weight:800;font-size:.8125rem;line-height:1;margin-left:-2px}
.iconbtn:hover{border-color:var(--accent)}
.banner{
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink);
  padding:10px 14px;border-radius:12px;font-size:0.875rem;margin:0 0 14px;line-height:1.5;
}
.banner .banner-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.banner .banner-actions button{font-size:0.8125rem;padding:7px 12px}
/* Der Kontohinweis ist kein Hinweis auf ein Problem, sondern ein
   Angebot - deshalb ruhiger als die anderen Banner, ohne farbigen
   Rahmen, der nach "Achtung" aussieht. */
.banner.konto{background:var(--card);border-color:var(--line)}
.banner .bannerfuss{margin:9px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;gap:5px;background:var(--card);border:1px solid var(--line);
  padding:5px;border-radius:999px;box-shadow:var(--shadow);
  position:sticky;top:10px;z-index:5;margin-bottom:18px;
}
.tabs button{
  flex:1;border:0;background:transparent;color:var(--muted);
  font-size:0.875rem;font-weight:600;padding:9px 2px;border-radius:999px;transition:.2s;
  white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
}
.tabicon{width:1.15rem;height:1.15rem;flex:none}
.tablabel{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tabs button.active{background:var(--ink);color:var(--bg)}

/* ---------- Karten & Basiselemente ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
#view>*{margin:0 0 14px}
.summary .card{margin-bottom:0}
.emptycard{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);text-align:center;padding:30px 18px;color:var(--muted)}
.emptycard p{margin:0 0 14px}
input[type=text],input[type=number],input[type=email],
input[type=date],input[type=time],input[type=month],input[type=datetime-local],
select{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font:inherit;color:var(--ink);
}
input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,
input[type=date]:focus,input[type=time]:focus,input[type=month]:focus,
input[type=datetime-local]:focus,
select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

/* ---- Datum und Uhrzeit ----

   Diese Felder standen bis 6.6 in KEINER Regel und wurden deshalb
   ueberall vom Browser gezeichnet: eckig, mit eigener Schrift und
   eigenem Rahmen, mitten zwischen lauter runden Feldern.

   Das Auswahlfenster selbst bleibt das des Browsers, und das mit
   Absicht: Auf dem Handy ist es das Rad, das jeder kennt, und es
   kann Dinge, die ein nachgebauter Kalender nicht kann - Tastatur,
   Vorlesen, Wochenanfang nach Landeseinstellung. Angeglichen wird
   nur das Feld davor. */
input[type=date],input[type=time],input[type=month],input[type=datetime-local]{
  /* Ohne appearance:none nimmt iOS weder Polsterung noch Hoehe an und
     stellt das Feld so hoch, wie es selbst moechte. */
  -webkit-appearance:none;appearance:none;
  min-height:2.5em;               /* sonst faellt ein leeres Feld auf iOS zusammen */
  max-width:100%;box-sizing:border-box;
  /* Das innere Uhrwerk des Browsers bringt seine eigene Zeilenhoehe
     mit und ist damit zwei Pixel hoeher als eine normale Textzeile.
     Ohne diese Zeile steht ein Datumsfeld neben einem Textfeld immer
     eine Spur zu hoch - auf einem Bild sofort zu sehen, im Quelltext
     nie. */
  line-height:1.35;
}
/* Das Kalender- bzw. Uhrsymbol am rechten Rand. Es bekommt seine Farbe
   ueber color-scheme (siehe :root) - hier nur Groesse und Griffigkeit. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;padding:2px;border-radius:5px;
  transition:opacity .15s,background .15s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{
  opacity:1;background:var(--hover);
}
/* Ein leeres Datumsfeld zeigt "tt.mm.jjjj". Das ist ein Platzhalter und
   soll auch so aussehen wie einer. */
input[type=date]:not(:focus):in-range::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=date]:not(:focus):in-range::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=date]:not(:focus):in-range::-webkit-datetime-edit-day-field:not([aria-valuenow]){
  color:var(--muted);
}
/* Die Hauptknoepfe waren mit Schriftstaerke 700 und enger Polsterung
   sehr wuchtig - viel Farbe, wenig Luft. Jetzt Staerke 600, eine Spur
   kleinere Schrift und mehr Platz zu den Seiten: gleiche Deutlichkeit,
   ruhigeres Bild. Die Hoehe bleibt bei 36 Pixeln, damit man sie auf
   dem Handy weiterhin sicher trifft. */
button.primary{
  background:var(--accent);color:var(--accent-ink);border:0;
  border-radius:9px;padding:9px 18px;font-size:0.9375rem;font-weight:600;
  letter-spacing:.005em;
  /* Ohne eigene Zeilenhoehe erbt der Knopf die 1.65 des Fliesstexts -
     dadurch war er 41 statt der gedachten 37 Pixel hoch. */
  line-height:1.25;
}
button.primary:hover{filter:brightness(1.06)}
button.ghost{
  background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:9px 16px;font-size:0.9375rem;font-weight:500;
  line-height:1.25;
}
button.ghost:hover{border-color:var(--accent)}
button.ghost.danger{color:var(--red)}
button.ghost.danger:hover{border-color:var(--red)}
.mini{
  border:1px solid var(--line);background:var(--card);border-radius:8px;
  padding:5px 9px;font-size:0.7812rem;white-space:nowrap;flex:none;
}
.mini:hover{border-color:var(--accent);color:var(--accent)}
/* Ein Knopf, der einen laufenden Zustand anzeigt - derzeit die Pause
   am Habit. Farbe statt Zeichen: Das Zeichen bleibt dasselbe, damit
   der Knopf an seinem Platz wiederzuerkennen ist. */
.mini.an{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}

/* ---------- Heute: Datum & Tagesbogen ---------- */
.datenav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.navbtn:disabled{opacity:.3;cursor:default}
.navbtn:disabled:hover{border-color:var(--line)}
.datelabel{text-align:center;flex:1;min-width:0}
.datelabel strong{font-size:1.25rem;display:block}
.datelabel span{color:var(--muted);font-size:0.7812rem}
.pastnote{text-align:center;color:var(--amber);font-size:0.8438rem;margin:-2px 0 12px}
.progress-card{padding:14px 16px;margin-bottom:16px}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;font-size:0.875rem;color:var(--muted);margin-bottom:10px}
.progress-top strong{color:var(--ink);font-size:1rem}
.barwrap{position:relative;padding:3px 0}
.bar{position:relative;height:14px;border-radius:999px;overflow:hidden;background:var(--line)}
.bar .grad{position:absolute;inset:0;background:linear-gradient(90deg,var(--morgen),var(--mittag) 55%,var(--abend))}
.bar .cover{position:absolute;top:0;right:0;bottom:0;background:var(--card);opacity:.85;transition:width .4s ease}
.sun{
  position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe9a8,#f0ac35 72%);
  box-shadow:0 0 0 2px var(--card),0 0 10px rgba(240,172,53,.85);
  transition:left .4s ease;
}
.cheer{margin-top:12px;font-size:0.875rem;color:var(--green);font-weight:600;animation:pop .4s ease}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.dayinfo{text-align:center;color:var(--muted);padding:18px}

/* ---------- Tagesabschnitte ---------- */
.daypart{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
}
.daypart[data-part=morgen]{border-left-color:var(--morgen)}
.daypart[data-part=mittag]{border-left-color:var(--mittag)}
.daypart[data-part=abend]{border-left-color:var(--abend)}
.dp-head{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--line)}
.dp-head h2{font-size:1rem;flex:1;font-weight:700}
.dp-count{font-size:0.7812rem;color:var(--muted)}
.dp-dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot-morgen{background:var(--morgen)}
.dot-mittag{background:var(--mittag)}
.dot-abend{background:var(--abend)}
.dp-empty{padding:12px 16px;color:var(--muted);font-size:0.875rem;font-style:italic}
.habit{
  display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
  border-bottom:1px solid var(--line);transition:background .15s;position:relative;
}
.habit:last-child{border-bottom:0}
.habit:hover{background:var(--hover)}
.habit input{position:absolute;opacity:0;pointer-events:none}
.box{
  width:24px;height:24px;border:2px solid var(--muted);border-radius:8px;flex:none;
  display:grid;place-items:center;color:#fff;font-size:0.875rem;transition:.18s;
}
.box::after{content:"\2713";transform:scale(0);transition:transform .18s cubic-bezier(.5,1.6,.4,1)}
.habit input:checked ~ .box,.todo input:checked ~ .box{background:var(--green);border-color:var(--green)}
.habit input:checked ~ .box::after,.todo input:checked ~ .box::after{transform:scale(1)}
.habit input:focus-visible ~ .box,.todo input:focus-visible ~ .box{outline:2px solid var(--accent);outline-offset:2px}
.hname{flex:1;transition:color .2s;overflow-wrap:anywhere}
.habit input:checked ~ .hname{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.streak{font-size:0.75rem;color:var(--amber);background:var(--accent-soft);padding:2px 8px;border-radius:999px;white-space:nowrap;font-weight:600;flex:none}

/* ---------- Statistik ---------- */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.summary .card{padding:12px 8px;text-align:center}
.summary b{display:block;font-size:0.9375rem;line-height:1.3;overflow-wrap:anywhere}
.summary span{font-size:0.7188rem;color:var(--muted)}
.sortnote{color:var(--muted);font-size:0.8125rem;margin:0 2px 12px}
.stat-card{padding:14px 16px;margin-bottom:12px}
.stat-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.stat-head strong{flex:1;overflow-wrap:anywhere}
.badge{font-size:0.6875rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap;flex:none}
.strip{display:flex;gap:4px;margin-bottom:12px}
.strip i{flex:1;height:9px;border-radius:3px;background:var(--line)}
.strip i.done{background:var(--green)}
.strip i.miss{background:var(--red);opacity:.55}
.strip i.open{background:transparent;border:1.5px dashed var(--muted)}
.strip i.off{opacity:.35}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
.stat-grid b{display:block;font-size:0.8438rem}
.stat-grid span{font-size:0.6562rem;color:var(--muted)}
b.good{color:var(--green)}
b.mid{color:var(--amber)}
b.low{color:var(--red)}

/* ---------- Ideen ---------- */
.add-row{display:flex;gap:8px;margin-bottom:14px}
.add-row input{flex:1;min-width:0}
.idea{padding:12px 14px;margin-bottom:10px;display:flex;gap:8px;align-items:flex-start}
.idea .txt{flex:1;overflow-wrap:anywhere}
.idea small{display:block;color:var(--muted);font-size:0.75rem;margin-top:2px}

/* ---------- Verwalten ---------- */
.form-card{margin-bottom:16px}
.form-card h2{font-size:1.0625rem;margin-bottom:12px}
/* ---------- Der Haken nach dem Anlegen (8.1) ----------

   Die Bestätigung liegt ÜBER dem Formular und schiebt es nicht
   beiseite: Die Karte behält ihre Höhe, also springt nichts, und
   das leere Formular darunter ist schon da, wenn der Haken geht.

   Sie deckt genau die Sekunde ab, in der gespeichert und
   abgeglichen wird – und beantwortet dabei die Frage, die man beim
   schnellen Anlegen wirklich hat: Ist der jetzt drin? Ein leeres
   Formular allein sagt das nicht; es sieht aus wie eines, dessen
   Eingabe verlorenging. */
.form-card{position:relative}
.form-card.speichert>*:not(.hf-fertig){opacity:.25;transition:opacity .18s ease}
.hf-fertig{
  position:absolute;inset:0;z-index:3;border-radius:var(--radius);
  background:var(--card);padding:16px;
}
/* Der Inhalt klebt im sichtbaren Bereich. Das Formular ist länger
   als ein Handyschirm; wer unten auf „Hinzufügen" tippt, sähe sonst
   eine weiße Fläche, während der Haken oben außerhalb läuft. */
.hf-inhalt{
  position:sticky;top:32vh;
  display:flex;flex-direction:column;align-items:center;
  gap:2px;text-align:center;
}
.hf-fertig b{font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.hf-fertig small{color:var(--muted);font-size:0.8125rem}
.hf-kreis{display:block;color:var(--green);margin-bottom:6px}
.hf-kreis svg{display:block;overflow:visible}
.hf-ring{fill:none;stroke:currentColor;stroke-width:3;opacity:.2}
.hf-haken{
  fill:none;stroke:currentColor;stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
}
@media (prefers-reduced-motion:no-preference){
  @keyframes hfRingAuf{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
  /* 31 ist etwas mehr als die Länge des Pfades (≈29,6). Lieber ein
     Rest als eine sichtbare Lücke am Anfang. */
  @keyframes hfHakenZeichnen{from{stroke-dashoffset:31}to{stroke-dashoffset:0}}
  @keyframes hfRausblenden{from{opacity:1}to{opacity:0}}
  .hf-fertig:not(.ruhig){animation:hfRausblenden .22s ease .78s both}
  .hf-fertig:not(.ruhig) .hf-inhalt .hf-kreis{
    animation:hfRingAuf .3s cubic-bezier(.2,.8,.25,1) both;
    transform-origin:50% 50%;
  }
  .hf-fertig:not(.ruhig) .hf-haken{
    stroke-dasharray:31;
    animation:hfHakenZeichnen .34s cubic-bezier(.5,0,.3,1) .16s both;
  }
}
.fld{display:block;margin-bottom:12px;font-size:0.7812rem;color:var(--muted);font-weight:600}
/* Ein Feld mit "hidden" ist weg (9.1). .fld setzt display:block und
   ueberstimmte damit das hidden-Attribut: Im Zielformular standen bei
   Noten und Quoten "Einheit" und "Die Zahl gilt", im Erststart
   ebenso - Felder, die dort nichts zu suchen haben. */
.form-card [hidden],#onboard [hidden]{display:none!important}
.fld input,.fld select{margin-top:5px;font-weight:400;width:100%;display:block}
.wd-row{display:flex;gap:6px;margin:5px 0 14px}
.wd{flex:1;padding:8px 0;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:0.8125rem}
.wd.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.form-actions{display:flex;gap:8px}
.mgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.mrow{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mrow:last-child{border-bottom:0}
.mrow .info{flex:1;min-width:0}
.mact{display:flex;align-items:center;gap:6px;flex:none}
.mrow .info b{display:block;overflow-wrap:anywhere;font-weight:600}
.mrow .info small{color:var(--muted);font-size:0.75rem}
.data-card{margin-top:16px}
.data-card h2{font-size:1.0625rem}
.data-card p{color:var(--muted);font-size:0.875rem;margin:8px 0 12px}
.data-actions{display:flex;gap:8px;flex-wrap:wrap}

footer{margin-top:28px;text-align:center;color:var(--muted);font-size:0.7812rem}
#toast{
  position:fixed;left:50%;bottom:calc(var(--navraum) + 24px);transform:translate(-50%,10px);
  background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;
  font-size:0.875rem;opacity:0;pointer-events:none;transition:.25s;
  /* Ueber den Fenstern (70-72), nicht darunter (8.7). Bis 8.6 lag eine
     Meldung, die AUS einem Fenster heraus kam, hinter dessen
     abgedunkeltem Hintergrund - ihr "Rueckgaengig" war zu sehen, aber
     nicht zu erreichen. Unter den Feierlichkeiten (120) bleibt sie. */
  z-index:75;
  max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* Der Toast selbst bleibt fuer Klicks durchlaessig - er schwebt ueber der
   Seite und duerfte sonst sekundenlang Antippen darunter verschlucken.
   Der Rueckgaengig-Knopf braucht sie aber: Ohne diese Zeile war er nie
   anklickbar, und damit jedes "Rueckgaengig" der App wirkungslos. */
#toast .undobtn{pointer-events:auto}
/* ---------- Fokus ---------- */
/* Bricht die Kopfzeile um (schmales Geraet oder sehr grosse Schrift),
   landet diese Gruppe in einer eigenen Zeile. "margin-left:auto" haelt sie
   dann trotzdem am rechten Rand - vorher rutschte sie nach links. */
.hright{display:flex;align-items:center;gap:8px;margin-left:auto}
.fpill{
  display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--accent);
  border-radius:999px;padding:7px 12px;font-weight:700;font-size:0.8438rem
}
.fpill[hidden]{display:none}
.fpill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:fpulse 1.5s ease-in-out infinite}
.fpill.paused .dot{animation:none;opacity:.4}
@keyframes fpulse{0%,100%{opacity:1}50%{opacity:.2}}
.focus-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 4px}
.fring{position:relative;width:224px;height:224px}
.fring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fring circle{fill:none;stroke-width:10;stroke-linecap:round}
.fring .track{stroke:var(--line)}
.fring .prog{stroke:var(--accent);transition:stroke-dashoffset .5s linear}
.fring.break .prog{stroke:var(--mittag)}
.fcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ftime{font-size:2.875rem;font-weight:700;letter-spacing:1px}
.fphase{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.flabel{font-size:0.8438rem;color:var(--muted);max-width:220px;text-align:center;overflow-wrap:anywhere;margin-top:-6px}
.fbtns,.fpresets{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.fcustom{display:flex;gap:10px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.fcustom label.fld{width:auto}
.fcustom .fld input{width:78px}
.fwide{width:100%;max-width:340px}
.fsub{font-size:0.8438rem;color:var(--muted);text-align:center;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.fsound{background:transparent;border:0;font-size:1.0625rem;padding:2px 4px;line-height:1}
.focus-stat{font-size:0.875rem;margin-bottom:12px;line-height:1.6}
.mchips,.fchips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.mchip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:0.8438rem;font-weight:600}
.mchip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.mdesc{font-size:0.8125rem;color:var(--muted);text-align:center;max-width:380px;margin:-4px 0 0;line-height:1.5}
.fchip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:0.7812rem;color:var(--muted)}
.fchip.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.fgoal{width:auto}
.fgoal input{width:96px}
button.big{padding:12px 26px;font-size:0.9375rem}
.cyc{display:flex;gap:6px}
.cyc i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.cyc i.on{background:var(--accent)}
.cyc i.cur{background:var(--accent);opacity:.4;animation:fpulse 1.5s ease-in-out infinite}
.fcalm{padding:24px 0 8px;display:flex;flex-direction:column;align-items:center;gap:2px}
.btip{font-size:0.8438rem;color:var(--muted);text-align:center;max-width:280px;margin-top:-4px}
.fchart{display:flex;gap:3px;align-items:flex-end;height:48px;margin-top:10px}
.fchart i{flex:1;background:var(--accent);opacity:.55;border-radius:3px 3px 0 0;min-height:3px}
.fchart i.td{opacity:1}
.fchart i.zero{background:var(--line);opacity:1}
.fchart-lbl{display:flex;justify-content:space-between;font-size:0.6875rem;color:var(--muted);margin-top:3px}
#topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
#topbar[hidden]{display:none}
#topbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s linear}
#topbar.break i{background:var(--mittag)}
.dlg-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:70;padding:18px}
/* max-height und overflow gehören JEDEM Fenster, nicht nur dem
   Erststart: Mit zehn Punkten im „Was ist neu“ stand der Knopf
   „Alles klar“ auf einem 844 px hohen Schirm außerhalb des Bildes –
   das Fenster ließ sich schlicht nicht mehr schließen. Gemessen,
   nicht vermutet: Der Klick lief in die Leere. */
.dlg{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  max-width:360px;width:100%;box-shadow:var(--shadow);
  max-height:calc(100vh - 36px);overflow-y:auto;overscroll-behavior:contain}
.dlg p{margin:0 0 14px;line-height:1.55}
.dlg-btns{display:flex;gap:9px;justify-content:flex-end}
/* Fenster mit mehreren Wegen (9.0, wahlBox in 05-fokus.js): etwas
   breiter, damit die Erklaerung unter jedem Knopf nicht in einzelne
   Woerter zerfaellt; der Nebenknopf ("Backup sichern") steht links. */
.dlg.wahlbox{max-width:420px}
.dlg.wahlbox .dlg-btns{flex-wrap:wrap;margin-top:4px}
.dlg.wahlbox .wahlneben{margin-right:auto}
.dangerbtn{background:var(--red);color:#fff}
.habit.sub,.mrow.sub{margin-left:14px;border-left:2px solid var(--line);padding-left:12px}
.habit.sub .hname{font-size:0.9062rem}
.subtag{color:var(--muted);font-weight:600;margin-right:2px}
.fldnote{font-size:0.7812rem;color:var(--muted);margin:6px 2px 0;line-height:1.5}
#ownSchedule[hidden]{display:none}
.ppill{gap:5px}
.hdet{font-size:0.7188rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap;flex:none}
.habit .jk{opacity:.85;flex:none}
.habit:hover .jk{opacity:1}
.habit.skipped .hname{color:var(--muted)}
.skipmark{width:24px;text-align:center;font-size:1.0625rem;flex:none}
.skipchip{font-size:0.6875rem;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px;flex:none;font-weight:600}
.strip i.skip{background:var(--accent);opacity:.5}
.points-card h3{margin:14px 0 2px;font-size:0.9375rem}
.phead{display:flex;align-items:baseline;gap:8px}
.pbig{font-size:1.875rem;font-weight:800;color:var(--accent)}
.plabel{color:var(--muted);font-weight:600}
.pbreak{font-size:0.7812rem;color:var(--muted);margin:4px 0 0;line-height:1.55}
.rrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px dashed var(--line)}
.rrow b{flex:1;overflow-wrap:anywhere}
.rcost{color:var(--muted);font-size:0.8125rem;white-space:nowrap}
.reward-add{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.reward-add input[type=text]{flex:1;min-width:150px}
.reward-add input[type=number]{width:92px}
.redeems{font-size:0.7812rem;color:var(--muted);margin-top:10px;line-height:1.6}
button.mini[disabled]{opacity:.4;cursor:default}
.vswitch{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;width:max-content;margin:0 auto 14px}
.vswitch button{border:0;background:transparent;padding:6px 18px;border-radius:999px;font-weight:600;color:var(--muted);font-size:0.8438rem}
.vswitch button.on{background:var(--accent);color:var(--accent-ink)}
.week-card{overflow-x:auto;padding:14px 12px}
.wgrid{display:grid;grid-template-columns:minmax(96px,1.4fr) repeat(7,minmax(30px,1fr));gap:4px;align-items:center;min-width:340px}
.whead{font-size:0.6562rem;color:var(--muted);text-align:center;font-weight:600;line-height:1.35}
.whead.td{color:var(--accent)}
.wsec{grid-column:1/-1;margin-top:10px;font-size:0.8125rem;font-weight:700;display:flex;gap:6px;align-items:center}
.wname{font-size:0.7812rem;overflow-wrap:anywhere;padding-right:2px;line-height:1.3}
.wname.sub{padding-left:10px;color:var(--muted)}
.wcell{height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:0.8125rem;padding:0;color:var(--ink)}
button.wcell{cursor:pointer;transition:.15s}
button.wcell:hover{border-color:var(--accent)}
.wcell.wdone{background:var(--green);border-color:var(--green);color:#fff}
.wcell.wskip{background:var(--accent-soft);border-color:var(--accent);font-size:0.875rem}
.wcell.wmiss{border-style:dashed;background:transparent}
.wcell.off{border:0;background:transparent;color:var(--line)}
.wcell.future{border-style:dotted;opacity:.4;background:transparent}
.wcell.tdc{box-shadow:0 0 0 2px var(--accent-soft)}
.wtot{font-size:0.6562rem;color:var(--muted);text-align:center;padding-top:2px}
.wtot.full{color:var(--accent);font-weight:700}
.mplayer{display:flex;align-items:center;gap:8px}
.mtitle-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mtitle{font-weight:600;font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtitle-wrap small{color:var(--muted);font-size:0.7188rem}
.mvol{display:flex;align-items:center;gap:8px;margin:10px 0 2px}
.mvol input[type=range]{flex:1;accent-color:var(--accent)}
hr.sep{border:0;border-top:1px dashed var(--line);margin:14px 0 10px}
.audio-card h2{margin-bottom:10px}
/* Unten rechts stehen Rückmeldung und Musik-Player in einer Spalte.
   Der Stapel wächst nach oben – der Musik-Knopf bleibt ganz unten. */
/* Wie bei Ori: der Stapel selbst ist nur ein Gerüst und darf keine
   Berührung abfangen. Sonst liegt neben dem Knopf eine tote Fläche
   über dem Inhalt – bei offenem Fach über 50 Rasterfelder. */
#fabStack{position:fixed;right:16px;bottom:calc(var(--navraum) + 22px);z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
#fabStack>*{pointer-events:auto}
#werkzeugFach{pointer-events:none}
#werkzeugFach .wz{pointer-events:auto}
#playerBox{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* Leere Fächer nehmen keinen Platz weg (Musik abgeschaltet, kein Server). */
#playerBox:empty,#feedbackBox:empty{display:none}
.mfab{
  width:var(--fabgroesse);height:var(--fabgroesse);border-radius:50%;border:1.5px solid var(--accent);
  background:var(--card);color:var(--accent);font-size:1.3125rem;
  box-shadow:0 3px 14px rgba(0,0,0,.20);display:grid;place-items:center;transition:.2s;
}
.mfab:hover{border-color:var(--accent)}
.mfab.playing{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mfab .eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.mfab .eq i{width:3px;background:var(--accent-ink);border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.mfab .eq i:nth-child(2){animation-delay:.25s}
.mfab .eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:5px}50%{height:15px}}
.mpanel{
  width:min(310px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:14px;
}
.mpanel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mpanel .mplayer{justify-content:center;margin-top:10px}
.mbig{width:46px;height:46px;font-size:1.0625rem}
.mbtns button{font-size:0.8125rem;padding:8px 12px}
@media (max-width:480px){
  #fabStack{right:12px}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}
@media (max-width:420px){
  h1{font-size:min(1.3125rem,6.2vw);gap:6px}
  .stagetag{font-size:0.5625rem;padding:2px 7px;letter-spacing:.1em}
  header{gap:8px}
  .tabs button{font-size:0.8125rem}
  .stat-grid span{font-size:0.625rem}
}
/* ---------- Statistik-Unteransichten ---------- */
.snav{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.snav::-webkit-scrollbar{display:none}
.schip{flex:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:0.8438rem;font-weight:600;color:var(--muted)}
.schip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.summary.s4{grid-template-columns:repeat(4,1fr)}
@media (max-width:480px){.summary.s4{grid-template-columns:repeat(2,1fr)}}
.chart-card h3,.card h3{margin:0 0 8px;font-size:.9375rem}
.card h3 small{color:var(--muted);font-weight:500;font-size:0.75rem}
.chart{width:100%;height:auto;display:block}
.chart .cb{fill:var(--accent);opacity:.75}
.chart .cb.hl{opacity:1}
.chart .cb-null{fill:var(--line)}
.chart .clab{fill:var(--muted);font-size:9.5px;font-family:inherit}
.chart .cline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .cdot{fill:var(--accent)}
/* Die Referenzlinie (7.4). Gestrichelt und in der Textfarbe: Sie ist
   eine Verabredung, keine Messung - und muss sich deshalb von der
   Kurve unterscheiden, ohne lauter zu sein als sie. */
.chart .cziel{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 3;opacity:.45}
.chart .czieltext{fill:var(--ink);opacity:.7;font-weight:600}
/* ---------- Meilensteine im Verlauf (8.4) ----------
   Eine Raute, kein Kreis: Die Kurve hat schon Kreise, und zwei
   gleiche Formen nebeneinander liest niemand auseinander. Gefüllt
   heißt erfüllt, hohl heißt offen – das ist dieselbe Unterscheidung
   wie ✓ und ○ in der Meilensteinliste darunter. */
.chart .cmark{fill:var(--card);stroke:var(--gruen-urlaub,var(--green));stroke-width:1.8}
.chart .cmark.ok{fill:var(--green);stroke:var(--green)}
.chart .cmark-lot{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
/* ---------- Der Verlaufsgraph auf der Zielkarte (8.4) ---------- */
.zgraph{
  margin:10px 0 4px;padding:10px 10px 4px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
}
.zgraph-note{margin:4px 2px 2px}
.zgraph-leer{margin:8px 2px}
/* ---------- Lebensbereiche: Netzdiagramm und Liste ---------- */
.chart.spinne{max-width:22rem;margin:0 auto}
.spinne .sp-netz{fill:none;stroke:var(--line);stroke-width:1}
.spinne .sp-achse{stroke:var(--line);stroke-width:1}
/* Die Flaeche liegt ueber dem Netz und ist deshalb halbdurchsichtig:
   Sonst waere nicht mehr zu sehen, wo die Ringe verlaufen, und die
   Groesse waere nicht abzuschaetzen. */
.spinne .sp-flaeche{fill:var(--accent);fill-opacity:.22;stroke:var(--accent);
  stroke-width:2;stroke-linejoin:round}
.spinne .sp-punkt{fill:var(--accent)}
.spinne .sp-name{fill:var(--ink);font-size:9.5px;font-weight:600;font-family:inherit}
.spinne .sp-zahl{fill:var(--muted);font-size:9px;font-weight:500}
.brow{padding:9px 0 5px;border-top:1px dashed var(--line)}
.brow:first-of-type{border-top:0;padding-top:2px}
.brow-top{display:flex;align-items:center;gap:8px}
.brow-top b{flex:1;min-width:0;overflow-wrap:anywhere}
.brow-zahl{font-variant-numeric:tabular-nums;font-weight:700}
.bzeichen{font-size:1rem;line-height:1}
.bbar{height:6px;border-radius:999px;background:var(--line);margin:6px 0 4px;overflow:hidden}
.bbar span{display:block;height:100%;border-radius:999px;background:var(--accent)}
.brow-unten{font-size:0.7188rem;color:var(--muted)}
.strow{padding:8px 0 4px;border-top:1px dashed var(--line)}
.strow:first-of-type{border-top:0;padding-top:2px}
.strow-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.strow-top b{flex:1;min-width:100px}
.strow-next{font-size:0.7188rem;color:var(--muted)}
.msbar{height:6px;border-radius:999px;background:var(--line);margin-top:6px;overflow:hidden}
.msbar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
/* ---------- Check-in ---------- */
.checkin{padding:12px 14px}
.ci-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ci-head b{white-space:nowrap}
.ci-head span{font-size:0.7188rem;color:var(--muted)}
.ci-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0}
.ci-lbl{font-size:0.7188rem;color:var(--muted);width:64px;flex:none}
.mbtn{width:36px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;font-size:1.0625rem;line-height:1;padding:0;filter:grayscale(.65);opacity:.75;transition:.15s}
.mbtn:hover{border-color:var(--accent)}
.mbtn.on{filter:none;opacity:1;border-color:var(--accent);background:var(--accent-soft);transform:scale(1.06)}

/* ---------- Ja / Nein (8.2) ----------
   Für „War es ein Arbeitstag?" im Tagesabschluss. Zwei Knöpfe statt
   eines Schalters, weil es drei Zustände gibt: ja, nein und nicht
   beantwortet. Ein Schalter kennt nur zwei und würde „nicht gefragt"
   als „nein" ausgeben. */
.jnreihe{display:flex;gap:8px;margin:2px 0 12px}
.jnbtn{
  flex:0 0 auto;min-width:5.5rem;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font:inherit;font-size:0.875rem;cursor:pointer;transition:.15s;
}
.jnbtn:hover{border-color:var(--accent)}
.jnbtn.on{
  border-color:var(--accent);background:var(--accent-soft);
  color:var(--ink);font-weight:600;
}
/* ---------- Die Check-in-Zeile im Abschluss (8.2) ---------- */
.ab-cinote{margin:-2px 0 6px}
.ab-cizeile{
  display:flex;align-items:center;gap:10px;margin:10px 0 12px;
  padding:9px 12px;border:1px dashed var(--line);border-radius:12px;
}
.abci-lbl{font-size:0.8125rem;color:var(--muted);flex:none}
.abci-zeichen{flex:1;min-width:0;font-size:1.0625rem;letter-spacing:2px}
.ci-note{position:relative;margin-top:8px}
.ci-note textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:0.8438rem;padding:8px 10px;resize:none;overflow:hidden;min-height:36px}
.ci-note textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.notesaved{position:absolute;right:8px;bottom:7px;font-size:0.6875rem;color:var(--accent);background:var(--card);padding:1px 6px;border-radius:999px}
/* ---------- Flammen-Stufen ---------- */
.streak.f7{border:1px solid var(--amber)}
.streak.f30{background:var(--amber);color:#fff}
.streak.f90{background:linear-gradient(100deg,var(--amber),var(--accent));color:#fff;animation:flick 1.6s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* ---------- Stimmung & Korrelationen ---------- */
.mrow2{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px dashed var(--line)}
.mrow2:first-of-type{border-top:0}
.mrow2 .memo{font-size:1rem;flex:none}
.mrow2 b{flex:1;font-size:0.8438rem}
.mrow2 small{color:var(--muted);font-size:0.7188rem;text-align:right}
.toughcard{border-color:var(--accent)}
.toughcard small{display:block;color:var(--muted);margin-top:3px;font-size:0.75rem}
.corr-card{padding:12px 14px}
.corr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.corrlink{font-size:1rem;font-weight:700}
.corrlink.pos{color:var(--green)}
.corrlink.neg{color:var(--red)}
.badge.bpos{border-color:var(--green);color:var(--green)}
.badge.bneg{border-color:var(--red);color:var(--red)}
.noterow{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px dashed var(--line);font-size:0.8125rem;line-height:1.5}
.noterow:first-of-type{border-top:0}
.noterow .mono{flex:none;color:var(--muted);font-size:0.7188rem}

/* ================= Befinden (8.6) =================
   Zwei Abschnitte mit einer Zwischenzeile, damit die Richtung
   lesbar wird: oben, was die Tage prägt; unten, was die
   Gewohnheiten bringen. Ohne die Zeile stünden acht Karten
   untereinander, und welche wovon handelt, müsste man sich aus den
   Überschriften zusammensuchen. */
.sabschnitt{
  margin:18px 2px 10px;font-size:0.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.befverlauf .sparkrow .rl{width:96px;color:var(--ink)}
.befverlauf .sparkrow .chart{height:40px}

/* Die Karte, die wartet. Gedämpft, aber nicht versteckt: Sie sagt,
   dass es hier etwas geben wird und was dafür fehlt. */
.wartkarte{border-style:dashed;background:transparent;box-shadow:none}
.wartkarte h3{color:var(--muted)}
.wartzeile{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:0.8125rem}
.wartzeile .wl{flex:0 0 auto;min-width:9.5rem}
.wartbalken{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.wartbalken i{display:block;height:100%;background:var(--accent);border-radius:999px}
.wartzeile .mono{flex:none;color:var(--muted);font-size:0.75rem;min-width:2.4rem;text-align:right}

/* Eine Zeile je Befund - Arbeitstag oder Wirkung am Folgetag. */
.befzeile{padding:10px 0;border-top:1px dashed var(--line)}
.befzeile:first-of-type{border-top:0;padding-top:2px}
.befkopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.befkopf b{font-size:0.875rem}
.befzahlen{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:0.8125rem}
.befzahlen .leise{color:var(--muted);font-size:0.75rem}
.befzeile .pbreak{margin:0 0 6px}

/* ---- Wochenreflexion (8.6): Vorsatz und Woche in Zahlen ----
   Beides steht zwischen dem Kopf und den Reglern. Kacheln statt
   Saetzen, weil man sie beim Schieben mit einem Blick streifen
   soll - lesen wird man sie dabei nicht. */
.vorsatz{
  margin:4px 0 12px;padding:9px 12px;border-radius:10px;
  background:var(--accent-soft);border-left:3px solid var(--accent);
}
.vorsatz .vs-kopf{display:block;font-size:0.6875rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vorsatz p{margin:3px 0 0;font-size:0.875rem;line-height:1.45}
.wochezahlen{margin:4px 0 14px}
.wz-kopf{font-size:0.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.wz-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:6px}
.wzk{
  display:flex;flex-direction:column;gap:1px;padding:7px 9px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
}
.wzk b{font-size:0.9375rem;font-weight:700}
.wzk span{font-size:0.6875rem;color:var(--muted);line-height:1.3}
.wochezahlen .fldnote{margin-top:6px}
.wmark{font-size:0.6875rem;line-height:1}
/* ---------- Klang-Auswahl ---------- */
.tchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0 4px}
.tchip{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:0.8438rem;font-weight:600;color:var(--muted);transition:.15s;
}
.tchip:hover{border-color:var(--accent);color:var(--ink)}
.tchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
/* ---------- Geräte-Abgleich ---------- */
.spill{font-size:0.9375rem;padding:7px 11px;gap:3px;color:var(--ink)}
/* Abgemeldet: blasser, damit ein angemeldetes Konto sich abhebt. */
.spill.off{border-color:var(--line);color:var(--muted)}
.spill.warn{border-color:var(--red);color:var(--red)}
/* Ohne Verbindung (6.9): gedaempft, nicht rot. Es ist kein Fehler,
   sondern ein Zustand - die App laeuft ohne Netz vollstaendig weiter,
   und der Abgleich wird nachgeholt. Rot waere eine Falschmeldung. */
.spill.getrennt{border-color:var(--line);color:var(--muted)}
.spill.busy .pikon{animation:spilldreh 1.1s linear infinite}
@keyframes spilldreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spill.busy .pikon{animation:none}}
/* ---------- Kennzeichnung der Entwicklungsumgebung ----------
   Das rote DEV-Schild neben dem Schriftzug ist ab 5.6 weg (siehe
   applyEnvBadge in 06-konto.js). Der Hinweis steht weiterhin unter
   "Mehr -> Abgleich", und zwar als ganzer Satz - .envnote. */
.envnote{border-left:3px solid var(--red);padding-left:9px;margin-bottom:10px !important}
.spill.off{color:var(--muted);font-size:0.8125rem}
.offlinebox{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:12px 14px}
.logindlg{max-width:400px;max-height:88vh;overflow-y:auto}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.dlg-head h2{margin:0;font-size:1.1875rem}
.logindlg .fld{margin-bottom:10px}
.logindlg form{margin:0}
.obmods{margin:12px 0 4px;max-height:46vh;overflow-y:auto}
.obmods .modrow{padding:9px 0}
/* ---------- To-dos ---------- */
.todocard{padding:0;overflow:hidden}
.todocard .dp-head{padding:11px 16px;border-bottom:1px solid var(--line)}
.todocard .dp-head h2{flex:1;margin:0;font-size:0.9375rem}
.todocard .count{color:var(--muted);font-size:0.7812rem}
.todolist{padding:4px 6px}
.todo{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:.15s}
.todo:hover{background:var(--accent-soft)}
.todo input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.todo .ttext{flex:1;font-size:0.9062rem;overflow-wrap:anywhere;line-height:1.4}
.todo.done .ttext{text-decoration:line-through;color:var(--muted)}
.todo.late .ttext{color:var(--ink)}
.tdue{font-size:0.7188rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap;flex:none}
.tdue.late{color:var(--red);border-color:var(--red)}
/* Die kleine Schwester fuer die Zeilen in Listen: dieselbe Form, nur
   knapper. Bis 6.6 hatte sie 8 statt 10 Pixel Rundung und einen
   durchsichtigen Grund - nebeneinander sah man den Unterschied. */
input.tdate{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);
  font:inherit;font-size:0.75rem;padding:5px 8px;flex:none;max-width:140px;min-height:0}
input.tdate:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.todo-add h2,.todolist-card h3{margin:0 0 8px}
.todolist-card h3{display:flex;align-items:center;gap:8px;font-size:0.875rem}
.todolist-card h3 small{color:var(--muted);font-weight:500}
.todolist-card h3 .mini{margin-left:auto}
.quickdue{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;font-size:0.7812rem;color:var(--muted)}
.quickdue .tchip{padding:5px 11px;font-size:0.7812rem}
.ideas-head h2{margin:0 0 8px}
.scratch-to{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;font-size:0.75rem;color:var(--muted)}
.scratch-to .tchip{padding:5px 10px;font-size:0.75rem}
.stgroup{display:flex;gap:5px;flex-wrap:wrap}
/* ---------- Wiederholungen ---------- */
.trep{color:var(--accent);font-size:0.8125rem;flex:none}
.trepsel{border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);
  font:inherit;font-size:0.75rem;padding:4px 6px;flex:none;max-width:130px}
.trepsel:disabled{opacity:.4}
/* ---------- Erinnerungen ---------- */
.remtimes{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 4px}
.remchip{display:flex;align-items:center;gap:4px;background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:999px;padding:4px 6px 4px 11px;font-size:0.8125rem}
/* ---------- Startpakete ---------- */
.starters{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;margin:12px 0 6px}
.stcard{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;transition:.15s}
.stcard:hover{border-color:var(--accent)}
.stcard.on{border-color:var(--accent);background:var(--accent-soft)}
.stcard .ste{display:block;font-size:1.375rem;margin-bottom:3px}
.stcard b{display:block;font-size:0.875rem;margin-bottom:2px}
.stcard small{display:block;color:var(--muted);font-size:0.7188rem;line-height:1.4}
/* ---------- Jahresrückblick ---------- */
.yearhead h2{margin:0 0 4px;font-size:1.1875rem}
.yrow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px dashed var(--line)}
.yrow:first-of-type{border-top:0}
.yrow>span{font-size:1.1875rem;flex:none;width:26px;text-align:center}
.yrow b{display:block;font-size:0.875rem}
.yrow small{display:block;color:var(--muted);font-size:0.7812rem;line-height:1.5;overflow-wrap:anywhere}
/* ---------- Suche ---------- */
input[type=search]{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:0.9375rem;padding:10px 12px}
input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sres{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px dashed var(--line)}
.sres:first-of-type{border-top:0}
.sres[data-action]{cursor:pointer;border-radius:8px;padding-left:6px;padding-right:6px;margin:0 -6px}
.sres[data-action]:hover{background:var(--accent-soft)}
.sicon{font-size:0.9375rem;flex:none;width:22px;text-align:center;padding-top:1px}
.sbody{flex:1;min-width:0}
.sbody b{display:block;font-size:0.875rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.sbody small{display:block;color:var(--muted);font-size:0.7188rem;margin-top:1px}
.linkbtn{background:none;border:0;color:var(--accent);text-decoration:underline;font-size:0.8125rem;padding:2px 0}
.forgotline{margin:2px 0 0;text-align:right}
.syncerr{background:var(--accent-soft);border:1px solid var(--red);border-radius:12px;padding:11px 13px;margin-bottom:10px}
.syncerr b{display:block;font-size:0.875rem;margin-bottom:2px}
.syncerr small{display:block;color:var(--muted);font-size:0.7812rem;margin-bottom:9px;overflow-wrap:anywhere}
.legalcard h2{margin:18px 0 6px;font-size:1.0625rem}
.legalcard h2:first-of-type{margin-top:4px}
.legalcard h3{margin:14px 0 4px;font-size:0.875rem}
.legaltext{font-size:0.8438rem;line-height:1.65;color:var(--ink);margin:0}
.legalwarn{background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:10px 12px;font-size:0.8125rem;line-height:1.55;margin-bottom:6px}
.legallist{font-size:0.8438rem;line-height:1.7;margin:6px 0 0;padding-left:20px}
.legallist li{margin-bottom:3px}
.legalcard a{color:var(--accent)}
.privacynote{background:var(--bg);border-radius:10px;padding:9px 11px;font-size:0.7812rem;
  color:var(--muted);line-height:1.6;margin:8px 0 4px}
.privacynote .linkbtn{font-size:0.7812rem}
/* ---------- Die Einwilligung zum Abgleich (9.3) ----------
   Ein eigenes Haekchen, nicht vorangekreuzt, mit dem ganzen Wortlaut
   daneben - so sieht eine ausdrueckliche Einwilligung nach Art. 9 DSGVO
   aus. Der Text ist lang; er steht kleiner, aber vollstaendig da und
   nicht hinter einem Link. */
.einwbox{display:flex;align-items:flex-start;gap:10px;margin:2px 0 12px;padding:10px 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;cursor:pointer;
  font-size:0.7812rem;line-height:1.55;color:var(--ink)}
.einwbox input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
.einwbox:focus-within{border-color:var(--accent)}
.dlg.einwdlg{max-width:440px}
.dlg.einwdlg:focus{outline:none}
.einwtext{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-size:0.7812rem;line-height:1.6;margin:0 0 14px;color:var(--ink)}
.dlg p.einwfrist{background:var(--accent-soft);border-radius:10px;padding:8px 11px;font-size:0.8125rem}
.dlg p.einwalt{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);
  font-size:0.7812rem;color:var(--muted);line-height:1.5}
.einwalt .linkbtn{font-size:0.7812rem;color:var(--red)}
p.einwrecht{font-size:0.7812rem;color:var(--muted);line-height:1.5;margin:-6px 0 12px}
p.einwrecht .linkbtn{font-size:0.7812rem}
.emptycard.intro h2{margin:0 0 8px;font-size:1.1875rem}
.emptycard.intro p{margin:0 0 10px;line-height:1.65}
footer .linkbtn{font-size:inherit}
footer a{color:var(--accent);text-decoration:underline}
a.linkbtn{color:var(--accent);text-decoration:underline;cursor:pointer}
.offlinebox p{font-size:0.8438rem;line-height:1.6;margin:0 0 9px}
.offlinebox p:last-child{margin-bottom:0}
.ob-steps{background:var(--card);border-radius:10px;padding:10px 12px;line-height:1.9 !important}
.obsync{background:var(--accent-soft);border-radius:10px;padding:9px 11px;font-size:0.8438rem !important}
.spill.busy{animation:spin 1.1s linear infinite}
.spill.warn{border-color:var(--red);color:var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}
.sync-card .syncrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0}
.sync-card .synced{font-size:1.25rem;color:var(--accent);flex:none}
.sync-card .modinfo{flex:1;min-width:140px}
.sync-card .modinfo small{display:block;color:var(--muted);font-size:0.75rem;margin-top:1px;overflow-wrap:anywhere}
input[type=email],input[type=password]{
  width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:0.875rem;padding:9px 11px;
}
input[type=email]:focus,input[type=password]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
/* ---------- Erststart-Dialog ---------- */
.dlg.ob{max-width:440px;max-height:88vh;overflow-y:auto}
.dlg.ob h2{margin:0 0 8px;font-size:1.25rem}
.dlg.ob p{font-size:0.875rem}
.obq{font-weight:700;color:var(--ink);margin:10px 0 6px !important}
.obopt{
  display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;margin-bottom:8px;transition:.15s;
}
.obopt:hover,.obopt:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.obopt.reco{border-color:var(--accent)}
.obopt b{display:block;font-size:0.9375rem;margin-bottom:2px}
.obopt small{display:block;color:var(--muted);font-size:0.7812rem;line-height:1.45}
.recotag{font-size:0.6562rem;background:var(--accent);color:var(--accent-ink);padding:1px 7px;border-radius:999px;vertical-align:middle;margin-left:6px}
/* ---------- Rückgängig im Toast ---------- */
.undobtn{
  background:transparent;border:0;color:var(--accent);font-weight:700;font-size:0.8438rem;
  margin-left:12px;padding:2px 4px;text-decoration:underline;
}
/* ---------- Mobile: Navigation in Daumenreichweite ---------- */
@media (max-width:700px){
  :root{--navraum: calc(60px + env(safe-area-inset-bottom)); --fabgroesse: 46px}
  .app{padding:16px 14px calc(var(--navraum) + 24px)}
  .tabs{
    position:fixed;top:auto;bottom:0;left:0;right:0;z-index:56;
    margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(0,0,0,.10);
    gap:0;
    /* Ausdruecklich KEIN overflow-x:auto mehr. Vorher war die Leiste
       seitlich verschiebbar und ist beim Wischen mitgewandert. */
    overflow:visible;
  }
  .tabs button{
    /* Alle fuenf teilen sich die Breite gleichmaessig und duerfen
       schrumpfen - dadurch passt es auch auf ein 320er Handy. */
    flex:1 1 0;min-width:0;
    flex-direction:column;gap:2px;
    padding:6px 2px;border-radius:14px;
    font-size:0.625rem;letter-spacing:-.01em;
  }
  .tabicon{width:1.375rem;height:1.375rem}
  .tablabel{max-width:100%}
  /* Aktiver Reiter: nur Zeichen und Schrift faerben, keine dunkle Pille -
     die wirkt in einer unteren Leiste zu wuchtig. */
  .tabs button.active{background:transparent;color:var(--accent)}
  .tabs button.active .tabicon{stroke-width:2.1}
  /* Frueher standen hier einzelne Abstaende fuer jedes schwebende Element.
     Das ging schief: Die Grundregel fuer #noteBox stand weiter unten im
     Blatt und hat den Wert wieder ueberschrieben - der Notizknopf lag
     hinter der Leiste. Jetzt zaehlt nur noch --navraum. */
  .mfab,.nfab,.fbfab{font-size:1.1875rem}

  /* Unterreiter bleiben beim Scrollen am oberen Rand kleben.
     Vorher standen sie fest am Seitenanfang: Wer weiter unten war, musste
     erst ganz nach oben scrollen, um den Bereich zu wechseln. Am Handy
     sitzt die Hauptleiste unten, oben ist also Platz dafuer.
     Der Randabzug laesst die Leiste ueber die volle Breite laufen, damit
     beim Scrollen seitlich nichts darunter durchscheint. */
  /* "#view>.snav" statt nur ".snav": Weiter oben steht
     #view>*{margin:0 0 14px} - das hat mehr Gewicht als eine einzelne
     Klasse und wuerde jeden Randwert hier wirkungslos machen. */
  #view>.snav{
    position:sticky;top:0;z-index:6;
    margin:0 0 8px;padding:9px 0 8px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
}
/* Sehr schmale Geraete (iPhone SE und aehnliche): eine Spur kleiner,
   damit auch das laengste Wort - "Auswertung" - ganz hineinpasst. */
@media (max-width:370px){
  .tabs button{font-size:0.5625rem;padding:6px 1px}
  .tabicon{width:1.25rem;height:1.25rem}
}
/* ---------- Module ---------- */
.modrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px dashed var(--line)}
.modrow:first-of-type{border-top:0}
.modrow .modinfo{flex:1}
.modrow .modinfo b{display:block;font-size:0.875rem}
.modrow .modinfo small{color:var(--muted);font-size:0.7188rem;line-height:1.4;display:block}
.switch{width:42px;height:24px;border-radius:999px;border:1px solid var(--line);background:var(--line);position:relative;flex:none;padding:0;transition:.2s}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on::after{left:20px}
/* ---------- Ziele ---------- */
.goal-card{padding:14px 16px}
.goal-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.goal-head b{flex:1;min-width:120px;font-size:0.9375rem}
/* Zeichen und Titel sind ab 7.5 EIN Knopf: Ein Tipp auf das Ziel
   klappt es auf. Vorher war die Ueberschrift toter Text - man traf
   nichts und markierte stattdessen das Emoji. */
.goal-tap{
  flex:1;min-width:120px;display:flex;align-items:center;gap:8px;
  background:none;border:0;padding:4px 0;margin:-4px 0;
  text-align:left;min-height:34px;
}
.goal-tap b{flex:1;min-width:0;font-size:0.9375rem}
.goal-tap:hover b{text-decoration:underline;text-underline-offset:2px}
.goal-tap:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.goal-zeichen{user-select:none;-webkit-user-select:none}
.goal-why{font-size:0.7812rem;color:var(--muted);margin:3px 0 0;line-height:1.5}
/* Ein Ziel ohne Gewohnheit (7.5). Kein Warnzeichen und kein Rot:
   Es gibt gute Gruende, ein Ziel von Hand zu fuehren. Der Kasten
   sagt, was die Folge ist, und bietet den Weg an. */
.zohne{
  margin:8px 0 0;padding:8px 10px;border-radius:10px;
  background:var(--hover);border-left:3px solid var(--morgen);
  font-size:0.75rem;line-height:1.55;color:var(--muted);
}
.zohne b{color:var(--ink);font-weight:600}
/* Der Balken trägt jetzt Stufenmarken und darf deshalb nicht mehr
   abschneiden – overflow:hidden hätte die Marke bei 100 % halbiert.
   Die Füllung bekommt ihre eigene Rundung. */
.goal-bar{position:relative;height:10px;border-radius:999px;background:var(--line);margin:10px 0 4px}
.goal-bar .fuell{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--morgen),var(--mittag),var(--accent))}
.goal-bar.drueber .fuell{background:var(--red)}
/* Stufenmarke: ein schmaler Strich quer über den Balken. Erreichte
   Stufen sind kräftig, noch offene blass – so sieht man mit einem
   Blick, wo man steht und was als Nächstes kommt. */
.goal-bar .zmarke{position:absolute;top:-3px;width:2px;height:16px;border-radius:1px;
  background:var(--muted);opacity:.45;transform:translateX(-1px)}
.goal-bar .zmarke.erreicht{background:var(--accent);opacity:1}

/* Ein Kästchen je Woche oder Monat. Bei 52 Wochen bricht die Reihe
   auf schmalen Schirmen um – das ist gewollt, sonst müsste man
   seitlich schieben. */
.zstreifen{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0 4px}
.zbox{width:9px;height:15px;border-radius:2px;background:var(--line);flex:none}
.zbox.ok{background:var(--green)}
.zbox.weg{background:transparent;border:1px dashed var(--line)}
.zbox.laufend{background:var(--accent-soft);border:1px solid var(--accent)}
.zbox.kuenftig{background:transparent;border:1px dotted var(--line);opacity:.5}
.zbilanz{font-size:0.75rem;color:var(--muted);margin:4px 0 0;line-height:1.5}
.zstufe{font-size:0.8125rem;margin:6px 0 0;line-height:1.5}
.zprognose{font-size:0.75rem;color:var(--muted);margin:4px 0 0;line-height:1.5}
/* Die naechste Etappe (7.2). Sie steht oben auf der Zielkarte, damit
   man nicht bis ans Ende scrollen muss, um zu wissen, wann die
   naechste faellig ist. Etwas kraeftiger als die Prognose darunter -
   sie ist eine Verabredung und keine Hochrechnung. */
.zetappe{font-size:0.8125rem;color:var(--ink);margin:6px 0 0;line-height:1.45}
.zetappe b{color:var(--accent);font-weight:600}

/* Buchungen auf ein Ziel */
.zmehr{width:100%;margin-top:10px;background:transparent;border:1px dashed var(--line);
  border-radius:10px;padding:7px;color:var(--muted);font-size:0.8125rem;cursor:pointer}
.zdetail{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.zbuchen{margin-bottom:12px}
.zbuchzeile{display:flex;gap:8px;margin-bottom:8px}
.zbuchzeile input{flex:1;min-width:0}
.zbuchzeile .zval{flex:0 0 84px}
.zeintrag{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:0.8125rem}
.zeintrag .mono{flex:none;color:var(--muted);font-size:0.6875rem}
.zeintrag b{flex:none}
.zeintrag .ztext{flex:1;color:var(--muted);overflow-wrap:anywhere}

/* Der Kasten am Ende des Zeitraums */
.zabschluss{margin-top:10px;padding:11px 12px;border:1px solid var(--accent);
  border-radius:12px;background:var(--accent-soft);font-size:0.8438rem;line-height:1.55}
.zabschluss-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.zjahre{margin-top:10px;font-size:0.8125rem}
.zjahre summary{cursor:pointer;color:var(--muted);font-size:0.75rem}
.zjahr{display:flex;gap:10px;align-items:baseline;padding:4px 0}
.zjahr .mono{flex:none;color:var(--muted)}
.zjahr b{flex:none}
.zjahr span:last-child{flex:1;color:var(--muted);font-size:0.75rem}

/* Die Zielzeile auf „Heute“. Sie muss schmal bleiben: Alles, was
   hier an Höhe dazukommt, schiebt die erste abhakbare Gewohnheit
   unter den Bildschirmrand – und dann wischt man jeden Morgen,
   bevor überhaupt etwas geht. */
.zielheute{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px 10px;margin-bottom:12px}
/* Eigenes Kürzel "zl-" (Ziel-Leiste), NICHT "zh-": Das gehört seit
   2.5 den Zielhabits, und .zh-stand war dort 1.25rem fett. Die
   Zeile hier hätte sich das stillschweigend geholt – der Stand
   stand mit 20 px in einer Zeile, die 12 px hoch sein sollte.

   Eine Zeile, nicht zwei: Der Titel darf schrumpfen (flex:1 mit
   min-width:0), Stand und Pfeil behalten ihre Breite. Ohne das
   wanderte der Pfeil auf eine eigene Zeile und der Kasten wurde
   70 px hoch statt 31. */
.zl-kopf{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.zl-icon{flex:none;font-size:0.875rem;line-height:1}
.zl-kopf b{flex:1 1 auto;font-size:0.8438rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Stand darf zur Not auch schrumpfen (9.2): lieber "..." als eine
   Seite, die sich am Handy seitlich schieben laesst. */
.zl-stand{flex:0 1 auto;min-width:0;font-size:0.75rem;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.zl-kopf .mini{flex:none;padding:2px 8px}
.zielheute .goal-bar{height:6px;margin:7px 0 0}
.zl-rest{font-size:0.6875rem;color:var(--muted);margin:5px 0 0}
.hintzeile.zielhint{border-color:var(--accent)}

/* Formular: Zahl, Einheit und Bezug nebeneinander, Stufen darunter */
.zielrow{display:flex;gap:10px;flex-wrap:wrap}
.zielrow .fld{flex:1 1 120px;min-width:0}
.stufenbox{margin:10px 0 4px}
.stufenbox summary{cursor:pointer;font-size:0.8438rem;font-weight:600}
.stufenzeile{display:flex;gap:8px;margin-top:7px}
.stufenzeile .stufeW{flex:0 0 92px;min-width:0}
.stufenzeile .stufeN{flex:1;min-width:0}
.goal-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:0.7188rem;color:var(--muted)}
.badge.due{border-color:var(--red);color:var(--red)}
.badge.donebadge{border-color:var(--green);color:var(--green)}
.gsteps{margin-top:10px}
.gstep{display:flex;align-items:center;gap:8px;padding:5px 0}
.gstep .gtext{flex:1;font-size:0.8438rem}
.gstep.done .gtext{color:var(--muted);text-decoration:line-through}
.gadd{display:flex;gap:8px;margin-top:8px}
.gadd input{flex:1;min-width:0}
.gadd button{flex:none}
.glog{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.glogrow{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:0.8125rem;line-height:1.5}
.glogrow .mono{flex:none;color:var(--muted);font-size:0.6875rem}
.glogrow span{flex:1;overflow-wrap:anywhere}
.goal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Zwei Rollen, zwei Groessen: als stilles Schild auf der Zielkarte
   klein und zurueckhaltend - als anklickbarer Chip im Ziel-Formular
   gross genug zum Tippen und mit eigener Flaeche. Ohne die Flaeche
   standen im dunklen Design graue Woerter auf grauem Grund. */
.ghchip{font-size:0.7188rem;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--muted)}
.ghchip.link{cursor:pointer;font-size:0.8125rem;padding:7px 13px;
  color:var(--ink);background:var(--hover);border-color:var(--line)}
.ghchip.link:hover{border-color:var(--accent)}
.ghchip.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ghchip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ghchip.link.on{font-weight:600}
/* ---------- Reflexion & Werte ---------- */
.vchips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}
.vchip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 13px;font-size:0.8125rem}
.vchip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.vrank{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--line)}
.vrank:first-of-type{border-top:0}
.vrank b{flex:1}
.vrank .vnum{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:0.75rem;font-weight:700;flex:none}
.refl-dim{display:flex;align-items:center;gap:10px;padding:8px 0}
.refl-dim .re{font-size:1.0625rem;flex:none}
.refl-dim .rl{width:150px;flex:none;font-size:0.8125rem}
.refl-dim input[type=range]{flex:1;accent-color:var(--accent)}
.refl-dim .rv{width:18px;text-align:center;font-weight:700;flex:none}
@media (max-width:480px){.refl-dim{flex-wrap:wrap}.refl-dim .rl{width:auto;flex:1}}
.refl-free label{display:block;font-size:0.7812rem;color:var(--muted);margin:10px 0 4px}
.refl-free textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:0.8438rem;padding:8px 10px;resize:none;overflow:hidden;min-height:36px}
.refl-free textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sparkrow{display:flex;align-items:center;gap:10px;padding:4px 0}
.sparkrow .rl{width:150px;flex:none;font-size:0.7812rem;color:var(--muted)}
.sparkrow .chart{flex:1;height:34px}
.bscard{border-left:4px solid var(--accent);padding:12px 14px}
.bscard.warn{border-left-color:var(--red)}
.bscard.pos{border-left-color:var(--green)}
.bscard b{display:block;margin-bottom:2px}
.bscard p{margin:0;font-size:0.8125rem;color:var(--muted);line-height:1.55}
/* Eine Hinweiszeile oben. Zwei Anlaesse, ein Aussehen - aber je
   eine eigene Klasse, damit sie unterscheidbar bleiben. */
.hintzeile,.reflecthint{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:8px 12px;font-size:0.8125rem;margin:0 0 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ---------- Notiz-Panel ---------- */
#noteBox{position:fixed;left:16px;bottom:calc(var(--navraum) + 22px);z-index:55;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* Die schwebenden Knoepfe liegen ueber weissen Karten. Mit dem blassen
   Standardrand waren sie dort kaum auszumachen - deshalb ein farbiger
   Ring und ein deutlicherer Schatten. */
.nfab{
  width:var(--fabgroesse);height:var(--fabgroesse);border-radius:50%;border:1.5px solid var(--accent);
  background:var(--card);color:var(--ink);font-size:1.25rem;
  box-shadow:0 3px 14px rgba(0,0,0,.20);display:grid;place-items:center;transition:.2s;
}
.nfab:hover{border-color:var(--accent)}
.nfab.has{border-color:var(--accent)}
.npanel{width:min(310px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.npanel textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:0.8438rem;padding:9px 10px;resize:none;min-height:110px;max-height:40vh;overflow:auto}
.npanel textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
@media (max-width:480px){#noteBox{left:12px}}

/* ---------- Rückmeldung: Knopf und Fenster ---------- */
.fbfab{
  width:var(--fabgroesse);height:var(--fabgroesse);border-radius:50%;border:1.5px solid var(--accent);
  background:var(--card);font-size:1.25rem;padding:0;
  box-shadow:0 3px 14px rgba(0,0,0,.20);display:grid;place-items:center;transition:.2s;
}
.fbfab:hover{border-color:var(--accent)}
/* Das Fenster klappt von unten auf und deckt den Rest ab. */
.fbback{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fbfade .18s ease-out;
}
.fbsheet{
  width:min(520px,100%);max-height:88vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.30);
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  animation:fbup .26s cubic-bezier(.22,.85,.3,1);
}
@keyframes fbup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fbfade{from{opacity:0}to{opacity:1}}
.fbgrip{width:42px;height:4px;border-radius:999px;background:var(--line);margin:2px auto 12px}
.fbhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fbhead h2{font-size:1.1875rem}
.fbintro{margin-top:4px}
.fbkinds{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.fbsheet textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:0.875rem;padding:10px 12px;resize:vertical;
  min-height:130px;max-height:40vh;
}
.fbsheet textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.fbcount{display:block;text-align:right;color:var(--muted);font-size:0.7188rem;min-height:15px;margin-top:3px}
.fbcount.warn{color:var(--red)}
.fbsheet .fld{margin:10px 0 0}
.fberr{
  background:var(--card);border:1px solid var(--red);color:var(--red);
  border-radius:10px;padding:9px 12px;margin:14px 0 0;font-size:0.8438rem;line-height:1.5;
}
.fberr[hidden]{display:none}
.fbopt{font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}
.fbactions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.fbactions button[disabled]{opacity:.55;cursor:default}
/* Falle für automatische Einträge – für Menschen unsichtbar. */
.fbhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- Fenster „Darstellung“ ---------- */
.setdlg{max-width:26rem;max-height:88vh;overflow-y:auto}
.setrow{margin:.9rem 0 0}
.setlbl{
  display:block;font-size:.78rem;color:var(--muted);font-weight:600;
  letter-spacing:.03em;margin-bottom:.35rem;
}
/* Segment-Umschalter, der die volle Breite nutzt und umbrechen darf */
.vswitch.segwide{width:100%;margin:0;display:flex;flex-wrap:wrap;gap:.25rem}
.vswitch.segwide button{flex:1 1 4rem;padding:.45rem .5rem;white-space:nowrap}
.setsel{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .7rem;font:inherit;color:var(--ink);
}
.setsel:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
/* Vorschau: zeigt Groesse und Schriftart sofort an echtem Text */
.setprev{
  margin-top:1.1rem;background:var(--bg);border:1px dashed var(--line);
  border-radius:12px;padding:.75rem .85rem;
}
.setprev b{display:block;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.setprev p{margin:0;display:flex;align-items:baseline;gap:.5rem;justify-content:space-between}
.setprev .mono{color:var(--amber);font-weight:600;flex:none}
.setprev small{display:block;color:var(--muted);font-size:.78rem;margin-top:.2rem}

/* ---------- Angemeldet-Fenster ---------- */
/* Die alten Regeln griffen nur innerhalb von .sync-card, im Fenster stand
   deshalb alles unformatiert untereinander. */
.acctbox{
  display:flex;align-items:center;gap:.65rem;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:.7rem .8rem;margin:.3rem 0 1rem;
}
.acctmark{font-size:1.3rem;line-height:1;color:var(--accent);flex:none}
.acctinfo{flex:1;min-width:0}
.acctmail{display:block;font-size:.9rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.acctinfo small{display:block;color:var(--muted);font-size:.78rem;margin-top:.15rem;overflow-wrap:anywhere}
.dangerzone{margin-top:1.2rem;padding-top:.95rem;border-top:1px solid var(--line)}
.dangerzone b{display:block;font-size:.85rem}
.dangerzone p{margin:.2rem 0 .65rem;font-size:.78rem;color:var(--muted);line-height:1.5}

/* Eine Zeile im Konto-Fenster: links wofuer, rechts der Knopf.
   Auf schmalen Geraeten bricht sie um, sonst wird der Knopf gequetscht. */
.kontozeile{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
  display:flex;gap:.8rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}
.kontozeile b{display:block;font-size:.85rem}
.kontozeile p{margin:.2rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
.kontozeile>div{flex:1 1 12rem;min-width:0}
.kontozeile button{flex:0 0 auto}

/* ---------- Punkte-Fenster ---------- */
.ptdlg{max-width:27rem;max-height:88vh;overflow-y:auto}
.ptbal{display:flex;align-items:baseline;gap:.5rem;margin:.2rem 0 .1rem}
.ptbal .pbig{font-size:2rem;font-weight:800;color:var(--accent);line-height:1}
.ptbal .plabel{color:var(--muted);font-weight:600}
.ptbreak{font-size:.78rem;color:var(--muted);margin:.35rem 0 0;line-height:1.55}
.ptsec{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:1.2rem 0 .4rem}
.ptrow{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem .7rem;border:1px solid var(--line);border-radius:11px;margin-bottom:.45rem;
  background:var(--card);
}
.ptrow.reichtnicht{opacity:.62}
.ptrow b{flex:1;min-width:7rem;font-size:.92rem;overflow-wrap:anywhere}
.ptcost{font-family:ui-monospace,"SF Mono",Consolas,monospace;color:var(--amber);font-weight:600;flex:none;font-size:.85rem}
.ptrow .mini{flex:none}
.ptfehlt{font-size:.72rem;color:var(--muted);flex-basis:100%;margin:0}
.ptlast{font-size:.78rem;color:var(--muted);line-height:1.7;margin:.5rem 0 0}
.ptempty{font-size:.85rem;color:var(--muted);line-height:1.55;margin:0 0 .3rem}
/* Belohnung bearbeiten (9.2): Name dehnt sich, Preis bleibt schmal. */
.ptrow.ptedit{gap:.45rem}
.ptrow.ptedit input[type=text]{flex:1 1 9rem;min-width:0}
.ptrow.ptedit input[type=number]{width:6rem;flex:none}

/* ---------- Mehr → App: Installation ---------- */
.inscard h2{font-size:1.06rem;margin-bottom:.35rem}
.inssub{font-size:.95rem;margin:1.3rem 0 .5rem}
.inscard.fertig{border-color:var(--green)}
.insmark{
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:1.3rem;font-weight:700;margin-bottom:.6rem;
}
/* Was man durch die Installation bekommt */
.insvorteile{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.3rem .9rem;
  margin:.9rem 0 .2rem;
}
.insvorteile span{font-size:.82rem;color:var(--muted);line-height:1.5}
/* Der grosse Knopf, wenn der Browser selbst installieren kann */
.insjetzt{
  margin:1.1rem 0 .2rem;padding:.9rem;border-radius:12px;
  background:var(--accent-soft);border:1px solid var(--accent);text-align:center;
}
.insjetzt .fldnote{margin-top:.6rem}
/* Nummerierte Anleitung */
.inslist{margin:.2rem 0 0;padding-left:1.35rem}
.inslist li{margin-bottom:.5rem;line-height:1.6;font-size:.9rem}
.inslist li:last-child{margin-bottom:0}
/* Hinweis, wenn dieser Browser nicht installieren kann */
.inswarn{
  background:var(--accent-soft);border-left:3px solid var(--red);border-radius:9px;
  padding:.6rem .8rem;margin:.2rem 0 .8rem;font-size:.84rem;line-height:1.55;
}
/* QR-Bereich */
.qrzeile{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.8rem}
.qrrahmen{
  background:#fff;padding:.35rem;border-radius:10px;border:1px solid var(--line);
  flex:none;line-height:0;cursor:zoom-in;
}
.qrrahmen:hover,.qrrahmen:focus-visible{border-color:var(--accent)}
/* Groesse bewusst grosszuegig: je Modul sollten mehrere Bildschirmpunkte
   uebrig bleiben, sonst tun sich Handykameras schwer. */
.qrbild{display:block;width:12.5rem;max-width:70vw;height:auto;aspect-ratio:1/1}
.qrtext{flex:1;min-width:12rem}
.qradresse{
  display:block;font-size:.82rem;color:var(--ink);overflow-wrap:anywhere;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;
}
@media (max-width:560px){
  /* Auf schmalen Schirmen untereinander: „flex:1 1 100%“ statt nur width,
     sonst gewinnt die Flex-Basis 0 und die Adresse wird zusammengequetscht. */
  .qrzeile{justify-content:center}
  .qrtext{flex:1 1 100%;min-width:0;width:100%}
}
/* Grossansicht des Codes */
.qrdlg{max-width:24rem;text-align:center}
.qrgross{
  background:#fff;border-radius:12px;padding:.6rem;display:inline-block;line-height:0;
  border:1px solid var(--line);
}
.qrgross .qrbild{width:min(20rem,68vw);max-width:none}
.qrdlg .qradresse{margin:.9rem 0 0;text-align:left}
.qrdlg .fldnote{margin-bottom:.9rem}
.qrdlg .fbtns{justify-content:center}

/* ---------- Hinweisbalken zur Installation ----------
   Sitzt unten, aber ueber der Navigationsleiste. Faehrt sanft ein,
   damit er nicht in den Seitenaufbau springt. */
.instbar{
  position:fixed;left:12px;right:12px;bottom:calc(var(--navraum) + 12px);z-index:58;
  display:flex;align-items:center;gap:.7rem;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:.7rem .8rem;box-shadow:0 6px 26px rgba(0,0,0,.18);
  max-width:32rem;margin:0 auto;
  transform:translateY(140%);opacity:0;transition:transform .28s ease,opacity .28s ease;
}
.instbar.da{transform:translateY(0);opacity:1}
.instbarmark{color:var(--accent);font-size:1.25rem;line-height:1;flex:none}
.instbartext{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.instbartext b{font-size:.875rem;line-height:1.3}
.instbartext small{font-size:.75rem;color:var(--muted);line-height:1.35}
.instbarja{
  flex:none;border:0;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:.8125rem;border-radius:9px;padding:.55rem .85rem;
}
.instbarnein{
  flex:none;border:0;background:transparent;color:var(--muted);
  font-size:1rem;line-height:1;padding:.45rem .5rem;border-radius:8px;
}
.instbarnein:hover{background:var(--bg);color:var(--ink)}
@media (max-width:560px){
  /* Die Navigationsleiste klebt unten - der Balken muss darueber bleiben. */
  .instbar{left:10px;right:10px;gap:.55rem;padding:.6rem .65rem}
  .instbarja{padding:.5rem .7rem;font-size:.78125rem}
  .instbarmark{font-size:1.125rem}
}
@media (prefers-reduced-motion:reduce){
  .instbar{transition:none}
}

/* ---------- Mitteilungen aus der Verwaltung ---------- */
.mittdlg{max-width:26rem;max-height:86vh;overflow-y:auto}
.mitt{
  border-left:3px solid var(--line);padding:.1rem 0 .1rem .8rem;margin:0 0 1rem;
}
.mitt:last-of-type{margin-bottom:.4rem}
.mitt-info{border-left-color:var(--accent)}
.mitt-tipp{border-left-color:var(--green,#2e8b61)}
.mitt-hinweis{border-left-color:var(--red)}
.mitttitel{display:block;font-size:.9375rem;margin-bottom:.25rem}
.mitttext{margin:0;font-size:.875rem;line-height:1.6;overflow-wrap:anywhere}
.mittlink{margin:.55rem 0 0}
.mittlink a{color:var(--accent);font-weight:600;font-size:.875rem}

/* ================================================================
   Version 2.5 – Takt, Zielhabits, Kennzahlen

   Bewusst am Ende des Blattes: Bei gleicher Spezifitaet gewinnt die
   spaetere Regel. Dieses Projekt hat sich schon zweimal daran
   verhoben, dass eine Regel im Mobil-Block VOR ihrer Grundregel
   stand und deshalb wirkungslos blieb.
   ================================================================ */

/* ---- Takt-Auswahl im Formular ---- */
.taktwahl{width:100%}
.taktzeile{margin-top:10px}
.taktreihe{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.taktreihe input[type=number]{width:5.5rem;flex:none}
.taktreihe select{flex:1 1 8rem;min-width:0}
.taktmal{color:var(--muted);font-size:.9375rem;padding-bottom:11px;white-space:nowrap}
.fld.schmal{flex:1 1 7rem;min-width:0;margin-top:0}
.fldcheck{
  display:flex;align-items:flex-start;gap:10px;margin-top:14px;
  font-size:.9375rem;line-height:1.45;cursor:pointer;
}
.fldcheck input{margin-top:3px;flex:none}
#zielBlock{margin-top:10px}

/* ---- Zielhabit in der Tagesliste ---- */
.habit.zielhabit{
  display:block;cursor:default;padding:14px 16px;
}
.habit.zielhabit:hover{background:transparent}
/* Die Grundregel ".habit input" versteckt das Haekchen, damit die
   gestylte Box daneben sichtbar wird. In einem Zielhabit gibt es kein
   Haekchen, sondern echte Eingabefelder - die muessen sichtbar und
   bedienbar bleiben. (Im Browser aufgefallen: ohne diese Zeilen war
   nur der Plus-Knopf zu sehen.) */
.habit.zielhabit input{position:static;opacity:1;pointer-events:auto}
.zh-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zh-kopf .hname{font-weight:600}
/* Der ⋯-Knopf (9.0) steht rechts, wie in jeder anderen Zeile. */
.zh-kopf .hmenu-btn{margin-left:auto}
.zh-haken{color:var(--green);font-weight:700}
.zh-heute{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap}
/* 7.8: von 1.25rem auf die normale Textgroesse.

   Raphas Befund: "Wenn man eine Stueckzahl hat, dann passt diese
   immer nicht so zu den anderen Habits, die Schrift ist unnatuerlich
   gross."

   Er hat recht, und der Grund war ein Missverstaendnis auf meiner
   Seite: Die Zahl SOLLTE herausstechen, weil sie der Inhalt der
   Zeile ist. Nur steht sie nicht allein, sondern in einer Liste
   neben zehn Habits mit normal grossen Namen - und dort liest sich
   ein Fünftel groesser nicht als "wichtig", sondern als "verrutscht".
   Fett bleibt sie; das genuegt vollkommen. */
.zh-stand{font-size:1rem;font-weight:700}
/* "von 8 Stueck heute" darf kleiner sein als die Zahl davor - das
   ist die Bezugsgroesse und nicht der Wert. So entsteht die
   Rangfolge ueber die Groesse dort, wo sie hingehoert (7.8). */
.zh-heute .zusatz{font-size:0.875rem}
.habit.zielhabit.erfuellt .zh-stand{color:var(--green)}
.zh-balken{
  height:9px;border-radius:99px;background:var(--line);
  overflow:hidden;margin-top:12px;
}
.zh-fuell{display:block;height:9px;border-radius:99px;background:var(--accent);transition:width .3s}
.habit.zielhabit .zh-ziel{
  display:flex;justify-content:space-between;gap:10px;
  font-size:.8125rem;color:var(--muted);margin-top:5px;
}
.zh-fertig{margin:6px 0 0;font-size:.875rem;color:var(--green);font-weight:600}
.zh-eingabe{display:flex;gap:8px;margin-top:10px;align-items:center}
.zh-feld{width:6.5rem;flex:none}
.zh-notiz{flex:1 1 4rem;min-width:0}
.zh-plus{
  flex:none;width:36px;height:36px;font-size:1.1875rem;line-height:1;
  background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600;
}
.zh-liste{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.zh-bew{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--accent-soft);color:var(--ink);
  border-radius:99px;padding:3px 6px 3px 10px;font-size:.8125rem;
}
.zh-bew.minus{background:rgba(193,75,75,.13)}
.zh-bew .zusatz{color:var(--muted)}
.zh-weg{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:.875rem;line-height:1;padding:2px 4px;border-radius:99px;
}
.zh-weg:hover{color:var(--red);background:rgba(193,75,75,.12)}

/* ---- Habits ohne festen Kalendertag ---- */
.periodenkarte{padding:0;overflow:hidden}
.pk-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px 8px;
}
.pk-kopf h2{font-size:1rem;margin:0}
.pzeile{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-top:1px solid var(--line);
}
.pzeile.getan{opacity:.62}
.pz-box{
  flex:none;width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:2px solid var(--muted);background:transparent;
  display:grid;place-items:center;font-size:.9375rem;line-height:1;
  color:var(--accent-ink);
}
.pzeile.dran .pz-box{border-color:var(--accent)}
.pz-box.an{background:var(--accent);border-color:var(--accent)}
.pz-text{flex:1;min-width:0}
.pz-text b{display:block;font-weight:600}
.pz-text small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.4}
.pz-zahl{flex:none;color:var(--muted);font-size:.875rem;white-space:nowrap}
.pzeile.dran .pz-zahl{color:var(--accent);font-weight:600}
.pk-ruht{border-top:1px solid var(--line)}
.pk-ruht summary{
  padding:10px 16px;cursor:pointer;color:var(--muted);font-size:.8125rem;
}
.pk-ruht summary:hover{background:var(--hover)}
.pk-ruht .pzeile{opacity:.7}

/* ---------- Die Urlaubsliste (8.0) ---------- */
.uliste{display:grid;gap:8px;margin:10px 0 4px}
.uzeile{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);
}
.uzeile.laeuft{border-color:var(--gruen-urlaub);background:var(--hover)}
.uz-mark{flex:none;font-size:1.0625rem;line-height:1}
.uz-text{flex:1;min-width:0}
.uz-text b{display:block;font-weight:600;font-size:0.9375rem}
.uz-text small{display:block;color:var(--muted);font-size:0.8125rem;line-height:1.4}
.uz-weg{color:var(--muted)}

/* ---------- Die Grenzen (8.0) ----------

   Bewusst dieselbe Bauform wie die Periodenkarte - es ist dieselbe
   Art Zeile, und zwei Bauformen fuer dasselbe waeren nur Unruhe.
   EIN Unterschied ist Absicht: Das Kaestchen zeigt ein "+" statt
   eines leeren Feldes. Ein leeres Kaestchen ist eine Aufforderung,
   und hier gibt es nichts zu erfuellen - man traegt ein, was man
   verbraucht hat.

   Drei Lagen, drei Farben:
     frei   noch etwas uebrig   (ruhig, wie jede andere Zeile)
     voll   aufgebraucht        (gelb: gerade noch gehalten)
     ueber  ueberschritten      (rot: der Zeitraum ist gerissen)
   Die Farbe sitzt auf der Zahl und einem Strich am Rand, nicht auf
   der ganzen Zeile - ein rot hinterlegter Habit sieht aus wie ein
   Fehler der App und nicht wie eine Auskunft ueber die Woche. */
.grenzkarte{padding:0;overflow:hidden}
.gzeile{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-top:1px solid var(--line);
  border-inline-start:3px solid transparent;
}
.gzeile.voll{border-inline-start-color:var(--amber)}
.gzeile.ueber{border-inline-start-color:var(--red)}
.gz-box{
  flex:none;width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:2px solid var(--muted);background:transparent;
  display:grid;place-items:center;font-size:.9375rem;line-height:1;
  color:var(--muted);
}
.gz-box.an{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* Die Zeile ist seit 8.3 ein Knopf: Antippen aendert den Cheatday.
   Sie muss deshalb aussehen wie vorher und nicht wie ein Knopf. */
.gz-text{
  flex:1;min-width:0;text-align:start;
  border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;
}
.gz-text:hover b{text-decoration:underline}
.gz-neu{
  display:block;width:100%;border:0;border-top:1px solid var(--line);
  background:none;padding:11px 16px;font:inherit;font-size:0.875rem;
  color:var(--accent);cursor:pointer;text-align:start;
}
.gz-neu:hover{background:var(--hover)}
.cheatdlg .taktreihe{margin-bottom:4px}
.gz-text b{display:block;font-weight:600}
.gz-text small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.4}
.gz-zahl{flex:none;color:var(--muted);font-size:.875rem;white-space:nowrap}
.gzeile.voll .gz-zahl{color:var(--amber);font-weight:600}
.gzeile.ueber .gz-zahl{color:var(--red);font-weight:600}

@media (max-width:520px){
  .zh-eingabe{flex-wrap:wrap}
  .zh-feld{width:5.5rem}
  .zh-notiz{flex:1 1 100%;order:3}
  .taktreihe input[type=number]{width:4.5rem}
}
.zh-minus{
  flex:none;width:36px;height:36px;font-size:1.1875rem;line-height:1;font-weight:600;
  background:transparent;color:var(--muted);
}
.zh-minus:hover{color:var(--red);border-color:var(--red)}

/* ---- Kennzahlen ---- */
.kz-karte{padding:0;overflow:hidden}
.kz-kopf{display:flex;align-items:flex-start;gap:8px;padding:14px 16px 8px}
.kz-titel{flex:1;min-width:0}
.kz-titel b{display:block;font-weight:600}
.kz-titel small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.4}
.kz-zahlen{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px;padding:0 16px 12px}
.kz-zahlen>div{display:flex;flex-direction:column;gap:1px}
.kz-gross{font-size:1.375rem;font-weight:600;line-height:1.1}
.kz-trend{font-size:.8125rem;font-weight:600;align-self:center}
.kz-trend.gut{color:var(--green)}
.kz-trend.schlecht{color:var(--red)}
.kz-liste{border-top:1px solid var(--line)}
.kz-zeile{
  display:flex;align-items:center;gap:10px;padding:8px 16px;
  border-bottom:1px solid var(--line);font-size:.875rem;
}
.kz-zeile:last-child{border-bottom:0}
.kz-wert{font-weight:600;flex:none;min-width:3.5rem}
.kz-datum{color:var(--muted);flex:none;font-size:.8125rem}
.kz-was{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kz-form{padding:12px 16px;border-top:1px solid var(--line);background:var(--bg)}
.kz-karte .form-actions{padding:12px 16px}
.kz-karte .fldnote{padding:0 16px 12px;margin:0}

/* ---- Vergleich Habits gegen Kennzahl ---- */
.kzvergleich.gut{border-left:3px solid var(--green)}
.kzvergleich.schlecht{border-left:3px solid var(--amber)}
.kzv-reihe{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:14px 0 10px}
.kzv-block{flex:1 1 8rem;min-width:0;background:var(--card);padding:12px 14px;
  display:flex;flex-direction:column;gap:2px}
.kzv-kopf{font-size:.8125rem;color:var(--muted)}
.kzv-wert{font-size:1.5rem;font-weight:600;line-height:1.1}
/* Drei Kacheln nebeneinander - dieselbe Bauart wie ".summary.s4",
   nur mit drei Spalten. */
.summary.s3{grid-template-columns:repeat(3,1fr)}
@media (max-width:420px){.summary.s3{grid-template-columns:repeat(3,1fr);gap:6px}}
.stat-grid.stat-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-card .zh-balken{margin-top:10px}
.stat-card .zh-ziel{display:flex;justify-content:space-between;gap:10px;
  font-size:.8125rem;color:var(--muted);margin-top:5px}
.stat-card .fldnote{margin-top:4px}

/* Kleiner Hinweis in der Einrichtung fuer Leute, die schon ein Konto
   haben. Bewusst leiser als die uebrigen Elemente: Es ist der
   seltenere Weg und soll den Erststart nicht ueberlagern. */
.obschon{
  font-size:.8125rem;color:var(--muted);margin:2px 0 14px;
}
.obschon .linkbtn{font-size:.8125rem;font-weight:600}


/* ---- Unterreiter: immer alle erreichbar ----
   Die Chipleiste scrollte seitlich, und die Scrollleiste war
   ausgeblendet. Auf dem Handy wischt man - mit der Maus ging das
   nicht, und der Rest der Reiter war schlicht nicht erreichbar
   (gemessen: 240 von 888 Pixeln lagen ausserhalb).

   Der erste Versuch band die Loesung an "@media (hover:hover) and
   (pointer:fine)". Das war falsch: Auf einem Windows-Geraet MIT
   Beruehrungsbildschirm meldet der Browser einen groben Zeiger, die
   Regel greift nicht - und der Fehler bleibt. Eine Barriere darf
   nicht von einer Geraeteerkennung abhaengen.

   Jetzt brechen die Chips ueberall um. Kein Scrollen, keine
   versteckte Leiste, nichts, was man kennen muss. Auf schmalen
   Schirmen kostet das eine Zeile mehr - das ist es wert. */
.snav{
  flex-wrap:wrap;
  overflow:visible;
  padding-bottom:2px;
}
/* Kleiner machen bringt hier nichts: Auch bei 12px-Schrift bleiben es
   auf einem 390px-Schirm drei Zeilen - gemessen. Zwei Pixel Gewinn
   sind keine schlechtere Lesbarkeit wert, deshalb bleibt die Groesse
   wie im Rest der App. */

/* Plus im Kopf einer Tageszeit */
.dp-plus{
  flex:none;width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-size:1.0625rem;line-height:1;font-weight:600;display:grid;place-items:center;
}
.dp-plus:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Eigene Uebersicht am Ende der Tagesansicht ---- */
.uebersicht{
  padding:0;overflow:hidden;
  /* Deutlich abgesetzt: Oben steht, was heute zu tun ist. Hier steht,
     wohin es laeuft. Der Abstand und die Linie machen den Unterschied
     sichtbar, ohne eine zweite Seite daraus zu machen. */
  margin-top:26px;border-top:3px solid var(--accent-soft);
}
.ub-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px 6px;
}
.ub-kopf h2{font-size:1rem;margin:0}
.ub-block{padding:10px 16px 14px;border-top:1px solid var(--line)}
.ub-block:first-of-type{border-top:0}
.ub-block h3{
  margin:0 0 8px;font-size:.75rem;font-weight:600;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;
}
.ub-zeile{display:flex;align-items:center;gap:10px;padding:5px 0;flex-wrap:wrap}
.ub-zeile.schmal{padding:4px 0}
.ub-text{flex:1 1 8rem;min-width:0}
.ub-text b{display:block;font-weight:600;font-size:.9375rem;overflow-wrap:anywhere}
.ub-text small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.4}
.ub-bar{
  flex:1 1 6rem;min-width:4rem;height:8px;border-radius:99px;
  background:var(--line);overflow:hidden;
}
.ub-bar i{display:block;height:8px;border-radius:99px;background:var(--accent)}
.ub-zahl{flex:none;font-size:.8125rem;color:var(--muted);min-width:3rem;text-align:right}
.ub-wert{flex:none;font-weight:600}
/* ---- Schnelleintrag im Ueberblick (7.5) ----
   Die Zeile ist jetzt ein Knopf und muss trotzdem aussehen wie eine
   Zeile: Der Knopf uebernimmt das Flex-Gerippe von .ub-zeile und
   raeumt alles weg, was ein Knopf sonst mitbringt. */
.ub-zgruppe{border-bottom:1px solid transparent}
.ub-zeile.ub-tap{
  width:100%;background:none;border:0;text-align:left;
  padding:6px 6px;margin:0 -6px;border-radius:10px;color:inherit;
}
.ub-zeile.ub-tap:hover{background:var(--hover)}
.ub-zeile.ub-tap.auf{background:var(--hover)}
.ub-zeile.ub-tap:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ub-schnell{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 6px 10px;
}
.ub-schnell .ub-val{
  /* Breit genug fuer "eigene Zahl": Bei 5rem stand dort nur "eigene",
     und ein abgeschnittener Platzhalter erklaert nichts. Passt es in
     die Zeile nicht mehr, rutscht der Knopf darunter - das ist immer
     noch besser als ein halbes Wort. */
  flex:1 1 7.5rem;min-width:7rem;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font:inherit;font-size:.875rem;
}
.ub-schnell .tchip,.ub-schnell .ghost{min-height:38px}
.ub-leer{margin:0;color:var(--muted);font-size:.875rem;line-height:1.5}
.ub-mehr{margin:6px 0 0;color:var(--muted);font-size:.8125rem}
.ub-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.ub-kacheln>div{background:var(--bg);border-radius:10px;padding:9px 6px}
.ub-kacheln b{display:block;font-size:1.125rem;font-weight:600;line-height:1.2}
.ub-kacheln b.good{color:var(--green)}
.ub-kacheln b.mid{color:var(--amber)}
.ub-kacheln b.low{color:var(--red)}
.ub-kacheln span{display:block;font-size:.75rem;color:var(--muted);margin-top:1px}
.uebersicht.leer .ub-leer{padding:0 16px 16px}

/* ---------- Aufgaben direkt auf "Heute" (2.7) ----------
   Die Zeile sitzt am Fuss der To-do-Karte, deshalb keine eigene
   Umrandung, sondern nur eine Trennlinie nach oben - sonst steht ein
   Kasten im Kasten. */
.td-neu{
  display:flex;gap:8px;align-items:center;
  padding:10px 12px;border-top:1px solid var(--line);
}
.td-neu input{
  flex:1;min-width:0;font-size:0.875rem;padding:8px 10px;
}
button.mini.td-plus{
  width:36px;height:36px;padding:0;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;font-weight:600;line-height:1;
  color:var(--accent);border-color:var(--accent);
}
button.mini.td-plus:hover{background:var(--accent-soft)}
/* Zweite Lobzeile: gleiche Groesse, aber ruhiger als der volle Jubel -
   der Tag ist ja noch nicht fertig. */
.cheer.fast{color:var(--muted);font-weight:500;margin-top:6px}
.cheer.fast b{color:var(--green)}

/* ---------- Rückkehr nach einer Pause (2.8) ----------
   Ruhig gehalten, nicht alarmierend: Es ist keine Warnung, sondern eine
   Richtigstellung. Deshalb der grüne Faden statt des orangen Akzents. */
.card.rueckkehr{border-left:3px solid var(--green);display:flex;flex-direction:column;gap:9px}
.card.rueckkehr h2{margin:0;font-size:1.0625rem}
.rk-satz{margin:0;font-size:0.9062rem;line-height:1.55;color:var(--muted)}
.rk-satz b{color:var(--ink)}
.rk-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(5rem,1fr));gap:8px;
  text-align:center;margin:2px 0}
.rk-zahlen>div{background:var(--bg);border-radius:10px;padding:9px 6px}
.rk-zahlen b{display:block;font-size:1.25rem;font-weight:600;line-height:1.2;color:var(--green)}
.rk-zahlen span{display:block;font-size:0.75rem;color:var(--muted);margin-top:1px}
.rk-tipp{margin:0;font-size:0.9062rem;line-height:1.5}

/* ---------- Erststart: ein Knopf statt vier Fragen (2.8) ---------- */
.oblos{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin:16px 0 4px}
.oblos .obstart{width:100%;padding:12px 18px;font-size:1rem}
.oblos .obwahl{align-self:center;font-size:0.8125rem}
#obOptionen .obq{margin-top:14px}

/* ---------- Synergie-Hinweis im Überblick (2.8) ---------- */
.synhint{border-left:3px solid var(--green)}
.synhint .sh-kopf{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.synhint .sh-kopf h3{margin:0;font-size:0.9375rem}
.synhint .sh-zeichen{color:var(--green);font-size:1.125rem;line-height:1}
.synhint p{margin:0 0 10px}
.synhint small{color:var(--muted)}

/* ---------- Ori (2.9) ----------
   Ruhig gehalten. Die Figur soll wie eine Randnotiz wirken, nicht
   wie eine Benachrichtigung – sie meldet sich selten, und wenn,
   dann soll man sie lesen und nicht wegtippen wollen. */
.card.orikarte{
  border-left:3px solid var(--accent);
  display:flex;flex-direction:column;gap:7px;
}
.card.orikarte.still{border-left-color:var(--line)}
.ori-kopf{display:flex;align-items:center;gap:8px}
.ori-kopf b{font-size:0.8125rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.ori-ikon{width:22px;height:22px;color:var(--accent);flex:none}
/* Bei 22 Pixeln sind Lider und Wangen kein Ausdruck mehr, sondern
   Schmutz: Sie liegen dann auf zwei, drei Bildpunkten und machen das
   Gesicht unruhig, statt es zu beleben. Also weg – dieselbe Zeichnung,
   nur ohne die Feinheiten, die diese Größe nicht mehr trägt. */
.ori-ikon .ori-lid,.ori-ikon .ori-fein{display:none}
.orikarte.still .ori-ikon{color:var(--muted)}
.ori-text{margin:0;font-size:0.9375rem;line-height:1.55;overflow-wrap:anywhere}
.ori-text b{font-weight:600}
/* Größere Ausgabe für den Erststart und den Tagesabschluss */
.ori-gross{width:40px;height:40px;color:var(--accent);flex:none}

/* ---------- Ori im Erststart (2.9) ---------- */
.ori-vor{display:flex;align-items:flex-start;gap:14px;margin-bottom:4px}
.ori-vor h2{margin:0 0 4px}
.ori-vor p{margin:0;color:var(--muted);font-size:0.9375rem;line-height:1.5}
/* ---- Ori bewegt sich auch hier (7.7) ----

   Die Begruessung, der Motiv-Schritt und der Rundgang bringen eine
   eigene, grosse Ori-Darstellung mit. Sie stand bis 7.6 still: Die
   Bewegungen hingen an .ori-figur (dem Knopf unten links) und an
   .obori-fig (der Ecke ueber dem gelben Kasten) - an genau den zwei
   Klassen also, die hier nicht vorkommen.

   Die Folge: Ausgerechnet auf der ERSTEN Folie, wo Ori sich
   vorstellt, war er ein Aufkleber. Raphas Befund: "Ori ist bei
   einigen Schritten des Onboarding nicht lebendig."

   Der Aufbau ist derselbe wie bei der Ecke: aussen ein Rahmen, der
   die Groesse setzt, darin das Wiegen, darin das Atmen. Zwei
   Bewegungen auf demselben Element gingen nicht - beide schreiben
   transform, und die zweite gewaenne. */
/* Was Ori tut und was nicht - auf der Begruessung (7.7). Zwei kurze
   Absaetze, abgesetzt vom Rest, damit sie nicht wie Kleingedrucktes
   aussehen. */
.obwer{
  margin:9px 0 2px;padding:9px 11px;border-radius:12px;
  background:var(--hover);
}
.obwer p{margin:0;font-size:0.8125rem;line-height:1.55;color:var(--muted)}
.obwer p+p{margin-top:7px}
.obwer b{color:var(--ink)}
/* ---- Der Auftritt (7.8) ----

   Ori kommt herein, sagt Hallo, und erst danach taucht der Rest auf.
   Jeder Block traegt seine eigene Verzoegerung als --t; gesteuert
   wird sie in 06-konto.js, weil sie dort zum Text gehoert.

   WICHTIG: Ohne .ob-rein am Vorfahren passiert gar nichts. Ein Block
   mit .obauf ist dann ein Block wie jeder andere - er steht einfach
   da. Genau das braucht der Fall "weitermachen, wo du warst", und
   genau das braucht auch der Fall "weniger Bewegung": Beide
   bekommen die fertige Seite, ohne dass eine Zeile unsichtbar
   haengenbleibt. */
@media (prefers-reduced-motion:no-preference){
  @keyframes obAuf{
    from{opacity:0;transform:translateY(10px)}
    to  {opacity:1;transform:none}
  }
  /* Die Figur springt herein und faengt sich - etwas ueber das Ziel
     hinaus und zurueck. Ein blosses Einblenden waere kein Auftritt,
     sondern ein Ladevorgang. */
  @keyframes obOriRein{
    0%  {opacity:0;transform:scale(.25) translateY(16px)}
    55% {opacity:1;transform:scale(1.14) translateY(0)}
    78% {transform:scale(.96)}
    100%{opacity:1;transform:scale(1)}
  }
  .ob-rein .obauf{
    animation:obAuf .42s cubic-bezier(.2,.8,.25,1) both;
    animation-delay:var(--t,0ms);
  }
  .ob-rein .ori-vorfig{
    animation:obOriRein .72s cubic-bezier(.2,.8,.25,1) both;
    transform-origin:50% 80%;
  }
  /* Die Ueberschrift kommt kurz nach der Figur, nicht mit ihr.

     7.9: Die Zeile .ori-vor selbst traegt KEIN .obauf mehr. Bis 7.8
     tat sie es, und damit lief ueber Ueberschrift und Absatz je
     zweimal dieselbe Bewegung: einmal geerbt vom Kasten (ab 0 ms),
     einmal die eigene (ab 320 bzw. 420 ms). Gemessen wanderte die
     Ueberschrift dadurch 16,9 statt 10 Pixel, mit einem Knick in der
     Mitte, wo die zweite Bewegung einsetzte. Ein Auftritt, bei dem
     ein Teil zweimal losfaehrt, sieht aus wie ein Ruckler - und war
     einer. Jetzt bewegt sich jedes der drei Stuecke genau einmal. */
  .ob-rein .ori-vor h2{animation:obAuf .4s ease .32s both}
  .ob-rein .ori-vor p {animation:obAuf .4s ease .42s both}
}

/* Der Kettensatz steht direkt ueber dem Knopf, zu dem er hinfuehrt. */
.obkette-satz{
  margin:11px 0 7px;font-size:0.875rem;line-height:1.5;color:var(--ink);
}
.ori-vorfig{
  display:block;flex:none;width:64px;height:64px;color:var(--accent);
  pointer-events:none;
}
.ori-vorfig .obori-wiege{display:block;width:100%;height:100%}
@media (max-width:400px){.ori-vorfig{width:54px;height:54px}}
/* Seit 3.2 stehen hier 14 Gründe statt 5. Damit der Erststart weiter
   ohne Wischen auf einen 844-Pixel-Schirm passt, sind die Chips
   schmaler geworden – sonst brauchte allein diese Reihe 395 Pixel. */
.ori-motive{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.ori-mbtn{
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:5px 11px;font:inherit;font-size:0.8125rem;line-height:1.35;
  cursor:pointer;transition:.15s;
}
.ori-mbtn:hover{border-color:var(--accent)}
.ori-mbtn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
#oriEigen{width:100%}
.ori-haken{display:flex;flex-direction:column;gap:6px;margin:2px 0 10px}
.ori-hbtn{
  border:1px solid var(--line);background:var(--card);border-radius:10px;
  padding:9px 12px;font:inherit;font-size:0.9062rem;text-align:left;cursor:pointer;
  transition:.15s;overflow-wrap:anywhere;
}
.ori-hbtn:hover{border-color:var(--accent)}
.ori-hbtn.on{background:var(--green-soft,var(--accent-soft));border-color:var(--green);color:var(--green);font-weight:600}

/* ---------- Tagesabschluss (2.9) ---------- */
.card.checkinzeile{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font:inherit;cursor:pointer;border:1px solid var(--line);
}
.card.checkinzeile:hover{border-color:var(--accent)}
.ciz-lbl{font-weight:600;font-size:0.9375rem;flex:none}
.ciz-wert{flex:1;color:var(--muted);font-size:0.875rem;overflow-wrap:anywhere}
.ciz-pfeil{color:var(--muted);font-size:1.25rem;line-height:1;flex:none}

.card.tagzu{display:flex;flex-direction:column;gap:9px}
.card.tagzu.offen{border-left:3px solid var(--accent)}
.tz-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tz-kopf b{font-size:0.9375rem}
/* Das Datum steht rechts und tritt zurück – es beantwortet eine Frage,
   die man nur manchmal hat („welcher Tag eigentlich?“). */
.tz-datum{margin-left:auto;font-size:0.75rem;color:var(--muted)}
.tz-text{margin:0;font-size:0.9062rem;color:var(--muted);line-height:1.5}
.card.tagzu .mini{align-self:flex-start}

.dlg.abschluss{max-width:34rem;display:flex;flex-direction:column;gap:10px}
.dlg.abschluss h3{margin:6px 0 0;font-size:0.9375rem}
.ab-datum{margin:-4px 0 8px;font-size:0.8125rem;color:var(--muted)}
.ab-summe{margin:0;font-size:0.9375rem;font-weight:600}

/* ---------- Ori schreibt, statt dazustehen (ab 5.7) ---------- */
/* Der Schatten hält die Höhe der Blase von Anfang an. Ohne ihn
   wüchse der Kasten bei jedem Zeichen und das halbe Bild ruckelte
   mit. Er ist unsichtbar, belegt aber genau denselben Platz wie der
   fertige Satz – deshalb liegen beide übereinander und nicht
   untereinander. */
.oritipp-schatten,.oritipp-echt{grid-area:1/1}
/* Nur waehrend des Tippens (Klasse .tippt). Danach ist es ein
   gewoehnlicher Absatz - ein Raster wuerde jedes <b> darin in eine
   eigene Zeile setzen.

   7.9: Diese Regel stand bis 7.8 auf zwei festen Namen -
   #oriBlaseText und .obori-text. Ori hat seither an drei weiteren
   Stellen sprechen gelernt (Begruessung, Motiv, Rundgang), und
   keine davon traegt einen der beiden. Dort lagen Schatten und Satz
   also NICHT uebereinander, sondern untereinander: Der Absatz wuchs
   waehrend des Tippens Zeile um Zeile und sprang am Ende wieder
   zusammen. Gemessen auf der Begruessung: 84 -> 168 -> 84 Pixel.
   Das war Raphas "die Schrift von Ori huepft leicht".

   Die Klasse setzt ausschliesslich oriTippen, und zwar genau
   solange getippt wird. Sie allein zu nehmen heisst: Jede Stelle,
   an der Ori kuenftig zu sprechen anfaengt, ist von sich aus
   richtig. Derselbe Fehler wie in 7.7 - eine Eigenschaft an Namen
   gehaengt statt an den Zustand, der sie braucht. */
.tippt{display:grid}
.oritipp-schatten{visibility:hidden}
/* Der Schreibstrich. Blinkt nur, solange getippt wird. */
.oritipp-echt::after{
  content:"";display:inline-block;width:2px;height:1em;
  margin-left:1px;vertical-align:-.14em;background:currentColor;
  animation:oriStrich .85s steps(2,start) infinite;
}
@keyframes oriStrich{to{opacity:0}}

/* Die Blase klappt aus Oris Ecke auf – oben rechts, dort sitzt er.
   transform-origin ist der ganze Trick: ohne ihn kommt sie aus der
   Mitte und wirkt wie ein Fenster, nicht wie eine Äußerung. */
.ori-blase.klappt{
  animation:oriKlapp .26s cubic-bezier(.2,1.15,.45,1);
  transform-origin:top right;
}
@keyframes oriKlapp{
  from{opacity:0;transform:scale(.82) translate(8px,-6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ori-blase.klappt{animation:none}
  .oritipp-echt::after{animation:none;opacity:0}
}

/* ---------- Ori im Erststart (ab 5.7) ---------- */
/* Eine Zeile über jedem Schritt: die Figur und ein Satz dazu. Sie
   ist bewusst schmal – Ori begleitet den Schritt, er ist nicht der
   Schritt. */
/* Ori sitzt auf der oberen rechten Ecke des Kastens, nicht darin
   (siehe obOriZeile in 06-konto.js). Der Kasten bekommt dafuer oben
   Abstand und rechts Platz frei. */
.obori{
  position:relative;
  background:var(--accent-soft);border-radius:12px;
  padding:13px 66px 13px 14px;margin:22px 0 4px;
}
.obori-ecke{
  position:absolute;top:-20px;right:6px;
  width:56px;height:56px;display:block;color:var(--accent);
  /* Kein Zeiger, kein Fokus: Hier ist Ori Bild, nicht Knopf. Den
     Knopf gibt es unten links in der App. */
  pointer-events:none;
}
.obori-wiege{
  display:block;width:100%;height:100%;
  animation:oriWiegen 7s ease-in-out infinite;
  transform-origin:50% 68%;
}
/* Dieselben Bewegungen wie unten links in der App. Sie hingen bisher
   an .ori-figur - also am Knopf - und liefen deshalb ueberall dort
   nicht, wo Ori kein Knopf ist. */
.obori-fig{
  width:100%;height:100%;color:inherit;display:block;
  animation:oriAtmen 4.5s ease-in-out infinite;
  transform-origin:50% 60%;
}
.obori-fig .ori-strahlen{
  transform-box:fill-box;transform-origin:center;
  animation:oriDrehen 30s linear infinite;
}
.obori-fig .ori-augen{
  transform-box:fill-box;transform-origin:center;
  animation:oriBlinzeln 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .obori-wiege,.obori-fig,.obori-fig .ori-strahlen,.obori-fig .ori-augen{animation:none}
}
@media (max-width:400px){
  .obori{padding-right:58px}
  .obori-ecke{width:50px;height:50px;top:-17px;right:4px}
}
/* MIT DER SCHACHTEL DAVOR, und zwar aus einem konkreten Grund:
   `.dlg p` setzt margin-bottom:14px und line-height:1.55 und hat eine
   hoehere Spezifitaet als `.obori-text` allein - die beiden Zeilen hier
   sind also jahrelang wirkungslos gewesen. Sichtbar wurde es erst, als
   Ori aus dem Kasten heraus auf die Ecke zog: Seitdem ist der Kasten
   nur noch so hoch wie sein Text, und die 14 Pixel Rand standen als
   leerer Streifen unten drin. */
.obori .obori-text{
  margin:0;font-size:0.9375rem;line-height:1.45;min-height:1.45em;
}

/* ---------- Mehrere Ziele auf einmal (ab 5.7) ---------- */
.obziele{display:flex;flex-direction:column;gap:8px}
.obzeile{
  display:grid;grid-template-columns:1.6rem 1fr;align-items:center;gap:9px;
  margin:0;
}
.obz-nr{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:0.8125rem;
  color:var(--muted);text-align:right;
}
.obzeile input{margin:0}
.obzmehr{margin:10px 0 0}

/* Je Ziel eine Zeile mit Maß und Datum. */
.obmass{display:flex;flex-direction:column;gap:12px}
.obmz{
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  background:var(--card);display:flex;flex-direction:column;gap:8px;
}
.obmz-titel{font-size:0.9375rem;font-weight:600;overflow-wrap:anywhere}
/* Vier Felder: am Rechner nebeneinander, auf dem Handy zwei Reihen.
   Kein festes Vierspaltenraster – "Einheit" braucht weniger Platz als
   "Bis wann", und gleich breite Spalten sähen genau danach aus. */
.obmz-reihe{display:flex;flex-wrap:wrap;gap:8px}
.obmz-reihe .fld{margin:0;flex:1 1 7.5rem;min-width:0}
.obmz-reihe .fld.obmz-einheit{flex:1 1 6rem}
/* „Etwas erreichen“ passte auf 430 Pixel nicht in die Auswahl und
   stand als „Etwas erreicl“ da – ein abgeschnittenes Wort sieht nach
   Fehler aus. Die Auswahl bekommt deshalb eine eigene Zeile, sobald
   es eng wird. */
.obmz-reihe .fld:first-child{flex:1 1 10rem}
@media (max-width:400px){.obmz-reihe .fld:first-child{flex:1 1 100%}}
.obmz-reihe .fld[hidden]{display:none}


/* ---------- Bilanz des Tages (ab 5.6) ---------- */
/* Der Höhepunkt: EINE Sache, hervorgehoben. Er bekommt als einziges
   Element im Fenster eine Fläche – alles andere wäre gleichrangig
   und damit wieder eine Liste, die niemand liest. */
.ab-hoch{
  display:flex;align-items:center;gap:11px;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:12px;padding:11px 13px;
}
.abh-zeichen{font-size:1.5rem;line-height:1;flex:none}
.ab-hoch p{margin:0;font-size:0.9375rem;font-weight:600;overflow-wrap:anywhere}

/* Die Kacheln. Automatische Spalten statt fester drei: Es sind je
   nach Tag zwei bis fünf, und eine halbleere letzte Reihe sieht nach
   fehlendem Inhalt aus. */
.ab-bilanz{
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
}
.abk{
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:10px 6px;text-align:center;
  display:flex;flex-direction:column;gap:2px;
}
.abk b{font-size:1.25rem;font-weight:700;line-height:1.1}
.abk b.good{color:var(--green)}
.abk span{font-size:0.75rem;color:var(--muted);line-height:1.25}
.ab-serie{margin:0;font-size:0.875rem;color:var(--muted)}

/* ---------- Der Moment nach dem Abschließen ---------- */
/* Liegt über allem, nimmt aber keine Klicks weg: Wer weitertippen
   will, soll nicht auf eine Animation warten müssen. */
.abfeier{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;padding:20px;
}
.abfeier.weg{opacity:0;transition:opacity .4s ease}
.abf-karte{
  position:relative;pointer-events:auto;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  padding:22px 26px 20px;text-align:center;max-width:19rem;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:abfAuf .34s cubic-bezier(.2,1.3,.5,1);
}
.abf-ori{width:56px;height:56px;color:var(--accent)}
.abf-karte b{font-size:1.0625rem}
.abf-karte p{margin:0;font-size:0.875rem;color:var(--muted);overflow-wrap:anywhere}
.abf-karte p.abf-serie{font-weight:600;color:var(--accent)}
@keyframes abfAuf{
  from{transform:scale(.88) translateY(10px);opacity:0}
  to{transform:none;opacity:1}
}
/* Die Funken steigen aus der Karte auf und fallen. Vierzehn Stück –
   genug, dass es nach etwas aussieht, wenig genug, dass auch ein
   älteres Telefon nicht ins Stocken kommt. */
.abf-funken{position:absolute;inset:0;overflow:visible;pointer-events:none}
.abf-funken i{
  position:absolute;top:34%;width:7px;height:11px;border-radius:2px;
  background:var(--accent);opacity:0;
  animation:abfFunke 1.25s ease-out forwards;
  animation-delay:var(--spaet,0ms);
}
.abf-funken i:nth-child(3n){background:var(--green)}
.abf-funken i:nth-child(3n+1){background:var(--amber)}
@keyframes abfFunke{
  0%{opacity:0;transform:translate(0,0) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;
       transform:translate(calc(var(--weit,110px) * .18), calc(var(--weit,110px) * -1))
                 rotate(var(--dreh,120deg))}
}
@media (prefers-reduced-motion:reduce){
  .abf-karte{animation:none}
  .abf-funken{display:none}
}
.ab-morgen{margin:0;font-size:0.9062rem;color:var(--muted)}
.ab-vor{display:flex;flex-direction:column;gap:6px}
.ab-vorbtn{
  border:1px solid var(--line);background:var(--card);border-radius:10px;
  padding:9px 12px;font:inherit;text-align:left;cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;gap:1px;
}
.ab-vorbtn:hover{border-color:var(--accent)}
.ab-vorbtn b{font-weight:600;font-size:0.9062rem;overflow-wrap:anywhere}
.ab-vorbtn small{color:var(--muted);font-size:0.7812rem}
.orikarte .ori-knoepfe{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.orikarte.vorschlag{border-left-color:var(--amber)}
.orikarte.vorschlag .ori-ikon{color:var(--amber)}


/* ---------- Ori-Leiste (3.0) ----------
   Ori steht dauerhaft über der Tagesansicht. Die Bewegung ist mit
   Absicht klein: Die Strahlen drehen sich einmal in 90 Sekunden, die
   Figur atmet in 5 Sekunden. Wer hinsieht, merkt es; wer arbeitet,
   wird nicht abgelenkt. Alles davon schaltet sich bei
   "prefers-reduced-motion" ab. */
.oribar{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 12px;min-height:52px;
}
/* Oris Strahlen reichen bis an den Rand seines Zeichenbereichs (siehe
   den Kommentar in oriZeichen, 06-ori.js). Ein SVG schneidet dort ab -
   und sobald er atmet oder hopst, fehlt die obere Strahlenspitze.
   Deshalb darf er hinausragen. Er sitzt ueberall in einem Kasten mit
   Polsterung; auffallen tut es nur, wenn es fehlt. */
.orisvg{overflow:visible}
.ori-figur{
  flex:none;width:52px;height:52px;padding:0;border:0;background:transparent;
  cursor:pointer;color:var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease;
}
.ori-figur:hover{transform:scale(1.06)}
.ori-figur:active{transform:scale(.94)}
.ori-figur:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ori-figur .ori-gross{width:46px;height:46px;color:inherit}

/* Atmen: sehr flach, sonst wirkt es wie ein Herzschlag. */
@keyframes oriAtmen{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-2.5px) scale(1.045)}
}
/* Strahlen drehen sich langsam, der Kopf bleibt stehen - deshalb
   dreht sich das ganze SVG und die Augen werden gegengedreht.
   Einfacher und robuster: nur ein sehr langsames Wiegen. */
@keyframes oriWiegen{
  0%,100%{transform:rotate(-3.5deg)}
  50%    {transform:rotate(3.5deg)}
}
@keyframes oriHopsen{
  0%  {transform:translateY(0)   scale(1)}
  35% {transform:translateY(-7px) scale(1.08)}
  60% {transform:translateY(0)   scale(.97)}
  100%{transform:translateY(0)   scale(1)}
}
/* Bewegt wird das Bild IM Knopf, nie der Knopf selbst. Ein Knopf, der
   sich dauernd verschiebt, ist ein bewegliches Ziel - schlecht zu
   treffen, und fuer wen die Feinmotorik nicht mitspielt, richtig
   aergerlich. Der Knopf steht also still, Ori darin lebt.

   HIER LAG EIN FEHLER (bis 4.2): Beide Bewegungen standen in EINER
   animation-Zeile auf demselben Element. Beide verstellen transform -
   und dann gewinnt die letzte. Das Wiegen lief also nie, uebrig blieb
   ein zwei Pixel flaches Atmen. Genau deshalb wirkte Ori starr.

   Jetzt hat jede Bewegung ihr eigenes Element:
     .ori-wiege   wiegt sich (aussen)
     .ori-gross   atmet     (innen)
     .ori-strahlen dreht sich langsam (im Bild)
     .ori-augen   blinzelt  (im Bild) */
.ori-figur .ori-wiege{
  display:flex;align-items:center;justify-content:center;
  animation:oriWiegen 7s ease-in-out infinite;
  transform-origin:50% 68%;
}
.ori-figur .ori-gross{
  animation:oriAtmen 4.5s ease-in-out infinite;
  transform-origin:50% 60%;
}
/* Die Strahlen drehen sich, der Kopf bleibt stehen. Das war seit 3.0
   die Absicht und ging erst, seit die Strahlen eine eigene Gruppe im
   Bild sind. Eine Umdrehung in 30 Sekunden: Wer hinsieht, merkt es;
   wer arbeitet, wird nicht abgelenkt. */
.ori-figur .ori-strahlen{
  transform-box:fill-box;transform-origin:center;
  animation:oriDrehen 30s linear infinite;
}
/* Blinzeln: zweimal je Runde, jedes Mal gut hundert Millisekunden.
   Nichts macht ein Gesicht so schnell lebendig wie ein Lidschlag. */
.ori-figur .ori-augen{
  transform-box:fill-box;transform-origin:center;
  animation:oriBlinzeln 6.5s ease-in-out infinite;
}
.ori-figur.hopst .ori-gross{animation:oriHopsen .55s ease-out}
/* Waehrend er redet, wippt er leicht mit - so gehoert die Blase
   sichtbar zu ihm und steht nicht bloss daneben. */
#oriEcke.spricht .ori-figur .ori-wiege{animation:oriWiegen 2.6s ease-in-out infinite}
@keyframes oriDrehen{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes oriBlinzeln{
  0%,38%,41%,90%,93%,100%{transform:scaleY(1)}
  39.5%{transform:scaleY(.08)}
  91.5%{transform:scaleY(.08)}
}

/* Die Sprechblase haengt unter der Figur, der Zipfel zeigt nach oben
   auf sie. Bis 4.2 sass sie neben ihr und zeigte nach links. */
.ori-blase{
  position:relative;flex:1;min-width:0;
  background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:12px 4px 12px 12px;
  padding:11px 34px 11px 14px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.05);
  animation:oriBlaseAuf .28s ease-out;
}
@keyframes oriBlaseAuf{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to  {opacity:1;transform:none}
}
.ori-blase::before{
  content:"";position:absolute;right:16px;top:-9px;
  width:0;height:0;border:6px solid transparent;
  border-bottom-color:var(--accent);border-top:0;
}
.ori-blase p{margin:0;font-size:0.9375rem;line-height:1.5;overflow-wrap:anywhere}
.ori-blase p b{font-weight:600}
.ori-zu{
  position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:0.8125rem;line-height:1;border-radius:6px;
}
.ori-zu:hover{background:var(--bg);color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .ori-figur .ori-gross,.ori-figur.hopst .ori-gross,.ori-blase,
  .ori-figur .ori-wiege,.ori-figur .ori-strahlen,.ori-figur .ori-augen,
  #oriEcke.spricht .ori-figur .ori-wiege{animation:none}
  .ori-figur:hover,.ori-figur:active{transform:none}
}
/* Reiter-Ring während der Führung */
.oriring{position:relative}
.oriring::after{
  content:"";position:absolute;inset:2px;border-radius:12px;
  border:2px solid var(--accent);animation:oriRing 1.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes oriRing{0%,100%{opacity:.35}50%{opacity:1}}
.orikarte.oritipp .ori-kopf{position:relative;padding-right:28px}
.orikarte.oritipp .ori-zu{top:-2px;right:-4px}
@media (prefers-reduced-motion: reduce){ .oriring::after{animation:none;opacity:1} }
.ori-blase .ori-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:9px}

/* ---------- Ori in der Ecke + Werkzeugfach (3.0) ---------- */
/* Ori faengt von selbst an zu reden. Deshalb darf seine Blase keine
   Beruehrung schlucken: sie liegt ueber dem Inhalt, und wer daneben
   auf einen Knopf tippt, soll den Knopf treffen und nicht Ori.
   Darum nimmt nur an, was wirklich ein Bedienelement ist - die Figur,
   das Kreuz und die Knoepfe in der Blase. */
/* Ab 4.3 steht Ori oben rechts, auf gleicher Hoehe wie der Stern mit
   den Punkten - dort, wo auch sonst alles steht, was ueber den Stand
   der Dinge Auskunft gibt. Unten links kam er dem Notizfeld ins
   Gehege und stand auf dem Handy fast im Daumenweg.

   Die genaue Hoehe rechnet oriEckeSetzen() aus der Pillenzeile aus
   und schreibt sie in style.top; der Wert hier ist nur der Anfang,
   bis einmal gemessen wurde. Damit die Pillen nicht unter ihn
   rutschen, haelt die Kopfzeile Platz frei (body.mit-ori). */
#oriEcke{
  position:fixed;right:14px;top:72px;z-index:55;
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  max-width:min(20rem, calc(100vw - 32px));
  pointer-events:none;
}
body.mit-ori .hright{padding-right:64px}
/* So viel Platz, wie Ori breit ist, plus etwas Luft - sonst
   schieben sich Stern und Zahnrad unter ihn. */
@media (min-width:760px){body.mit-ori .hright{padding-right:80px}}
@media (min-width:1100px){body.mit-ori .hright{padding-right:88px}}
#oriEcke:empty{display:none}
#oriEcke .ori-blase{pointer-events:none}
#oriEcke .ori-figur,
#oriEcke .ori-zu{pointer-events:auto}
/* Nur die Knöpfe selbst, NICHT ihre Reihe: der Behälter ist ein
   Flex-Kasten mit Abständen, und diese Lücken lagen als tote Fläche
   über dem Inhalt (gemessen: 20 Rasterfelder). */
#oriEcke .ori-knoepfe{pointer-events:none}
#oriEcke .ori-knoepfe>*{pointer-events:auto}
/* KEIN Kreis, keine Plakette: Ori steht frei auf der Seite. Der
   Hintergrund war ein Behälter für ein Symbol – und genau das sollte
   Ori nicht sein.

   Was der Kreis geleistet hat, muss trotzdem weiter erledigt werden:
   Die Figur liegt über wechselndem Inhalt und braucht Kontrast nach
   unten. Statt eines Hintergrunds macht das jetzt ein weicher
   Schlagschatten direkt an der Zeichnung – er folgt ihrer Form
   statt einen Kreis darum zu legen.

   Und die Trefferfläche bleibt: Der Knopf ist weiterhin 58 Pixel
   groß, nur eben unsichtbar. Ein 44-Pixel-Ziel ist das Mindeste,
   was man mit dem Daumen sicher trifft. */
#oriEcke .ori-figur{
  width:58px;height:58px;border-radius:50%;
  background:transparent;border:0;box-shadow:none;
}
#oriEcke .ori-figur .ori-gross{
  width:52px;height:52px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))
         drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
/* Am Rechner ein Stück größer.

   Auf dem Handy sitzt Ori dicht am Daumen und die Fläche ist knapp -
   58 Pixel sind dort genau richtig. Auf einem 27-Zoll-Bildschirm ist
   dieselbe Figur verloren: Der Inhalt ist breiter, der Abstand zum
   Auge größer, und ein 58-Pixel-Wesen wirkt wie ein Symbol statt wie
   ein Gegenüber. Deshalb ab Tablet-Breite moderat größer - 72 statt
   58 Pixel, also ein Viertel mehr, nicht das Doppelte.

   Die senkrechte Lage rechnet oriEckeSetzen() aus fig.offsetHeight
   aus, die zieht also von selbst mit. Was nicht von selbst mitzieht,
   ist der Platz, den die Kopfzeile für ihn frei hält - der steht
   gleich darunter und wird hier mit vergrößert. */
@media (min-width:760px){
  #oriEcke .ori-figur{width:72px;height:72px}
  #oriEcke .ori-figur .ori-gross{width:64px;height:64px}
}
@media (min-width:1100px){
  #oriEcke .ori-figur{width:80px;height:80px}
  #oriEcke .ori-figur .ori-gross{width:72px;height:72px}
}
/* Auf dunklem Grund trägt ein schwarzer Schatten nichts bei – dort
   hebt ein heller Hauch die Figur vom Hintergrund ab. */
:root[data-theme=dark] #oriEcke .ori-figur .ori-gross{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))
         drop-shadow(0 0 10px rgba(227,168,60,.30));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) #oriEcke .ori-figur .ori-gross{
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))
           drop-shadow(0 0 10px rgba(227,168,60,.30));
  }
}
/* Seit 4.3 haengt die Blase UNTER der Figur und zeigt mit dem Zipfel
   nach oben rechts auf sie - Ori sitzt jetzt oben rechts. */
#oriEcke .ori-blase{
  border-radius:12px 4px 12px 12px;border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-top:3px solid var(--accent);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.10);
  background:var(--card);
}
#oriEcke .ori-blase::before{
  left:auto;right:17px;bottom:auto;top:-10px;
  border:7px solid transparent;border-bottom-color:var(--accent);border-top:0;
}

#werkzeugKnopf{
  width:46px;height:46px;border-radius:50%;flex:none;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-size:1rem;line-height:1;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  transition:.18s;
}
#werkzeugKnopf:hover{border-color:var(--accent);color:var(--accent)}
#werkzeugKnopf.offen{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#werkzeugFach{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-bottom:2px}
/* display:flex schlaegt das hidden-Attribut - ohne diese Zeile stand das
   Fach von Anfang an offen. */
#werkzeugFach[hidden]{display:none}
#werkzeugFach .wz{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:8px 14px 8px 12px;font:inherit;font-size:0.8125rem;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12);white-space:nowrap;
  animation:wzAuf .18s ease-out;
}
#werkzeugFach .wz:hover{border-color:var(--accent);color:var(--accent)}
@keyframes wzAuf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Schnelleintrag "In ein Ziel eintragen" (bis 9.0 auch einer für
   Kennzahlen). Klappt an derselben Stelle auf wie die Schnellnotizen
   und ist genauso breit begrenzt, damit er auf einem 390er Schirm
   nicht über den Rand läuft. */
#zsBox{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#zsBox:empty{display:none}
.npanel.kzs .kzs-was{margin:4px 0 2px}
.npanel.kzs{width:min(19rem, calc(100vw - 40px));text-align:left}
.npanel.kzs .fld{display:block;margin:8px 0 0}
.npanel.kzs .fld input{width:100%}
.npanel.kzs .kzs-wahl{margin:8px 0 2px;flex-wrap:wrap}
.npanel.kzs .kzs-name{margin:6px 0 0;font-size:0.875rem}
.npanel.kzs .form-actions{margin-top:12px}
.npanel.kzs .fldnote{margin-top:8px}
.kzs-datum{margin-top:10px}
.kzs-dlbl{display:block;font-size:0.8125rem;color:var(--muted);margin-bottom:4px}
.kzs-tage{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.kzs-tage .tchip{flex:1 1 auto;min-width:0}
.npanel.kzs #kzsDatum{width:100%}
@media (prefers-reduced-motion: reduce){ #werkzeugFach .wz{animation:none} }
/* Die alten Einzelknöpfe verschwinden - sie leben jetzt im Fach. */
#nfab,#fbFab,#mfab{display:none}

/* ---------- 3.5: Zustände, Obergrenzen, Einstellungsfenster ---------- */

/* Ausdrücklich nicht geschafft – sichtbar anders als "offen". */
.habit.nichtgeschafft{opacity:.72}
.habit.nichtgeschafft .hname{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
.ngmark{width:22px;text-align:center;color:var(--muted);font-weight:700;flex:none}
.ngchip{font-size:0.6875rem;padding:2px 8px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);white-space:nowrap}

/* Der ⋯-Knopf. Unauffällig, bis man ihn braucht – er steht in jeder
   Zeile und darf sie nicht dominieren. */
.hmenu-btn{opacity:.45;transition:opacity .15s;font-size:1rem;line-height:1;
  padding:2px 6px;letter-spacing:1px}
.hmenu-btn:hover,.hmenu-btn:focus-visible{opacity:1}
@media (hover:none){ .hmenu-btn{opacity:.6} }

/* Das Fenster dazu. */
.dlg.hmenu{width:min(23rem,100%);text-align:left}
.hm-kopf{margin-bottom:12px}
.hm-kopf b{display:block;font-size:1.0625rem}
.hm-kopf .zusatz{display:block;margin-top:2px}
.hm-liste{display:flex;flex-direction:column;gap:6px}
/* Warum im Menue etwas fehlt (9.2, P10): Urlaub, Joker-Fenster. */
.hm-hinweis{font-size:.8125rem;color:var(--muted);line-height:1.5;margin:-4px 0 10px}
.hm-zeile{display:block;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--card);border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer;
  transition:.15s}
.hm-zeile:hover{border-color:var(--accent)}
.hm-zeile .hm-text{display:block;font-weight:600;font-size:0.9375rem}
.hm-zeile .hm-zusatz{display:block;font-size:0.8125rem;color:var(--muted);margin-top:1px}
.hm-zeile.warnzeile .hm-text{color:var(--accent)}

/* Obergrenzen. Grün, solange man im Rahmen ist – rot darüber. */
.habit.maxhabit{display:block;padding:10px 12px}
.mh-kopf{display:flex;align-items:center;gap:8px}
.mh-kopf .hname{flex:1;min-width:0}
.mh-chip{font-size:0.6875rem;padding:2px 8px;border-radius:999px;white-space:nowrap}
.mh-chip.ok{background:var(--green-soft,var(--accent-soft));color:var(--green,var(--accent))}
.mh-chip.ueber{background:var(--rot-soft,#fdecec);color:var(--rot,#c8452f)}
.mh-zeile{display:flex;align-items:center;gap:10px;margin-top:8px}
.mh-btn{width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--line);
  background:var(--card);font-size:1.25rem;line-height:1;cursor:pointer;color:var(--ink)}
.mh-btn:hover:not(:disabled){border-color:var(--accent)}
.mh-btn:disabled{opacity:.35;cursor:default}
.mh-btn.plus{border-color:var(--accent);color:var(--accent)}
.mh-stand{font-size:1.125rem;font-weight:700;min-width:2.5rem}
.mh-note{margin:6px 0 0;font-size:0.75rem;color:var(--rot,#c8452f)}
.mh-note.leise{color:var(--muted)}
.habit.maxhabit.drueber{border-left:3px solid var(--rot,#c8452f)}
.habit.maxhabit.imrahmen{border-left:3px solid var(--green,#2f9e5f)}

/* Aufgaben ohne Datum unter "Heute" – zugeklappt. */
/* Der Aufklappbereich saß bis 3.9 ohne Innenabstand in einer Karte,
   die selbst keinen hat (.todocard{padding:0}) – das Dreieck klebte
   dadurch am linken Rand. Jetzt hat er denselben Abstand wie alles
   andere in der Karte, und statt des System-Dreiecks steht ein Pfeil,
   der sich beim Aufklappen dreht. */
.td-ohne{margin-top:10px;border-top:1px dashed var(--line);padding:8px 16px 4px}
.td-ohne summary{
  cursor:pointer;font-size:0.8125rem;color:var(--muted);
  display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:9px;
  list-style:none;
}
.td-ohne summary::-webkit-details-marker{display:none}
.td-ohne summary::before{
  content:'\203a';font-size:1.0625rem;line-height:1;width:9px;text-align:center;
  transition:transform .15s;
}
.td-ohne[open] summary::before{transform:rotate(90deg)}
.td-ohne summary:hover{color:var(--ink);background:var(--hover)}
.td-ohne .todolist{margin-top:6px;padding:0}
.td-ohne .fldnote{margin-bottom:4px}

/* Welche Woche die Reflexion meint. */
.wochenspanne{font-size:0.8125rem;color:var(--muted);margin:0 0 12px}

/* Übererfüllung: was über dem Tagesziel liegt. */
.ueber-block{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.ueber-zahlen{display:flex;gap:14px;flex-wrap:wrap}
.ueber-zahlen>div{display:flex;flex-direction:column;min-width:0}
.ueber-zahlen b{font-size:1rem;color:var(--green,var(--accent))}
.ueber-zahlen span{font-size:0.6875rem;color:var(--muted)}

/* ---------- To-do-Zeile: Steuerung bricht als Block um ----------
   Die Zeile ist ein flex-Container ohne Umbruch. Text (dehnbar) plus
   Datumsfeld (140 px) plus Wiederholung (130 px) plus Löschknopf
   passen auf einem Handy nicht nebeneinander – gemessen: 491 px
   Inhalt in einer 316 px breiten Zeile, die Auswahlfelder standen
   teils komplett außerhalb des Bildschirms.

   Die drei sitzen jetzt in einem eigenen Kasten und rutschen
   geschlossen in die nächste Zeile, statt einzeln zu zerfasern. */
.todo{flex-wrap:wrap}
.tdctl{display:flex;align-items:center;gap:8px;flex:none}
@media (max-width:560px){
  /* flex:1 1 100% statt nur flex-basis: Mit dem geerbten flex:none
     (= nicht schrumpfen) wuchs der Kasten auf seine Inhaltsbreite
     und stand wieder 30 px ueber - der Umbruch allein reicht nicht,
     die Felder darin muessen auch enger werden duerfen. */
  .tdctl{flex:1 1 100%;min-width:0;margin-top:7px;padding-left:32px}
  .tdctl .tdate,.tdctl .trepsel{flex:1 1 0;min-width:0;max-width:none}
  .tdctl .mini{flex:none}
}

/* ---------- Wochenraster: Monat weg auf schmalen Schirmen ----------
   Eine Tagesspalte ist am Handy 30,9 px breit, "31.08." braucht 37.
   Die Kopfzeilen berührten sich, und die Sonntagsspalte ragte 6 px
   über die Karte hinaus – die Woche ließ sich seitlich schieben, ohne
   dass es dort etwas zu sehen gab. Der Monat steht zwei Zeilen darüber
   in der Wochenspanne, im Raster ist er entbehrlich. */
@media (max-width:560px){
  .wgrid .wmon{display:none}
  /* Und die feste Mindestbreite von 340 px muss mit weg: In der Karte
     stehen nach Abzug des Innenrands 336 px zur Verfügung, das Raster
     bestand aber auf 340 – vier Pixel, für die die ganze Woche seitlich
     verschiebbar wurde. Ohne die Vorgabe hält es sich immer noch an die
     Mindestbreiten der Spalten (96 + 7×30 + Abstände = 334) und rutscht
     erst auf wirklich winzigen Schirmen ins Schieben. */
  .wgrid{min-width:0}
}

/* ---------- Verwalten: Knopfleiste bricht um ----------
   Sechs Knöpfe neben dem Namen ließen ihm auf einem 390er Schirm rund
   90 Pixel: „Jeden Morgen 10 Seiten lesen“ stand dort auf vier Zeilen,
   das Datum darunter auf zwei. Dieselbe Lösung wie bei den Aufgaben –
   die Leiste rutscht als Ganzes unter den Namen, rechtsbündig, damit
   sie dort steht, wo man sie vom großen Schirm kennt. */
@media (max-width:560px){
  .mact{flex:1 1 100%;justify-content:flex-end;margin-top:8px}
}

/* ---------- Stöbern: Katalog mit ein paar hundert Habits ----------
   Die Liste muss auf einem 390er Schirm lesbar bleiben, deshalb
   untereinander statt im Raster. Jede Karte ist ein Knopf: ein Tipp
   übernimmt den Vorschlag. */
.katsuche{display:flex;gap:8px;align-items:center;margin:10px 0 4px}
.katsuche input{flex:1;min-width:0}
.katnav{margin-top:8px}
.katfilter{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.kf-lbl{font-size:0.75rem;color:var(--muted);margin-right:2px}

.katgruppen{display:flex;flex-direction:column;gap:8px}
.katgruppe{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;cursor:pointer;color:var(--ink)}
.katgruppe:hover{border-color:var(--accent)}
.kg-icon{flex:none;font-size:1.375rem;line-height:1}
.kg-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kg-text b{font-size:0.9062rem}
.kg-text small{color:var(--muted);font-size:0.75rem;line-height:1.4}
.kg-zahl{flex:none;text-align:right;font-weight:700;color:var(--accent);font-size:1rem;line-height:1.1}
.kg-zahl small{display:block;font-weight:400;color:var(--muted);font-size:0.625rem}

.katkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px}
.katkopf b{flex:1;min-width:0}
.katzahl{color:var(--muted);font-size:0.75rem;flex:none}

.katliste{display:flex;flex-direction:column;gap:8px}
.katkarte{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;cursor:pointer;color:var(--ink)}
.katkarte:hover{border-color:var(--accent)}
.kk-kopf{display:flex;align-items:baseline;gap:9px}
.kk-kopf b{flex:1;min-width:0;font-size:0.875rem;overflow-wrap:anywhere}
.kk-plus{flex:none;font-size:1.125rem;color:var(--accent);line-height:1}
.kk-meta{font-size:0.6875rem;color:var(--muted);line-height:1.45}
.kk-warum{font-size:0.7812rem;color:var(--muted);line-height:1.5;margin-top:2px}
/* Schon vorhandene Vorschläge bleiben sichtbar, aber unantastbar –
   sie ganz auszublenden würde beim zweiten Besuch verwirren
   („da war doch was?“). */
.katkarte.da{opacity:.55;cursor:default;border-style:dashed}
.katkarte.da .kk-plus{color:var(--green)}
.katkarte.da:hover{border-color:var(--line)}

/* Der Knopf über dem Anlege-Formular und auf der leeren Heute-Seite */
.stoeberzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.stoeberzeile span{flex:1;min-width:140px;font-size:0.8125rem;color:var(--muted);line-height:1.5}
.leerknoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}

/* ---------- Habit-Formular: Grundteil und aufklappbare Bereiche ----------
   Vorher standen acht Felder untereinander, von denen die Hälfte bei
   den meisten Gewohnheiten leer bleibt. Jetzt oben nur Name,
   Tageszeit und „wie oft“ – der Rest liegt in drei Bereichen, die
   sich aufklappen lassen. */
.fk-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.fk-kopf h2{flex:1;min-width:0;margin:0}
.hfeld{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--card)}
.hfeld>summary{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:11px 13px;cursor:pointer;list-style:none;border-radius:12px;
}
.hfeld>summary::-webkit-details-marker{display:none}
/* Eigenes Dreieck: Das eingebaute steht je nach Browser woanders und
   lässt sich nicht zuverlässig ausrichten. */
.hfeld>summary::after{
  content:"▸";margin-left:auto;color:var(--muted);font-size:0.8125rem;
  transition:transform .15s ease;flex:none
}
.hfeld[open]>summary::after{transform:rotate(90deg)}
.hfeld>summary span{font-weight:600;font-size:0.875rem}
.hfeld>summary small{color:var(--muted);font-size:0.75rem}
.hfeld>summary:hover{background:var(--hover)}
.hfeld[open]>summary{border-bottom:1px dashed var(--line);border-radius:12px 12px 0 0}
.hfeld-in{padding:4px 13px 13px}

/* Art der Zahl: drei Knöpfe statt Ankreuzfeld plus Auswahlliste */
.zartreihe{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 2px}
.zart{
  flex:1 1 8rem;min-width:0;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:9px 11px;color:var(--ink);display:flex;flex-direction:column;gap:2px;
}
.zart b{font-size:0.8125rem;font-weight:600}
.zart small{color:var(--muted);font-size:0.6875rem;line-height:1.35}
.zart:hover{border-color:var(--accent)}
.zart.on{border-color:var(--accent);background:var(--accent-soft)}
.zart.on small{color:var(--ink);opacity:.75}

/* Einheiten zum Antippen */
.einheitreihe{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.ech{
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  padding:5px 11px;font-size:0.8125rem;cursor:pointer;color:var(--ink);
}
.ech:hover{border-color:var(--accent)}
.ech.on{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
input.eeigen{width:100%}

/* ================= Microhabits (8.5) =================

   Sie sind „ein wenig besonders gekennzeichnet“: ein Trieb als
   Zeichen und ein grüner Kasten, sonst nichts. Bewusst kein eigenes
   Kartenformat und keine eigene Schrift – ein Microhabit steht
   zwischen den anderen Gewohnheiten und soll dort auch hingehören,
   nicht wie ein Fremdkörper aussehen.

   Der Ton ist der Grünton der App, stark verdünnt. Er trägt hier
   dieselbe Bedeutung wie überall sonst: etwas wächst. */
/* Auf dem Handy untereinander, erst ab 34rem nebeneinander. Bei
   26rem lag die Grenze mitten im Handybereich: Auf einem breiten
   Handy standen drei Spalten da, in denen der Erklaersatz auf vier
   Zeilen umbrach. Als
   Reihe mit Umbruch stünde „zügig“ als Einzelstück unter den
   beiden anderen und sähe aus wie ein Nachtrag. */
.mtempo{display:grid;grid-template-columns:1fr;gap:8px;margin:2px 0 8px}
@media (min-width:34rem){.mtempo{grid-template-columns:repeat(3,1fr)}}
.mtbtn{
  flex:1 1 7rem;min-width:0;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:8px 10px;color:var(--ink);display:flex;flex-direction:column;gap:2px;
}
.mtbtn b{font-size:0.8125rem;font-weight:600}
.mtbtn small{color:var(--muted);font-size:0.6875rem;line-height:1.3}
.mtbtn:hover{border-color:var(--accent)}
.mtbtn.on{border-color:var(--accent);background:var(--accent-soft)}
.mtbtn.on small{color:var(--ink);opacity:.75}
/* Die Hochrechnung unter den Feldern. Sie ist der Grund, warum sich
   das Tempo ohne Raten wählen lässt – deshalb steht sie abgesetzt
   und nicht als weiterer grauer Kleintext. */
.mikro-vor{
  margin:2px 0 8px;padding:8px 10px;border-radius:9px;
  background:var(--mikro-weich);border:1px solid var(--mikro-rand);
  font-size:0.8125rem;line-height:1.45;color:var(--ink);
}
.mikro-vor b{font-weight:600}

/* ---- Der Weg in der Tagesansicht ---- */
.mikro{
  margin-top:8px;padding:8px 10px;border-radius:10px;
  background:var(--mikro-weich);border:1px solid var(--mikro-rand);
}
.mikro-kopf{display:flex;align-items:center;gap:7px;font-size:0.8125rem}
.mikro-kopf b{font-weight:600}
.mikro-mark{font-size:0.9375rem;line-height:1;flex:none}
.mikro-neu{
  font-size:0.6875rem;padding:1px 7px;border-radius:999px;
  background:var(--green);color:#fff;font-weight:600;
}
/* Mit Beschriftung statt nur einem Pfeil: Ein blosses Zeichen findet
   nur, wer schon weiß, dass es etwas tut. */
.mikro-ab{margin-left:auto;flex:none;white-space:nowrap;font-size:0.6875rem;
  padding:3px 9px;line-height:1.3;min-height:0;height:auto}
/* Die Leiter. Ein Streifen ohne Prozentzahl: Gefragt ist nicht
   „wie viel Prozent“, sondern „wie weit bin ich“. */
.mikro-leiter{
  height:6px;border-radius:999px;margin:7px 0 4px;
  background:var(--line);overflow:hidden;
}
.mikro-fuell{display:block;height:100%;background:var(--green);border-radius:999px}
.mikro-weg{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:0.75rem;color:var(--muted);
}
.mikro-jetzt{color:var(--ink);font-weight:600;font-size:0.8125rem}
.mikro-note{margin:6px 0 0;font-size:0.75rem;color:var(--muted);line-height:1.45}
/* Angekommen: derselbe Kasten, nur kräftiger umrandet. Ein anderes
   Format hätte den Moment aus der Zeile gerissen, in der er
   passiert ist. */
.mikro.amziel{border-color:var(--green);border-width:1.5px}
/* Der Weg nach vorn steht oben und über die volle Breite, die beiden
   anderen darunter nebeneinander. Drei gleich große Knöpfe nebeneinander
   brechen auf dem Handy um und lassen einen allein in der zweiten Zeile
   stehen - dann sieht die Wahl aus, als wäre etwas verrutscht. */
.mikro-wahl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.mikro-wahl button{min-width:0}
.mikro-wahl button.primary{grid-column:1/-1}
.mikro.fertig{
  display:flex;align-items:center;gap:7px;
  font-size:0.75rem;color:var(--muted);padding:6px 10px;
}
.mikrodlg{max-width:26rem}

/* Das Fenster zum Anlegen. Es darf höher werden als andere Fenster,
   scrollt aber innen – „Anlegen“ bleibt immer erreichbar. Genau das
   war beim „Was ist neu“ schon einmal das Problem. */
.dlg.hdlg{max-width:30rem;display:flex;flex-direction:column;gap:0}
.dlg.hdlg .dlg-head{margin-bottom:6px}
.hdlg-felder{overflow-y:auto;min-height:0;overscroll-behavior:contain;padding-right:2px}
.dlg.hdlg .form-actions{flex:none;margin-top:12px}

/* ================= Kalender (3.9) =================
   Das Raster ist ein Grid mit sieben gleich breiten Spalten. Die
   Zellen haben eine feste Mindesthöhe, damit ein Monat mit vielen
   Terminen nicht plötzlich doppelt so hoch wird wie ein leerer –
   sonst springt beim Blättern die halbe Seite. */
.kalkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.kalnav{display:flex;align-items:center;gap:8px;min-width:0}
.kaltitel{font-size:1rem;min-width:8.5rem;text-align:center}
.kalnav .mini{flex:none}
.kalheute{margin-left:2px}
.kalmodus{display:flex;gap:6px;flex:none}
.kalkarte{padding:12px 10px}
.kgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.kwd{text-align:center;font-size:0.6875rem;color:var(--muted);font-weight:600;padding-bottom:2px}
.ktag{
  position:relative;min-height:46px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);cursor:pointer;padding:3px 2px 7px;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s;
}
.ktag:hover{border-color:var(--accent)}
.ktag.aus{opacity:.38}
.ktag.ktd{border-color:var(--accent);font-weight:700}
.ktag.kwahl{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.knum{font-size:0.8125rem;line-height:1.2}
.kpunkte{display:flex;gap:3px;min-height:6px;align-items:center}
.kp{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--muted)}
.kp-auf{background:var(--accent)}
.kp-fok{background:var(--mittag)}
.kp-ziel{background:var(--abend)}
.kp-fertig{background:var(--green)}
/* Der Balken unten in der Zelle: wie viel von den Gewohnheiten des
   Tages geschafft wurde. Er ist bewusst dünn – er soll den Monat
   lesbar machen, nicht selbst gelesen werden. */
.kq{position:absolute;left:6px;right:6px;bottom:3px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.kq i{display:block;height:100%;background:var(--green);border-radius:2px}
.kallegende{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 2px 0;color:var(--muted);font-size:0.6875rem}
.kallegende span{display:inline-flex;align-items:center;gap:5px}
.kallegende .kq{position:static;width:26px;display:inline-block}
.kaltag{padding:0;overflow:hidden}
.kaltag .dp-head h2{font-size:0.9375rem;margin:0}
.kaltag .todolist{padding:4px 6px}
.kzusatz{display:flex;flex-wrap:wrap;gap:4px 14px;padding:4px 16px 10px;color:var(--muted);font-size:0.8125rem}
.kzusatz .linkbtn{font-size:0.8125rem}
.kalneu{border-top:1px solid var(--line);padding:12px 16px 14px;background:var(--hover)}
.kalneu .add-row{margin-bottom:8px}
.kalneu .fldnote{margin:6px 0 0}
.kalneu-fuss{margin-bottom:0}
.kalneu-fuss .trepsel{flex:1 1 0;min-width:0;max-width:12rem}
.kalneu-fuss .primary{flex:none}
.kmeth{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
input.ttime{
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  padding:5px 8px;font-size:0.8125rem;flex:none;max-width:7.5rem;min-height:0;
}
/* Wochenansicht: sieben Tage untereinander. Sieben Spalten wären auf
   einem 390er Schirm rund 50 Pixel breit – darin ist kein
   Aufgabentext lesbar. */
.kwoche{padding:0;overflow:hidden}
.kwtag{border-bottom:1px solid var(--line);padding:2px 0 6px}
.kwtag:last-child{border-bottom:0}
.kwtag.ktd{background:var(--accent-soft)}
.kwtag.kwahl .kwkopf b{color:var(--accent)}
.kwkopf{display:flex;align-items:center;gap:9px;padding:9px 16px 3px}
.kwkopf b{font-size:0.875rem}
.kwkopf .mono{color:var(--muted);font-size:0.8125rem}
.kwkopf .count{color:var(--muted);font-size:0.75rem}
.kwkopf .kwplus{margin-left:auto}
.kwleer{padding:2px 16px 6px;color:var(--line);font-size:0.875rem}
.kwtag .todolist{padding:0 10px}
.kwtag .kzusatz{padding:2px 16px 4px;font-size:0.75rem}
.kwtag .kalneu{margin-top:6px}
/* Aufgaben mit Uhrzeit und geplante Sitzungen */
.tzeit{flex:none;font-size:0.75rem;color:var(--muted);border:1px solid var(--line);
       border-radius:6px;padding:1px 6px;white-space:nowrap}
.todo.tsitz .tzeit{border-color:var(--mittag);color:var(--mittag)}
.tsym{color:var(--mittag)}
/* Am Rechner darf der Text einer Sitzung nicht beliebig schmal
   werden: Ohne Untergrenze schrumpft er (flex:1) so weit, bis Länge,
   Startknopf und Steuerzeile daneben passen – „Konzept schreiben“
   stand deshalb auf zwei Zeilen, obwohl daneben Platz war. Mit der
   Grenze weicht stattdessen die Steuerzeile nach unten aus.
   Nur bei Sitzungen und nur am Rechner: Gewöhnliche Aufgaben stehen
   seit 3.5.1 gemessen richtig, und am Handy steht die Steuerzeile
   ohnehin in einer eigenen Zeile – dort würde die Untergrenze die
   Zeilen nur höher machen (gemessen: 163 statt 127 Pixel). */
@media (min-width:561px){
  .todo.tsitz .ttext{min-width:9rem}
}
.tsctl{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.tplan{font-size:0.6875rem;color:var(--muted);white-space:nowrap}
.tstart{flex:none}
.todo.done .tsym,.todo.done .tplan{color:var(--muted);opacity:.6}
@media (max-width:560px){
  .kalkopf{gap:8px}
  .kaltitel{font-size:0.9375rem;min-width:7rem}
  .kalkarte{padding:10px 6px}
  .ktag{min-height:42px;border-radius:8px}
  .kgrid{gap:3px}
  /* Länge und Startknopf rutschen unter den Text, statt ihn auf rund
     40 Pixel zusammenzudrücken – dieselbe Regel wie bei .tdctl. */
  .tsctl{flex:1 1 100%;margin:6px 0 0;padding-left:32px}
  /* Ohne Uhrzeitfeld bleibt die Steuerzeile einzeilig wie seit 3.5.1.
     Kommt es dazu, sind es vier Elemente – dann reicht der Platz
     rechnerisch nicht mehr und die Zeile bricht von selbst um: Datum
     und Uhrzeit oben, Wiederholung und Löschen darunter. Die
     Mindestbreite entscheidet das, nicht eine zweite Bildschirmgrenze
     im Stylesheet. Zu viert nebeneinander blieben dem Datum rund 90
     Pixel, „06.09.2026“ stand dann abgeschnitten da. */
  .tdctl{flex-wrap:wrap;row-gap:7px}
  .tdctl .tdate,.tdctl .ttime,.tdctl .trepsel{flex:1 1 0;min-width:6.5rem;max-width:none}
}

/* ================= Fokus, aufgeräumt (4.0) =================
   Die Längen-Knöpfe tragen ihre Zahl mit: „Pomodoro“ allein sagt
   niemandem, wie lange er gleich arbeitet. */
.mchip{display:inline-flex;flex-direction:column;align-items:center;gap:1px;line-height:1.25}
.mchip small{font-weight:500;font-size:0.6875rem;color:var(--muted)}
.mchip.on small{color:var(--accent)}
/* Der Startknopf ist die Antwort auf die einzige Frage, die hier
   wirklich gestellt wird. Er darf breit sein. */
.focus-wrap .primary.big{min-width:15rem}
/* Für heute eingeplante Sitzungen */
.fplan{padding:0;overflow:hidden}
.fplan .dp-head h2{font-size:0.9375rem;margin:0}
.fplanliste{padding:4px 6px}
.fplanzeile{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;flex-wrap:wrap}
.fplanzeile:hover{background:var(--hover)}
.fpname{flex:1;min-width:8rem;font-size:0.9062rem;overflow-wrap:anywhere}
.fplan .fldnote{padding:0 16px 12px;margin:0}
/* Der Einstellungsbereich: eine Karte, die zugeklappt eine Zeile ist */
.ffeld{margin-top:0}
.ffeld .fchips{justify-content:flex-start}
.ffeld .fld{margin-top:10px}
.ffeld .tchips{margin-top:6px}
.feinst-h{font-size:0.8125rem;margin:14px 0 2px;color:var(--ink)}
.feinst-h:first-child{margin-top:4px}
.ptnull{color:var(--muted)}

/* ================= Kalender in der Auswertung (4.0) =================
   Fünf Farbstufen, aufeinander aufbauend. Sie sind bewusst
   Abstufungen EINER Farbe und keine Ampel: Rot für einen schwachen
   Tag wäre ein Urteil, und darum geht es hier nicht. */
.akopf{margin-bottom:10px}
.akarte{padding:12px 10px}
.ametriken{display:flex;flex-wrap:wrap;gap:6px;margin:0 2px 12px}
.kgrid.akal{gap:4px}
.akfeld{min-height:44px;position:relative;gap:1px}
.akfeld:disabled{opacity:.3;cursor:default}
.akfeld .knum{font-size:0.75rem;color:var(--muted)}
.akzeichen{font-size:0.9375rem;line-height:1}
/* st0 = eingetragen, aber nichts erreicht; st4 = voll. stx = keine
   Angabe, stn = eingetragen ohne Rangfolge (Wetter). sb0…4 ist
   dieselbe Abstufung in Blau für die Stimmung. */
.stx{background:var(--card)}
.st0{background:var(--card);border-color:var(--line)}
.st1{background:color-mix(in srgb,var(--green) 16%,var(--card));border-color:transparent}
.st2{background:color-mix(in srgb,var(--green) 34%,var(--card));border-color:transparent}
.st3{background:color-mix(in srgb,var(--green) 58%,var(--card));border-color:transparent}
.st4{background:var(--green);border-color:transparent;color:#fff}
.stn{background:var(--accent-soft);border-color:transparent}
.sb0{background:var(--card);border-color:var(--line)}
.sb1{background:color-mix(in srgb,var(--mittag) 16%,var(--card));border-color:transparent}
.sb2{background:color-mix(in srgb,var(--mittag) 34%,var(--card));border-color:transparent}
.sb3{background:color-mix(in srgb,var(--mittag) 58%,var(--card));border-color:transparent}
.sb4{background:var(--mittag);border-color:transparent;color:#fff}
.akfeld.st3 .knum,.akfeld.st4 .knum,
.akfeld.sb3 .knum,.akfeld.sb4 .knum{color:#fff}
.akfeld.ktd{box-shadow:0 0 0 2px var(--accent)}
/* ---------- Urlaub im Kalender (8.0) ----------

   Die Urlaubstage bekommen einen gestrichelten Rahmen und einen
   kleinen Punkt, KEINE Füllung. Das hat einen Grund: Die Füllung
   gehört der Kennzahl – Quote, Stimmung, Häkchen. Wer sie für den
   Urlaub mitbenutzt, kann für einen Tag nicht mehr beides zeigen,
   und gerade im Urlaub ist „was habe ich trotzdem getan" die
   interessantere Hälfte.

   Deshalb liegt der Urlaub AUF dem Feld statt darin. In der Zukunft
   ist das Feld leer, dort bleibt nur der Rahmen übrig – und genau
   der ist es, den Rapha sehen wollte. */
.akfeld.kurl{border-color:var(--gruen-urlaub,#3f7d5c);border-style:dashed}
.akfeld.kurl::after{
  content:"";position:absolute;inset-block-start:3px;inset-inline-end:3px;
  width:5px;height:5px;border-radius:50%;background:var(--gruen-urlaub,#3f7d5c);
}
.akfeld.kurl:disabled{opacity:.72}
.ajw i.kurl{border-color:var(--gruen-urlaub,#3f7d5c);border-style:dashed}
/* Jahresfläche: 53 Wochen als Spalten, sieben Tage als Zeilen. */
.ajahr{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.ajinner{min-width:max-content}
.ajmonate{display:flex;gap:3px;margin-bottom:3px}
.ajm{flex:none;font-size:0.625rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-align:left}
.ajgrid{display:flex;gap:3px}
.ajw{display:grid;grid-template-rows:repeat(7,12px);gap:3px}
.ajw i{width:12px;height:12px;border-radius:3px;display:block;border:1px solid var(--line)}
.ajw i.ktd{box-shadow:0 0 0 1.5px var(--accent)}
.ajnote{margin-top:8px}
/* Die Balken darunter – dieselbe Zahl noch einmal, aber lesbar. */
.azus h3{margin:0 0 10px;font-size:0.9375rem}
.abal{margin-bottom:10px}
.abal-txt{display:flex;justify-content:space-between;gap:10px;font-size:0.8125rem;
          color:var(--muted);margin-bottom:4px}
.abal-spur{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.abal-spur i{display:block;height:100%;background:var(--green);border-radius:999px;
             transition:width .2s ease}
/* Eigene Namen für die Balkenfarben. Die Feld-Klassen .st0…4 färben
   den ganzen Kasten ein – auf einem Balken lag dadurch der Text auf
   dunklem Grund und war nicht mehr zu lesen. */
/* Dieselbe blaue Abstufung wie im Stimmungs-Kalender: geordnet, aber
   ohne Wertung. Rot für „sehr zäh“ hatte ich zuerst – das ist eine
   schlechte Note für ein Gefühl, und dafür ist hier kein Platz. */
.abal.ton0 .abal-spur i{background:color-mix(in srgb,var(--mittag) 22%,var(--line))}
.abal.ton1 .abal-spur i{background:color-mix(in srgb,var(--mittag) 40%,var(--card))}
.abal.ton2 .abal-spur i{background:color-mix(in srgb,var(--mittag) 58%,var(--card))}
.abal.ton3 .abal-spur i{background:color-mix(in srgb,var(--mittag) 78%,var(--card))}
.abal.ton4 .abal-spur i{background:var(--mittag)}
.azahl{margin:2px 0 0;font-size:0.875rem;color:var(--muted);line-height:1.6}
.azahl b{color:var(--ink);font-size:1rem}
@media (max-width:560px){
  .akarte{padding:10px 6px}
  .akfeld{min-height:40px}
  .akzeichen{font-size:0.875rem}
}

/* ================= Die Kette auf der Zielkarte (4.1) =================
   Vier Abschnitte, nummeriert: Ziel → Meilensteine → Ergebnisse →
   Habits. Die Nummer ist keine Verzierung – sie ist das Modell, nach
   dem die ganze App gebaut ist, und steht deshalb auch da. */
.zk-kopf{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:20px 0 10px;padding-top:13px;border-top:1px solid var(--line);
}
.goal-card>.zk-kopf:first-of-type{margin-top:14px}
.zk-nr{
  flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:0.6875rem;font-weight:700;display:grid;place-items:center;
}
.zk-kopf h3{margin:0;font-size:0.875rem;font-weight:700}
.zk-zusatz{margin-left:auto;font-size:0.75rem;color:var(--muted)}
.zkette .zk{margin-top:0}
/* --- Meilensteine --- */
.zmarken{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.zmark{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;flex-wrap:wrap}
.zmark:hover{background:var(--hover)}
.zmark.dran{background:var(--accent-soft)}
.zmark.kuenftig{opacity:.6}
.zm-zeichen{flex:none;width:15px;text-align:center;color:var(--line);font-size:0.9375rem}
.zmark.ok .zm-zeichen{color:var(--green)}
.zmark.dran .zm-zeichen{color:var(--accent)}
.zm-datum{flex:none;font-size:0.75rem;color:var(--muted)}
.zm-soll{flex:1;min-width:7rem;font-size:0.875rem;overflow-wrap:anywhere}
.zm-stand{font-size:0.75rem;color:var(--muted);white-space:nowrap}
.zmark.ok .zm-stand{color:var(--green)}
.zm-jetzt{
  font-size:0.6875rem;background:var(--accent);color:var(--accent-ink);
  border-radius:999px;padding:2px 8px;white-space:nowrap;font-weight:600;
}
.zmark .mini{flex:none;margin-left:auto}
.zm-neu{display:flex;gap:8px;flex-wrap:wrap}
.zm-neu .ghost{flex:1 1 9rem}
.zm-form{
  margin-top:10px;padding:12px;border:1px dashed var(--line);border-radius:12px;
  display:flex;flex-wrap:wrap;gap:10px;background:var(--hover);
}
.zm-form .fld{margin:0}
.zm-form .fld.schmal{flex:1 1 8rem}
.zm-form .form-actions{flex:1 1 100%;margin:0}
/* Ein Schritt mit Termin – dasselbe Feld wie bei den Aufgaben */
.zm-dfeld{max-width:9rem;flex:none}
.gstep.spaet .gtext{color:var(--amber)}
/* --- Ergebnisse --- */
.zerg-summe{margin:0 0 10px;font-size:0.9375rem;color:var(--muted)}
.zerg-summe b{font-size:1.125rem;color:var(--ink)}
.zherk{margin-bottom:12px}
.zherk-spur{height:8px;border-radius:999px;background:var(--accent);overflow:hidden}
.zherk-spur i{display:block;height:100%;background:var(--green);border-radius:999px}
.zherk-txt{display:flex;justify-content:space-between;gap:12px;margin-top:5px;
           font-size:0.75rem;color:var(--muted)}
.zkz{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);margin-bottom:12px;
}
.zkz.gut{border-color:var(--green)}
.zkz b{font-size:0.875rem}
.zkz-werte{font-size:0.8125rem}
.zkz-hin{font-size:0.75rem;color:var(--muted);flex:1 1 100%}
.zkz .mini{margin-left:auto}
.zkz-leer{margin:0 0 12px}
/* ---- Der Messwert auf der Zielkarte (9.1) ---- */
.zmw{margin:0 0 12px}
.zmw-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.zmw-kopf b{font-size:0.875rem}
.zmw-kopf small{font-size:0.75rem;color:var(--muted)}
.zmw-lage{font-size:0.8125rem;margin:0 0 10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line)}
.zmw-lage.gut{border-color:var(--green)}
.zmw-zahlen{font-size:0.8125rem;color:var(--muted);margin:6px 0 10px}
.zmw-vergleich{margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.zmw-vergleich.gut{border-left:3px solid var(--green)}
.zmw-vergleich.schlecht{border-left:3px solid var(--amber)}
.zmw-vergleich h4{margin:0 0 6px;font-size:0.875rem}
.zmw-weg{margin:4px 0 0}
.mw-vor{margin:6px 0 4px}
.mw-art{margin:22px 0 0}
/* --- Habits --- */
.zhabs{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.zhab{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;flex-wrap:wrap}
.zhab:hover{background:var(--hover)}
.zhab-name{flex:1;min-width:7rem;font-size:0.875rem;overflow-wrap:anywhere}
.zhab-quote{font-size:0.75rem;color:var(--muted)}
.zk-hab .ghost{width:100%}
.werteweg{margin-bottom:14px}
/* Das Zielzeichen an einer Gewohnheit (4.1) */
.hziel{
  flex:none;background:none;border:0;padding:0 2px;font-size:0.8125rem;line-height:1;
  cursor:pointer;opacity:.75;
}
.hziel:hover{opacity:1}

/* Der Name der Gewohnheit darf nicht beliebig schmal werden (4.1).

   Gemessen auf einem 390er Schirm: „Jeden Morgen zehn Seiten lesen“
   mit Zusatzinfo und dreistelliger Serie blieben dem Namen 89 Pixel –
   die Zeile war dadurch 145 Pixel hoch, also fünf Textzeilen neben
   drei Kästchen. Mit einer Untergrenze weicht stattdessen aus, was
   rechts steht: Serie und ⋯ rutschen in die zweite Zeile.

   Die Zahl (10rem) ist kein Gefühl, sondern gerechnet: 390 minus
   Kartenrand, Haken und Abstände lässt rund 300 Pixel, davon
   mindestens die Hälfte für den Namen. */
.habit{flex-wrap:wrap}
.hname{min-width:10rem}
/* Die Kette einmal erklärt – nur auf der leeren Ziele-Seite (4.1) */
.kette-erklaer h3{margin:0 0 12px;font-size:1rem}
.kette-liste{list-style:none;counter-reset:kette;margin:0 0 14px;padding:0;text-align:left}
.kette-liste li{
  counter-increment:kette;position:relative;padding:0 0 14px 34px;
  border-left:2px solid var(--line);margin-left:10px;
}
.kette-liste li:last-child{border-left-color:transparent;padding-bottom:4px}
.kette-liste li::before{
  content:counter(kette);position:absolute;left:-11px;top:0;
  width:21px;height:21px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-ink);font-size:0.6875rem;font-weight:700;
  display:grid;place-items:center;
}
.kette-liste b{display:block;font-size:0.9062rem;margin-bottom:2px}
.kette-liste span{display:block;font-size:0.8125rem;color:var(--muted);line-height:1.5}
/* Schritt-Zeilen dürfen umbrechen: Text zuerst, Termin und ✕ danach.
   Ohne das blieben dem Text neben einem Datumsfeld zwei Wörter. */
.gstep{flex-wrap:wrap}
.gstep .gtext{flex:1 1 9rem;min-width:9rem}
.zmark .zm-stand{margin-left:auto}
.zmark .mini{margin-left:0}

/* ================= Oris Führung: Scheinwerfer (4.2) =================
   Vorher pulsierte ein 2 Pixel breiter Rahmen am Reiter – neben einer
   bunten Seite war das kaum zu sehen. Jetzt wird alles abgedunkelt
   außer der Stelle, um die es geht. */
#oriTour{position:fixed;inset:0;z-index:1400}
/* Das „Loch“ ist ein Kasten mit einem riesigen Schatten ringsum –
   dadurch braucht es keine vier Abdeck-Flächen, die man einzeln
   ausrechnen müsste. */
#oriTourLoch{
  position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,14,20,.66), 0 0 0 4px var(--accent);
  transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;
  animation:oriPuls 1.8s ease-in-out infinite;
}
@keyframes oriPuls{
  0%,100%{box-shadow:0 0 0 9999px rgba(10,14,20,.66), 0 0 0 4px var(--accent)}
  50%    {box-shadow:0 0 0 9999px rgba(10,14,20,.66), 0 0 0 9px var(--accent-soft)}
}
/* Ohne Ziel (ein Schritt ohne Element) trotzdem abdunkeln. */
#oriTour.ohneloch{background:rgba(10,14,20,.66)}
/* Mittig heisst: links 50 % UND rechts wieder frei. Ohne right:auto
   bleibt das right:12px der Grundregel stehen - dann rechnet der
   Browser aus 50 % Abstand links und 12 px rechts eine halb so breite
   Karte, und der Text steht in einer Saeule. */
#oriTour.ohneloch #oriTourKarte{
  left:50%;right:auto;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 24px);
}
#oriTourPfeil{
  position:fixed;width:18px;height:18px;background:var(--card);
  transform:rotate(45deg);border-radius:3px;pointer-events:none;
  box-shadow:-2px -2px 0 0 var(--accent);
}
#oriTourPfeil.nachoben{box-shadow:2px 2px 0 0 var(--accent)}
#oriTourKarte{
  position:fixed;left:12px;right:12px;max-width:26rem;margin:0 auto;
  background:var(--card);color:var(--ink);border:2px solid var(--accent);
  border-radius:16px;padding:14px 16px;box-shadow:0 18px 44px -12px rgba(0,0,0,.55);
}
.otk-kopf{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.otk-kopf b{font-size:1rem;flex:1}
.otk-zahl{font-size:0.75rem;color:var(--muted);flex:none}
.otk-text{margin:0 0 12px;font-size:0.9062rem;line-height:1.55}
.otk-fuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.otk-fuss .primary{flex:1 1 8rem}
.otk-fuss .ghost{flex:none}

/* ---- Die Vertiefung: "Genauer ansehen" (6.1) ----
   Offen wird die Karte zum Lesekasten: mittig (das macht das JS, indem
   es den Scheinwerfer weglaesst), hoechstens so hoch wie der Schirm,
   und der Inhalt rollt in ihr statt aus ihr heraus. */
#oriTourKarte.otk-offen{max-height:82vh;overflow-y:auto;overscroll-behavior:contain}
/* Die Knoepfe kleben beim Rollen unten fest. Ohne das steht "Weiter"
   nach dem Aufklappen unterhalb des Sichtbaren, und die Fuehrung sieht
   aus, als ginge es nicht weiter.
   Die -14px sind das untere Polster der Karte: So schliesst die Leiste
   buendig ab, statt einen Streifen durchscheinen zu lassen. */
#oriTourKarte.otk-offen .otk-fuss{
  position:sticky;bottom:-14px;z-index:1;
  margin:0 0 -14px;padding:10px 0 14px;
  background:var(--card);border-top:1px solid var(--line);
}
.otk-mehr{
  margin:0 0 12px;border-top:1px solid var(--line);padding-top:10px;
  display:flex;flex-direction:column;gap:10px;
}
.otk-punkt{font-size:0.8438rem;line-height:1.5}
.otk-punkt b{display:block;color:var(--accent-ink)}
.otk-punkt span{display:block;color:var(--muted);margin-top:1px}
:root[data-theme=dark] .otk-punkt b{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .otk-punkt b{color:var(--accent)}
}
@media (prefers-reduced-motion: reduce){
  #oriTourLoch{animation:none;transition:none}
}

/* ================= Der Erststart in Schritten (4.2) =================
   Der lange Weg hat acht Stationen. Ohne Anzeige weiß niemand, ob
   gleich Schluss ist oder noch fünf Fenster kommen – und genau das
   entscheidet, ob jemand dranbleibt. */
.obfort{height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin:0 0 7px}
.obfort span{display:block;height:100%;background:var(--accent);border-radius:999px;
  transition:width .3s ease}
.obstufe{display:flex;align-items:baseline;gap:8px;margin:0 0 10px !important;
  font-size:0.75rem !important;color:var(--muted)}
.obstufe span{flex:1}
.obstufe .linkbtn{font-size:0.75rem}
/* Das Kettenband: nicht „wie weit noch“, sondern „wovon reden wir“. */
.obkette{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 12px;
  font-size:0.6875rem;color:var(--muted)}
.obkette i{font-style:normal;opacity:.5}
.obkette .obk{padding:2px 7px;border-radius:999px;background:var(--bg);
  border:1px solid transparent;white-space:nowrap}
.obkette .obk.fertig{color:var(--accent);opacity:.85}
.obkette .obk.on{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-ink);font-weight:700}
.obzurueck{margin:8px 0 0 !important;text-align:center}
.obzurueck .linkbtn{font-size:0.8125rem;color:var(--muted)}
.obziel{margin:0 0 8px !important;font-size:0.875rem !important}
.obziel .mono{color:var(--muted);font-size:0.8125rem}
/* Angelegte Etappen und Schritte im Erststart. */
.obliste{list-style:none;margin:4px 0 12px;padding:0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.obliste li{display:flex;align-items:center;gap:8px;padding:7px 10px;
  font-size:0.875rem;border-top:1px dashed var(--line)}
.obliste li:first-child{border-top:0}
.obliste li .mono{color:var(--muted);font-size:0.8125rem;flex:none}
.obliste li b{flex:none}
.obliste li .zusatz{flex:1;font-size:0.8125rem}
.obweg{margin-left:auto;flex:none;font-size:1rem;line-height:1;color:var(--muted);padding:2px 4px}
.obweg:hover{color:var(--red,#c0392b)}
.obeigen{margin:0 0 4px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.obeigen>summary{cursor:pointer;font-size:0.875rem;font-weight:600;list-style:revert}
.obeigen .form-actions{margin-top:6px}
/* „Diese Gewohnheiten zahlen auf mein Ziel ein“ – die Zeile, die die
   Kette schließt. */
/* ---- Worauf zahlt was ein? (7.6) ----
   Eine Zeile je angekreuzter Gewohnheit, Name links, Auswahl rechts.
   Auf dem Telefon rutscht die Auswahl darunter, statt den Namen auf
   zwei Buchstaben zu quetschen. */
.obzuord{
  margin:14px 0 0;padding:12px;border-radius:12px;
  background:var(--hover);border:1px solid var(--line);
}
.obzuord h3{margin:0 0 2px;font-size:0.875rem;font-weight:700}
.obzuord .fldnote{margin:0 0 8px}
.obzuo{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:5px 0;border-top:1px solid var(--line);
}
.obzuo:first-of-type{border-top:0}
.obzuo-n{flex:1 1 9rem;min-width:0;font-size:0.8125rem;overflow-wrap:anywhere}
.obzuo-w{
  flex:1 1 9rem;min-width:8rem;max-width:100%;
  padding:7px 8px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);font:inherit;font-size:0.8125rem;
}

.obhaken{display:flex;align-items:flex-start;gap:9px;margin:6px 0 4px;
  padding:9px 11px;border:1px solid var(--accent);border-radius:12px;
  background:var(--accent-soft);font-size:0.8125rem;line-height:1.45;cursor:pointer}
.obhaken input{margin-top:1px;flex:none;width:17px;height:17px;accent-color:var(--accent)}
.dlg.ob .quickdue{margin:-4px 0 10px}
.dlg.ob .obopt.reco small{line-height:1.5}
/* Drei Knöpfe nebeneinander wurden auf 390 Pixel jeder zweizeilig.
   Der Hauptknopf bekommt jetzt seine eigene Zeile, die beiden
   Nebenwege teilen sich die darunter. */
.form-actions.obdrei{flex-wrap:wrap}
.form-actions.obdrei .primary{flex:1 1 100%}
.form-actions.obdrei .ghost{flex:1 1 8rem}

/* ---------- Erststart: Gewohnheiten aus dem Katalog (4.3) ----------
   Bereich oben zum Wechseln, darunter die Vorschläge zum Ankreuzen.
   Die Liste scrollt in sich selbst – so bleiben die Bereiche und die
   Knöpfe stehen, statt bei zwanzig Einträgen aus dem Bild zu wandern. */
.obkat-nav{
  display:flex;flex-wrap:wrap;gap:5px;padding:2px 0 9px;margin:0 0 2px;
}
.obkg{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:0.75rem;line-height:1.3;cursor:pointer;transition:.15s;
}
.obkg:hover{border-color:var(--accent)}
.obkg.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.obkg-zahl{
  font-style:normal;font-size:0.6875rem;font-weight:700;line-height:1;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:inline-grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);
}
.obkg.on .obkg-zahl{background:var(--accent-ink);color:var(--accent)}
.obkat-liste{
  display:flex;flex-direction:column;gap:6px;
  max-height:min(38vh,22rem);overflow-y:auto;
  padding:2px;margin:0 -2px 6px;
}
.obkz{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:9px 11px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);transition:border-color .15s, background .15s;
}
.obkz:hover{border-color:var(--accent)}
.obkz.on{border-color:var(--accent);background:var(--accent-soft)}
.obkz input{flex:none;width:19px;height:19px;margin-top:1px;accent-color:var(--accent)}
.obkz-text{min-width:0}
.obkz-text b{display:block;font-size:0.875rem;line-height:1.35;font-weight:600}
.obkz-text small{display:block;color:var(--muted);font-size:0.7188rem;line-height:1.45;margin-top:2px}
.obkat-mehr{margin:0 0 8px !important;text-align:center}
.obkat-mehr .linkbtn{font-size:0.8125rem}
/* display:flex schlaegt das hidden-Attribut - ohne diese Zeile stand
   die Ziel-Zeile auch dann da, wenn noch nichts angekreuzt war. */
.obhaken[hidden]{display:none}

/* ---- Sprachwahl im Begruessungsfenster (5.0) ----
   Sie steht vor dem ersten Satz, den man lesen muss. Zwei Knoepfe,
   nebeneinander, mit Flagge - wer die Sprache nicht spricht, erkennt
   sie trotzdem. */
.obsprache{display:flex;gap:8px;margin:0 0 14px}
.obspr{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--muted);font:inherit;font-size:.92rem;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.obspr:hover{border-color:var(--accent)}
.obspr.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft);font-weight:600}
.obspr-f{font-size:1.15rem;line-height:1}

/* ---- Kette perfekter Tage (5.1) ----
   Die Serie, die zaehlt: nicht ein Habit durchgehalten, sondern der
   ganze Tag. Deshalb steht sie ueber den einzelnen Habit-Serien und
   bekommt die groessere Zahl. */
.pkzeile{font-size:0.8125rem;color:var(--muted);margin-top:6px}
.pkzeile:empty{display:none}
.perfektkarte .pk-zahl{display:flex;align-items:baseline;gap:8px;margin:2px 0 8px}
.perfektkarte .pk-zahl b{font-size:2rem;line-height:1;color:var(--accent)}
.perfektkarte .pk-zahl span{color:var(--muted);font-size:0.875rem}
.perfektkarte .pk-next{margin:8px 0 0;font-size:0.8125rem;color:var(--muted)}

/* ---- Check-in als eigenes Fenster (5.1) ----
   Die Nachfrage nach gestern sieht aus wie die Check-in-Zeile, ist
   aber abgesetzt: Sie ist eine Erinnerung, keine Dauereinrichtung. */
.checkinzeile.gestern{border-style:dashed}
.checkinzeile.gestern .ciz-lbl{color:var(--accent)}
.cidlg .ci-row{margin:6px 0}
.cidlg .ci-note{margin-top:10px}
.cidlg .ab-datum{margin:0 0 10px}

/* ================= Der Erststart, überarbeitet (5.8) =================

   Was hier dazukommt, hat einen gemeinsamen Grund: Der Erststart ist
   die Stelle, an der entschieden wird, ob es einen zweiten Besuch
   gibt. Alles andere in dieser App darf man beim zweiten Mal
   verstehen; diese zehn Minuten muss man beim ersten Mal verstehen. */

/* ---------- Die eigene Bühne ----------
   Während der Erststart läuft, ist die App dahinter unsichtbar. Sie
   bleibt gezeichnet (visibility, nicht display) – dann steht sie
   fertig da, sobald das Fenster zugeht, und niemand sieht einen
   Aufbau.

   WAS DAHINTER ZU SEHEN IST (in 5.8 zweimal geändert):
   Erst stand dort nichts – eine randlose weiße Fläche. Das war
   konsequent gedacht und falsch gefühlt: Ein Fenster braucht etwas,
   worauf es liegt, sonst sieht es nicht ruhig aus, sondern kaputt.
   Jetzt liegt die Karte auf einer eigenen Fläche: ein warmer
   Farbverlauf aus der Hausfarbe, oben ein weicher Lichtschein. Kein
   Bild, keine geladene Datei – zwei Verläufe, die nichts kosten. */
/* DRITTER ANLAUF, UND DIESMAL DER RICHTIGE (5.8):

   1. Anfangs lag der Erststart über der fertigen App. Falsch: Man sah
      als Allererstes eine Oberfläche voller Beispiel-Gewohnheiten, die
      man nicht angelegt hatte, und davor eine Frage nach seinen Zielen.
   2. Dann war dahinter gar nichts. Auch falsch, und zwar aus einem
      Grund, den man erst sieht, wenn man es sieht: Wenn der Erststart
      zugeht, erscheint die App aus dem Nichts. Es gibt keinen Ort, an
      dem man ankommt - es schaltet einfach um.
   3. Jetzt steht die App dahinter, aber unscharf. Sie ist Textur, nicht
      Inhalt: Man erkennt, dass dort etwas wartet, kann aber nichts
      davon lesen. Und wenn der Erststart zugeht, fährt die Unschärfe
      heraus - man kommt an einem Ort an, den man schon gesehen hat.

   Unscharf, nicht unsichtbar - und blass genug, dass niemand versucht,
   die fünf Beispiel-Gewohnheiten dahinter zu entziffern. */
body.ob-buehne .app{
  filter:blur(9px) saturate(.55);
  opacity:.42;
  transform:scale(1.015);
  pointer-events:none;
  user-select:none;
}
/* Ori und die Notizen bleiben ganz weg: Sie sind kleine, scharfe
   Zeichen am Rand, die auch verschwommen noch wie Bedienelemente
   aussehen - und Ori spricht im Erststart ohnehin aus dem Fenster. */
body.ob-buehne #oriEcke,
body.ob-buehne #noteBox,
body.ob-buehne #fabStack,
body.ob-buehne #topbar{visibility:hidden}

/* Der Auftritt: Der Erststart geht zu, und die App fährt scharf.
   450 ms - lang genug, um als Bewegung gelesen zu werden, kurz genug,
   dass niemand wartet. Die Klasse setzt finishOnboardingWirklich und
   nimmt sie danach wieder weg (06-konto.js). */
body.ob-auftritt .app{
  animation:appAuftritt .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes appAuftritt{
  from{filter:blur(9px) saturate(.55);opacity:.42;transform:scale(1.015)}
  to  {filter:blur(0)   saturate(1);  opacity:1;  transform:none}
}
@media (prefers-reduced-motion:reduce){
  body.ob-buehne .app{filter:none;opacity:.3}
  body.ob-auftritt .app{animation:none}
}
body.ob-buehne #onboard{
  background:
    radial-gradient(1200px 620px at 50% -12%,
      color-mix(in srgb,var(--accent-soft) 88%,transparent) 0%,transparent 62%),
    color-mix(in srgb,var(--bg) 72%,transparent);
  padding:18px;
  align-items:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* color-mix kennen ältere Browser nicht - dann steht dort einfach die
   volle Farbe, und der Erststart liegt auf einer ruhigen Fläche statt
   auf der unscharfen App. Kein Schaden, nur weniger schön. */
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  body.ob-buehne #onboard{background:var(--bg)}
}
body.ob-buehne .dlg.ob{
  margin:auto 0;
  box-shadow:0 10px 40px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
}
@media (prefers-color-scheme:dark){
  body.ob-buehne .dlg.ob{box-shadow:0 12px 44px rgba(0,0,0,.5)}
}
/* Auf dem Handy bleibt es eine Karte – nur mit schmalerem Rand. Randlos
   sah aus wie eine Seite, die ihren Rahmen verloren hat. */
@media (max-width:559px){
  body.ob-buehne #onboard{padding:10px 9px calc(10px + env(safe-area-inset-bottom))}
  body.ob-buehne .dlg.ob{max-width:none;border-radius:18px}
}

/* ---------- Der Wechsel von Schritt zu Schritt ----------
   Kurz und flach. Eine Bewegung, die man bemerkt, ist zu lang: Sie
   soll nur sagen, dass etwas Neues gekommen ist – nicht, dass die
   App eine Animation kann. */
@keyframes obRein{from{opacity:0;transform:translateX(var(--ob-von,14px))}
                  to{opacity:1;transform:none}}
.obschritt.kommt-rechts{animation:obRein .22s ease-out both;--ob-von:14px}
.obschritt.kommt-links{animation:obRein .22s ease-out both;--ob-von:-14px}
@media (prefers-reduced-motion:reduce){
  .obschritt.kommt-rechts,.obschritt.kommt-links{animation:none}
  .obfort span{transition:none}
}
/* Nur für Vorleseprogramme. */
.nurlesen{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Die Ueberschrift bekommt KEINEN Fokus mehr (siehe obErstesFeld):
   Ein Rahmen um einen Titel sieht aus wie ein Eingabefeld, und der
   Tastaturfokus gehoert auf etwas, das man bedienen kann. Angesagt
   wird der Schritt ueber die Lesestelle #obRuf. */

/* ---------- Was aus der Zeile gelesen wurde ----------
   Steht direkt unter dem Feld, während getippt wird. Das ist die
   Stelle, an der die App zeigt, dass sie zuhört – also darf sie nicht
   aussehen wie eine Fehlermeldung. */
.obzeile{display:block}
.obzfeld{
  display:grid;grid-template-columns:1.6rem 1fr;align-items:center;gap:9px;margin:0;
}
.obz-lese{
  margin:3px 0 0 calc(1.6rem + 9px) !important;
  font-size:0.75rem !important;color:var(--accent-ink,var(--accent));
  min-height:1.1em;line-height:1.3;
}
.obz-lese:empty{min-height:0}
/* Ein Platzhalter, der über den Rand läuft, sieht aus wie ein Fehler
   im Feld – dabei ist es nur ein Beispiel. */
.obz-titel::placeholder{text-overflow:ellipsis}

/* ---------- Das Maß je Ziel ---------- */
.obmz-frist{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px}
.obmz-frist .tchip{padding:4px 9px;font-size:0.75rem}
.obmz-frist input[type=date]{flex:1 1 9rem;min-width:8rem}
.obmz-rhy{min-width:7rem}
/* Fehlt die Zahl, wird EINMAL darauf gezeigt – siehe obnZielmass. */
.obmz.fehlt{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.obmz-fehlt{margin:6px 0 0 !important;font-size:0.75rem !important;
  color:var(--accent-ink,var(--accent));line-height:1.4}

/* ---------- Etappen für mehrere Ziele ---------- */
.obmkliste{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px}
.obmk{border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.obmk-titel{display:block;font-size:0.9375rem;line-height:1.35}
.obmk-bis{display:block;font-size:0.75rem;color:var(--muted);margin-top:1px}
.obmk .obliste{margin:8px 0}
.obmk-leer{margin:6px 0 8px !important;font-size:0.8125rem !important;color:var(--muted)}
.obmk .obeigen,.obmk .obschritt-add{margin:0;border-radius:10px;padding:6px 10px}
.obmk .obeigen>summary,.obmk .obschritt-add>summary{
  cursor:pointer;font-size:0.8125rem;font-weight:600;list-style:revert}
.obmk .obschritt-add .form-actions{margin-top:6px}

/* ---------- Kennzahl: ein Tipp genügt ----------
   Vorschläge, die zu den eingetippten Zielen passen, stehen vorn und
   tragen einen Punkt. Kein Text dazu: Wer „Seiten pro Woche“ ganz
   oben sieht, nachdem er „10 Bücher lesen“ getippt hat, versteht das
   ohne Erklärung. */
.obkz-tipp{margin:-4px 0 8px !important}
/* Der Punkt markiert die Passung - NICHT der Rahmen. Der gehoert der
   getroffenen Wahl. Beides zugleich, und man sieht nicht mehr, was
   man angetippt hat. */
.obkz-chips .vchip.passt{font-weight:600;color:var(--ink)}
.obkz-chips .vchip.passt::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:6px;vertical-align:1px}
.obkz-chips .vchip.on.passt::before{background:currentColor}
.obkz-zu{margin-top:6px}
.obkmehr{margin-top:8px}

/* ---------- Der Reiter mit den Treffern ---------- */
.obkg-ziel{border-color:var(--accent) !important}
.obkg-ziel:not(.on){background:var(--accent-soft)}
.obkat-warum{margin:2px 0 8px !important;font-size:0.8125rem !important;color:var(--muted)}

/* ---------- Bilanz im Bausteine-Schritt ---------- */
.obbilanz{border:1px solid var(--accent);background:var(--accent-soft);
  border-radius:12px;padding:9px 12px;margin:0 0 10px}
.obbilanz-kopf{margin:0 0 4px !important;font-size:0.75rem !important;
  color:var(--muted);text-transform:none}
.obbilanz ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.obbilanz li{font-size:0.875rem;font-weight:600}
.obbilanz li::before{content:"\2713";color:var(--accent);margin-right:5px;font-weight:700}
/* „noch nicht gesehen“ gehoert NEBEN den Namen, nicht darueber.
   .modinfo b ist ein Block, also braucht die Zeile eine eigene. */
.modrow .modinfo .modkopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px}
.modrow .modinfo .modkopf b{display:inline}
.modtag{font-size:0.6875rem;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:0 6px;line-height:1.5}

/* „mehreres möglich“ stand fett neben der Frage, weil .obq alles
   darin fett setzt. Es ist ein Hinweis, keine zweite Frage. */
.obq .zusatz{font-weight:400;font-size:0.8125rem;color:var(--muted)}

/* Die Kopfzeile des Erststarts bleibt stehen, während der Schritt
   scrollt. Gemessen an drei Zielen mit je vier Etappen: Der Schritt
   ist dort 1185 Pixel hoch, das Fenster 842 – ohne das hier scrollt
   der Fortschrittsbalken als Erstes aus dem Bild. */
/* Die Kopfzeile trägt die obere Polsterung des Fensters, damit sie
   beim Scrollen bis an den Rand deckt - sonst schiene oben ein
   Streifen Inhalt neben ihr durch.

   HIER LAG EIN FEHLER (5.8, behoben): Die Regel hiess
   `.dlg.ob{padding-top:0}` und galt damit für JEDES Fenster des
   Erststarts - auch für das Begrüßungsfenster, das gar keine
   Kopfzeile hat. Dort klebte die Sprachwahl dann ohne einen
   Fingerbreit Luft an der Oberkante. Jetzt nimmt die Kopfzeile die
   Polsterung mit einem negativen Rand zurück, statt sie dem Fenster
   wegzunehmen: Wo keine Kopfzeile ist, bleibt die Polsterung stehen. */
.dlg.ob .obkopf{
  position:sticky;top:-18px;z-index:2;
  margin:-18px -18px 0;padding:18px 18px 0;
  background:var(--card);
}
.dlg.ob .obkopf::after{
  content:"";display:block;height:9px;margin:0 -18px -9px;
  background:linear-gradient(var(--card),transparent);pointer-events:none;
}
@media (max-width:559px){
  body.ob-buehne .dlg.ob .obkopf{padding-top:calc(18px + env(safe-area-inset-top))}
}

/* ---------- Wie streng gerechnet wird (eigener Schritt ab 5.8) ----------
   Sieben Stufen als Reihe, darunter Name, Satz und – das ist der
   Punkt – die drei Zahlen, die sich wirklich ändern. Wer den
   Unterschied zwischen „Ausgewogen" und „Streng" sehen kann, muss
   ihn nicht erraten. */
.obstrenge{
  border:1px solid var(--line);border-radius:14px;padding:12px 13px 10px;margin:10px 0 4px;
}
.obstr-reihe{display:flex;gap:5px}
.obstr-knopf{
  flex:1 1 0;min-width:0;padding:10px 0;border:1px solid var(--line);
  background:var(--bg);border-radius:10px;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:0.875rem;color:var(--muted);transition:.12s;
}
.obstr-knopf:hover{border-color:var(--accent)}
.obstr-knopf.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#241a05);
  transform:translateY(-1px);
}
.obstr-enden{
  display:flex;justify-content:space-between;margin:5px 2px 10px !important;
  font-size:0.6875rem !important;color:var(--muted);
}
.obstr-name{margin:0 !important;font-size:1.0625rem !important;font-weight:700;color:var(--ink)}
.obstr-text{margin:2px 0 10px !important;font-size:0.8125rem !important;color:var(--muted)}
.obstr-zahlen{
  list-style:none;margin:0;padding:9px 0 0;display:flex;gap:10px;
  border-top:1px dashed var(--line);text-align:center;
}
.obstr-zahlen li{flex:1 1 0;min-width:0}
.obstr-zahlen b{display:block;font-size:1.0625rem;color:var(--accent-ink,var(--accent));
  font-variant-numeric:tabular-nums}
.obstr-zahlen small{display:block;font-size:0.6875rem;color:var(--muted);line-height:1.3;margin-top:1px}
@media (prefers-reduced-motion:reduce){.obstr-knopf.on{transform:none}}

/* ---------- Oris Beleg (ab 5.9) ----------
   Er steht unter dem Satz, kleiner und ruhiger, mit einer feinen
   Linie davor. Bewusst kein Link: Die Quelle ist zum Nachschlagen da,
   nicht zum Wegklicken — und ein Verweis ins Netz wäre das einzige,
   was diese App von außen nachlädt. */
.ori-quelle{
  margin:8px 0 0;padding-top:7px;
  border-top:1px dashed var(--line);
  font-size:0.6875rem;line-height:1.45;color:var(--muted);
  overflow-wrap:anywhere;
}
.ori-quelle::before{
  content:"\1F4C4";        /* Blatt Papier */
  margin-right:5px;opacity:.6;
}
.ori-quelle[hidden]{display:none}
/* In der Sprechblase steht der Satz als HTML mit <b> darin. Die
   Hervorhebung ist die Zahl aus der Studie — sie soll ins Auge
   springen, ohne dass der Satz schreit. */
#oriBlaseText b,.obori-text b{font-weight:700;color:var(--accent-ink,var(--accent))}

/* ---------- „Mehr dazu" unter Oris Satz (ab 5.9) ----------
   Zugeklappt, damit es niemanden aufhält, der weiterwill. Da, weil es
   den Unterschied macht für den, der bleibt. Es darf die volle Breite
   nehmen: Ori sitzt oben rechts und ist hier längst darüber. */
.obori{--obori-frei:66px}
@media (max-width:400px){.obori{--obori-frei:58px}}
.obori-mehr{
  margin:10px calc(-1 * var(--obori-frei) + 14px) -2px 0;
  border-top:1px dashed var(--accent);
  padding-top:8px;
}
.obori-mehr>summary{
  cursor:pointer;list-style:revert;
  font-size:0.8125rem;font-weight:600;color:var(--accent-ink,var(--accent));
}
.obori-mehr>summary::marker{color:var(--accent)}
.obori-mehr-in{padding-top:6px}
.obori-mehr-in p{margin:0 0 4px !important;font-size:0.8125rem !important;line-height:1.55}
.obori-mehr-in .ori-quelle{margin-top:8px !important;border-top-color:var(--accent)}
/* Ausserhalb der Sprechblase (Schritte "motiv" und "tour") steht es
   für sich und braucht deshalb einen eigenen Rahmen. */
.dlg.ob > .obschritt > .obori-mehr,
.obschritt > .obori-mehr{
  margin:12px 0;border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:12px;padding:9px 13px;background:var(--bg);
}

/* ---------- „Soll ich dir alles zeigen?" (ab 5.9) ----------
   Steht nur unter einem Satz, den jemand durch Antippen bestellt hat.
   Deshalb darf es auch aussehen wie eine Antwortmöglichkeit und nicht
   wie ein Hinweis: eine Zeile, ein Link, kein Kasten. */
.ori-angebot{margin-top:9px}
.ori-angebot[hidden]{display:none}
.ori-blase .ori-angebot{
  border-top:1px dashed var(--line);padding-top:8px;
}
.ori-angebot .linkbtn{
  font-size:0.8125rem;font-weight:600;
  color:var(--accent-ink,var(--accent));
  text-align:left;padding:0;
}
/* Die Blase schluckt keine Berührungen (siehe #oriEcke) - der Knopf
   darin muss sie deshalb ausdrücklich wieder annehmen. */
#oriEcke .ori-angebot{pointer-events:none}
#oriEcke .ori-angebot>*{pointer-events:auto}

/* ---------- Wartungsbalken (ab 6.0) ----------
   Er sieht bewusst NICHT nach Fehler aus. Eine Wartung ist etwas
   Angekündigtes, kein Schaden — und der Nutzer verliert dabei nichts.
   Deshalb der ruhige Akzentton der App und kein Rot. */
.banner.wartung{
  background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
}
.banner.wartung b{color:var(--accent-ink)}
:root[data-theme=dark] .banner.wartung b{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .banner.wartung b{color:var(--accent)}
}

/* ---------- Die Grenze lokal ↔ Server (ab 6.0) ----------
   Sie steht VOR dem Anmeldeformular und nicht darunter im
   Kleingedruckten: Mit dem Konto ändert sich, wo die Daten liegen,
   und das ist die eine Sache, die jemand vorher wissen muss. */
.grenzbox{
  background:var(--bg);border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;margin:14px 0;
}
.grenzzeile{display:flex;gap:11px;align-items:flex-start;font-size:0.875rem;line-height:1.5}
.grenzmark{font-size:1.1rem;flex:none;line-height:1.35}
.grenzpfeil{
  color:var(--accent);font-size:1.05rem;font-weight:800;
  margin:5px 0 5px 6px;line-height:1;
}
.grenzfuss{
  margin:11px 0 0;padding-top:9px;border-top:1px dashed var(--line);
  font-size:0.8125rem;color:var(--muted);line-height:1.5;
}

/* ================= Das sitzt (6.2) =================
   Eine Gewohnheit, die von selbst laeuft, wird aus dem Tracking
   entlassen. Die Farbwelt ist bewusst die GRUENE, nicht die Akzent-
   farbe: Es ist ein Abschluss, kein Hinweis und keine Aufgabe. */
.sitztkarte{border-left:3px solid var(--green)}
.sitzt-kopf{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.sitzt-kopf b{font-size:1rem}
.sitzt-kopf .ori-ikon{flex:0 0 auto}

.regalkarte{background:var(--card)}
.regalkarte h2{display:flex;align-items:center;gap:8px}
.regalliste{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.regalzeile{
  display:flex;align-items:center;gap:11px;padding:9px 2px;
  border-top:1px solid var(--line);
}
.regalzeile:first-child{border-top:none}
.regalzeile>div{flex:1;min-width:0}
.regalzeile b{display:block;font-size:.9375rem;overflow-wrap:anywhere}
.regalzeile small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}
.regalmark{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--gut-weich,rgba(46,139,97,.14));color:var(--green);
  display:grid;place-items:center;font-size:.8125rem;font-weight:700;
}

/* Die vier Fragen */
.sitztdlg{max-width:27rem}
.sitztfragen{display:flex;flex-direction:column;gap:12px;margin:14px 0 4px}
.sitztfrage{display:flex;flex-direction:column;gap:6px}
.sitztfrage>span{font-size:.9375rem;line-height:1.45}
.sitztwahl{display:flex;gap:6px}
.sitztknopf{
  flex:1;padding:8px 4px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:10px;font:inherit;font-size:.8125rem;cursor:pointer;
}
.sitztknopf:hover{border-color:var(--green)}
.sitztknopf.on{
  background:var(--green);border-color:var(--green);color:#fff;font-weight:600;
}

/* Der Haken im Anlegen-Formular */
.hcheck{
  display:flex;align-items:center;gap:9px;margin:2px 0 10px;cursor:pointer;
  font-size:.9375rem;
}
.hcheck input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--green)}

/* Ein Habit, das im Regal steht, in der Verwaltungsliste */
.sitztchip{
  font-size:.6875rem;padding:2px 7px;border-radius:99px;
  background:var(--gut-weich,rgba(46,139,97,.14));color:var(--green);
  white-space:nowrap;font-weight:600;
}

/* ================= Hürden (6.2) =================
   Das Formular nach "nicht geschafft". Bewusst NICHT in Rot: Es ist
   keine Fehlermeldung, sondern eine Frage nach der Lage. */
.huerdedlg{max-width:27rem}
.hufrage{display:flex;flex-direction:column;gap:7px;margin:14px 0}
.hufrage>span{font-size:.875rem;font-weight:600}
.huwahl{display:flex;flex-wrap:wrap;gap:6px}
.huknopf{
  padding:7px 12px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:99px;font:inherit;font-size:.8125rem;cursor:pointer;
}
.huknopf:hover{border-color:var(--accent)}
.huknopf.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* Die Auswertung */
.hu-liste{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.hu-zeile{
  display:grid;grid-template-columns:8.5rem 1fr auto;gap:10px;align-items:center;
  font-size:.8438rem;padding:6px 0;
}
.hu-zeile>span:first-child{overflow-wrap:anywhere}
.hu-schiene{background:var(--line);border-radius:999px;height:8px;overflow:hidden;display:block}
.hu-fuell{display:block;height:8px;border-radius:999px;background:var(--muted);min-width:2px}
.hu-fuell.spitze{background:var(--accent)}
.hu-zahl{color:var(--muted);font-size:.78rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:420px){ .hu-zeile{grid-template-columns:6.6rem 1fr auto} }
.konfliktkarte{border-left:3px solid var(--amber)}

/* ================= Urlaubsmodus (6.3) =================

   Die ganze Seite schaltet um. Umgesetzt ausschliesslich ueber die
   vorhandenen Farbvariablen - kein zweites Stylesheet, keine
   umgeschriebenen Klassen. Dadurch gilt der Modus sofort auf allen
   Reitern, und beim Ende des Urlaubs ist alles wie vorher.

   Die Verschiebung geht ins Gruene und Weichere: Der Akzent wird vom
   Gold zum Salbei, der Untergrund waermer. Kein Strandbild, kein
   Palmenmuster - eine Habit-App im Urlaub soll ruhiger aussehen, nicht
   lauter. */
:root[data-urlaub]{
  --bg:#eaf1ec;
  --line:#d6e2d8;
  --hover:rgba(29,48,37,.04);
  --accent:#3f7d5c;
  --accent-ink:#0f2318;
  --accent-soft:#dfeee4;
  --shadow:0 1px 2px rgba(29,48,37,.05),0 10px 26px -14px rgba(29,48,37,.16);
}
:root[data-theme=dark][data-urlaub]{
  --bg:#111a15;
  --card:#182219;
  --line:#2a3a30;
  --accent:#69b98d;
  --accent-ink:#0b1510;
  --accent-soft:#1d2c23;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light])[data-urlaub]{
    --bg:#111a15;
    --card:#182219;
    --line:#2a3a30;
    --accent:#69b98d;
    --accent-ink:#0b1510;
    --accent-soft:#1d2c23;
  }
}

/* Die Karte, die den Fortschrittsbalken ersetzt */
.urlaubkarte{border-left:3px solid var(--accent)}
.urlaub-kopf{display:flex;align-items:center;gap:12px}
.urlaub-kopf>div{flex:1;min-width:0}
.urlaub-kopf b{display:block;font-size:1.0625rem;line-height:1.2}
.urlaub-kopf small{display:block;color:var(--muted);font-size:.8125rem;margin-top:2px}
.urlaub-mark{font-size:1.5rem;flex:0 0 auto;line-height:1}
.urlaub-text{margin:10px 0 0;font-size:.875rem;line-height:1.55;color:var(--muted)}
.urlaub-bilanz{
  margin:10px 0 0;padding:8px 12px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:.875rem;font-weight:600;
}
:root[data-theme=dark] .urlaub-bilanz{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .urlaub-bilanz{color:var(--accent)}
}

/* ================= Tastenkürzel (8.7) =================
   Ein aufklappbarer Abschnitt im Fenster „Darstellung“. Zwei
   Spalten: was es tut, welche Taste. Die Taste ist zugleich der
   Knopf zum Ändern - so gibt es keinen zweiten „Ändern“-Knopf je
   Zeile, der die Liste doppelt so lang machte. */
.kzdetails{margin:14px 0 4px;border-top:1px solid var(--line);padding-top:10px}
.kzdetails summary{cursor:pointer;font-weight:600;font-size:.875rem;padding:4px 0}
.kzliste{display:flex;flex-direction:column;margin-top:6px}
.kzzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 0;border-top:1px dashed var(--line);font-size:.8125rem}
.kzzeile:first-child{border-top:0}
.kztext{min-width:0}
.kzknopf{flex:none;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.kzzeile.fest .kzknopf{cursor:default}
.kzknopf kbd{
  display:inline-block;min-width:1.9em;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;
  padding:3px 7px;border-radius:6px;border:1px solid var(--line);
  border-bottom-width:2px;background:var(--card);color:var(--ink);
}
.kzknopf:hover kbd,.kzknopf:focus-visible kbd{border-color:var(--accent)}
.kzzeile.nimmt{background:var(--accent-soft);border-radius:8px;padding-inline:8px;margin-inline:-8px}
.kzwarte{font-size:.75rem;font-weight:600;color:var(--accent-ink)}
.kzhinweis{margin:6px 0 2px;font-size:.75rem;color:var(--ink);
  background:var(--accent-soft);border-radius:8px;padding:6px 9px}

/* ================= Krank (8.7) =================

   Wie der Urlaub: nur andere Werte fuer dieselben Variablen, damit
   der Modus auf allen Reitern gilt und nach dem Gesundmelden alles
   wie vorher ist. Gedaempft statt gruen - der Urlaub wird waermer,
   das hier wird stiller. Weil sich der Schalter nicht von selbst
   zuruecksetzt, muss man auf jedem Reiter sehen, dass er an ist. */
:root[data-krank]{
  --bg:#ebeef3;
  --line:#d6dbe5;
  --hover:rgba(30,36,52,.04);
  --accent:#56688a;
  --accent-ink:#0e1320;
  --accent-soft:#e1e6ef;
  --shadow:0 1px 2px rgba(30,36,52,.05),0 10px 26px -14px rgba(30,36,52,.16);
}
:root[data-theme=dark][data-krank]{
  --bg:#10131a;
  --card:#171b24;
  --line:#29303d;
  --accent:#93a2c0;
  --accent-ink:#0c1018;
  --accent-soft:#1d2230;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light])[data-krank]{
    --bg:#10131a;
    --card:#171b24;
    --line:#29303d;
    --accent:#93a2c0;
    --accent-ink:#0c1018;
    --accent-soft:#1d2230;
  }
}
.krank-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.krank-knoepfe button{flex:0 1 auto}
.krankkarte-mehr{border-left:3px solid var(--krank-ton)}
/* Der Knopf im Werkzeugfach, wenn der Schalter an ist */
#werkzeugFach .wz.an{border-color:var(--krank-ton);color:var(--krank-ton)}
/* Im Kalender: dieselbe Sprache wie der Urlaub (gestrichelt, Punkt),
   eigener Ton. */
.akfeld.kkrank{border-color:var(--krank-ton);border-style:dashed}
.akfeld.kkrank::after{
  content:"";position:absolute;inset-block-start:3px;inset-inline-end:3px;
  width:5px;height:5px;border-radius:50%;background:var(--krank-ton);
}
.ajw i.kkrank{border-color:var(--krank-ton);border-style:dashed}

/* Eine Gewohnheit im Urlaub: da, abhakbar, aber ohne Forderung.
   Der Kreis bleibt - er ist ja die Einladung. Nur leiser. */
.habit.urlaubsfrei{opacity:.92}
.habit.urlaubsfrei .box{border-style:dashed}
.habit.urlaubsfrei input:checked+.box{border-style:solid}

/* ============================================================
   DIE FEIER (6.4)

   Alles Bewegte, das zeigt, dass etwas gelungen ist. Die
   Medienabfrage weiter oben (Zeile 489) schaltet hier ausnahmslos
   alles ab; 06-feier.js baut Teilchen dann gar nicht erst.
   ============================================================ */

/* ---- Der Regen ----
   Die Hülle liegt fest über dem Bild, damit kein Stück das Layout
   verschiebt, und lässt jeden Zeiger durch. */
.feierregen{
  position:fixed;z-index:70;height:0;pointer-events:none;
}
.feierregen i{
  position:absolute;top:0;left:0;
  width:8px;height:11px;border-radius:2px;margin:-5px 0 0 -4px;
  opacity:0;
  animation:feierFlug var(--dauer,1300ms) var(--spaet,0ms) cubic-bezier(.2,.7,.5,1) forwards;
}
/* Drei Haltepunkte statt zwei: Ohne den mittleren fliegt das Stück
   auf einer Geraden schräg nach unten - das sieht aus wie ein
   Fehler, nicht wie ein Wurf. Mit ihm gibt es einen Scheitel. */
@keyframes feierFlug{
  0%  {opacity:1;transform:translate(0,0) rotate(0deg) scale(.7)}
  32% {opacity:1;transform:translate(calc(var(--dx) * .45),var(--hoch)) rotate(calc(var(--dreh) * .35)) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dreh)) scale(.85)}
}

/* ---- Die fliegenden Punkte ---- */
.pflug{
  position:fixed;z-index:71;pointer-events:none;
  transform:translate(-50%,-50%);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9375rem;font-weight:700;color:var(--green);
  text-shadow:0 1px 3px var(--bg);
  animation:pflugRein .62s cubic-bezier(.4,0,.2,1) forwards;
}
.pflug.minus{color:var(--red)}
@keyframes pflugRein{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.6)}
  18% {opacity:1;transform:translate(-50%,calc(-50% - 10px)) scale(1.08)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.62)}
}
#pointsPill.pulst{animation:pillPuls .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes pillPuls{
  0%,100%{transform:scale(1)}
  45%{transform:scale(1.14)}
}

/* ---- Die rollende Serie ---- */
.streak.rollt{animation:streakPuls .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes streakPuls{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.16)}
}
.streak .serienzahl{font-variant-numeric:tabular-nums}

/* ---- Die Auswertung zeichnet sich ----
   Die Balken wachsen aus ihrer Grundlinie. transform-box:fill-box ist
   dabei entscheidend: ohne das bezieht sich transform-origin auf den
   Ursprung des ganzen SVG, und die Balken wachsen aus der Bildecke. */
.chart.zeichnen .cb,.chart.zeichnen .cb-null{
  transform-box:fill-box;transform-origin:bottom;
  animation:cbWachsen .52s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 16ms);
}
@keyframes cbWachsen{from{transform:scaleY(0)}}
/* pathLength="1" macht die Länge unabhängig von der wirklichen
   Kurve - sonst müsste sie erst gemessen werden. */
.chart.zeichnen .cline{
  stroke-dasharray:1;
  animation:clineZeichnen .9s cubic-bezier(.4,0,.2,1) backwards;
}
@keyframes clineZeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.chart.zeichnen .cdot{animation:cdotRein .3s ease backwards;animation-delay:.55s}
@keyframes cdotRein{from{opacity:0;transform:scale(0)}}
.chart.zeichnen .sp-flaeche{
  transform-box:fill-box;transform-origin:center;
  animation:spWachsen .6s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes spWachsen{from{opacity:0;transform:scale(.2)}}
/* Die Balken in HTML sind einfacher: Sie stehen schon auf ihrer
   Breite, also wird nur waagerecht aufgezogen. Damit bleibt die
   eingetragene Breite unangetastet. */
#view.balkenwachsen .msbar i,
#view.balkenwachsen .bbar span,
#view.balkenwachsen .ub-bar i,
#view.balkenwachsen .ub-bar span,
#view.balkenwachsen .hu-fuell{
  transform-origin:left center;
  animation:balkenAuf .62s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes balkenAuf{from{transform:scaleX(0)}}

/* ---- Der Reiterwechsel ----
   Nur Deckkraft und ein paar Pixel. Ein voller Schub würde auf dem
   Handy einen waagerechten Balken erzeugen. */
#view.reiterrein{animation:reiterRein .34s cubic-bezier(.22,1,.36,1)}
@keyframes reiterRein{
  from{opacity:0;transform:translateX(var(--reiter-von,14px))}
}

/* ---- Ins Regal ----
   Erst nach rechts hinaus, dann schließt sich die Lücke. Nur der
   erste Zug allein sah aus wie ein Fehler: ein leeres Feld mitten in
   der Liste. */
.habit.insregal{
  overflow:hidden;
  animation:insRegal .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes insRegal{
  0%  {opacity:1;transform:translateX(0);max-height:5rem}
  45% {opacity:0;transform:translateX(34px);max-height:5rem}
  100%{opacity:0;transform:translateX(34px);max-height:0;
       padding-top:0;padding-bottom:0;margin-bottom:0}
}

/* ---- Die Feierkarte: Etappen und Auszeichnungen ---- */
.feierkarte{
  position:fixed;inset:0;z-index:72;
  display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--ink) 22%,transparent);
  animation:fkGrund .28s ease;
}
@keyframes fkGrund{from{opacity:0}}
.feierkarte.weg{opacity:0;transition:opacity .4s ease}
.fk-karte{
  position:relative;text-align:center;max-width:22rem;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px 22px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
  animation:fkRein .46s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fkRein{from{opacity:0;transform:translateY(16px) scale(.94)}}
.fk-zeichen{display:block;font-size:2.5rem;line-height:1;margin-bottom:10px}
.fk-marke{
  display:block;font-size:.6875rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
}
.fk-titel{display:block;font-size:1.25rem;line-height:1.25;margin-bottom:8px}
.fk-text{margin:0;font-size:.9375rem;color:var(--muted);line-height:1.55}
.fk-dazu{
  display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--muted);
}
.fk-quelle{
  display:block;margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--line);font-size:.75rem;color:var(--muted);
}
.fk-quelle::before{content:"\1F4C4 ";opacity:.65}

/* ---- Die Liste der Auszeichnungen ---- */
.auszliste{display:grid;gap:9px;margin-top:12px}
.auszzeile{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 13px;
}
.auszzeichen{font-size:1.375rem;line-height:1.2}
.ausztext b{display:block;font-size:.9375rem;line-height:1.3}
.ausztext small{display:block;font-size:.8125rem;color:var(--muted);line-height:1.5;margin-top:2px}
.auszquelle{
  display:block;margin-top:6px;font-size:.6875rem;color:var(--muted);
}
.auszquelle::before{content:"\1F4C4 ";opacity:.65}
.auszwann{font-size:.75rem;color:var(--muted);white-space:nowrap;padding-top:2px}
.auszkopf{margin:18px 0 0;font-size:.75rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:420px){
  .auszzeile{grid-template-columns:auto minmax(0,1fr)}
  .auszwann{grid-column:2;padding-top:0}
}

/* ============================================================
   ORIS LAUNE (6.5)

   Das Gesicht selbst zeichnet oriZeichen(). Hier steht nur, was
   sich nicht zeichnen laesst: die Farbe des Koerpers, wenn ihm kalt
   ist, und die Bewegung - beziehungsweise ihr Ausbleiben.
   ============================================================ */
/* Kalt ist blau. Beide Toene sind so gewaehlt, dass sie in hell und
   dunkel funktionieren: Eis ist nie dunkel. */
.orisvg[data-laune=frierend]{color:#6fa3c4}
.orisvg[data-laune=eingefroren]{color:#89b2cc}

/* Zittern. Eine kurze, kleine Bewegung - ein grosser Ausschlag saehe
   nach Fehler aus, nicht nach Frieren. */
.ori-figur[data-laune=frierend] .ori-wiege{animation:oriZittern .24s ease-in-out infinite}
@keyframes oriZittern{
  0%,100%{transform:translateX(-.7px) rotate(-1.2deg)}
  50%{transform:translateX(.7px) rotate(1.2deg)}
}
/* Eingefroren steht alles still: Wiegen, Atmen, Strahlen, Blinzeln.
   Das ist der eigentliche Effekt - eine Figur, die sich in einer
   sonst bewegten Oberflaeche NICHT mehr ruehrt, faellt staerker auf
   als jede Animation. */
.ori-figur[data-laune=eingefroren] .ori-wiege,
.ori-figur[data-laune=eingefroren] .ori-gross,
.ori-figur[data-laune=eingefroren] .ori-strahlen,
.ori-figur[data-laune=eingefroren] .ori-augen{animation:none}
#oriEcke .ori-figur[data-laune=eingefroren] .ori-gross{
  filter:drop-shadow(0 2px 5px rgba(90,140,175,.45))
}
@media (prefers-reduced-motion:reduce){
  .ori-figur[data-laune=frierend] .ori-wiege{animation:none}
}

/* ============================================================
   DER WEG ZUM GIPFEL (6.5)

   Ersetzt den zehn Pixel hohen Fortschrittsbalken der Zielkarte.
   Gerechnet wird alles in 04-planen.js; hier stehen nur Farben,
   Strichstaerken und die eine Bewegung.
   ============================================================ */
.zw{margin:8px 0 2px}
.zw-bild{display:block;width:100%;height:auto;overflow:visible}

/* Der Hang. Sehr blass - er soll den Weg tragen, nicht auffallen. */
.zw-hang{fill:var(--accent);opacity:.13}

/* Die Strecke, die noch vor dir liegt: gestrichelt, wie auf der
   Startseite. Ein durchgezogener grauer Strich saehe aus wie ein
   zweiter Weg. */
.zw-bahn{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 9}
.zw-fahrt{
  fill:none;stroke:url(#zwfarbe);stroke-width:5;stroke-linecap:round;
  stroke:var(--accent);
  transition:stroke-dasharray .7s cubic-bezier(.22,1,.36,1);
}
.zw.drueber .zw-fahrt{stroke:var(--red)}
.zw.drueber .zw-hang{fill:var(--red)}
.zw.warnt .zw-fahrt{stroke:var(--amber)}
.zw.warnt .zw-hang{fill:var(--amber)}
.zw.warnt .zw-figur circle{stroke:var(--amber)}

/* Die Fahnen sind die Stufen. Erreicht = voll, offen = nur Umriss. */
.zw-fahne path{stroke:var(--line);stroke-width:1.6;fill:none;stroke-linecap:round}
.zw-fahne .zw-tuch{fill:var(--card);stroke:var(--line);stroke-width:1.4;stroke-linejoin:round}
.zw-fahne.auf path{stroke:var(--accent)}
.zw-fahne.auf .zw-tuch{fill:var(--accent);stroke:var(--accent)}

.zw-gipfel circle{fill:var(--card);stroke:var(--line);stroke-width:1.6}
.zw-gipfel.erreicht circle{stroke:var(--accent);fill:var(--accent-soft)}

/* Die Figur. Der Schatten ist der Trick, der sie auf den Weg stellt
   statt darueber schweben zu lassen. */
.zw-figur circle{fill:var(--card);stroke:var(--accent);stroke-width:2}
.zw-figur .zw-schatten{fill:var(--ink);opacity:.16}
.zw.drueber .zw-figur circle{stroke:var(--red)}

@media (prefers-reduced-motion:reduce){
  .zw-fahrt{transition:none}
}

/* Die Emoji-Auswahl am Ziel (.zzwahl) gab es bis 6.9.4. Seit 7.0
   traegt ein Ziel das Zeichen seiner Dimension, gewaehlt ueber ein
   gewoehnliches Auswahlfeld - also ohne eigene Gestaltung. */

/* Die leere Zielseite und die Aufklapper im Formular (6.5) */
.zleer{text-align:center;padding:18px 16px 22px}
.zleer .zw{margin:0 auto 6px;max-width:22rem}
.zleer h3{margin:6px 0 8px;font-size:1.0625rem}
.zleer-satz{color:var(--muted);font-size:0.9375rem;max-width:26rem;margin:0 auto 10px;line-height:1.55}
.zleer .fldnote{max-width:26rem;margin:0 auto 14px}

.mehrform{
  border:1px dashed var(--line);border-radius:12px;
  padding:0 12px;margin:10px 0;background:var(--bg);
}
.mehrform>summary{
  cursor:pointer;list-style:none;padding:11px 2px;
  font-size:0.9375rem;font-weight:600;display:flex;align-items:baseline;gap:8px;
}
.mehrform>summary::-webkit-details-marker{display:none}
.mehrform>summary::before{content:"\25B8";color:var(--accent);font-size:.75rem}
.mehrform[open]>summary::before{content:"\25BE"}
.mehrform>summary small{margin-left:auto;color:var(--muted);font-weight:500;font-size:0.8125rem}
.mehrform[open]{padding-bottom:10px}
.mehrform .stufenbox{margin-top:4px}

/* ============================================================
   DER INFOKNOPF UND DAS FELD DAUER (6.6)
   ============================================================ */
.infobtn{
  width:19px;height:19px;flex:none;margin-left:7px;padding:0;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);
  border-radius:50%;font:700 0.75rem/1 var(--font-title,inherit);
  display:inline-grid;place-items:center;vertical-align:-3px;
  transition:background .15s,color .15s,border-color .15s;
}
.infobtn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.infobtn[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.infobox{
  /* flex:0 0 100% ist kein Schmuck: Der Absatz steht als drittes Kind
     in derselben Flex-Zeile wie Beschriftung und Knopf. Ohne diese
     Zeile stellt er sich DANEBEN statt darunter, wird schmal wie eine
     Spalte und laeuft aus dem Feld heraus. */
  flex:0 0 100%;width:100%;box-sizing:border-box;
  margin:7px 0 0;padding:10px 12px;border-radius:10px;
  background:var(--bg);border-left:3px solid var(--accent);
}

.dauer-fld{display:block}
.dauer-kopf{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.dauer-zeile{display:flex;align-items:center;gap:9px}
.dauer-zeile input{width:6.5rem}
.dauer-einheit{color:var(--muted);font-size:0.9375rem}

/* ================= Die Mühe (6.6) =================
   Die Frage beim Tagesabschluss. Vier Knöpfe, die sich die Zeile
   teilen - so ist jeder gleich breit und gleich leicht zu treffen,
   auch am Handy. Ungewählt bleiben alle neutral: Eine eingefärbte
   Reihe sähe aus wie eine Bewertung, bevor überhaupt etwas
   bewertet wurde.

   Farbe bekommt nur der gewählte Knopf, und zwar keine Ampel:
   "zu leicht" ist nicht rot und kein Fehler, sondern ein Hinweis,
   dass der Habit gewachsen ist. */
.muefrage{display:flex;flex-direction:column;gap:7px;margin:12px 0}
.mue-name{font-size:.875rem;font-weight:600}
.mue-hint{font-size:.8125rem;color:var(--muted);margin:-4px 0 10px}
.muewahl{display:flex;gap:6px}
.mueknopf{
  flex:1;min-width:0;padding:8px 3px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);border-radius:10px;
  font:inherit;font-size:.78125rem;line-height:1.2;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.mueknopf:hover{border-color:var(--accent)}
.mueknopf.on{color:#fff;font-weight:600}
.mueknopf.mue1.on{background:var(--mittag);border-color:var(--mittag)}
.mueknopf.mue2.on{background:var(--green);border-color:var(--green)}
.mueknopf.mue3.on{background:var(--amber);border-color:var(--amber)}
.mueknopf.mue4.on{background:var(--red);border-color:var(--red)}

/* ---- Die Mühe in der Auswertung (6.6) ----
   Dieselben vier Farben wie bei den Knöpfen im Tagesabschluss. Wer
   dort "zu viel" rot angetippt hat, findet den Balken hier wieder. */
.hu-fuell.mue1{background:var(--mittag)}
.hu-fuell.mue2{background:var(--green)}
.hu-fuell.mue3{background:var(--amber)}
.hu-fuell.mue4{background:var(--red)}

/* ---- Was sich verändert hat (6.6) ----
   Drei Zeilen aus vier Spalten: Name, damals, Pfeil, heute. Der
   Pfeil ist mittig und trägt die Farbe, nicht die Zahl allein -
   sonst müsste man zwei Zahlen vergleichen, um die Richtung zu
   sehen. */
.rueckblick .rb-liste{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.rb-zeile{
  display:grid;grid-template-columns:1fr auto 1.6rem auto;
  align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line);
}
.rb-zeile:last-child{border-bottom:0}
.rb-zeile>span:first-child{font-size:.875rem}
.rb-pfeil{text-align:center;font-size:1.05rem;color:var(--muted)}
.rb-pfeil.good,.rb-zeile .mono.good{color:var(--green)}
.rb-pfeil.low,.rb-zeile .mono.low{color:var(--red)}
.rueckblick .fldnote{margin-top:11px}

/* ================= Die Etappen-Karte nach dem Anlegen (6.7) =================
   Sie steht an der Stelle, an der eben noch das Formular stand, und
   sieht deshalb aus wie dessen Fortsetzung: derselbe Karten-Grund, nur
   mit dem Zielsymbol als Anker, damit man sieht, worum es geht.

   Der linke Streifen in Akzentfarbe ist dieselbe Sprache wie bei Oris
   Vorschlagskarte: Hier bietet die App etwas an, du musst nicht. */
.zfrisch{border-left:3px solid var(--accent)}
.zf-kopf{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.zf-zeichen{font-size:1.65rem;line-height:1;flex:none}
.zf-kopf b{display:block;font-size:1rem;line-height:1.3}
.zf-kopf small{display:block;color:var(--muted);font-size:0.8125rem;margin-top:1px}
.zf-liste{display:flex;flex-direction:column;gap:2px;margin:10px 0 4px}
.zf-zeile{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  background:var(--bg);border-radius:9px;font-size:0.875rem;
}
.zf-zeile .mono{color:var(--muted);font-size:0.8125rem;flex:none}
.zf-pfeil{color:var(--muted);flex:none}
.zf-zeile b{margin-left:auto;text-align:right}
.zf-schritt>span:first-child{color:var(--accent);flex:none}
.zf-schritt>span:last-child{flex:1;min-width:0}
.zfrisch .gadd{margin-top:10px}
/* Drei Knoepfe in einer Zeile brechen auf einem 390er Schirm MITTEN
   im Wort um ("2 Etappen / uebernehmen"). Deshalb darf die Zeile
   umbrechen, und der leise dritte Knopf nimmt sich eine eigene. */
.zfrisch .form-actions{margin-top:12px;flex-wrap:wrap;align-items:center}
.zfrisch .form-actions .linkbtn{flex:0 0 100%;text-align:left;margin-top:2px}

/* ---- Das Rückmeldungs-Banner (6.7) ----
   Derselbe ruhige Grund wie beim Konto-Hinweis. Kein Gelb, kein
   Ausrufezeichen: Es ist keine Meldung über den Zustand der App,
   sondern eine Frage — und eine Frage darf man auch überlesen. */
.banner.rueck{background:var(--card);border-color:var(--line)}

/* ================= Der Beleg (6.8) =================
   Aufklappbar und im Ruhezustand eine einzige leise Zeile: Wer den
   Befund glaubt, soll nicht durch Kleingedrucktes waten - und wer
   ihn nicht glaubt, soll nachsehen können, ohne die App zu verlassen.

   Bewusst ohne Farbe und ohne Rahmen. Der Beleg ist keine Warnung,
   sondern eine Fußnote, die sich öffnen lässt. */
.beleg{margin-top:11px;border-top:1px solid var(--line);padding-top:8px}
.beleg>summary{
  cursor:pointer;list-style:none;
  font-size:0.75rem;color:var(--muted);
  display:flex;align-items:center;gap:5px;
  padding:2px 0;
}
.beleg>summary::-webkit-details-marker{display:none}
.beleg>summary::before{content:'\203a';transition:transform .15s;display:inline-block}
.beleg[open]>summary::before{transform:rotate(90deg)}
.beleg>summary:hover{color:var(--accent)}
.beleg-inhalt{padding:8px 0 2px;display:flex;flex-direction:column;gap:5px}
/* Die Beschriftung links bleibt immer einzeilig, der Wert rechts
   darf umbrechen. Umgekehrt (Wert unzerbrechlich) hat "Gerechnet
   aus" zerrissen und den Wert bis an den Kartenrand gedrueckt. */
.bz{
  display:flex;align-items:baseline;gap:10px;
  font-size:0.75rem;line-height:1.45;
}
.bz>span{color:var(--muted);flex:0 0 auto;white-space:nowrap}
.bz>b{
  font-weight:600;text-align:right;flex:1 1 auto;min-width:0;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.beleg-satz{
  margin:4px 0 0;font-size:0.75rem;color:var(--muted);line-height:1.5;
}

/* ---------- Tastflächen (6.9) ----------------------------------------

   Apple verlangt 44 × 44 px, Google 48 × 48. Mehrere Knöpfe der App
   waren kleiner – meist absichtlich, damit die Leisten schlank bleiben.

   Statt sie größer zu MALEN, bekommen sie ein unsichtbares Feld über
   sich gelegt: Das Aussehen bleibt Pixel für Pixel dasselbe, nur die
   Fläche zum Treffen wächst. Ein Klick auf das Feld gilt dem Knopf,
   weil ::after zu ihm gehört.

   Die Werte sind nicht geraten. Zu jedem Knopf wurde der Abstand zum
   nächsten anklickbaren Nachbarn gemessen; vergrößert wird höchstens
   bis zur MITTE dieser Lücke. Läge ein Feld über dem Nachbarn, finge
   es dessen Tipper ab – das wäre schlimmer als ein zu kleiner Knopf.
   ux69.py misst die Flächen mit elementFromPoint nach und schlägt
   Alarm, sobald ein Feld den Nachbarn erwischt.

   Absichtlich NICHT vergrößert: das ⋯ in einer Gewohnheitszeile
   (.hmenu-btn). Es sitzt mitten im Haken-Feld – jeder Pixel, den es
   dazubekommt, ginge dem Abhaken verloren. Die Zeile selbst ist 49 px
   hoch und damit die eigentliche Tastfläche. */
.schip,.tchip,.iconbtn,.fpill,.dp-plus,.mini,.linkbtn,
.brandlockup,.vswitch button,.infobtn,.ghost{position:relative}
.schip::after,.tchip::after,.iconbtn::after,.fpill::after,
.dp-plus::after,.mini::after,.linkbtn::after,.brandlockup::after,
.vswitch button::after,.infobtn::after,.ghost::after{content:'';position:absolute}

/* WICHTIG: kein Überstand nach RECHTS. Ein absolut gesetztes Kind,
   das über die rechte Kante ragt, zählt zum scrollWidth des Knopfes –
   er sähe dann aus, als stünde Text über den Rand hinaus. Genau das
   prüfen mehrere Reihen (etappen67, final), und zu Recht: bei langen
   deutschen Wörtern ist das ein echter Fehler. Nach links, oben und
   unten zählt der Überstand nicht mit, dorthin darf das Feld wachsen. */

/* Auswertung und Planen: 6 px Luft zwischen zwei Reitern.
   Der Reiter wird dafür um 1 px höher (38 statt 37). */
.schip{padding:7.5px 14px}
.schip::after{top:-3px;bottom:-3px;left:-6px;right:0}
/* Damit das Feld auf breiten Schirmen nicht vom Rollbereich der
   Leiste abgeschnitten wird, bekommt sie oben 3 px mehr Platz. */
.snav{padding-top:5px}

/* Zeitchips im Planen: 14 px Luft nach unten, 7 px zur Seite. */
.tchip::after{top:-7px;bottom:-7px;left:-7px;right:0}
/* Kopfleiste: Zahnrad und Pillen stehen 6 px auseinander; nach oben
   sind es 9 px bis zum Schriftzug, nach unten mehr. */
.iconbtn::after{top:-4px;bottom:-4px;left:-6px;right:0}
.fpill::after{top:-4.5px;bottom:-9px;left:-6px;right:0}
/* Der Schriftzug gibt nach: Er ist 206 px breit und praktisch nicht zu
   verfehlen, die Pillen darunter sind klein. */
.brandlockup::after{top:-2px;bottom:-2px;left:-5px;right:0}
/* Das Plus im Kopf einer Tageszeit: 12 px bis zur ersten Gewohnheit,
   und links davon steht nur die Zählung "0/3". */
.dp-plus::after{top:-10px;bottom:-9px;left:-18px;right:0}
.mini::after{top:-6.5px;bottom:-6.5px;left:-8px;right:0}
.mini.hmenu-btn::after{content:none}      /* siehe oben */
.linkbtn::after{top:-10.5px;bottom:-10.5px;left:-6px;right:0}
.vswitch button::after{top:-5.5px;bottom:-5.5px;left:-2px;right:0}
/* Der Info-Punkt neben einem Feld ist mit 19 x 19 der kleinste Knopf
   der App. Rechts von ihm steht nichts Anklickbares, oben und unten
   sind 50 px frei - er darf also kraeftig wachsen. */
.infobtn::after{top:-13px;bottom:-13px;left:-25px;right:0}
.ghost::after{top:-3px;bottom:-3px;left:-4px;right:0}

/* Die Fußzeile ist der einzige Ort, an dem echter Platz entsteht:
   Sie steht ganz unten, dort schiebt nichts mehr etwas aus dem Bild.
   15 px hohe Links sind für einen Daumen nicht zu treffen. */
footer{line-height:1.5}
footer a,footer .linkbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 9px;
}
footer .linkbtn::after,footer a::after{content:none}

/* Weitersagen (6.9.3). Bewusst dieselbe Karte wie alles andere unter
   "Mehr → App" – kein Farbkasten, kein Ausrufezeichen. Wer sie sucht,
   findet sie; wer nicht, wird nie darauf gestoßen. */
.teilcard .fbtns{margin-top:12px}

/* ================= Der Kreis der Dimensionen (7.0/7.5) =================
   Er sitzt oben in der Zielansicht. Das Bild ist fuer die Maus, die
   Reihe darunter fuer die Tastatur - beide loesen dasselbe aus.

   7.5: Feld und Zeichen liegen in einer Gruppe .zk-teil. Die Gruppe
   ist das Bedienelement; sie weicht beim Beruehren nach aussen aus
   und waechst ein wenig. Ein Tipp aufs Emoji trifft damit dasselbe
   wie ein Tipp aufs Feld - vorher traf er nichts. */
.zkreis{text-align:center}
.zk-svg{
  display:block;width:100%;max-width:236px;margin:2px auto 0;height:auto;
  /* Nichts im Kreis ist Text zum Markieren. Ohne das faehrt beim
     Tippen auf ein Emoji die blaue Auswahl auf. */
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* Die Mittelschrift ist Auskunft, kein Bedienelement - sie darf dem
   Feld darunter den Klick nicht wegnehmen. */
.zk-svg>text{pointer-events:none}
.zk-teil{
  cursor:pointer;
  transform-box:view-box;transform-origin:150px 150px;
  transition:transform .18s cubic-bezier(.2,.8,.25,1),opacity .15s ease;
}
.zk-feld{stroke:var(--card);stroke-width:3;transition:filter .15s ease}
.zk-zeichen{font-size:23px;fill:var(--ink)}
.zk-teil.zk-leer{opacity:.3}
.zk-teil.zk-an .zk-feld{stroke:var(--ink);stroke-width:3.5}
.zk-svg text{fill:var(--ink)}
.zk-mitte-zahl{font-weight:700;font-size:17px;fill:var(--muted)}
.zk-mitte-klein{font-size:12px;fill:var(--muted)}

/* Die Zeile mit dem Namen. Fest hoch, damit beim Darueberfahren
   nichts springt; der Vorfuehrname liegt darueber und wird
   eingeblendet. */
.zk-namezeile{
  position:relative;min-height:1.4em;margin:10px 0 0;
  font-size:0.8125rem;font-weight:600;color:var(--ink);
}
.zk-name,.zk-wname{display:block;position:absolute;left:0;right:0;top:0}
.zk-wname{opacity:0}

/* Acht Knoepfe, zwei Reihen. Jeder ist 44 Pixel hoch - die Grenze aus
   6.9 gilt auch fuer neue Bedienelemente. */
.zk-chips{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;
}
.zk-chip{
  min-height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:5px 2px;
  background:var(--hover);border:1px solid transparent;border-radius:10px;
  font:inherit;color:var(--ink);cursor:pointer;line-height:1.1;
  user-select:none;-webkit-user-select:none;
}
.zk-chip:hover{border-color:var(--line)}
.zk-chip.on{border-color:var(--ink);background:var(--accent-soft)}
.zk-chip.zk-leer{opacity:.5}
.zk-chip-n{font-size:10.5px;color:var(--muted);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-chip-z{font-size:12px;font-weight:600}
.zk-note{margin-top:10px}
@media (max-width:360px){.zk-chips{grid-template-columns:repeat(2,1fr)}}

/* ---- Der gezeichnete Zeiger ----
   Er ist standardmaessig unsichtbar und wird NUR von der Bewegung
   sichtbar gemacht. Wer im Betriebssystem weniger Bewegung
   eingestellt hat, sieht damit gar keinen Zeiger - und keinen
   Pfeil, der regungslos im Bild steht. */
.zk-wink{opacity:0;pointer-events:none}
.zk-pfeil{fill:var(--ink);stroke:var(--card);stroke-width:1.6;stroke-linejoin:round}
.zk-welle{fill:none;stroke:var(--ink);stroke-width:2.5;opacity:0;
  transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:no-preference){
  /* Der Auftritt: die acht Felder faechern nacheinander auf. Nur
     beim Betreten des Bereichs, nicht bei jedem Klick darin. */
  @keyframes zkAuf{
    from{opacity:0;transform:rotate(-16deg) scale(.8)}
    to{opacity:1;transform:none}
  }
  .zk-auftritt .zk-teil{
    animation:zkAuf .5s cubic-bezier(.2,.8,.25,1) backwards;
    animation-delay:calc(var(--nr) * 45ms);
  }
  .zk-auftritt .zk-teil.zk-leer{animation-name:zkAuf}

  /* Beruehren: nach aussen und ein wenig groesser. Das Zeichen geht
     mit, weil beides in derselben Gruppe liegt. */
  .zk-teil:hover,.zk-teil:focus-within{
    transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) scale(1.05);
  }
  .zk-teil:hover .zk-feld{filter:brightness(1.07)}

  /* Die Vorfuehrung. Zeitplan in einem Stueck:
       0,75 s  der Zeiger blendet unten rechts ein
       1,3  s  er ist am Feld
       2,1  s  er tippt - Welle, Feld geht auf, Name erscheint
       3,0  s  alles geht zurueck                                   */
  @keyframes zkZeiger{
    0%  {opacity:0;transform:translate(262px,312px)}
    10% {opacity:1;transform:translate(262px,312px)}
    42% {opacity:1;transform:translate(var(--zx),var(--zy)) scale(1)}
    50% {transform:translate(var(--zx),var(--zy)) scale(.8)}
    58% {transform:translate(var(--zx),var(--zy)) scale(1)}
    86% {opacity:1;transform:translate(var(--zx),var(--zy))}
    100%{opacity:0;transform:translate(var(--zx),var(--zy)) scale(.9)}
  }
  @keyframes zkWelle{
    0%,46%{opacity:0;transform:scale(.25)}
    54%   {opacity:.5;transform:scale(.5)}
    78%   {opacity:0;transform:scale(1.3)}
    100%  {opacity:0;transform:scale(1.3)}
  }
  @keyframes zkZeigAuf{
    0%,100%{transform:none}
    16%,74%{transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) scale(1.06)}
  }
  @keyframes zkNameRein{0%,100%{opacity:0}16%,74%{opacity:1}}
  @keyframes zkNameWeg {0%,100%{opacity:1}16%,74%{opacity:0}}

  .zk-fuehrt .zk-wink{
    animation:zkZeiger 2.5s cubic-bezier(.35,.1,.25,1) .75s both;
  }
  .zk-fuehrt .zk-welle{animation:zkWelle 2.5s linear .75s both}
  .zk-fuehrt .zk-teil.zk-zeig{animation:zkZeigAuf 1.6s ease 1.85s both}
  .zk-fuehrt .zk-wname{animation:zkNameRein 1.6s ease 1.85s both}
  .zk-fuehrt .zk-name {animation:zkNameWeg  1.6s ease 1.85s both}
  /* Waehrend der Auftritt laeuft, ist das vorgefuehrte Feld noch mit
     dem Auffaechern beschaeftigt. Es bekommt deshalb BEIDE
     Bewegungen nacheinander - moeglich, weil die zweite erst nach
     der ersten anfaengt. */
  .zk-auftritt.zk-fuehrt .zk-teil.zk-zeig{
    animation:zkAuf .5s cubic-bezier(.2,.8,.25,1) backwards,
              zkZeigAuf 1.6s ease 1.85s both;
    animation-delay:calc(var(--nr) * 45ms),1.85s;
  }
}
@media (prefers-reduced-motion:reduce){
  .zk-teil{transition:none}
  .zk-teil:hover .zk-feld{filter:brightness(1.1)}
}

/* ================= Das Zielformular (7.1) =================
   Drei kleine Bausteine fuer den einen Fluss: die Erklaerung ganz
   oben, die Ruecklesung unter dem Namen und die eine Klappe fuer
   alles, was die App sich selbst zusammenreimt. */
.zhilf{
  margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--muted);
  background:var(--hover);border-radius:10px;padding:11px 13px;
}
.zhilf b{color:var(--ink)}
/* Die Ruecklesung. Sie sitzt unmittelbar unter dem Namensfeld und
   wandert beim Tippen mit - deshalb eine Mindesthoehe: Ohne sie
   huepfte das halbe Formular bei jedem Buchstaben um eine Zeile. */
.zlese{
  margin:-6px 0 12px;min-height:1.35em;
  font-size:13.5px;line-height:1.35;color:var(--accent);font-weight:500;
}
.zlese:empty{margin:0;min-height:0}
.zeinzel{margin-bottom:12px}

/* ================= Der Quotenverlauf (7.4) =================
   Kurve, Stand und die Luft bis zum Stichtag. Der Satz mit der Luft
   ist der Joker fuer Ziele - er bekommt deshalb denselben warmen Ton
   wie der Joker selbst und nicht das Rot einer Warnung. */
.zquote{margin:2px 0 12px}
.zquote-bild{margin-bottom:6px}
.zquote-stand{margin:0;font-size:0.8125rem;color:var(--muted)}
.zquote-stand b{color:var(--ink);font-size:1rem}
.zluft{
  margin:8px 0 0;padding:9px 12px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:0.8125rem;line-height:1.45;
}
.zluft b{font-weight:600}
/* Nicht mehr zu schaffen: gedaempft statt rot. Es ist eine Auskunft,
   kein Fehler - und der Satz daneben bietet einen Weg an. */
.zluft.ab{background:var(--hover);color:var(--muted)}
.zluft.ab b{color:var(--ink)}

/* ---------- Rechtstexte ueber dem Erststart (8.8) ----------
   Liegt ueber #onboard (gleiche Ebene 70, deshalb eigene) und unter
   den Meldungen (75). */
.dlg-backdrop.oblegal{z-index:74}
.dlg.oblegal-dlg{width:min(680px,100%);max-width:680px;max-height:calc(100vh - 36px);display:flex;flex-direction:column}
.oblegal-inhalt{overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
.oblegal-inhalt .legalcard{border:0;box-shadow:none;padding:0;background:transparent}