/*
 * Zubir Barber — Team-App im Wix-Stil
 *
 * Design-System aus den Vorlagen abgeleitet: fast schwarzer Grund, genau eine
 * Akzentfarbe (Blau), Karten mit weicher Rundung, dünne Trennlinien statt
 * Rahmen, kräftige Überschriften. Bewusst wenige Bausteine — die Vorlage lebt
 * von Ruhe, nicht von Effekten.
 */

:root {
  --a-bg:        #000000;   /* Seitengrund */
  --a-surface:   #101114;   /* Karten, Leisten */
  --a-surface-2: #17191d;   /* gehobene Fläche, Bottom-Sheet */
  --a-line:      #26282d;   /* Trennlinien */
  --a-fg:        #ffffff;
  --a-mut:       #8e949c;   /* Nebentext */
  --a-blue:      #5b9dff;   /* einzige Akzentfarbe */
  --a-blue-soft: #8ab4f8;   /* Werbekarte */
  --a-red:       #ff5a5a;   /* nur für Löschen/Warnung */
  --a-green:     #4ad07d;   /* nur für Zuwächse */
  --a-radius:    16px;
  --a-tap:       44px;      /* Mindestgröße für Fingerziele */
}

/* ── Grundgerüst ─────────────────────────────────────────────────────────── */

#zb-app {
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--a-bg);
  color: var(--a-fg);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(64px + var(--safe-b));   /* Platz für die untere Leiste */
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;                    /* kein Doppeltipp-Zoom */
}
/*
 * Reset bewusst mit :where() — das nimmt der ID jedes Gewicht. Ohne das
 * schlägt `#zb-app button` jede Komponenten-Klasse (.a-chip, .a-pill) und
 * setzt deren Hintergrund und Rahmen wieder zurück.
 */
#zb-app * { box-sizing: border-box; }
:where(#zb-app) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(#zb-app) a { color: var(--a-blue); text-decoration: none; }
/*
 * Das Theme faerbt in custom.css global `h1, h2, h3, h4 { color: var(--foreground) }`
 * — und `--foreground` ist dort nahezu weiss. Im Tagmodus stand damit jede
 * Ueberschrift der App weiss auf weiss. Hier bewusst MIT der ID statt :where(),
 * denn die Theme-Regel muss ueberstimmt werden, nicht nur ergaenzt.
 */
#zb-app h1, #zb-app h2, #zb-app h3, #zb-app h4 { color: var(--a-fg); }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */

.a-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--a-bg);
}
.a-logo { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--a-accent, #6b5b3a); }
.a-logo img { width: 100%; height: 100%; object-fit: cover; }
.a-site { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 700; flex: 1; min-width: 0; }
.a-site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-site svg { flex: 0 0 auto; }
.a-icobtn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--a-surface-2);
}
.a-icobtn.bare { background: none; }
.a-badge {
  position: absolute; transform: translate(12px, -12px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  /* Eigenes, tieferes Rot: auf --a-red (hell) schaffte Weiss nur 3,06. */
  background: #c62828; color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
/* `display` würde das hidden-Attribut sonst aushebeln. */
.a-badge[hidden] { display: none; }

/* ── Schnellzugriff (waagrecht scrollbar) ────────────────────────────────── */

.a-quick {
  display: flex; gap: 10px; padding: 6px 16px 16px;
  overflow-x: auto; scrollbar-width: none;
}
.a-quick::-webkit-scrollbar { display: none; }
.a-chip {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: var(--a-tap); padding: 0 20px; border-radius: 12px;
  background: #fff; color: #111; font-size: 15px; font-weight: 600;
}
.a-chip.icon-only { padding: 0; width: var(--a-tap); justify-content: center;
  background: var(--a-surface-2); color: var(--a-fg); }

/* ── Abschnitte und Karten ───────────────────────────────────────────────── */

.a-sec { padding: 0 16px 24px; }
.a-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.a-sec-h h2 { margin: 0; font-size: 21px; font-weight: 700; }
.a-sec-h a, .a-sec-h button { font-size: 15px; font-weight: 600; color: var(--a-blue); }
.a-sub { margin: 0; color: var(--a-mut); font-size: 15px; }

.a-card { background: var(--a-surface); border-radius: var(--a-radius); padding: 18px; }
.a-card + .a-card { margin-top: 12px; }

/* Fortschrittsbalken („Noch 5 Schritte") */
.a-prog { height: 6px; border-radius: 3px; background: var(--a-line); overflow: hidden; flex: 1; }
.a-prog i { display: block; height: 100%; background: var(--a-blue); border-radius: 3px; }
.a-prog-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }

/* Werbekarte (hellblau, dunkle Schrift) */
.a-promo { background: var(--a-blue-soft); color: #0b1b3a; border-radius: var(--a-radius); padding: 22px; }
.a-promo h3 { margin: 0 0 20px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.a-promo button { background: #fff; color: #1a56db; font-weight: 700; font-size: 16px;
  padding: 14px 22px; border-radius: 999px; width: 100%; }

/* ── Zeitraum-Auswahl ────────────────────────────────────────────────────── */

.a-pills { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 14px 0 10px; }
.a-pills::-webkit-scrollbar { display: none; }
.a-pill {
  flex: 0 0 auto; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--a-line); color: var(--a-mut); font-size: 15px; white-space: nowrap;
}
.a-pill.on { border-color: var(--a-blue); color: var(--a-blue); }

/* ── Kennzahlen ──────────────────────────────────────────────────────────── */

.a-kpi { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--a-line); }
.a-kpi:first-of-type { border-top: 0; }
.a-kpi-t { flex: 1; min-width: 0; }
.a-kpi-t p { margin: 0 0 4px; font-size: 16px; }
.a-kpi-v { font-size: 24px; font-weight: 700; }
.a-kpi-d { font-size: 15px; font-weight: 600; margin-left: 8px; }
.a-kpi-d.up { color: var(--a-green); }
.a-kpi-d.down { color: var(--a-red); }
.a-spark { width: 76px; height: 34px; flex: 0 0 auto; }

/* ── Listen ──────────────────────────────────────────────────────────────── */

.a-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; min-height: 64px;
  border-bottom: 1px solid var(--a-line);
}
.a-row:last-child { border-bottom: 0; }
.a-row-t { flex: 1; min-width: 0; }
.a-row-t b { display: block; font-size: 17px; font-weight: 700; }
.a-row-t small { display: block; color: var(--a-mut); font-size: 15px; margin-top: 2px; }
.a-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--a-surface-2); flex: 0 0 auto; }
.a-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; }
.a-chev { color: var(--a-mut); flex: 0 0 auto; }

