/* kata – Zeitpläne mit Gantt-Ansicht (Job 212). Farben und Dialog-Aussehen kommen aus app.css,
   Kopf, Menü und Knöpfe aus checkliste.css – kein zweiter Farbsatz. Alles hier hängt an `.zp…`.
   ⚠️ Kein `touch-action: none` an Balken oder Namen: sonst rollt die Zeitachse am Handy nicht
   mehr (checkliste.js / kanban.js halten es genauso). */

.zp {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  --zp-balken: var(--akzent);
  --zp-fort: var(--akzent-dunkel);
  --zp-ms: var(--akzent-hell);
  --zp-gruppe: #8b9097;
  --zp-we: rgba(255, 255, 255, .045);
  --zp-tageslinie: rgba(255, 255, 255, .05);
  --zp-wochenlinie: rgba(255, 255, 255, .13);
  -webkit-tap-highlight-color: transparent;
}
.zp-kopf { position: static; padding: .45rem .5rem; margin: 0; }
.zp-kopf .ckl-titel { cursor: default; }

.zp-leiste { display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; border-bottom: 1px solid var(--linie); }
.zp-leiste .fuell { flex: 1 1 auto; }
.zp-leiste .klein { padding: .35rem .5rem; font-size: .9rem; white-space: nowrap; }
.zp-zoom { display: inline-flex; border: 1px solid var(--linie); border-radius: .4rem; overflow: hidden; }
.zp-zoom button {
  /* Vier Knöpfe seit „Liste“ – knapp gepolstert, damit die Leiste am Handy einzeilig bleibt. */
  padding: .35rem .45rem; font-size: .9rem; color: var(--leise); white-space: nowrap;
  background: none; border: 0; border-right: 1px solid var(--linie);
}
.zp-zoom button:last-child { border-right: 0; }
.zp-zoom button[aria-pressed="true"] { background: var(--akzent); color: #fff; }
.zp-neu { color: var(--akzent-hell); border-color: var(--akzent); }
.zp-leiste .zp-neu { font-size: 1.25rem; font-weight: 700; line-height: 1; padding: .2rem .6rem; }

/* Register „Neuer Vorgang | Neue Gruppe“ im Dialogkopf – so gross wie ein Dialogtitel. */
.dlg h2.zp-register { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.dlg h2.zp-register::first-letter { color: inherit; }
.zp-reg {
  font: inherit; color: var(--leise); background: none; border: 0; border-radius: 0;
  padding: 0 0 .2rem; border-bottom: 2px solid transparent; cursor: pointer;
}
.zp-reg[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent-hell); cursor: default; }
.zp-reg-n { color: var(--akzent-hell); }

/* Die Rollfläche: beide Richtungen, Namen und Kopf kleben (sticky). */
.zp-bahn { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative; }
.zp-flaeche { position: relative; min-height: 100%; }

.zp-achsenkopf { position: sticky; top: 0; z-index: 4; display: flex; height: 46px; background: var(--grund); border-bottom: 1px solid var(--linie); }
.zp-ecke {
  position: sticky; left: 0; z-index: 5; flex: 0 0 var(--zp-namen); background: var(--grund); border-right: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: .1rem .35rem; padding: 0 .35rem; box-sizing: border-box;
}
/* Zwei kleine Zeichen-Knöpfe; eingeklappt stehen sie übereinander (die Ecke ist dann 44 px breit). */
.zp-ecke-knopf { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.3rem; padding: 0;
  background: none; border: 0; color: var(--leise); }
.zp-ecke-knopf svg { width: 16px; height: 16px; }
.zp-ecke-knopf[hidden] { display: none; }
.zp--schmal .zp-ecke { justify-content: center; padding: 0; gap: 0; }
/* Eingeklappte Namensspalte: kein Text, kein Einzug – nur Klapp-Pfeil bzw. Ketten-Zeichen. */
.zp--schmal .zp-name { padding: 0; justify-content: center; gap: 0; }
.zp--schmal .zp-name-text { display: none; }
.zp--schmal .zp-zeile--kind .zp-name { padding-left: 0; }
.zp--schmal .zp-klapp { margin-left: 0; }
.zp-achse { position: relative; flex: 0 0 auto; height: 100%; }
.zp-abschnitt {
  position: absolute; overflow: hidden; white-space: nowrap;
  font-size: .72rem; color: var(--leise); padding-left: 4px;
  border-left: 1px solid var(--linie); box-sizing: border-box;
}
.zp-z1 { top: 0; height: 18px; line-height: 18px; color: var(--text); }
.zp-z2 { top: 18px; height: 28px; line-height: 28px; border-top: 1px solid var(--linie); }
.zp-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; line-height: 1.05; font-size: .7rem; }
.zp-tag .zp-wt { font-size: .6rem; opacity: .75; }
.zp-tag.zp-we { background: var(--zp-we); }
.zp-tag.zp-heute-kopf { color: #fff; background: var(--jetzt); }

/* Raster unter den Zeilen. Der Bereich beginnt immer an einem MONTAG – darum passt das
   Wochenend-Band als wiederkehrendes Muster mit 7 Tagen Periode. */
.zp-raster { position: absolute; z-index: 0; pointer-events: none; }
.zp-raster--tag {
  background:
    linear-gradient(to right, var(--zp-wochenlinie) 1px, transparent 1px) 0 0 / calc(var(--zp-px) * 7) 100%,
    linear-gradient(to right, var(--zp-tageslinie) 1px, transparent 1px) 0 0 / var(--zp-px) 100%,
    linear-gradient(to right, transparent calc(var(--zp-px) * 5), var(--zp-we) calc(var(--zp-px) * 5)) 0 0 / calc(var(--zp-px) * 7) 100%;
}
.zp-raster--woche {
  background:
    linear-gradient(to right, var(--zp-wochenlinie) 1px, transparent 1px) 0 0 / calc(var(--zp-px) * 7) 100%,
    linear-gradient(to right, transparent calc(var(--zp-px) * 5), var(--zp-we) calc(var(--zp-px) * 5)) 0 0 / calc(var(--zp-px) * 7) 100%;
}
/* Zeitfenster einer Gruppe: helles Band, gestrichelte Kante dort, wo es eine Grenze gibt. */
.zp-fenster { position: absolute; background: rgba(120, 190, 150, .09); box-sizing: border-box; }
.zp-fenster--ab { border-left: 1px dashed rgba(120, 190, 150, .6); }
.zp-fenster--bis { border-right: 1px dashed rgba(120, 190, 150, .6); }
.zp-monatslinie { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--zp-wochenlinie); }
/* Regel 12: DURCHGEZOGENES ROT heisst „jetzt“ – und nur das. */
.zp-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--jetzt); z-index: 2; }

