/* ═══════════════════════════════════════════════════════════════════════════
   Reiter „Sicherheit" — Oberflaeche
   ---------------------------------------------------------------------------
   Neuaufbau 04.09.2026. Die Vorgaengerfassung war nach Messwerten geordnet
   (Ampel, sieben Kacheln, Fundprotokoll, Reiter „Handeln" mit Sitzungen,
   Geraeten und Sperren) und setzte Kenntnis der Regelkuerzel K1, H5, H15
   voraus. Der taegliche Leser ist aber der Geschaeftsfuehrer, kein
   Sicherheitsanalyst; er beantwortet hier drei Fragen:

     1. Ist alles in Ordnung?
     2. Wenn nein: was ist passiert und wie wichtig ist es?
     3. Wenn ich handeln muss: was genau, und was bewirkt es?

   Danach ist diese Datei geordnet: EINE Zustandsflaeche, darunter offene
   Aufgaben, darunter sechs verstaendliche Schutzbereiche. Technisches liegt
   eine Interaktion tiefer (Seitenblatt, Abschnitt „Technische Details").

   Grundsaetze, die beim Aendern gelten:

   1. NUR App-Variablen als Grundlage (--bg-card, --border, --text, --brand).
      So laeuft der Dunkelmodus des Programms ohne eigene Regeln mit.
   2. Statusfarben sind GEMESSEN, nicht gewaehlt (Werte unveraendert aus der
      Vorgaengerfassung uebernommen, ΔE 11,3 zwischen Gruen und Gelb bei
      Rot-Gruen-Schwaeche). Wer sie aendert, misst neu.
   3. Farbe traegt eine Aussage nie allein. Jeder Zustand steht zusaetzlich
      als Wort da, und jedes Zustandssymbol hat eine eigene FORM
      (Haken, Dreieck, Kreis), nicht nur eine eigene Farbe.
   4. Glas nur fuer die Navigationsebene (Reiterleiste, Seitenblatt, Dialog).
      Inhaltskarten sind ruhig und weitgehend deckend. Sonst liegen zehn
      halbdurchsichtige Flaechen uebereinander und nichts steht mehr vorn.
   5. Erhoehung bedeutet etwas. Schatten haben nur Zustandsflaeche,
      Reiterleiste, Seitenblatt und Dialog. Alles andere traegt eine Haarlinie.
   6. Beruehrbare Ziele sind mindestens 44 px hoch, sobald das Geraet mit dem
      Finger bedient wird.
   ═════════════════════════════════════════════════════════════════════════ */

.sich {
  /* ── Statusfarben ──────────────────────────────────────────────────────── */
  --sich-gut: #0ca30c;
  --sich-hinweis: #fab219;
  --sich-kritisch: #d03b3b;
  --sich-unbekannt: #94a3b8;
  --sich-balken: #0689c2;
  /* Schrift auf gefuellter kritischer Flaeche. Gemessen: Weiss auf #d03b3b
     ergibt 4,8:1 (hell), Weiss auf dem helleren #ff6b6b der Dunkelfassung nur
     2,78:1 und ist damit unlesbar. Dort steht deshalb dunkle Schrift (6,75:1). */
  --sich-auf-kritisch: #ffffff;

  /* Flaechen. Inhaltskarten sind deckend (--bg-modal-solid), nicht das
     halbdurchsichtige --bg-card: sie liegen im Stapel unter Seitenblatt und
     Dialog, und zwei Glasebenen uebereinander lassen Text ausfransen. */
  --sich-karte: var(--bg-modal-solid, #ffffff);
  --sich-glas: var(--bg-card, rgba(255,255,255,0.72));
  --sich-radius: 18px;
  --sich-radius-gross: 22px;
  --sich-radius-klein: 12px;

  max-width: 1220px;
  margin: 0 auto;
  padding: 4px 0 96px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

html.dark .sich {
  /* Auf dunklem Grund braucht jede Statusfarbe mehr Helligkeit, sonst sinkt
     sie in die Flaeche. Gemessen gegen die Karten der Dunkelfassung. */
  --sich-gut: #35c759;
  --sich-hinweis: #ffc93c;
  --sich-kritisch: #ff6b6b;
  --sich-unbekannt: #94a3b8;
  --sich-balken: #2cb5f0;
  --sich-auf-kritisch: #1a0f10;
  --sich-karte: rgba(255,255,255,0.055);
}

/* Farbe je Zustand: EINE Stelle, an der aus dem Wort des Waechters
   („gruen", „gelb", „rot", „unbekannt") eine Farbe wird. */
.sich [data-zustand="gruen"]      { --sich-farbe: var(--sich-gut); }
.sich [data-zustand="gelb"]       { --sich-farbe: var(--sich-hinweis); }
.sich [data-zustand="rot"]        { --sich-farbe: var(--sich-kritisch); }
.sich [data-zustand="unbekannt"]  { --sich-farbe: var(--sich-unbekannt); }
.sich [data-zustand="neutral"]    { --sich-farbe: var(--sich-unbekannt); }

/* ══ Kopfzone ══════════════════════════════════════════════════════════════
   Titel, ein Satz darueber was hier ueberwacht wird, und rechts der Zeitpunkt
   der letzten vollstaendigen Pruefung. Der Zeitpunkt gehoert sichtbar hierher:
   er beantwortet die stille Frage „schaut das Ding ueberhaupt noch hin". */
.sich-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 0 0 22px;
}
.sich-titel {
  margin: 0; font-size: clamp(26px, 2.5vw, 31px); font-weight: 680;
  letter-spacing: -0.028em; line-height: 1.1;
}
.sich-untertitel {
  margin: 7px 0 0; font-size: 14px; color: var(--text-secondary);
  max-width: 66ch; line-height: 1.5;
}
.sich-kopf-meta {
  font-size: 13px; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px;
}
.sich-kopf-meta svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; }

