/* Qardify Staff — Design-System.
   Eine Quelle fuer Abstand, Typo, Form, Farbe und Bewegung.
   Regel: im restlichen Stylesheet steht kein roher Zahlen- oder Farbwert
   mehr, der hier eine Rolle hat. Wer einen neuen Wert braucht, gibt ihm
   zuerst hier einen Namen. */

/* ── SCHRIFT (self-hosted) ────────────────────────────────
   Outfit Latin, Gewichte 300–700, font-display: swap. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/outfit-300.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/outfit-500.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/outfit-600.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/outfit-700.woff2") format("woff2")}

/* ── ABSTAND ──────────────────────────────────────────────
   Sieben Stufen, dazwischen nichts. Wer 18px braucht, nimmt 16 oder 24. */
:root{
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;  /* nur ganzseitige Leerzustaende */

/* ── TYPOGRAFIE ───────────────────────────────────────────
   Jede Groesse hat eine Aufgabe. Grade dazwischen gibt es nicht. */
  --ff-display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-body:    "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-mega:    56px;  /* genau eine pro Schirm: die Zahl, um die es geht */
  --fs-hero:    38px;  /* die eine Zahl, die den Bildschirm traegt      */
  --fs-display: 28px;  /* Stempelstand, Erfolgsmeldung                  */
  --fs-title:   22px;  /* Bildschirm-Ueberschrift                       */
  --fs-head:    17px;  /* Abschnitt, App-Bar, Zeilentitel              */
  --fs-body:    14px;  /* Fliesstext                                    */
  --fs-sm:      13px;  /* sekundaerer Fliesstext                        */
  --fs-label:   12px;  /* Label ueber einem Wert                        */
  --fs-hint:    11px;  /* Hinweis, Zeitstempel                          */
  --fs-micro:   10px;  /* Zaehler im Badge, Tab-Beschriftung           */

  --fw-regular: 500;
  --fw-medium:  600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight:   1.15;
  --lh-normal:  1.45;

/* ── FORM ─────────────────────────────────────────────────
   Radien kommen aus brand/tokens.css (--rad-*), siehe
   docs/rebrand-2026-09.md §6/§8. Abbildung der frueheren Staff-Werte:
   --r-sm 10 → --rad-tab 8 · --r-md 16 / --r-lg 24 / --r-group 12 → --rad-tile 12
   --r-pill / --r-circle → --rad-round. Keine Einzelfall-Ausnahmen. */

  --bw:       1px;
  --bw-strong: 1.5px;

/* ── BEWEGUNG ─────────────────────────────────────────────── */
  --spring: cubic-bezier(.34,1.35,.5,1);
  --ease:   cubic-bezier(.2,0,0,1);
  --t-fast:   .12s;   /* Druckfeedback: muss unter 100ms sichtbar sein */
  --t-base:   .25s;   /* Bildschirmwechsel                             */
  --t-slow:    .4s;   /* Fortschritt, Zaehler                          */

/* ── GERAET ──────────────────────────────────────────────── */
  /* Flache Tab-Leiste: 52px Interaktionszeile (≥44 Trefferfläche;
     Icon 22 + Gap 2 + Label ~11 + vertikales Padding). Safe-Area
     sitzt als padding-bottom der Leiste, nicht in --tab-h.
     FAB 56px ragt --tab-fab-over über die Trennlinie. */
  --tab-h:  52px;
  --tab-fab-size: 56px;
  --tab-fab-over: 8px;
  --safe-t: env(safe-area-inset-top,0px);
  --safe-b: env(safe-area-inset-bottom,0px);

/* ── FARBE — Rollen, hell ─────────────────────────────────
   Einziger Farbsatz. Kein Dunkel-/Hellumschalter mehr.
   Bernstein als Textfarbe: immer --a-700. Nie --a-400.        */
  --bg:             var(--n-100);  /* Seitengrund — sichtbar dunkler als Karten */
  --surface:        var(--n-0);    /* Flaeche                         */
  --surface-raised: var(--n-100);  /* erhoehte Flaeche                */
  --border:         var(--n-200);  /* Rahmen                          */
  --border-strong:  var(--n-500);  /* starker Rahmen: 3.62:1 auf --bg, 4.02:1 auf --surface */
  --text:           var(--n-900);  /* Text primaer                    */
  --text-muted:     var(--n-600);  /* Text gedaempft                  */
  --on-accent:      var(--n-900);  /* Text auf Akzent-Solid           */
  --on-solid:       var(--n-0);    /* helles Solid-Gegenstueck        */

  --accent:      var(--a-400);
  --accent-soft: rgba(255,163,31,.06);
  --accent-line: rgba(154,91,0,.28);
  --accent-hi:   rgba(154,91,0,.40);

  /* Zweit-Blau: Links + Toggle-An. Nicht Bernstein ersetzen.
     #0A66C2: ≥4.5:1 auf surface/raised.                             */
  --link:        #0A66C2;
  --link-soft:   rgba(10,102,194,.10);
  --link-line:   rgba(10,102,194,.28);
  --toggle-on:   var(--link);

  /* Icon-Badge-Fuelle — max. 5 Toene, Weiss-Icon ≥3:1 (1.4.11). */
  --badge-security: var(--a-700);
  --badge-people:   #A86B2D;
  --badge-people-text: #905B26;
  /* Mitarbeiter-Avatare (Lock, Team) — eigene Token, nicht .cus-av. */
  --av-staff-size: 36px;
  --av-staff-size-chip: 32px;
  --av-staff-fs: var(--fs-label);
  --av-staff-fs-chip: var(--fs-hint);
  --av-staff-fw: var(--fw-bold);
  --av-staff-fill: var(--accent-soft);
  --av-staff-text: var(--a-700);
  --badge-device:   #5C6570;
  --badge-business: #08704A;
  --badge-action:   #0A66C2;
  --badge-on:       var(--n-0);

  --ok:          #1F7A4C;
  --ok-soft:     rgba(18,168,112,.06);
  --ok-line:     rgba(8,112,74,.26);

  --err:         #B4453C;
  --err-calm:    #B4453C;
  --err-fill:    #B4453C;
  --err-soft:    rgba(229,72,77,.04);
  --err-line:    rgba(194,40,45,.26);

  --warn:        var(--a-700);
  --warn-soft:   rgba(224,160,32,.16);
  --warn-line:   rgba(138,90,0,.28);

  --reward:      #5B42D4;
  --reward-soft: rgba(91,66,212,.12);
  --reward-line: rgba(91,66,212,.28);

  --scrim:       rgba(23,20,31,.38);
  --shade:       rgba(23,20,31,.18);
  --rank-1:      #B8860B;
  --rank-2:      #6C757D;
  --rank-3:      #8C5A28;
  --void:        #000000;  /* Kamerabild, kein Theme */

  --sh1: 0 1px  2px rgba(23,20,31,.06);
  --sh2: 0 6px 24px rgba(23,20,31,.12);
  --sh3: 0 6px 20px rgba(154,91,0,.24);

/* ── Altnamen. Inline-Stile im JS greifen darauf zu. ─────── */
  --sf:      var(--surface);
  --sf2:     var(--surface-raised);
  --line:    var(--border);
  --muted:   var(--text-muted);
  --fg:      var(--text);
  --adim:    var(--accent-soft);
  --ok-dim:  var(--ok-soft);
  --err-dim: var(--err-soft);
}

/* ── RESET ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  margin:0;
  /* position:fixed + inset:0 statt min-height:100dvh — 100dvh laeuft im
     installierten PWA der Systemleiste hinterher, darunter blitzt die
     manifest-background_color als Streifen unter der Tab-Bar auf. */
  position:fixed;inset:0;
  background:var(--bg);color:var(--text);
  font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0;}
input{font-family:inherit;}
/* Fokus-Politik: Tap = keine Markierung; Tastatur-Ring nur bei hover+fine
   (WebKit setzt sonst :focus-visible auch beim Antippen).
   Offset +3px freistehend; Karten-Innen (−2px) siehe .ios-field / .ios-row. */
:focus-visible{outline:none;}
@media (hover:hover) and (pointer:fine){
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .ios-row:focus-visible,
  .staff-role-row:focus-visible,
  .gift-dur-chip:focus-visible{
    outline-offset:-2px;
  }
  .tab-item:focus-visible,
  #tab-fab:focus-visible,
  .sheet-icon-btn:focus-visible,
  .sheet-close:focus-visible,
  .btn:focus-visible{
    outline-offset:2px;
  }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Ambient-Glow entfernt: ruhige Flaeche (--bg) statt Gradient. */

/* ── APP SHELL ────────────────────────────────────────── */
/* #app-stage = Views + Tab-Bar (+ Offline-Banner). Sheets/Dialoge liegen
   AUSSERHALB und decken die Stage. Sheet-Praesentation (iOS): nur die Stage
   skaliert — Tiefe 1. Dialog spaeter: kein zweites Schrumpfen. */
#app-stage{
  position:fixed;inset:0;z-index:1;
  background:var(--bg);
  transform-origin:top center;
  transition:
    transform var(--t-slow) var(--ease),
    border-radius var(--t-slow) var(--ease);
  /* Compositor-Hint nur waehrend Sheet — sonst Dauer-Layer-Kosten */
}
body.sheet-presented #app-stage{
  transform:translateY(10px) scale(.92);
  border-radius:var(--rad-tile);
  overflow:hidden;
  pointer-events:none;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  body.sheet-presented #app-stage{
    transform:none !important;
    border-radius:0 !important;
    will-change:auto;
  }
}
#app{position:relative;z-index:1;width:100%;height:100%;overflow:hidden;}

/* ── VIEWS ────────────────────────────────────────────── */
.view{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transform:translateY(8px) scale(.99);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  will-change:opacity,transform;
}
.view.active{opacity:1;pointer-events:auto;transform:none;}
/* Vorwaerts kommt von rechts und schiebt den alten Schirm nach links,
   rueckwaerts genau andersherum. Wer nicht hinsieht, spuert trotzdem, ob
   er tiefer hinein oder wieder heraus geht. */
.view.enter-fwd{transform:translateX(28px) scale(.99);}
.view.enter-back{transform:translateX(-28px) scale(.99);}
.view.leave-fwd{transform:translateX(-20px) scale(.99);}
.view.leave-back{transform:translateX(20px) scale(.99);}

/* ── APP BAR ──────────────────────────────────────────── */
.app-bar{
  display:flex;align-items:center;gap:var(--s3);
  padding:calc(var(--safe-t) + var(--s3)) var(--s4) var(--s3);
  min-height:calc(var(--safe-t) + 44px + var(--s3) * 2);
  background:var(--bg);
  position:sticky;top:0;z-index:10;
  border-bottom:var(--bw) solid var(--border);
  flex-shrink:0;
  /* alle App-Bar-Texte eine Stufe grösser als der Body-Kopf-Wert */
  --fs-head: 19px;
}
.app-bar-title{
  flex:1;
  font-family:var(--ff-display);
  font-size:var(--fs-head);font-weight:var(--fw-bold);letter-spacing:-.01em;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.bar-btn{
  position:relative;
  width:44px;height:44px;border-radius:var(--rad-round);
  background:var(--surface);display:grid;place-items:center;
  color:var(--text-muted);transition:background var(--t-fast),color var(--t-fast);flex-shrink:0;
}
.bar-btn svg{display:block;}
.bar-btn-badge{
  position:absolute;top:0;right:0;
  min-width:18px;height:18px;padding:0 var(--s1);box-sizing:border-box;
  /* --on-solid (Weiss) auf Bernstein: 2.00:1 im Dunkelmodus. --on-accent
     wie bei .bar-action / Primary: 9.09:1 dunkel, 5.04:1 hell. */
  background:var(--accent);color:var(--on-accent);
  border-radius:var(--rad-round);border:2px solid var(--bg);
  font-size:var(--fs-micro);font-weight:var(--fw-heavy);
  display:flex;align-items:center;justify-content:center;line-height:1;
  pointer-events:none;
}
.bar-btn:hover,.bar-btn:active{background:var(--surface-raised);color:var(--text);}
.bar-btn--dim{margin-left:var(--s3);opacity:.5;}
.bar-btn--dim:hover,.bar-btn--dim:active{opacity:1;}
/* Textaktion rechts in der app-bar. Ersetzt .btn.btn-primary + Inline-Styles,
   damit jeder Header dieselbe Hoehe und dieselben Radien hat. */
.bar-action{
  height:38px;padding:0 var(--s4);border-radius:var(--rad-round);flex-shrink:0;
  background:var(--accent);color:var(--on-accent);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:var(--s2);
  transition:filter var(--t-fast),transform var(--t-fast);
}
.bar-action:hover{filter:brightness(1.07);}
.bar-action:active{transform:scale(.97);}
.bar-action[disabled]{opacity:.5;pointer-events:none;}

/* ── LOGO ─────────────────────────────────────────────── */
.logo{display:flex;align-items:center;gap:var(--s2);}
.logo-name{font-family:var(--ff-display);font-size:var(--fs-head);font-weight:var(--fw-bold);letter-spacing:-.01em;color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* Kachel + Wortmarke. Größe über --lockup (Fallback 40px). */
.brand-lockup{display:flex;align-items:center;gap:calc(var(--lockup, 40px) / 3);}
.brand-lockup svg{width:var(--lockup, 40px);height:var(--lockup, 40px);flex-shrink:0;}
.brand-lockup__text{font-family:var(--ff-display);font-weight:600;font-size:calc(var(--lockup, 40px) * .8);line-height:1;letter-spacing:-.035em;white-space:nowrap;}
.preloader-logo{--lockup:36px;}
.msus-logo{--lockup:32px;margin-bottom:var(--s2);}
.lock-logo .brand-lockup{--lockup:40px;}
.logo-name b{color:var(--a-700);}

/* ── BUTTONS — Rollen, Abmelden-Mass (44px), Kartenradius ─
   Logout (.ios-row--danger) bleibt Ausnahme (kraeftiges --err).
   Scan-Hauptaktionen: .btn-scan (groesser), nur Scan-Tab. */
.btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;min-height:44px;padding:var(--s3) var(--s4);
  border:0;border-radius:var(--rad-tile);box-sizing:border-box;
  font-size:var(--fs-body);font-weight:var(--fw-bold);letter-spacing:-.01em;
  transition:transform var(--t-fast) var(--spring),opacity var(--t-fast);flex-shrink:0;
}
/* .btn setzt display:flex — ohne !important bleibt [hidden] in WebKit sichtbar */
.btn[hidden]{display:none!important;}
/* P-18.10-R (R-B2): Face-ID-Zeile nur in der nativen Hülle; .ios-row setzt display:flex. */
#faceid-row[hidden]{display:none!important;}
.auto-arch-actions{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--s2);width:100%;
}
.auto-arch-actions .btn{
  width:auto;flex:1 1 auto;min-width:0;
}
.ios-row.ios-row--auto-arch{
  flex-direction:column;align-items:stretch;gap:0;
  padding-top:var(--s3);padding-bottom:var(--s3);
}
.ios-row.ios-row--auto-arch .ios-row-body{min-width:0;}
.btn:active{transform:scale(.97);opacity:.88;}
.btn:disabled{opacity:.4;pointer-events:none;}
/* 1 Primär — Bernstein */
.btn-primary{background:var(--accent);color:var(--on-accent);}
/* 2 Sekundär — weisse Flaeche + Rahmen (Abbrechen/Zurück/Später).
   --surface-raised ist --n-100 wie --bg: der Knopf war unsichtbar (1.00:1).
   Rahmen als Inset-Schatten, damit die Hoehe gleich bleibt; --border-strong
   3.62:1 auf --bg, 4.02:1 auf --surface (WCAG 1.4.11). */
.btn-secondary,
.btn-ghost{
  background:var(--surface);color:var(--text);border:0;
  box-shadow:inset 0 0 0 var(--bw) var(--border-strong);
}
/* 3 Destruktiv — neutrale Flaeche + angenehmes Rot (--err-calm), nie rot gefuellt.
   Default: --surface (hebt sich von --bg ab, wie Logout-Karte). */
.btn-danger{background:var(--surface);color:var(--err-calm);}
/* Irreversible Ausnahme (Konto loeschen): gleiche Schrift wie Abmelden */
.btn-danger--strong{color:var(--err);}
/* In Sheets (Hintergrund schon --surface): raised, sonst Verschmelzung. */
.bottom-sheet .btn-danger,
.sheet-body .btn-danger,
.sheet-footer .btn-danger{
  background:var(--surface-raised);
}
/* 4 Text-Link */
.btn-link{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  width:auto;min-height:0;padding:0;border:0;border-radius:0;
  background:transparent;color:var(--link);
  font-size:var(--fs-body);font-weight:var(--fw-medium);letter-spacing:0;
}
.btn-link:active{opacity:.7;transform:none;}
/* Scan-Tab: grosse Haupt-CTAs (QR-Dock / Stempel geben) — nur dort */
.btn-scan,
.btn.btn-stamp-big{
  min-height:56px;
  padding:var(--s4) var(--s5);
  font-size:var(--fs-head);
}
.empty-state > .btn,
.error-state > .btn{
  width:auto;align-self:center;padding-left:var(--s5);padding-right:var(--s5);
}
.btn-sm{width:auto;min-height:0;padding:var(--s2) var(--s3);font-size:var(--fs-sm);border-radius:var(--rad-round);}
.btn-multi{flex:1;padding-left:var(--s2);padding-right:var(--s2);}
/* Legacy-Fallback → gleiche Primär-Optik + Abmelden-Mass */
.accent-btn,.retry-btn,.close-day-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;min-height:44px;padding:var(--s3) var(--s4);
  border:0;border-radius:var(--rad-tile);box-sizing:border-box;
  font-size:var(--fs-body);font-weight:var(--fw-bold);letter-spacing:-.01em;
  background:var(--accent);color:var(--on-accent);
  transition:transform var(--t-fast) var(--spring),opacity var(--t-fast);cursor:pointer;
}
.accent-btn:active,.retry-btn:active,.close-day-btn:active{transform:scale(.97);opacity:.88;}
.empty-state > .accent-btn,
.error-state > .retry-btn{
  width:auto;align-self:center;padding-left:var(--s5);padding-right:var(--s5);
}
.close-day-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* ── INPUT ────────────────────────────────────────────── */
.input-wrap{display:flex;flex-direction:column;gap:var(--s2);}
.input-row{display:flex;gap:var(--s2);}
.input-row .input-field{flex:1;min-width:0;}
.input-row .btn{width:auto;flex-shrink:0;white-space:nowrap;}
.geo-search-wrap{position:relative;}
/* Suche nur auf Knopfdruck: Feld + Button nebeneinander (B2b). */
.geo-search-row{display:flex;gap:var(--s2);align-items:stretch;}
.geo-search-row .input-field{flex:1 1 auto;min-width:0;}
.geo-search-row .geo-search-btn{flex:0 0 auto;width:auto;padding:0 var(--s4);}
.geo-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:200;background:var(--surface);border:var(--bw-strong) solid var(--border-strong);border-radius:var(--rad-tile);box-shadow:0 4px 16px rgba(0,0,0,.2);max-height:220px;overflow-y:auto;}
.geo-dropdown-item{padding:var(--s3) var(--s4);cursor:pointer;font-size:var(--fs-sm);line-height:1.35;border-bottom:var(--bw) solid var(--border);}
.geo-dropdown-item:last-child{border-bottom:none;}
.geo-dropdown-item:hover{background:var(--surface-raised);}
.geo-dropdown-msg{padding:var(--s3) var(--s4);font-size:var(--fs-sm);color:var(--text-muted);}
.input-label{font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);text-transform:none;letter-spacing:.01em;}
.input-field{
  width:100%;background:var(--surface);border:var(--bw-strong) solid var(--border-strong);
  border-radius:var(--rad-tile);padding:var(--s4) var(--s4);
  font-family:var(--ff-body);
  font-size:var(--fs-head);font-weight:var(--fw-regular);color:var(--text);transition:border-color var(--t-fast);
}
textarea.input-field{font-family:var(--ff-body);}
.input-field::placeholder{color:var(--text-muted);}
/* Tap: keine Markierung. Tastatur: ein Bernstein-Ring (kein border-color).
   In .ios-field innen (−2px), sonst +2px — Kartenkanten bleiben sauber. */
.input-field:focus,
.input-field:focus-visible{outline:none;}
@media (hover:hover) and (pointer:fine){
  .input-field:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .ios-field .input-field:focus-visible{
    outline-offset:-2px;
  }
}
/* Freistehende Solo-Felder (Suche, Scan-E-Mail, No-Tenant) — nicht Base
   .input-field umbiegen (Sheets bleiben borderless über spezifischere Regeln).
   Fläche --surface auf --bg: Dark 1.11:1 / Light 1.08:1 — wie Karten, zu schwach.
   Rand --border vs bg/surface: Dark 1.27/1.14, Light 1.21/1.30 — zu schwach.
   Rand --border-strong: Dark 3.66/3.29, Light 3.28/3.53 (≥3:1 UI). */
.input-field.input-field--solo{
  background:var(--surface);
  border:var(--bw) solid var(--border-strong);
  border-radius:var(--rad-tile);
  min-height:44px;
  padding:var(--s3) var(--s4);
  font-size:var(--fs-head);
  box-sizing:border-box;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}

/* ── SPINNER ──────────────────────────────────────────── */
.spinner{
  width:18px;height:18px;
  border:2px solid var(--shade);border-top-color:currentColor;
  border-radius:var(--rad-round);animation:spin .65s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── CARD LABEL ───────────────────────────────────────── */
.card-label{font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);text-transform:none;letter-spacing:.01em;}

/* ══════════════════════════════════════════════════════
   TAB BAR — flach, volle Breite (Variante B)
══════════════════════════════════════════════════════ */
#tab-bar{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:200;
  box-sizing:border-box;
  background:var(--bg);
  border:none;border-radius:0;
  /* Haarlinie oben ohne Layout-Verlust (border-top wuerde --tab-h auffressen).
     --border auf --bg < 3:1 → --border-strong. */
  box-shadow:0 -1px 0 var(--border-strong);
  display:none;align-items:center;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
}
#tab-bar.vis{display:flex;}

/* Barista: 3 Slots — Dashboard | Scan | Kunden (FAB mittig). */
#tab-bar.tab-bar--barista .tab-item[data-tab="dashboard"]{order:1;}
#tab-bar.tab-bar--barista .tab-ctr{order:2;}
#tab-bar.tab-bar--barista .tab-item[data-tab="customers"]{order:3;}

.tab-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  color:var(--text-muted);font-size:var(--fs-micro);font-weight:var(--fw-medium);letter-spacing:.02em;
  height:100%;min-height:44px;transition:color var(--t-fast);
  padding:var(--s1) 0;
  align-self:stretch;
}
.tab-item svg{width:22px;height:22px;flex-shrink:0;}
.tab-item.active{color:var(--a-700);}
.tab-lbl{
  font-size:10px;font-weight:var(--fw-medium);line-height:1.1;
  letter-spacing:.01em;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 2px;
}

.tab-ctr{
  flex:1;display:flex;align-items:flex-start;justify-content:center;
  align-self:stretch;height:100%;
}
#tab-fab{
  position:relative;
  width:var(--tab-fab-size);height:var(--tab-fab-size);border-radius:var(--rad-round);
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;
  margin-top:calc(0px - var(--tab-fab-over));
  box-shadow:var(--sh1);
  transition:transform var(--t-fast) var(--spring),box-shadow var(--t-fast);
}
#tab-fab:active{transform:scale(.9);box-shadow:var(--sh1);}
.fab-badge{
  position:absolute;top:0;right:0;
  min-width:18px;height:18px;
  /* Weiss auf --err: 5.44:1 (Tinte waere 3.34:1). */
  background:var(--err);color:var(--on-solid);
  font-size:var(--fs-micro);font-weight:var(--fw-heavy);
  display:flex;align-items:center;justify-content:center;
  line-height:1;padding:0 var(--s1);
  border-radius:var(--rad-round);border:2px solid var(--bg);
  pointer-events:none;overflow:hidden;
  opacity:0;transform:scale(.5);visibility:hidden;
  transition:opacity var(--m-fast) var(--ease),transform var(--m-fast) var(--spring),visibility 0s var(--m-fast);
}
.fab-badge.vis{
  opacity:1;transform:scale(1);visibility:visible;
  transition:opacity var(--m-fast) var(--ease),transform var(--m-fast) var(--spring),visibility 0s 0s;
}

/* ══════════════════════════════════════════════════════
   VIEW: LOCK
══════════════════════════════════════════════════════ */
#v-lock{align-items:center;justify-content:center;padding:calc(var(--safe-t) + var(--s7)) var(--s6) calc(var(--safe-b) + var(--s7));gap:0;}

.lock-logo{margin-bottom:var(--s4);}
.lock-shop{font-size:var(--fs-head);color:var(--text);font-weight:var(--fw-bold);margin:0 0 var(--s7);letter-spacing:-.01em;}
.lock-select-msg{display:none;font-size:var(--fs-sm);color:var(--text-muted);text-align:center;margin:0 0 var(--s4);line-height:1.35;}
.lock-select-msg.show{display:block;}