/* ── Untere Leiste ───────────────────────────────────────────────────────── */

.a-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--a-surface);
  border-top: 1px solid var(--a-line);
  padding-bottom: var(--safe-b);
}
.a-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; color: var(--a-mut); font-size: 11.5px; font-weight: 600;
  position: relative;
}
.a-nav button.on { color: var(--a-blue); }
/* Blauer Punkt am Postfach-Reiter bei ungelesenen Nachrichten (pro Mitarbeiter). */
.a-nav-dot {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--a-blue);
}

/* ── Ansichten ───────────────────────────────────────────────────────────── */

.a-view { display: none; }
.a-view.on { display: block; animation: a-in .16s ease both; }
/*
 * Nur Deckkraft, kein `transform`. Ein animiertes `transform` macht das
 * Element zum Bezugsrahmen fuer `position: fixed` — solange die Animation
 * laeuft (und im nicht-kompositierenden Browser bleibt sie stehen). Fixe
 * Kinder wie die Fusszeilen-Aktion klebten dann am Blatt statt am Bildschirm.
 */
@keyframes a-in { from { opacity: 0; } to { opacity: 1; } }

.a-title { margin: 4px 16px 12px; font-size: 32px; font-weight: 700; }

/* ── Suchfeld ────────────────────────────────────────────────────────────── */

.a-search { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; }
.a-search-in {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--a-surface); border-radius: 12px; padding: 0 14px; height: 48px;
}
.a-search-in input { flex: 1; background: none; border: 0; color: var(--a-fg); font-size: 16px; outline: none; }
.a-search-in input::placeholder { color: var(--a-mut); }

/* ── Leerer Zustand / Skelett ────────────────────────────────────────────── */

.a-empty { padding: 56px 24px; text-align: center; color: var(--a-mut); }
.a-empty b { display: block; color: var(--a-fg); font-size: 18px; margin-bottom: 6px; }
.a-skel { height: 64px; margin: 0 16px 10px; border-radius: 12px;
  background: linear-gradient(90deg, var(--a-surface) 25%, var(--a-surface-2) 50%, var(--a-surface) 75%);
  background-size: 200% 100%; animation: a-sh 1.2s infinite; }
@keyframes a-sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Unterbereich (Buchungen) ────────────────────────────────────────────── */

.a-sheet {
  position: fixed; inset: 0; z-index: 50;
  background: var(--a-bg); overflow-y: auto;
  /*
   * Auf Tablets landete die Wischgeste manchmal am Dokument statt im Blatt —
   * dann liess sich die Liste nicht scrollen. `touch` schaltet den weichen
   * Bildlauf ein, `contain` haelt die Geste im Blatt.
   */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Platz fuer die Fusszeilen-Aktion (~56px) plus etwas Luft. */
  padding-bottom: calc(76px + var(--safe-b));
  animation: a-slide .18s ease both;
}
/* Ebenfalls nur Deckkraft — sonst verankert das Blatt seine fixe Fusszeile
   an sich selbst statt am Bildschirm (siehe a-in). */
@keyframes a-slide { from { opacity: 0; } to { opacity: 1; } }

.a-subhead {
  position: sticky; top: 0; z-index: 5; background: var(--a-bg);
  display: flex; align-items: flex-start; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.a-subhead .a-back { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -8px; }
.a-subhead h1 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.15; }
.a-subhead p { margin: 2px 0 0; color: var(--a-mut); font-size: 16px; }

/* Waagrechte Reiter */
/*
 * Fünf Reiter müssen auf ein Handy passen. Mit fester Schriftgröße und 26px
 * Abstand lagen „Mitarbeiter" und „Einstellungen" außerhalb des Bildschirms —
 * man kam nur durch seitliches Wischen hin, ohne dass etwas darauf hindeutete.
 * Daher: gleichmäßig verteilt und mit der Breite mitwachsende Schrift.
 */
.a-tabs {
  position: sticky; top: 0; z-index: 4;
  /* Reiter behalten ihre natuerliche Breite und laufen bei vielen (6+) ueber
     den Rand -> horizontal wischbar. Vorher quetschte space-between + schrumpf-
     bare Buttons alles in die Breite (auf dem Handy extrem eng, kein Scrollen). */
  display: flex; justify-content: flex-start; gap: 4px; padding: 6px 12px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: var(--a-bg); border-bottom: 1px solid var(--a-line);
}
.a-tabs::-webkit-scrollbar { display: none; }
.a-tabs button {
  flex: 0 0 auto; padding: 10px 10px 12px;
  font-size: clamp(14px, 3.6vw, 17px); font-weight: 600;
  color: var(--a-mut); border-bottom: 3px solid transparent; white-space: nowrap;
}
.a-tabs button.on { color: var(--a-blue); border-bottom-color: var(--a-blue); }