/* ══ Reiterleiste ══════════════════════════════════════════════════════════
   Drei Ansichten: Uebersicht, Ereignisse, Einstellungen. Segmentierte Auswahl,
   damit die gewaehlte auch ohne Farbe erkennbar ist (eigene Flaeche, eigene
   Erhoehung). Die Leiste ist die einzige dauerhafte Glasebene der Seite. */
.sich-nav {
  position: sticky; top: 0; z-index: 6;
  display: flex; gap: 3px; padding: 4px;
  margin: 0 0 26px; border-radius: 999px;
  background: var(--sich-glas);
  border: 1px solid var(--border-glass, var(--border));
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur, blur(24px));
  -webkit-backdrop-filter: var(--glass-blur, blur(24px));
  width: fit-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.sich-nav::-webkit-scrollbar { display: none; }
.sich-nav-knopf {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--text-secondary);
  padding: 9px 20px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .18s ease, background .18s ease;
}
.sich-nav-knopf:hover { color: var(--text); }
.sich-nav-knopf[aria-selected="true"] {
  background: var(--bg-modal-solid, #fff); color: var(--text); font-weight: 650;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.03);
}
html.dark .sich-nav-knopf[aria-selected="true"] {
  background: rgba(255,255,255,.10); box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.sich-nav-zahl {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--sich-kritisch); color: var(--sich-auf-kritisch);
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Abschnitt = eine der drei Ansichten. EIN Abstandsmass fuer den ganzen
   Stapel, damit keine Ueberschrift an der Fussnote darueber klebt. */
.sich-abschnitt {
  display: flex; flex-direction: column; gap: 34px;
  animation: sich-auf .17s ease-out;
}
.sich-abschnitt[hidden] { display: none; }
@keyframes sich-auf { from { opacity: 0; transform: translateY(5px); } }

/* Gruppe = Ueberschrift plus zugehoeriger Inhalt. */
.sich-gruppe { display: flex; flex-direction: column; gap: 12px; }
.sich-gruppe-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
h2.sich-ueberschrift {
  margin: 0; font-size: 19px; font-weight: 660; letter-spacing: -0.02em;
}
h3.sich-unterschrift {
  margin: 0; font-size: 15px; font-weight: 620; letter-spacing: -0.01em;
}
.sich-gruppe-text {
  margin: 0; font-size: 13.5px; color: var(--text-secondary); max-width: 74ch;
}

/* ══ Zustandsflaeche ═══════════════════════════════════════════════════════
   Das einzige grosse Element der Seite und die Antwort auf Frage 1. Genau drei
   Zustaende: in Ordnung, Pruefung erforderlich, Pruefung unvollstaendig.
   „Nicht messbar" darf NIE wie „in Ordnung" aussehen, deshalb hat jeder
   Zustand ein eigenes Symbol mit eigener Form und einen eigenen Satz. */
.sich-zustand {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 28px 30px;
  border-radius: var(--sich-radius-gross);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sich-farbe) 9%, transparent) 0%,
      color-mix(in srgb, var(--sich-farbe) 3%, transparent) 100%),
    var(--sich-karte);
  border: 1px solid color-mix(in srgb, var(--sich-farbe) 26%, var(--border));
  box-shadow: var(--shadow-md);
}
.sich-zustand-symbol {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sich-farbe) 16%, transparent);
  color: var(--sich-farbe);
}
.sich-zustand-symbol svg { width: 26px; height: 26px; }
.sich-zustand-text { flex: 1 1 340px; min-width: 0; }
.sich-zustand-satz {
  font-size: clamp(20px, 2vw, 25px); font-weight: 640;
  letter-spacing: -0.022em; line-height: 1.22;
}
.sich-zustand-meta {
  margin-top: 7px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.5;
  max-width: 68ch;
}
.sich-zustand-tat { flex: 0 0 auto; margin-left: auto; }

/* ══ Hinweisstreifen (haengender Mailversand, offene Anforderungen) ════════ */
.sich-streifen {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: var(--sich-radius-klein);
  background: color-mix(in srgb, var(--sich-farbe, var(--sich-hinweis)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--sich-farbe, var(--sich-hinweis)) 30%, transparent);
  font-size: 13.5px; line-height: 1.5;
}
.sich-streifen svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--sich-farbe); }
.sich-streifen b { font-weight: 640; }

