/* ═══════════════════════════════════════════════════════════════════
   Gestaltungsmarken

   Aufbau und Farben stammen aus dem Job-Agenten: erst Marken mit einer
   Bedeutung, dann Bausteine, die nur diese Marken verwenden. Keine Farbe
   steht direkt im Baustein – ein Farbwechsel bleibt eine Änderung an
   einer Stelle.

   Anders als dort ist das Handy der Normalfall. Die Regeln unten gelten
   für schmale Bildschirme; der breite kommt am Ende als Ausnahme.
   ═════════════════════════════════════════════════════════════════ */
:root{
  --grund:#FBFAF6;
  --flaeche:#F2F0E7;
  --text:#2A3324;
  --gedaempft:#E9E6D9;
  --gedaempft-text:#5E6753;
  --rand:#DCD8C8;
  --rand-stark:#C1BCA8;

  --primaer:#2F3A28;
  --primaer-dunkel:#1E2619;
  --primaer-weich:#EEEDE2;
  --auf-primaer:#FBFAF6;

  --erfolg:#4A6B33;
  --erfolg-weich:#E9F0E0;
  --erfolg-rand:#C3D4AC;

  --warnung:#8A5A00;
  --warnung-weich:#FAF3E0;
  --warnung-rand:#E6D6A8;

  --gefahr:#8C3B26;
  --gefahr-weich:#F7EAE6;
  --gefahr-rand:#E0C3B9;

  --ring:#5C7A42;

  --radius:14px;       /* Karten, Dialoge */
  --radius-feld:10px;  /* Eingaben und Knöpfe */
  --radius-klein:6px;  /* Abzeichen */

  --schrift:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --schrift-zahl:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --schatten-hoch:0 8px 28px rgba(42,51,36,.18);

  --m-1:6px; --m-2:8px; --m-3:12px; --m-4:16px; --m-5:20px; --m-6:28px;
  --leiste:64px;       /* Höhe der Reiterleiste unten */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--flaeche);color:var(--text);
  font:16px/1.5 var(--schrift);-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.3px;line-height:1.2}
h1{font-size:24px}
h2{font-size:18px}
h3{font-size:15px}
p{margin:0 0 var(--m-3)}
code{background:var(--gedaempft);padding:2px var(--m-1);border-radius:var(--radius-klein);
  font-family:var(--schrift-zahl);font-size:13px}
.versteckt{display:none !important}
.zahl{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums}

/* ── Grundgerüst ─────────────────────────────────────────────────── */
.rahmen{min-height:100vh;min-height:100dvh}
.kopf{background:var(--grund);border-bottom:1px solid var(--rand);
  padding:var(--m-3) var(--m-4);display:flex;align-items:center;gap:var(--m-4)}
.marke{display:flex;align-items:center;gap:var(--m-2);font-size:19px;
  font-weight:800;letter-spacing:-.4px}
.marke img{border-radius:8px;display:block}
.marke.gross{font-size:26px;justify-content:center;margin-bottom:var(--m-5)}
.inhalt{max-width:680px;margin:0 auto;
  padding:var(--m-4) var(--m-4) calc(var(--leiste) + var(--m-6) + env(safe-area-inset-bottom))}

/* Die Reiterleiste: unten, wo der Daumen ist. */
#nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;
  background:var(--grund);border-top:1px solid var(--rand);
  padding-bottom:env(safe-area-inset-bottom)}
.navpunkt{flex:1;min-width:0;height:var(--leiste);border:none;background:none;
  border-radius:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:0;font:inherit;font-size:11.5px;
  font-weight:600;color:var(--gedaempft-text);cursor:pointer}
.navpunkt .sym{display:flex;line-height:1}
.navpunkt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.navpunkt,.navpunkt:hover{background:none !important}
.navpunkt.aktiv{color:var(--primaer)}
.navpunkt.aktiv .sym{background:var(--primaer-weich);border-radius:999px;padding:2px 14px}

.seitenkopf{display:flex;align-items:flex-end;gap:var(--m-3);margin-bottom:var(--m-4)}
.seitenkopf .unterzeile{color:var(--gedaempft-text);font-size:14px;margin-top:2px}
.seitenkopf .schub{margin-left:auto;flex:none}