.pin-dots{display:flex;gap:var(--s5);margin-bottom:0;}
.pin-dot{
  width:16px;height:16px;border-radius:var(--rad-round);
  border:2px solid var(--border-strong);background:transparent;
  transition:background var(--m-fast) var(--spring),border-color var(--m-fast) var(--spring),transform var(--m-base) var(--spring);
}
.pin-dot.filled{background:var(--accent);border-color:var(--accent);transform:scale(1.18);}
.pin-dot.error{background:var(--err);border-color:var(--err);}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);width:100%;max-width:300px;}
.key{
  aspect-ratio:1;border-radius:var(--rad-round);
  background:var(--surface);border:var(--bw) solid var(--border-strong);box-shadow:var(--sh1);
  color:var(--text);font-size:var(--fs-display);font-weight:var(--fw-medium);
  font-family:var(--ff-display);
  transition:transform var(--m-base) var(--spring),background var(--m-press) var(--ease),filter var(--m-press) var(--ease),box-shadow var(--m-press) var(--ease);
  display:grid;place-items:center;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.key:active,.key.pressed{
  background:var(--surface-raised);filter:none;
  box-shadow:inset 0 1px 3px rgba(23,20,31,.12);
  transform:scale(.88);
  transition-duration:0s;
}
.key-empty{background:transparent;border:none;box-shadow:none;pointer-events:none;}

/* ── UI-PIN1: PIN-Eingabe nach Apple-Muster ─────────────
   „PIN eingeben“ (bzw. Fehler/Status) über den Punkten, Ziffernblock ohne
   Löschtaste, darunter eine Zeile im Raster des Blocks: Spalte 1 „Hilfe“,
   Spalte 3 „Abbrechen“/„Löschen“ — gleiche Schrift, Höhe, Grundlinie.
   --link #0A66C2 auf --bg 5,0:1, auf --surface 5,6:1; --err 5,1:1. */
.pin-prompt-block{display:flex;flex-direction:column;align-items:center;width:100%;}
.pin-prompt{
  margin:0 0 var(--s4);min-height:calc(1.35em * 2);max-width:300px;
  display:flex;align-items:flex-end;justify-content:center;text-align:center;
  font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1.35;color:var(--text);
}
.pin-prompt.is-error{color:var(--err);}
.pin-prompt.is-info{color:var(--text-muted);}
.pin-actions-row{
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--s4);align-items:center;
  width:100%;max-width:300px;margin:var(--s3) auto 0;
}
.pin-act{
  justify-self:center;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:72px;padding:0 var(--s2);margin:0;
  background:none;border:0;border-radius:var(--rad-tab);
  font-family:var(--ff-body);font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1;
  color:var(--link);text-decoration:none;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.pin-act:focus-visible{outline:2px solid var(--link);outline-offset:2px;}
.pin-act:disabled{opacity:.45;cursor:default;}
/* Dialoge: kompakterer Block, gleiche Bedienung */
.pinpad{display:flex;flex-direction:column;align-items:center;width:100%;outline:none;}
.pinpad .pin-prompt{margin-bottom:var(--s3);}
.pinpad .keypad{max-width:252px;gap:var(--s3);margin-top:var(--s4);}
.pinpad .key{font-size:var(--fs-title);background:var(--surface-raised);}
.pinpad .pin-actions-row{max-width:252px;column-gap:var(--s3);}
.pinpad.is-busy .keypad{opacity:.45;pointer-events:none;}
.confirm-dialog--pin .confirm-actions{display:none;}
.confirm-dialog--pin #confirm-pin-err,.confirm-dialog--pin #mgr-err{display:none !important;}
.confirm-dialog--pin .confirm-dialog-card{max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 2 * var(--s4));overflow-y:auto;}
#ed-pinpad{padding:var(--s3) 0 calc(var(--safe-b) + var(--s4));}
/* Schritte bestätigen sich selbst: kein Speichern-Haken, Fehler nur im Prompt */
#ed-pin-sheet #ed-pin-err{display:none !important;}

@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-9px);}40%{transform:translateX(9px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
.shake{animation:shake .38s ease;}

/* ══════════════════════════════════════════════════════
   VIEW: DASHBOARD
══════════════════════════════════════════════════════ */
/* Horizontaler Abstand kommt von .ios-group (margin --s4),
   nicht doppelt vom Body — sonst kleben Gruppen falsch oder doppelt ein. */
.dash-body{
  flex:1;
  padding:var(--s2) 0 calc(var(--tab-h) + var(--safe-b) + var(--tab-fab-over) + var(--s5));
  display:flex;flex-direction:column;gap:0;
  max-width:480px;width:100%;margin:0 auto;
}
.dash-body > .ios-group-hd:first-child,
.dash-body > .ios-group-hd.ios-group-hd--flush:first-of-type{
  padding-top:var(--s3);
}

/* Kennzahlen in ios-rows: Stempel dominant, Rest Nebenzeilen */
.dash-metric-v{
  font-family:var(--ff-display);
  font-size:var(--fs-title);font-weight:var(--fw-heavy);line-height:1;
  letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.dash-metric-side{
  font-family:var(--ff-display);
  font-size:var(--fs-head);font-weight:var(--fw-heavy);line-height:1;
  letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.dash-metric-hero{min-height:64px;padding-top:var(--s4);padding-bottom:var(--s4);}
.dash-metric-hero .dstat-delta,
.ios-row--static .dstat-delta{
  margin-top:0;font-size:var(--fs-micro);
}
/* Kennzahl-Gruppe ohne Icon-Badge: Divider voller Breite ab Label */
#d-content > .ios-group:first-of-type .ios-row + .ios-row::before{left:var(--s4);}

/* Legacy-Skeleton nutzt noch diese Klassen */
.dash-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);padding:0 var(--s4);}
.dstat{
  background:var(--surface);border-radius:var(--rad-tile);
  padding:var(--s4) var(--s3) var(--s3);border:var(--bw) solid var(--border);text-align:center;
}
.dstat-v{
  font-family:var(--ff-display);
  font-size:var(--fs-display);font-weight:var(--fw-heavy);line-height:1;
  letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;
}
/* Zahlen, die sich im Sekundentakt aktualisieren, duerfen die Zeile nicht
   verschieben - Ziffern brauchen dafuer alle dieselbe Breite. */
.dstat-delta,.spark-avg,.spark-day,.cus-meta,.cd-meta,
.cd-meta-val,.fab-badge,.hours-inp,.auto-num-inp{
  font-variant-numeric:tabular-nums;
}
.dstat-l{font-size:var(--fs-label);color:var(--text-muted);font-weight:var(--fw-bold);letter-spacing:.01em;text-transform:none;margin-top:var(--s1);line-height:var(--lh-tight);}

/* Verlauf: Header mit Segment + ios-group Inhalt */
.dash-spark-block{margin-top:0;}
.dash-spark-hd{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s5) var(--s4) var(--s2);
}
.dash-spark-hd .ios-group-hd{
  padding:0;flex:1;min-width:0;
}
.dash-seg{
  display:inline-flex;gap:2px;flex-shrink:0;
  padding:2px;border-radius:var(--rad-round);
  background:var(--surface-raised);
}
.dash-seg-btn{
  min-width:40px;min-height:28px;padding:var(--s1) var(--s3);
  border-radius:var(--rad-round);border:0;background:transparent;
  font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text-muted);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast),color var(--t-fast);
}
.dash-seg-btn.active{
  background:var(--surface);color:var(--a-700);
  box-shadow:0 0 0 var(--bw) var(--border);
}
.spark-card.ios-group--pad,
.ios-group.spark-card{
  background:var(--surface);border:0;border-radius:var(--rad-tile);
  padding:var(--s4);margin-top:0;
}
.spark-avg{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-muted);min-height:1em;margin-bottom:var(--s2);}
/* Die Kurve kommt erst mit den Daten. Ohne reservierte Hoehe sprang die
   halbe Seite nach unten, sobald sie da war - 72px ist die Hoehe des SVG. */
.spark-svg-wrap{width:100%;overflow:hidden;min-height:72px;}
.spark-xaxis{
  display:flex;justify-content:space-between;
  margin-top:var(--s2);padding:0 var(--s1);overflow:hidden;
}
.spark-day{font-size:var(--fs-hint);color:var(--text-muted);font-weight:var(--fw-medium);text-align:center;flex:1;min-width:0;}
.spark-day:first-child{text-align:left;}
.spark-day:last-child{text-align:right;}
.spark-day.today{color:var(--a-700);}

/* top customers — in ios-group, Rang nur typografisch */
.top-list{display:flex;flex-direction:column;gap:0;}
.dash-top-card.ios-group{
  background:var(--surface);border:0;border-radius:var(--rad-tile);padding:0;
}
.dash-top-card .top-item{
  display:flex;align-items:center;gap:var(--s3);
  background:transparent;border-radius:0;
  padding:var(--s3) var(--s4);min-height:44px;
  position:relative;
}
.dash-top-card .top-item + .top-item::before{
  content:"";position:absolute;left:calc(var(--s4) + 18px + var(--s3) + 34px + var(--s3));right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
.top-rank{
  font-family:var(--ff-display);
  font-size:var(--fs-body);font-weight:var(--fw-heavy);width:18px;text-align:center;flex-shrink:0;
  color:var(--text-muted);font-variant-numeric:tabular-nums;
}
.top-av{
  width:34px;height:34px;border-radius:var(--rad-round);
  background:var(--accent-soft);color:var(--a-700);
  font-size:var(--fs-label);font-weight:var(--fw-bold);display:grid;place-items:center;flex-shrink:0;
}
.top-name{flex:1;font-size:var(--fs-body);font-weight:var(--fw-medium);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-detail{font-size:var(--fs-label);color:var(--text-muted);white-space:nowrap;flex-shrink:0;}

/* 30T-Fallback-Hinweis innerhalb der Sparkline-Karte */
.spark-fallback{font-size:var(--fs-hint);color:var(--text-muted);margin-top:var(--s2);text-align:center;}

/* birthday items that are view-only for baristas */
.birthday-item--view{cursor:default;-webkit-tap-highlight-color:transparent;}

/* Geburtstage in ios-group — kein Accent-Rahmen */
.dash-birthday.ios-group{
  background:var(--surface);border:0;border-radius:var(--rad-tile);overflow:hidden;
}
.dash-birthday .birthday-hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);}
.dash-birthday .birthday-hd + #d-birthday-list .birthday-empty,
.dash-birthday .birthday-hd + #d-birthday-list .birthday-item{
  border-top:0;
}
.birthday-hd-lbl{font-size:var(--fs-sm);font-weight:var(--fw-bold);flex:1;}
.birthday-count{font-size:var(--fs-label);color:var(--a-700);font-weight:var(--fw-bold);flex-shrink:0;}
.birthday-empty{
  font-size:var(--fs-sm);color:var(--text-muted);padding:var(--s3) var(--s4);text-align:center;
  position:relative;
}
.birthday-empty::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
.birthday-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s4);min-height:44px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast);
  position:relative;
}
.birthday-item::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
.birthday-item + .birthday-item::before{left:calc(var(--s4) + 34px + var(--s3));}
.birthday-item:active{background:var(--surface-raised);}
.birthday-av{
  width:34px;height:34px;border-radius:var(--rad-round);flex-shrink:0;
  background:var(--accent-soft);color:var(--a-700);
  font-family:var(--ff-display);font-size:var(--fs-label);font-weight:var(--fw-heavy);
  display:grid;place-items:center;
}
.birthday-name{font-size:var(--fs-body);font-weight:var(--fw-medium);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.birthday-age{font-size:var(--fs-label);color:var(--text-muted);flex-shrink:0;}
.birthday-arrow{color:var(--text-muted);flex-shrink:0;}

/* delta-Indikatoren */
.dstat-delta{font-size:var(--fs-micro);font-weight:var(--fw-bold);margin-top:var(--s1);line-height:1;}
.dstat-delta.up{color:var(--ok);}
.dstat-delta.dn{color:var(--err);}
.dstat-delta.flat{color:var(--text-muted);}

/* Legacy spark-tb (falls noch woanders) + Trefferfläche */
.spark-tb{
  padding:var(--s1) var(--s3);border-radius:var(--rad-round);
  font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text-muted);
  background:transparent;transition:background var(--t-fast),color var(--t-fast);
}
.spark-tb.active{background:var(--surface);color:var(--a-700);}

/* Insights (beste Uhrzeit / bester Tag) */
.dash-insights{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  margin:0 var(--s4);
}
.insight-card{
  background:var(--surface);border-radius:var(--rad-tile);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
}
.insight-badge{margin-bottom:var(--s1);}
.insight-val{font-family:var(--ff-display);font-size:var(--fs-body);font-weight:var(--fw-heavy);line-height:var(--lh-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.insight-lbl{font-size:var(--fs-micro);color:var(--text-muted);font-weight:var(--fw-bold);letter-spacing:.01em;text-transform:none;}

/* Fast-voll — einzige horizontale Scroll-Zone */
.dash-hscroll{
  display:flex;gap:var(--s3);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  /* Flex-Spacer statt padding-inline: WebKit ignoriert padding am
     Scroll-Start oft. Gap gilt auch vor/nach Spacer — deshalb ist die
     Spacer-Basis --s4 minus --s3, damit links/rechts netto --s4 bleiben
     (wie .ios-group margin), nicht --s4+--s3. */
  padding:0 0 var(--s2);
  margin:0;
  scrollbar-width:none;
  scroll-padding-inline:var(--s4);
}
.dash-hscroll::before,
.dash-hscroll::after{
  content:"";flex:0 0 calc(var(--s4) - var(--s3));
}
.dash-hscroll::-webkit-scrollbar{display:none;}
.dash-near-card{
  flex:0 0 72%;max-width:260px;min-width:200px;
  scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  padding:var(--s4);
  background:var(--surface);border:0;border-radius:var(--rad-tile);
  color:var(--text);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast),transform var(--t-fast);
}
.dash-near-card:active{background:var(--surface-raised);transform:scale(.98);}
.dash-near-name{
  font-size:var(--fs-body);font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dash-near-prog{
  display:block;width:100%;height:6px;border-radius:var(--rad-round);
  background:var(--surface-raised);overflow:hidden;
}
.dash-near-prog > i{
  display:block;height:100%;border-radius:var(--rad-round);
  background:var(--accent);
}
.dash-near-meta{
  font-family:var(--ff-display);font-size:var(--fs-head);font-weight:var(--fw-heavy);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.dash-near-hint{font-size:var(--fs-label);color:var(--text-muted);}

/* Wochen-Rhythmus unter Sparkline */
.dash-rhythm{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s1);margin-top:var(--s4);min-height:44px;
  padding:0 var(--s1);
}
.dash-rhythm-col{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s1);
  min-width:0;
}
.dash-rhythm-bar{
  width:100%;max-width:18px;
  border-radius:var(--rad-tab) var(--rad-tab) 2px 2px;
  background:var(--accent);
  opacity:.45;
}
.dash-rhythm-col.is-today .dash-rhythm-bar{opacity:1;}
.dash-rhythm-day{
  font-size:var(--fs-hint);color:var(--text-muted);font-weight:var(--fw-medium);
}
.dash-rhythm-col.is-today .dash-rhythm-day{color:var(--a-700);}
.dash-rhythm-lbl{
  font-size:var(--fs-hint);color:var(--text-muted);
  margin-top:var(--s2);text-align:center;
}

/* Barista: Geburtstage etwas prominenter */
#d-content.dash--barista #d-birthday-card{
  box-shadow:0 0 0 var(--bw-strong) var(--accent-line);
}

/* Profil-Initialen: neutrales .bar-btn (--surface), Text --accent (Identitaet).
   Dark #FFA31F / #221D2F = 8.18:1; Light #9A5B00 / #FFF = 5.43:1
   bei --fs-label (12px) / --fw-bold (700) → AA 4.5:1 erfuellt.
   page-hd rechts --s4; einziger Action-Button, Abstand unveraendert. */
#d-prof-avatar{
  font-family:var(--ff-display);font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:-.02em;color:var(--a-700);
}
/* Legacy Touch-Targets (refresh-btn entfernt mit Dashboard-Refresh) */
.sheet-close,.toggle-switch,.bar-action,
.spark-tb,.filter-chip,.btn-undo,
.set-add-btn,.lang-chip,.cooldown-mgr,.lock-help-link,
.search-close-btn{position:relative;}
.sheet-close::after,.toggle-switch::after,.bar-action::after,
.spark-tb::after,.filter-chip::after,.btn-undo::after,
.set-add-btn::after,.lang-chip::after,.cooldown-mgr::after,.lock-help-link::after,
.search-close-btn::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}
/* Inline-Styles koennen nicht ueberschrieben werden — min-height erzwingt
   44px-Zielflaeche ohne die gesetzten padding- oder font-Werte zu beruehren. */
#btn-mark-reviewed{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
/* Inline-Style setzt color:err und background:none — !important noetig fuer Ruhezustand und :active */
[data-geo-del]{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted) !important;border-radius:var(--rad-tab);
  transition:color var(--t-fast),background var(--t-fast);
}
[data-geo-del]:active{
  color:var(--err) !important;
  background:color-mix(in srgb,var(--err) 12%,transparent) !important;
}

/* ── KEIN LADEN AUSGEWAEHLT ──────────────────────────── */
.nt-box{
  margin:auto;width:100%;max-width:380px;
  padding:calc(var(--safe-t) + var(--s7)) var(--s6) calc(var(--safe-b) + var(--s7));
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;
}
.nt-title{font-family:var(--ff-display);font-size:var(--fs-title);font-weight:var(--fw-heavy);letter-spacing:-.02em;margin-top:var(--s5);}
.nt-sub{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);}
.nt-hint{
  font-size:var(--fs-sm);color:var(--text-muted);
  background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--rad-tile);
  padding:var(--s3) var(--s4);width:100%;word-break:break-all;
}
.nt-hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.nt-hint b{color:var(--a-700);font-weight:var(--fw-bold);}
.nt-label{
  font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);
  text-transform:none;letter-spacing:.01em;align-self:flex-start;margin-top:var(--s3);
}
.nt-box .input-field{text-align:center;}
.nt-box .btn{width:100%;}
.nt-support{
  margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);
}
.nt-support-link{color:var(--link);text-decoration:none;font-weight:var(--fw-medium);}
.nt-support-link:active{opacity:.7;}
.nt-err{font-size:var(--fs-sm);color:var(--err);min-height:1.2em;}
/* U3: Unterbloecke tragen dasselbe Layout wie .nt-box */
.nt-pick,.nt-notfound{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--s3);}
.nt-pick[hidden],.nt-notfound[hidden]{display:none;}

/* ══════════════════════════════════════════════════════
   VIEW: SCAN
══════════════════════════════════════════════════════ */
#v-scan{display:flex;flex-direction:column;}
.scan-body{
  flex:1;
  min-height:0;
  padding:0;
  display:flex;flex-direction:column;
  max-width:480px;width:100%;margin:0 auto;
  overflow:hidden;
}
.scan-main{
  flex:1;min-height:0;
  padding:var(--s3) var(--s4) var(--s2);
  display:flex;flex-direction:column;gap:var(--s3);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.scan-dock{
  flex-shrink:0;
  padding:var(--s3) var(--s4) calc(var(--safe-b) + var(--s4));
  background:var(--bg);
  border-top:var(--bw) solid var(--border);
}
.btn-qr-ico--close{display:none;}
.scan-body.cam .btn-qr-ico--scan{display:none;}
.scan-body.cam .btn-qr-ico--close{display:block;}
/* Kamera offen: Dock-Button = Schließen (Sekundaer), nicht nochmal Primär-CTA */
.scan-body.cam #btn-qr{
  background:var(--surface);color:var(--text);
  box-shadow:inset 0 0 0 var(--bw) var(--border-strong);
}
.divider{display:flex;align-items:center;gap:var(--s3);color:var(--text-muted);font-size:var(--fs-sm);font-weight:var(--fw-regular);}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border-strong);}

.qr-wrap{position:relative;border-radius:var(--rad-tile);overflow:hidden;aspect-ratio:1;background:var(--void);display:none;}
/* Offen fuellt die Kamera, was der Bildschirm hergibt. aspect-ratio faellt
   weg, sonst bleibt sie quadratisch und der Rest der Seite steht leer. */
.qr-wrap.open{display:block;flex:1;min-height:min(52vh,380px);aspect-ratio:auto;}
/* Waehrend die Kamera laeuft, ist der E-Mail-Weg nicht die Aufgabe. */
.scan-body.cam .scan-alt,
.scan-body.cam .scan-recent,
.scan-body.cam .scan-rejected{display:none;}
/* E-Mail/Suche ans untere Ende von scan-main — direkt ueber dem QR-Dock */
.scan-alt{
  display:flex;flex-direction:column;gap:var(--s3);
  margin-top:auto;
  padding-top:var(--s3);
}
.scan-body.cam .scan-alt{margin-top:0;padding-top:0;}
#qr-video{width:100%;height:100%;object-fit:cover;display:block;}
.qr-overlay{position:absolute;inset:0;display:grid;place-items:center;}
.qr-finder{width:58%;aspect-ratio:1;border:2px solid var(--accent-hi);border-radius:var(--rad-tile);position:relative;}
.qr-corner{position:absolute;width:22px;height:22px;border-color:var(--accent);border-style:solid;}
.qr-corner-tl{top:-2px;left:-2px;border-width:3px 0 0 3px;border-radius:var(--rad-tab) 0 0 0;}
.qr-corner-tr{top:-2px;right:-2px;border-width:3px 3px 0 0;border-radius:0 var(--rad-tab) 0 0;}
.qr-corner-bl{bottom:-2px;left:-2px;border-width:0 0 3px 3px;border-radius:0 0 0 var(--rad-tab);}
.qr-corner-br{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-radius:0 0 var(--rad-tab) 0;}
.qr-scan-line{
  position:absolute;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 8px 2px var(--accent-hi);
  animation:scan 2.2s ease-in-out infinite;
}
@keyframes scan{0%,100%{top:8%;opacity:0;}8%,92%{opacity:1;}50%{top:86%;}}

.scan-fb{min-height:0;font-size:var(--fs-body);font-weight:var(--fw-regular);text-align:center;}
.scan-fb:empty{display:none;}
.scan-fb.err{color:var(--err);}
.scan-fb.info{color:var(--text-muted);}
.scan-body.cam .scan-fb{min-height:18px;}
.scan-body.cam .scan-fb:empty{display:block;}

/* ══════════════════════════════════════════════════════
   VIEW: CUSTOMER
══════════════════════════════════════════════════════ */
#v-customer{display:flex;flex-direction:column;}
.customer-body{
  flex:1;
  padding:var(--s3) var(--s4) calc(var(--safe-b) + var(--s6));
  display:flex;flex-direction:column;gap:var(--s3);
  max-width:480px;width:100%;margin:0 auto;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.c-hero{display:flex;align-items:center;gap:var(--s4);padding:var(--s2) 0 var(--s1);}
.c-av{
  width:52px;height:52px;border-radius:var(--rad-round);
  background:var(--accent-soft);color:var(--a-700);
  font-family:var(--ff-display);
  font-size:var(--fs-head);font-weight:var(--fw-heavy);
  display:grid;place-items:center;flex-shrink:0;
}
.c-info{flex:1;min-width:0;}
.c-name{font-family:var(--ff-display);font-size:var(--fs-title);font-weight:var(--fw-heavy);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.c-email{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:var(--s1);}

/* ── Stempelkarte: bleibt dunkel ──────────────────────────
   Eigener Farbsatz via --d-Token; die hellen Rollen-Token
   werden innerhalb .stamps-card ueberschrieben.
   Doppelklasse, weil das Markup .ios-group.stamps-card ist und .ios-group
   weiter unten steht — sonst gewinnt --surface und die Karte wird weiss. */
.stamps-card,
.ios-group.stamps-card{
  padding:var(--s4);flex:0 0 auto;
  background:var(--d-900);border-radius:var(--rad-tile);
  color:var(--d-fg);
}
.stamps-hd{display:flex;justify-content:center;align-items:baseline;margin-bottom:var(--s4);gap:var(--s3);}
.stamps-label{font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--d-fg2);text-transform:uppercase;letter-spacing:.06em;}
/* Die Zahl ist das, was aus zwei Metern gelesen werden muss —
   nicht das Wort 'Stempelkarte' daneben. */
.stamps-count{font-family:var(--ff-display);font-size:var(--fs-hero);font-weight:var(--fw-heavy);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--d-fg);}
.stamps-count-max{font-size:var(--fs-head);font-weight:var(--fw-regular);color:var(--d-fg2);}

.stamps-grid{display:grid;gap:var(--s3);}
/* Leere Punkte = Ring (freie Plaetze), gefuellte = Bernstein.
   Ringfarbe --d-700: 3.29:1 auf --d-900. */
