/* ====================================================================================
   ZEIT — Zeiterfassung (Runde 73). Alle Klassen tragen das Präfix zt-.
   ------------------------------------------------------------------------------------
   Vorbild ist die TrackingTime-App aus dem Teams des Nutzers: Wochenraster Montag bis
   Sonntag, Tagessumme oben rechts in der Spalte, farbige Kacheln je Eintrag, laufende Uhr
   als Chip im Kopf. Umgesetzt mit unserer Schrift, unseren Farben und unseren Radien.

   ZWEI REGELN, die hier jede Zeile betreffen:

   1. Keine harte Farbe. Jede Fläche und jeder Text kommt aus einem Token aus styles.css,
      damit der Nachtmodus mitkippt (er tauscht NUR Variablen aus). Die sechs Projektfarben
      setzen dafür zwei eigene Variablen, --zt-fl (Fläche) und --zt-ft (Ton), und alles
      Weitere liest nur noch diese beiden. Ein Farbwert steht deshalb genau einmal da.
   2. Unter 900 px sind sieben Spalten nebeneinander unbrauchbar (rund 40 px je Spalte auf
      einem iPhone). Das Raster schaltet dort auf EINE Tagesspalte um, geblättert wird über
      den Wochenstreifen darüber. Beides liegt im selben HTML, nur die Sichtbarkeit
      wechselt: sonst müsste die Ansicht beim Drehen des Geräts neu gebaut werden.
   ==================================================================================== */

/* ---------- Die sechs Projektfarben ---------- */
/* Der gespeicherte Wert ist der SCHLÜSSEL (lila, blau, …), nie ein Hex-Wert. Nur so kann
   der Nachtmodus die Fläche mitziehen. --amber gibt es bewusst nur als Ton, nie als
   Fläche (siehe Begründung am Token in styles.css) — deshalb die weichen *-soft-Flächen. */
.zt-f-lila { --zt-fl: var(--soft); --zt-ft: var(--lilat); }
.zt-f-blau { --zt-fl: var(--blau-soft); --zt-ft: var(--blaut); }
.zt-f-gruen { --zt-fl: var(--gruen-soft); --zt-ft: var(--gruent); }
.zt-f-amber { --zt-fl: var(--amber-soft); --zt-ft: var(--ambert); }
.zt-f-rot { --zt-fl: var(--rot-soft); --zt-ft: var(--rott); }
/* Grau lag auf var(--bg) und damit auf exakt der Fläche der Tagesspalte und der Monatszelle:
   eine graue Kachel war dort unsichtbar, nur der linke Rand blieb stehen. Die Kartenfläche
   hebt sich in beiden Modi von der Spalte ab (hell #ffffff auf #f6f3fb, nachts #211a36 auf
   #14101d), ohne eine neue Farbe einzuführen. */
.zt-f-grau { --zt-fl: var(--weiss); --zt-ft: var(--tsoft); }