/* ── Karten ──────────────────────────────────────────────────────── */
.karte{background:var(--grund);border:1px solid var(--rand);
  border-radius:var(--radius);padding:var(--m-4);min-width:0;margin-bottom:var(--m-3)}
.karte.schmal{width:100%;max-width:380px;margin:0}
.kartenkopf{display:flex;align-items:center;gap:var(--m-2);margin-bottom:var(--m-3)}
.kartenkopf .schub{margin-left:auto}
.abschnitt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gedaempft-text);margin:var(--m-5) 0 var(--m-2)}

/* ── Knöpfe ──────────────────────────────────────────────────────── */
button,.knopf{font:inherit;font-size:15px;font-weight:600;border-radius:var(--radius-feld);
  padding:10px var(--m-4);min-height:44px;cursor:pointer;border:1px solid var(--rand-stark);
  background:var(--grund);color:var(--text);display:inline-flex;align-items:center;
  justify-content:center;gap:var(--m-1);line-height:1.2;text-decoration:none}
/* Nur wo es einen Zeiger gibt: Auf dem Handy bleibt :hover nach dem
   Antippen kleben, bis man woanders hintippt. */
@media (hover:hover){
  button:hover:not(:disabled),.knopf:hover{background:var(--gedaempft)}
  button.haupt:hover:not(:disabled){background:var(--primaer-dunkel)}
  button.rot:hover:not(:disabled){background:var(--gefahr-weich)}
  button.schlicht:hover:not(:disabled){background:var(--gedaempft);color:var(--text)}
}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,.knopf:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
button.haupt{background:var(--primaer);border-color:var(--primaer);color:var(--auf-primaer)}
button.rot{color:var(--gefahr);border-color:var(--gefahr-rand)}
button.schlicht{border-color:transparent;background:none;color:var(--gedaempft-text)}
button.klein{min-height:36px;padding:var(--m-1) var(--m-3);font-size:14px}
button.voll,.knopf.voll{width:100%}
.knopfreihe{display:flex;gap:var(--m-2);flex-wrap:wrap}
.knopfreihe > *{flex:1 1 140px}

/* ── Formulare ───────────────────────────────────────────────────── */
label{display:block;font-size:13px;font-weight:600;color:var(--gedaempft-text);
  margin-bottom:var(--m-1)}
/* 16 Pixel, nicht weniger: Darunter zoomt Safari beim Antippen in das
   Feld hinein und bleibt dort. */
input[type=text],input[type=password],input[type=number],input[type=time],
select,textarea{width:100%;font:inherit;font-size:16px;padding:10px var(--m-3);
  min-height:44px;border-radius:var(--radius-feld);border:1px solid var(--rand-stark);
  background:var(--grund);color:var(--text)}
textarea{resize:vertical;min-height:72px;line-height:1.4}
.feld{margin-bottom:var(--m-3)}
.feldreihe{display:grid;gap:var(--m-3);grid-template-columns:1fr 1fr}
.hinweis{font-size:13.5px;color:var(--gedaempft-text);margin-top:var(--m-1)}
.trennung{height:1px;background:var(--rand);margin:var(--m-4) 0}
.mittig{min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  justify-content:center;padding:var(--m-4)}

/* ── Abzeichen ───────────────────────────────────────────────────── */
.abzeichen{display:inline-flex;align-items:center;flex:none;align-self:center;line-height:1.5;font-size:12px;font-weight:700;
  padding:2px var(--m-2);border-radius:var(--radius-klein);white-space:nowrap;
  background:var(--gedaempft);color:var(--gedaempft-text);border:1px solid transparent}
.abzeichen.erledigt{background:var(--erfolg-weich);color:var(--erfolg);border-color:var(--erfolg-rand)}
.abzeichen.dran{background:var(--primaer);color:var(--auf-primaer)}
.abzeichen.uebersprungen,.abzeichen.verpasst,.abzeichen.vorbei{
  background:var(--warnung-weich);color:var(--warnung);border-color:var(--warnung-rand)}