.s-dot{
  aspect-ratio:1;border-radius:var(--rad-round);
  background:transparent;
  border:2px solid var(--d-700);
  transition:background var(--t-base) var(--spring),border-color var(--t-base) var(--spring),transform var(--t-base) var(--spring);
}
.s-dot.on{background:var(--a-400);border-color:var(--a-400);}
.s-dot.new{animation:pop .5s var(--spring) both;}
@keyframes pop{0%{transform:scale(0);}65%{transform:scale(1.28);}100%{transform:scale(1);}}
/* Sticky Stempel-CTA — solid --bg, kein Verlauf */
.stamp-actions{
  position:sticky;bottom:0;z-index:5;margin-top:auto;
  display:flex;flex-direction:column;gap:var(--s3);
  padding-top:var(--s4);
  background:var(--bg);
}
/* .btn-stamp-big: Form nur noch ueber .btn */
/* Cooldown: ruhige Statuszeile statt schwerer Banner-Kachel */
.cooldown-banner{
  display:none;flex-direction:column;align-items:stretch;gap:var(--s2);
  background:var(--surface);border-radius:var(--rad-tile);padding:var(--s3) var(--s4);
  border:var(--bw) solid var(--border);
}
.cooldown-banner.vis{display:flex;}
.cooldown-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);}
.cooldown-label{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-muted);}
.cooldown-time{font-family:var(--ff-display);font-size:var(--fs-head);font-weight:var(--fw-heavy);letter-spacing:-.02em;color:var(--text);line-height:var(--lh-tight);font-variant-numeric:tabular-nums;}
.cooldown-sub{font-size:var(--fs-label);color:var(--text-muted);}
.multi-stamp-row{display:none;gap:var(--s3);width:100%;}
.multi-stamp-row.vis{display:flex;}
/* .btn-multi Flex kommt aus der zentralen .btn-multi-Regel oben */
.scan-email-wrap{position:relative;}
.scan-suggest{
  display:flex;flex-direction:column;gap:0;
  margin-top:var(--s2);
  border:var(--bw) solid var(--border);
  border-radius:var(--rad-tile);
  background:var(--surface-raised);
  overflow:hidden;
  max-height:min(280px,42vh);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.scan-suggest[hidden]{display:none!important;}
.scan-suggest-item{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;padding:var(--s3) var(--s4);
  border:0;border-bottom:var(--bw) solid var(--border);
  background:transparent;color:inherit;text-align:left;cursor:pointer;
  font:inherit;min-height:44px;
  position:relative;
}
.scan-suggest-item:last-child{border-bottom:none;}
.scan-suggest-item:active,
.scan-suggest-item.active{background:var(--surface);}
.scan-suggest-item::after{
  content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;pointer-events:none;
}
.scan-suggest-av{
  width:34px;height:34px;border-radius:var(--rad-round);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text-muted);flex-shrink:0;
}
.scan-suggest-info{flex:1;min-width:0;}
.scan-suggest-name{
  font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scan-suggest-meta{
  font-size:var(--fs-label);color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scan-suggest-stamps{
  font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);flex-shrink:0;
}
.scan-recent{display:none;}
.scan-recent.vis{display:block;}
.scan-rejected{display:none;}
.scan-rejected.vis{display:block;}
/* scan-body hat schon H-Padding — ios-group-Margin nicht nochmal */
.scan-recent .ios-group,
.scan-rejected .ios-group{margin-left:0;margin-right:0;}
.scan-recent > .ios-group-hd,
.scan-rejected > .ios-group-hd{padding-left:0;padding-right:0;padding-top:var(--s2);}
.scan-rejected-hd{font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s3);}
.scan-rejected .ios-row{cursor:default;align-items:flex-start;}
.scan-rejected-item{
  display:flex;align-items:flex-start;gap:var(--s3);width:100%;
  padding:var(--s3) 0;
}
.scan-rejected-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.scan-rejected-name{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scan-rejected-meta{font-size:var(--fs-label);color:var(--text-muted);line-height:var(--lh-normal);}
.scan-rejected-reason{font-size:var(--fs-sm);color:var(--text);line-height:var(--lh-normal);}
.scan-rejected-actions{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);
  flex-shrink:0;padding-top:2px;
}
.scan-rejected-actions .btn{width:auto;align-self:flex-end;}
.scan-rejected-primary:empty{display:none;}
.scan-recent-hd{font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s3);}
.scan-recent .ios-row{cursor:default;}
.scan-recent-row{--ios-sep-left:calc(var(--s4) + 34px + var(--s3));}
.scan-recent-item{display:flex;align-items:center;gap:var(--s3);width:100%;}
.scan-recent-av{width:34px;height:34px;border-radius:var(--rad-round);background:var(--surface-raised);display:flex;align-items:center;justify-content:center;font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text-muted);flex-shrink:0;}
.scan-recent-info{flex:1;min-width:0;}
.scan-recent-name{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scan-recent-meta{font-size:var(--fs-label);color:var(--text-muted);}
.btn-undo{font-size:var(--fs-label);padding:var(--s1) var(--s3);border-radius:var(--rad-round);background:transparent;border:var(--bw-strong) solid var(--border-strong);color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:color var(--t-fast),border-color var(--t-fast);}
.btn-undo:hover{color:var(--err);border-color:var(--err);}

/* ══════════════════════════════════════════════════════
   VIEW: DONE
══════════════════════════════════════════════════════ */
#v-done{justify-content:space-between;align-items:stretch;padding:0;text-align:center;gap:0;background:var(--bg);}
.done-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s7) var(--s5) var(--s5);width:100%;max-width:480px;margin:0 auto;box-sizing:border-box;}
/* Karte voll: Bernstein-Ring = "jetzt handeln" (Einloesen-CTAs). */
#v-done.is-full .done-ring{background:var(--accent-soft);width:112px;height:112px;}
#v-done.is-full .done-ring-pulse{border-color:var(--accent);}
#v-done.is-full .done-check path{stroke:var(--accent);}
#v-done.is-full .done-check{width:50px;height:50px;}
#v-done.is-full .done-title{color:var(--a-700);}
#v-done.is-stamp .done-ring{background:var(--ok-soft);}
#v-done.is-stamp .done-ring-pulse{border-color:var(--ok);}
#v-done.is-stamp .done-check path{stroke:var(--ok);}
/* Eingeloest: Violett — klar getrennt vom Aktions-Geschenk (Bernstein). */
#v-done.is-redeemed .done-ring{background:var(--reward-soft);width:112px;height:112px;}
#v-done.is-redeemed .done-ring-pulse{border-color:var(--reward);}
#v-done.is-redeemed .done-check path{stroke:var(--reward);stroke-dasharray:92;stroke-dashoffset:92;}
#v-done.is-redeemed .done-check{width:50px;height:50px;}
#v-done.is-redeemed .done-title{color:var(--reward);}
.done-ring{
  width:96px;height:96px;border-radius:var(--rad-round);
  background:var(--ok-soft);
  display:grid;place-items:center;margin-bottom:var(--s5);position:relative;
}
.done-ring-pulse{position:absolute;inset:-7px;border-radius:var(--rad-round);border:3px solid var(--ok);opacity:.25;}
.done-check{width:42px;height:42px;}
.done-check path{stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:80;stroke-dashoffset:80;}
.done-title{font-family:var(--ff-display);font-size:var(--fs-display);font-weight:var(--fw-heavy);letter-spacing:-.03em;margin:0 0 var(--s4);color:var(--text);}
.done-stand{margin:0 0 var(--s3);}
.done-stand-lbl{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-muted);margin-bottom:var(--s1);}
.done-stand-num{
  font-family:var(--ff-display);font-size:var(--fs-hero);font-weight:var(--fw-heavy);
  letter-spacing:-.03em;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums;
}
.done-reward{margin:0 0 var(--s3);width:100%;}
.done-reward-lbl{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-muted);margin-bottom:var(--s1);}
.done-reward-text{
  font-family:var(--ff-display);font-size:var(--fs-hero);font-weight:var(--fw-heavy);
  letter-spacing:-.03em;line-height:1.15;color:var(--text);
}
.done-name{font-size:var(--fs-body);color:var(--text-muted);margin:0 0 var(--s4);line-height:var(--lh-normal);}
.done-sub{font-size:var(--fs-head);color:var(--text-muted);line-height:var(--lh-normal);margin:0 0 var(--s7);}
.done-sub strong{color:var(--text);}
.done-actions{display:flex;flex-direction:column;gap:var(--s3);width:100%;max-width:480px;margin:0 auto;padding:0 var(--s5) calc(var(--safe-b) + var(--s6));box-sizing:border-box;}

/* Feedback-Center — gleiches Muster wie Kampagne-erstellen / Team-Rollen */
.fb-scroll{padding-bottom:calc(var(--safe-b) + var(--s8));}
.fb-cat-row .ios-row-sub{white-space:normal;}
#fb-cat-list .ios-row + .ios-row::before{left:var(--s4);}
#v-dash-feedback .fb-textarea{
  /* Start ~4 Zeilen; waechst per JS bis max ~10 Zeilen, dann scrollen */
  min-height:calc(var(--fs-body) * var(--lh-normal) * 4);
  max-height:calc(var(--fs-body) * var(--lh-normal) * 10);
  resize:none;overflow-y:auto;line-height:var(--lh-normal);
  width:100%;box-sizing:border-box;
}
#v-dash-feedback .ios-group-hd:first-child{padding-top:var(--s4);}

/* Alt (Legacy, nicht mehr referenziert) */
.ref-section{display:flex;flex-direction:column;gap:var(--s4);padding-top:var(--s3);}
.ref-badge{
  align-self:flex-start;
  padding:var(--s2) var(--s4);border-radius:var(--rad-round);
  background:var(--accent-soft);color:var(--a-700);
  font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.02em;
}
.ref-title{margin:0;font-family:var(--ff-display);font-size:var(--fs-title);font-weight:var(--fw-heavy);letter-spacing:-.02em;color:var(--text);line-height:var(--lh-tight);}
.ref-body{margin:0;font-size:var(--fs-body);color:var(--text-muted);line-height:var(--lh-normal);}
.ref-model{
  background:var(--surface);border:var(--bw-strong) solid var(--border-strong);
  border-radius:var(--rad-tile);padding:var(--s4);
}
.ref-model-hd{font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--s3);}
.ref-model-list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s2);}
.ref-model-list li{font-size:var(--fs-body);color:var(--text);line-height:var(--lh-normal);}
.ref-note{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);}

/* ══════════════════════════════════════════════════════
   VIEW: KUNDEN-LISTE
══════════════════════════════════════════════════════ */
.bar-btn.active{color:var(--a-700);background:var(--accent-soft);}
.bar-dot{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:var(--rad-round);
  background:var(--accent);border:2px solid var(--bg);
  pointer-events:none;
}
.filter-chip{
  flex-shrink:0;padding:var(--s2) var(--s4);border-radius:var(--rad-round);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  background:var(--surface);color:var(--text-muted);border:var(--bw-strong) solid var(--border);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.filter-chip.active{background:var(--accent-soft);color:var(--a-700);border-color:var(--accent);font-weight:var(--fw-bold);}
.fs-section{display:flex;flex-direction:column;gap:var(--s3);}
.fs-section-lbl{
  font-size:var(--fs-label);font-weight:var(--fw-bold);
  color:var(--text-muted);text-transform:none;letter-spacing:.01em;
}
.fs-opts{display:flex;flex-direction:column;gap:var(--s2);}
/* Legacy-Chip-Look (Admin u.ä.); in Staff-Sheets: .ios-row.fs-opt */
.fs-opt:not(.ios-row){
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  width:100%;padding:var(--s3) var(--s4);min-height:44px;
  background:var(--surface-raised);border-radius:var(--rad-tile);
  font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--text);
  text-align:left;-webkit-appearance:none;appearance:none;
  transition:background var(--t-fast);
}
.fs-opt-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0;}
.fs-opt-main{font-size:var(--fs-body);font-weight:inherit;color:inherit;}
.fs-opt-sub{font-size:var(--fs-hint);font-weight:var(--fw-regular);color:var(--text-muted);line-height:var(--lh-tight);}
.fs-opt.active .fs-opt-sub{color:var(--text-muted);}
.fs-opt:not(.ios-row):active{background:var(--border);}
.fs-opt:not(.ios-row).active{background:var(--accent-soft);color:var(--a-700);font-weight:var(--fw-bold);}
.fs-opt:not(.ios-row).active::after{content:'✓';color:var(--a-700);flex-shrink:0;}
/* Einzelauswahl in ios-rows: Hintergrund + Label + SVG-Haken (.sel-check) */
.ios-row.fs-opt.active,
.ios-row.lang-sel-row.active,
.ios-row.staff-role-row.active,
.ios-row.fb-cat-row.active,
.ios-row.confirm-mgr-row.active,
.ios-row.confirm-mgr-row.selected{
  background:var(--accent-soft);
}
.ios-row.fs-opt.active .ios-row-label,
.ios-row.lang-sel-row.active .ios-row-label,
.ios-row.staff-role-row.active .ios-row-label,
.ios-row.fb-cat-row.active .ios-row-label,
.ios-row.confirm-mgr-row.active .ios-row-label,
.ios-row.confirm-mgr-row.selected .ios-row-label{
  color:var(--a-700);font-weight:var(--fw-bold);
}
.sel-check{
  flex-shrink:0;width:18px;height:18px;opacity:0;color:var(--a-700);
  transition:opacity var(--t-fast);
}
.ios-row.active > .sel-check,
.ios-row.selected > .sel-check{opacity:1;}
.cus-search-row{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);background:var(--bg);flex-shrink:0;
}
.cus-search-row .input-field{flex:1;}
.search-close-btn{
  flex-shrink:0;width:32px;height:32px;border-radius:var(--rad-round);
  background:var(--surface-raised);color:var(--text-muted);
  display:grid;place-items:center;
  transition:background var(--t-fast),color var(--t-fast);
}
.search-close-btn:active{background:var(--border);}
.page-hd-actions{display:flex;align-items:center;gap:var(--s1);flex-shrink:0;}
/* Scroll nur in .cus-list — gleiches Flex-Muster wie #v-messages / .msg-hub-pane.
   Wichtig: Kinder dürfen NICHT schrumpfen (sonst clippt .ios-group overflow:hidden
   die Zeilen und scrollHeight == clientHeight → kein Scroll auf dem Handy). */
#v-customers{
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
}
.cus-list{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  /* padding-top:0 — Abstand kommt vom .pane-meta darüber (wie Kampagnen) */
  padding:0 var(--s4) calc(var(--tab-h) + var(--safe-b) + var(--tab-fab-over) + var(--s5));
  display:flex;flex-direction:column;gap:var(--s3);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.cus-list > *{flex-shrink:0;}
.cus-list .ios-group{margin:0;}
.cus-row.ios-row{
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  --ios-sep-left:calc(var(--s4) + 36px + var(--s3));
}
.cus-av{
  width:36px;height:36px;border-radius:var(--rad-round);
  background:var(--accent-soft);color:var(--a-700);
  font-family:var(--ff-display);
  font-size:var(--fs-label);font-weight:var(--fw-bold);
  display:grid;place-items:center;flex-shrink:0;
}
.cus-body{flex:1;min-width:0;}
.cus-row-name{font-size:var(--fs-body);font-weight:var(--fw-medium);display:flex;align-items:center;gap:var(--s2);overflow:hidden;}
.cus-row-name-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
/* Flags als Zeilen-Geschwister → vertikal mittig zur Gesamtzeile, nicht nur am Namen. */
.cus-row-flags{display:flex;align-items:center;gap:var(--s1);flex-shrink:0;align-self:center;}
.cus-row-sub{font-size:var(--fs-label);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.cus-row-email{font-size:var(--fs-label);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.cus-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;}
.cus-stamps{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums;align-self:center;}
.cus-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s7) 0;text-align:center;color:var(--text-muted);font-size:var(--fs-body);line-height:var(--lh-normal);
}
.ios-badge--sm{width:22px;height:22px;border-radius:var(--rad-tab);}
.ios-badge--sm svg{width:12px;height:12px;}
.ios-badge--ok{background:var(--ok-soft);color:var(--ok);}
.ios-badge--muted{background:var(--surface-raised);color:var(--text-muted);}
.cus-section-lbl{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-muted);
  padding:var(--s2) var(--s1) var(--s1);
}
.cus-load-more{
  width:100%;margin-top:var(--s2);padding:var(--s3);
  background:transparent;border:0;color:var(--link);
  font-size:var(--fs-body);font-weight:var(--fw-medium);cursor:pointer;
}
.cus-load-more:active{opacity:.7;}
.fs-section--export{margin-top:var(--s4);padding-top:var(--s4);border-top:var(--bw) solid var(--border);}

/* Vorschau-Band: sticky direkt unter der Sheet-Kopfzeile.
   --bg als Hintergrund erzeugt den Kontrast eines Sperrbildschirms,
   von dem sich die Benachrichtigungs-Kachel sauber abhebt. */
.msg-preview-band{
  position:sticky;
  /* page-hd--sub: safe + --s3 Padding oben/unten + 44px Bar-Btn (= früher 68px) */
  top:calc(var(--safe-t) + 44px + var(--s3) * 2);z-index:1;
  background:var(--bg);
  padding:var(--s4) var(--s5);
  border-bottom:var(--bw) solid var(--border);
}
/* Kampagnen-Pfadwahl: zwei klare Kacheln, Nachricht = Standard */
.msg-path-intro{
  font-size:var(--fs-body);color:var(--text-muted);margin:0 0 var(--s4);
  line-height:var(--lh-normal);
}
.msg-path-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);
  width:100%;text-align:left;cursor:pointer;
  padding:var(--s5) var(--s4);margin-bottom:var(--s3);
  border-radius:var(--rad-tile);border:var(--bw-strong) solid var(--border);
  background:var(--surface-raised);color:var(--text);
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-fast), background var(--t-fast);
  position:relative;
}
.msg-path-card:active{background:var(--accent-soft);border-color:var(--accent-hi);}
.msg-path-card--action{border-color:var(--border);}
.msg-path-card--action .msg-path-ico{
  color:var(--accent-hi);margin-bottom:var(--s1);
  display:flex;align-items:center;
}
.msg-path-title{font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:var(--lh-tight);}
.msg-path-sub{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);}
/* Automationen-Übersicht + Editor (Settings-DS) */
.ios-row.ios-row--auto{
  gap:0;
  padding:0;
  --ios-sep-left:calc(var(--s4) + 29px + var(--s3));
}
.ios-row.ios-row--auto.ios-row--static{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);
}
.ios-row.ios-row--auto .ios-row-hit{
  display:flex;align-items:center;gap:var(--s3);
  flex:1;min-width:0;min-height:44px;width:100%;
  padding:var(--s3) var(--s4);
  background:transparent;border:0;color:inherit;text-align:left;cursor:pointer;
}
.ios-row.ios-row--auto .ios-row-hit .auto-row-state{margin-left:auto;flex-shrink:0;}
.ios-row.ios-row--auto .ios-row-hit .ios-row-chev{margin-left:0;flex-shrink:0;}
.ios-row.ios-row--auto.ios-row--static .auto-row-state{margin-left:auto;}
.ios-row.ios-row--auto .ios-row-body{
  flex:1;min-width:0;overflow:hidden;
}
.ios-row.ios-row--auto .ios-row-label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ios-row.ios-row--auto .ios-row-sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.auto-row-skip{
  color:var(--a-700);
  font-size:var(--fs-label);
}

.auto-weekday-row{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--s1);
  width:100%;
}
.auto-wd{
  appearance:none;display:flex;align-items:center;justify-content:center;
  min-height:40px;min-width:0;width:100%;
  padding:var(--s2) 0;
  border-radius:var(--rad-round);border:var(--bw) solid var(--border);
  background:transparent;color:var(--text);
  font-size:var(--fs-hint);font-weight:var(--fw-bold);
  cursor:pointer;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.auto-wd.active{
  border-color:var(--accent);background:var(--accent-soft);color:var(--a-700);
}
.auto-wd::after{
  content:"";position:absolute;inset:50% auto auto 50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.auto-wd-field{padding-top:var(--s4);padding-bottom:var(--s3);}
.auto-time-field .input-field[type="time"]{
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-normal);
  color:var(--text);
  color-scheme:light;
  padding:var(--s2) 0;
  min-height:28px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:0;background:transparent;
}

.ios-field-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);
}
#auto-delay-group .msg-sched-field{
  border-top:0;
  position:relative;
}
#auto-delay-group .msg-sched-field::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
#auto-delay-group .sw-row.selected{background:var(--accent-soft);}
#auto-event-kind-grid .ios-row.active .ios-row-label{color:var(--a-700);}
#auto-event-kind-grid .ios-row.active{background:var(--accent-soft);}
#auto-audience-grid .aud-row.active{background:var(--accent-soft);}
#auto-audience-grid .aud-row.active .ios-row-label,
#auto-audience-grid .aud-row.active .ios-row-value{color:var(--a-700);font-weight:var(--fw-bold);}
#auto-gift-fields[hidden]{display:none !important;}
#auto-gift-fields:not([hidden]){
  border-top:0;
  position:relative;
}
#auto-gift-fields:not([hidden])::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}

#v-auto-edit .set-scroll{padding-bottom:calc(var(--safe-b) + var(--s8));}
#v-auto-edit .ios-field .input-field,
#v-auto-edit textarea.input-field{
  background:transparent;border:0;box-shadow:none;
  color:var(--text);font-family:var(--ff-body);font-size:var(--fs-body);
  padding:var(--s2) 0;width:100%;box-sizing:border-box;
}
#v-auto-edit textarea.input-field{min-height:96px;line-height:var(--lh-normal);}
#v-auto-edit .auto-time-field .input-field[type="time"]{
  width:100%;
  max-width:100%;
}

.gift-dur-row{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  padding-top:var(--s1);
}
.gift-dur-chip{
  appearance:none;border:var(--bw) solid var(--border);background:transparent;
  color:var(--text);font-size:var(--fs-hint);font-weight:var(--fw-bold);
  padding:var(--s2) var(--s3);border-radius:var(--rad-round);cursor:pointer;
  -webkit-tap-highlight-color:transparent;position:relative;
  font-family:var(--ff-body);
}
.gift-dur-chip::after{
  content:"";position:absolute;inset:50% auto auto 50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.gift-dur-chip.active{
  border-color:var(--accent);background:var(--accent-soft);color:var(--a-700);
}
.gift-dur-chip:active{opacity:.85;}

.msg-mirror-wrap{
  position:relative;
  min-height:96px;
  width:100%;
}
.msg-mirror{
  position:absolute;inset:0;
  pointer-events:none;
  overflow:auto;
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-normal);
  color:var(--text);
  padding:var(--s2) 0;
  box-sizing:border-box;
  z-index:0;
}
.msg-mirror .msg-var-token{
  display:inline;
  background:var(--accent-soft);
  color:var(--a-700);
  border-radius:var(--rad-round);
  padding:0.05em 0.4em;
  font-weight:var(--fw-bold);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.msg-mirror-ta{
  position:relative;z-index:1;
  background:transparent !important;
  color:transparent !important;
  caret-color:var(--text);
  -webkit-text-fill-color:transparent;
}
.msg-mirror-ta::placeholder{
  color:var(--text-muted);
  -webkit-text-fill-color:var(--text-muted);
  opacity:1;
}
#v-auto-edit .msg-mirror-ta,
#v-msg-new .msg-mirror-ta{
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  caret-color:var(--text);
}

/* Toggle Link-Blau: Automationen wie Profil */
#msg-hub-auto .toggle-switch input:checked+.toggle-track,
#v-auto-edit .toggle-switch input:checked+.toggle-track{
  background:var(--toggle-on);
}
#msg-hub-auto .toggle-thumb,
#v-auto-edit .toggle-thumb{background:#FFFFFF;}
#msg-hub-auto .toggle-switch input:checked~.toggle-thumb,
#v-auto-edit .toggle-switch input:checked~.toggle-thumb{background:#FFFFFF;}
#msg-hub-auto .toggle-track,
#v-auto-edit .toggle-track{
  background:var(--n-200);box-shadow:none;
}

#auto-skip-card .auto-skip-reason{
  margin:0;
  padding:0 var(--s4) var(--s3);
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  color:var(--text-muted);
  line-height:var(--lh-normal);
}