/* ---------- Reiter über der Ansicht ---------- */
/* Am PC eine Zugabe zur Seitennavigation, am Handy die einzige Navigation im Bereich. */
.zt-reiter {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--weiss); border-radius: var(--r-pille); padding: 5px;
  box-shadow: var(--shadow); width: max-content; max-width: 100%;
}
.zt-reiter-t {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-pille); padding: 7px 15px;
  font-size: var(--fs-text); font-weight: 600; color: var(--tsoft);
  transition: background .14s, color .14s;
}
.zt-reiter-t:hover { background: var(--bg); color: var(--text); }
.zt-reiter-t.active { background: var(--lila); color: #fff; }
.zt-reiter-t.active:hover { background: var(--lila); color: #fff; }

/* ---------- Leiste über dem Raster ---------- */
/* Kein eigenes Polster mehr. Die Leiste steht in derselben Spalte wie die gewöhnlichen Karten
   der Bereiche Arbeit und Berichte; mit var(--s3) var(--s4) lag ihre Innenkante bei 363 px,
   die der Karte darunter bei 369 und die der Wochenkarte bei 359 — drei Innenkanten unter
   denselben Außenkanten, Spannweite 10 px. Jetzt trägt jede Karte hier das Polster aus .card. */
.zt-leiste {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
/* Umbruch statt nowrap. Bei 320 px braucht diese Zeile 320 px (34 + 162 + 34 + 66 plus dreimal
   8 px Abstand) und bekommt 258: „Heute" stand von 285 bis 351 px, und weil nichts davon
   schrumpfen kann, schob es die GANZE Seite auf 351 px auf (documentElement.scrollWidth 351
   bei clientWidth 320). Mit Umbruch rutscht der Knopf in die zweite Zeile. */
.zt-leiste-l { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; flex-wrap: wrap; }
.zt-leiste-r { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }
.zt-zeitraum { font-size: var(--fs-karte); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.zt-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r2);
  background: var(--soft); color: var(--lilat); flex-shrink: 0;
  transition: background .14s;
}
.zt-pfeil:hover { background: var(--line); }
/* Es gibt nur EIN Pfeil-Symbol in ic(). Der Zurück-Pfeil ist dasselbe, gedreht. */
.zt-pfeil svg { transform: rotate(180deg); }
.zt-pfeil.vor svg { transform: none; }

.zt-wahl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zt-wahl > span { font-size: var(--fs-mikro); font-weight: 600; color: var(--tsoft); }
.zt-wahl select, .zt-wahl input {
  border: 1px solid var(--feldrand); border-radius: var(--r2);
  background: var(--weiss); padding: 7px 10px;
  font-size: var(--fs-text); font-weight: 600; max-width: 100%;
}
.zt-wahl select:focus, .zt-wahl input:focus { outline: 2px solid var(--lilat); outline-offset: 1px; }

.zt-schalter {
  display: inline-flex; gap: 4px; background: var(--soft);
  border-radius: var(--r-pille); padding: 4px;
}
.zt-schalter-t {
  border-radius: var(--r-pille); padding: 6px 14px;
  font-size: var(--fs-text); font-weight: 600; color: var(--tsoft);
}
.zt-schalter-t.active { background: var(--weiss); color: var(--lilat); box-shadow: var(--shadow); }

.zt-suchfeld { position: relative; }
.zt-suchfeld svg { color: var(--tsoft); flex-shrink: 0; }
.zt-suchfeld input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 8px 2px;
  font-size: var(--fs-stark);
}
.zt-suchfeld input:focus { outline: none; }
.zt-bleiste { align-items: flex-end; }

/* ---------- Laufende Uhr im Kopf ---------- */
.zt-uhr {
  display: inline-flex; align-items: center; gap: var(--s3);
  border-radius: var(--r-pille); padding: 6px 16px 6px 6px;
  background: var(--zt-fl, var(--soft));
  border: 1px solid var(--linie-fein);
  max-width: 100%; min-width: 0;
}
.zt-uhr.leer { background: var(--soft); }
.zt-uhr-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  color: #fff; transition: transform .14s;
}
.zt-uhr-knopf:hover { transform: scale(1.06); }
.zt-uhr-knopf.start { background: var(--gruen); }
.zt-uhr-knopf.stop { background: var(--rot); }
.zt-uhr-zahl {
  font-size: var(--fs-titel); font-weight: 800; letter-spacing: -.02em;
  color: var(--zt-ft, var(--lilat));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zt-uhr-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.zt-uhr-text b { font-size: var(--fs-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-uhr-text span { font-size: var(--fs-mikro); color: var(--tsoft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Wochensumme und Soll-Ist ---------- */
.zt-summe { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.zt-summe-zahl { display: flex; flex-direction: column; }
.zt-summe-k { font-size: var(--fs-mikro); font-weight: 600; color: var(--tsoft); text-transform: uppercase; letter-spacing: .06em; }
.zt-summe-zahl b { font-size: var(--fs-gross); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.zt-summe-soll { flex: 1; min-width: 220px; }
.zt-summe-txt { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-fein); color: var(--tsoft); margin-bottom: 6px; }
.zt-summe-txt .offen { color: var(--ambert); font-weight: 700; }
.zt-summe-txt .voll { color: var(--gruent); font-weight: 700; }
.zt-balken { height: 10px; border-radius: var(--r-pille); background: var(--soft); overflow: hidden; }
.zt-balken i { display: block; height: 100%; border-radius: var(--r-pille); background: var(--lila); transition: width .3s; }
.zt-balken i.voll { background: var(--gruen); }
.zt-summe-hinweis { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-fein); color: var(--tsoft); }
.zt-summe-hinweis svg { color: var(--ambert); flex-shrink: 0; }

/* ---------- Wochenraster ---------- */
/* Die Wochenkarte trägt bewusst KEIN eigenes Polster mehr (früher var(--s3)): ihre Innenkante
   lag damit 4 px links von der Leiste darüber. Die sieben Spalten verlieren dadurch je 10 px
   am Rand, am Handy 4 px — dort steht ohnehin nur EINE Spalte. */
.zt-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }

.zt-spalte {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--r3); background: var(--bg);
  border: 1px solid var(--linie-fein);
}
.zt-spalte.heute { border-color: var(--lilat); }
.zt-spalte-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s1);
  padding: 10px 10px 6px;
}
.zt-spalte-tag { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.zt-spalte-tag b { font-size: var(--fs-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-spalte-tag span { font-size: var(--fs-mikro); color: var(--tsoft); }
.zt-spalte.heute .zt-spalte-tag b { color: var(--lilat); }

/* Die Tagessumme sitzt wie im Vorbild oben rechts. Rund, solange sie „0" zeigt; sie
   wächst zur Pille, sobald eine echte Dauer darin steht — die Zahl abzuschneiden wäre
   schlimmer als ein etwas breiterer Kreis. */
.zt-tagsumme {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 9px; border-radius: var(--r-pille);
  font-size: var(--fs-mikro); font-weight: 700; white-space: nowrap;
  background: var(--weiss); color: var(--tsoft); border: 1px solid var(--linie-fein);
}
.zt-tagsumme.hat { background: var(--soft); color: var(--lilat); border-color: transparent; }

.zt-spalte-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 8px 8px; min-height: 190px; cursor: default;
}
/* Zeigefinger nur dort, wo wirklich ein Klick etwas auslöst: im Blick auf ein fremdes Konto
   trägt die Fläche kein data-neu, weil ein Eintrag dort auf dem eigenen Konto landen würde. */
.zt-spalte-body[data-neu] { cursor: pointer; }
.zt-spalte-plus {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: auto; padding: 9px 6px; border-radius: var(--r2);
  border: 1px dashed var(--feldrand);
  font-size: var(--fs-mikro); font-weight: 600; color: var(--tsoft);
  opacity: 0; transition: opacity .14s;
}
.zt-spalte-body:hover .zt-spalte-plus, .zt-spalte-body:focus-within .zt-spalte-plus { opacity: 1; }

/* Überschneidungen: zwei gleichzeitig laufende Zeiten stehen NEBENEINANDER in derselben
   Reihe. Untereinander wäre die Überschneidung unsichtbar, übereinander verdeckte die
   eine Kachel die andere und man käme an den verdeckten Eintrag nicht mehr heran. */
.zt-reihe { display: flex; flex-direction: column; gap: 6px; }
.zt-reihe.geteilt { flex-direction: row; align-items: stretch; gap: 4px; }
.zt-reihe.geteilt > .zt-kachel { flex: 1 1 0; min-width: 0; }

.zt-kachel {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 8px 10px; border-radius: var(--r2);
  background: var(--zt-fl, var(--soft));
  border-left: 3px solid var(--zt-ft, var(--lilat));
  /* overflow: hidden, damit nie ein Rest über den Kachelrand hinausragt: in einer geteilten
     Reihe ist eine Kachel nur noch halb so breit. */
  min-width: 0; overflow: hidden; transition: transform .12s, box-shadow .12s;
}
.zt-kachel:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.zt-kachel.laeuft { outline: 2px solid var(--gruent); outline-offset: 1px; }
.zt-k-projekt {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-mikro); font-weight: 600; color: var(--zt-ft, var(--lilat));
  min-width: 0;
}
/* Der Name steht in einem EIGENEN Feld, weil er sonst als anonymes Flex-Kind mit
   min-width: auto nicht schrumpft: bei „Nautic Store 24 aka. Motoworld GmbH" schob er das
   Warnsymbol daneben auf x = 402 px, während die Kachel bei 280 px endet und clippt — die
   einzige Anzeige für eine Überschneidung war damit unsichtbar (gemessen bei 320, 375, 414). */
.zt-k-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-k-warn { display: inline-flex; color: var(--ambert); flex-shrink: 0; }
.zt-k-taetigkeit { font-size: var(--fs-text); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.zt-k-notiz { font-size: var(--fs-mikro); color: var(--tsoft); overflow-wrap: anywhere; }
/* Von-Bis und Dauer stehen nebeneinander und tragen beide nowrap. In einer geteilten Reihe
   passen sie nicht mehr in eine Zeile: sie brechen deshalb um, statt aus der Kachel zu
   laufen, und die Zeitspanne darf zusätzlich schrumpfen. */
.zt-k-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-top: 3px; flex-wrap: wrap; }
.zt-k-zeit { font-size: var(--fs-mikro); color: var(--tsoft); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zt-k-dauer { font-size: var(--fs-mikro); font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Wochenstreifen: am PC überflüssig, am Handy die einzige Art zu blättern. */
.zt-streifen { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--s3); }
.zt-streifen-t {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px; border-radius: var(--r2); background: var(--bg); min-width: 0;
}
.zt-streifen-w { font-size: var(--fs-mikro); color: var(--tsoft); font-weight: 600; }
.zt-streifen-d { font-size: var(--fs-text); font-weight: 700; }
/* 11 px statt 10: die Tagessumme ist INHALT, keine Nebenbeschriftung, und 10 px lagen unter der
   Untergrenze des Schriftrasters (--fs-mikro). Damit sie in die 33 px breite Tagesspalte passt,
   steht hier die Kurzform „9:25" statt „9:25 h" (siehe ztDauerKurz in zeit.js): bei 320 px maß
   der Text in der langen Form 30,1 px bei 29,4 px Platz und wäre aus dem Knopf gelaufen. */
.zt-streifen-s { font-size: var(--fs-mikro); color: var(--tsoft); white-space: nowrap; }
.zt-streifen-t.heute .zt-streifen-d { color: var(--lilat); }
.zt-streifen-t.active { background: var(--lila); }
.zt-streifen-t.active .zt-streifen-w,
.zt-streifen-t.active .zt-streifen-d,
.zt-streifen-t.active .zt-streifen-s { color: #fff; }

/* ---------- Monatsraster ---------- */
/* Kein eigenes Polster, gleicher Grund wie bei der Wochenkarte: eine Innenkante je Spalte. */
.zt-monat-kopf { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); margin-bottom: 6px; }
.zt-monat-kopf span { font-size: var(--fs-mikro); font-weight: 700; color: var(--tsoft); text-align: center; }
.zt-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.zt-mtag {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 96px;
  padding: 7px; border-radius: var(--r2); background: var(--bg);
  border: 1px solid var(--linie-fein); cursor: default;
}
.zt-mtag[data-neu] { cursor: pointer; }
/* Tage aus dem Nachbarmonat: nur die FLÄCHE zurücknehmen. opacity: .45 zog jeden Text im
   Block mit, auch die Kachelbeschriftung und die Tagessumme, und drückte sie unter den
   lesbaren Kontrast (--tsoft auf --bg fällt damit von rund 6:1 auf rund 2:1). */
.zt-mtag.fremd { background: var(--weiss); border-style: dashed; }
.zt-mtag.fremd .zt-mtag-d { color: var(--tsoft); font-weight: 600; }
.zt-mtag.heute { border-color: var(--lilat); }
.zt-mtag-kopf { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.zt-mtag-d { font-size: var(--fs-text); font-weight: 700; }
/* Der Plus-Hinweis der Monatszelle steht dauerhaft, nicht erst beim Überfahren mit der Maus:
   am Handy gibt es kein Überfahren, und ohne Hinweis findet niemand den Weg zum Eintragen. */
.zt-mtag-plus { display: flex; justify-content: flex-end; margin-top: auto; color: var(--tsoft); }
.zt-mkachel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
  padding: 4px 6px; border-radius: var(--r1); min-width: 0;
  background: var(--zt-fl, var(--soft)); border-left: 2px solid var(--zt-ft, var(--lilat));
}
.zt-mkachel span { font-size: 10.5px; font-weight: 600; color: var(--zt-ft, var(--lilat)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-mkachel em { font-size: 10px; font-style: normal; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zt-mrest { font-size: 10px; color: var(--tsoft); }

/* ---------- Arbeit: Projekte und Tätigkeiten ---------- */
.zt-liste { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.zt-projekt { border: 1px solid var(--linie-fein); border-radius: var(--r3); background: var(--bg); }
/* Stillgelegt wird über Fläche und Etikett gezeigt, nicht über opacity: das senkte den
   Kontrast des GANZEN Blocks, der Metatext (--tsoft) landete bei rund 2,6:1 statt 6:1 und
   damit unter AA. Das Etikett „stillgelegt" steht ohnehin in der Zeile. */
.zt-projekt.still { background: var(--soft); }
.zt-projekt.still .zt-projekt-name b { color: var(--tsoft); font-weight: 600; }
.zt-projekt-zeile { display: flex; align-items: center; gap: var(--s2); padding: 10px 12px; flex-wrap: wrap; }
.zt-auf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r1); color: var(--tsoft); flex-shrink: 0;
}
.zt-auf svg { transition: transform .14s; }
.zt-auf.auf svg { transform: rotate(90deg); }
.zt-punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--zt-ft, var(--lilat)); flex-shrink: 0; }
.zt-projekt-name { display: flex; flex-direction: column; flex: 1; min-width: 120px; line-height: 1.3; }
.zt-projekt-name b { font-size: var(--fs-stark); font-weight: 700; overflow-wrap: anywhere; }
.zt-projekt-meta { font-size: var(--fs-mikro); color: var(--tsoft); }
.zt-fav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r2); color: var(--tsoft); flex-shrink: 0;
}
.zt-fav:hover { background: var(--soft); }
.zt-fav.an { color: var(--ambert); }
.zt-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--gruen); color: #fff; transition: transform .12s;
}
.zt-play:hover { transform: scale(1.07); }
.zt-play:disabled { opacity: .55; pointer-events: none; }
.zt-play.klein { width: 30px; height: 30px; }