/* ══ Aufgabenkarten („Jetzt pruefen") ══════════════════════════════════════
   Nur offene kritische Vorfaelle. Ein Vorfall, eine Karte, ein naechster
   Schritt. Keine Tabelle, keine Regelkuerzel, keine Adressen. */
.sich-aufgaben { display: flex; flex-direction: column; gap: 12px; }
.sich-aufgabe {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--sich-radius);
  background: var(--sich-karte);
  border: 1px solid color-mix(in srgb, var(--sich-farbe) 30%, var(--border));
}
.sich-aufgabe-haupt { flex: 1 1 380px; min-width: 0; }
.sich-aufgabe-titel {
  margin: 9px 0 0; font-size: 17px; font-weight: 640; letter-spacing: -0.015em;
  line-height: 1.3;
}
.sich-aufgabe-text {
  margin: 7px 0 0; font-size: 14px; color: var(--text-secondary);
  line-height: 1.55; max-width: 76ch;
}
.sich-aufgabe-fakten {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px;
  font-size: 13px; color: var(--text-secondary);
}
.sich-aufgabe-fakt b { font-weight: 600; color: var(--text); }
.sich-aufgabe-tat { flex: 0 0 auto; align-self: center; }

/* ══ Schutzbereiche ════════════════════════════════════════════════════════
   Sechs Karten in verstaendlichen Worten. Jede sagt genau eines: wie steht es
   um diesen Bereich. Messwerte („25 Ports offen", „Caddy 2.11.4") stehen
   NICHT hier, sondern im Seitenblatt. */
.sich-bereiche {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sich-bereich {
  appearance: none; text-align: left; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px 19px; border-radius: var(--sich-radius);
  background: var(--sich-karte); border: 1px solid var(--border);
  color: inherit;
  transition: border-color .18s ease, background .18s ease;
}
.sich-bereich:hover {
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
  background: var(--bg-card-hover, var(--sich-karte));
}
.sich-bereich-kopf { display: flex; align-items: center; gap: 10px; }
/* Die Schutzbereichs-Karte ist ebenfalls ein <button>. */
.sich-bereich-name, .sich-bereich-text { display: block; }
.sich-bereich-symbol {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sich-farbe) 14%, transparent);
  color: var(--sich-farbe);
}
.sich-bereich-symbol svg { width: 17px; height: 17px; }
.sich-bereich-name {
  font-size: 15px; font-weight: 620; letter-spacing: -0.01em; min-width: 0;
}
.sich-bereich-zustand {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--sich-farbe);
}
.sich-bereich-zustand svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sich-bereich-text {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-top: 2px;
}

/* ══ Ruhige Informationszeile („Heute automatisch geschuetzt") ═════════════
   Abgewehrte Angriffe aus dem Internet sind Alltag und kein Arbeitsauftrag.
   Deshalb eine Zeile, keine Warnkarte. */
.sich-info {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--sich-radius);
  background: var(--sich-karte); border: 1px solid var(--border);
}
.sich-info-symbol {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sich-gut) 13%, transparent);
  color: var(--sich-gut);
}
.sich-info-symbol svg { width: 18px; height: 18px; }
.sich-info-text { flex: 1 1 320px; min-width: 0; }
.sich-info-titel { font-size: 14.5px; font-weight: 620; }
.sich-info-satz { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.sich-info .btn { flex: 0 0 auto; margin-left: auto; }

/* ══ Aenderungsliste ══════════════════════════════════════════════════════ */
.sich-liste {
  border-radius: var(--sich-radius); background: var(--sich-karte);
  border: 1px solid var(--border); overflow: hidden;
}
.sich-zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; width: 100%; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--border-light, var(--border));
  font: inherit; color: inherit; cursor: pointer;
  transition: background .16s ease;
}
.sich-zeile:first-child { border-top: 0; }
.sich-zeile:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.sich-zeile-symbol {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sich-farbe) 13%, transparent);
  color: var(--sich-farbe);
}
.sich-zeile-symbol svg { width: 15px; height: 15px; }
/* Die Zeile ist ein <button>; ihre Kinder sind <span> und brauchen deshalb
   ausdrücklich Blockfluss, sonst laufen Titel und Beschreibung ineinander. */
.sich-zeile-text { flex: 1 1 auto; min-width: 0; display: block; }
.sich-zeile-titel { display: block; font-size: 14px; font-weight: 560; }
.sich-zeile-meta { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }
.sich-zeile-pfeil { flex: 0 0 auto; color: var(--text-muted); }
.sich-zeile-pfeil svg { width: 16px; height: 16px; display: block; }

/* ══ Filterleiste der Ereignisse ══════════════════════════════════════════ */
.sich-filter { display: flex; flex-direction: column; gap: 12px; }
.sich-pillen { display: flex; gap: 8px; flex-wrap: wrap; }
.sich-pille-knopf {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 550;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--sich-karte);
  color: var(--text-secondary);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.sich-pille-knopf:hover { color: var(--text); }