/* ── Heute: die große Karte ──────────────────────────────────────── */
.jetztkarte{border-color:var(--primaer);border-width:2px;padding:var(--m-5) var(--m-4)}
.jetztkarte .wann{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gedaempft-text);display:flex;gap:var(--m-2);align-items:baseline}
.jetztkarte .wann .zahl{font-size:15px;color:var(--text);letter-spacing:0}
.jetztkarte h1{font-size:28px;margin:var(--m-1) 0 2px}
.jetztkarte .beiwerk{color:var(--gedaempft-text);font-size:14.5px}
.jetztkarte .knopfreihe{margin-top:var(--m-4)}
.jetztkarte .knopfreihe button{min-height:50px;font-size:16px}
.ruhe{text-align:center;padding:var(--m-6) var(--m-4)}
.ruhe h1{margin-bottom:var(--m-2)}
.ruhe p{color:var(--gedaempft-text);margin:0}
.ruhe button{margin-top:var(--m-4)}

.uebungen{list-style:none;margin:var(--m-4) 0 0;padding:0;border-top:1px solid var(--rand)}
.uebungen li{display:flex;gap:var(--m-3);align-items:baseline;padding:var(--m-2) 0;
  border-bottom:1px solid var(--rand)}
.uebungen .name{flex:1;min-width:0}
.uebungen .angabe{font-family:var(--schrift-zahl);font-size:14px;color:var(--gedaempft-text);
  white-space:nowrap}
.routinennotiz{font-size:14px;color:var(--gedaempft-text);margin:var(--m-3) 0 0;
  white-space:pre-line}

/* ── Zeilenlisten: Tagesplan, Wochenplan, Routinen ───────────────── */
.liste{background:var(--grund);border:1px solid var(--rand);border-radius:var(--radius);
  overflow:hidden;margin-bottom:var(--m-3)}
.zeile{display:flex;align-items:center;gap:var(--m-3);width:100%;min-height:56px;
  padding:var(--m-2) var(--m-4);border:none;border-bottom:1px solid var(--rand);
  border-radius:0;background:none;text-align:left;font:inherit;color:inherit;
  justify-content:flex-start}
.liste > :last-child{border-bottom:none}
button.zeile{cursor:pointer}
.zeile .zeit{font-family:var(--schrift-zahl);font-size:15px;flex:none;width:48px}
.zeile .mitte{flex:1;min-width:0}
.zeile .titel{font-weight:600;display:block}
.zeile .unter{font-size:13.5px;color:var(--gedaempft-text);display:block}
.zeile.blass .titel,.zeile.blass .zeit{color:var(--gedaempft-text)}
.zeile.erledigt .titel{text-decoration:line-through;text-decoration-color:var(--rand-stark)}
.zeile .pfeil{color:var(--rand-stark);flex:none}
.leerhinweis{padding:var(--m-4);color:var(--gedaempft-text);font-size:14.5px}

/* ── Wochenplan ──────────────────────────────────────────────────── */
.tageskopf{display:flex;align-items:center;gap:var(--m-2);margin:var(--m-4) 0 var(--m-2)}
.tageskopf h2{font-size:16px}
.tageskopf .heute{font-size:12px;font-weight:700;color:var(--erfolg)}
.tageskopf .schub{margin-left:auto}
.tagewahl{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--m-1)}
.tagewahl label{margin:0;position:relative}
.tagewahl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tagewahl span{display:flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid var(--rand-stark);border-radius:var(--radius-feld);font-size:14px;
  font-weight:600;color:var(--text);background:var(--grund)}
.tagewahl input:checked + span{background:var(--primaer);border-color:var(--primaer);
  color:var(--auf-primaer)}
.tagewahl input:focus-visible + span{outline:2px solid var(--ring);outline-offset:1px}

/* ── Routine bearbeiten ──────────────────────────────────────────── */
.uebungszeile{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 44px;
  gap:var(--m-2);margin-bottom:var(--m-2)}
.uebungszeile button{padding:0;min-width:44px}

/* ── Übersicht ───────────────────────────────────────────────────── */
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--m-2);
  margin-bottom:var(--m-3)}