/* Monatsleiste */
.a-monthbar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; }
.a-monthbar b { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 700; }

/* Tagesgruppen im Kalender */
.a-day { display: flex; gap: 14px; padding: 0 16px 4px; }
/* `display: flex` schlaegt das hidden-Attribut — ohne diese Zeile standen die
   Termine bei offener Monatsuebersicht weiter unter dem Raster. */
.a-day[hidden] { display: none; }
.a-day-l { width: 46px; flex: 0 0 auto; padding-top: 14px; text-align: center; }
.a-day-l small { display: block; font-size: 13px; color: var(--a-mut); text-transform: uppercase; font-weight: 600; }
.a-day-l b { display: block; font-size: 27px; font-weight: 700; line-height: 1.1; }
.a-day-r { flex: 1; min-width: 0; }

.a-bcard {
  background: var(--a-surface); border-radius: 12px; border-left: 3px solid var(--a-blue);
  padding: 14px 16px; margin-bottom: 12px; position: relative;
}
.a-bcard .t { color: var(--a-mut); font-size: 15px; }
.a-bcard b { display: block; font-size: 17px; font-weight: 700; margin: 4px 0 6px; }
.a-bcard small { display: block; color: var(--a-mut); font-size: 15px; line-height: 1.45; }
.a-bcard .dots { position: absolute; top: 8px; right: 6px; width: 36px; height: 36px;
  display: grid; place-items: center; color: var(--a-mut); }
.a-bcard.done, .a-bcard.vorbei { opacity: .55; }
.a-bcard.off  { border-left-color: var(--a-red); }
/* „Jetzt"-Linie im Kalender: aktuelle Uhrzeit, trennt vergangene von kommenden Terminen. */
.a-nowline { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px -60px; }
.a-nowline span { flex: 0 0 46px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--a-red); font-variant-numeric: tabular-nums; }
.a-nowline::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: var(--a-red); }
/* Läuft die Linie ganz oben (auf Höhe des Datums „Mi 18"), die Uhrzeit ausblenden — sonst überlappt sie das Datum. */
.a-day-r > .a-nowline:first-child span { visibility: hidden; }

/* Fußzeilen-Aktion („Neuen Service erstellen") */
.a-footact {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 14px 16px calc(14px + var(--safe-b));
  background: var(--a-surface-2); border-top: 1px solid var(--a-line);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--a-blue); font-size: 17px; font-weight: 600;
}

/* Bottom-Sheet („Weitere Aktionen") */
.a-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; }
.a-bs { width: 100%; background: var(--a-surface-2); border-radius: 18px 18px 0 0;
  padding-bottom: var(--safe-b); animation: a-up .2s ease both; }
@keyframes a-up { from { transform: translateY(30px); } to { transform: none; } }
.a-bs-h { padding: 16px 20px 8px; color: var(--a-mut); font-size: 15px; }
.a-bs-h::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px;
  background: var(--a-line); margin: -6px auto 14px; }
.a-bs button { display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 17px 20px; font-size: 17px; font-weight: 600; text-align: left;
  border-top: 1px solid var(--a-line); }
.a-bs button.danger { color: var(--a-red); }

/* Standort-Verwaltung im zentralen Popup (Liste + ⋯-Menue je Filiale). */
.a-loclist { display: flex; flex-direction: column; }
.a-loclist .a-locrow {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 20px; border-top: 1px solid var(--a-line); cursor: pointer;
}
.a-loclist .a-locrow:hover { background: var(--a-surface, rgba(0,0,0,.04)); }
.a-loclist .a-locav {
  flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: var(--a-accent, #6b5b3a);
}
.a-loclist .a-locav img { width: 100%; height: 100%; object-fit: cover; }
.a-loclist .a-locname { flex: 1; font-size: 16px; font-weight: 600; }
.a-bs .a-locmenu {
  flex: none; width: 40px; height: 40px; padding: 0; border: 0;
  background: transparent; color: var(--a-mut); display: grid; place-items: center;
  border-radius: 10px; cursor: pointer;
}
.a-bs .a-locneu { gap: 10px; color: var(--a-accent-ink, #0a5b55); font-weight: 700; }

/* ── Nachrichtenverlauf ──────────────────────────────────────────────────── */

.a-chatwrap { padding: 12px 16px 96px; display: flex; flex-direction: column; gap: 10px; }
.a-bub { max-width: 82%; background: var(--a-surface); border-radius: 16px 16px 16px 4px; padding: 12px 14px; }
.a-bub.me { align-self: flex-end; background: #1d3a63; border-radius: 16px 16px 4px 16px; }
.a-bub p { margin: 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap; }
.a-bub time { display: block; margin-top: 6px; font-size: 12.5px; color: var(--a-mut); }

.a-composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 14px calc(10px + var(--safe-b));
  background: var(--a-surface-2); border-top: 1px solid var(--a-line);
}
.a-composer textarea {
  flex: 1; resize: none; max-height: 120px;
  background: var(--a-bg); color: var(--a-fg); border: 1px solid var(--a-line);
  border-radius: 20px; padding: 12px 16px; font: inherit; font-size: 16px; outline: none;
}
.a-composer button {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--a-blue); color: #06214d; display: grid; place-items: center;
  transition: opacity .15s, background .15s;
}
/* Leer = blasser, nicht klickbar; sobald getippt wird, leuchtet das Senden-Icon. */
.a-composer button:disabled { opacity: .38; cursor: default; }

/* Mail-Schalter im Gesprächskopf: Antwort zusätzlich per E-Mail schicken. */
.a-subhead-t { flex: 1 1 auto; min-width: 0; }
.a-subhead-t h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-mailtog {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  align-self: center; padding: 6px 2px; cursor: pointer; user-select: none;
}
.a-mailtog-t { color: var(--a-mut); font-size: 14.5px; font-weight: 600; }
.a-mailsw {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 25px; border-radius: 13px; flex: 0 0 auto;
  background: var(--a-line); position: relative; transition: background .15s; cursor: pointer;
}
.a-mailsw::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .15s;
}
.a-mailsw:checked { background: var(--a-blue); }
.a-mailsw:checked::after { transform: translateX(17px); }

/* ── Kurzmeldung ─────────────────────────────────────────────────────────── */

.a-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + var(--safe-b)); z-index: 70;
  background: var(--a-surface-2); border: 1px solid var(--a-line);
  border-radius: 12px; padding: 12px 18px; font-size: 15px; max-width: 88vw; text-align: center;
}