.zt-taet { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 10px 46px; }
.zt-taet.zu { display: none; }
.zt-taet-zeile {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px 10px; border-radius: var(--r2); background: var(--weiss);
  border: 1px solid var(--linie-fein);
}
.zt-taet-name { flex: 1; min-width: 0; font-size: var(--fs-text); overflow-wrap: anywhere; }

/* ---------- Dialoge ---------- */
.zt-dreier { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 var(--s3); }
.zt-farbwahl { display: flex; gap: var(--s2); flex-wrap: wrap; }
.zt-farbe {
  /* flex-shrink: 0, weil die 34 px fest gemeint sind: gequetscht wird aus dem Quadrat ein
     Oval, und der Punkt darin (::after mit inset: 9px) sitzt dann schief statt mittig. */
  width: 34px; height: 34px; border-radius: var(--r2); flex-shrink: 0;
  background: var(--zt-fl, var(--soft));
  /* Feiner Rand statt durchsichtig: das Feld für Grau liegt auf der Fläche des Dialogs und
     hätte sonst keine sichtbare Kante mehr. */
  border: 2px solid var(--linie-fein); position: relative;
}
.zt-farbe::after {
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--zt-ft, var(--lilat));
}
.zt-farbe.an { border-color: var(--zt-ft, var(--lilat)); }
.zt-haken { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s3) 0; font-size: var(--fs-text); }
.zt-haken input { width: 18px; height: 18px; accent-color: var(--lila); flex-shrink: 0; margin-top: 1px; }