.sich-pille-knopf[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.sich-suche { display: flex; gap: 10px; align-items: center; max-width: 460px; }
.sich-suche .form-input { flex: 1 1 auto; }

/* ══ Ereigniskarten ═══════════════════════════════════════════════════════
   Eine Karte je zusammenhaengendem Vorfall, nicht je Logzeile. Wiederholungen
   stehen als Anzahl und Zeitraum in der Karte. */
.sich-ereignisse { display: flex; flex-direction: column; gap: 10px; }
.sich-ereignis {
  display: flex; gap: 16px; align-items: flex-start; width: 100%;
  padding: 17px 20px; border-radius: var(--sich-radius);
  background: var(--sich-karte); border: 1px solid var(--border);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.sich-ereignis:hover {
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
  background: var(--bg-card-hover, var(--sich-karte));
}
.sich-ereignis[data-offen="1"] {
  border-color: color-mix(in srgb, var(--sich-farbe) 34%, var(--border));
}
.sich-ereignis-symbol {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sich-farbe) 14%, transparent);
  color: var(--sich-farbe);
}
.sich-ereignis-symbol svg { width: 18px; height: 18px; }
/* Auch die Ereigniskarte ist ein <button>: Blockfluss ausdrücklich setzen. */
.sich-ereignis-haupt { flex: 1 1 auto; min-width: 0; display: block; }
.sich-ereignis-titel {
  display: block;
  font-size: 15px; font-weight: 620; letter-spacing: -0.01em; line-height: 1.35;
}
.sich-ereignis-satz {
  display: block;
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px;
  max-width: 80ch;
}
.sich-ereignis-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  font-size: 12.5px; color: var(--text-muted);
}
.sich-ereignis-pfeil { flex: 0 0 auto; align-self: center; color: var(--text-muted); }
.sich-ereignis-pfeil svg { width: 18px; height: 18px; display: block; }

/* Statuswort. Die Form unterscheidet zusaetzlich zur Farbe: eine Aufgabe ist
   gefuellt, Hinweis und Pruefluecke sind umrandet, Information ist schlicht. */
.sich-marke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 620; line-height: 1.55; white-space: nowrap;
  border: 1px solid transparent;
}
.sich-marke svg { width: 12px; height: 12px; flex: 0 0 auto; }
.sich-marke--aufgabe { background: var(--sich-kritisch); color: var(--sich-auf-kritisch); }
.sich-marke--hinweis {
  background: color-mix(in srgb, var(--sich-hinweis) 15%, transparent);
  color: var(--clr-warn-text); border-color: color-mix(in srgb, var(--sich-hinweis) 42%, transparent);
}
.sich-marke--luecke {
  background: color-mix(in srgb, var(--sich-hinweis) 15%, transparent);
  color: var(--clr-warn-text); border-color: color-mix(in srgb, var(--sich-hinweis) 42%, transparent);
}
.sich-marke--info { color: var(--text-secondary); border-color: var(--border); }
.sich-marke--gut {
  background: color-mix(in srgb, var(--sich-gut) 14%, transparent);
  color: var(--sich-gut); border-color: color-mix(in srgb, var(--sich-gut) 38%, transparent);
}
html.dark .sich-marke--hinweis,
html.dark .sich-marke--luecke { color: var(--sich-hinweis); }

/* ══ Seitenblatt (Detailansicht) ═══════════════════════════════════════════
   Auf dem Bildschirm ein ruhiges Blatt von rechts, auf dem Telefon ein fast
   volles Blatt von unten. Bewusst KEIN kleines Fenster mitten im Bild: der
   Inhalt ist lang (Erklaerung, Empfehlung, Aktionen, Technik, Belege). */
.sich-blatt-grund {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end;
  animation: sich-grund .18s ease-out;
}
@keyframes sich-grund { from { opacity: 0; } }
.sich-blatt {
  position: relative; display: flex; flex-direction: column;
  width: min(600px, 100%); height: 100%;
  background: var(--bg-modal-solid, #fff);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: sich-blatt-rein .2s cubic-bezier(.32,.72,0,1);
}
@keyframes sich-blatt-rein { from { transform: translateX(26px); opacity: .4; } }
.sich-blatt-kopf {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border-light, var(--border));
  background: var(--sich-glas);
  backdrop-filter: var(--glass-blur, blur(24px));
  -webkit-backdrop-filter: var(--glass-blur, blur(24px));
}
.sich-blatt-kopf-text { flex: 1 1 auto; min-width: 0; }
.sich-blatt-titel {
  margin: 8px 0 0; font-size: 20px; font-weight: 660; letter-spacing: -0.02em;
  line-height: 1.25;
}
.sich-blatt-zeit { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; }
.sich-blatt-zu {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--text-secondary); border-radius: 9px; flex: 0 0 auto;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
}
.sich-blatt-zu:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.sich-blatt-zu svg { width: 18px; height: 18px; }
.sich-blatt-inhalt {
  flex: 1 1 auto; overflow-y: auto; padding: 22px; display: flex;
  flex-direction: column; gap: 22px; -webkit-overflow-scrolling: touch;
}
.sich-blatt-tat {
  flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid var(--border-light, var(--border));
  background: var(--sich-glas);
  backdrop-filter: var(--glass-blur, blur(24px));
  -webkit-backdrop-filter: var(--glass-blur, blur(24px));
}