/* Suchtreffer: Service links, Zeitpunkt rechts */
.a-hit {
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px; border-bottom: 1px solid var(--a-line);
}
.a-hit b { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; }
.a-hit span { flex: 0 0 auto; color: var(--a-mut); font-size: 15px; white-space: nowrap; }

/* Monatstitel bleibt beim Scrollen oben stehen */
.a-monthbar { position: sticky; top: 52px; z-index: 3; background: var(--a-bg); }

/* Beim Springen zu einem Tag Platz für Reiter (52px) + Monatsleiste (68px)
   lassen — sonst landet die Tagesüberschrift hinter der klebenden Leiste. */
.a-day { scroll-margin-top: 120px; }

/* ── Monatsübersicht (aufklappbar) ───────────────────────────────────────── */

#a-month { display: flex; align-items: center; gap: 8px; flex: 1;
  font-size: 19px; font-weight: 700; }
#a-month .a-caret { display: inline-flex; transition: transform .18s ease; }
#a-month.open .a-caret { transform: rotate(180deg); }

.a-gm { padding: 8px 16px 26px; }
.a-gm h3 { margin: 12px 0 14px; font-size: 21px; font-weight: 700; }
.a-gw, .a-gg { display: grid; grid-template-columns: repeat(7, 1fr); }
.a-gw span { text-align: center; font-size: 13px; font-weight: 600;
  color: var(--a-mut); padding-bottom: 10px; }
.a-gd {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  font-size: 18px; border-radius: 50%;
}
.a-gd i {
  position: absolute; bottom: 22%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--a-blue);
}
.a-gd.heute { box-shadow: inset 0 0 0 1.5px var(--a-fg); }

/* ── Termin-Detail ───────────────────────────────────────────────────────── */

/* Inhalt einer Vollbild-Ebene (openEbene) — der Kopf sitzt darüber. */
.a-ebody { padding-bottom: 8px; }

.a-det { padding: 8px 16px 4px; }
.a-det-h { display: flex; align-items: flex-start; gap: 12px; }
.a-det-h h2 { margin: 0; font-size: 22px; font-weight: 700; flex: 1; line-height: 1.2; }
.a-det-when { margin: 8px 0 0; color: var(--a-mut); font-size: 16px; line-height: 1.5; }
.a-det-when b { color: var(--a-fg); font-size: 19px; }