/* ---------- Berichte ---------- */
.zt-bericht { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.zt-brow { display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto; align-items: center; gap: var(--s3); }
.zt-brow-l { font-size: var(--fs-text); font-weight: 600; overflow-wrap: anywhere; }
.zt-brow-bar { height: 16px; border-radius: var(--r-pille); background: var(--soft); overflow: hidden; }
.zt-brow-bar i { display: block; height: 100%; border-radius: var(--r-pille); background: var(--zt-ft, var(--lilat)); min-width: 3px; }
.zt-brow-n { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-text); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zt-brow-n em { font-style: normal; font-weight: 500; font-size: var(--fs-mikro); color: var(--tsoft); }
.zt-bsumme {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.zt-bsumme span { font-size: var(--fs-fein); font-weight: 600; color: var(--tsoft); text-transform: uppercase; letter-spacing: .06em; }
.zt-bsumme b { font-size: var(--fs-titel); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Handy ---------- */
/* Ab hier gilt: EIN Tag statt sieben Spalten. Der Wochenstreifen darüber übernimmt das
   Blättern. Beide Bausteine stehen schon im HTML, hier wechselt nur die Sichtbarkeit. */
@media (max-width: 900px) {
  .zt-reiter { width: 100%; justify-content: space-between; }
  .zt-reiter-t { flex: 1; justify-content: center; padding: 8px 6px; font-size: var(--fs-fein); }
  .zt-leiste-r { width: 100%; margin-left: 0; }
  .zt-leiste-r .btn { flex: 1; justify-content: center; }
  .zt-summe-soll { min-width: 100%; }

  /* iOS-Safari zoomt beim Fokus in ein Feld unter 16 px hinein und nicht wieder heraus.
     styles.css setzt dagegen `input, select, textarea { font-size: var(--fs-karte) }`, das ist
     aber nur 0,0,1 und verliert gegen .zt-wahl select (0,1,1). Deshalb hier dieselbe Regel
     mit ausreichender Spezifität, dazu die 44-px-Höhe für den Finger. */
  .zt-wahl select, .zt-wahl input, .zt-suchfeld input { font-size: var(--fs-karte); min-height: 44px; }

  /* Die Tagessumme darf schrumpfen: eine Monatszelle ist auf einem 375-px-Gerät rund 45 px
     breit, die feste Mindestbreite plus Polster schob sonst den Wochentag aus dem Kopf.
     Im Monatsraster steht ohnehin die Kurzform (siehe ztDauerKurz in zeit.js). */
  .zt-tagsumme { min-width: 0; }
  .zt-mtag .zt-tagsumme { padding: 0 4px; height: 22px; max-width: 100%; overflow: hidden; }

  .zt-streifen { display: grid; }
  .zt-woche { display: block; }
  .zt-spalte { display: none; }
  .zt-spalte.aktiv { display: flex; }
  .zt-spalte-body { min-height: 260px; }
  /* Am Handy gibt es kein Überfahren mit der Maus: der Hinweis muss dauerhaft stehen,
     sonst findet niemand den Weg zum Eintragen. */
  .zt-spalte-plus { opacity: 1; }

  .zt-monat { gap: 4px; }
  .zt-mtag { min-height: 62px; padding: 4px; }
  .zt-mkachel { padding: 2px 4px; }
  .zt-mkachel em { display: none; }

  .zt-uhr { width: 100%; }
  .zt-uhr-zahl { font-size: var(--fs-karte); }

  .zt-brow { grid-template-columns: 1fr auto; }
  .zt-brow-bar { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .zt-dreier { grid-template-columns: 1fr 1fr; }
  .zt-dreier > .field:first-child { grid-column: 1 / -1; }
  .zt-projekt-zeile { padding: 9px 10px; }
  .zt-taet { padding-left: 20px; }
}