.kachel{background:var(--grund);border:1px solid var(--rand);border-radius:var(--radius);
  padding:var(--m-3)}
.kachel .wert{font-family:var(--schrift-zahl);font-size:28px;font-weight:500;line-height:1.1}
.kachel .titel{font-size:13px;color:var(--gedaempft-text)}
.kachel.gut .wert{color:var(--erfolg)}
.kachel.warn .wert{color:var(--warnung)}
.balken{height:8px;border-radius:999px;background:var(--gedaempft);overflow:hidden;
  margin-top:var(--m-2)}
.balken > i{display:block;height:100%;background:var(--erfolg);border-radius:999px}
.wochenzeile{padding:var(--m-3) var(--m-4);border-bottom:1px solid var(--rand)}
.wochenzeile .oben{display:flex;gap:var(--m-2);align-items:baseline}
.wochenzeile .oben .schub{margin-left:auto;font-family:var(--schrift-zahl);font-size:14px}

/* ── Dialoge: ein Blatt von unten ────────────────────────────────── */
dialog{border:none;padding:0;color:var(--text);background:var(--grund);
  width:100%;max-width:560px;max-height:88dvh;margin:auto auto 0;
  border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--schatten-hoch)}
dialog::backdrop{background:rgba(30,38,25,.45)}
dialog form,dialog .blattinhalt{padding:var(--m-5) var(--m-4)
  calc(var(--m-5) + env(safe-area-inset-bottom));overflow-y:auto;max-height:88dvh}
dialog h2{margin-bottom:var(--m-2)}
.fragefuss{display:flex;gap:var(--m-2);margin-top:var(--m-4)}
.fragefuss > *{flex:1}

/* ── Meldungen ───────────────────────────────────────────────────── */
#meldungen{position:fixed;top:var(--m-3);left:var(--m-3);right:var(--m-3);z-index:50;
  display:flex;flex-direction:column;gap:var(--m-2);align-items:center;pointer-events:none}
.meldung{background:var(--primaer);color:var(--auf-primaer);padding:var(--m-2) var(--m-4);
  border-radius:var(--radius-feld);font-size:14.5px;box-shadow:var(--schatten-hoch);
  max-width:520px;transition:opacity .3s}
.meldung.fehler{background:var(--gefahr)}
.meldung.erfolg{background:var(--erfolg)}
.meldung.geht{opacity:0}

.codefeld{font-family:var(--schrift-zahl);font-size:17px;letter-spacing:.04em}
.abstand{margin-top:var(--m-4)}
.abstand-klein{margin-top:var(--m-2)}
.fuss{font-size:13px;color:var(--gedaempft-text);text-align:center;margin-top:var(--m-5)}

/* ── Breite Fenster: Reiter wandern nach oben ────────────────────── */
@media (min-width:900px){
  .kopf{position:sticky;top:0;z-index:5;padding:var(--m-2) var(--m-6)}
  #nav{position:static;border:none;padding:0;background:none;flex:1;
    justify-content:flex-end;gap:var(--m-1)}
  .navpunkt{flex:none;flex-direction:row;height:40px;padding:0 var(--m-3);
    gap:var(--m-2);font-size:14.5px;border-radius:var(--radius-feld)}
  .navpunkt svg{width:18px;height:18px}
  .navpunkt.aktiv{background:var(--primaer-weich) !important}
  .navpunkt.aktiv .sym{background:none;padding:0}
  .inhalt{padding-top:var(--m-6);padding-bottom:var(--m-6)}
  dialog{margin:auto;border-radius:var(--radius)}
}
@media (prefers-reduced-motion:reduce){ .meldung{transition:none} }

/* Eine Übung im Formular: Name und Angabe in einer Zeile, der Link darunter. */
.uebungsblock{margin-bottom:var(--m-3);padding-bottom:var(--m-3);
  border-bottom:1px dashed var(--rand)}
.uebungen a{font-size:13.5px;font-weight:600;color:var(--erfolg);white-space:nowrap;
  text-decoration:none;margin-left:var(--m-1)}
.uebungen a:hover{text-decoration:underline}