/* Status-Kennzeichen. Farbe nur, wo sie etwas bedeutet — sonst neutral. */
.a-chipst {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  background: var(--a-surface); color: var(--a-mut); border: 1px solid var(--a-line);
}
.a-chipst.confirmed { color: var(--a-blue);  border-color: #24406e; }
.a-chipst.completed { color: var(--a-green); border-color: #23503a; }
.a-chipst.cancelled,
.a-chipst.no_show   { color: var(--a-red);   border-color: #5a2a2a; }

.a-warn {
  margin: 12px 16px 0; padding: 12px 14px; border-radius: 12px;
  background: #2a1a1a; border: 1px solid #5a2a2a; color: var(--a-red); font-size: 15px;
}

.a-det-rows { margin-top: 16px; border-top: 1px solid var(--a-line); }
.a-det-row {
  display: flex; gap: 16px; padding: 13px 16px;
  border-bottom: 1px solid var(--a-line); font-size: 16px;
}
.a-det-row span { flex: 0 0 108px; color: var(--a-mut); }
.a-det-row div  { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.a-det-acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }
.a-btn {
  flex: 1 1 auto; min-height: var(--a-tap); padding: 12px 18px;
  border-radius: 12px; font-size: 16px; font-weight: 600; text-align: center;
  background: var(--a-surface-2); border: 1px solid var(--a-line); color: var(--a-fg);
}
.a-btn.primary { background: var(--a-blue); border-color: var(--a-blue); color: #06214d; }
.a-btn.danger  { background: none; border-color: #5a2a2a; color: var(--a-red); }
.a-btn:disabled { opacity: .5; }

/* Verlauf */
.a-ev { padding: 12px 16px; border-bottom: 1px solid var(--a-line); }
.a-ev b     { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.45; }
.a-ev small { display: block; margin-top: 4px; color: var(--a-mut); font-size: 13px; }

/* Notizfeld — wie der Composer im Postfach, aber im Fluss statt am Rand. */
.a-notiz { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px; }
.a-notiz textarea {
  flex: 1; resize: none; max-height: 120px;
  background: var(--a-bg); color: var(--a-fg); border: 1px solid var(--a-line);
  border-radius: 16px; padding: 12px 14px; font: inherit; font-size: 16px; outline: none;
}
.a-notiz .a-btn { flex: 0 0 auto; }

/* Umbuchen: Tageswahl + freie Zeiten */
.a-datewrap { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.a-datewrap input {
  flex: 1; min-height: var(--a-tap);
  background: var(--a-surface-2); color: var(--a-fg); border: 1px solid var(--a-line);
  border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 16px;
}
.a-datewrap [data-d="-1"] { transform: rotate(90deg); }
.a-datewrap [data-d="1"]  { transform: rotate(-90deg); }

.a-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px; padding: 4px 16px 16px;
}
.a-slot {
  min-height: var(--a-tap); border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--a-surface-2); border: 1px solid var(--a-line); color: var(--a-fg);
}
.a-slot:disabled { opacity: .5; }

/* ── Formulare (Service, Mitarbeiter) ────────────────────────────────────── */

.a-form { padding: 4px 16px 0; }
.a-fld { display: block; margin-top: 16px; }
.a-fld > span { display: block; margin-bottom: 6px; color: var(--a-mut); font-size: 14.5px; }
.a-fld input:not([type="checkbox"]),
.a-fld select,
.a-fld textarea {
  width: 100%; min-height: var(--a-tap);
  background: var(--a-surface-2); color: var(--a-fg);
  border: 1px solid var(--a-line); border-radius: 12px;
  padding: 11px 14px; font: inherit; font-size: 16px; outline: none;
}
.a-fld textarea { resize: vertical; line-height: 1.45; }
.a-fld input:focus, .a-fld select:focus, .a-fld textarea:focus { border-color: var(--a-blue); }
/* Eigener Pfeil: Der System-Pfeil ist im Nachtmodus kaum zu sehen. */
.a-fld select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* Schalter-Zeile: Beschriftung links, Schalter rechts */
.a-fld.sw {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--a-tap); margin-top: 20px;
}
.a-fld.sw > span { margin: 0; color: var(--a-fg); font-size: 16.5px; font-weight: 600; }
.a-fld.sw input {
  appearance: none; -webkit-appearance: none;
  width: 50px; height: 30px; border-radius: 15px; flex: 0 0 auto;
  background: var(--a-line); position: relative; transition: background .15s;
}
.a-fld.sw input::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.a-fld.sw input:checked { background: var(--a-blue); }
.a-fld.sw input:checked::after { transform: translateX(20px); }

/* ── Benachrichtigungs-Matrix (App-Feed / Push je Meldungstyp) ────────────── */
.a-nhead, .a-nrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px;
  align-items: center; gap: 8px; padding: 4px 16px;
}
.a-nhead { padding-bottom: 6px; }
.a-nhead span { color: var(--a-mut); font-size: 13px; text-align: center; }
.a-nhead span:first-child { text-align: left; }
.a-nrow { min-height: var(--a-tap); border-bottom: 1px solid var(--a-line); }
.a-nrow b { font-size: 16px; font-weight: 600; min-width: 0; }
.a-nrow input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; justify-self: center;
  width: 46px; height: 28px; border-radius: 14px;
  background: var(--a-line); position: relative; transition: background .15s;
}
.a-nrow input[type="checkbox"]::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.a-nrow input:checked { background: var(--a-blue); }
.a-nrow input:checked::after { transform: translateX(18px); }
.a-nrow input:disabled { opacity: .4; }

/* ── Arbeitszeiten je Wochentag ──────────────────────────────────────────── */

.a-zeiten { padding: 4px 16px 0; }
/*
 * Wochentag oben, die beiden Zeiten darunter. Vorher stand alles in einer
 * Reihe mit `1fr` fuer den Tag — diese Spalte kann aber nicht unter die
 * Textbreite von „Donnerstag" schrumpfen, also lief die Zeile auf schmalen
 * Handys aus dem Bild. Mit `minmax(0, 1fr)` und zwei Reihen kann das nicht
 * mehr passieren; ab 420px reicht der Platz wieder fuer eine Reihe.
 */
.a-ztag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "tag tag tag" "von bis frei";
  align-items: center; gap: 6px 8px;
  padding: 10px 0; border-bottom: 1px solid var(--a-line);
}
.a-ztag > span    { grid-area: tag; font-size: 15.5px; font-weight: 600; }
.a-ztag [data-zo] { grid-area: von; }
.a-ztag [data-zc] { grid-area: bis; }
.a-ztag .a-zfrei  { grid-area: frei; }
.a-ztag input[type="time"] {
  width: 100%; min-width: 0;
  background: var(--a-surface-2); color: var(--a-fg);
  border: 1px solid var(--a-line); border-radius: 10px;
  padding: 8px 8px; font: inherit; font-size: 15px; min-height: 38px;
}
@media (min-width: 420px) {
  /*
   * Ab hier passt alles in eine Reihe. Die Zeitfelder bekommen eine
   * Mindestbreite — mit `auto` blieben sie so schmal wie ihr Inhalt und
   * standen auf dem Tablet gequetscht neben einer sehr breiten Tagesspalte.
   */
  .a-ztag {
    grid-template-columns: minmax(0, 1fr) minmax(116px, auto) minmax(116px, auto) auto;
    grid-template-areas: "tag von bis frei";
    gap: 10px 14px;
    padding: 12px 0;
  }
  .a-ztag > span { font-weight: 400; }
  .a-ztag input[type="time"] { padding: 10px 12px; font-size: 16px; min-height: 44px; }
  .a-zfrei { font-size: 15px; }
}
.a-ztag input[type="time"]:disabled { opacity: .4; }
.a-zfrei { display: flex; align-items: center; gap: 5px; color: var(--a-mut); font-size: 14px; }
.a-zfrei input { width: 18px; height: 18px; accent-color: var(--a-blue); }