.ai-wizard{display:flex;flex-direction:column;gap:0;}
.ai-variant-row .ios-row-sub{
  white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
#anlass-grid .ios-badge svg,
#stil-grid .ios-badge svg{width:17px;height:17px;}

/* Legacy Chip-Row (nicht mehr fuer Einfuege-Button); Mirror-Token bleibt .msg-var-token */
.msg-var-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2);}
/* .msg-var-chip entfernt — Einfuegen ist .btn-link; Pillen nur noch Mirror/Gift/Filter */
/* Aktion-Felder: Layout kommt von ios-group / ios-field (Profil-Muster) */
#msg-action-fields{margin-top:var(--s5);}
.msg-action-dates{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s3);
  width:100%;
}
.msg-action-dates > .input-wrap{min-width:0;}
.msg-action-dates .input-field[type="datetime-local"]{
  min-width:0;max-width:100%;
  font-size:var(--fs-body);
  padding:var(--s4);
  color-scheme:light;
}
@media (max-width:360px){
  .msg-action-dates{grid-template-columns:1fr;}
}
.msg-action-clarify{
  margin:0;padding:var(--s3) var(--s4);
  border-radius:var(--rad-tile);background:var(--accent-soft);
  color:var(--text);font-size:var(--fs-sm);line-height:var(--lh-normal);
}
.camp-preview-body{max-height:min(70vh,560px);overflow-y:auto;}
.camp-preview-section{margin-bottom:var(--s4);}
.camp-preview-lbl{
  font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--text-muted);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s2);
}
.camp-preview-meta{margin:0 0 var(--s4);display:grid;gap:var(--s3);}
.camp-preview-meta > div{display:grid;gap:2px;}
.camp-preview-meta dt{font-size:var(--fs-hint);color:var(--text-muted);}
.camp-preview-meta dd{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);}
.camp-preview-action{margin-bottom:var(--s4);}
.camp-preview-gift{margin:0 0 var(--s2);font-size:var(--fs-body);font-weight:var(--fw-bold);}
.camp-preview-window{margin:0 0 var(--s4);font-size:var(--fs-sm);color:var(--text-muted);}
.camp-preview-staff-hint{margin-top:var(--s2);}
/* Aktions-Geschenk: Bernstein nur als linker Streifen + Label —
   kein accent-soft-Fill, damit Doppelfall (Karte voll + Aktion) ruhig bleibt. */
.done-action-hint{
  margin-top:var(--s2);padding:var(--s3) var(--s4);
  border-radius:var(--rad-tile);
  border:var(--bw-strong) solid var(--border-strong);
  border-left:4px solid var(--accent);
  background:var(--surface);
  text-align:left;width:100%;max-width:320px;box-sizing:border-box;
}
.done-action-hint-label{
  font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--a-700);
  margin-bottom:var(--s1);
}
.done-action-hint-text{
  font-size:var(--fs-head);font-weight:var(--fw-bold);color:var(--text);
  line-height:var(--lh-tight);
}
/* KI-Wizard */
.anlass-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-bottom:var(--s2);}
.anlass-card{
  width:100%;padding:var(--s4) var(--s3);border-radius:var(--rad-tile);text-align:center;
  background:var(--surface-raised);border:var(--bw-strong) solid var(--border);
  color:var(--text);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.anlass-card.selected,.anlass-card.active,.anlass-card:active{
  background:var(--accent-soft);border-color:var(--accent-hi);color:var(--text);
}
.anlass-ico{line-height:1;margin-bottom:var(--s2);display:flex;justify-content:center;align-items:center;min-height:24px;color:var(--text-muted);}
.anlass-card.selected .anlass-ico,.anlass-card.active .anlass-ico{color:var(--a-700);}
.anlass-ico svg{display:block;}
.anlass-lbl{font-size:var(--fs-label);font-weight:var(--fw-bold);color:inherit;line-height:var(--lh-tight);}
.anlass-card--custom{
  grid-column:1/-1;display:flex;flex-direction:row;align-items:center;
  justify-content:center;gap:var(--s2);text-align:left;padding:var(--s3) var(--s4);
}
.anlass-card--custom .anlass-ico{margin-bottom:0;min-height:0;}
.ai-custom-field{margin-bottom:var(--s3);}
.ai-custom-hint{display:block;font-size:var(--fs-hint);color:var(--text-muted);margin-top:var(--s1);}
#btn-custom-continue{width:100%;margin-top:var(--s1);}
/* Sprach-Badge ersetzt Flaggen-Emoji */
.lang-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:22px;border-radius:var(--rad-tab);
  background:var(--sf2);color:var(--text-muted);
  font-size:10px;font-weight:var(--fw-heavy);letter-spacing:.08em;
}
.ai-step-of{
  font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--text-muted);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s2);
}
.ai-step-nav{display:flex;gap:var(--s3);}
.ai-step-nav .ai-back-btn{flex:1;margin-top:var(--s2);}
/* Push-Vorschau: Benachrichtigungs-Kachel statt Formularfeld.
   Kein Rand, echter Schatten, großes Radius — Systembenachrichtigung-Optik. */
.push-preview{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--surface-raised);
  border-radius:var(--rad-tile);padding:var(--s3) var(--s4);
  box-shadow:var(--sh2);
}
.push-ico{
  width:36px;height:36px;flex-shrink:0;border-radius:var(--rad-tab);
  background:var(--accent);color:var(--on-accent);
  overflow:hidden;
  display:grid;place-items:center;font-weight:var(--fw-heavy);font-size:var(--fs-sm);
}
.push-ico img{width:100%;height:100%;display:block;}
.push-body{min-width:0;flex:1;}
.push-app{
  display:flex;justify-content:space-between;gap:var(--s2);
  font-size:var(--fs-micro);color:var(--text-muted);font-weight:var(--fw-bold);
  letter-spacing:.04em;text-transform:uppercase;
}
.push-when{flex-shrink:0;font-variant-numeric:tabular-nums;}
.push-title{
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);
  margin-top:var(--s1);line-height:var(--lh-tight);word-break:break-word;
}
.push-text{
  font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);
  margin-top:2px;word-break:break-word;white-space:pre-wrap;
}
.push-text.empty,.push-title.empty{color:var(--text-muted);font-style:italic;font-weight:var(--fw-regular);}
/* Zielgruppen-Karten: 2-Spalten-Raster, Geo über volle Breite. */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
.aud-card{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s1);padding:var(--s3);width:100%;
  border-radius:var(--rad-tile);
  background:var(--surface-raised);border:var(--bw) solid transparent;
  color:var(--text);
  transition:background var(--t-fast),border-color var(--t-fast);
  -webkit-tap-highlight-color:transparent;text-align:left;position:relative;
}
.aud-card--disabled{opacity:.45;cursor:not-allowed;}
.aud-card--disabled:active{opacity:.45;}
.aud-card.active{background:var(--accent-soft);border-color:var(--accent-hi);}
.aud-card:active{opacity:.8;}
.aud-ico{display:flex;align-items:center;color:var(--text-muted);margin-bottom:var(--s1);}
.aud-card.active .aud-ico{color:var(--a-700);}
.aud-lbl{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);}
.aud-sub{font-size:var(--fs-hint);font-weight:var(--fw-regular);color:var(--text-muted);line-height:var(--lh-tight);}
.aud-reach{font-size:var(--fs-hint);color:var(--text-muted);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;margin-top:var(--s1);}
.aud-card.active .aud-reach{color:var(--a-700);}
.aud-card.active .aud-sub{color:var(--text-muted);}
.aud-check{
  position:absolute;top:var(--s2);right:var(--s2);
  width:16px;height:16px;border-radius:var(--rad-round);
  background:var(--accent);color:var(--on-accent);
  display:none;place-items:center;
}
.aud-card.active .aud-check{display:grid;}
/* Formular-Felder gleichmäßig im Sheet verteilen */
#msg-normal-form,
#msg-create-step-1,
#msg-create-content,
#msg-create-step-2{display:flex;flex-direction:column;gap:var(--s5);}
#v-msg-new .sheet-body{gap:var(--s5);}
#ai-wizard{display:flex;flex-direction:column;gap:var(--s4);}
.ai-gen-center{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s6) 0;color:var(--text-muted);font-size:var(--fs-body);font-weight:var(--fw-medium);}
.send-when-lbl{font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s2);}
.send-when{display:flex;flex-direction:column;gap:var(--s2);}
.swbtn{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--rad-round);
  background:var(--surface-raised);font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text);
  transition:background var(--t-fast);-webkit-tap-highlight-color:transparent;text-align:left;
}
.swbtn > svg{flex-shrink:0;}
.swbtn.primary{background:var(--accent);color:var(--on-accent);}
.swbtn.selected{background:var(--accent-soft);border:var(--bw-strong) solid var(--accent-hi);}
.swbtn:active{opacity:.8;}
.reach-pill{
  margin-left:auto;font-size:var(--fs-hint);font-weight:var(--fw-bold);padding:var(--s1) var(--s2);
  border-radius:var(--rad-round);background:var(--ok-soft);color:var(--ok);flex-shrink:0;
}
.ai-back-btn{
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);
  padding:var(--s2) 0;text-align:center;width:100%;margin-top:var(--s1);
}
.ai-wizard-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);letter-spacing:.03em;text-transform:uppercase;margin-bottom:var(--s3);}
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s2);}
.variant-card{
  padding:var(--s4);border-radius:var(--rad-tile);
  background:var(--surface-raised);border:var(--bw-strong) solid transparent;
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
  font-size:var(--fs-sm);line-height:var(--lh-normal);margin-bottom:var(--s2);
}
.variant-card:last-child{margin-bottom:0;}
.variant-n{
  font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--text-muted);
  letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:var(--s1);
}
.variant-card:active,.variant-card:hover{background:var(--accent-soft);border-color:var(--accent-hi);}
.variant-title{display:block;font-weight:var(--fw-bold);margin-bottom:var(--s1);}

/* Öffnungszeiten-Tabelle + Toggle + Tagesabschluss */
.hours-table{display:flex;flex-direction:column;}
.hours-row{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:var(--bw) solid var(--border);
}
.hours-row:last-child{border-bottom:none;}
.hours-day{width:26px;font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);flex-shrink:0;}
.hours-times{display:flex;align-items:center;gap:var(--s2);flex:1;}
.hours-inp:focus,
.hours-inp:focus-visible{outline:none;}
@media (hover:hover) and (pointer:fine){
  .hours-inp:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
}
.hours-inp{
  flex:1;min-width:0;background:var(--surface-raised);border:none;border-radius:var(--rad-tab);
  padding:var(--s2) var(--s2);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text);text-align:center;
}
.hours-sep{font-size:var(--fs-label);color:var(--text-muted);flex-shrink:0;}
.hours-closed{font-size:var(--fs-label);color:var(--text-muted);font-style:italic;}
.toggle-switch{
  position:relative;width:50px;height:28px;flex-shrink:0;cursor:pointer;display:inline-block;
}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
/* Input selbst unsichtbar — Ring auf dem Track-Sibling (WCAG 2.4.7). */
.toggle-switch input:focus,
.toggle-switch input:focus-visible{outline:none;}
@media (hover:hover) and (pointer:fine){
  .toggle-switch input:focus-visible + .toggle-track{
    /* offset 3px ist funktional, nicht kosmetisch: der Ring MUSS
       gegen die Kartenfläche liegen (8.18:1). Direkt am Track im
       An-Zustand wäre Accent-auf-Accent = 1.00:1, unsichtbar.
       Offset nicht reduzieren ohne Neuberechnung. */
    outline:2px solid var(--accent);
    outline-offset:3px;
  }
}
.toggle-track{
  position:absolute;inset:0;background:var(--surface-raised);border-radius:var(--rad-round);
  transition:background var(--t-fast),box-shadow var(--t-fast);
  box-shadow:inset 0 0 0 var(--bw-strong) var(--text-muted);
}
.toggle-switch input:checked+.toggle-track{background:var(--accent);box-shadow:none;}
.toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:22px;height:22px;border-radius:var(--rad-round);
  background:var(--text);box-shadow:var(--sh1);
  transition:transform var(--t-fast),background var(--t-fast);pointer-events:none;
}
.toggle-switch input:checked~.toggle-thumb{transform:translateX(22px);background:var(--surface);}
.set-row-toggle{display:flex;align-items:center;justify-content:space-between;}
.auto-num-inp{
  width:44px;background:var(--surface-raised);border:var(--bw-strong) solid transparent;border-radius:var(--rad-tab);
  padding:var(--s1) var(--s2);font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text);
  text-align:center;display:inline-block;vertical-align:middle;
  -moz-appearance:textfield;
}
.auto-num-inp::-webkit-inner-spin-button,.auto-num-inp::-webkit-outer-spin-button{-webkit-appearance:none;}
.auto-num-inp:focus,
.auto-num-inp:focus-visible{outline:none;}
@media (hover:hover) and (pointer:fine){
  .auto-num-inp:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
}
.auto-sub{line-height:1.9;}
/* .close-day-btn: Form/Farbe ueber zentrale Button-Rollen */

/* ══════════════════════════════════════════════════════
   LOCK — STAFF GRID + PIN (scoped unter #v-lock)
══════════════════════════════════════════════════════ */
#lock-select{display:flex;flex-direction:column;align-items:center;width:100%;transition:opacity var(--t-base) var(--ease);}
#lock-select.leave{opacity:0;pointer-events:none;}
#v-lock:not(.active) #lock-pin,#v-lock:not(.active) #lock-select{transition:none;}
/* PIN: kompakter Block unten (Daumenreichweite).
   Chip→Dots --s6, Dots→Keypad --s7 — PIN und Chip sitzen klar
   über dem Ziffernblock, Keypad bleibt unten verankert.
   Fehler absolut — nimmt keinen Platz, schiebt den Block nicht hoch. */
#lock-pin{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:calc(var(--safe-t) + var(--s4)) var(--s6) calc(var(--safe-b) + var(--s3));
  overflow:hidden;overscroll-behavior:none;background:var(--bg);
  opacity:0;pointer-events:none;transform:translateX(28px) scale(.99);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
#lock-pin.active{opacity:1;pointer-events:auto;transform:none;}
#lock-pin.is-locked{
  justify-content:stretch;
}
.pin-stage{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:380px;flex-shrink:0;
}
#lock-pin.is-locked .pin-stage{
  flex:1;min-height:0;justify-content:flex-start;
}
.pin-head{display:flex;flex-direction:column;align-items:center;width:100%;gap:var(--s6);}
#lock-pin .lock-who-chip{margin-bottom:0;}
#lock-pin.is-locked .pin-dots,
#lock-pin.is-locked .pin-prompt,
#lock-pin.is-locked .keypad-wrap{display:none;}
/* Während der PIN-Prüfung ist der Block gesperrt — dann auch kein Abbrechen */
#lock-pin:not(.is-locked):has(.keypad[style*="pointer-events: none"]) .pin-act--right{pointer-events:none;opacity:.45;}
#lock-pin .lockout-panel{
  display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;
  width:100%;max-width:320px;padding:var(--s5) var(--s4);text-align:center;gap:var(--s3);
  box-sizing:border-box;
}
#lock-pin.is-locked .lockout-panel{display:flex;}
#lock-pin .lockout-title{
  margin:0;font-family:var(--ff-display);font-size:var(--fs-title);font-weight:var(--fw-heavy);
  color:var(--text);letter-spacing:-.02em;line-height:var(--lh-tight);
}
#lock-pin .lockout-countdown{
  margin:0;font-size:var(--fs-head);font-weight:var(--fw-medium);color:var(--text-muted);
  font-variant-numeric:tabular-nums;line-height:var(--lh-tight);
}
#lock-pin .lockout-hint{
  margin:0;font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--text-muted);
  line-height:var(--lh-normal);max-width:28ch;
}
.keypad-wrap{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:100%;margin-top:var(--s7);
}
#lock-pin .keypad-wrap{margin-top:var(--s5);}
.pin-actions{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:380px;flex-shrink:0;
  margin-top:var(--s5);
  position:relative;z-index:1;background:var(--bg);
}
#lock-pin .pin-head,#lock-pin .keypad-wrap{max-width:380px;width:100%;}
.lock-grid-title{font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--text-muted);margin:0 0 var(--s5);text-align:center;letter-spacing:.01em;}

/* Getrennte Auswahlkarten — Abstand trennt Ziele, keine Gruppen-Trennlinien.
   Radius --rad-tile (12px), wie ios-group-Karten. */
#lock-select #staff-grid{
  display:flex;flex-direction:column;gap:var(--s3);
  width:100%;max-width:430px;margin:0 0 var(--s6);padding:0;
  background:transparent;border-radius:0;overflow:visible;
}
#lock-select #staff-grid .lock-staff-row{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:44px;
  padding:var(--s3) var(--s4);
  background:var(--surface);border:0;border-radius:var(--rad-tile);
  color:var(--text);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast);
  position:relative;
}
#lock-select #staff-grid .lock-staff-row:active{background:var(--surface-raised);}
#lock-select #staff-grid .lock-staff-row[disabled]{
  cursor:default;opacity:1;
}
#lock-select #staff-grid .lock-staff-row[disabled]:active{background:var(--surface);}
#lock-select #staff-grid .lock-staff-row[disabled] .ios-row-label{
  color:var(--text-muted);
}
/* Avatar: --av-staff-* (unverändert). Keine Opazität auf dem Badge. */
#lock-select #staff-grid .lock-staff-av{
  width:var(--av-staff-size);height:var(--av-staff-size);border-radius:var(--rad-round);
  background:var(--av-staff-fill);color:var(--av-staff-text);
  font-family:var(--ff-display);font-size:var(--av-staff-fs);font-weight:var(--av-staff-fw);
  display:grid;place-items:center;flex-shrink:0;line-height:1;
}
#lock-select #staff-grid .ios-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
#lock-select #staff-grid .ios-row-label{
  font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--lh-tight);
}
#lock-select #staff-grid .ios-row-sub{
  font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#lock-select #staff-grid .ios-row-chev{flex-shrink:0;color:var(--text-muted);opacity:.35;}
#lock-select #staff-grid .empty-state,
#lock-select #staff-grid .error-state{
  margin:0;border-radius:var(--rad-tile);background:var(--surface);border:0;box-shadow:none;
}
#lock-select #staff-grid .sk-ios-card{
  margin:0;padding:0;min-height:0;
  background:var(--surface);border-radius:var(--rad-tile);
}
#lock-select #staff-grid .sk-ios-card .sk-ios-row{
  min-height:56px;padding:var(--s3) var(--s4);
}

/* Fade: keine Höhe ohne Scroll — sonst überdeckt height:56 + margin-top:-56
   den Kartenboden (auch bei opacity:0) und wirkt wie Leerraum in der Karte. */
#lock-select .staff-scroll-fade{
  position:sticky;bottom:0;align-self:center;
  width:100%;max-width:430px;
  height:0;margin:0;padding:0;border:0;
  opacity:0;overflow:hidden;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg));
  transition:opacity var(--t-base);
  z-index:2;
}
#lock-select .staff-scroll-fade.vis{
  height:56px;
  margin-top:-56px;
  opacity:1;
}

.lock-who-chip{
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
  background:var(--surface);border-radius:var(--rad-round);padding:var(--s2) var(--s4);
  margin-bottom:0;border:var(--bw-strong) solid var(--border-strong);max-width:100%;
}
#lock-pin #lock-who-av{
  width:var(--av-staff-size-chip);height:var(--av-staff-size-chip);border-radius:var(--rad-round);
  background:var(--av-staff-fill);color:var(--av-staff-text);
  font-family:var(--ff-display);font-size:var(--av-staff-fs-chip);font-weight:var(--av-staff-fw);
  display:grid;place-items:center;flex-shrink:0;position:relative;line-height:1;
}
.lock-who-info{display:flex;flex-direction:column;gap:var(--s1);min-width:0;overflow:hidden;text-align:left;}
/* UI-PIN1: Namensschild ist der Weg zurück zur Mitarbeiterauswahl */
button.lock-who-chip{font:inherit;color:var(--text);cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button.lock-who-chip:active{background:var(--surface-raised);}
button.lock-who-chip:focus-visible{outline:2px solid var(--link);outline-offset:3px;}
.lock-who-caret{color:var(--text-muted);flex-shrink:0;margin-left:calc(var(--s1) * -1);}
#lock-who-name{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#lock-who-role{font-size:var(--fs-label);font-weight:var(--fw-regular);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* PIN-Tasten: Systemtoken statt rgba(255,255,255,.10).
   Vorschlag --surface-raised: Ziffer (--text) dagegen
   Dark 13.85:1 / Light 15.62:1 (WCAG 1.4.3). Form gegen --bg
   über border-strong (≥3:1 UI). */
#lock-pin .key:not(.key-empty){
  background:var(--surface-raised);
  border:var(--bw) solid var(--border-strong);
  box-shadow:var(--sh1);
}
#lock-pin .key:not(.key-empty):active,
#lock-pin .key:not(.key-empty).pressed{
  transform:scale(.88);
  filter:none;
  background:var(--surface);
  box-shadow:inset 0 1px 3px rgba(23,20,31,.12);
  transition-duration:0s;
}
#lock-pin .key-empty{background:transparent;border:0;box-shadow:none;}

#v-lock .lock-help-link{
  align-self:center;flex-shrink:0;
  font-size:var(--fs-hint);color:var(--link);
  text-decoration:none;padding:var(--s2) var(--s3) calc(var(--safe-b) + var(--s3));
  display:block;transition:opacity var(--t-fast);
}
#v-lock .lock-help-link:hover{opacity:.85;}
#lock-select .lock-help-link{padding:var(--s4) var(--s3) 0;}
/* ── PIN-SCREEN: RESPONSIVE HÖHE ─────────────────────────────
   Vier Stufen statt Scrollen oder Abschneiden:
   Abstände und Tastenfeld schrumpfen, Safe-Areas bleiben. */
@media (max-height: 750px) {
  #v-lock{padding-top:calc(var(--safe-t) + var(--s5));padding-bottom:calc(var(--safe-b) + var(--s5));}
  .keypad{max-width:270px;gap:var(--s3);}
  #lock-pin .pin-actions-row{max-width:270px;column-gap:var(--s3);}
  .pin-head{gap:var(--s5);}
  #lock-pin .keypad-wrap{margin-top:var(--s6);}
  .pin-actions{margin-top:var(--s6);}
}
@media (max-height: 600px) {
  #v-lock{padding-top:calc(var(--safe-t) + var(--s3));padding-bottom:calc(var(--safe-b) + var(--s3));}
  .keypad{max-width:220px;gap:var(--s2);}
  #lock-pin .pin-actions-row{max-width:220px;column-gap:var(--s2);}
  #lock-pin{padding-top:calc(var(--safe-t) + var(--s3));padding-bottom:calc(var(--safe-b) + var(--s2));}
  .pin-head{gap:var(--s4);}
  #lock-pin .keypad-wrap{margin-top:var(--s5);}
  .pin-actions{margin-top:var(--s5);}
  #lock-pin .pin-prompt{min-height:1.35em;margin-bottom:var(--s2);font-size:var(--fs-sm);}
}
@media (max-height: 480px) {
  #v-lock{padding-top:calc(var(--safe-t) + var(--s2));padding-bottom:calc(var(--safe-b) + var(--s2));}
  .pin-dot{width:12px;height:12px;}
  .pin-dots{gap:var(--s3);}
  .keypad{max-width:176px;gap:var(--s2);}
  #lock-pin .pin-actions-row{max-width:176px;column-gap:var(--s2);}
  #lock-pin{padding-top:calc(var(--safe-t) + var(--s2));padding-bottom:calc(var(--safe-b) + var(--s2));}
  .pin-head{gap:var(--s3);}
  #lock-pin .keypad-wrap{margin-top:var(--s4);}
  .pin-actions{margin-top:var(--s4);}
}
@media (max-height: 440px) {
  #v-lock{padding-top:calc(var(--safe-t) + var(--s1));padding-bottom:calc(var(--safe-b) + var(--s1));}
  .lock-logo .brand-lockup{--lockup:36px;}
  .keypad{max-width:152px;gap:var(--s1);}
  #lock-pin .pin-actions-row{max-width:152px;column-gap:var(--s1);}
  .lock-help-link{padding:0 var(--s2) calc(var(--safe-b) + var(--s2));}
  #lock-pin{padding-top:calc(var(--safe-t) + var(--s1));padding-bottom:calc(var(--safe-b) + var(--s1));}
  .pin-head{gap:var(--s2);}
  #lock-pin .keypad-wrap{margin-top:var(--s3);}
  .pin-actions{margin-top:var(--s3);}
}
a.set-row{text-decoration:none;color:inherit;cursor:pointer;}
a.set-row:hover,a.set-row:active{background:var(--surface-raised);}

/* ══════════════════════════════════════════════════════
   BOTTOM SHEETS
   Sheet  = Ablauf mit Eingaben / Auswahl / mehreren Schritten
            (bearbeiten, filtern, Manager waehlen, Vorschau mit Inhalt).
   Dialog = Entscheidung, die unterbricht: Ja/Nein oder „bestaetige mit PIN“.
            Nie ein zweites Sheet ueber einem Sheet fuer dieselbe Entscheidung.
   Manager-Freigabe mit Auswahlliste bleibt Sheet; nur eigene PIN → Dialog
   (#confirm-dialog, nicht openSheet).
══════════════════════════════════════════════════════ */
.sheet-backdrop{
  position:fixed;inset:0;z-index:300;
  background:var(--scrim);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
/* Gestapelte Sheets: nur das unterste Backdrop dimmt (wie Scale bei Tiefe 1).
   Hoehere Backdrops bleiben klickbar (Dismiss), aber transparent — sonst addiert
   sich --scrim. */
.sheet-backdrop.open.sheet-backdrop--nest{
  opacity:0;
}
/* Nur das oberste Sheet ist bedienbar — darunter pointer-events aus
   (sonst erreichbar: Schliessen-Kreuz neben sheet--fit). */
.bottom-sheet.open:not(.sheet--top){
  pointer-events:none;
}
.bottom-sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:301;
  background:var(--surface);border-radius:var(--rad-tile) var(--rad-tile) 0 0;
  padding:0 0 calc(var(--safe-b) + var(--s5));
  transform:translateY(100%);
  transition:transform var(--t-slow) var(--spring);
  max-height:90dvh;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.bottom-sheet.open{transform:translateY(0);}
.sheet-handle{width:40px;height:4px;border-radius:var(--rad-round);background:var(--border);margin:var(--s4) auto var(--s1);opacity:.6;}
.sheet-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5) var(--s3);border-bottom:var(--bw) solid var(--border);
  background:var(--surface);position:sticky;top:0;z-index:1;
}
.sheet-title{font-family:var(--ff-display);font-size:var(--fs-head);font-weight:var(--fw-bold);letter-spacing:-.01em;}
.sheet-close{width:32px;height:32px;border-radius:var(--rad-round);background:var(--surface-raised);display:grid;place-items:center;color:var(--text-muted);}
.sheet-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);}