/* Immer dieselbe Gliederung im Blatt: Was ist passiert, warum meldet Projecta
   das, was sollten Sie tun. Wer das einmal gelesen hat, kennt jede Meldung. */
.sich-frage { display: flex; flex-direction: column; gap: 5px; }
.sich-frage-name {
  font-size: 12px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
}
.sich-frage-text { font-size: 14px; line-height: 1.6; color: var(--text); }
.sich-frage-text.sich-leise { color: var(--text-secondary); }

/* Aufklappbares fuer Technik und Belege. */
.sich-klapp {
  border: 1px solid var(--border); border-radius: var(--sich-radius-klein);
  background: var(--sich-karte); overflow: hidden;
}
.sich-klapp > summary {
  cursor: pointer; padding: 13px 16px; font-size: 13.5px; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 9px;
}
.sich-klapp > summary::-webkit-details-marker { display: none; }
.sich-klapp > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto;
  border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.sich-klapp[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.sich-klapp-inhalt { padding: 2px 16px 16px; }

/* Technische Angaben als Feldliste, nicht als Tabelle: auf dem Telefon bricht
   eine Tabelle entweder um oder laeuft aus dem Bild. */
.sich-technik { display: grid; gap: 9px; margin: 0; }
.sich-technik-zeile {
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 14px;
  font-size: 13px; align-items: start;
}
.sich-technik-zeile dt { color: var(--text-secondary); }
.sich-technik-zeile dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; word-break: break-word; }

/* ══ Dialog (Bestaetigung vor einer Handlung) ══════════════════════════════
   Jede Handlung sagt vorher, was sie bewirkt. Keine window.confirm-Zeile: die
   kann keinen zweiten Satz und kein Begruendungsfeld. */
.sich-dialog-grund {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: sich-grund .16s ease-out;
}
.sich-dialog {
  width: min(480px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-modal-solid, #fff); border-radius: 20px;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 26px 26px 20px;
  animation: sich-dialog-rein .18s cubic-bezier(.32,.72,0,1);
}
@keyframes sich-dialog-rein { from { transform: scale(.97); opacity: 0; } }
.sich-dialog-titel {
  margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3;
}
.sich-dialog-text {
  margin: 10px 0 0; font-size: 14px; color: var(--text-secondary); line-height: 1.6;
}
.sich-dialog-tat { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.sich-dialog-fehler {
  margin-top: 14px; font-size: 13px; color: var(--sich-kritisch);
}

/* ══ Bausteine ════════════════════════════════════════════════════════════ */
.sich-block {
  padding: 20px 22px; border-radius: var(--sich-radius);
  background: var(--sich-karte); border: 1px solid var(--border);
}
.sich-leer {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; max-width: 72ch;
}
.sich-fehler { font-size: 13.5px; color: var(--sich-kritisch); line-height: 1.55; }
.sich-fussnote {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; max-width: 78ch;
}
.sich-code {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-secondary); word-break: break-all;
}
.sich-knopfzeile { display: flex; gap: 10px; flex-wrap: wrap; }
.sich-textknopf {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--brand);
}
.sich-textknopf:hover { text-decoration: underline; }
.sich-zurueck { margin-bottom: 16px; }

/* Ein Kasten, der einen Zustand traegt, zeigt ihn auch. Wichtig fuer den Fall
   „nicht messbar": das darf nicht aussehen wie „nichts gefunden", sonst liest
   sich ein Ausfall der Erhebung als Entwarnung (Blindheit 01.09. bis
   03.09.2026, Merksatz „Melder-Ausfall muss sichtbar sein"). */
.sich-block[data-zustand] {
  border-color: color-mix(in srgb, var(--sich-farbe) 30%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sich-farbe) 6%, transparent), transparent 90px),
    var(--sich-karte);
}

/* ══ Verwaltungsansichten im Seitenblatt ══════════════════════════════════
   Angemeldete Personen, Netzwerkgeraete, Netzsperren. Zweitrangig: sie
   beantworten keine der drei Fragen, werden aber gebraucht, sobald ein
   Ereignis dorthin fuehrt. */
.sich-person {
  border: 1px solid var(--border); border-radius: var(--sich-radius-klein);
  padding: 14px 16px;
}
.sich-person + .sich-person { margin-top: 10px; }
.sich-person-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sich-person-name { font-size: 15px; font-weight: 620; }
.sich-person-zahl { font-size: 13px; color: var(--text-secondary); }
.sich-person-kopf .btn { margin-left: auto; }
.sich-anmeldung {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 0 0; margin-top: 12px;
  border-top: 1px solid var(--border-light, var(--border));
  font-size: 13px;
}
.sich-anmeldung-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sich-anmeldung-wo { font-weight: 550; }
.sich-anmeldung-meta { font-size: 12.5px; color: var(--text-secondary); }
.sich-anmeldung .btn { margin-left: auto; }