/* ── Helles Thema ────────────────────────────────────────────────────────── */
/*
 * Zweiter Variablensatz statt zweitem Stylesheet: Die Bausteine oben greifen
 * ausnahmslos auf die Variablen zu, also genügt es, sie umzusetzen.
 * Das Attribut sitzt auf <html> und wird vor dem ersten Zeichnen gesetzt.
 */
:root[data-zb-thema="hell"] {
  --a-bg:        #ffffff;
  --a-surface:   #f4f5f7;
  --a-surface-2: #eceef1;
  --a-line:      #dcdfe4;
  --a-fg:        #16181d;
  --a-mut:       #5f6672;
  --a-blue:      #1a63d8;   /* dunkler als im Nachtmodus — auf Weiß lesbar */
  --a-blue-soft: #cfe0ff;
  --a-red:       #cc2b2b;
  /* #12864a schaffte auf der Kartenfläche nur 4,25 — auf Weiß gerechnet
     sah es ausreichend aus, auf --a-surface nicht mehr. */
  --a-green:     #0f7a43;
}
/*
 * Der Grund liegt am <body>. Das Theme setzt dort
 * `background: var(--background) !important` (custom.css) — ohne gleiche
 * Waffen bliebe die Seite im Tagmodus dunkel. Eng auf die Vollbild-App
 * gefasst, damit die übrige Webseite unberührt bleibt.
 */
body.zb-app-fullscreen { background: var(--a-bg) !important; }
:root[data-zb-thema="hell"] body { background: #fff; }
/* Der Überhang der Bottom-Sheets ist auf Schwarz gerechnet. */
:root[data-zb-thema="hell"] .a-modal { background: rgba(20,22,26,.34); }
/* Diese drei Flächen sind fest dunkel gesetzt — im Tagmodus unleserlich. */
:root[data-zb-thema="hell"] .a-bub.me { background: var(--a-blue-soft); }
:root[data-zb-thema="hell"] .a-warn {
  background: #fdeaea; border-color: #f0bcbc;
}
:root[data-zb-thema="hell"] .a-chipst.cancelled,
:root[data-zb-thema="hell"] .a-chipst.no_show { border-color: #f0bcbc; }
/* Weiße Schnellzugriff-Knöpfe wären auf weißem Grund unsichtbar. */
:root[data-zb-thema="hell"] .a-chip {
  background: var(--a-surface-2); color: var(--a-fg);
  box-shadow: inset 0 0 0 1px var(--a-line);
}
/* Buchstaben-Avatare tragen weiße Schrift auf kräftiger Farbe — bleibt so. */

/* ── Standortwechsel (Überhang) ──────────────────────────────────────────── */

.a-switch {
  position: fixed; inset: 0; z-index: 70;
  background: var(--a-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.a-switch p { margin: 0; color: var(--a-mut); font-size: 16px; }
.a-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--a-line); border-top-color: var(--a-blue);
  animation: a-turn .8s linear infinite;
}
@keyframes a-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .a-spin { animation-duration: 2.4s; } }

/* Umschalter ohne zweite Filiale: kein Pfeil, kein Tippgefühl. */
.a-site[disabled] { cursor: default; }

/* ── Meldungen ───────────────────────────────────────────────────────────── */

/* Symbolfläche in der Meldungsliste — kleiner als ein Personen-Avatar. */
.a-avatar.mel { width: 44px; height: 44px; background: var(--a-surface-2); color: var(--a-blue); }
.a-age { color: var(--a-mut); font-size: 14px; flex: 0 0 auto; align-self: flex-start; padding-top: 2px; }
/* Ungelesenes trägt links einen Punkt, wie in der Vorlage. */
.a-row.neu { position: relative; }
.a-row.neu::before {
  content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--a-red);
}
/*
 * Gelesenes tritt zurück. Bewusst nur in den Meldungslisten: ungestuft
 * träfe der Selektor jede Zeile der App (Services, Mitarbeiter, …) und
 * würde dort die Namen ausdünnen.
 */
#a-mlist .a-row:not(.neu) .a-row-t b,
#a-alist .a-row:not(.neu) .a-row-t b { font-weight: 500; }
/* Die Meldung ist Fließtext, keine Überschrift — sie darf umbrechen. */
#a-mlist .a-row-t b, #a-alist .a-row-t b { font-size: 15.5px; line-height: 1.35; }

/* ── Zeitraum (Von/Bis beim Abmelden) ────────────────────────────────────── */

.a-zeitraum { display: flex; gap: 10px; padding: 4px 16px 8px; }
.a-zeitraum label { flex: 1; min-width: 0; display: block; }
.a-zeitraum span { display: block; color: var(--a-mut); font-size: 14px; margin-bottom: 5px; }
.a-zeitraum input {
  width: 100%; min-height: var(--a-tap);
  background: var(--a-surface-2); color: var(--a-fg);
  border: 1px solid var(--a-line); border-radius: 12px;
  padding: 9px 12px; font: inherit; font-size: 16px;   /* 16px: iOS zoomt sonst beim Tippen */
}
/* Gesperrter Knopf muss als gesperrt zu erkennen sein. */
.a-btn[disabled] { opacity: .45; cursor: default; }

/* ── Heutige Termine auf dem Start ───────────────────────────────────────── */