/* ── iOS-Sheets (Staff-Muster): --bg + Header-Linie + Body ohne Doppel-Inset ──
   Referenz: #staff-sheet. Alle sheet--fit mit sheet-hd--ios folgen dem. */
.bottom-sheet.sheet--fit{
  background:var(--bg);
  max-height:94dvh;
  min-height:0;
  height:auto;
}
.bottom-sheet.sheet--fit > .sheet-body{
  padding:0 0 var(--s4);
  gap:0;
}

/* ── MANAGER-OVERRIDE / EIGEN-PIN-SHEET (#mgr-sheet) ──
   Zwei Modi, ein Markup: openManagerOverride + confirmOwnPin.
   Chrome kommt von .sheet--fit (Staff-Muster). */
#mgr-sheet .sheet-body > .mgr-reason{
  margin:0 var(--s4) var(--s3);
  padding:var(--s2) 0 0;
}
#mgr-sheet .sheet-body > .ios-group,
#mgr-sheet #mgr-select-block .ios-group{
  margin-left:var(--s4);margin-right:var(--s4);
}
#mgr-sheet #mgr-pin-group:not(.ios-group--first){margin-top:var(--s5);}
.mgr-reason{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);}
/* Staff-Zeilen in ios-group — kein alter Rahmen-Karten-Look */
#mgr-staff-list.ios-group{
  display:flex;flex-direction:column;gap:0;
  padding:0;max-height:200px;overflow-y:auto;
}
.mgr-staff-item{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:44px;
  padding:var(--s3) var(--s4);
  background:transparent;border:0;border-radius:0;
  cursor:pointer;color:var(--text);text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast);
  position:relative;
}
.mgr-staff-item + .mgr-staff-item::before{
  content:"";position:absolute;left:calc(var(--s4) + 34px + var(--s3));right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
.mgr-staff-item.selected{background:var(--accent-soft);}
.mgr-staff-item.selected .mgr-staff-name{color:var(--a-700);font-weight:var(--fw-bold);}
.mgr-staff-item:active{background:var(--surface-raised);}
.mgr-staff-av{
  width:34px;height:34px;border-radius:var(--rad-round);
  background:var(--accent-soft);color:var(--a-700);
  font-size:var(--fs-label);font-weight:var(--fw-bold);display:grid;place-items:center;flex-shrink:0;
}
.mgr-staff-name{font-size:var(--fs-body);font-weight:var(--fw-medium);}
.mgr-staff-role{font-size:var(--fs-hint);color:var(--text-muted);}
/* PIN: Solo-Fläche --surface + --border-strong (wie Teil A).
   Ursache weißer Punkt neben Ziffer: type=password (Browser-Disc) PLUS
   -webkit-text-security:disc (zweites Disc) und Placeholder „••••“ —
   text-security entfernt; Placeholder bleibt Attribut, leer bei Fokus/Wert. */
#mgr-sheet .ios-field .input-field.input-field--solo#mgr-pin-inp,
#mgr-pin-inp.input-field--solo{
  font-size:var(--fs-title);letter-spacing:.5em;font-weight:var(--fw-bold);
  color:var(--text);
  background:var(--surface);
  border:var(--bw) solid var(--border-strong);
  border-radius:var(--rad-tile);
  min-height:44px;padding:var(--s3) var(--s4);width:100%;text-align:center;
  box-sizing:border-box;box-shadow:none;
  -webkit-appearance:none;appearance:none;
  caret-color:var(--accent);
}
#mgr-pin-inp::placeholder{color:var(--text-muted);letter-spacing:.5em;}
/* Maskierte PIN-Felder (U1): Systemmaskierung von type=password, nur Abstand
   fuer gut lesbare Punkte. #mgr-pin-inp hat oben eine eigene Regel. */
.input-field.input-field--pin{letter-spacing:.3em;font-variant-numeric:tabular-nums;}
.input-field.input-field--pin::placeholder{letter-spacing:.3em;}
/* #mgr-err liegt im Confirm-Dialog; Sheet-Selektor bleibt harmlos falls wieder genutzt */
#mgr-sheet .mgr-err{
  margin:var(--s3) var(--s4) 0;
  font-size:var(--fs-sm);color:var(--err);display:none;text-align:center;
}
#mgr-sheet .mgr-err.vis{display:block;}
/* Legacy-Klassen falls noch referenziert */
.mgr-pin-wrap{display:flex;flex-direction:column;gap:var(--s2);}
.mgr-pin-label,.mgr-select-label{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-muted);}
.mgr-err{font-size:var(--fs-sm);color:var(--err);display:none;text-align:center;}
.mgr-err.vis{display:block;}

/* ── GEO-KARTE ──
   Bewusst ohne Kartenbibliothek: das Projekt hat keine Build-Stufe und
   keine Abhaengigkeiten. Gezeichnet werden rohe OSM-Raster-Kacheln als
   <img>, positioniert ueber die Web-Mercator-Formel. */
.geo-map{
  position:relative;margin-top:var(--s3);border-radius:var(--rad-tile);overflow:hidden;
  aspect-ratio:16/10;background:var(--surface-raised);border:var(--bw) solid var(--border);
  touch-action:pan-y;
}
.geo-map-tiles{position:absolute;inset:0;}
.geo-map-tiles img{position:absolute;width:256px;height:256px;border:0;}
/* Hell — OSM-Kacheln unverändert, kein Filter. */
.geo-pin{
  position:absolute;transform:translate(-50%,-100%);
  color:var(--a-700);filter:drop-shadow(0 2px 4px var(--shade));
  pointer-events:none;
}
.geo-pin-lbl{
  position:absolute;transform:translate(-50%,4px);white-space:nowrap;
  font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text);
  background:var(--surface);border:var(--bw) solid var(--border);
  border-radius:var(--rad-round);padding:var(--s1) var(--s2);pointer-events:none;
}
.geo-attr{
  position:absolute;right:5px;bottom:4px;z-index:2;
  font-size:var(--fs-micro);color:var(--text-muted);background:var(--surface);
  border-radius:var(--rad-round);padding:var(--s1) var(--s1);opacity:.85;
}
.geo-attr a{color:inherit;}
.geo-map-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s2);
  font-size:var(--fs-sm);color:var(--text-muted);text-align:center;padding:0 var(--s5);
}

/* ── P3-A4 Standortpflege (Inhaber) ── */
.geo-info{
  display:flex;gap:var(--s3);align-items:flex-start;
  margin:var(--s4) var(--s4) 0;padding:var(--s3) var(--s4);
  background:var(--surface);border-radius:var(--rad-tile);
  font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text);
}
.geo-info p{margin:0;}
.geo-info-ico{flex-shrink:0;margin-top:1px;color:var(--text-muted);}
/* Gesamtstatus aus get/save_geofences (sync_status) – kein Status je Standort */
.geo-status{
  margin:var(--s3) var(--s4) 0;padding:var(--s3) var(--s4);
  border-radius:var(--rad-tile);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  line-height:var(--lh-normal);
}
.geo-status--disabled{background:var(--info-bg);color:var(--info);}
.geo-status--pending{background:var(--warn-bg);color:var(--warn);}
.geo-status--applied{background:var(--ok-bg);color:var(--ok);}
.geo-status--failed{background:var(--err-bg);color:var(--err);}
.geo-row{align-items:flex-start;}
.geo-row .ios-badge,.geo-row .ios-row-chev{margin-top:2px;}
.geo-row-msg{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.geo-limit-note{padding-top:var(--s2);}
.bar-btn:disabled{opacity:.4;cursor:not-allowed;}
.bar-btn:disabled:hover,.bar-btn:disabled:active{background:var(--surface);color:inherit;}
.geo-msg-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);}
.geo-msg-count{font-size:var(--fs-label);color:var(--text-muted);font-variant-numeric:tabular-nums;}
.geo-msg-count.is-long{color:var(--warn);}
.geo-msg-count.is-over{color:var(--err);}
.geo-msg-inp{resize:none;min-height:72px;line-height:var(--lh-normal);}
.geo-picked.is-set{color:var(--text);}
#geo-sheet .geo-remove-btn{
  display:block;margin:var(--s5) var(--s4) 0;width:calc(100% - 2 * var(--s4));min-height:44px;
  box-sizing:border-box;background:var(--surface);color:var(--err);
  border:0;box-shadow:inset 0 0 0 var(--bw) var(--border-strong);   /* Rand ≥3:1 wie .btn-secondary */
  border-radius:var(--rad-tile);font-weight:var(--fw-bold);
}
#geo-sheet .geo-remove-btn[hidden]{display:none !important;}
#geo-sheet .ios-group > .geo-picked{display:block;width:100%;box-sizing:border-box;padding:var(--s3) var(--s4);}

/* ── KUNDEN-DETAIL ──
   Gleiches Muster wie Profil-Unterseiten: .set-scroll (kein H-Padding)
   + .ios-group (margin --s4). Hero steckt in ios-group--pad.
   Wichtig: kein flex-column auf dem Scroll-Body — sonst schrumpfen
   ios-groups (overflow:hidden) und schneiden Zeilen ab. */
#v-cus-detail{background:var(--bg);display:flex;flex-direction:column;min-height:0;}
#cd-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cus-detail-body{
  flex:1;min-height:0;
  /* H-Padding kommt von .ios-group / .cd-hero-card — wie .set-scroll */
}
.cus-detail-body > .ios-group,
.cus-detail-body > .ios-group-hd,
.cus-detail-body > #cd-delete-section{
  flex-shrink:0;
}
.cd-hero-card{display:flex;flex-direction:column;gap:var(--s4);}
.cd-hero{
  display:flex;align-items:flex-start;gap:var(--s4);
  padding:0;
}
.cd-hero-info{flex:1;min-width:0;}
.cd-hero-stamps{
  font-family:var(--ff-display);font-size:var(--fs-hero);font-weight:var(--fw-heavy);
  letter-spacing:-.03em;line-height:1.05;margin-top:var(--s2);color:var(--text);
  font-variant-numeric:tabular-nums;
}
.cd-actions{display:flex;flex-direction:column;gap:var(--s3);padding:0;}
/* display:flex schlägt [hidden] in WebKit — sonst blitzt Prämien-Button vor Detail-Load */
.cd-redeem-block{display:flex;flex-direction:column;gap:var(--s2);}
.cd-redeem-block[hidden]{display:none!important;}
#cd-delete-section[hidden]{display:none!important;}
.cd-redeem-note{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-muted);margin:0;}
.cd-redeem-reward{
  font-size:var(--fs-head);font-weight:var(--fw-bold);color:var(--text);margin:0;
  overflow-wrap:anywhere;word-break:break-word;
}
.cd-av{
  width:52px;height:52px;border-radius:var(--rad-round);flex-shrink:0;
  background:var(--accent-soft);color:var(--a-700);
  font-family:var(--ff-display);
  font-size:var(--fs-head);font-weight:var(--fw-bold);display:grid;place-items:center;
}
.cd-name{
  font-family:var(--ff-display);font-size:var(--fs-title);font-weight:var(--fw-heavy);
  letter-spacing:-.02em;line-height:var(--lh-tight);
  overflow-wrap:anywhere;word-break:break-word;white-space:normal;
}
.cd-email{
  font-size:var(--fs-label);color:var(--text-muted);margin-top:var(--s1);
  line-height:var(--lh-normal);
  overflow-wrap:anywhere;word-break:break-word;white-space:normal;
}
#cd-score-section{padding:var(--s4);}
.cd-stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3);margin-bottom:var(--s3);}
.cd-stat{text-align:center;min-width:0;}
.cd-stat-n{font-family:var(--ff-display);font-size:var(--fs-title);font-weight:var(--fw-heavy);font-variant-numeric:tabular-nums;}
.cd-stat-l{
  font-size:var(--fs-hint);color:var(--text-muted);margin-top:var(--s1);
  line-height:var(--lh-tight);overflow-wrap:anywhere;
}
.cd-score-hint{font-size:var(--fs-sm);line-height:var(--lh-normal);margin:0;color:var(--text-muted);}
.cd-score-hint.loyal{color:var(--ok);}
.cd-score-hint.wobbly{color:var(--text-muted);}
.cd-score-hint.lapsed{color:var(--err-calm);}
.cd-score-hint.new_cust{color:var(--text-muted);}
.cd-rhythm-hint{
  font-size:var(--fs-sm);line-height:var(--lh-normal);margin:var(--s2) 0 0;color:var(--text-muted);
}
.cd-note-row .ios-row-label{
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cd-note-row .cd-note-empty{color:var(--text-muted);font-weight:var(--fw-regular);}
.cd-account-zone .cd-danger-zone{
  border:0;
  border-radius:0;margin:0;
  position:relative;
}
.cd-account-zone .cd-danger-zone::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
.cd-sheet-hint{
  margin:0 0 var(--s3);font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);
}
#cd-meta-rows .ios-row,
.cd-history .ios-row{cursor:default;}
#cd-meta-rows .ios-row-value,
.cd-history .ios-row-label{
  overflow-wrap:anywhere;word-break:break-word;white-space:normal;
}
.cd-meta-row-end{padding:var(--s3) var(--s4);display:flex;justify-content:flex-end;}
.cd-history{display:flex;flex-direction:column;}
.cd-scan-date{font-size:var(--fs-sm);color:var(--text-muted);}
.cd-scan-type{font-size:var(--fs-sm);font-weight:var(--fw-medium);}
.cd-danger-zone{
  padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s3);
  border:var(--bw-strong) solid var(--err-line);
}
.cd-delete-hint{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);}
#btn-cd-delete{align-self:stretch;}

.type-tabs{display:flex;gap:var(--s2);}
.type-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s1);
  padding:var(--s2) var(--s2);border-radius:var(--rad-round);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);background:var(--surface-raised);
  border:1.5px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);white-space:nowrap;
}
.type-tab.active{background:var(--accent-hi);color:var(--a-700);border-color:var(--accent-line);}

/* ══════════════════════════════════════════════════════
   VIEW: NACHRICHTEN
══════════════════════════════════════════════════════ */
#v-messages{overflow:hidden;display:flex;flex-direction:column;}
.msg-hub-pad{padding:var(--s3) var(--s4) 0;flex-shrink:0;}
/* Info-/Meta-Zeilen über Listen — nicht .ios-group-hd (das ist für kurze Titel) */
.pane-note,
.msg-hub-note,
.msg-hub-intro{
  margin:0;
  padding:var(--s3) var(--s4) var(--s3);
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  color:var(--text-muted);
  line-height:var(--lh-normal);
  letter-spacing:.01em;
  text-transform:none;
  flex-shrink:0;
}
/* Meta-Zeile (z. B. „10 von 10 aktiv“) eng unter dem Hinweis */
.pane-meta{
  margin:0;
  padding:0 var(--s4) var(--s3);
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  color:var(--text-muted);
  letter-spacing:.01em;
  text-transform:none;
  line-height:var(--lh-normal);
  flex-shrink:0;
}
.pane-note:has(+ .pane-meta:not([hidden])),
.msg-hub-note:has(+ .pane-meta:not([hidden])){
  padding-bottom:var(--s1);
}
.pane-note + .pane-note,
.msg-hub-note + .msg-hub-note,
.pane-note + .pane-meta,
.msg-hub-note + .pane-meta{
  padding-top:0;
}
/* Hinweis/Meta direkt über Liste/Gruppe: kein Extra-Margin der Gruppe */
.pane-note + .ios-group,
.pane-note + .ios-group.ios-group--first,
.pane-meta + .ios-group,
.pane-meta + .ios-group.ios-group--first,
.msg-hub-note + .ios-group,
.msg-hub-note + .ios-group.ios-group--first{
  margin-top:0;
}
.pane-note + .camp-list-wrap > .ios-group:first-child,
.pane-meta + .camp-list-wrap > .ios-group:first-child,
.msg-hub-note + .camp-list-wrap > .ios-group:first-child{
  margin-top:0;
}
.pane-meta + .ptr-ind + .cus-list,
.cus-count-bar + .ptr-ind + .cus-list{
  padding-top:0;
}
.msg-hub-intro--note{padding-top:0;opacity:.85;}
.msg-hub-pane{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + var(--tab-fab-over) + var(--s5));
}
.msg-auto-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + var(--tab-fab-over) + var(--s5));
}
.msg-create-step-of{
  /* Legacy-Selector; aktiv ist .msg-progress */
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-muted);margin:0;
}
#btn-msg-to-step1{margin-top:0;}
#camp-list, .camp-list-wrap{
  padding:0 0 var(--s3);
}
.camp-card{
  background:var(--surface);border-radius:var(--rad-tile);padding:var(--s4);border:var(--bw-strong) solid var(--border-strong);
  cursor:pointer;transition:transform var(--t-fast),border-color var(--t-fast);-webkit-tap-highlight-color:transparent;
}
.camp-card:active{transform:scale(.985);border-color:var(--accent);}
.ai-sug-card{
  padding:var(--s4);border-radius:var(--rad-tile);background:var(--surface-raised);
  border:var(--bw-strong) solid transparent;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
  -webkit-tap-highlight-color:transparent;margin-bottom:var(--s2);
}
.ai-sug-card:last-child{margin-bottom:0;}
.ai-sug-card:active{background:var(--accent-soft);border-color:var(--accent-hi);transform:scale(.985);}
.ai-sug-title{font-size:var(--fs-body);font-weight:var(--fw-bold);margin-bottom:var(--s1);}
.ai-sug-body{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ai-sug-use{font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--a-700);margin-top:var(--s2);display:block;}
.camp-hd{display:flex;align-items:flex-start;gap:var(--s3);}
.camp-icon{
  width:38px;height:38px;border-radius:var(--rad-tab);
  background:var(--surface-raised);display:grid;place-items:center;flex-shrink:0;
  color:var(--text-muted);
}
.camp-title-row{flex:1;min-width:0;}
.camp-title{font-size:var(--fs-body);font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.camp-meta{font-size:var(--fs-hint);color:var(--text-muted);margin-top:var(--s1);}
.camp-badge{
  flex-shrink:0;font-size:var(--fs-hint);font-weight:var(--fw-bold);padding:var(--s1) var(--s2);border-radius:var(--rad-round);
  letter-spacing:.02em;white-space:nowrap;align-self:flex-start;
}
.camp-badge.sent{background:var(--ok-soft);color:var(--ok);}
.camp-badge.queued{background:var(--surface-raised);color:var(--text);}
.camp-badge.sched{background:var(--accent-soft);color:var(--a-700);}
.camp-badge.draft{background:var(--surface-raised);color:var(--text-muted);}
.camp-preview{
  font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);margin-top:var(--s3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.camp-footer{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap;}
.camp-target{font-size:var(--fs-label);color:var(--text-muted);}
/* Kampagnen-Detail */
.camp-detail-body{flex:1;overflow-y:auto;}
.camp-det-header{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.camp-det-time{font-size:var(--fs-hint);color:var(--text-muted);}
.camp-det-meta-row{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);}
.camp-det-reach{font-weight:var(--fw-bold);margin-left:auto;}
.camp-det-actions{display:flex;flex-direction:column;gap:var(--s3);}
.camp-det-cancel{color:var(--err);}
.camp-det-cancel:hover{background:color-mix(in srgb,var(--err) 16%,transparent);}

/* ══════════════════════════════════════════════════════
   VIEW: EINSTELLUNGEN
══════════════════════════════════════════════════════ */
/* Settings/Profil-Views: Tab-Bar ist ausgeblendet — kein tab-h-Polster.
   Unten nur safe-area + s5, gleiche Ruhe wie Abschnitte dazwischen. */
.set-scroll{flex:1;overflow-y:auto;padding:var(--s3) 0 calc(var(--safe-b) + var(--s5));}
/* Team ist Tab-Root: gleiche Formel wie .dash-body / .cus-list. */
#v-team .set-scroll{
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + var(--tab-fab-over) + var(--s5));
}

/* Profil – Kategorie-Liste */
.prof-cats{display:flex;flex-direction:column;margin:var(--s4) var(--s4) 0;gap:var(--s1);}
.prof-cat{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);border-radius:var(--rad-tile);border:var(--bw) solid var(--border);width:100%;cursor:pointer;transition:background var(--t-fast);-webkit-tap-highlight-color:transparent;}
.prof-cat:active{background:var(--surface-raised);}
.prof-cat-ico{width:38px;height:38px;border-radius:var(--rad-tab);background:var(--surface-raised);display:grid;place-items:center;color:var(--text-muted);flex-shrink:0;}
.prof-cat-lbl{flex:1;text-align:left;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text);}
.prof-cat-chev{color:var(--text-muted);flex-shrink:0;}
.prof-logout-wrap{padding:var(--s5) var(--s4) var(--s4);margin-top:var(--s3);}
.prof-logout-btn{width:100%;padding:var(--s4);border-radius:var(--rad-round);background:var(--err-soft);color:var(--err);font-size:var(--fs-body);font-weight:var(--fw-bold);border:var(--bw-strong) solid var(--err-line);transition:opacity var(--t-fast);}
.prof-logout-btn:active{opacity:.7;}
.prof-group-hd{padding:var(--s4) var(--s4) var(--s1);font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.fs-opt-lbl{display:inline-flex;align-items:center;gap:var(--s2);}
/* Profil-Avatar im Dashboard-Header: Maße/Farbe über .bar-btn + #d-prof-avatar */

/* Profil – tappable settings rows */
button.set-row{cursor:pointer;color:var(--text);-webkit-tap-highlight-color:transparent;transition:background var(--t-fast);width:100%;text-align:left;}
button.set-row:active{background:var(--surface-raised);}
/* Value display at end of tappable row */
.set-row-val{font-size:var(--fs-sm);color:var(--text-muted);max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:right;margin-left:auto;}
/* Theme-Tiles entfernt — Block 4: kein Umschalter mehr. */
/* Page-level save bar (sticky bottom of set-scroll) */
.prof-save-bar{display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);border-top:var(--bw) solid var(--border);}
.prof-save-bar.hidden{display:none;}
/* Scroll wheel for number values */
.ed-wheel-wrap{margin:0 var(--s4) var(--s4);}
.ed-wheel-outer{position:relative;height:220px;overflow:hidden;border-radius:var(--rad-tile);background:var(--surface);}
.ed-wheel-outer::before,.ed-wheel-outer::after{content:'';position:absolute;left:0;right:0;height:88px;z-index:1;pointer-events:none;}
.ed-wheel-outer::before{top:0;background:linear-gradient(to bottom,var(--surface),transparent);}
.ed-wheel-outer::after{bottom:0;background:linear-gradient(to top,var(--surface),transparent);}
.ed-wheel-sel{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;height:44px;
  background:var(--surface-raised);border-top:var(--bw) solid var(--border-strong);
  border-bottom:var(--bw) solid var(--border-strong);pointer-events:none;z-index:0;}
.ed-wheel-scroll{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:88px 0;box-sizing:border-box;position:relative;z-index:2;}
.ed-wheel-scroll::-webkit-scrollbar{display:none;}
.ed-wheel-item{height:44px;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-body);color:var(--text);scroll-snap-align:center;flex-shrink:0;}
/* Sheet footer – Cancel + Save in one row */
.sheet-footer{display:flex;gap:var(--s3);padding:0 var(--s4) calc(var(--s4) + var(--safe-b));}
.sheet-footer .btn{flex:1;}
/* Form error inside sheets */
.form-err{color:var(--err);font-size:var(--fs-sm);padding:0 var(--s4) var(--s3);display:none;}
.form-err.vis{display:block;}

/* Kompakte Konto-Zeile in Einstellungen (statt Profil-Hero) */
.set-who-av{
  width:40px;height:40px;border-radius:var(--rad-round);flex-shrink:0;
  background:var(--accent-soft);color:var(--a-700);
  font-family:var(--ff-display);font-size:var(--fs-sm);font-weight:var(--fw-heavy);
  display:grid;place-items:center;
}
.set-section{margin:var(--s5) var(--s4);}
.set-section.last{margin-bottom:var(--s6);}
/* Gruppen nach Zweck. Die Ueberschrift traegt schwerer als die
   Sektionstitel darunter - sonst liest sich alles als eine flache Liste. */
.set-group{margin:var(--s6) var(--s4) 0;}
.set-group:first-child{margin-top:var(--s4);}
.set-group-hd{
  font-family:var(--ff-display);font-size:var(--fs-title);font-weight:var(--fw-heavy);
  color:var(--text);letter-spacing:-.02em;line-height:var(--lh-tight);
}
.set-group-sub{
  font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);
  margin-top:var(--s1);
}
/* Eine Sektion ohne Speichern-Knopf sagt das im Kopf, statt es offen zu
   lassen, ob die Aenderung schon gilt. */
