/* SalesMap – Oberfläche
   ---------------------------------------------------------------------------
   Der Arbeitsbereich ist EINSPALTIG. In 3088_ics, von dem die Bedienung stammt,
   sind es zwei Spalten (Haushalte links, Detail rechts); hier liegt unter der
   Nadel direkt der Ausgang, es gibt also nichts auszuwählen. Nur die Verpackung
   wechselt mit der Geräteausrichtung:

   • Querformat (>= 900px): ein schmales Panel am rechten Kartenrand, die Karte
                            läuft daneben durch.
   • Hochformat (< 900px):  dasselbe Panel als Bottom-Sheet mit Griff
                            (halb / ganz / zu).

   Gestaltungsprinzip: ruhige Flächen, Haarlinien statt Rahmen, Bedeutung über
   Icon-Chips statt über Farbflächen. Jede Kachel trägt ein Icon im abgerundeten
   Quadrat – im Ruhezustand grau, aktiv in der Farbe der Sache. Primäre
   Touchziele bleiben bei mindestens 44px.

   Die eine Farbregel, die überall gilt: die sieben Ausgangsfarben sind dieselben
   wie in 3060_d2d und 3088_ics, und sie stehen im Skript (OUTCOME_TYPES), nicht
   hier. Das CSS bekommt sie je Element als --c gereicht.
*/

:root {
  --ink: #0f172a;
  --ink-2: #475569;
  --muted: #94a3b8;
  --line: #e6ebf2;
  --line-soft: #f1f5f9;
  --bg: #f6f8fb;
  --card: #ffffff;
  --accent: #2563eb;

  --topbar-h: 46px;
  --r-tile: 12px;
  --r-field: 10px;
  --shadow-tile: 0 1px 1.5px rgba(15, 23, 42, .03);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;             /* kein Seiten-Scroll – nur Panels scrollen */
  overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { display: flex; flex-direction: column; }

button, input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }

/* Ein `hidden`-Attribut muss stärker sein als jede display-Regel einer Klasse.
   Der Browser bringt dafür nur `[hidden] { display: none }` mit – und das
   verliert gegen jedes `.klasse { display: flex }`. Einmal zentral geklärt. */
[hidden] { display: none !important; }

/* ===========================================================================
   Kopfzeile
   =========================================================================== */

.topbar {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) 12px 0;
  display: flex; align-items: center; gap: 14px;
  background: #0b1220; color: #f8fafc;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07);
  z-index: 30;
}

.brand {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; letter-spacing: .08em; font-size: 12.5px;
  color: #7dd3fc; flex: 0 0 auto;
}

/* Das angemeldete Konto – als Schild neben der Marke. Auf einer GEMEINSAMEN
   Karte ist das keine Zierde: die eigenen Nadeln und die der anderen
   unterscheiden sich nur in der Deckkraft, und eine Nadel im falschen Namen
   fällt sonst erst Wochen später auf. Der Punkt davor trägt die Kontofarbe,
   dieselbe, die am Ring der eigenen Nadeln bei den anderen steht. */
.brand-konto {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: rgba(125, 211, 252, .14);
  color: #bae6fd; font-weight: 600; font-size: 11px; letter-spacing: .02em;
  text-transform: lowercase;
}
.brand-konto::before {
  content: ''; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, #38bdf8);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25);
}