.a-heute-z {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; min-height: var(--a-tap);
  border-bottom: 1px solid var(--a-line);
}
.a-heute-z:last-child { border-bottom: 0; }
.a-heute-z .t {
  flex: 0 0 auto; width: 48px;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.a-heute-z .a-row-t b { font-size: 16px; }
/* Vergangenes tritt zurück, damit der nächste Termin ins Auge fällt. */
.a-heute-z.vorbei { opacity: .45; }
.a-heute-z.vorbei .t { font-weight: 500; }

/* ── Große Bildschirme ───────────────────────────────────────────────────── */
/*
 * Die App ist fürs Handy gebaut. Auf Tablet und Desktop bliebe sie sonst
 * über die ganze Breite gezogen: 30 cm lange Zeilen, Knöpfe am Rand.
 * Stattdessen eine mittige Spalte in Handy-Breite.
 */
/*
 * Erster Versuch war eine 560px-Spalte in der Mitte. Auf einem Tablet im
 * Querformat stand die App damit als schmaler Streifen in viel Leere — der
 * Bildschirm war nicht gedeckt. Jetzt umgekehrt: Die App fuellt immer das
 * ganze Fenster, und nur die INHALTE bekommen eine Lesebreite. Damit ist der
 * Grund ueberall durchgehend, ohne dass Zeilen 30 cm lang werden.
 */
@media (min-width: 720px) {
  :root { --a-lese: 760px; }

  /*
   * Eine Regel für alle Leisten und Flächen: Die Fläche spannt über das
   * Fenster, der Inhalt bekommt seitlich so viel Abstand, dass er mittig in
   * Lesebreite steht. Ein Grid mit benannten Spalten hatte hier die Kopfzeile
   * zerlegt — alle Kinder landeten in DERSELBEN Spalte und standen dadurch
   * untereinander statt nebeneinander. Padding lässt das vorhandene Flex-
   * Layout unangetastet.
   */
  .a-top, .a-nav, .a-subhead, .a-tabs, .a-monthbar {
    padding-inline: max(16px, calc((100% - var(--a-lese)) / 2));
  }
  /*
   * Fusszeilen-Aktion und Schreibfeld bekommen die Spaltenbreite selbst statt
   * nur Innenabstand: Eine ueber 1280px gezogene Flaeche mit einem Wort in der
   * Mitte sieht aus, als haenge sie in der Luft.
   */
  .a-footact, .a-composer {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(100%, var(--a-lese));
    border-inline: 1px solid var(--a-line);
  }
  /* Flächen ohne eigene Leiste: einfach mittig begrenzen. */
  .a-view, .a-ebody, #a-bbody, .a-chatwrap, .a-anmeldung #zb-login,
  .a-det-rows, .a-abmelden {
    max-width: var(--a-lese);
    margin-inline: auto;
  }
  /*
   * Formular-Bloecke schmaler als die Lesebreite: Ueber 900px gezogen stehen
   * Eingabefelder riesig da, und bei den Arbeitszeiten drueckt die 1fr-Tag-
   * spalte die Uhrzeit-Felder mit grossem Loch an den rechten Rand (Bild 2).
   * 480px haelt Tag und Zeiten dicht beieinander.
   */
  .a-form, .a-zeiten, .a-bildwahl, #a-svst {
    max-width: 480px;
    margin-inline: auto;
  }
}

/* Sehr breite Schirme: zwei Spalten fuer die Startseite. */
@media (min-width: 1100px) {
  :root { --a-lese: 900px; }
}

/* ── Profilbild im Mitarbeiter-Formular ──────────────────────────────────── */

.a-bildwahl { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px 4px; }
.a-bildwahl > button { position: relative; display: block; border-radius: 50%; }
.a-bildwahl .a-avatar { width: 96px; height: 96px; font-size: 34px; }
.a-bildstift {
  position: absolute; right: -2px; bottom: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--a-blue); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--a-bg);
}
.a-bildstift svg { width: 18px; height: 18px; }
/* Textknopf ohne Fläche — für „entfernen" unter dem Bild. */
.a-linkbtn { font-size: 15px; font-weight: 600; color: var(--a-blue); padding: 6px 10px; }
.a-linkbtn.danger { color: var(--a-red); }

/* ── Sperrzeiten im Kalender (Feiertag, Urlaub, krank) ───────────────────── */
/*
 * Schraffur statt Farbfläche, wie in der Vorlage: Der Tag ist nicht belegt,
 * sondern zu — das soll man auf einen Blick von einem Termin unterscheiden.
 */
.a-bcard.sperre {
  border-left-color: var(--a-mut);
  background: repeating-linear-gradient(
    -45deg, var(--a-surface), var(--a-surface) 7px,
    var(--a-surface-2) 7px, var(--a-surface-2) 14px);
}
.a-bcard.sperre .t { color: var(--a-mut); }

/* ── Servicebild (breit statt rund) ──────────────────────────────────────── */

.a-bildwahl.breit > button { border-radius: 12px; width: 100%; }
.a-svcbild {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; object-fit: cover; background: var(--a-surface-2);
}
.a-svcbild.leer { display: grid; place-items: center; color: var(--a-mut); }
.a-bildwahl.breit .a-bildstift { right: 8px; bottom: 8px; }

/* ── Anmeldung (eigene Maske, nicht das WordPress-Formular) ──────────────── */

#zb-app.a-anmeldung {
  display: grid; place-items: center;
  padding: 24px 0 calc(24px + var(--safe-b));
  min-height: 100dvh;
}
#zb-login {
  width: 100%; max-width: 380px; padding: 0 20px;
  display: flex; flex-direction: column;
}
.a-anmeld-logo {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  align-self: center; margin-bottom: 18px; background: var(--a-surface-2);
}
#zb-login h1 { margin: 0; text-align: center; font-size: 26px; font-weight: 700; }
#zb-login .a-sub { text-align: center; margin-top: 6px; }
#zb-login .a-warn { margin: 18px 0 0; }
#zb-login .a-det-acts { margin-top: 8px; }