.set-instant{
  font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--text-muted);
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-raised);border:var(--bw) solid var(--border);
  border-radius:var(--rad-round);padding:2px var(--s2);white-space:nowrap;
}
/* Ein geaendertes Feld traegt die Markierung selbst - der Hinweis unten am
   Abschnitt ist beim Tippen im ersten Feld nicht zu sehen. */
.hours-inp.dirty{border-color:var(--warn);background:var(--warn-soft);}
.set-section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2);padding:0 var(--s1);}
.set-section-title{font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);text-transform:none;letter-spacing:.01em;}
.set-rows{background:var(--surface);border-radius:var(--rad-tile);overflow:hidden;border:var(--bw) solid var(--border);}
.set-row{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:var(--bw) solid var(--border);transition:background var(--t-fast);
}
.set-row:last-child{border-bottom:none;}
.set-row-toggle{padding:var(--s4) var(--s4);}
.shop-save-row{border-top:var(--bw) solid var(--border);padding:var(--s4) var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s3);}
.set-row[data-staff-id]{cursor:pointer;transition:background var(--t-fast),transform var(--t-fast);}
.set-row[data-staff-id]:active{background:var(--surface-raised);transform:scale(.985);}
.staff-row-av{
  width:var(--av-staff-size);height:var(--av-staff-size);border-radius:var(--rad-round);
  background:var(--av-staff-fill);color:var(--av-staff-text);
  /* Dark: #FFA31F auf Soft-über-Surface ≈ 7.77:1; Light: #9A5B00 ≈ 5.19:1
     (12px/700 → Schwelle 4.5:1). */
  font-family:var(--ff-display);font-size:var(--av-staff-fs);font-weight:var(--av-staff-fw);
  display:grid;place-items:center;flex-shrink:0;position:relative;
  line-height:1;
}
.ios-row.ios-row--staff{
  /* Gleiche Maße wie System-.ios-row (Profil); Unlock/Chevron sitzen in der Zeile. */
  gap:var(--s3);
  padding:var(--s3) var(--s4);
  align-items:center;
  --ios-sep-left:calc(var(--s4) + var(--av-staff-size) + var(--s3));
}
.ios-row.ios-row--staff .ios-row-hit{
  display:flex;align-items:center;gap:var(--s3);
  flex:1;min-width:0;min-height:0;
  padding:0;
  background:transparent;border:0;color:inherit;text-align:left;cursor:pointer;
}
.ios-row.ios-row--staff .ios-row-hit--static{
  cursor:default;pointer-events:none;
}
.ios-row.ios-row--staff .ios-row-label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ios-row.ios-row--staff .ios-row-chev{flex-shrink:0;}
.staff-unlock-btn{
  position:relative;
  min-height:36px;min-width:44px;
  padding:var(--s2) var(--s3);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--text);background:var(--surface-raised);
  border:var(--bw) solid var(--border);
  border-radius:var(--rad-tile);
  white-space:nowrap;flex-shrink:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.staff-unlock-btn::after{
  content:"";position:absolute;inset:50% auto auto 50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.staff-unlock-btn:active{opacity:.85;}
.staff-role-row .ios-row-sub{white-space:normal;}
#staff-role-list .ios-row + .ios-row::before{left:var(--s4);right:var(--s4);}
/* Team-Sheet = Kampagnen-Feldmuster (borderless in ios-group). */
#staff-sheet .sheet-body > .ios-group + .ios-group{margin-top:var(--s5);} /* 24px = --apart */
#staff-sheet .ios-field .input-field{
  background:transparent;
  border:0;
  border-radius:0;
  padding:var(--s2) 0;
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
#staff-sheet .ios-group > .ios-field-hint[hidden]{display:none !important;}
#staff-sheet .ios-group > .ios-field-hint{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:var(--s3) var(--s4) var(--s3);
}
#staff-sheet .staff-del-btn{
  margin:var(--s5) var(--s4) 0;
  width:calc(100% - 2 * var(--s4));
  box-sizing:border-box;
  background:var(--surface-raised);
  color:var(--err);
  border:var(--bw) solid var(--border);
  border-radius:var(--rad-tile);
  font-weight:var(--fw-bold);
}
#staff-sheet .staff-del-btn[hidden]{display:none !important;}

/* Create-Pick: langer Titel darf umbrechen; Badge-Separator wie System */
#create-pick-sheet .sheet-title{
  white-space:normal;
  line-height:var(--lh-tight);
  text-wrap:balance;
}

/* ── Editor-Sheets: borderless Inputs wie Staff ── */
#ed-text-sheet .ios-field .input-field,
#cd-note-sheet .ios-field .input-field,
#geo-sheet .ios-field .input-field,
#ed-pin-sheet .ios-field .input-field,
#cd-correct-sheet .ios-field .input-field{
  background:transparent;
  border:0;
  border-radius:0;
  padding:var(--s2) 0;
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
#cd-note-sheet textarea.input-field{
  min-height:96px;
  line-height:var(--lh-normal);
  resize:none;
}
/* Adress-Dropdown liegt absolut unter dem Feld — ios-group overflow:hidden
   schnitt Treffer ab (v71 Regression). Sheet selbst ebenfalls visible,
   sonst clippt .bottom-sheet { overflow-y:auto } die unteren Treffer. */
#geo-sheet.bottom-sheet{overflow:visible;}
#geo-sheet .sheet-body > .ios-group{overflow:visible;}
#geo-sheet .geo-search-wrap{width:100%;}
#geo-sheet .geo-radius-row{
  display:flex;align-items:center;gap:var(--s2);width:100%;
}
#geo-sheet .geo-radius-row .input-field{flex:1;min-width:0;}
#geo-sheet .geo-radius-unit{
  flex-shrink:0;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-muted);
}
#geo-sheet .geo-locate-btn{
  margin:var(--s5) var(--s4) 0;
  width:calc(100% - 2 * var(--s4));
  box-sizing:border-box;
}
/* PIN-Fehler am Kartenende: gleiche Hint-Position, Fehlerfarbe, Apple-Inset */
#ed-pin-sheet .ios-group > #ed-pin-err.form-err{
  padding:var(--s3) var(--s4) var(--s4);
  border-top:0;
  margin:0;
  position:relative;
}
#ed-pin-sheet .ios-group > #ed-pin-err.form-err::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
#ed-pin-sheet .ios-group > #ed-pin-err.form-err.vis{display:block;}
.staff-stats{display:none;} /* entfernt */
.staff-locked-badge{display:none;}
.staff-row-crown{display:none;}
.set-row-ico{
  width:38px;height:38px;border-radius:var(--rad-tab);background:var(--surface-raised);
  display:grid;place-items:center;color:var(--text-muted);flex-shrink:0;
}
.set-row-body{flex:1;min-width:0;}
.set-row-title{font-size:var(--fs-body);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.set-row-sub{font-size:var(--fs-label);color:var(--text-muted);margin-top:var(--s1);}
.auto-num-row--off{opacity:.4;pointer-events:none;}
.set-row-end{color:var(--text-muted);flex-shrink:0;}
.set-add-btn{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--a-700);
  padding:var(--s2) var(--s1);background:none;
}
.lang-chips{display:flex;gap:var(--s2);flex-wrap:wrap;}
.lang-chip{
  padding:var(--s2) var(--s5);border-radius:var(--rad-round);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  background:var(--surface-raised);color:var(--text-muted);border:var(--bw-strong) solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.lang-chip.active{background:var(--accent-soft);color:var(--a-700);border-color:var(--accent-line);}
/* Konto loeschen = irreversibel, gleiche Schriftstaerke wie Abmelden (--err).
   Layout der Danger-Zone: siehe Block „KUNDEN-DETAIL“ (.cd-danger-zone). */
#btn-cd-delete{color:var(--err);}

/* ── TOAST ───────────────────────────────────────────── */
#toast-stack{
  position:fixed;
  bottom:calc(var(--tab-h) + var(--safe-b) + var(--tab-fab-over) + var(--s4));
  left:50%;transform:translateX(-50%);
  z-index:500;display:flex;flex-direction:column-reverse;
  align-items:center;gap:var(--s2);
  pointer-events:none;
  width:calc(100% - 2 * var(--s4));max-width:420px;
}
/* Auf dem Kunden-Screen gibt es keine Tab-Bar, aber die Aktionsleiste
   unten ist ~80px hoch — Toast muss drueber liegen. */
body:has(#v-customer.active) #toast-stack{
  bottom:calc(var(--safe-b) + 88px);
}
.toast{
  width:100%;padding:var(--s3) var(--s4);border-radius:var(--rad-tile);
  font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:var(--lh-normal);
  pointer-events:auto;cursor:pointer;
  animation:toast-in .32s var(--spring) both;
  box-shadow:var(--sh2);
}
.toast.out{animation:toast-out .2s var(--ease) both;}
/* OK/ERR-Solids tragen Weiss: 5.32 / 5.44:1 (Tinte waere 3.41 / 3.34:1).
   Warn bleibt Tinte auf Bernstein: 9.09:1. */
.toast-err{background:var(--err);color:var(--on-solid);}
.toast-ok{background:var(--ok);color:var(--on-solid);}
.toast-warn{background:var(--accent);color:var(--on-accent);}
.toast-info{background:var(--surface-raised);color:var(--text);border:var(--bw) solid var(--border);}
.toast{display:flex;align-items:center;gap:var(--s2);}
.t-ico{flex-shrink:0;font-weight:var(--fw-bold);line-height:1;opacity:.88;}
.t-msg{flex:1;min-width:0;}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.96);}}
@keyframes spark-draw{to{stroke-dashoffset:0;}}
.spark-line{animation:spark-draw .7s var(--ease) both;}
@keyframes today-pulse{0%,100%{opacity:.2;}50%{opacity:.04;}}
.today-ring{animation:today-pulse 2.4s ease-in-out infinite;}

/* ── CONFIRM DIALOG ──────────────────────────────────── */
.confirm-backdrop{
  position:fixed;inset:0;z-index:400;
  background:var(--scrim);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.confirm-backdrop.open{opacity:1;pointer-events:auto;}
/* Dialog-Scrim IMMER sichtbar — auch ueber offenem Sheet. Nest war falsch:
   Sheet-Scrim (z 300) liegt unter dem Dialog-Backdrop (z 400) und wird
   vollstaendig verdeckt → Gesamtabdunklung = ein --scrim
   (dark rgba(0,0,0,.55) / light rgba(23,20,31,.38)), nicht addiert. */
.confirm-dialog{
  position:fixed;inset:0;z-index:401;
  display:flex;align-items:center;justify-content:center;
  padding:max(var(--s5), var(--safe-t)) var(--s5) max(var(--s5), var(--safe-b));
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-base) var(--ease);
}
.confirm-dialog.open{opacity:1;visibility:visible;}
.confirm-dialog-card{
  pointer-events:auto;
  width:100%;max-width:340px;
  background:var(--surface);
  border-radius:var(--rad-tile);
  padding:var(--s5);
  box-shadow:none;
  transform:scale(.96);
  transition:transform var(--t-base) var(--ease);
  max-height:min(80dvh, 560px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.confirm-dialog.open .confirm-dialog-card{transform:scale(1);}
.confirm-title{
  margin:0 0 var(--s2);
  font-family:var(--ff-display);
  font-size:var(--fs-head);           /* wie .page-hd-title / App-Bar-Titel: 17px */
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
  line-height:var(--lh-tight, 1.25);
  color:var(--text);
}
.confirm-msg{
  font-size:var(--fs-body);           /* System-Fliesstext */
  line-height:var(--lh-normal);
  margin:0 0 var(--s4);
  color:var(--text-muted);
}
.confirm-msg[hidden]{display:none;}
/* Create-Pick u.a. Sheets nutzen .confirm-msg als Fliesstext auf --surface */
.bottom-sheet .confirm-msg{color:var(--text);margin:0 0 var(--s1);}
/* Manager-Freigabe: Navigationszeile wie Profil/Darstellung
   (Label | ios-row-value | Chevron 14). Dialog-Flaeche --bg, damit
   ios-group (--surface, --rad-tile) als Karte lesbar ist. */
.confirm-dialog-card.confirm-dialog-card--mgr{
  display:flex;flex-direction:column;
  /* Hauptansicht: min-height (JS), nicht height — sonst clippt #mgr-err.
     Pick setzt height, damit die Liste innen scrollt. */
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--bg);
}
.confirm-main{flex-shrink:0;}
.confirm-mgr-slot{margin:0 0 var(--s5);} /* Abstand zur PIN-Gruppe = System --apart */
.confirm-mgr-slot[hidden]{display:none !important;}
.confirm-mgr-slot .ios-group{margin:0;}
.confirm-mgr-empty{
  display:flex;flex-direction:column;gap:var(--s2);
  margin-top:var(--s2);
  padding:0;color:var(--text-muted);font-size:var(--fs-sm);
  line-height:var(--lh-normal);
}
.confirm-mgr-empty[hidden]{display:none !important;}
.confirm-mgr-pick{
  display:flex;flex-direction:column;
  flex:1;min-height:0;width:100%;
}
.confirm-mgr-pick[hidden]{display:none !important;}
.confirm-mgr-pick-back{
  align-self:flex-start;
  margin:0 0 var(--s3);
  padding:0;min-height:44px;
  border:0;background:transparent;cursor:pointer;
  font-size:var(--fs-body);font-weight:var(--fw-medium);
  color:var(--a-700);
  -webkit-tap-highlight-color:transparent;
}
.confirm-mgr-pick-back:active{opacity:.75;}
.confirm-mgr-pick .confirm-title{margin-bottom:var(--s3);}
.confirm-mgr-list-wrap--pick{
  flex:1;min-height:0;
  margin:0;
  padding:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
#confirm-dialog .confirm-mgr-list.ios-group{
  margin:0;
  background:var(--surface);
  border-radius:var(--rad-tile);
  flex:1;min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:0;padding:0;
}
.confirm-mgr-row .ios-row-sub{white-space:normal;}
.confirm-pin-slot{margin:0 0 var(--s4);}
.confirm-pin-err{
  margin:var(--s2) 0 0;font-size:var(--fs-sm);color:var(--err);line-height:var(--lh-normal);
}
#confirm-dialog #mgr-err{
  margin:var(--s2) 0 0;
  font-size:var(--fs-sm);color:var(--err);line-height:var(--lh-normal);
  display:none;text-align:left;
}
#confirm-dialog #mgr-err.vis{display:block;}
.confirm-actions{
  display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s2);
}
.confirm-actions .btn{
  width:100%;flex:none;min-width:0;min-height:44px;
  white-space:normal;text-wrap:balance;
}
/* Destruktiv im Dialog = Systemrolle 3: gleiche neutrale Flaeche wie Abbrechen
   (.btn-secondary), nur Schrift rot (iOS). Nie vollflaechig rot gefuellt.
   --err auf --surface: 5.44:1. */
.confirm-actions .btn-danger{
  background:var(--surface);color:var(--err-calm);
  box-shadow:inset 0 0 0 var(--bw) var(--border-strong);
}
.confirm-actions .btn-danger.btn-danger--strong{
  background:var(--surface);color:var(--err);
}
.confirm-actions .btn-danger:disabled,
.confirm-actions .btn-danger.btn-danger--strong:disabled{
  opacity:1;
  background:var(--surface-raised);color:var(--text-muted);
}
.confirm-actions .btn-primary:disabled{
  opacity:1;
  background:var(--surface-raised);color:var(--text-muted);
}
@media (prefers-reduced-motion: reduce){
  .confirm-dialog-card,
  .confirm-dialog.open .confirm-dialog-card{transform:none;}
}
/* ── OFFLINE BANNER ──────────────────────────────────── */
/* P-18.10-R (R-B1): fest über der Stage UNTER der Statusleiste/Notch (Safe Area). Vorher sticky bei top:0 ohne Safe-Area-
   Abstand – in der iOS-Hülle und als Home-Bildschirm-App lag der Text hinter Uhrzeit/Dynamic Island, sichtbar blieb ein
   leerer Balken. Solange er steht, rückt der Inhalt um seine Höhe nach unten (--offline-h, gemessen in ui.js). */
#offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  -webkit-transform:translateZ(0);transform:translateZ(0);
  /* wie .toast-err / .fab-badge: Weiss auf --err 5.44:1 */
  background:var(--err);color:var(--on-solid);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.01em;line-height:1.3;text-align:center;
  padding:calc(var(--safe-t) + var(--s2)) calc(var(--s4) + env(safe-area-inset-right,0px)) var(--s2) calc(var(--s4) + env(safe-area-inset-left,0px));
  display:none;
  align-items:center;justify-content:center;gap:var(--s2);
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
body.is-offline #app{--safe-t:var(--offline-h, calc(env(safe-area-inset-top,0px) + 40px));}
.offline-banner-ico{flex-shrink:0;}
/* ── PULL-TO-REFRESH INDICATOR ───────────────────────── */
.ptr-ind{
  display:none;text-align:center;color:var(--text-muted);
  font-size:var(--fs-label);padding:var(--s2) 0;transition:opacity var(--t-base);
}
.ptr-ind.visible{display:block;}
/* ── SKELETON ──────────────────────────────────────────
   Rezepte: ios-Gruppen / Listen — Transition ohne Layout-Sprung. */
.sk-line{
  height:10px;border-radius:var(--rad-round);background:var(--border);
  animation:sk-pulse 1.8s ease-in-out infinite;
}
.sk-line.long{width:65%;}
.sk-line.short{width:40%;}
.sk-line.xshort{width:28%;}
.sk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.sk-av{
  width:42px;height:42px;border-radius:var(--rad-round);flex-shrink:0;
  background:var(--border);animation:sk-pulse 1.8s ease-in-out infinite;
}
.sk-av--ios{width:var(--av-staff-size, 40px);height:var(--av-staff-size, 40px);}
.sk-av--sq{border-radius:var(--rad-tile);width:38px;height:38px;}
.sk-dot{
  width:10px;height:10px;border-radius:var(--rad-round);flex-shrink:0;
  background:var(--border);animation:sk-pulse 1.8s ease-in-out infinite;
}
.sk-ios-hd{padding:0 var(--s4) var(--s1);margin-top:var(--s3);}
.sk-ios-hd .sk-line{height:8px;}
.sk-ios-group{
  margin:0 var(--s4) var(--s3);
  background:var(--surface);border-radius:var(--rad-tile);overflow:hidden;
}
.sk-ios-row{
  display:flex;align-items:center;gap:var(--s3);
  min-height:52px;padding:var(--s3) var(--s4);
  border-bottom:var(--bw) solid var(--border);
}
.sk-ios-group .sk-ios-row:last-child{border-bottom:0;}
.sk-ios-card{
  margin:0 var(--s4) var(--s3);
  background:var(--surface);border-radius:var(--rad-tile);
  padding:0;
}
.sk-ios-card .sk-ios-row{border-bottom:0;min-height:56px;}
/* Team-Liste: Skelett-Zeilen direkt in der vorhandenen ios-group */
#set-staff-list > .sk-ios-row:last-child{border-bottom:0;}
.prof-cfg-state > .sk-ios-row:last-child{border-bottom:0;}
.prof-cfg-state[hidden]{display:none;}
/* Zustandsbox steht vor der Inhaltskarte — kein zusaetzlicher Gruppenabstand */
.set-scroll > .prof-cfg-state + .ios-group{margin-top:var(--s4);} /* schlaegt .ios-group + .ios-group (steht weiter unten) */
.sk-dash{padding-bottom:var(--s5);}
.sk-camp-card{
  background:var(--surface);border-radius:var(--rad-tile);
  padding:var(--s4);margin:0 var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:var(--s3);
}
.sk-camp-card-hd{display:flex;align-items:center;gap:var(--s3);}
.sk-hist{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;}
@keyframes sk-pulse{
  0%,100%{opacity:.45;}
  50%{opacity:.9;}
}
@media (prefers-reduced-motion: reduce){
  .sk-line,.sk-av,.sk-dot{animation:none;}
}
/* ── ERROR STATE ─────────────────────────────────────── */
.error-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s3);
  padding:var(--s8) var(--s5);text-align:center;
}
.error-state-icon{
  width:64px;height:64px;border-radius:var(--rad-tile);
  background:var(--err-soft);display:grid;place-items:center;
  color:var(--err);margin-bottom:var(--s1);
}
.error-state-title{font-family:var(--ff-display);font-size:var(--fs-head);font-weight:var(--fw-heavy);letter-spacing:-.02em;color:var(--text);}
.error-state-sub{font-size:var(--fs-body);color:var(--text-muted);line-height:var(--lh-normal);max-width:280px;margin:0;}
.error-state.compact{padding:var(--s6) var(--s5);gap:var(--s2);}
.error-state.compact .error-state-icon{width:52px;height:52px;border-radius:var(--rad-tile);margin-bottom:0;}
.error-state.compact .error-state-title{font-size:var(--fs-body);}
.error-state.compact .error-state-sub{font-size:var(--fs-sm);}
/* accent-btn / retry-btn: Fallback in der zentralen Button-Sektion */
/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s3);
  padding:var(--s8) var(--s6);text-align:center;
  grid-column:1/-1;               /* damit es auch im .staff-grid taugt */
}
.empty-state.compact{padding:var(--s6) var(--s5);gap:var(--s2);}
.empty-state.compact .empty-state-icon{width:52px;height:52px;border-radius:var(--rad-tile);margin-bottom:0;}
.empty-state.compact .empty-state-title{font-size:var(--fs-body);}
.empty-state.compact .empty-state-sub{font-size:var(--fs-sm);}
.empty-state-icon .spinner{width:22px;height:22px;border-width:2.5px;}
.empty-state-icon{
  width:72px;height:72px;border-radius:var(--rad-tile);
  background:var(--surface);
  border:var(--bw-strong) solid var(--border-strong);
  display:grid;place-items:center;
  color:var(--text-muted);margin-bottom:var(--s1);
  box-shadow:var(--sh1);
}
.empty-state-title{font-family:var(--ff-display);font-size:var(--fs-head);font-weight:var(--fw-heavy);letter-spacing:-.02em;color:var(--text);margin:0;}
.empty-state-sub{font-size:var(--fs-body);color:var(--text-muted);line-height:var(--lh-normal);max-width:280px;margin:0;}

/* Leerer Verlauf: eine flache Linie sieht aus wie ein Fehler.
   Der Hinweis liegt ueber der Kurve, damit die Form trotzdem stehen bleibt. */
.spark-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--fs-sm);color:var(--text-muted);text-align:center;padding:0 var(--s4);
}
.spark-svg-wrap{position:relative;}

/* ══════════════════════════════════════════════════════
   WENIGER BEWEGUNG
   Wer im System "Bewegung reduzieren" gesetzt hat, bekommt keine
   Verschiebungen mehr. Was Bewegung als *Zustand* zeigt - Spinner, Puls im
   Skelett - bleibt: ein eingefrorener Spinner sieht aus wie ein Absturz.
   Alles, was nur eine Beziehung zeigt, entfaellt.
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;}
  .view.enter-fwd,.view.enter-back,.view.leave-fwd,.view.leave-back{transform:none !important;}
  .shake{animation:none;}
  .s-dot.new{animation:none;}
  .qr-scan-line{animation:none;top:50%;opacity:.35;}
  .toast{animation:none;}
  .toast.out{animation:none;opacity:0;}
  /* ohne die Animation bliebe die Linie auf stroke-dashoffset:1 - unsichtbar */
  .spark-line{animation:none;stroke-dashoffset:0;}
  .preloader-ring{animation:none;opacity:.5;}
}

/* ── PRELOADER ──────────────────────────────────────────── */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--n-0);
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--m-nav) var(--m-ease-out);
}
#preloader.fade-out{opacity:0;pointer-events:none;}
.preloader-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s6);
}
/* .preloader-logo --lockup → .brand-lockup-Block */
.preloader-ring{
  width:30px;height:30px;
  border:2.5px solid rgba(255,163,31,.22);
  border-top-color:#FFA31F;
  border-radius:var(--rad-round);
  animation:pl-spin .85s linear infinite;
}
@keyframes pl-spin{to{transform:rotate(360deg);}}