.tabs { display: flex; gap: 2px; background: rgba(255, 255, 255, .07); padding: 3px; border-radius: 10px; }
.tab {
  appearance: none; border: 0; background: transparent; position: relative;
  color: #b5c2d3; font-size: 13px; font-weight: 600;
  padding: 6px 16px; border-radius: 7px; cursor: pointer; min-height: 30px;
  transition: background .15s, color .15s;
}
.tab.active { background: #f8fafc; color: #0b1220; }

/* Dringlichkeits-Zähler am Followup-Tab. Sitzt wie eine Benachrichtigung oben
   rechts an der Beschriftung; die Farbe kommt aus dem Skript (--fu-badge) und
   sagt, wie nah der nächste Termin ist. */
.tab-badge {
  position: absolute; top: -1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--fu-badge, #dc2626); color: var(--fu-badge-ink, #fff);
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
  --fu-ring: #0b1220;                    /* Rand in Kopfzeilenfarbe, damit er absetzt */
  box-shadow: 0 0 0 2px var(--fu-ring);
}
.tab.active .tab-badge { --fu-ring: #f8fafc; }
/* Platz für den Zähler, damit er nicht auf der Beschriftung sitzt – aber nur,
   solange er wirklich da ist. */
.tab:has(.tab-badge:not([hidden])) { padding-right: 26px; }

/* Fünf Minuten vor dem Termin (oder überfällig) schlägt der Zähler Alarm: zwei
   kurze Schläge, dann Ruhe. Ein Herzschlag fällt im Augenwinkel stärker auf als
   ein gleichmäßiges Pulsieren und nutzt sich langsamer ab. */
.tab-badge--alarm { animation: fu-alarm 1.4s ease-in-out infinite; }
@keyframes fu-alarm {
  0%   { transform: scale(1);    box-shadow: 0 0 0 2px var(--fu-ring), 0 0 0 0 rgba(220, 38, 38, 0); }
  11%  { transform: scale(1.35); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 16px 6px rgba(220, 38, 38, .95); }
  22%  { transform: scale(1.06); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 9px 3px rgba(220, 38, 38, .5); }
  33%  { transform: scale(1.32); box-shadow: 0 0 0 2px var(--fu-ring), 0 0 16px 6px rgba(220, 38, 38, .95); }
  52%  { transform: scale(1);    box-shadow: 0 0 0 2px var(--fu-ring), 0 0 7px 2px rgba(220, 38, 38, .4); }
  100% { transform: scale(1);    box-shadow: 0 0 0 2px var(--fu-ring), 0 0 0 0 rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-badge--alarm { animation: none; box-shadow: 0 0 0 2px var(--fu-ring), 0 0 12px 3px rgba(220, 38, 38, .85); }
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.stat-chip { font-size: 12px; color: #7d8da3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-chip b { color: #e8eef6; font-weight: 600; }
/* Ein Abschluss darf leuchten – in der Farbe seines Ausgangs, aufgehellt für
   den dunklen Grund. Null bleibt weiß: grün heißt „es gibt einen". */
.stat-chip b.sc-abschl.an { color: #4ade80; }
/* „+1": die unbestätigten, gelb wie ihre Nadel, dicht an der grünen Zahl. */
.stat-chip b.sc-unbest { color: #facc15; margin-left: 1px; }

/* Der Live-Punkt: steht die Leitung zu den anderen Konten? Ohne sie sieht die
   Karte genauso aus, nur altert sie still – das hier ist die einzige Stelle,
   an der ein Abriss auffällt. */
.live {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: 11.5px; font-weight: 600; color: #7d8da3;
  font-variant-numeric: tabular-nums;
}
.live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #64748b; flex: 0 0 auto;
  transition: background .2s, box-shadow .2s;
}
.live.on { color: #bbf7d0; }
.live.on i { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: live-puls 2.4s ease-out infinite; }
@keyframes live-puls {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .live.on i { animation: none; } }

/* Änderungen aus dem Funkloch, die noch hochgeladen werden müssen. Bernstein:
   nichts ist verloren, aber es ist auch noch nicht bei den anderen. */
.wartet {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(245, 158, 11, .18); color: #fcd34d;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wartet[hidden] { display: none; }

/* ---- Kopfzeile auf dem Telefon: zwei Zeilen ------------------------------
   Sechs Tabs plus Marke, Live-Punkt und Tageszahl passen nicht in eine Zeile
   von 390px. Gelöst ohne Änderung am HTML: die Leiste darf umbrechen, die Tabs
   bekommen die volle Breite der zweiten Zeile und scrollen darin waagerecht.
   Weil sie zusammen breiter sind als der Bildschirm, steht an einer Kante stets
   ein angeschnittener Tab – das ist der Hinweis, dass es weitergeht. Dazu
   scrollt main.js den aktiven Tab in die Mitte.

   Die Grenze liegt bei 1140px, nicht bei der Telefonbreite: einzeilig brauchen
   Marke, neun Tabs (seit 11.10.2026 mit „Potential") und Tagesstand gut 1200px.
   Darunter lief die Leiste auf Tablets und schmalen Fenstern rechts aus dem
   Bild – samt Tageszahl. */
@media (max-width: 1240px) {
  .topbar {
    height: auto;
    min-height: calc(var(--topbar-h) + var(--safe-top));
    flex-wrap: wrap;
    gap: 0 10px;
    padding: var(--safe-top) 10px 0;
  }
  .tabs {
    order: 2;
    flex: 0 0 100%;
    /* Bis an beide Bildschirmkanten, damit der angeschnittene Tab nicht in
       einem Innenabstand endet und wie ein Fehler aussieht. */
    margin: 3px -10px 0;
    width: calc(100% + 20px);
    border-radius: 0;
    background: transparent;
    /* Der Innenabstand oben/unten hält Platz für den Followup-Zähler und seinen
       Alarmring: overflow-x macht auch die Y-Achse beschneidend. */
    padding: 6px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    min-height: 40px;                      /* Daumenziel statt 30px */
    padding: 9px 14px;
    font-size: 13.5px;
  }
  .tab-badge { top: 2px; right: 3px; }
  .brand { padding: 3px 0; }
}
/* Schmale Telefone: die Tageszahl bleibt immer stehen – sie ist unterwegs die
   meistgelesene Zahl der App. Platz machen der Reihe nach der Schriftzug (das
   Symbol bleibt) und zuletzt das Wort „Heute". */
@media (max-width: 400px) {
  .brand-name { display: none; }
  .topbar-right { gap: 8px; }
}
@media (max-width: 340px) {
  .sc-heute { display: none; }
}

/* ===========================================================================
   Ansichten
   =========================================================================== */

.views { flex: 1 1 auto; position: relative; min-height: 0; }
.view { display: none; position: absolute; inset: 0; }
.view.active { display: block; }

/* Die Karte ist die EINZIGE Ansicht, die nie auf `display:none` fällt.

   Sie zeichnet auf einer WebGL-Fläche (renderingType VECTOR). Ein Kasten mit
   `display:none` hat 0×0 Pixel, und eine WebGL-Fläche ohne Maße ist für den
   Browser eine, die niemand mehr braucht: er kassiert ihren Zeichenkontext ein
   – auf dem iPhone schon nach Sekunden, wenn das Gerät knapp an Speicher ist.
   Zurück auf dem Kartentab stand dann das letzte Bild da und ließ sich nicht
   mehr schieben.

   Also bleibt sie im Layout stehen und wird nur unsichtbar geschaltet:
   `visibility` nimmt sie aus dem Bild UND aus der Trefferprüfung, lässt ihr aber
   ihre Größe – und damit den Zeichenkontext. Der zweite Halt für denselben Fall
   steht in main.js (karteHeilen). */
#view-map { display: block; }
/* Auch alles DARIN, nicht nur die Hülle: `visibility` vererbt sich zwar, ein
   Kind darf sich mit `visibility: visible` aber wieder hervorholen. */
#view-map:not(.active),
#view-map:not(.active) * { visibility: hidden; }

.map-area { position: absolute; inset: 0; }
#map { position: absolute; inset: 0; background: #dde4ed; }

.list-wrap {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 12px calc(24px + var(--safe-bottom));
}

/* Kartenausfall: Google Maps kommt über das Netz, und unterwegs kommt es
   manchmal nicht. Statt einer grauen Fläche, über die man rätselt, steht dann
   hier, was los ist und was trotzdem geht. */
.map-fehler {
  position: absolute; z-index: 18;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(320px, calc(100% - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 20px 18px; border-radius: 16px; text-align: center;
  background: #fff; color: var(--ink-2);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
}
.map-fehler strong { font-size: 15px; font-weight: 650; color: var(--ink); }
.map-fehler span { font-size: 13px; line-height: 1.5; }
.map-fehler-btn {
  appearance: none; border: 0; cursor: pointer; margin-top: 3px;
  padding: 9px 16px; border-radius: 11px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
}

/* ===========================================================================
   Potential: Gebiet einkreisen (Tab „Potential", liegt über der Karte)
   =========================================================================== */

.imp-pruefung { display: block; margin: 2px 0 6px; font-size: 11.5px; color: var(--muted); }

.pot-panel {
  position: absolute; z-index: 20; top: 10px; left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100% - 20px));
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 12px 13px; border-radius: 16px; background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
}
.pot-panel[hidden] { display: none; }
.pot-kopf strong { font-size: 15px; font-weight: 700; }
.pot-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pot-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.pot-text b { color: var(--ink); }
.pot-grau { color: var(--muted); }
.pot-fehler { margin: 0; font-size: 12.5px; color: #dc2626; }
.pot-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.pot-knoepfe .btn { display: inline-flex; align-items: center; gap: 6px; }
.pot-name {
  width: 100%; box-sizing: border-box; padding: 9px 11px; min-height: 40px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: #fff;
  font-size: 16px; color: var(--ink);   /* < 16px zoomt iOS beim Fokus */
}
.pot-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
/* Fängt den einen Strich: die Karte darunter bewegt sich währenddessen nicht. */
.pot-flaeche {
  position: absolute; inset: 0; z-index: 19; cursor: crosshair;
  touch-action: none; background: rgba(37, 99, 235, .04);
}
.pot-flaeche[hidden] { display: none; }
.pot-flaeche svg { display: block; pointer-events: none; }
.pot-flaeche path {
  fill: rgba(37, 99, 235, .1); stroke: #2563eb; stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round;
}

/* ===========================================================================
   Kartensteuerung
   ===========================================================================
   Liegt mittig unten über der Karte: Joystick (Zoom, Drehen, Standort) und
   daneben der Schalter für die fremden Nadeln. Mittig statt am Rand, damit sie
   im Hoch- wie im Querformat mit beiden Daumen erreichbar ist. Das Blatt legt
   sich beim Aufziehen darüber – ausweichen muss sie ihm also nicht. */

.map-controls {
  position: absolute; z-index: 19;
  left: 50%; bottom: calc(var(--safe-bottom) + 16px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  transition: left .2s ease, bottom .26s cubic-bezier(.32, .72, 0, 1), opacity .2s;
}

.map-ctrl {
  appearance: none; border: 1px solid rgba(15, 23, 42, .06); cursor: pointer;
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  background: #fff; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .16), 0 1px 3px rgba(15, 23, 42, .08);
  transition: transform .12s ease, color .15s, background .15s;
}
.map-ctrl:active { transform: scale(.93); }
.map-ctrl.active { color: var(--accent); }

/* Der Schalter für die fremden Nadeln hängt NEBEN der Reihe statt in ihr: sonst
   schöbe er den Joystick um seine halbe Breite aus der Mitte, und der muss
   mittig unter dem Daumen liegen. Ausgeschaltet ist er durchgestrichen – ein
   bloß blasser Knopf sähe aus wie einer, der gerade nicht geht. */
#ctrlFremde { position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%); }
#ctrlFremde:active { transform: translateY(-50%) scale(.93); }
#ctrlFremde.aus { color: #b4bfcd; background: #f1f5f9; }
#ctrlFremde.aus::after {
  content: ''; position: absolute; left: 9px; right: 9px; top: 50%;
  height: 2px; border-radius: 2px; background: #94a3b8;
  transform: rotate(-38deg);
}

/* Joystick: runder Hebel mit zwei Achsen, die Auslenkung bestimmt das Tempo.
   Hoch/runter zoomt, links/rechts dreht die Karte, ein Druck in die Mitte holt
   den Standort. Er ist größer als die runden Knöpfe und ragt aus der Reihe nach
   oben wie nach unten heraus – die vier Hinweise sitzen an seinen Rändern,
   damit man auch ohne Erklärung sieht, wohin sich der Knopf ziehen lässt. */
.map-ctrl.joystick {
  width: 104px; height: 104px; border-radius: 50%;
  position: relative; padding: 0;
  cursor: grab; touch-action: none;
}
.map-ctrl.joystick:active { transform: none; }   /* nicht das ganze Pad stauchen */
.map-ctrl.joystick.dragging { border-color: rgba(37, 99, 235, .35); cursor: grabbing; }
.joy-hint {
  position: absolute; width: 15px; height: 15px; color: #b3bfcf;
  pointer-events: none; user-select: none; z-index: 1;
}
.joy-up    { top: 7px;    left: 50%; transform: translateX(-50%); }
.joy-down  { bottom: 7px; left: 50%; transform: translateX(-50%); }
/* Beide Dreh-Pfeile sind dasselbe Bild; der linke wird gespiegelt. */
.joy-left  { left: 8px;   top: 50%;  transform: translateY(-50%) scaleX(-1); }
.joy-right { right: 8px;  top: 50%;  transform: translateY(-50%); }
.joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 7px rgba(15, 23, 42, .3);
  transform: translate(-50%, -50%);
  transition: transform .14s cubic-bezier(.2, .8, .3, 1);
  display: flex; align-items: center; justify-content: center;
}
/* Das Fadenkreuz im Knopf. Es ersetzt einen eigenen Standort-Knopf: nur daran
   ist zu sehen, dass ein Druck in die Mitte den Standort holt. */
.joy-me {
  width: 20px; height: 20px; color: #fff; opacity: .58;
  pointer-events: none; transition: opacity .18s ease;
}
.map-ctrl.joystick.active .joy-me { opacity: 1; }
/* Während die Ortung läuft, pulst das Fadenkreuz. Das ist die Antwort auf den
   Tipp: ein Fix kann draußen Sekunden dauern, und ohne sichtbares „ich suche"
   hält man den Knopf für kaputt und drückt weiter. */
@keyframes joy-sucht { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.map-ctrl.joystick.sucht .joy-me { animation: joy-sucht 1s ease-in-out infinite; }
.map-ctrl.joystick.dragging .joy-knob {
  transition: none;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .4), 0 0 0 5px rgba(37, 99, 235, .22);
}
@keyframes joy-tap { from { box-shadow: 0 2px 7px rgba(15, 23, 42, .3), 0 0 0 0 rgba(37, 99, 235, .35); }
                     to   { box-shadow: 0 2px 7px rgba(15, 23, 42, .3), 0 0 0 16px rgba(37, 99, 235, 0); } }
.joy-knob.tapped { animation: joy-tap .45s ease-out; }

/* ---- Eigener Standort ----
   Blauer Punkt, bewusst rund und ohne Spitze: er ist keine Nadel, sondern zeigt,
   wo man selbst steht. Nadeln hängen mit der Unterkante am Ort – der Punkt wird
   um seine halbe Höhe nach unten geschoben, damit seine MITTE auf dem Standort
   sitzt. */
.me-dot {
  position: relative;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .45);
  transform: translateY(50%);
  pointer-events: none;
}
.me-dot::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; background: rgba(37, 99, 235, .35);
  animation: me-pulse 2s ease-out infinite;
}
@keyframes me-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .me-dot::after { animation: none; opacity: 0; } }

/* ---- Die Mannschaft auf der Karte ----
   Ein Kreis mit Initialen in der Kontofarbe, darunter eine kurze Spitze: die
   Spitze sitzt auf dem Standort, wie bei einer Nadel. Bewusst KEINE Nadelform –
   eine Nadel ist ein Haus, das hier ist ein Mensch. Der Name steht rechts
   daneben, damit man nicht erst tippen muss, um zu wissen, wer das ist. */
.kollege {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding-bottom: 7px; cursor: pointer;
}
.kollege::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top: 8px solid var(--c); border-bottom: 0;
}
.kollege-kreis {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, .45);
}
.kollege-name {
  position: absolute; left: calc(50% + 21px); top: 8px;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}
/* Live: ein Ring läuft nach außen – so fällt ein Kollege auf, der sich gerade
   bewegt, und unterscheidet sich vom Punkt, an dem vor einer halben Stunde
   jemand stand. */
.kollege.live .kollege-kreis::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--c); animation: kollege-puls 2s ease-out infinite;
}
@keyframes kollege-puls { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.kollege.offline .kollege-kreis::after { animation: none; opacity: 0; }
/* Älter als drei Minuten: blass – er WAR hier. */
.kollege.alt { opacity: .55; }
.kollege.alt .kollege-kreis { filter: saturate(.55); }
/* Aus der Mannschaft angesprungen: einmal kurz hüpfen, damit man ihn findet. */
.kollege.gesucht { animation: kollege-gesucht .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kollege-gesucht { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.25); }
                             100% { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .kollege.live .kollege-kreis::after, .kollege.gesucht { animation: none; }
}

/* Kopfzeile: der eigene Standort kommt bei den anderen an. */
.live-ort { color: #86efac; margin-left: 1px; }
.live.teilt { color: #bbf7d0; }

/* ===========================================================================
   Nadeln
   ===========================================================================
   Tropfenform, mit der Spitze am Ort. Die Füllung ist die Farbe des Ausgangs –
   dieselbe wie auf den Ausgangskacheln und in jeder Liste, damit sich eine
   Nadel ohne Umrechnung lesen lässt. */

.pin {
  position: relative;
  width: 32px; height: 32px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--pin-color, #64748b);
  border: 2.5px solid #fff;
  box-shadow: 0 3px 9px rgba(15, 23, 42, .42);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* Offene Nadel: weiß gefüllt. Weil der Rand aller Nadeln ebenfalls weiß ist,
   bekäme sie sonst gar keine Kontur – der dunkle Ring übernimmt das. */
.pin.offen {
  box-shadow: 0 0 0 1.5px rgba(15, 23, 42, .55), 0 3px 9px rgba(15, 23, 42, .42);
}

/* ---- Die Nadeln der anderen ----
   Halbe Deckkraft, und darum der Ring in der Farbe ihres Kontos. Die Deckkraft
   sagt „nicht meine" – sie sagt aber nicht, WESSEN, und bei zwei Leuten in
   derselben Straße ist genau das die Frage. Ein Name passt auf 32px nicht, eine
   Farbe schon. Dieselbe Farbe trägt das Konto in der Mannschaftsliste, in der
   Übersicht und am eigenen Schild in der Kopfzeile. */
.pin.fremd {
  opacity: .5;
  box-shadow: 0 0 0 2.5px var(--pin-owner, #64748b), 0 3px 9px rgba(15, 23, 42, .42);
}
.pin.fremd.offen {
  box-shadow: 0 0 0 1.5px rgba(15, 23, 42, .45), 0 0 0 4px var(--pin-owner, #64748b),
              0 3px 9px rgba(15, 23, 42, .42);
}
/* Eine fremde Nadel, die GERADE über die Leitung hereingekommen ist, blitzt
   einmal auf. Ohne das erscheint sie lautlos, und man hält sie beim nächsten
   Blick für eine, die schon immer da war. */
.pin.neu { animation: pin-neu 1.6s cubic-bezier(.22, 1, .36, 1); z-index: 9; }
@keyframes pin-neu {
  0%   { opacity: 0;  transform: rotate(-45deg) scale(.3); }
  35%  { opacity: 1;  transform: rotate(-45deg) scale(1.28); }
  55%  { opacity: 1;  transform: rotate(-45deg) scale(1); }
  100% { opacity: .5; transform: rotate(-45deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .pin.neu { animation: none; } }

/* Die Zahl steht auf der Farbe des Ausgangs – die reicht von hellem
   Followup-Gelb bis zum fast schwarzen „Übersprungen". Welche Schriftfarbe
   darauf lesbar ist, rechnet pinInk() je Nadel aus (--pin-ink). */
.pin span {
  transform: rotate(45deg);
  color: var(--pin-ink, var(--ink)); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.pin.selected {
  width: 40px; height: 40px; z-index: 10;
  opacity: 1;                                  /* auch eine fremde steht offen voll da */
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .45), 0 5px 14px rgba(15, 23, 42, .45);
}
.pin.selected span { font-size: 14px; }
/* Am Finger: gestrichelter Ring und ein Hauch größer. Der Unterschied muss aus
   dem Augenwinkel erkennbar sein – man schaut beim Ziehen auf die Karte, nicht
   auf den Knopf, den man gerade gedrückt hat. */
.pin.ziehbar { cursor: grab; outline: 2.5px dashed var(--accent); outline-offset: 3px; }
.pin.ziehbar:active { cursor: grabbing; }
/* Während ein Haus am Finger hängt, tritt der Rest der Karte zurück – sonst
   greift man im Gedränge die falsche Nadel. */
body.move-mode .pin:not(.ziehbar), body.move-mode .cluster { opacity: .35; }

/* Die Blase hängt wie jede Nadel mit ihrer Unterkante am Ort – die halbe Höhe
   zurück, damit ihre MITTE auf der Lage sitzt. Ohne das säße sie um ihren halben
   Durchmesser darüber, und der ist je nach Größe verschieden. */
.cluster {
  --fill: #cbd5e1;
  transform: translateY(50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(15, 23, 42, .42);
  color: var(--ink); font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
/* Eine Blase gehört genau EINEM Konto – gebündelt wird je Konto, nie gemischt
   (siehe applyClustering in main.js). Ist es nicht meines, tritt sie zurück wie
   eine fremde Nadel: dieselben 50 %, und derselbe Ring in der Farbe ihres
   Kontos, damit man auch herausgezoomt sieht, wessen Gegend das ist. */
.cluster.fremd {
  opacity: .5;
  box-shadow: 0 0 0 2.5px var(--blase-owner, #fff), 0 3px 10px rgba(15, 23, 42, .42);
}

/* ===========================================================================
   Das Ausgangs-Blatt
   ===========================================================================
   Das Blatt, das ein Kartentipp aufzieht: oben, wonach gefragt wird, in der
   Mitte die sieben Ausgänge als Kacheln, unten die Wege aus dem Blatt heraus
   (verschieben, löschen, abbrechen).

   Im Hochformat kommt es von unten und deckt gut die halbe Höhe ab – der
   Daumen erreicht jede Kachel, ohne dass die Hand umgreift. Am Schreibtisch
   steht dasselbe Blatt als Kärtchen in der Mitte.

   Es hängt am <body>, nicht in der Kartenansicht: so deckt es auch die
   Kopfzeile ab, und beim Schließen verschwindet es spurlos. */

.blatt {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: blatt-grund .18s ease;
}
@keyframes blatt-grund { from { opacity: 0; } to { opacity: 1; } }

.blatt-box {
  width: min(460px, 100%);
  max-height: 88%;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  padding: 0 14px calc(14px + var(--safe-bottom));
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .3);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  animation: blatt-auf .24s cubic-bezier(.32, .72, 0, 1);
}
@keyframes blatt-auf { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Beim Schließen gleitet es hinaus, statt schlagartig zu verschwinden – ein
   Abbruch soll nicht aussehen wie ein Fehler. */
.blatt.zu { animation: blatt-grund .18s ease reverse forwards; pointer-events: none; }
.blatt.zu .blatt-box { animation: blatt-auf .18s cubic-bezier(.32, .72, 0, 1) reverse forwards; }

/* Wird nur der INHALT ersetzt (eine Meldung von der Leitung zur offenen Nadel),
   soll das Blatt nicht noch einmal hereinfahren. */
.blatt.ohne-anlauf, .blatt.ohne-anlauf .blatt-box { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .blatt, .blatt-box, .blatt.zu, .blatt.zu .blatt-box { animation: none; }
}

@media (min-width: 640px) {
  .blatt { align-items: center; }
  .blatt-box {
    border-radius: 20px;
    padding: 0 16px 16px;
    max-height: 86%;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .32);
    animation: blatt-mitte .2s cubic-bezier(.2, .9, .3, 1);
  }
  @keyframes blatt-mitte {
    from { transform: translateY(14px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .blatt.zu .blatt-box { animation: blatt-mitte .16s ease reverse forwards; }
  .blatt-griff { display: none; }
}

/* Der Griff ist hier reine Zierde – gezogen wird am Blatt nicht. Er sagt aber
   auf einen Blick „das kam von unten und geht auch wieder dorthin". */
.blatt-griff {
  flex: 0 0 auto; align-self: center;
  width: 40px; height: 4px; border-radius: 3px; background: #d3dbe5;
  margin: 10px 0 2px;
}

/* Der Kopf klebt oben: bei sieben Kacheln und einem Verlauf darunter scrollt
   das Blatt, und dann muss sichtbar bleiben, worum es geht. */
.blatt-kopf {
  position: sticky; top: 0; z-index: 2;
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}
.blatt-titel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blatt-titel strong { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.blatt-titel small {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Die acht Ausgänge ----
   Alle gleichwertig, vier je Reihe, zwei Reihen – ein Raster ohne Lücke
   (seit 10.10.2026; vorher sechs zu dritt, Übersprungen und Lead als Leisten). */
.ab-raster {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px;
  padding-bottom: 2px;
}
.ab-kachel {
  appearance: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 80px; padding: 10px 4px;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; color: var(--ink-2);
  box-shadow: var(--shadow-tile);
  transition: transform .12s ease, border-color .15s, background .15s, box-shadow .15s;
}
/* Der Druck muss am Finger ankommen: die Kachel IST die Antwort, es gibt kein
   „Übernehmen" dahinter. */
.ab-kachel:active { transform: scale(.96); background: var(--line-soft); }
.ab-ic { color: var(--c); display: flex; }
.ab-l { font-size: 11.5px; font-weight: 650; line-height: 1.15; text-align: center;
        overflow-wrap: anywhere; hyphens: auto; }
/* Der gesetzte Ausgang trägt seine Farbe voll – man soll beim Aufschlagen des
   Blattes sehen, was hier schon steht, ohne die Kopfzeile zu lesen. */
.ab-kachel.on {
  background: color-mix(in srgb, var(--c) 8%, #fff);
  border-color: color-mix(in srgb, var(--c) 45%, #fff);
  color: color-mix(in srgb, var(--c) 74%, #0f172a);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, #fff);
}
.ab-kachel.on .ab-ic { color: var(--c); }

/* ---- Name, Notiz, Termin (seit 10.10.2026) ----
   Eingeklappt eine Leiste über den Kacheln; aufgeklappt drei Felder. Schrift
   16px in den Feldern: darunter zoomt Safari beim Antippen die Seite auf. */
.ab-details {
  flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.ab-details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.ab-details > summary::-webkit-details-marker { display: none; }
.abd-ic { display: flex; color: var(--accent); flex: 0 0 auto; }
.abd-l { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abd-pfeil { flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
.ab-details[open] .abd-pfeil { transform: rotate(180deg); }
.ab-details[open] > summary { border-bottom: 1px solid var(--line-soft); }
.abd-felder { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; }
.abd-f { display: flex; flex-direction: column; gap: 4px; }
.abd-f > span:first-child {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.abd-f input, .abd-f textarea {
  width: 100%; display: block; appearance: none; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: #fff; color: var(--ink);
  padding: 9px 11px; min-height: 42px; font: inherit; font-size: 16px;
}
.abd-f textarea { resize: vertical; min-height: 64px; line-height: 1.35; }
.abd-f input:focus, .abd-f textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.abd-termin { display: flex; gap: 6px; align-items: center; }
.abd-termin input { flex: 1 1 auto; min-width: 0; }
.abd-termin .icon-btn[hidden] { display: none; }
.abd-kal, .abd-hinweis { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: -4px; }
.abd-kal[hidden] { display: none; }

/* Adresse, Name, Termin im Kopf des Blattes */
.blatt-titel small.adr-zeile { display: flex; align-items: center; gap: 4px; }
.blatt-titel small.adr-zeile svg { flex: 0 0 auto; }
.blatt-titel small.lese-notiz { white-space: pre-wrap; color: var(--ink-2); margin-top: 2px; }

/* ---- Fuß des Blattes ---- */
.blatt-fuss {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding-top: 2px;
}
.blatt-fuss .btn { flex: 1 1 0; }
.blatt-fuss.fragt { flex-wrap: wrap; }
.fuss-frage {
  flex: 1 0 100%; font-size: 13px; font-weight: 600; color: #b91c1c;
  padding: 2px 2px 4px;
}
.btn.gefahr { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.gefahr:active { background: #b91c1c; }

/* ---- Zum Lesen: die Nadel eines anderen Kontos ---- */
.lese-wer { display: flex; align-items: center; gap: 7px; color: var(--c); }
.fremd-punkt {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c); opacity: .4;
}
.fremd-punkt.on { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }

.lese-chip {
  display: flex; align-items: center; gap: 11px;
  padding: 12px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c, #cbd5e1) 35%, #fff);
  background: color-mix(in srgb, var(--c, #cbd5e1) 7%, #fff);
}
.lese-chip .tile-ic { background: var(--c, #94a3b8); color: #fff; width: 34px; height: 34px; border-radius: 11px; }
.lese-l { display: flex; flex-direction: column; min-width: 0; }
.lese-l strong { font-size: 14.5px; font-weight: 650; }
.lese-l small { font-size: 12px; color: var(--muted); }

.lese-verlauf > h4 {
  margin: 0 0 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.hist { display: flex; flex-direction: column; gap: 2px; }
.hist-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.hist-ic {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
}
.hist-label { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.hist-time { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Der gemeinsame Icon-Chip – gebraucht ihn nur noch der Lese-Chip. */
.tile-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-soft); color: #a5b2c4;
}

/* ===========================================================================
   Eingabefelder mit Icon
   ===========================================================================
   Nur noch die Suche in der Übersicht – an einer Nadel gibt es nichts zu
   tippen. */

.ifield { position: relative; }
.ifield-ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: flex; color: #a5b2c4; pointer-events: none;
  transition: color .15s;
}
.ifield input {
  width: 100%; display: block; appearance: none;
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: #fff; color: var(--ink);
  padding: 9px 11px 9px 38px; min-height: 40px;
  font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s;
}
.ifield input::placeholder { color: #aab6c6; }
.ifield input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.ifield:focus-within .ifield-ic { color: var(--accent); }
.ifield-sm .ifield-ic { left: 9px; }
.ifield-sm input { min-height: 36px; padding: 7px 9px 7px 32px; font-size: 13px; font-weight: 600; }

/* ===========================================================================
   Knöpfe
   =========================================================================== */

.icon-btn {
  appearance: none; border: 1px solid var(--line); background: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:active { background: var(--line-soft); }

.btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: var(--r-tile); padding: 8px 12px; min-height: 44px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:active { background: var(--line-soft); }
.btn.block { width: 100%; }
.btn.ghost-danger { color: #e11d48; border-color: #fadfe4; background: #fff; }
.btn.ghost-danger:active { background: #fff1f2; }

.chip {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 6px 12px; min-height: 34px;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:active { background: var(--line-soft); }
.chip.on { border-color: var(--accent); color: var(--accent); background: rgba(37, 99, 235, .07); }

/* ===========================================================================
   Listen (Übersicht, Mannschaft)
   =========================================================================== */

.filterbar {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px;
}
.fkacheln { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.fkachel {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  min-height: 40px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-tile);
  transition: border-color .15s, background .15s;
}
.fkachel .tile-ic { width: 26px; height: 26px; border-radius: 8px; background: transparent; color: var(--c); }
.fkachel.on { border-color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 8%, #fff); }
.fkachel.on .tile-ic { background: var(--c); color: #fff; }

.frow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.frow-n { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.liste { display: flex; flex-direction: column; gap: 6px; }

/* Eine Zeile: Farbpunkt des Ausgangs, Adresse, Zeit. Als <button>, damit sie
   mit der Tastatur erreichbar ist und auf dem Telefon ein sauberes Touchziel
   abgibt. */
.lz {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; min-height: 56px;
  border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--card); box-shadow: var(--shadow-tile);
  transition: border-color .15s, background .15s;
}
.lz:active { background: var(--line-soft); }
/* Eine fremde Zeile steht leiser da – wie die Nadel auf der Karte, nur nicht
   ganz so blass: in einer Liste muss man sie lesen können. */
.lz.fremd { background: #fbfcfe; border-style: dashed; }
.lz-dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--c, #cbd5e1); box-shadow: 0 0 0 1.5px rgba(15, 23, 42, .18);
}
.lz-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lz-mid strong {
  font-size: 13.5px; font-weight: 650; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-mid small {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lz-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lz-time.rot { color: #dc2626; font-weight: 700; }
/* Stand eines Abschlusses in der Liste des Arbeitstags. */
.lz-stand {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: #e3f6ea; color: #15803d;
}
.lz-stand.gelb { background: #fdf3cf; color: #a16207; }
.lz-wer {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  max-width: 10ch; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c);
}
.lz.fu.ueber { border-color: #fca5a5; background: #fff7f7; }

.leer {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 20px; color: var(--muted); text-align: center; font-size: 13px;
}
.leer svg { color: #cbd5e1; }

/* ===========================================================================
   Mannschaft
   =========================================================================== */

.tz-avatar {
  position: relative; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c); font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 32%, #fff);
}
/* Der grüne Punkt sagt: dieses Konto hat gerade eine offene Leitung, ist also
   draußen unterwegs. Er kommt vom Server (SSE), nicht aus einer Vermutung. */
.tz-on {
  position: absolute; right: -3px; bottom: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #cbd5e1; box-shadow: 0 0 0 2.5px #fff;
}
.tz-on.an { background: #22c55e; }
.tz.ich { border-color: color-mix(in srgb, var(--accent) 35%, #fff); }
.tz-hinweis { margin: 0 2px; font-size: 12px; color: var(--muted); }
/* Wo steht dieses Konto? Grün heißt live, bernstein „war vor Kurzem hier". */
.tz-ort {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.tz-ort.live { color: #15803d; }
.tz-ort.alt { color: #b45309; }
.tz-ich { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.tz-heute { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tz-heute b { font-size: 15px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tz-ab {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: #e7f8ee; color: #15803d;
}

/* ===========================================================================
   Auswertung – gemeinsame Bausteine für Arbeitstag, Statistik und Season
   =========================================================================== */

.sblock { margin: 0 0 18px; }
.sblock > h3 {
  margin: 0 0 8px; padding: 0 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.sblock-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; padding: 0 2px;
}
.sblock-kopf > h3 {
  margin: 0; min-width: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* Kleiner Knopf rechts im Blockkopf: die Pausenschwelle (führt in die
   Einstellungen) oder die Sortierung. */
.sblock-hinweis {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 3px 9px 3px 7px; min-height: 28px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.sblock-hinweis:active { background: var(--line-soft); }
.sblock-hinweis svg { color: var(--muted); }
.sblock-fuss { margin: 7px 2px 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.sblock-fuss:empty { display: none; }
.sblock-fuss b { font-variant-numeric: tabular-nums; }

.skacheln {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
  margin: 0 0 18px;
}
.skachel {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 11px 5px 10px; border-radius: var(--r-tile); text-align: center; min-width: 0;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-tile);
}
.sk-v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
        white-space: nowrap; }
.sk-l { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.sk-s { font-size: 10.5px; color: var(--muted); line-height: 1.3; margin-top: 2px;
        overflow-wrap: anywhere; }
/* Die Arbeitszeit ist die Zahl, nach der man fragt – sie trägt Blau. Grün trägt
   nur, was mit einem Abschluss zu tun hat, wie in der Kurve. */
.skachel.betont { border-color: color-mix(in srgb, var(--accent) 35%, #fff);
                  background: color-mix(in srgb, var(--accent) 5%, #fff); }
.skachel.betont .sk-v { color: var(--accent); }
.skachel.gruen { border-color: #bbe8cc; background: #f3fcf6; }
.skachel.gruen .sk-v { color: #15803d; }
/* Noch kein bestätigter, aber ein unbestätigter: gelb, wie seine Nadel. */
.skachel.gelb { border-color: #f3e2a2; background: #fffcf0; }
.skachel.gelb .sk-v { color: #a16207; }

/* Farbpunkt vor einem Ausgang – in Tabellen und Chips. */
.punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--muted)); margin-right: 6px; vertical-align: 1px;
  flex: 0 0 auto;
}
b.gruen { color: #15803d; }
b.gelb { color: #a16207; }
.h3-gelb { color: #a16207; }

/* Klapptabelle unter einer Auswertung: jeder einzelne Eintrag. */
.s-tabelle {
  margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--card); overflow: hidden;
}
.s-tabelle > summary {
  cursor: pointer; list-style: none; padding: 11px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.s-tabelle > summary::-webkit-details-marker { display: none; }
.s-tabelle > summary::before { content: '▸'; display: inline-block; margin-right: 7px; color: var(--muted);
                               transition: transform .15s; }
.s-tabelle[open] > summary::before { transform: rotate(90deg); }
.s-tabelle table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.s-tabelle th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--muted);
                text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px;
                border-top: 1px solid var(--line-soft); }
.s-tabelle td { padding: 8px 12px; border-top: 1px solid var(--line-soft); white-space: nowrap;
                font-variant-numeric: tabular-nums; }
.s-tabelle tr[data-haus] { cursor: pointer; }
.s-tabelle tr[data-haus]:active td { background: var(--line-soft); }
.luecke { color: #b45309; }

/* Vor- und Zurück-Knöpfe: Arbeitstag und Season. */
.at-schritt {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.at-schritt:first-child svg { transform: rotate(180deg); }
.at-schritt:active { background: var(--line-soft); }
.at-schritt:disabled { opacity: .35; cursor: default; }

/* ===========================================================================
   Arbeitstag
   =========================================================================== */

.at-leiste { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.at-datum {
  flex: 1 1 auto; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 40px; padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
}
.at-datum span { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase;
                 letter-spacing: .05em; line-height: 1.2; }
.at-datum input {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  font-size: 16px; font-weight: 650; color: var(--ink); text-align: center;
  font-variant-numeric: tabular-nums; min-height: 22px;
}
.at-datum input:focus { outline: none; }

/* Der dunkle Kopf: zwei Zahlen nebeneinander, nach denen man nach einem Tag
   fragt – wie schnell ging es, und was hat es je Stunde gebracht. */
.at-held {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 0 8px; border-radius: 16px; background: #0f172a; color: #f8fafc;
  overflow: hidden;
}
.at-held-teil {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 8px 12px; text-align: center; min-width: 0;
}
.at-held-teil + .at-held-teil { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .09); }
.at-held-v { font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1.05;
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.at-held-l { font-size: 11px; font-weight: 650; color: #93c5fd; margin-top: 5px;
             text-transform: uppercase; letter-spacing: .06em; }
/* Die Termine tragen Grün – wie ihre Nadel. */
.at-held-teil.termin .at-held-l { color: #86efac; }
.at-held-s { font-size: 11.5px; color: #94a3b8; margin-top: 3px; line-height: 1.3; }
.at-held-knopf {
  appearance: none; cursor: pointer; margin-top: 6px;
  border: 1px solid rgba(134, 239, 172, .45); background: rgba(134, 239, 172, .1); color: #bbf7d0;
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 650;
}
.at-held-knopf:active { background: rgba(134, 239, 172, .2); }
.at-held-fuss { margin: -2px 2px 10px; font-size: 11.5px; color: var(--ink-2); text-align: center; }
.at-held-fuss b { color: #15803d; font-variant-numeric: tabular-nums; }

/* ---- Tempokurve ---- */
.tp-karte {
  border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card);
  box-shadow: var(--shadow-tile); padding: 6px 4px 8px;
}
.tp-plot { width: 100%; min-height: 200px; }
.tp-svg { display: block; overflow: visible; }
.tp-grid { stroke: var(--line-soft); stroke-width: 1; shape-rendering: crispEdges; }
.tp-base { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.tp-tick { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.tp-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tp-abschluss { stroke: #15803d; stroke-width: 1.25; stroke-dasharray: 3 2; opacity: .8; }
.tp-abschluss-punkt { fill: #15803d; stroke: #fff; stroke-width: 1.5; }
.tp-abschluss-zeit { font-size: 10.5px; font-weight: 700; fill: #15803d; font-variant-numeric: tabular-nums; }
/* Unbestätigt: dieselbe Zeichnung in Gelb. Die Schrift ein dunkleres Gelb –
   #eab308 auf Weiß ließe sich kaum lesen. */
.tp-abschluss.gelb { stroke: #ca8a04; }
.tp-abschluss-punkt.gelb { fill: #eab308; }
.tp-abschluss-zeit.gelb { fill: #a16207; }

.tp-legende {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  padding: 4px 8px 0; font-size: 11.5px; color: var(--ink-2);
}
.tp-legende span { display: inline-flex; align-items: center; gap: 6px; }
.tp-legende i { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.tp-l-linie { height: 2px !important; background: var(--accent); border-radius: 1px !important; }
.tp-l-pause { background: repeating-linear-gradient(135deg, #f8fafc 0 3px, #d7dee8 3px 6px);
              box-shadow: inset 0 0 0 1px #e2e8f0; }
.tp-l-abschluss { background: repeating-linear-gradient(135deg, #f0fbf4 0 3px, #9fdcb6 3px 6px);
                  box-shadow: inset 0 0 0 1px #bbe8cc; }
.tp-l-abschluss.gelb { background: repeating-linear-gradient(135deg, #fefbe8 0 3px, #f0d565 3px 6px);
                       box-shadow: inset 0 0 0 1px #f7e39a; }

/* ---- Ablauf ---- */
.ablauf { display: flex; flex-direction: column; gap: 5px; }
.ab-zeile {
  display: grid; grid-template-columns: 94px 58px 1fr auto; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card);
}
.ab-zeit { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-zeit i { font-style: normal; color: var(--muted); margin: 0 2px; }
.ab-marke {
  justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 999px; background: #eef2f7; color: #64748b;
}
.ab-marke.arbeit { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.ab-text { font-size: 12px; color: var(--ink-2); min-width: 0; }
.ab-dauer { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Eine Pause ist schraffiert wie in der Kurve – und grün, wenn an ihr ein
   Abschluss hing. */
.ab-zeile.pause { background: repeating-linear-gradient(135deg, #fbfcfd 0 6px, #f3f6f9 6px 12px); }
.ab-zeile.pause.gruen { background: repeating-linear-gradient(135deg, #f6fdf8 0 6px, #e5f7ec 6px 12px);
                        border-color: #bbe8cc; }
.ab-zeile.pause.gruen .ab-marke { background: #dcf5e6; color: #15803d; }
.ab-zeile.pause.gruen .ab-text { color: #15803d; font-weight: 600; }
.ab-zeile.pause.gelb { background: repeating-linear-gradient(135deg, #fffdf2 0 6px, #fdf5d6 6px 12px);
                       border-color: #f3e2a2; }
.ab-zeile.pause.gelb .ab-marke { background: #fdf0c4; color: #a16207; }
.ab-zeile.pause.gelb .ab-text { color: #a16207; font-weight: 600; }

/* ===========================================================================
   Statistik – der Abfragebaukasten
   =========================================================================== */

/* Einfach / Erweitert: ein Segmentschalter ganz oben. Er ist die erste
   Entscheidung auf der Seite – „will ich nur sehen, wie es läuft, oder selbst
   auswerten" –, also steht er vor allem anderen und über die volle Breite. */
.modus {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px;
  padding: 3px; margin: 0 0 12px; border-radius: 12px; background: #e8edf3;
}
.modus-knopf {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; border-radius: 9px; background: transparent;
  font-size: 13.5px; font-weight: 650; color: var(--ink-2);
  transition: background .15s, color .15s, box-shadow .15s;
}
.modus-knopf svg { color: var(--muted); }
.modus-knopf.an { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.modus-knopf.an svg { color: var(--accent); }

.einfach-zeit { margin: 0 0 12px; }

/* Alle Ausgänge in EINEM Streifen: wie sich die Türen verteilen, ohne dass man
   sechs Balken vergleichen muss. */
.ausgang-streifen {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px;
  background: var(--line-soft);
}
.ausgang-streifen i { display: block; background: var(--c); min-width: 3px; }
.ausgang-legende {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
  font-size: 12px; color: var(--ink-2);
}
.ausgang-legende span { display: inline-flex; align-items: center; }
.ausgang-legende b { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* „Wann läuft es am besten?" – vier Zeilen, je eine Antwort. */
.erkenntnisse { display: flex; flex-direction: column; gap: 5px; }
.erkenntnis {
  display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: var(--r-tile);
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-tile);
}
.erk-ic {
  grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent);
}
.erk-titel { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.erk-inhalt { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.erk-inhalt strong { font-size: 14px; font-weight: 700; }
.erk-inhalt strong.blass { color: var(--muted); font-weight: 600; font-size: 13px; }
.erk-inhalt small { font-size: 12px; color: var(--ink-2); }

/* Fertige Fragen: eine waagerecht scrollende Reihe. */
.q-fragen {
  display: flex; gap: 6px; overflow-x: auto; margin: 0 -12px 10px; padding: 0 12px 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.q-fragen::-webkit-scrollbar { display: none; }
.q-fragen .chip { flex: 0 0 auto; white-space: nowrap; }

.q-karte {
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--card); box-shadow: var(--shadow-tile);
}
details.q-karte > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; min-height: 26px;
}
details.q-karte > summary::-webkit-details-marker { display: none; }
details.q-karte[open] > summary { margin-bottom: 6px; }
.q-titel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; flex: 0 0 auto; }
.q-titel svg { color: var(--muted); }
/* Zugeklappt sagt der Satz daneben, worauf die Zahlen stehen. */
.q-satz {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 12px; color: var(--accent); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
details.q-karte > summary::after {
  content: '▾'; color: var(--muted); font-size: 12px; transition: transform .15s; flex: 0 0 auto;
}
details.q-karte[open] > summary::after { transform: rotate(180deg); }

.q-feld { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.q-label {
  display: block; margin: 0 0 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.q-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip.klein { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.chip.klein .punkt { margin-right: 0; }
.chip.klein.on .punkt { box-shadow: 0 0 0 2px #fff; }
.q-feld > .chip { margin-top: 2px; }
.q-feld:last-of-type + .chip { margin-top: 6px; }

.q-datum, .q-uhr { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.q-uhr { margin-top: 0; }
.q-datum span, .q-uhr span { font-size: 12px; color: var(--muted); }
.q-datum input, .q-uhr select, .q-wahl select {
  appearance: none; flex: 1 1 0; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-field); background: #fff;
  padding: 8px 10px; min-height: 40px;
  font-size: 16px;                              /* < 16px zoomt iOS beim Fokus */
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.q-uhr select, .q-wahl select {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.q-datum input:focus, .q-uhr select:focus, .q-wahl select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.q-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-wahl { display: flex; flex-direction: column; min-width: 0; }
/* Abstand nur zwischen gestapelten Wahlen – nicht zwischen den beiden
   nebeneinander im Raster, sonst sitzt die rechte tiefer als die linke. */
.q-zweispaltig + .q-wahl { margin-top: 8px; }
.q-wahl .q-label { margin-bottom: 4px; }
.q-wahl select { width: 100%; }

/* ---- Ergebnis: eine Dimension ---- */
.erg-liste { display: flex; flex-direction: column; gap: 4px; }
.erg-zeile {
  display: grid; grid-template-columns: minmax(84px, 34%) 1fr auto; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  padding: 7px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card);
}
.erg-name {
  grid-row: 1 / 3; font-size: 12.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 4px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erg-balken { grid-row: 1 / 3; height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.erg-balken i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--accent)); }
.erg-wert { font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.erg-basis { font-size: 10.5px; color: var(--muted); text-align: right; white-space: nowrap; }
/* Die beste belastbare Zeile: Stern und ein Hauch Farbe. */
.erg-zeile.beste { border-color: color-mix(in srgb, var(--accent) 40%, #fff);
                   background: color-mix(in srgb, var(--accent) 5%, #fff); }
.erg-zeile.beste .erg-name { color: var(--accent); }
.erg-zeile.beste .erg-name svg { fill: currentColor; flex: 0 0 auto; }
/* Zu dünne Basis: blass. Die Zahl steht da, man soll ihr aber nicht trauen. */
.erg-zeile.duenn .erg-wert, .erg-zeile.duenn .erg-balken { opacity: .4; }

/* ---- Ergebnis: Kreuztabelle ---- */
.kreuz-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-tile);
              border: 1px solid var(--line); background: var(--card); }
.kreuz { border-collapse: separate; border-spacing: 2px; width: 100%; font-variant-numeric: tabular-nums; }
.kreuz th {
  font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 4px 3px; white-space: nowrap;
}
.kreuz thead th { text-align: center; }
.kreuz tbody th { text-align: right; padding-right: 6px; position: sticky; left: 0; background: var(--card); }
.kreuz td {
  min-width: 34px; height: 30px; padding: 0 3px; border-radius: 6px;
  text-align: center; font-size: 11.5px; font-weight: 650; cursor: default;
  background: #f8fafc;
}
.kreuz td.kz-nix { background: #fbfcfd; }
.kreuz td.duenn { color: var(--muted) !important; font-weight: 500;
                  background: repeating-linear-gradient(135deg, #fbfcfd 0 3px, #f1f5f9 3px 6px) !important; }

/* ===========================================================================
   Statistik, Fragen – Claude plant, die App rechnet, Claude erklärt
   =========================================================================== */

.ki-eingabe {
  display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px;
  padding: 10px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-tile);
}
.ki-eingabe textarea {
  appearance: none; resize: none; width: 100%; min-height: 58px;
  border: 0; background: transparent; padding: 4px 4px 0;
  font: inherit; font-size: 16px;                     /* < 16px zoomt iOS beim Fokus */
  line-height: 1.4; color: var(--ink);
}
.ki-eingabe textarea:focus { outline: none; }
.ki-eingabe textarea::placeholder { color: #9aa8b9; }
.ki-eingabe:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, #fff);
                           box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.ki-eingabe .btn { align-self: flex-end; }
.btn.primaer { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primaer:active { background: #1d4ed8; }
.btn:disabled { opacity: .55; cursor: default; }

.ki-beispiele { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ki-beispiele .q-label { flex: 1 0 100%; margin: 0 2px 0; }
.ki-beispiele .chip { text-align: left; height: auto; min-height: 32px; white-space: normal; line-height: 1.3; }

/* Drei Phasen. Die mittlere sagt ausdrücklich, dass die App rechnet – das ist
   der Punkt, auf den es für das Vertrauen in die Antwort ankommt. */
.ki-fortschritt {
  margin: 0 0 14px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
}
.ki-phase { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--muted); }
.ki-punkt {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: #eef2f7; color: var(--muted);
}
.ki-phase.aktiv { color: var(--ink); font-weight: 650; }
.ki-phase.aktiv .ki-punkt { background: var(--accent); color: #fff; animation: ki-puls 1.2s ease-in-out infinite; }
.ki-phase.fertig { color: var(--ink-2); }
.ki-phase.fertig .ki-punkt { background: #dcf5e6; color: #15803d; }
@keyframes ki-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); } 50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); } }
@media (prefers-reduced-motion: reduce) { .ki-phase.aktiv .ki-punkt { animation: none; } }
.ki-hinweis { margin: 6px 0 0 32px; font-size: 11.5px; color: var(--muted); }

.ki-fehler {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px;
  border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px;
}
.ki-fehler span { flex: 1 1 auto; }

.ki-antwort { margin: 0 0 14px; }
.ki-frage { display: flex; flex-direction: column; gap: 3px; margin: 0 2px 8px; }
.ki-frage-text { font-size: 15px; font-weight: 650; color: var(--ink); }
.ki-frage small { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Die Antwort selbst: dunkel wie der Kopf der anderen Ansichten – sie ist die
   eine Zahl, derentwegen man gefragt hat. */
.ki-kurz {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px; margin: 0 0 16px; border-radius: 16px;
  background: #0f172a; color: #f8fafc;
}
.ki-kurz svg { flex: 0 0 auto; color: #93c5fd; margin-top: 2px; }
.ki-kurz p { margin: 0; font-size: 15px; line-height: 1.5; }
.ki-kurz.nicht { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.ki-kurz.nicht svg { color: #ea580c; }

.ki-h {
  margin: 0 2px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* Ein Häppchen: Nummer und Titel, woraus es besteht (Filter, Aufteilung,
   Kennzahl), die Tabelle, die Erklärung, der Weg zum Nachprüfen. */
.ki-schritt {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; margin: 0 0 8px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-tile);
}
.ki-schritt > .chip { align-self: flex-start; }
.ki-schritt-kopf { display: flex; gap: 10px; align-items: flex-start; }
.ki-nr {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 750; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent);
}
.ki-schritt-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ki-schritt-titel strong { font-size: 14px; font-weight: 650; }
.ki-schritt-titel small { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.ki-abfrage { display: flex; flex-wrap: wrap; gap: 5px; }
.ki-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px; background: #eef2f7; color: var(--ink-2);
  font-size: 11.5px; font-weight: 600;
}
.ki-tag svg { color: var(--muted); }
.ki-erklaerung { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ki-leer { margin: 0; font-size: 12px; color: var(--muted); }

.erg-liste.kompakt { gap: 3px; }
.erg-liste.kompakt .erg-zeile { padding: 5px 9px; box-shadow: none; }
/* Was Claude hervorheben ließ: blauer Rahmen – dieselbe Farbe wie der Stern im
   erweiterten Modus, denn es ist dieselbe Aussage. */
.erg-zeile.hervor { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff);
                    box-shadow: 0 0 0 1px var(--accent) inset; }
.erg-zeile.hervor .erg-name { color: var(--accent); }
.kreuz td.hervor { box-shadow: 0 0 0 2px var(--accent) inset; color: var(--accent); font-weight: 750; }

.ki-vorbehalte {
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a;
}
.ki-vorbehalte .q-label { color: #a16207; }
.ki-vorbehalte ul { margin: 0; padding-left: 18px; }
.ki-vorbehalte li { font-size: 12.5px; color: #713f12; line-height: 1.45; margin: 2px 0; }

.ki-meta { margin: 6px 2px 0; font-size: 11px; color: var(--muted); }

.ki-verlauf-liste { display: flex; flex-direction: column; }
.ki-verlauf-eintrag {
  appearance: none; border: 0; border-top: 1px solid var(--line-soft); background: transparent;
  cursor: pointer; text-align: left; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.ki-verlauf-eintrag:active { background: var(--line-soft); }
.ki-verlauf-eintrag span { font-size: 13px; color: var(--ink); }
.ki-verlauf-eintrag small { font-size: 11px; color: var(--muted); }

/* ===========================================================================
   Season
   =========================================================================== */

.season-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.season-titel {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; min-width: 0;
}
.season-titel strong { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.season-titel small { font-size: 12px; color: var(--muted); }

/* Schalter Termine / Türen: zugleich die Summe des Monats über alle Konten. */
.season-wertung { grid-template-columns: 1fr 1fr; }
.season-knopf { flex-direction: column; gap: 1px; min-height: 54px; line-height: 1.15; }
.season-knopf b { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.season-knopf span { font-size: 12px; font-weight: 600; color: var(--muted); }
.season-knopf.an span { color: var(--ink-2); }
.season-knopf .rang-gelb { margin-left: 2px; }

/* Vergleich / Mein Monat (seit 11.10.2026): zwei Ansichten statt drei. */
.season-ansicht { grid-template-columns: 1fr 1fr; }

/* ---- Mein Monat: der Kalender aus 3088_ics -------------------------------
   Sieben Spalten Mo–So, dahinter eine schmalere Spalte mit der Woche. */
.se-karte {
  max-width: 560px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile); padding: 12px;
}
.se-gitter {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 5px;
}
.se-wt {
  text-align: center; padding-bottom: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.se-wt--so { color: #cbd5e1; }
.se-wt--woche { letter-spacing: .02em; }
.se-tag {
  position: relative; aspect-ratio: 1; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--se-bg, #fff); color: var(--se-fg, var(--ink));
  box-shadow: inset 0 0 0 1px var(--se-li, var(--line));
  cursor: default;
}
.se-tag--luecke { background: none; box-shadow: none; }
.se-tag--offen { opacity: .4; }
/* Sonn- und Feiertage: kein Arbeitstag, also kein rotes Feld, das nach
   Versäumnis aussieht – grau und leer, ohne Wertung. */
.se-tag--frei { background: #e8edf3; box-shadow: none; }
.se-tag--heute { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Leads neben den Terminen: klein und gelb in der Ecke. */
.se-lead {
  position: absolute; top: 2px; right: 3px;
  font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1;
  padding: 1px 3px; border-radius: 5px; background: #eab308; color: #422006;
}
/* Rampe rot → gelb → grün, unverändert aus 3088_ics übernommen (dort erzeugt
   von tools/season-rampe.py in OKLCH) – nicht einzeln nachbessern. */
.se-tag[data-s="0"]  { --se-bg: #d2786a; --se-fg: #4c110b; --se-li: #c05b4e; }
.se-tag[data-s="1"]  { --se-bg: #d68167; --se-fg: #571e0b; --se-li: #c46548; }
.se-tag[data-s="2"]  { --se-bg: #d98a65; --se-fg: #5c2506; --se-li: #c76f44; }
.se-tag[data-s="3"]  { --se-bg: #db9465; --se-fg: #602d00; --se-li: #c87941; }
.se-tag[data-s="4"]  { --se-bg: #dc9e66; --se-fg: #5d3000; --se-li: #c98341; }
.se-tag[data-s="5"]  { --se-bg: #dca86a; --se-fg: #603800; --se-li: #c98e44; }
.se-tag[data-s="6"]  { --se-bg: #dbb16f; --se-fg: #624000; --se-li: #c79849; }
.se-tag[data-s="7"]  { --se-bg: #dabb77; --se-fg: #5d4300; --se-li: #c5a351; }
.se-tag[data-s="8"]  { --se-bg: #d0c078; --se-fg: #564700; --se-li: #bba753; }
.se-tag[data-s="9"]  { --se-bg: #bebe75; --se-fg: #4c4b00; --se-li: #a7a751; }
.se-tag[data-s="10"] { --se-bg: #aabc75; --se-fg: #3c4902; --se-li: #91a653; }
.se-tag[data-s="11"] { --se-bg: #94ba79; --se-fg: #29470d; --se-li: #79a45a; }
.se-tag[data-s="12"] { --se-bg: #7db87f; --se-fg: #17491d; --se-li: #5fa263; }
.se-tag[data-s="13"] { --se-bg: #77ae7c; --se-fg: #063e14; --se-li: #599860; }
.se-tag[data-s="14"] { --se-bg: #71a478; --se-fg: #023913; --se-li: #548e5e; }
.se-tag[data-s="15"] { --se-bg: #6b9a74; --se-fg: #002d0e; --se-li: #4f855b; }
/* Die Woche: Summe Mo–So, bei Punkten gegen das Ziel 15. */
.se-woche {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  border-radius: 8px; background: var(--line-soft);
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.se-woche b { font-size: 14px; font-weight: 750; }
.se-woche small { font-size: 10px; font-weight: 600; color: var(--muted); }
.se-woche.voll { background: #dcfce7; color: #166534; }
.se-woche.voll small { color: #15803d; }
@media (max-width: 380px) {
  .se-gitter { gap: 3px; }
  .se-tag { border-radius: 6px; font-size: 12px; }
  .se-woche b { font-size: 12px; }
  .se-woche small { font-size: 9px; }
}

.rang { display: flex; flex-direction: column; gap: 5px; }
.rang-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-tile);
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-tile);
}
.rang-zeile.ich { border-color: color-mix(in srgb, var(--accent) 40%, #fff);
                  background: color-mix(in srgb, var(--accent) 4%, #fff); }
.rang-platz {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 750; color: var(--ink-2); background: #eef2f7;
  font-variant-numeric: tabular-nums;
}
/* Gold, Silber, Bronze – nur, wer auch wirklich etwas hat. */
.rang-platz.p1 { background: linear-gradient(145deg, #fde68a, #f59e0b); color: #78350f; }
.rang-platz.p2 { background: linear-gradient(145deg, #f1f5f9, #cbd5e1); color: #334155; }
.rang-platz.p3 { background: linear-gradient(145deg, #fed7aa, #c2410c); color: #fff; }
.tz-avatar.klein { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; }
.rang-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rang-name { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang-gelb { font-style: normal; font-size: 11px; font-weight: 600; color: #a16207; margin-left: 3px; }
.rang-name small { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase;
                   letter-spacing: .06em; margin-left: 4px; }
.rang-balken { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.rang-balken i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--accent)); }
.rang-wert { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.rang-wert b { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.rang-wert small { font-size: 10.5px; color: var(--muted); }
.rang-wert b .rang-von { display: inline; font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 1px; }
/* Punkte-Wertung: heute und diese Woche gegen ihr Ziel, erreicht = grün */
.rang-ziele { display: flex; gap: 10px; font-size: 11px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rang-ziele i { font-style: normal; font-weight: 500; }
.rang-ziele .voll { color: #15803d; }

/* ---- Zahlenfeld in einer Einstellungszeile ---- */
.set-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.set-num input {
  width: 64px; appearance: none; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-field); background: #fff;
  padding: 8px 6px; min-height: 40px;
  font-size: 16px;                         /* < 16px zoomt iOS beim Fokus */
  font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.set-num input::-webkit-outer-spin-button,
.set-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.set-num input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.set-num.breit input { width: 84px; }
label.set-row { cursor: default; }

@media (max-width: 420px) {
  .fkacheln { grid-template-columns: repeat(5, 1fr); }
  /* Drei Felder auf 390px: die Beschriftung braucht den Platz, die Zeichen nicht. */
  .modus-knopf { gap: 4px; font-size: 13px; }
  .modus-knopf svg { display: none; }
  .sk-v { font-size: 17px; }
  .ab-zeile { grid-template-columns: 86px 1fr auto; }
  .ab-zeile .ab-marke { display: none; }
  .erg-zeile { grid-template-columns: minmax(74px, 32%) 1fr auto; }
}

/* ===========================================================================
   Einstellungen
   =========================================================================== */

.set-group { margin: 0 0 18px; }
.set-h {
  margin: 0 0 8px; padding: 0 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.set-row {
  appearance: none; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--card); box-shadow: var(--shadow-tile);
  transition: background .15s;
}
.set-row:active { background: var(--line-soft); }
.set-row.static { cursor: default; }

/* Office-Board: Auswahl von Board und Spalte (seit 10.10.2026) */
/* Hinweis unter einer Gruppe und die Zeile als Link (App herunterladen) –
   beides hatte bis 10.10.2026 keine eigenen Regeln und stand in Browser-Optik da. */
.set-hinweis { margin: 2px 4px 8px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
a.set-row { text-decoration: none; color: inherit; }
.set-mehr { flex: 0 0 auto; font-size: 12px; font-weight: 650; color: var(--accent); }
.set-unter { font-weight: 500; color: var(--muted); }
.board-farbe { background: color-mix(in srgb, var(--c) 14%, #fff); }
.board-farbe i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff; }
.set-board {
  margin: -2px 0 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card);
  display: flex; flex-direction: column; gap: 10px;
}
.set-board-f { display: flex; flex-direction: column; gap: 4px; }
.set-board-f > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.set-board-f select {
  width: 100%; min-height: 42px; padding: 8px 10px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; color: var(--ink);
}
.set-board-f select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.set-board-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.set-board-fehler { margin: 0; font-size: 12.5px; color: #b91c1c; }
.set-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-soft); color: var(--ink-2);
}
.set-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-text strong { font-size: 13.5px; font-weight: 650; }
.set-text small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.set-fuss { margin: 24px 2px 0; font-size: 11.5px; color: var(--muted); text-align: center; }

/* Schiebeschalter – reine Anzeige, geschaltet wird die ganze Zeile. */
.schalter {
  flex: 0 0 auto; position: relative;
  width: 40px; height: 24px; border-radius: 999px; background: #d7dfe9;
  transition: background .18s;
}
.schalter::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: transform .18s;
}
.schalter.an { background: var(--accent); }
.schalter.an::after { transform: translateX(16px); }

/* ===========================================================================
   Toast
   =========================================================================== */

#toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 80;
  transform: translate(-50%, 12px);
  /* Ohne max-content bemisst sich die Breite am Platz RECHTS von left:50%, also
     an der halben Bildbreite – „Standort wird gesucht …" brach dadurch mitten im
     Satz um. */
  width: max-content; max-width: min(90vw, 380px);
  padding: 10px 16px; border-radius: 999px;
  background: rgba(15, 23, 42, .92); color: #fff;
  font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: 0 6px 22px rgba(15, 23, 42, .35);
  opacity: 0; pointer-events: none;                 /* schluckt keinen Kartentipp */
  transition: opacity .16s ease, transform .16s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Auf der Karte liegt unten der Joystick (104px hoch), und ausgerechnet seine
   Meldungen dürfen ihn nicht zudecken. */
body.view-map #toast { bottom: calc(var(--safe-bottom) + 172px); }
/* Über dem Blatt statt dahinter: die Meldung kommentiert ja gerade das, was im
   Blatt passiert ist – und das Blatt deckt die untere Hälfte ab. */
body.blatt-auf #toast {
  bottom: auto; top: calc(var(--safe-top) + 64px); z-index: 90;
  transform: translate(-50%, -12px);
}
body.blatt-auf #toast.show { transform: translate(-50%, 0); }

/* ===========================================================================
   Anmeldung (views/login.ejs, views/register.ejs)
   =========================================================================== */

.lock {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: #0b1220;
}
.lock-box {
  width: min(340px, 100%);
  display: flex; flex-direction: column; gap: 10px;
  text-align: center;
}
.lock-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; letter-spacing: .14em; font-size: 13px;
  color: #7dd3fc; margin-bottom: 10px;
}
.lock-label {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #7d8da3; text-align: left;
}
.lock-input {
  appearance: none; width: 100%;
  padding: 13px 15px; border-radius: var(--r-field);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: #f8fafc;
  font-size: 17px;                                  /* < 16px zoomt iOS beim Fokus */
  letter-spacing: .1em;
}
/* Der Benutzername ist Text und kein Passwort – gesperrte Zeichen würden ihn
   nur schwerer lesbar machen. */
.lock-input--text { letter-spacing: normal; }
.lock-input:focus { outline: none; border-color: #38bdf8; background: rgba(255, 255, 255, .1); }
.lock-go {
  appearance: none; border: 0; cursor: pointer;
  padding: 13px 15px; border-radius: var(--r-field); min-height: 46px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
}
.lock-go:active { transform: scale(.985); }
.lock-err { margin: 2px 0 0; color: #fca5a5; font-size: 13px; font-weight: 600; }
.lock-note { margin: 14px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.lock-alt { margin: 12px 0 0; color: #64748b; font-size: 12.5px; }
.lock-alt a { color: #38bdf8; font-weight: 600; text-decoration: none; }
.lock-alt a:hover { text-decoration: underline; }

.lock.shake .lock-box { animation: lock-shake .3s ease; }
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  55% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) { .lock.shake .lock-box { animation: none; } }

/* ===========================================================================
   Querformat-Sperre
   ===========================================================================
   Das Manifest (orientation: portrait) hält die installierte App auf Android
   schon von sich aus aufrecht – iOS ignoriert das Feld aber vollständig, in der
   Lasche wie auf dem Home-Bildschirm. Und in einer normalen Browser-Lasche
   greift es nirgends. Deshalb hier zusätzlich eine reine CSS-Sperre. Sie gilt
   nur für Geräte mit grobem Zeiger und flachem Fenster – ein Laptop im
   Querformat ist gemeint, ein Telefon in der Hand nicht. */
.hochkant { display: none; }

@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  .hochkant {
    display: flex; position: fixed; inset: 0; z-index: 200;
    align-items: center; justify-content: center; padding: 24px;
    background: #0b1220; color: #cbd5e1;
  }
  .hochkant-box {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center; max-width: 320px;
  }
  .hochkant-box strong { font-size: 15px; color: #f8fafc; }
  .hochkant-box span { font-size: 13px; line-height: 1.5; }
  .hochkant-box svg { color: #38bdf8; }
}

/* Importe aus d2dfinder (weiße Nadeln) */
/* Kompakt: eine Karte je Import, Name + zwei Symbolknöpfe, darunter Zahlen und
   der Weg als Chip (Tipp = ein/aus, ✕ = Weg löschen). Die Überschrift klappt
   die ganze Liste ein. */
.imp-klappe {
  appearance: none; border: 0; background: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 6px; text-align: left; font-family: inherit;
}
.imp-klappe svg { transition: transform .15s; transform: rotate(90deg); }
.imp-klappe.zu svg { transform: none; }
.imp-summe { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.import-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.import-row {
  padding: 8px 10px 7px; border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--card); box-shadow: var(--shadow-tile);
}
.imp-kopf { display: flex; align-items: center; gap: 6px; }
.imp-kopf strong { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-kopf .icon-btn { width: 30px; height: 30px; border-radius: 8px; }
.imp-kopf .icon-btn.danger { color: #dc2626; }
.imp-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.imp-zeile small { color: var(--muted); font-size: 12px; }
.imp-weg {
  display: inline-flex; align-items: center; margin-left: auto;
  border: 1px solid #93c5fd; border-radius: 999px; background: #eff6ff; color: #1d4ed8;
}
.imp-weg button {
  appearance: none; border: 0; background: none; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600;
}
.imp-weg-an { padding: 3px 4px 3px 8px; }
.imp-weg-x { padding: 3px 8px 3px 4px; opacity: .7; }
.imp-weg.aus { border-color: var(--line); background: none; color: var(--muted); }
.imp-weg.aus .imp-weg-an span { text-decoration: line-through; }
.import-balken { display: block; height: 4px; border-radius: 2px; background: rgba(148,163,184,.25); margin-top: 6px; overflow: hidden; }
.import-balken span { display: block; height: 100%; background: #16a34a; }
.blatt-titel .import-zeile { display: block; margin-top: 2px; opacity: .85; }

/* Lead (weiß): Symbol und Rand dunkel, sonst verschwände Weiß auf Weiß */
.ab-kachel.lead .ab-ic, .fkachel[data-out="lead"] .tile-ic { color: #334155; }
.ab-kachel.lead.on { background: #f1f5f9; border-color: #334155; }
.fkachel[data-out="lead"].on .tile-ic { background: #fff; color: #334155; box-shadow: inset 0 0 0 1.5px #334155; }
/* Blase aus lauter Leads (noch nirgends geklingelt) */
.cluster.weiss {
  --fill: #ffffff;
  color: #334155;
  box-shadow: 0 0 0 2px #334155, 0 3px 10px rgba(15, 23, 42, .42);
}
.ab-kachel.lead .ab-l { color: #334155; }

/* ---- Start und Ziel eines Laufwegs: Knöpfe auf der Karte, ein Tipp öffnet das Navi-Blatt ----
   Der Marker hängt unten mittig; translateY(50%) setzt den Punkt genau aufs Wegende.
   Die Fläche ist größer als der Punkt, damit der Finger ihn trifft. */
.weg-ende {
  width: 34px; height: 34px; transform: translateY(50%);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.weg-ende span, .navi-punkt {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .45);
  background: #16a34a;
}
.weg-ende.ziel span, .navi-titel.ziel .navi-punkt { background: #dc2626; }
.weg-ende:active span { transform: scale(1.2); }
.navi-titel { display: flex; align-items: center; gap: 8px; }
.navi-punkt { flex: 0 0 auto; width: 14px; height: 14px; border-width: 2px; }
.navi-knoepfe { display: flex; flex-direction: column; gap: 8px; }
.navi-knoepfe .btn { text-decoration: none; justify-content: center; min-height: 48px; }

/* Acht Kacheln zu viert: auf sehr schmalen Telefonen etwas kleinere Schrift,
   damit „Übersprungen" möglichst in einer Zeile bleibt. */
@media (max-width: 370px) {
  .ab-raster .ab-l { font-size: 10.5px; }
}