/* ── Abmelden (eigener Bereich statt Zeile in der Liste) ─────────────────── */

.a-abmelden { padding: 32px 16px calc(24px + var(--safe-b)); text-align: center; }
.a-abmelden .a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; max-width: 320px;
}
.a-abmelden .a-sub { margin-top: 10px; font-size: 14px; }

/* ── Meldungen mit Ziel ──────────────────────────────────────────────────── */

.a-row.klickbar { cursor: pointer; }
.a-row.klickbar:active { background: var(--a-surface); }

/* ── Abwesenheit in der Mitarbeiterliste ─────────────────────────────────── */

.a-abw { color: var(--a-red); font-weight: 600; }
/* Hinweis unter der Schalter-Beschriftung (z. B. „Urlaub bis 5. August"). */
.a-fld.sw > span small {
  display: block; margin-top: 3px;
  color: var(--a-mut); font-size: 13.5px; font-weight: 400; line-height: 1.35;
}

/* ── Kontakt-Knöpfe im Termin-Detail ─────────────────────────────────────── */

.a-kontakt { display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.a-kontakt > a, .a-kontakt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-kbtn {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--a-surface-2); color: var(--a-blue);
}
.a-kbtn:active { background: var(--a-line); }

/* Kontaktzeile: Wert linksbündig, Knopf ganz rechts — der Knopf soll auf
   einer Achse mit den anderen stehen, der Wert am Text der Zeile. */
.a-kontakt { justify-content: space-between; width: 100%; }

/* Vergangene Abwesenheiten treten zurück — sie stehen nur zum Nachschlagen da. */
.a-row.vorbei { opacity: .5; }

/* ── Postfach: Kontaktkarte und Zustand ──────────────────────────────────── */
/*
 * Bisher stand im Kopf nur der Name — Nummer und Adresse sah man nirgends,
 * obwohl genau die gebraucht werden, um zurückzurufen.
 */
.a-kontaktkarte {
  /* Zeilen mittig unter dem Namen — sonst klebt eine einzelne Zeile
     (z. B. nur „Erste Nachricht …") einsam am linken Rand. */
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 16px 14px; border-bottom: 1px solid var(--a-line);
}
.a-kkzeile {
  display: flex; align-items: center; gap: 10px;
  min-height: 34px; color: var(--a-mut); font-size: 15px;
}
.a-kkzeile svg { flex: 0 0 auto; color: var(--a-blue); }
a.a-kkzeile span { color: var(--a-blue); }
/* Offene Unterhaltungen tragen einen Punkt — erledigte nicht. */
.a-offen { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--a-blue); }

/* Kunden-Profil (Kontakte-Tab): Kennzahl-Kacheln + Info-/Verlaufszeilen. */
.a-kstats { display: flex; gap: 8px; padding: 6px 16px 12px; }
.a-kstat { flex: 1; background: var(--a-surface); border-radius: 12px; padding: 12px 6px; text-align: center; }
.a-kstat b { display: block; font-size: 19px; }
.a-kstat span { color: var(--a-mut); font-size: 12px; }
.a-krow { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--a-line); font-size: 15px; }
.a-krow > span { color: var(--a-mut); }
.a-knotiz { padding: 12px 16px; border-bottom: 1px solid var(--a-line); }
.a-knotiz > span { color: var(--a-mut); font-size: 13px; }
.a-khist-h { display: block; padding: 16px 16px 6px; color: var(--a-mut); font-size: 13px; }
.a-khrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--a-line); }
.a-khrow small { display: block; color: var(--a-mut); font-size: 13px; }
.a-khrow-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }

/* Notiz des Kunden im Termin-Detail: darf umbrechen. */
.a-kundennotiz { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }

/*
 * Schreibfeld: Auf dem Tablet rutschte es beim Tippen aus dem Bild, weil die
 * Bildschirmtastatur den sichtbaren Bereich verkleinert, `100vh` aber gleich
 * bleibt. `dvh` folgt der Tastatur.
 */
.a-chatwrap { padding-bottom: 108px; }
.a-composer { position: fixed; bottom: 0; }
@supports (height: 100dvh) {
  .a-sheet:has(.a-composer) { max-height: 100dvh; }
}

/* ── Rechts-nach-links (Arabisch) ──────────────────────────────────────────
   dir="rtl" auf #zb-app kehrt Textausrichtung und Flex-Reihenfolge automatisch
   um. Hier nur die Stellen, die feste links/rechts-Werte tragen: Richtungs-
   Symbole spiegeln, Badge/Schalter/Kopfzeilen an die andere Seite. */
[dir="rtl"] .a-back svg { transform: scaleX(-1); }
[dir="rtl"] .a-row > svg { transform: scaleX(-1); }           /* Chevron am Zeilenende */
[dir="rtl"] .a-subhead .a-back { margin-left: 0; margin-right: -8px; }
[dir="rtl"] .a-badge { transform: translate(-12px, -12px); }
[dir="rtl"] .a-bs-h { text-align: right; }
[dir="rtl"] .a-nhead span:first-child { text-align: right; }
/* Schalter (Kippschalter) laufen in RTL von rechts nach links. */
[dir="rtl"] .a-mailsw::after,
[dir="rtl"] .a-fld.sw input::after,
[dir="rtl"] .a-nrow input::after { left: auto; right: 3px; }
[dir="rtl"] .a-mailsw:checked::after { transform: translateX(-17px); }
[dir="rtl"] .a-fld.sw input:checked::after { transform: translateX(-20px); }
[dir="rtl"] .a-nrow input:checked::after { transform: translateX(-18px); }