/* ── MERCHANT SUSPENDED GATE (nicht schliessbar) ─────────── */
.msus-gate{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5);
  background:rgba(23,20,31,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.msus-gate[hidden]{display:none !important;}
.msus-card{
  width:100%;max-width:400px;
  background:var(--surface);
  border:var(--bw) solid var(--border-strong);
  border-radius:var(--rad-tile);
  box-shadow:var(--sh3);
  padding:var(--s6) var(--s5) var(--s5);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
}
/* .msus-logo --lockup + margin → .brand-lockup-Block */
.msus-icon{
  width:56px;height:56px;
  border-radius:var(--rad-round);
  background:rgba(255,163,31,.12);
  color:var(--a-700);
  display:flex;align-items:center;justify-content:center;
}
.msus-title{
  margin:0;
  font-family:var(--ff-display);
  font-size:var(--fs-title);
  font-weight:var(--fw-bold);
  color:var(--text);
  letter-spacing:-0.02em;
}
.msus-shop{
  margin:0;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--a-700);
}
.msus-shop:empty{display:none;}
.msus-body{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  color:var(--text-muted);
  max-width:34ch;
}
.msus-reason{
  width:100%;
  margin-top:var(--s1);
  padding:var(--s3) var(--s4);
  background:var(--bg);
  border:var(--bw) solid var(--border);
  border-radius:var(--rad-tile);
  text-align:left;
}
.msus-reason[hidden]{display:none !important;}
.msus-reason-label{
  font-size:var(--fs-hint);
  font-weight:var(--fw-medium);
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
  margin-bottom:var(--s1);
}
.msus-reason-text{
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  color:var(--text);
  line-height:var(--lh-normal);
  white-space:pre-wrap;
}
.msus-hint{
  margin:var(--s2) 0 0;
  font-size:var(--fs-sm);
  color:var(--text-muted);
  line-height:var(--lh-normal);
}
.msus-support{
  margin-top:var(--s2);
  width:100%;
  text-decoration:none;
}
.msus-foot{
  margin:var(--s1) 0 0;
  font-size:var(--fs-hint);
  color:var(--text-muted);
  opacity:.8;
}

/* ══════════════════════════════════════════════════════
   SETTINGS-DS — wiederverwendbare Bausteine (Profil)
   Globale Toggle-/Sheet-Defaults bleiben; Link-Toggle und
   Fit-Sheets nur mit Scope / Modifier.
══════════════════════════════════════════════════════ */

/* ── a) Seiten-Header ── */
.page-hd{
  flex-shrink:0;
  padding:calc(var(--safe-t) + var(--s3)) var(--s4) var(--s3);
  background:var(--bg);
  position:sticky;top:0;z-index:10;
}
.page-hd--root{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);
  border-bottom:none;
  padding-bottom:var(--s2);
}
.page-hd--root .page-hd-top{
  display:flex;align-items:center;min-height:44px;
}
.page-hd--root .page-hd-title{
  margin:0;
  font-family:var(--ff-display);
  font-size:var(--fs-display);
  font-weight:var(--fw-heavy);
  letter-spacing:-.03em;
  line-height:var(--lh-tight);
  color:var(--text);
  text-align:left;
}
.page-hd--sub{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:var(--s2);
  min-height:calc(var(--safe-t) + 44px + var(--s3));
  border-bottom:var(--bw) solid var(--border);
}
.page-hd--sub .page-hd-title{
  margin:0;
  font-family:var(--ff-display);
  font-size:var(--fs-head);
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
  color:var(--text);
  text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.page-hd--sub .page-hd-spacer{width:44px;height:44px;}

/* ── b) Gruppierte Liste ── */
.ios-group-hd{
  padding:var(--s5) var(--s5) var(--s2);
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  color:var(--text-muted);
  letter-spacing:.01em;
  text-transform:none;
}
.ios-group{
  margin:0 var(--s4);
  background:var(--surface);
  border-radius:var(--rad-tile);
  overflow:hidden;
  /* keine Aussen-Border — Abgrenzung ueber Flaeche vs. --bg */
}
.ios-group + .ios-group{margin-top:var(--s5);}
.ios-group-hd + .ios-group{margin-top:0;}
.ios-group--apart{margin-top:var(--s5);}
.ios-group--first{margin-top:var(--s4);}
.ios-row{
  --ios-sep-left:var(--s4);
  --ios-sep-right:var(--s4);
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:44px;
  padding:var(--s3) var(--s4);
  background:transparent;border:0;border-radius:0;
  color:var(--text);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast);
  position:relative;
}
.ios-row:has(> .ios-badge){--ios-sep-left:calc(var(--s4) + 29px + var(--s3));}
.ios-row + .ios-row::before{
  content:"";position:absolute;left:var(--ios-sep-left);right:var(--ios-sep-right);top:0;
  height:var(--bw);background:var(--border);
}
.ios-row:active{background:var(--surface-raised);}
a.ios-row{text-decoration:none;color:inherit;}
.ios-row--static{cursor:default;}
.ios-row--static:active{background:transparent;}
.ios-row .ios-row-chev[hidden],.ios-row-chev[hidden]{display:none!important;}
/* N4: Face-ID-Knopf auf dem Sperrbildschirm (nur native Hülle). */
.lock-bio-btn{display:block;margin:0 auto var(--s4);min-width:220px;}
.lock-bio-btn[hidden]{display:none;}
/* Fußnote unter einer iOS-Gruppe (Hilfe › Antwortzeit). */
.ios-group-ft{margin:var(--s2) var(--s5) 0;font-size:var(--fs-label);color:var(--text-muted);line-height:1.4;}
/* Platzhalter-Zeile: Versprechen ohne Navigation — kein Chevron, kein Tap */
.ios-row--soon{
  cursor:default;pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
.ios-row--soon:active{background:transparent;}
.ios-row--soon .ios-badge{opacity:.55;}
.ios-row--soon .ios-row-label{color:var(--text-muted);}
.ios-group--pad{padding:var(--s4);}
.ios-group--pad .close-day-btn,
.ios-group--pad #btn-close-day{margin-top:var(--s2);}
.ios-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ios-row-label{
  font-size:var(--fs-body);font-weight:var(--fw-medium);
  color:var(--text);line-height:var(--lh-tight);
}
.ios-row-sub{
  font-size:var(--fs-label);color:var(--text-muted);line-height:var(--lh-normal);
}
.ios-row-value{
  font-size:var(--fs-body);color:var(--text-muted);
  max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex-shrink:0;text-align:right;
}
/* Automatisierung: Aktiv/Pausiert dezent in der Zeile */
.auto-row-state{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-hint);font-weight:var(--fw-bold);
  letter-spacing:.01em;flex-shrink:0;line-height:1;
}
.auto-row-state.is-on{color:var(--ok);}
.auto-row-state.is-off{color:var(--text-muted);}
.auto-row-dot{
  width:6px;height:6px;border-radius:var(--rad-round);
  background:var(--ok);flex-shrink:0;
}
.ios-row-chev{color:var(--text-muted);flex-shrink:0;opacity:.55;}
/* d) Reiner Link-Text */
.ios-row--link{
  color:var(--link);
  font-size:var(--fs-body);font-weight:var(--fw-medium);
  justify-content:flex-start;
}
.ios-row--link .ios-row-label{color:var(--link);}
.ios-row--link::before{left:var(--s4);}

/* ── c) Icon-Badge ── */
.ios-badge{
  width:29px;height:29px;border-radius:var(--rad-tab);
  display:grid;place-items:center;flex-shrink:0;
  color:var(--badge-on);background:var(--badge-device);
}
.ios-badge svg{display:block;width:17px;height:17px;}
.ios-badge--security{background:var(--badge-security);}
.ios-badge--people{background:var(--badge-people);}
.ios-badge--action{background:var(--badge-action);}
.ios-badge--device{background:var(--badge-device);}
.ios-badge--business{background:var(--badge-business);}
/* Warn-Badge: sichtbar getönte Fläche mit Warn-Text (5.4:1 auf --warn-bg) */
.ios-badge--warn{background:var(--warn-bg);color:var(--warn);}

/* Logout in Gruppenkarte */
.ios-row--danger .ios-row-label{color:var(--err);text-align:center;width:100%;}
.ios-row--danger{justify-content:center;}

/* ── Toggle: Link-Blau im An-Zustand — Profil-Bereich ── */
#v-settings .toggle-switch input:checked+.toggle-track,
[id^="v-prof-"] .toggle-switch input:checked+.toggle-track{
  background:var(--toggle-on);
}
#v-settings .toggle-thumb,
[id^="v-prof-"] .toggle-thumb{background:#FFFFFF;}
#v-settings .toggle-switch input:checked~.toggle-thumb,
[id^="v-prof-"] .toggle-switch input:checked~.toggle-thumb{background:#FFFFFF;}
#v-settings .toggle-track,
[id^="v-prof-"] .toggle-track{
  background:var(--n-200);
  box-shadow:none;
}

/* ── Sheet: Inhaltshoehe, max fast voll — siehe .bottom-sheet.sheet--fit oben ── */
.sheet-hd--ios{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:var(--s2);
  padding:var(--s3) var(--s4);
  border-bottom:var(--bw) solid var(--border);
  background:var(--surface);
  position:sticky;top:0;z-index:1;
}
.sheet-hd--ios .sheet-title{
  text-align:center;
  justify-self:center;
  font-size:var(--fs-head);
  font-weight:var(--fw-bold);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  max-width:100%;
}
/* Gegenstück zum linken/rechten Icon-Button — Titel bleibt optisch mittig */
.sheet-hd--ios .sheet-hd-spacer{
  width:36px;height:36px;justify-self:center;
}
.sheet-icon-btn{
  width:36px;height:36px;border-radius:var(--rad-round);
  background:var(--surface-raised);color:var(--text);
  display:grid;place-items:center;flex-shrink:0;
  border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.sheet-icon-btn::after{
  content:"";position:absolute;inset:50% auto auto 50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.sheet-icon-btn--confirm{background:var(--accent);color:var(--on-accent);}
.sheet-icon-btn--confirm:active{opacity:.85;}
.sheet-icon-btn:active{opacity:.75;}

/* Profil: Stunden/Geo in Gruppenkarte */
#v-prof-oeffnungszeiten .ios-group .hours-table{padding:var(--s2) 0;}
#v-prof-oeffnungszeiten .hours-row{padding-left:var(--s4);padding-right:var(--s4);}
#v-prof-standorte .ios-group{padding:0;}
#v-prof-standorte .geo-map{margin:var(--s3) var(--s4) var(--s4);border-radius:var(--rad-tile);}
.ios-group .prof-save-bar,
.set-scroll > .prof-save-bar{
  margin:var(--s5) var(--s4) 0;
  border-top:none;padding:0;
}

/* ── Kampagnen-Tab Teil A (Settings-DS) ── */
.page-hd--tab{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);
  border-bottom:none;
  padding-bottom:var(--s2);
}
.page-hd--tab .page-hd-title{
  margin:0;flex:1;min-width:0;
  font-family:var(--ff-display);
  font-size:var(--fs-display);
  font-weight:var(--fw-heavy);
  letter-spacing:-.03em;
  line-height:var(--lh-tight);
  color:var(--text);
  text-align:left;
}

.camp-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);
  padding:0 var(--s4) 0;
  flex-shrink:0;
}
.camp-seg-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:var(--s3) var(--s3);
  border-radius:var(--rad-tile);
  border:var(--bw) solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-align:left;cursor:pointer;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.camp-seg-btn.active{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.camp-seg-lbl{
  font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:var(--lh-tight);
}
.camp-seg-btn.active .camp-seg-lbl{color:var(--a-700);}
.camp-seg-sub{
  font-size:var(--fs-hint);color:var(--text-muted);line-height:var(--lh-normal);
}

.camp-list-wrap{padding-bottom:var(--s4);}
.camp-list-wrap .ios-group{margin-top:var(--s2);}
#camp-list.camp-list-wrap,
#auto-list.camp-list-wrap{
  padding-left:0;padding-right:0;
}
#msg-hub-campaigns .camp-list-wrap .ios-group,
#msg-hub-auto .camp-list-wrap .ios-group{
  margin-left:var(--s4);margin-right:var(--s4);
}
.empty-state--camp[hidden],
#auto-empty-state[hidden]{display:none !important;}
.empty-state--camp .empty-state-title{
  font-family:var(--ff-body);
  font-size:var(--fs-head);
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
}
.empty-state--camp .empty-state-sub{
  font-size:var(--fs-sm);
  color:var(--text-muted);
  max-width:300px;
}

.ios-group-hd--flush{padding-top:var(--s4);}
.ios-field{
  padding:var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
  position:relative;
}
/* Apple-Inset: Linie startet/endet mit Text-Padding, nicht an der Kartenkante */
.ios-field + .ios-field{
  border-top:0;
}
.ios-field + .ios-field::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
.ios-field .input-field{width:100%;box-sizing:border-box;}
.ios-field-hint{
  font-size:var(--fs-hint);color:var(--text-muted);line-height:var(--lh-normal);
  padding:0;
}
.ios-field .ios-field-hint{margin-top:var(--s1);}
.ios-group > .ios-field-hint{
  padding:var(--s3) var(--s4) var(--s4);
  border-top:0;
  position:relative;
  margin:0;
}
.ios-group > .ios-field-hint::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
.ios-field-hd{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:28px;
}
.ios-field-hd .input-label{margin:0;}
.ios-field-hd .btn-link{
  flex-shrink:0;
  position:relative;
  font-size:var(--fs-label);
  line-height:1.2;
}
/* Trefferflaeche 44px — Link bleibt kompakt */
.ios-field-hd .btn-link::after{
  content:'';position:absolute;inset:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);
}
.ios-field--split{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  padding:0;
}
.ios-field--split .ios-field-col{
  padding:var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
  min-width:0;
}
.ios-field--split .ios-field-col + .ios-field-col{
  border-left:var(--bw) solid var(--border);
}

/* Kampagnen-Erstellung / Feedback: Profil-Niveau — Felder ohne Doppelrahmen */
#v-msg-new .ios-field .input-field,
#v-dash-feedback .ios-field .input-field,
#camp-preview-sheet .ios-field .input-field{
  background:transparent;
  border:0;
  border-radius:0;
  padding:var(--s2) 0;
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
#v-msg-new textarea.input-field{
  min-height:96px;
  line-height:var(--lh-normal);
}
#v-msg-new .ios-field .input-field[type="datetime-local"]{
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-normal);
  color:var(--text);
  color-scheme:light;
  padding:var(--s2) 0;
  min-height:28px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
#v-msg-new .ios-field .input-field[type="datetime-local"]::-webkit-calendar-picker-indicator{
  opacity:.55;
  cursor:pointer;
  padding:0;
  margin:0 0 0 var(--s2);
}
#v-msg-new .ios-field .input-field[type="datetime-local"]::-webkit-datetime-edit{
  padding:0;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}


.msg-create-scroll{padding-bottom:calc(var(--safe-b) + var(--s8));}

/* Später: Optionen expandieren in derselben Gruppenkarte */
#msg-later-group.is-open .msg-later-opts{
  display:contents;
}
.msg-later-opts[hidden]{display:none !important;}
#msg-later-group .msg-sched-field{
  border-top:0;
  position:relative;
}
#msg-later-group .msg-sched-field::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;
  height:var(--bw);background:var(--border);
}
#msg-later-group .msg-sched-field[hidden]{display:none !important;}
#msg-later-group.is-edit .msg-sched-field::before{display:none;}
#msg-later-group.is-edit #btn-send-later-toggle{display:none;}
#msg-later-group .sw-row.selected{background:var(--accent-soft);}
#msg-later-group .ios-row + .ios-row::before{
  left:var(--s4);right:var(--s4);
}

.msg-create-cta .btn-primary .reach-pill{
  /* Bernstein-Solid: Tinte, nicht Grün — AA ≥4.5:1 (gemessen ~9:1) */
  margin-left:auto;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--on-accent);
  font-size:var(--fs-body);
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  opacity:1;
  letter-spacing:.01em;
}
#msg-audience-grid .aud-row .aud-reach,
#msg-audience-grid .aud-row .ios-row-value.aud-reach,
#msg-audience-grid .aud-row .ios-row-value.reach-pill,
#msg-later-group .reach-pill{
  background:transparent;
  padding:0;
  color:inherit;
  font-size:var(--fs-body);
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
}
#msg-audience-grid .aud-row.active .ios-row-value{
  /* Accent auf Surface: ~8.2:1 — AA Text */
  color:var(--a-700);
  font-weight:var(--fw-bold);
}
.msg-progress{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s5) var(--s2);
}
.msg-progress-track{
  display:flex;gap:var(--s2);width:100%;max-width:160px;
}
.msg-progress-seg{
  flex:1;height:3px;border-radius:var(--rad-round);
  background:var(--border);
}
.msg-progress-seg.is-on{background:var(--accent);}
.msg-progress-lbl{
  font-size:var(--fs-hint);font-weight:var(--fw-medium);color:var(--text-muted);
  letter-spacing:.02em;
}

.msg-create-cta{
  margin:var(--s5) var(--s4) 0;
  display:flex;flex-direction:column;gap:var(--s3);
}
.msg-create-cta--tight{margin-top:0;margin-bottom:var(--s3);}
.msg-create-cta--quiet{
  margin-top:var(--s4);
}
.msg-create-cta--quiet .ios-group,
.msg-create-cta--quiet .ios-row{
  margin:0;
  background:transparent;
  justify-content:center;
}
.msg-create-cta--quiet .ios-group{
  width:100%;
}
.msg-create-cta--quiet .ios-row + .ios-row::before{
  left:var(--s4);
  right:var(--s4);
}
/* CTA-Buttons: Form nur ueber .btn — kein Senden-Sondermaß */

#msg-create-step-1,
#msg-create-content,
#msg-create-step-2{display:flex;flex-direction:column;gap:0;}
#msg-create-content > .ios-group--apart{margin-top:var(--s5);}
#msg-action-fields .ios-group-hd{padding-top:0;}
#msg-action-fields .ios-group > .ios-field-hint,
#msg-action-fields #msg-action-clarify{
  padding:var(--s3) var(--s4) var(--s4);
  margin:0;
}
#msg-create-step-2 .ios-group-hd:first-child{padding-top:var(--s4);}
#msg-send-when{margin-top:var(--s2);}

.msg-create-cta--quiet .ios-row{
  width:100%;
  min-height:44px;
  justify-content:center;
  background:transparent;
  border-radius:var(--rad-tile);
}
.msg-create-cta--quiet .ios-row:active{background:var(--surface);}
.msg-create-cta--quiet .ios-row-label{
  text-align:center;width:100%;
}

#msg-audience-grid .aud-row.active{
  background:var(--accent-soft);
}
#msg-audience-grid .aud-row.active .ios-row-label{color:var(--a-700);}
#msg-audience-grid .ios-row + .ios-row::before,
#auto-audience-grid .ios-row + .ios-row::before,
#auto-event-kind-grid .ios-row + .ios-row::before,
#auto-delay-group .ios-row + .ios-row::before{
  left:var(--s4);right:var(--s4);
}

.camp-preview-body .push-preview{
  margin:0 var(--s4) var(--s2);
}
.camp-preview-action{margin-top:var(--s2);}
.camp-preview-action[hidden]{display:none !important;}

.camp-ios-status{
  font-size:var(--fs-hint);font-weight:var(--fw-bold);
  color:var(--text-muted);flex-shrink:0;
}
.camp-ios-status.is-sent{color:var(--badge-business, #2E7D57);}
.camp-ios-status.is-sched{color:var(--a-700);}
.camp-ios-status.is-queued{color:var(--link);}

.camp-detail-body{padding-bottom:calc(var(--safe-b) + var(--s8));}
.camp-detail-body .push-preview,
.camp-detail-push{
  margin:0 var(--s4) var(--s2);
}
.camp-det-actions{
  display:flex;flex-direction:column;gap:var(--s3);
  margin:var(--s5) var(--s4) 0;
}
/* Buttons in Detail/Auto: zentrale .btn-Rollen, keine Sondergroesse */
#v-msg-new #btn-send-msg{
  margin:var(--s5) var(--s4) 0;
  width:calc(100% - 2 * var(--s4));
  box-sizing:border-box;
}

#v-msg-new .ai-wizard-label,
#v-msg-new .anlass-grid,
#v-msg-new .lang-grid,
#v-msg-new #ai-variants-list,
#v-msg-new .ai-step-nav,
#v-msg-new .ai-gen-center,
#v-msg-new .ai-custom-field,
#v-msg-new .ai-back-btn,
#v-msg-new #btn-custom-continue{
  margin-left:var(--s4);margin-right:var(--s4);
}
#v-msg-new .anlass-grid{margin-bottom:var(--s4);}
#v-msg-new .ai-custom-field .input-field{
  /* KI-Prompt bleibt als normales Feld lesbar, aber gleiche Schrift */
  font-family:var(--ff-body);
}
/* ── TAGESBERICHT-SHEET (#day-report-sheet) ──
   Gleicher Inhalt wie der fruehere Druckbericht, im Sheet statt Pop-up.
   Safe-Area unten kommt von .bottom-sheet (padding mit --safe-b). */