.sich-geraet {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 0; border-top: 1px solid var(--border-light, var(--border));
}
.sich-geraet:first-child { border-top: 0; padding-top: 0; }
.sich-geraet-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sich-geraet-name { font-size: 14px; font-weight: 600; }
.sich-geraet-meta { font-size: 12.5px; color: var(--text-secondary); }
.sich-geraet-felder { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; align-items: end; }
.sich-geraet-felder .btn { grid-column: 1 / -1; justify-self: start; }

.sich-sperre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 0; border-top: 1px solid var(--border-light, var(--border));
}
.sich-sperre:first-child { border-top: 0; padding-top: 0; }
.sich-sperre-text { flex: 1 1 240px; min-width: 0; }
.sich-sperre-titel { font-size: 13.5px; font-weight: 560; }
.sich-sperre-meta { font-size: 12.5px; color: var(--text-secondary); }
.sich-sperre .btn { margin-left: auto; }

/* ══ Entwicklung (Verlauf ueber zwoelf Wochen) ═════════════════════════════
   Nur verstaendliche Kategorien, keine Regelkuerzel und keine Rangliste nach
   Benutzernamen. Eine Farbe: die Balken zeigen eine Menge, keine Identitaet. */
.sich-spark { display: flex; align-items: center; gap: 16px; padding: 9px 0; }
.sich-spark + .sich-spark { border-top: 1px solid var(--border-light, var(--border)); }
.sich-spark-name { flex: 0 0 clamp(150px, 26%, 250px); font-size: 13.5px; min-width: 0; }
.sich-spark-balken { flex: 0 0 auto; }
.sich-spark-balken svg { display: block; }
.sich-bar { fill: var(--sich-balken); }
.sich-bar-null { fill: var(--border); }
.sich-spark-summe {
  flex: 0 0 auto; min-width: 48px; text-align: right; font-size: 13.5px;
  font-variant-numeric: tabular-nums; font-weight: 560;
}
.sich-spark-fuss {
  display: flex; gap: 16px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border-light, var(--border));
  font-size: 11.5px; color: var(--text-muted);
}
.sich-spark-fuss > span:first-child { flex: 0 0 clamp(150px, 26%, 250px); }

/* ══ Einstellungen ════════════════════════════════════════════════════════ */
.sich-feld { display: flex; flex-direction: column; max-width: 560px; }
.sich-feld > label, .sich-feld-name {
  font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px;
}
.sich-feld .form-input, .sich-feld .input { width: 100%; }
.sich-feld-hinweis {
  font-size: 12.5px; color: var(--text-secondary); margin-top: 7px; line-height: 1.5;
}
.sich-schalter {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 4px 0; max-width: 620px;
}
.sich-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.sich-schalter-spur {
  position: relative; flex: 0 0 auto; width: 51px; height: 31px; border-radius: 999px;
  background: var(--gray-300); transition: background .22s ease;
}
html.dark .sich-schalter-spur { background: var(--gray-200); }
.sich-schalter-spur::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.sich-schalter input:checked + .sich-schalter-spur { background: var(--sich-gut); }
.sich-schalter input:checked + .sich-schalter-spur::after { transform: translateX(20px); }
.sich-schalter input:focus-visible + .sich-schalter-spur { box-shadow: 0 0 0 3px var(--brand-ring); }
.sich-schalter-text { font-size: 14.5px; font-weight: 560; }
.sich-schalter-text small {
  display: block; font-size: 12.5px; font-weight: 400; color: var(--text-secondary);
  margin-top: 2px; line-height: 1.5;
}

.sich-bestaetigt {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 15px 0; border-top: 1px solid var(--border-light, var(--border));
}
.sich-bestaetigt:first-child { border-top: 0; padding-top: 0; }
.sich-bestaetigt-text { flex: 1 1 300px; min-width: 0; }
.sich-bestaetigt-titel { font-size: 14px; font-weight: 600; }
.sich-bestaetigt-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.sich-bestaetigt .btn { margin-left: auto; }

/* ══ Tabelle (nur noch in der Liste der abgerufenen Dokumente) ═════════════
   Ab 820 px eine Tabelle, darunter je Zeile eine Karte mit Beschriftungen.
   Waagerechtes Schieben waere einfacher zu bauen, schiebt auf dem Telefon aber
   genau die Angabe aus dem Bild, die man braucht. */