.zp-zeilen { position: relative; z-index: 1; }
.zp-zeile { display: flex; height: var(--zp-zeile); }
.zp-name {
  position: sticky; left: 0; z-index: 3;
  flex: 0 0 var(--zp-namen); min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: .2rem; padding: 0 .4rem 0 .5rem;
  background: var(--grund); border-right: 1px solid var(--linie); border-bottom: 1px solid #ffffff08;
  font-size: .9rem; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.zp-kette { flex: 0 0 auto; display: inline-flex; color: var(--leise); }
.zp-kette svg { width: 13px; height: 13px; }
.zp-name-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Unterpositionen stehen sichtbar RECHTS vom Gruppennamen (Jogi 23.9.): der Gruppentext beginnt
   hinter dem Klapp-Pfeil bei rund 1.8rem, die Kinder eine Stufe weiter. */
.zp-zeile--kind .zp-name { padding-left: 2.7rem; }
/* Offenes Kontextmenü: die Zeile steht farbig da (wie Job 211). Der Name klebt und braucht einen
   deckenden Grund – darum die Tönung ÜBER --grund gelegt. */
.zp-zeile.menue-offen .zp-name { background: linear-gradient(rgba(180, 104, 47, .38), rgba(180, 104, 47, .38)), var(--grund); }
.zp-zeile.menue-offen .zp-spur { background: rgba(180, 104, 47, .14); }
.zp-zeile--gruppe .zp-name { font-weight: 600; background: #1d1f22; }
.zp-klapp {
  flex: 0 0 auto; width: 1.4rem; height: 1.6rem; padding: 0; margin-left: -.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--leise);
}
.zp-klapp svg { transition: transform .15s; width: 14px; height: 14px; }
.zp-klapp[aria-expanded="true"] svg { transform: rotate(90deg); }
.zp-spur { position: relative; flex: 0 0 auto; }

.zp-balken, .zp-gruppe-balken, .zp-meilenstein {
  position: absolute; box-sizing: border-box; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.zp-balken { top: 8px; height: calc(var(--zp-zeile) - 16px); background-color: var(--zp-balken); border-radius: 4px; }
/* ⚠️ Kein `overflow: hidden` am Balken: es machte ihn zur eigenen Rollfläche, und der Name darin
   klebte dann nicht mehr am Sichtrand. Die Ecken des Fortschritts rundet er selbst. */
.zp-fort { position: absolute; left: 0; top: 0; bottom: 0; background: var(--zp-fort); border-radius: 4px 0 0 4px; }
/* Name im Balken: klebt beim Rollen am linken Rand der Zeitachse, solange der Balken zu sehen ist. */
.zp-balken-name {
  /* `vertical-align: top`: sonst sitzt der Name auf der Grundlinie des Balkens und rutscht um
     die halbe Zeilenhöhe der Seite nach unten (im Gruppenbalken 4 px, Jogi 23.9.). */
  position: sticky; left: calc(var(--zp-namen) + 2px); z-index: 1; display: inline-block; vertical-align: top;
  padding: 0 5px; font-size: .72rem; line-height: calc(var(--zp-zeile) - 16px); white-space: nowrap;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); pointer-events: none;
}
/* Passt er nicht hinein: rechts daneben, leise – und antippbar wie der Balken (Job 214). */
.zp-balken-name--aussen {
  position: absolute; top: 0; line-height: var(--zp-zeile); padding: 0; color: var(--leise); text-shadow: none;
  pointer-events: auto; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Farben von Hand (zeitplan.js → FARBEN). ⚠️ Kein Rot (Regel 12). */
.zp-f-blau    { --zp-balken: #3f7fbf; --zp-fort: #2b5a8a; --zp-ms: #5d97d1; }
.zp-f-gruen   { --zp-balken: #4c9a5a; --zp-fort: #34703f; --zp-ms: #66b574; }
.zp-f-violett { --zp-balken: #8a63b8; --zp-fort: #634389; --zp-ms: #a07fcb; }
.zp-f-tuerkis { --zp-balken: #2f9c9a; --zp-fort: #1f6f6d; --zp-ms: #45b6b3; }
.zp-f-senf    { --zp-balken: #b8962e; --zp-fort: #86691c; --zp-ms: #cfae48; }
/* Läuft über das Ende des Zeitfensters: ein Rahmen (nicht Schraffur – die heisst „überfällig“,
   nicht Rot – das heisst „jetzt“). */
.zp-balken.zp-ueber, .zp-gruppe-balken.zp-ueber, .zp-meilenstein.zp-ueber { outline: 2px solid #e6c34a; outline-offset: 1px; }
.zp-warnung { color: #e6c34a; opacity: 1; }
/* Bedingungen gehen vor: fertig = grau, überfällig = schraffiert über der eigenen Farbe. */
.zp-balken.zp-fertig { --zp-balken: #5f646b; --zp-fort: #5f646b; }
.zp-balken.zp-fertig .zp-fort { border-radius: inherit; }
.zp-balken.zp-spaet, .zp-meilenstein.zp-spaet {
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .38) 0 4px, transparent 4px 9px);
}
/* Der Gruppenbalken ist 16 px hoch, damit sein Name hineinpasst (Jogi 23.9.; vorher 10 px). */
.zp-gruppe-balken { top: 8px; height: 16px; background: var(--zp-gruppe); border-radius: 2px; }
.zp-gruppe-balken .zp-balken-name { line-height: 16px; font-size: .68rem; font-weight: 600; }
.zp-gruppe-balken .zp-fort { border-radius: 2px 0 0 2px; }
.zp-gruppe-balken .zp-fort { background: #5c6168; }
.zp-gruppe-balken::before, .zp-gruppe-balken::after {
  content: ""; position: absolute; bottom: -5px; border: 5px solid transparent; border-top-color: var(--zp-gruppe);
}
.zp-gruppe-balken::before { left: 0; border-left-color: var(--zp-gruppe); }
.zp-gruppe-balken::after { right: 0; border-right-color: var(--zp-gruppe); }
/* Die Raute sitzt auf der KANTE vor ihrem Tag (zeitplan.js: ein Meilenstein kostet keine Zeit). */
.zp-meilenstein {
  top: calc(var(--zp-zeile) / 2 - 7px); width: 14px; height: 14px; margin-left: -7px;
  background-color: var(--zp-ms); transform: rotate(45deg); border-radius: 2px;
}
.zp-meilenstein.zp-fertig { background-color: var(--leise); }

.zp-pfeile { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.zp-pfeile path { fill: none; stroke: var(--leise); stroke-width: 1.3; }
.zp-pfeile marker path { fill: var(--leise); stroke: none; }

.zp-leer { margin: 1rem; color: var(--leise); position: sticky; left: 0; }

/* Bearbeiten-Modus: der Balken gehört dem Ziehen. */
.zp--bearbeiten .zp-balken, .zp--bearbeiten .zp-meilenstein { cursor: grab; box-shadow: 0 0 0 1px #ffffff40; }
.zp--bearbeiten .zp-name, .zp--bearbeiten .zp-balken-name--aussen { cursor: grab; }
.zp-griff { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; cursor: ew-resize; background: rgba(255, 255, 255, .25); }
.zp-zieht { filter: brightness(1.25); box-shadow: 0 4px 14px rgba(0, 0, 0, .55) !important; z-index: 6; }
.zp-meilenstein.zp-zieht { transform: rotate(45deg) scale(1.15); }
.zp-tipp {
  position: absolute; top: 4px; z-index: 7; padding: .1rem .35rem; white-space: nowrap;
  font-size: .72rem; color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-radius: .3rem;
  pointer-events: none;
}
.zp-einfuege { position: absolute; left: 0; right: 0; height: 3px; background: var(--akzent-hell); z-index: 8; pointer-events: none; }
/* Ablegen ergäbe einen Kreis (Job 214): der Strich gestrichelt und grau, daneben der Grund. */
.zp-einfuege--kreis { background: repeating-linear-gradient(90deg, var(--leise) 0 6px, transparent 6px 11px); }
.zp-hinweis { margin: 0; padding: .35rem .6rem; font-size: .75rem; color: var(--leise); border-top: 1px solid var(--linie); }

/* Dialog */
.zp-dlg input.zp-zahl {
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--grund); border: 1px solid var(--gitter); border-radius: .35rem;
  padding: .4rem .5rem; width: 100%; min-width: 0; box-sizing: border-box;
}
.zp-dlg form { max-height: calc(100dvh - 2rem); overflow-y: auto; }
/* ⚠️ „Kommt nach …“ ist ein gewöhnlicher Kasten, KEIN fieldset (Safari-Zucken, Jogi 23.9., gemessen:
   der Rahmen war beim Öffnen 16,5 px zu hoch, sein Inhalt nicht). Die Überschrift sitzt wie eine
   legend auf dem Rahmen; gerollt wird die innere Liste, waagrecht nie. */
.zp-vorg { position: relative; margin: .5rem 0 0; padding: .55rem .6rem .5rem; border: 1px solid var(--linie); border-radius: .4rem; }
.zp-vorg-titel {
  position: absolute; top: 0; left: .6rem; transform: translateY(-50%);
  padding: 0 .3rem; font-size: .78rem; line-height: 1; color: var(--leise); background: var(--karte);
}
.zp-vorg-liste { max-height: 11rem; overflow-y: auto; overflow-x: hidden; }
.zp-vorg .feld.waagrecht { font-size: .9rem; color: var(--text); padding: .15rem 0; min-width: 0; }
/* Ab sechs Einträgen zweispaltig, zu Langes endet mit „…“ (Jogi 23.9.). */
.zp-vorg-inhalt.zp-vorg--zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .8rem; }
.zp-vorg .feld.waagrecht > input { flex: 0 0 auto; }      /* sonst schrumpft das Kästchen neben „…“ */
.zp-vorg-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-vorg .zp-gesperrt { opacity: .45; }
/* Gegliedert nach Gruppen (Job 213): je Gruppe ein klappender Block, die eigene offen. */
.zp-vg-kopf { display: flex; align-items: center; gap: .25rem; min-width: 0; font-size: .9rem; padding: .15rem 0; }
.zp-vg-klapp { flex: 0 0 auto; display: inline-flex; padding: .15rem; background: none; border: 0; color: var(--leise); cursor: pointer; }
.zp-vg-klapp svg { width: 14px; height: 14px; transition: transform .15s; }
.zp-vg-klapp[aria-expanded="true"] svg { transform: rotate(90deg); }
.zp-vg-klapp--leer { visibility: hidden; }
.zp-vg-name, .zp-vg-gruppe { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-vorg .zp-vg-kopf .feld.waagrecht { padding: 0; }
.zp-vg-zahl { flex: 0 0 auto; color: var(--akzent-hell); font-size: .8rem; white-space: nowrap; }
.zp-vg .zp-vorg-inhalt { padding-left: 1.3rem; }
.zp-vg--zu > .zp-vorg-inhalt { display: none; }
/* Vorgangs-Dialog fürs Handy (Jogi 23.9.) */
.zp-reihe-kurz > .feld:first-child { flex: 2 1 0; }
.zp-reihe-kurz > .feld:last-child { flex: 1 1 0; }
/* Das Raster (zeitplan.js → oeffneVorgang): Beschriftung | Feld | rechte Hälfte. */
.zp-dlg-raster {
  display: grid; align-items: center; column-gap: .5rem; row-gap: .6rem;
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
}
.zp-dlg-raster > .feld { display: contents; }
.zp-dlg-raster > .feld[hidden] { display: none; }          /* Regel 16: `hidden` muss gewinnen */
.zp-dlg-raster > .feld > span { grid-column: 1; }
.zp-r-beginn > span, .zp-r-beginn > input { grid-row: 1; }
.zp-r-beginn > input, .zp-r-fort > input { grid-column: 2; }
.zp-dlg-raster > .zp-r-ms { display: flex; grid-row: 1; grid-column: 3; font-size: .78rem; line-height: 1.25; }
.zp-dlg-raster > .zp-r-ms > input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; }
.zp-r-fort > span, .zp-r-fort > input { grid-row: 2; }
/* Beim Meilenstein steht statt „Fertig (%)“ der Haken „erreicht“ (Job 214). */
.zp-dlg-raster > .zp-r-erreicht { display: flex; grid-row: 2; grid-column: 1 / 3; }
.zp-dlg-raster > .zp-r-erreicht > input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; }
/* Laufzeit: Farbe und Grösse der Beschriftungen, genau unter dem TEXT „Meilenstein …“
   (Kästchen 1.1rem + Abstand .45rem aus .feld.waagrecht). */
.zp-lauf { grid-row: 2; grid-column: 3; padding-left: 1.55rem; font-size: .78rem; color: var(--leise); line-height: 1.25; }
.zp-r-gruppe > span, .zp-r-gruppe > select { grid-row: 3; }
.zp-r-farbe > span, .zp-r-farbe > select { grid-row: 4; }
.zp-r-wahl > select { grid-column: 2 / 4; }
.zp-i {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 1.15rem; height: 1.15rem; padding: 0; margin-left: .15rem;
  font: italic 600 .72rem/1 Georgia, serif; color: var(--akzent-hell);
  background: none; border: 1px solid var(--akzent); border-radius: 50%;
}
/* Erklärung hinter einem „i“: schwebt über den Feldern, nichts darunter springt (zeitplan.js → zeigeInfo). */
.zp-info {
  position: absolute; z-index: 20; box-sizing: border-box; width: max-content; max-width: min(18rem, calc(100% - 16px));
  padding: .45rem .6rem; font-size: .8rem; line-height: 1.35; color: var(--text);
  background: var(--karte); border: 1px solid var(--akzent); border-radius: .4rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.zp-info p { margin: 0; }
/* Beschriftung LINKS neben dem Feld statt darüber. */
.feld.zp-inline { flex-direction: row; align-items: center; gap: .6rem; }
.feld.zp-inline > span { flex: 0 0 4rem; }
.feld.zp-inline > select { flex: 1 1 auto; }
/* Datum leer: der Browser zeigt „TT.MM.JJJJ“ – blass, damit es nicht wie ein Wert aussieht. */
.zp-dlg input.zp-leer-datum { color: var(--leise); }
.zp-dlg input.zp-leer-datum::-webkit-datetime-edit { opacity: .45; }

/* Liste nach Terminen (Jogi 23.9.): zweite Ansicht desselben Zeitplans. */
.zp-liste { padding: .3rem .5rem 1rem; }
.zp-abschn-titel { margin: .8rem .2rem .3rem; font-size: .75rem; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.zp-abschn--spaet .zp-abschn-titel { color: var(--akzent-hell); }
.zp-li {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem; margin-bottom: .3rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: .45rem; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.zp-li.menue-offen { background: rgba(180, 104, 47, .28); border-color: var(--akzent); }
.zp-li-farbe { flex: 0 0 5px; align-self: stretch; border-radius: 3px; background: var(--zp-balken); }
.zp-li-farbe--ms { background: var(--zp-ms); }
.zp-abschn--spaet .zp-li-farbe { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .38) 0 3px, transparent 3px 6px); }
.zp-abschn--fertig .zp-li { opacity: .6; }
.zp-abschn--fertig .zp-li-farbe { background: #5f646b; }
.zp-li-mitte { flex: 1 1 auto; min-width: 0; }
.zp-li-name { display: flex; align-items: center; gap: .3rem; font-size: .95rem; color: var(--text); }
.zp-li-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-abschn--fertig .zp-li-text { text-decoration: line-through; }
.zp-li-unter { font-size: .75rem; color: var(--leise); margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-li-ueber { color: #e6c34a; }
.zp-li-rechts { flex: 0 0 auto; font-size: .8rem; color: var(--leise); }
.zp-leiste [hidden], .zp-kopf [hidden] { display: none; }
.zp-li-raute { display: inline-block; width: .5rem; height: .5rem; margin: 0 .4rem 0 .1rem; transform: rotate(45deg); background: var(--zp-ms); vertical-align: .05rem; }
.zp-abschn--fertig .zp-li-raute { background: var(--leise); }
.zp-li-rechts svg { display: block; width: 1rem; height: 1rem; }