#day-report-sheet .sheet-body{padding:0 0 var(--s4);}
.day-report{
  margin:var(--s4);padding:var(--s4);
  background:#fff;color:#17141F;border:1px solid #e6e2dc;border-radius:var(--rad-tile);
  font-family:var(--ff-display);
}
.day-report .dr-hd{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;padding-bottom:12px;border-bottom:2px solid #FFA31F;}
.day-report .dr-brand img{height:24px;width:auto;display:block;}
.day-report .dr-merchant{margin-top:8px;}
.day-report .dr-name{font-size:17px;font-weight:700;letter-spacing:-.02em;}
.day-report .dr-sub{font-size:12px;color:#5c5666;margin-top:3px;line-height:1.4;}
.day-report .dr-hdr{text-align:right;}
.day-report .dr-doctitle{font-size:15px;font-weight:700;}
.day-report .dr-docdate{font-size:14px;font-weight:600;margin-top:4px;}
.day-report .dr-docmeta{font-size:11px;color:#5c5666;margin-top:4px;}
.day-report h2{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5c5666;margin:18px 0 8px;}
.day-report table{width:100%;border-collapse:collapse;}
.day-report .dr-kpi,.day-report .dr-meta{font-size:13px;}
.day-report .dr-kpi th,.day-report .dr-kpi td,
.day-report .dr-meta th,.day-report .dr-meta td{padding:8px 10px;border:1px solid #e6e2dc;text-align:left;vertical-align:top;}
.day-report .dr-kpi th,.day-report .dr-meta th{background:#f7f5f1;font-weight:600;}
.day-report .dr-kpi th{width:62%;}
.day-report .dr-meta th{width:42%;}
.day-report .dr-kpi td.dr-num{font-weight:700;font-size:15px;}
.day-report .dr-hint{display:block;font-size:11px;font-weight:400;color:#5c5666;margin-top:2px;}
.day-report .dr-num{text-align:right;font-variant-numeric:tabular-nums;}
.day-report .dr-rev-hint{font-size:11px;color:#5c5666;margin-top:8px;font-style:italic;}
.day-report .dr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.day-report .dr-events{font-size:12px;min-width:520px;}
.day-report .dr-events th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#5c5666;padding:6px;border-bottom:1px solid #d9d4cc;text-align:left;font-weight:700;}
.day-report .dr-events td{padding:6px;border-bottom:1px solid #eeebe6;vertical-align:top;}
.day-report .dr-events tr:nth-child(even) td{background:#faf9f7;}
.day-report .dr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
.day-report .dr-empty{text-align:center;color:#5c5666;padding:16px 8px;font-style:italic;}
.day-report .dr-disclaimer{margin-top:16px;padding:10px 12px;border:1px solid #e6e2dc;background:#faf9f7;font-size:11px;line-height:1.45;color:#3d3845;}
.day-report .dr-ft{margin-top:14px;padding-top:10px;border-top:1px solid #e6e2dc;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:11px;color:#5c5666;}
.day-report .dr-ft strong{color:#17141F;font-weight:600;}
.day-report-actions{display:flex;flex-direction:column;gap:var(--s2);padding:0 var(--s4);}

/* Drucken (nur Browser): solange das Bericht-Sheet offen ist, nur ihn drucken.
   :has() statt Body-Klasse: kein Zustand, der nach anderem Schliessen haengen bleibt. */
@media print{
  @page{size:A4;margin:14mm 12mm 16mm;}
  body:has(> #day-report-sheet.open){overflow:visible !important;background:#fff;}
  body:has(> #day-report-sheet.open) > *:not(#day-report-sheet){display:none !important;}
  body:has(> #day-report-sheet.open) #day-report-sheet{
    position:static;transform:none;max-height:none;overflow:visible;
    padding:0;background:#fff;border-radius:0;box-shadow:none;
  }
  body:has(> #day-report-sheet.open) #day-report-sheet .sheet-hd,
  body:has(> #day-report-sheet.open) .day-report-actions{display:none !important;}
  body:has(> #day-report-sheet.open) .day-report{margin:0;padding:0;border:0;border-radius:0;}
  body:has(> #day-report-sheet.open) .day-report .dr-scroll{overflow:visible;}
  body:has(> #day-report-sheet.open) .day-report .dr-events{min-width:0;}
  body:has(> #day-report-sheet.open) .day-report .dr-events tr{page-break-inside:avoid;}
  html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* P2-A7b: Kundenkarte – Editor-Stil in css/card-editor.css */
.card-settings-wrap{max-width:960px;margin:0 auto;padding:var(--s1) var(--s4) var(--s5);}

/* ── P4-A6b Kampagnen: Statusmatrix, Kartenhinweis, Entwurf/Vorschau ── */
.camp-card-hint{
  display:flex;gap:var(--s3);align-items:flex-start;
  margin:var(--s3) var(--s4) 0;padding:var(--s3) var(--s4);
  background:var(--warn-soft);border-radius:var(--rad-tile);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text);
}
.camp-card-hint[hidden]{display:none;}
.camp-card-hint-ico{flex-shrink:0;margin-top:2px;color:var(--warn);}
.camp-status{margin-bottom:var(--s4);}
.camp-status h2.ios-group-hd{margin:0;}
.camp-status-list{list-style:none;padding:0;}
.camp-status-row{gap:var(--s3);}
.camp-status-val{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text);
  font-variant-numeric:tabular-nums;
}
.camp-status-val.is-on svg{color:var(--ok);}
.camp-status-val.is-off svg{color:var(--text-muted);}
.camp-status-err{margin:var(--s2) var(--s5) 0;font-size:var(--fs-sm);color:var(--err);}
.camp-status-err[hidden]{display:none;}

.cdr-count{font-size:var(--fs-hint);color:var(--text-muted);font-variant-numeric:tabular-nums;}
.cdr-count.is-over{color:var(--err);font-weight:var(--fw-bold);}
.cdr-err{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--err);line-height:var(--lh-normal);}
.cdr-err:empty{display:none;}
.cdr-offer-inp{resize:vertical;min-height:96px;}
#v-camp-draft .input-field[aria-invalid="true"]{box-shadow:inset 0 0 0 var(--bw-strong) var(--err);}
.cdr-push{margin:0 var(--s4);}
.cdr-push .push-text{color:var(--text);}
.cdr-push .push-text.empty{color:var(--text-muted);}
.cdr-back{margin-top:0;margin-bottom:0;}
.cdr-back-row{padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s1);}
.cdr-back-lbl{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
.cdr-back-val{margin:0;font-size:var(--fs-body);color:var(--text);white-space:pre-wrap;word-break:break-word;line-height:var(--lh-normal);}
.cdr-back-val.empty{color:var(--text-muted);font-style:italic;}
.cdr-prev-msg{margin:var(--s2) var(--s5) 0;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--err);}
.cdr-prev-msg:empty{display:none;}
.cdr-send{margin:var(--s6) var(--s4) var(--s7);display:flex;flex-direction:column;gap:var(--s2);}
/* Dauerhaft deaktiviert: lesbar statt 40 % Deckkraft (Text --text-muted auf --surface). */
.cdr-send #cdr-send:disabled{
  opacity:1;background:var(--surface);color:var(--text-muted);box-shadow:inset 0 0 0 var(--bw) var(--border-strong);
  cursor:not-allowed;
}
.cdr-send-note{margin:0;text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text);}

/* ── P4-A8b Geburtstagsgruß (Bereich „Automatisch“) ── */
.bday-active-row{gap:var(--s3);}
.bday-active-row .ios-row-label{cursor:pointer;}
.bday-actions{display:flex;flex-direction:column;gap:var(--s2);}
.bday-saved{margin:var(--s2) var(--s5) 0;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text);}
.bday-saved:empty{display:none;}
.bday-sending-note{
  margin:var(--s3) var(--s4) 0;padding:var(--s3) var(--s4);
  background:var(--warn-soft);border-radius:var(--rad-tile);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text);
}
.bday-sending-note[hidden]{display:none;}
.bday-more{list-style:none;padding:0;margin-top:var(--s5);margin-bottom:var(--s6);}
.bday-more-row .ios-row-label{color:var(--text-muted);}

/* ── RECHT-1b: Rechtliches (Rechtsprofil, Datenschutzerklärung, AVV/AGB) ── */
.camp-card-hint.legal-hint{
  width:calc(100% - 2 * var(--s4));box-sizing:border-box;border:0;cursor:pointer;
  text-align:left;font-family:var(--ff-body);align-items:center;
}
.legal-hint-text{flex:1;min-width:0;}
.legal-hint-chev{flex-shrink:0;color:var(--text);}
.camp-card-hint.legal-hint:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.camp-card-hint.legal-hint:active{transform:scale(.99);}
.card-hint-slot + .card-hint-slot .camp-card-hint{margin-top:var(--s2);}

.legal-scroll{padding-bottom:var(--s7);}
.legal-load-err{margin:var(--s4);display:flex;flex-direction:column;gap:var(--s3);}
.legal-load-err p{margin:0;font-size:var(--fs-body);color:var(--text);}
.legal-load-err[hidden]{display:none;}
.legal-static{margin:0;font-size:var(--fs-head);color:var(--text);overflow-wrap:anywhere;}
.legal-ta{resize:vertical;min-height:84px;}
#v-prof-recht .input-field[aria-invalid="true"]{box-shadow:inset 0 0 0 var(--bw-strong) var(--err);}
.legal-check{
  display:flex;gap:var(--s3);align-items:flex-start;min-height:44px;padding-top:var(--s2);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text);cursor:pointer;
}
.legal-check input{flex-shrink:0;width:22px;height:22px;margin:0;accent-color:var(--text);cursor:pointer;}
.legal-check input:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.legal-warn-note{color:var(--text);font-weight:var(--fw-medium);}
.legal-warn-note[hidden]{display:none;}
.legal-missing{margin:var(--s2) var(--s5) 0;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text-muted);}
.legal-missing.is-open{color:var(--text);}
.legal-missing:empty{display:none;}
.legal-actions{margin:var(--s3) var(--s4) 0;display:flex;flex-direction:column;gap:var(--s2);}
.legal-msg{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text);}
.legal-msg:empty{display:none;}
#lg-pub-msg{margin:var(--s2) var(--s5) 0;}
.legal-pub{display:flex;flex-direction:column;gap:var(--s3);}
.legal-pub-state{margin:0;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text);}
.legal-pub-note{margin:0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text);}
.legal-pub-note[hidden],.legal-pub-link[hidden]{display:none;}
.legal-pub-link{margin:0;}
.legal-pub-link a,.legal-doc a{color:var(--text);font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:3px;}
.legal-pub-link a{display:inline-flex;align-items:center;min-height:44px;}
.legal-why{margin:0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-muted);}
.legal-why:empty{display:none;}
.legal-preview{margin:var(--s4) var(--s4) 0;}
.legal-preview[hidden]{display:none;}
.legal-preview > .ios-group-hd{padding-left:0;padding-right:0;}
.legal-banner{
  margin:0 0 var(--s3);padding:var(--s3) var(--s4);
  background:var(--warn-soft);border:var(--bw-strong) solid var(--warn-line);border-radius:var(--rad-tile);
  font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:var(--lh-normal);color:var(--text);
}
.legal-banner[hidden]{display:none;}
.legal-doc{
  background:var(--surface);border-radius:var(--rad-tile);padding:var(--s4);
  font-size:var(--fs-sm);line-height:1.55;color:var(--text);overflow-wrap:anywhere;
}
.legal-doc:focus{outline:none;}
.legal-doc:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.legal-doc h3{font-size:var(--fs-head);font-weight:var(--fw-bold);margin:0 0 var(--s3);line-height:var(--lh-tight);}
.legal-doc h4,.legal-doc h5,.legal-doc h6{font-size:var(--fs-body);font-weight:var(--fw-bold);margin:var(--s4) 0 var(--s2);}
.legal-doc p{margin:0 0 var(--s3);}
.legal-doc ul,.legal-doc ol{margin:0 0 var(--s3);padding-left:20px;}
.legal-doc .lm-review{padding:var(--s2) var(--s3);border:var(--bw) dashed var(--border-strong);border-radius:8px;}
.legal-doc .lm-table-wrap{overflow-x:auto;margin:0 0 var(--s3);}
.legal-doc table{border-collapse:collapse;min-width:480px;width:100%;font-size:var(--fs-hint);}
.legal-doc th,.legal-doc td{text-align:left;vertical-align:top;padding:6px 8px;border:var(--bw) solid var(--border-strong);}
.legal-doc code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;}
.legal-publish{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s3);}
.legal-docs{display:flex;flex-direction:column;}
.legal-docc{display:flex;flex-direction:column;gap:var(--s2);}
.legal-docc + .legal-docc{margin-top:var(--s3);}
.legal-docc-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.legal-docc-title{margin:0;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text);}
.legal-badge{
  flex-shrink:0;padding:2px 10px;border-radius:999px;
  background:var(--warn-soft);border:var(--bw) solid var(--warn-line);
  font-size:var(--fs-hint);font-weight:var(--fw-bold);color:var(--text);
}
.legal-docc-meta{margin:0;font-size:var(--fs-sm);color:var(--text-muted);}
.legal-details summary{
  display:flex;align-items:center;min-height:44px;cursor:pointer;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);
  text-decoration:underline;text-underline-offset:3px;
}
.legal-details summary:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.legal-details[open] summary{margin-bottom:var(--s2);}
.legal-details .legal-doc{background:var(--bg);}
.legal-draft-note{
  margin:0;padding:var(--s3);background:var(--warn-soft);border-radius:var(--rad-tile);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text);
}
.legal-docc-state{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);}
.legal-hist-hd{margin:0 0 var(--s2);font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-muted);}
.legal-hist-list{list-style:none;padding:0;margin:0 0 var(--s4);}
.legal-hist-list:last-child{margin-bottom:0;}
.legal-hist-item{display:flex;flex-direction:column;gap:2px;padding:var(--s2) 0;border-bottom:var(--bw) solid var(--border);}
.legal-hist-item:last-child{border-bottom:0;}
.legal-hist-main{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text);}
.legal-hist-meta{font-size:var(--fs-hint);color:var(--text-muted);}
.legal-hist-empty{font-size:var(--fs-sm);color:var(--text-muted);}

/* ── P-16.10-C: Kampagnen-Tab (alter Aufbau + Live-Vorschau, Reichweite) ── */
#v-messages .ios-group[hidden],.msg-reach-why[hidden],.camp-prev-off[hidden]{display:none!important;}
/* WebKit/iOS: date/datetime/time haben eine intrinsische Mindestbreite und
   ragten rechts aus der Karte. Breite an die Karte binden, Inhalt links. */
.input-field.input-field--date{
  display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;min-height:52px;text-align:left;
}
.input-field.input-field--date::-webkit-date-and-time-value{text-align:left;margin:0;}
.input-field.input-field--date::-webkit-datetime-edit{padding:0;}
#v-msg-new .ios-field,#v-auto-edit .ios-field{min-width:0;}
.msg-field-foot{min-height:0;align-items:flex-start;}
.msg-field-foot .ios-field-hint{margin:0;}
.msg-live-preview{margin-top:var(--s2);}
/* P-18.10-R: Erwartung setzen – Wallet-Mitteilungen kommen still. */
.push-silent-note{margin:var(--s2) var(--s5) var(--s3);font-size:var(--fs-label);line-height:1.4;color:var(--text-muted);}
.msg-live-preview .cdr-back{margin-bottom:0;}
.msg-create-actions{display:flex;flex-direction:column;gap:var(--s2);}
.msg-create-actions .bday-saved{margin:0;text-align:center;}
.msg-reach-line{margin:var(--s3) var(--s5) 0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text);line-height:var(--lh-normal);}
.msg-reach-line:empty{display:none;}
.msg-reach-why{margin:var(--s1) var(--s4) 0;}
.msg-reach-why summary{
  display:flex;align-items:center;min-height:44px;padding:0 var(--s1);cursor:pointer;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--link);
}
.msg-reach-why summary:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.msg-reach-why-list{list-style:none;padding:0;margin-top:var(--s1);}
.camp-ios-status.is-off{color:var(--text-muted);}
.camp-ios-status.is-err{color:var(--err);}
.camp-prev-off{
  margin:var(--s3) var(--s4) 0;padding:var(--s3) var(--s4);
  background:var(--warn-soft);border-radius:var(--rad-tile);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-normal);color:var(--text);
}
#camp-prev-err{margin:var(--s2) var(--s4) 0;}
.sheet-icon-btn--confirm:disabled{opacity:.4;cursor:not-allowed;}
#v-msg-new .input-field[aria-invalid="true"],#v-auto-edit .input-field[aria-invalid="true"]{box-shadow:inset 0 0 0 var(--bw-strong) var(--err);}
/* Randlose Felder (Profil-Niveau): Fokusring außen, sonst überdeckt er die erste Textspalte. */
@media (hover:hover) and (pointer:fine){
  #v-msg-new .ios-field .input-field:focus-visible,
  #v-auto-edit .ios-field .input-field:focus-visible{outline-offset:4px;}
}
#camp-prev-reach{margin:var(--s3) var(--s5) 0;}
#v-msg-new [hidden],#v-auto-edit [hidden]{display:none!important;}
#camp-preview-sheet .sheet-body > *{flex-shrink:0;}

/* ══════════════════════════════════════════════════════
   MOTION-SYSTEM (P-16.10-F)
   Ein Satz Werte fuer die ganze App, iOS-nah: ruhig, schnell, nie
   verspielt. Nur transform/opacity werden animiert (Compositor, 60 fps).
   Bedienung wartet nie auf eine Animation: Eingaben gehen sofort durch,
   Uebergaenge laufen nebenher. Bei "Bewegung reduzieren" entfaellt jede
   Verschiebung (siehe Block ganz unten).
   Kurve --m-ease-ios = iOS-Navigations-/Sheet-Kurve, wie sie u. a. Ionic
   fuer den iOS-Modus nachbildet: cubic-bezier(.32,.72,0,1).
══════════════════════════════════════════════════════ */
:root{
  --m-press:    120ms;   /* Druckfeedback: sofort sichtbar             */
  --m-fast:     160ms;   /* Ein-/Ausblenden, Tab-Wechsel, Haekchen      */
  --m-base:     260ms;   /* Listen, Dialog, Erfolg, Schalter            */
  --m-nav:      340ms;   /* Push/Pop zwischen Bildschirmen              */
  --m-sheet:    340ms;   /* Sheet faehrt ein                            */
  --m-sheet-out:220ms;   /* Sheet faehrt aus (iOS: schneller raus)      */
  --m-ease-ios: cubic-bezier(.32,.72,0,1);
  --m-ease-out: cubic-bezier(.2,.8,.2,1);
  --m-ease-in:  cubic-bezier(.4,0,1,1);
  --m-spring:   cubic-bezier(.3,1.12,.5,1);  /* leichte Feder, kaum Ueberschwinger */
  --m-press-scale: .97;
  --m-stagger:  22ms;
  /* Bestandstokens auf dasselbe System gelegt (alle bisherigen Nutzer
     bekommen dieselben Werte): */
  --t-fast: var(--m-press);
  --t-base: var(--m-base);
  --t-slow: var(--m-sheet);
  --ease:   var(--m-ease-out);
  --spring: var(--m-spring);
}

/* ── Navigation: Push/Pop wie UINavigationController ─────
   Vorwaerts: neuer Bildschirm schiebt sich von rechts ueber den alten,
   der alte weicht um ein Drittel nach links. Zurueck: genau umgekehrt.
   Tabs: kurzes Ueberblenden ohne Verschiebung (wie UITabBarController). */
.view{
  background:var(--bg);
  transform:none;
  transition:opacity var(--m-fast) var(--m-ease-out),transform var(--m-nav) var(--m-ease-ios);
}
.view.active{z-index:2;}
.view.enter-fwd{transform:translateX(100%);opacity:1;transition:none;z-index:3;}
.view.enter-back{transform:translateX(-30%);opacity:1;transition:none;}
.view.enter-tab{opacity:0;transform:none;transition:none;}
.view.leave-fwd{
  transform:translateX(-30%);opacity:0;z-index:1;
  transition:transform var(--m-nav) var(--m-ease-ios),opacity 0s linear var(--m-nav);
}
.view.leave-back{
  transform:translateX(100%);opacity:0;z-index:3;
  transition:transform var(--m-nav) var(--m-ease-ios),opacity 0s linear var(--m-nav);
  box-shadow:-10px 0 28px rgba(0,0,0,.10);
}
.view.leave-tab{opacity:0;transform:none;z-index:1;transition:opacity var(--m-fast) var(--m-ease-out);}
/* Rand-Wischgeste (nur installierte App / native Huelle, siehe motion.js) */
.view.m-swipe-top{transition:none !important;z-index:3;box-shadow:-10px 0 28px rgba(0,0,0,.10);}
.view.m-swipe-under{transition:none !important;opacity:1 !important;z-index:1;}

/* ── Sheets: Feder rein, schnell raus, wegwischbar ──── */
.bottom-sheet{transition:transform var(--m-sheet-out) var(--m-ease-in);}
.bottom-sheet.open{transition:transform var(--m-sheet) var(--m-spring);}
.bottom-sheet.m-dragging,.sheet-backdrop.m-dragging{transition:none !important;}
#app-stage{transition:transform var(--m-sheet) var(--m-ease-ios),border-radius var(--m-sheet) var(--m-ease-ios);}
.sheet-hd--ios{touch-action:none;-webkit-user-select:none;user-select:none;}
.sheet-hd--ios::before{
  content:'';position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;
  border-radius:var(--rad-round);background:var(--border-strong);opacity:.55;pointer-events:none;
}
/* Dialog: leichtes Aufploppen mit Feder */
.confirm-dialog-card{transform:scale(1.06);opacity:0;transition:transform var(--m-base) var(--m-spring),opacity var(--m-fast) var(--m-ease-out);}
.confirm-dialog.open .confirm-dialog-card{transform:scale(1);opacity:1;}

/* ── Druckfeedback ───────────────────────────────────── */
.msg-path-card{transition:border-color var(--m-press),background var(--m-press),transform var(--m-press) var(--m-ease-out);}
.anlass-card,.variant-card,.aud-card{transition:background var(--m-press),border-color var(--m-press),transform var(--m-press) var(--m-ease-out);}
.swbtn{transition:background var(--m-press),transform var(--m-press) var(--m-ease-out);}
.gift-dur-chip{transition:background var(--m-press),border-color var(--m-press),color var(--m-press),transform var(--m-press) var(--m-ease-out);}
.msg-path-card:active,.anlass-card:active,.variant-card:active,.aud-card:not(.aud-card--disabled):active,
.swbtn:active,.gift-dur-chip:active{transform:scale(var(--m-press-scale));}
.tab-item svg{transition:transform var(--m-press) var(--m-ease-out);}
.tab-item:active svg{transform:scale(.88);}
.tab-item.active svg{animation:m-tab-pop var(--m-base) var(--m-spring) both;}
@keyframes m-tab-pop{from{transform:scale(.86);}to{transform:scale(1);}}

/* ── Schalter und Haekchen ───────────────────────────── */
.toggle-thumb{transition:transform var(--m-base) var(--m-spring),background var(--m-fast);}
.toggle-track{transition:background var(--m-base) var(--m-ease-out),box-shadow var(--m-fast);}
.sel-check{transform:scale(.5);transition:opacity var(--m-fast) var(--m-ease-out),transform var(--m-base) var(--m-spring);}
.ios-row.active > .sel-check,.ios-row.selected > .sel-check{transform:scale(1);}

/* ── Listen: neue Eintraege blenden ein, geloeschte aus ─ */
.m-in{animation:m-row-in var(--m-base) var(--m-ease-out) both;animation-delay:calc(var(--m-i, 0) * var(--m-stagger));}
@keyframes m-row-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.m-out{animation:m-row-out var(--m-base) var(--m-ease-in) both;pointer-events:none;}
@keyframes m-row-out{to{opacity:0;transform:translateX(-12%) scale(.98);}}

/* ── Erfolgsmomente ──────────────────────────────────── */
.toast{animation:toast-in var(--m-base) var(--m-spring) both;}
.toast.out{animation:toast-out var(--m-fast) var(--m-ease-in) both;}
.toast-ok .t-ico{animation:m-ok-pop var(--m-base) var(--m-spring) .06s both;}
.toast-ok .t-ico polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:m-draw var(--m-base) var(--m-ease-out) .12s both;}
@keyframes m-ok-pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes m-draw{to{stroke-dashoffset:0;}}
.m-success{animation:m-success var(--m-base) var(--m-spring) both;}
@keyframes m-success{0%{transform:scale(.96);}60%{transform:scale(1.02);}100%{transform:scale(1);}}

/* ── Bewegung reduzieren: Zustand ja, Verschiebung nein ─ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-delay:0s !important;}
  .view,.view.enter-fwd,.view.enter-back,.view.enter-tab,.view.leave-fwd,.view.leave-back,.view.leave-tab{transform:none !important;box-shadow:none !important;}
  .m-in,.m-out,.m-success,.toast-ok .t-ico,.tab-item.active svg{animation:none !important;}
  .toast-ok .t-ico polyline{animation:none;stroke-dashoffset:0;}
  .m-out{opacity:0;}
  .confirm-dialog-card{transform:none !important;}
  .sel-check{transform:none !important;}
  .sheet-hd--ios::before{display:block;}
}
/* M-1.1: Liste aus dem Café-Cache, bis die aktuelle Personalliste geladen ist – sichtbar, aber nicht wählbar. */
#lock-select #staff-grid .lock-staff-row.is-pending .ios-row-chev{opacity:.25;}
/* W2 — canonical Geschäft rows + Mitarbeiter-bearbeiten sheet chrome.
   Scoped to Settings and edit sheets; other page layouts stay untouched. */
.setting-row { width:100%; cursor:pointer; text-align:left; }
.setting-row .ios-row-body { flex:0 0 auto; min-width:0; }
.setting-row .ios-row-label { white-space:nowrap; }
.setting-row .ios-row-value { margin-left:auto; flex:0 1 42%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setting-row:focus-visible { outline:2px solid var(--a-700); outline-offset:-3px; }
.setting-required { color:var(--err); }
#v-settings .ios-row-chev,[id^="v-prof-"] .ios-row-chev { display:none; }
#v-settings .ios-row,[id^="v-prof-"] .ios-row { min-height:calc(29px + 2 * var(--s3)); }
#v-prof-standorte .geo-row { align-items:center; }
#v-prof-standorte .geo-row .ios-badge { margin-top:0; }
#v-prof-standorte .geo-row .ios-row-label { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#v-prof-oeffnungszeiten .ios-group .hours-table { padding:0; }
[id^="v-prof-"] h2.ios-group-hd { margin:0; }
.ce-setting-rows .ios-group { margin-left:0;margin-right:0; }
.ce-setting-rows .ios-group-hd { padding-left:var(--s2);padding-right:var(--s2); }
.setting-editor.sheet--fit > .sheet-body { padding:var(--s4); }
.setting-editor-field { padding:var(--s3) var(--s4); background:var(--surface); border-radius:var(--rad-tile); margin-bottom:var(--s3); }
.setting-editor-field:last-child { margin-bottom:0; }
.setting-editor-field .input-label { display:block; margin:0; }
.edit-sheet .ios-field .input-field,.setting-editor-field .input-field {
  width:100%;min-width:0;box-sizing:border-box;background:transparent;border:0;border-radius:0;
  padding:var(--s2) 0;font-family:var(--ff-body);font-size:var(--fs-body);box-shadow:none;appearance:none;
}
.edit-sheet .input-field:focus-visible { outline:none; }
.setting-editor-field:has(.input-field:focus-visible),.edit-sheet .ios-field:has(.input-field:focus-visible) { box-shadow:inset 3px 0 var(--a-700); }
.setting-editor-field textarea { resize:vertical; min-height:90px; }
.setting-editor-field input[type="color"] { height:48px; }
.edit-sheet .sheet-icon-btn:disabled { opacity:.38;cursor:default; }
.edit-sheet .sheet-icon-btn:focus-visible { outline:2px solid var(--a-700);outline-offset:3px; }
.edit-sheet .sheet-icon-btn[hidden] { display:none; }
.setting-count { font-size:var(--fs-label); color:var(--text-muted); text-align:right; margin:4px 0 0; }
.setting-count.is-over { color:var(--err); }
.setting-logo { display:block; max-width:100%; max-height:240px; object-fit:contain; margin:12px auto; }
/* P-19.10-Y 2.2: Logo ändern/entfernen im Einzelwert-Editor */
.setting-logo-actions { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.setting-logo-actions .btn { width:100%; }
.setting-editor .cdr-err:empty { display:none; }
.setting-editor .form-err { margin:0; }
.setting-group-fields[hidden], .setting-legacy[hidden] { display:none!important; }
.legal-row-group { margin-bottom:var(--s5); }
.setting-field-host { padding:0!important; }
.setting-field-host > .setting-row { border-radius:0; }
.ce-form[hidden] { display:none!important; }
.setting-field-host > [hidden] { display:none!important; }
.setting-editor-field input[type="checkbox"] { width:24px; height:24px; accent-color:var(--n-900); }
.setting-row[aria-invalid="true"] { box-shadow:inset 3px 0 var(--err); }
.setting-disclosure-body { padding:var(--s4); }
.setting-disclosure-body[hidden] { display:none; }
.setting-editor .form-err:not([hidden]) { display:block; }
#geo-sheet .ios-field[hidden],#geo-picked[hidden],#btn-geo-locate[hidden] { display:none!important; }

/* AE: review settings, existing grouped-list spacing. */
#v-prof-bewertungen .set-footnote { font-size:13px; line-height:1.5; color:var(--muted,#666); margin:12px 20px; }
#reviews-load:empty { display:none; }
#reviews-preview .ios-row-body { display:flex; flex-direction:column; gap:10px; padding:10px 0; }
#reviews-preview-link { color:#9A5800; text-decoration:underline; overflow-wrap:anywhere; }