.sich-tabelle { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sich-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.sich-tab th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 0 14px 9px 0; white-space: nowrap; border-bottom: 1px solid var(--border);
}
table.sich-tab td {
  padding: 11px 14px 11px 0; border-top: 1px solid var(--border-light, var(--border));
  vertical-align: middle;
}
table.sich-tab tr > *:last-child { padding-right: 0; }
table.sich-tab .sich-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sich-tab .sich-eng { white-space: nowrap; }
.sich-tab-zweit { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.sich-filterzeile {
  display: grid; gap: 12px; align-items: end; margin-bottom: 18px;
  padding: 16px 18px; border-radius: var(--sich-radius);
  background: var(--sich-karte); border: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sich-filterzeile .sich-feld { margin: 0; max-width: none; }
.sich-filterzeile-tat { display: flex; align-items: flex-end; }
.sich-filterzeile-tat .btn { width: 100%; justify-content: center; }

/* ── Internetausfälle: Tagesband, Monatsbilanz, Protokoll ──────────────────
   Das Band ist die einzige laute Stelle dieses Blatts, alles andere bleibt
   ruhig. Eine Leitung ist eine durchgehende Linie mit Lücken: je Tag ein
   Streifen von Mitternacht bis Mitternacht, der Ausfall als Marke an seiner
   Uhrzeit. Ungemessene Zeit ist schraffiert und NICHT grün — sonst sähe ein
   Tag, an dem niemand gemessen hat, aus wie ein stiller Tag.
   Die Rasterlinien bei 6, 12 und 18 Uhr stecken im Streifen selbst, damit man
   eine Uhrzeit ablesen kann, ohne an der Skala zu kleben. */
.sich-wan-satz {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--text);
}
.sich-wan, .sich-wan-block {
  background: var(--sich-karte); border: 1px solid var(--border);
  border-radius: var(--sich-radius-klein); padding: 14px 16px 12px;
}
.sich-wan-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.sich-wan-titel {
  margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--text);
  letter-spacing: .01em;
}
.sich-wan-kopf .sich-wan-titel { margin: 0; }
.sich-wan-legende {
  margin: 0; display: flex; gap: 14px; font-size: 11.5px; color: var(--text-secondary);
}
.sich-wan-legende span { display: inline-flex; align-items: center; gap: 5px; }
.sich-wan-probe { width: 10px; height: 10px; border-radius: 2px; }
.sich-wan-probe--weg { background: var(--sich-kritisch); }
.sich-wan-probe--luecke {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--sich-unbekannt) 55%, transparent) 0 2px,
    transparent 2px 4px);
  border: 1px solid color-mix(in srgb, var(--sich-unbekannt) 45%, transparent);
}
.sich-wan-tage { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sich-wan-tag {
  display: grid; grid-template-columns: 70px 1fr 56px; align-items: center;
  gap: 10px; padding: 2px 0;
}
.sich-wan-datum {
  font-size: 11.5px; color: var(--text-secondary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sich-wan-datum b { font-weight: 600; color: var(--text-secondary); }
.sich-wan-tag--weg .sich-wan-datum,
.sich-wan-tag--weg .sich-wan-datum b { color: var(--text); }
.sich-wan-streifen {
  position: relative; display: block; height: 12px; border-radius: 3px;
  background:
    linear-gradient(to right, transparent calc(25% - 1px),
      color-mix(in srgb, var(--text) 18%, transparent) calc(25% - 1px) 25%,
      transparent 25%),
    linear-gradient(to right, transparent calc(50% - 1px),
      color-mix(in srgb, var(--text) 18%, transparent) calc(50% - 1px) 50%,
      transparent 50%),
    linear-gradient(to right, transparent calc(75% - 1px),
      color-mix(in srgb, var(--text) 18%, transparent) calc(75% - 1px) 75%,
      transparent 75%),
    color-mix(in srgb, var(--sich-gut) 22%, transparent);
  overflow: hidden;
}
.sich-wan-streifen > i { position: absolute; top: 0; bottom: 0; display: block; }
.sich-wan-luecke {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--sich-unbekannt) 42%, transparent) 0 2px,
    transparent 2px 5px);
}
.sich-wan-marke {
  background: var(--sich-kritisch); border-radius: 2px; min-width: 3px;
}
.sich-wan-tagwert {
  font-family: var(--font-mono); font-size: 11px; text-align: right;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.sich-wan-tag--weg .sich-wan-tagwert { color: var(--sich-kritisch); }
.sich-wan-skala {
  display: flex; justify-content: space-between; margin: 7px 0 0 80px;
  padding-right: 66px; font-size: 10.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Monatsbilanz: der Prozentwert trägt die Zeile, die Erklärung steht klein
   darunter. Tabellenziffern, damit die Werte untereinander fluchten. */
.sich-wan-monate { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sich-wan-monat {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 14px; padding: 9px 0; border-top: 1px solid var(--border);
}
.sich-wan-monat:first-child { border-top: 0; padding-top: 2px; }
.sich-wan-monat-name { font-size: 14px; color: var(--text); }
.sich-wan-monat-wert {
  font-size: 17px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sich-wan-monat-meta {
  grid-column: 1 / -1; font-size: 12px; color: var(--text-secondary);
}

/* Protokoll: eine Zeile je Ausfall, das Datum nur beim ersten des Tages. So
   liest sich die Uhrzeit als Spalte und nicht als Fließtext. */
.sich-wan-tabelle { width: 100%; border-collapse: collapse; }
.sich-wan-tabelle th, .sich-wan-tabelle td {
  text-align: left; padding: 7px 10px 7px 0; vertical-align: baseline;
}
.sich-wan-tabelle thead th {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.sich-wan-tabelle tbody th {
  font-weight: 500; font-size: 12.5px; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sich-wan-tabelle tbody td {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sich-wan-tabelle tbody tr + tr th, .sich-wan-tabelle tbody tr + tr td {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.sich-wan-tabelle .sich-wan-dauer { text-align: right; padding-right: 0; color: var(--text); }

@media (max-width: 820px) {
  .sich-tabelle { overflow-x: visible; }
  table.sich-tab, table.sich-tab tbody { display: block; }
  table.sich-tab thead { display: none; }
  table.sich-tab tr {
    display: grid; grid-template-columns: 1fr; gap: 2px;
    padding: 14px 0; border-top: 1px solid var(--border);
  }
  table.sich-tab tr:first-child { border-top: 0; }
  table.sich-tab td {
    display: grid; grid-template-columns: minmax(88px, 32%) 1fr; gap: 12px;
    padding: 3px 0; border: 0;
  }
  table.sich-tab td::before { content: attr(data-spalte); color: var(--text-muted); font-size: 12.5px; }
  table.sich-tab td > * { grid-column: 2; }
  table.sich-tab td:empty { display: none; }
  table.sich-tab .sich-zahl { text-align: left; }
}

/* ══ Beruehrung, Tastatur, Kontrast ═══════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .sich .btn { min-height: 44px; }
  .sich .btn-sm { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .sich .form-input, .sich .input { min-height: 44px; font-size: 16px; }  /* 16 px verhindert das Zoomen in Safari */
  .sich-nav-knopf, .sich-pille-knopf { min-height: 44px; }
  .sich-zeile, .sich-ereignis, .sich-bereich { min-height: 44px; }
}
.sich :focus-visible,
.sich-blatt-grund :focus-visible,
.sich-dialog-grund :focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px;
}

/* ══ Bildschirmgroessen ═══════════════════════════════════════════════════
   Tisch: drei Spalten Schutzbereiche. iPad: zwei. Telefon: eine.
   Ereignisse und Aufgaben bleiben immer volle Breite, ihr Text ist laenger. */
@media (max-width: 1099px) {
  .sich-bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sich { padding-bottom: 64px; }
  .sich-bereiche { grid-template-columns: 1fr; }
  .sich-zustand { padding: 22px; gap: 16px; }
  .sich-zustand-tat { margin-left: 0; width: 100%; }
  .sich-zustand-tat .btn { width: 100%; justify-content: center; }
  .sich-aufgabe { padding: 17px 18px; gap: 14px; }
  .sich-aufgabe-tat { width: 100%; }
  .sich-aufgabe-tat .btn { width: 100%; justify-content: center; }
  .sich-info .btn { margin-left: 0; width: 100%; justify-content: center; }
  .sich-ereignis { padding: 15px 16px; gap: 13px; }
  .sich-ereignis-pfeil { display: none; }
  .sich-nav { width: 100%; }
  .sich-nav-knopf { flex: 1 1 0; justify-content: center; padding: 9px 12px; }
  .sich-geraet-felder { grid-template-columns: 1fr; }
  .sich-abschnitt { gap: 26px; }
  /* Das Seitenblatt wird auf dem Telefon zum fast vollen Blatt von unten. */
  .sich-blatt-grund { align-items: flex-end; }
  .sich-blatt {
    width: 100%; height: 94vh; border-left: 0;
    border-radius: 20px 20px 0 0;
    animation-name: sich-blatt-hoch;
  }
  @keyframes sich-blatt-hoch { from { transform: translateY(30px); opacity: .5; } }
  .sich-blatt-inhalt { padding: 18px; gap: 18px; }
  .sich-blatt-kopf { padding: 16px 18px 14px; }
  .sich-blatt-tat { padding: 14px 18px; }
  .sich-blatt-tat .btn { flex: 1 1 100%; justify-content: center; }
  .sich-dialog { padding: 22px 20px 18px; }
  .sich-dialog-tat .btn { flex: 1 1 100%; justify-content: center; }
  .sich-spark { flex-wrap: wrap; gap: 2px 12px; padding: 12px 0; }
  .sich-spark-name { flex: 1 1 auto; order: 1; }
  .sich-spark-summe { order: 2; }
  .sich-spark-balken { order: 3; flex: 1 0 100%; overflow-x: auto; }
  .sich-spark-fuss > span:first-child { flex: 0 0 auto; }
  .sich-wan, .sich-wan-block { padding: 12px 13px 10px; }
  .sich-wan-tag { grid-template-columns: 58px 1fr; gap: 8px; }
  /* Die Dauer je Tag steht auf dem Telefon im Protokoll darunter; im Band würde
     sie ein Drittel der Breite fressen, die der Streifen braucht. */
  .sich-wan-tagwert { display: none; }
  .sich-wan-skala { margin-left: 66px; padding-right: 0; }
}