/* ============================================================
   Insektenschutz Aurich — Design-Tokens & Komponenten
   Light-only · WCAG AA · Akzent: Vertrauensblau
   ============================================================ */
/* Plus Jakarta Sans — self-hosted (kein Google-CDN: DSGVO/kein IP-Leak, CSP 'self', offline-fähig).
   Variable Font (Gewicht 200–800) als latin + latin-ext (deckt äöüß, €, erweiterte Latin ab). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* ---- Neutrals (warm slate) ---- */
  --bg:#F6F7F7;
  --surface:#FFFFFF;
  --surface-2:#FBFCFC;
  --line:#E6E9E8;
  --line-strong:#D3D8D7;
  --n50:#F6F7F7; --n100:#EEF0F0; --n200:#E2E5E4; --n300:#CDD2D1;
  --n400:#9AA3A1; --n500:#6B7472; --n700:#3A4240; --n900:#161E1C;
  --text:#161E1C; --text-2:#6B7472; --text-3:#9AA3A1;

  /* ---- Accent: Vertrauensblau ---- */
  --accent:#2563A8;
  --accent-ink:#1C4E86;       /* hover / pressed / text on tint */
  --accent-deep:#163C68;
  --accent-tint:#E7F0FA;
  --accent-tint-2:#F1F6FC;
  --accent-200:#A9CBED;
  --on-accent:#FFFFFF;
  --ring:rgba(37,99,168,.32);

  /* ---- Status ---- */
  --st-draft:#5C6573;  --st-draft-bg:#EEF0F0;
  --st-final:#2563A8;  --st-final-bg:#E7F0FA;
  --st-sent:#6D4AC9;   --st-sent-bg:#EEE9FA;
  --st-paid:#147A5B;   --st-paid-bg:#E5F2EC;
  --st-over:#C2362C;   --st-over-bg:#FBE9E7;
  --st-canc:#8A9290;   --st-canc-bg:#EEF0F0;
  --ok:#147A5B; --ok-bg:#E5F2EC;
  --warn:#B5761A; --warn-bg:#FBF0DD;
  --danger:#C2362C; --danger-bg:#FBE9E7;

  /* ---- Type scale ---- */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:13px; --fs-sm:15px; --fs-base:17px; --fs-lg:19px;
  --fs-xl:22px; --fs-2xl:26px; --fs-3xl:32px; --fs-display:40px;
  --lh-tight:1.15; --lh:1.5;

  /* ---- Spacing (4px) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* ---- Radii ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px; --r-pill:999px;

  /* ---- Shadows ---- */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 2px 4px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 10px 20px rgba(16,24,40,.07), 0 28px 56px rgba(16,24,40,.10);
  --tap:48px; /* min tap target */
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; touch-action:manipulation; } /* kein Doppeltipp-Zoom (native Haptik); Vorschau-iframe ausgenommen */
body{
  margin:0; font-family:var(--font); font-size:var(--fs-base);
  line-height:var(--lh); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;}
a{color:var(--accent-ink); text-underline-offset:2px;}
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ============================================================ BUTTONS */
.btn{
  --bg:var(--accent); --fg:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--tap); padding:0 20px; border:1px solid transparent;
  border-radius:var(--r-md); background:var(--bg); color:var(--fg);
  font-size:var(--fs-base); font-weight:700; letter-spacing:-.01em;
  cursor:pointer; transition:background .14s, border-color .14s, transform .04s, box-shadow .14s;
  white-space:nowrap; text-decoration:none;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--accent-ink); }
.btn--secondary{ background:var(--surface); color:var(--accent-ink); border-color:var(--line-strong); }
.btn--secondary:hover{ background:var(--accent-tint-2); border-color:var(--accent-200); }
.btn--ghost{ background:var(--accent-tint); color:var(--accent-ink); }
.btn--ghost:hover{ background:#DCEAF8; }
.btn--quiet{ background:transparent; color:var(--text-2); }
.btn--quiet:hover{ background:var(--n100); color:var(--text); }
.btn--danger{ background:var(--danger-bg); color:var(--danger); }
.btn--danger:hover{ background:#F6DBD8; }
.btn--block{ width:100%; }
.btn--lg{ min-height:56px; font-size:var(--fs-lg); border-radius:var(--r-lg); padding:0 26px; }
.btn--sm{ min-height:40px; font-size:var(--fs-sm); padding:0 14px; gap:7px; border-radius:var(--r-sm); }
.btn--sm svg{ width:16px; height:16px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn.is-loading{ color:transparent; position:relative; pointer-events:none; }
.btn.is-loading::after{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .7s linear infinite;
}
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after{ border-color:var(--accent-200); border-top-color:var(--accent-ink); }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* icon-only (close/back only — actions always carry a label) */
.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); min-width:var(--tap);
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface);
  color:var(--text-2); cursor:pointer; transition:background .14s,color .14s,border-color .14s;
}
.iconbtn svg{ width:21px; height:21px; }
.iconbtn:hover{ background:var(--n100); color:var(--text); }

/* ============================================================ FIELDS */
.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{ font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.field__label .opt{ color:var(--text-3); font-weight:500; }
.input, .select, textarea.input{
  width:100%; min-height:var(--tap); padding:12px 15px;
  font-family:inherit; font-size:var(--fs-base); color:var(--text);
  background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r-md);
  transition:border-color .14s, box-shadow .14s, background .14s;
}
textarea.input{ min-height:96px; padding-top:12px; resize:vertical; line-height:1.5; }
.input::placeholder{ color:var(--text-3); }
.input:hover, .select:hover{ border-color:var(--n400); }
.input:focus, .select:focus, textarea.input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring);
}
.input--error{ border-color:var(--danger); }
.input--error:focus{ box-shadow:0 0 0 4px rgba(194,54,44,.22); }
.field__hint{ font-size:var(--fs-xs); color:var(--text-2); }
.field__error{ font-size:var(--fs-xs); color:var(--danger); font-weight:600; display:flex; align-items:center; gap:5px; }
.field__error svg{ width:14px; height:14px; }
/* select */
.select{
  appearance:none; text-align:left; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7472' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; cursor:pointer;
}
/* F-05 Custom-Dropdown (Listbox + Suche) — natives .select bleibt als Quelle/Submit erhalten */
.csel{ position:relative; }
.csel__native{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0; }
.csel__btn{
  display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap);
  padding:12px 14px 12px 15px; text-align:left; cursor:pointer;
  font-family:inherit; font-size:var(--fs-base); color:var(--text);
  background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r-md);
  transition:border-color .14s, box-shadow .14s;
}
.csel__btn:hover{ border-color:var(--n400); }
.csel__btn[aria-expanded="true"], .csel__btn:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.csel__btn[disabled]{ opacity:.55; cursor:not-allowed; background:var(--n50); }
.csel__label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.csel__btn--placeholder .csel__label{ color:var(--text-3); }
.csel__chev{ flex:none; color:var(--text-2); transition:transform .16s; }
.csel__btn[aria-expanded="true"] .csel__chev{ transform:rotate(180deg); }
.csel__pop{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; max-height:300px;
}
.csel__pop[hidden]{ display:none; } /* display:flex überschreibt sonst das UA-[hidden] */
.csel--up .csel__pop{ top:auto; bottom:calc(100% + 6px); }
.csel__search{ padding:8px; border-bottom:1px solid var(--line); flex:none; }
.csel__searchinput{
  width:100%; min-height:40px; padding:8px 12px; font-family:inherit; font-size:16px; color:var(--text);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r-sm);
}
.csel__searchinput:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.csel__list{ overflow-y:auto; padding:6px; -webkit-overflow-scrolling:touch; }
.csel__opt{
  display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:var(--r-sm);
  font-size:var(--fs-base); color:var(--text); cursor:pointer; user-select:none;
}
.csel__opt:hover, .csel__opt.is-active{ background:var(--accent-tint-2); }
.csel__opt[aria-selected="true"]{ background:var(--accent-tint); color:var(--accent-ink); font-weight:600; }
.csel__opt[aria-disabled="true"]{ color:var(--text-3); cursor:not-allowed; }
.csel__opt[hidden]{ display:none; }
/* input with leading icon */
.input-wrap{ position:relative; display:flex; align-items:center; }
.input-wrap > svg{ position:absolute; left:15px; width:20px; height:20px; color:var(--text-3); pointer-events:none; }
/* Links-Padding NUR wenn ein führendes Icon da ist — sonst (z. B. €/%-Suffix-Felder)
   normales Padding, damit die Zahl korrekt links sitzt. */
.input-wrap > svg ~ .input{ padding-left:46px; }
.input-suffix{ position:absolute; right:15px; font-size:var(--fs-sm); color:var(--text-2); font-weight:600; }
.input-wrap.has-suffix .input{ padding-right:46px; }
/* Datumsfeld: Wert links (auch iOS), kein Overhang, sichtbares Kalender-Icon (Hintergrundbild,
   da iOS den nativen Indikator unsichtbar rendert). Nativer Indikator transparent darüber → klickbar. */
input[type="date"].input{
  -webkit-appearance:none; appearance:none; text-align:left; min-width:0; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:20px 20px;
}
input[type="date"].input::-webkit-date-and-time-value{ text-align:left; }
input[type="date"].input::-webkit-calendar-picker-indicator{ opacity:0; cursor:pointer; }
/* Kompakte Variante für dichte Listenzeilen (Einstellungen → Kategorien) */
.input--compact{ min-height:40px; padding:8px 12px; font-size:var(--fs-sm); }

/* search */
.search{ position:relative; }
.search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--text-3); }
.search input{
  width:100%; min-height:var(--tap); padding:12px 16px 12px 46px; font-size:var(--fs-base); font-family:inherit;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-pill); color:var(--text);
}
.search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }

/* checkbox / switch */
.check{ display:flex; align-items:center; gap:11px; cursor:pointer; font-size:var(--fs-base); user-select:none; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  width:24px; height:24px; border-radius:7px; border:2px solid var(--line-strong);
  display:grid; place-items:center; flex:none; transition:all .14s; background:var(--surface);
}
.check__box svg{ width:15px; height:15px; color:#fff; opacity:0; transition:opacity .1s; }
.check input:checked + .check__box{ background:var(--accent); border-color:var(--accent); }
.check input:checked + .check__box svg{ opacity:1; }
.check input:focus-visible + .check__box{ box-shadow:0 0 0 4px var(--ring); }
/* position:relative ist Pflicht, nicht Kosmetik: ohne einen positionierten Vorfahren ist der
   Container des absolut gesetzten <input> der Viewport — dann klammert es sich aus jedem
   overflow:hidden aus und macht das DOKUMENT scrollbar. Im Wizard riss genau das die
   Aktionsleiste beim Scrollen aus dem Bild (Schritt 2 hat den „Rabatt geben"-Schalter). */
.switch{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; user-select:none; position:relative; }
.switch input{ position:absolute; opacity:0; }
.switch__track{ width:50px; height:30px; border-radius:999px; background:var(--n300); position:relative; transition:background .16s; flex:none; }
.switch__track::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .16s; }
.switch input:checked + .switch__track{ background:var(--accent); }
.switch input:checked + .switch__track::after{ transform:translateX(20px); }
.switch input:focus-visible + .switch__track{ box-shadow:0 0 0 4px var(--ring); }
/* native radio/checkbox-Zeile (z. B. System-Reset) — sichtbar + Marken-Akzent */
.optrow{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-base); }
.optrow input{ width:20px; height:20px; flex:none; accent-color:var(--accent); cursor:pointer; }

/* ============================================================ CARD */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow); }
.card--flat{ box-shadow:none; }
.card--pad{ padding:var(--s5); }
.card__head{ display:flex; align-items:center; gap:12px; padding:var(--s5) var(--s5) 0; }
.card__title{ font-size:var(--fs-lg); font-weight:700; letter-spacing:-.01em; }
.card__head .btn--sm, .card__head .link{ margin-left:auto; }
.link{ background:none; border:none; color:var(--accent-ink); font-weight:600; font-size:var(--fs-sm); cursor:pointer; padding:0; }

/* ============================================================ TILES / AVATAR */
.tile{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--accent-tint); color:var(--accent-ink); }
.tile svg{ width:23px; height:23px; }
.tile--neutral{ background:var(--n100); color:var(--text-2); }
.avatar{ width:44px; height:44px; border-radius:50%; background:var(--accent-tint); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:var(--fs-sm); flex:none; }

/* ============================================================ LIST ROWS */
.rows{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:14px; padding:15px var(--s5); min-height:68px; border-bottom:1px solid var(--line); background:var(--surface); text-decoration:none; color:inherit; cursor:pointer; transition:background .12s; }
.row:last-child{ border-bottom:none; }
.row:hover{ background:var(--surface-2); }
/* Tastatur-Markierung in Listboxen (Auswahl-Sheet). Deutlicher als :hover — sie muss auch
   dann erkennbar sein, wenn die Maus woanders steht. */
.row.is-active{ background:var(--accent-tint-2); }
.row[aria-selected="true"]{ background:var(--accent-tint); }
.row__main{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.row__title{ font-size:var(--fs-base); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row__sub{ font-size:var(--fs-sm); color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row__end{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
.row__amount{ font-size:var(--fs-base); font-weight:700; font-variant-numeric:tabular-nums; }
.row__chev{ color:var(--text-3); flex:none; }
.row__chev svg{ width:20px; height:20px; }

/* ============================================================ STATUS TAGS */
.tag{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:700; padding:6px 11px; border-radius:var(--r-pill); white-space:nowrap; line-height:1; }
.tag svg{ width:14px; height:14px; flex:none; }
.tag--draft{ background:var(--st-draft-bg); color:var(--st-draft); }
.tag--final{ background:var(--st-final-bg); color:var(--st-final); }
.tag--sent{ background:var(--st-sent-bg); color:var(--st-sent); }
.tag--paid{ background:var(--st-paid-bg); color:var(--st-paid); }
.tag--over{ background:var(--st-over-bg); color:var(--st-over); }
.tag--canc{ background:var(--st-canc-bg); color:var(--st-canc); }
.tag--canc span{ text-decoration:line-through; }
.tag--lg{ font-size:var(--fs-sm); padding:8px 14px; }
.tag--lg svg{ width:16px; height:16px; }

/* ============================================================ SEGMENTED TABS */
.segment{ display:inline-flex; background:var(--n100); border-radius:var(--r-md); padding:4px; gap:2px; }
.segment button{ border:none; background:none; font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--text-2); padding:9px 16px; border-radius:9px; cursor:pointer; min-height:40px; white-space:nowrap; transition:all .14s; }
.segment button.is-active{ background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow-sm); }
/* underline tabs */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); }
.tabs button{ border:none; background:none; font-family:inherit; font-size:var(--fs-base); font-weight:600; color:var(--text-2); padding:12px 4px; margin-bottom:-1px; border-bottom:2.5px solid transparent; cursor:pointer; }
.tabs button.is-active{ color:var(--accent-ink); border-bottom-color:var(--accent); }
/* Alpine: Panels bis Init verstecken (kein Aufblitzen aller Reiter) */
[x-cloak]{ display:none !important; }
/* Settings-Reiter (F-07): Tap-Targets ≥48px, auf Mobil horizontal scrollbar */
.tabs.settings-tabs{ gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tabs.settings-tabs::-webkit-scrollbar{ display:none; }
.tabs.settings-tabs button{ min-height:48px; padding:12px 14px; white-space:nowrap; flex:none; }

/* chips / filters */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; min-height:40px; border-radius:var(--r-pill); border:1.5px solid var(--line-strong); background:var(--surface); font-size:var(--fs-sm); font-weight:600; color:var(--text-2); cursor:pointer; }
.chip svg{ width:15px; height:15px; }
.chip.is-active{ background:var(--accent-tint); border-color:var(--accent-200); color:var(--accent-ink); }

/* ============================================================ NOTES / TOASTS */
.note{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md); font-size:var(--fs-sm); align-items:flex-start; }
.note svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.note b{ font-weight:700; }
.note--info{ background:var(--accent-tint); color:var(--accent-deep); }
.note--ok{ background:var(--ok-bg); color:#0E5B43; }
.note--warn{ background:var(--warn-bg); color:#8A5A12; }
.note--danger{ background:var(--danger-bg); color:#8E2820; }
/* Versand-Erfolg: unübersehbar (Farbe + Icon + Einblend-Animation), Harri muss sicher wissen,
   dass die Mail raus ist. Gegenstück: flash.ejs, Flash-Typ 'sent'. */
.flash-sent{
  align-items:center; padding:18px 20px; font-size:var(--fs-base);
  border:2px solid var(--ok); border-radius:var(--r-lg); box-shadow:var(--shadow);
  animation:flash-sent-in .35s cubic-bezier(.2,.9,.3,1.2);
}
.flash-sent b{ font-size:var(--fs-lg); }
.flash-sent__icon{
  width:44px; height:44px; min-width:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--ok); color:#fff;
}
.flash-sent__icon svg{ width:26px; height:26px; margin:0; }
@keyframes flash-sent-in{ from{ opacity:0; transform:scale(.92) translateY(-8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .flash-sent{ animation:none; } }

.toast{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-md); background:var(--n900); color:#fff; font-size:var(--fs-sm); font-weight:600; box-shadow:var(--shadow-lg); }
.toast svg{ width:20px; height:20px; flex:none; }
.toast--ok .ic{ color:#6FD3AC; }
.toast .x{ margin-left:8px; background:none; border:none; color:rgba(255,255,255,.6); cursor:pointer; display:grid; place-items:center; }

/* ============================================================ MODAL */
.scrim{ position:fixed; inset:0; background:rgba(22,30,28,.42); display:grid; place-items:end center; z-index:50; }
.modal{ background:var(--surface); width:100%; max-width:440px; border-radius:var(--r-2xl) var(--r-2xl) 0 0; box-shadow:var(--shadow-lg); padding:var(--s6); }
.modal__grab{ width:38px; height:4px; border-radius:99px; background:var(--n300); margin:0 auto var(--s5); }
.modal__title{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.01em; }
.modal__body{ color:var(--text-2); margin-top:8px; font-size:var(--fs-base); }
.modal__foot{ display:flex; flex-direction:column; gap:10px; margin-top:var(--s6); }

/* ---- Auswahl-Sheet (Vorlagen-Wähler) ----
   Kopf und Suche gehören NICHT in den Scroller. Lagen sie darin (so war es), wanderte die
   Suche beim Scrollen aus dem Bild — und mit offener iOS-Tastatur war sie unerreichbar.
   Die Stickyness kommt hier aus dem Flex-Layout, nicht aus position:sticky: kein zusätzlicher
   Stacking-Kontext, keine Überlappungs-Nebenwirkungen. */
.modal--sheet{
  display:flex; flex-direction:column; overflow:hidden;
  padding:var(--s5) var(--s6) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
  max-height:88vh;   /* Fallback für WebViews ohne dvh */
  max-height:88dvh;  /* folgt der iOS-Tastatur — % und vh tun das nicht */
  overscroll-behavior:contain;
}
.modal--sheet .modal__grab{ margin-bottom:var(--s4); }
/* Swipe-to-dismiss (sheet.js attachSheetDrag): Griff + Kopf sind Drag-Zonen — der Browser darf
   dort nicht selbst scrollen. Der ::before vergrößert die Trefffläche des 38×4-Griffs. Gilt für
   JEDES Popup mit Griff (Sheets UND Bestätigungs-Dialoge), damit das Runterwischen überall gleich
   funktioniert; der Kopf-Sonderfall bleibt beim Sheet (dort ist der Kopf die Haupt-Ziehzone). */
.modal__grab, .modal--sheet .modal__head{ touch-action:none; }
.modal__grab{ position:relative; }
.modal__grab::before{ content:""; position:absolute; inset:-16px -60px -10px; }
.modal__head{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.modal__search{ flex:none; margin-bottom:12px; }
.modal__list{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* ohne contain scrollt die Seite hinter dem Sheet weiter, sobald die Liste am Ende ist */
  overscroll-behavior:contain;
  margin:0 -8px; padding:0 8px; /* Fokusringe dürfen am Rand nicht abgeschnitten werden */
}
/* „»Flur« anlegen" bleibt immer erreichbar, statt unter einer langen Trefferliste zu versinken. */
.modal__create{ flex:none; padding-top:12px; }
.modal__empty{ padding:22px 4px; text-align:center; color:var(--text-2); }

@media(min-width:560px){
  .scrim{ place-items:center; }
  .modal{ border-radius:var(--r-2xl); }
  .modal__grab{ display:none; }
  .modal__foot{ flex-direction:row-reverse; }
  .modal__foot .btn{ flex:1; }
  /* Ab hier zentriertes Fenster statt Bottom-Sheet (Design „06 Dropdowns": 560 px).
     Maße aus DTPicker: 440 breit, Liste 320 hoch. */
  .modal--sheet{ max-height:min(88dvh, 620px); }
  .modal--sheet .modal__list{ flex:0 1 auto; max-height:320px; }
}

/* ============================================================ PDF-VIEWER (In-App-Vorschau, BUG-003) */
/* Vollbild-Overlay mit fester Kopfleiste — Schließen immer sichtbar (safe-area), keine iOS-Sackgasse. */
.pdfv{ position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; background:var(--n900); }
.pdfv[hidden]{ display:none; }
.pdfv__bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--surface); border-bottom:1px solid var(--line); flex:none;
}
.pdfv__title{
  flex:1; min-width:0; font-size:var(--fs-sm); font-weight:600; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
.pdfv__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.pdfv__btn{
  /* Icon-only (Labels via aria-label/title), damit der Beleg-Name im Titel lesbar bleibt
     (BUG-010 Teil B). Quadratisch, minimale Breite. */
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  width:44px; min-width:44px; min-height:44px; padding:0; border-radius:var(--r-md);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--accent-ink);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700; cursor:pointer;
  white-space:nowrap; transition:background .14s, border-color .14s;
}
.pdfv__btn svg{ width:18px; height:18px; flex:none; }
.pdfv__btn:hover{ background:var(--accent-tint-2); border-color:var(--accent-200); }
.pdfv__btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pdfv__btn--primary:hover{ background:var(--accent-ink); }
.pdfv__stage{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:var(--n100); }
/* pdf.js-Render: ein Canvas pro Seite, mittig gestapelt mit Luft + Schatten = klare Seitentrennung. */
.pdfv__doc{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.pdfv__page{
  width:100%; max-width:794px; height:auto; display:block; background:#fff;
  box-shadow:0 1px 5px rgba(16,24,40,.18); border-radius:var(--r-sm);
}
.pdfv__hint{ padding:32px 16px; color:var(--text-2); font-size:var(--fs-sm); text-align:center; }

/* ============================================================ FILE UPLOAD */
.upload{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:var(--s6); border:2px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--surface-2); text-align:center; cursor:pointer; transition:border-color .14s, background .14s; }
.upload:hover{ border-color:var(--accent-200); background:var(--accent-tint-2); }
.upload .tile{ background:var(--accent-tint); }
.upload__title{ font-weight:700; }
.upload__hint{ font-size:var(--fs-sm); color:var(--text-2); }
.filechip{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.filechip .tile{ width:40px; height:40px; border-radius:10px; }
.filechip__main{ flex:1; min-width:0; }
.filechip__name{ font-size:var(--fs-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filechip__meta{ font-size:var(--fs-xs); color:var(--text-2); }
.progress{ height:6px; border-radius:99px; background:var(--n200); overflow:hidden; margin-top:6px; }
.progress > i{ display:block; height:100%; background:var(--accent); border-radius:99px; }

/* ============================================================ AMOUNT / TOTAL BLOCK */
.amount{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.01em; }
.total-block{ background:var(--accent-deep); color:#fff; border-radius:var(--r-xl); padding:var(--s5) var(--s6); display:flex; align-items:center; justify-content:space-between; }
.total-block .lbl{ font-size:var(--fs-sm); font-weight:600; color:rgba(255,255,255,.72); }
.total-block .val{ font-size:var(--fs-2xl); font-weight:800; font-variant-numeric:tabular-nums; }

/* divider + helpers */
.vscroll{ display:flex; flex-direction:column; }
.vscroll > *{ flex-shrink:0; }
.divider{ height:1px; background:var(--line); border:none; margin:0; }
.muted{ color:var(--text-2); }
.stack{ display:flex; flex-direction:column; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ============================================================ RESPONSIVE: ≤600px UI verkleinern (nur Phone, Desktop unverändert) */
@media (max-width:600px){
  :root{
    --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
    --fs-xl:20px; --fs-2xl:23px; --fs-3xl:27px; --fs-display:32px;
    /* Spacing-Tokens NICHT verkleinern → genügend Abstand zwischen Sektionen.
       --tap bleibt 48px (Tap-Targets ≥44px). */
  }
}

/* ============================================================ RESPONSIVE TABLE → Karten-Stapel < 600px */
.dtable{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
@media (max-width:600px){
  .dtable thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .dtable tr{ display:block; border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s3) var(--s4); margin-bottom:var(--s3); background:var(--surface); }
  .dtable td{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:5px 0 !important; text-align:right !important; border:none !important; }
  .dtable td::before{ content:attr(data-label); font-weight:600; color:var(--text-2); text-align:left; flex:none; }
  .dtable td:empty{ display:none; }
  .dtable td.dtable__title{ font-weight:700; font-size:var(--fs-base); padding-bottom:var(--s2) !important; }
  .dtable td.dtable__title::before{ content:""; }
}

/* ============================================================ CHAT (Nachrichtencenter + Kunden-Chat) */
/* Zugangs-/Widerruf-Leiste über dem Faden (F-03): dezent, rot, mit zweiter Bestätigung.
   flex-wrap: auf schmalen Screens bricht der Widerruf-Knopf unter den Statustext, statt ihn
   zu quetschen (sonst überlagerte der Text mit dem Popup — Henrik-Befund 2026-07-21). */
.chat-access{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3);
  max-width:840px; margin:0 0 var(--s4); padding:10px var(--s4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
}
.chat-access__status{ display:flex; align-items:center; gap:8px; flex:1 1 220px; min-width:0; font-size:var(--fs-sm); color:var(--text-2); }
.chat-access__status svg{ flex:none; width:15px; height:15px; }
.revoke{ position:relative; flex:none; }
.revoke__toggle{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 12px; border-radius:var(--r-sm); border:1.5px solid transparent;
  color:var(--danger); font-size:var(--fs-sm); font-weight:600; white-space:nowrap;
}
.revoke__toggle::-webkit-details-marker{ display:none; }
.revoke__toggle svg{ width:16px; height:16px; flex:none; }
.revoke__toggle:hover{ background:var(--danger-bg); }
.revoke[open] .revoke__toggle{ background:var(--danger-bg); border-color:var(--danger); }
.revoke__pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:min(320px,86vw);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:var(--s4);
}
/* Mobil: das Popup nicht über den Faden legen, sondern in der Leiste aufklappen (drückt den
   Inhalt nach unten). Desktop behält das absolute Popup rechts. */
@media (max-width:600px){
  .revoke{ width:100%; }
  .revoke__pop{ position:static; width:100%; margin-top:8px; box-shadow:none; }
}
.revoke__warn{ margin:0 0 var(--s3); font-size:var(--fs-sm); color:var(--text-2); }
.revoke__actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.revoke__actions form{ margin:0; }
/* ===== CHAT-RAHMEN (fester Rahmen wie der Wizard; nur der Faden scrollt) =====
   Owner-Thread nutzt .app-shell--flush (body--chat), die öffentliche Kunden-Seite
   .chatframe--standalone. viewport.js (in live.js) hält den Rahmen bei offener Tastatur
   am sichtbaren Viewport → Kopf sichtbar, Eingabezeile über der Tastatur. */
.chatframe{ height:100%; min-height:0; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }
.chatframe--standalone{ height:100dvh; max-width:560px; margin:0 auto; }
.chatframe__head{ flex:none; display:flex; align-items:center; gap:12px; background:var(--surface); border-bottom:1px solid var(--line); padding:calc(env(safe-area-inset-top) + 12px) 16px 12px; }
.chatframe__head--center{ justify-content:center; text-align:center; }
.chatframe__titles{ min-width:0; }
.chatframe__title{ font-size:var(--fs-lg); font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatframe__sub{ font-size:var(--fs-sm); color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatframe__flash{ flex:none; }
.chatframe__flash:empty{ display:none; }
.chatframe__flash .stack{ margin:var(--s3) var(--s4) 0; }
.chatframe .chat-access{ flex:none; margin:var(--s3) var(--s4) 0; }
.chatframe .chat-thread{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.chatframe .chatbar{ position:static; flex:none; }
/* Tabbar im Owner-Chat aus (WhatsApp-artig; zurück über den Pfeil oben). */
body.body--chat{ overflow:hidden; }
body.body--chat .tabbar{ display:none; }

.chat-thread{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); }
.bubble{
  max-width:78%; align-self:flex-start; padding:11px 14px;
  font-size:var(--fs-sm); line-height:1.45; box-shadow:var(--shadow-sm);
  background:var(--surface); color:var(--text); border:1px solid var(--line);
  border-radius:16px; border-bottom-left-radius:5px;
}
.bubble--me{
  align-self:flex-end; background:var(--accent); color:#fff; border:none;
  border-radius:16px; border-bottom-left-radius:16px; border-bottom-right-radius:5px;
}
.bubble__time{ display:block; margin-top:4px; font-size:11px; color:var(--text-3); }
.bubble--me .bubble__time{ color:rgba(255,255,255,.8); text-align:right; }
/* Nachricht = Absender-Name (klein) + Bubble, auf einer Seite ausgerichtet */
.msg{ display:flex; flex-direction:column; align-items:flex-start; max-width:82%; align-self:flex-start; }
.msg--me{ align-items:flex-end; align-self:flex-end; }
.msg .bubble{ max-width:100%; align-self:auto; }
.bubble__name{ font-size:11px; font-weight:600; color:var(--text-3); margin:0 4px 3px; }
.date-chip{
  align-self:center; margin:var(--s2) 0; padding:4px 12px; border-radius:99px;
  font-size:11px; font-weight:600; color:var(--text-3); background:var(--n100);
}
/* Anhänge in Bubbles (Bilder als Thumbnail, PDF als Datei-Zeile) */
.bubble__imgwrap{ display:block; margin:2px 0 6px; }
.bubble__img{
  display:block; max-width:240px; max-height:240px; width:auto; height:auto;
  border-radius:12px; background:var(--n100);
}
.bubble__file{
  display:flex; align-items:center; gap:8px; margin:2px 0 6px; padding:9px 12px;
  border-radius:10px; background:rgba(0,0,0,.05); color:inherit; font-weight:600;
  text-decoration:none; word-break:break-all;
}
.bubble--me .bubble__file{ background:rgba(255,255,255,.18); color:#fff; }
.bubble__file svg{ width:18px; height:18px; flex:none; }

/* Eingabeleiste am unteren Rand des Chat-Rahmens. Spalte: Auswahl-Chips über der Eingabezeile.
   Unten fester 48px-Sockel (wie die Wizard-Fußleiste), damit „Anhang/Senden" auf der iOS-PWA
   nicht an der Geräterundung/Home-Indicator klebt. Progressive Enhancement statt max()-in-calc:
   die erste Deklaration garantiert 48px auch ohne env()/calc(), die zweite legt die Safe-Area drauf.
   Bei offener Tastatur (.chat--kb, gesetzt von viewport.js) fällt der Sockel weg → die Eingabezeile
   sitzt direkt über der Tastatur, man sieht was man schreibt. */
.chatbar{
  flex:none; z-index:5; display:flex; flex-direction:column; gap:8px;
  padding:10px 14px 48px;
  background:var(--surface); border-top:1px solid var(--line);
}
.chatbar{ padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); }
.chat--kb .chatbar{ padding-bottom:8px; }
.chatbar__row{ display:flex; align-items:center; gap:10px; }
.chatbar__attach{
  width:46px; height:46px; min-width:46px; flex:none; border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--accent-ink);
  display:grid; place-items:center; cursor:pointer; transition:background .14s, border-color .14s;
}
.chatbar__attach svg{ width:20px; height:20px; }
.chatbar__attach:hover{ background:var(--accent-tint-2); border-color:var(--accent-200); }
/* Auswahl-Chips (noch nicht gesendete Dateien) */
.chatbar__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chatchip{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-2); font-size:var(--fs-xs); font-weight:600;
}
.chatchip__thumb{ width:34px; height:34px; border-radius:8px; object-fit:cover; flex:none; }
.chatchip__ico{ font-size:20px; flex:none; }
.chatchip__name{ max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatchip__x{
  width:26px; height:26px; min-width:26px; border:none; border-radius:50%;
  background:var(--n100); color:var(--text-2); font-size:16px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.chatchip__x:hover{ background:var(--danger-bg); color:var(--danger); }
.chatbar__input{
  flex:1; min-height:46px; padding:0 18px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong); background:var(--surface);
  font-family:inherit; color:var(--text);
  font-size:16px; /* ≥16px → kein iOS-Auto-Zoom beim Fokus/Tastatur */
}
.chatbar__input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.chatbar__send{ width:46px; height:46px; min-height:46px; padding:0; flex:none; border-radius:var(--r-pill); }
.chatbar__send svg{ width:20px; height:20px; }
/* Nachrichten-Listenzeile */
.row--msg{ align-items:flex-start; }
.row__sub--unread{ font-weight:700; color:var(--text); }
.row__badge{
  flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center; margin-top:2px;
}

/* ============================================================ MENGEN-STEPPER (− Zahl +) */
/* Hieß früher .stepper — der Name gehört jetzt dem Schritt-Anzeiger des Wizards (siehe unten). */
.qtystep{ display:flex; align-items:stretch; border:1.5px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; background:var(--surface); min-height:56px; }
.qtystep button{ width:58px; min-width:58px; border:none; background:var(--accent-tint); color:var(--accent-ink); cursor:pointer; display:grid; place-items:center; transition:background .12s; }
.qtystep button:hover{ background:var(--accent-200); }
.qtystep button:active{ background:var(--accent-ink); color:#fff; }
.qtystep button[disabled]{ background:var(--n100); color:var(--n300); cursor:not-allowed; }
.qtystep button svg{ width:24px; height:24px; }
/* font-size ≥16px, sonst zoomt iOS beim Fokus ins Feld. --fs-xl erfüllt das mit Reserve. */
.qtystep input{ flex:1; min-width:0; width:100%; border:none; border-left:1.5px solid var(--line); border-right:1.5px solid var(--line); text-align:center; font-family:inherit; font-size:var(--fs-xl); font-weight:800; color:var(--text); background:var(--surface); -moz-appearance:textfield; font-variant-numeric:tabular-nums; }
.qtystep input::-webkit-outer-spin-button, .qtystep input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qtystep input:focus{ outline:none; }
.qtystep:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }

/* ============================================================ STEPPER (Schritt-Anzeiger) */
.stepper{ background:var(--surface); border-bottom:1px solid var(--line); padding:8px 16px 12px; }
.stepper__meta{ font-size:var(--fs-xs); font-weight:700; color:var(--text-3); letter-spacing:.02em; margin:0 2px 8px; }
.stepper__track{ display:grid; }
.stepper__step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:2px 2px 0; border:none; background:none; font-family:inherit; cursor:default; min-width:0; }
.stepper__step:not([disabled]){ cursor:pointer; }
.stepper__step::before, .stepper__step::after{ content:""; position:absolute; top:15px; height:2.5px; background:var(--line-strong); z-index:0; }
.stepper__step::before{ left:0; right:50%; margin-right:16px; }
.stepper__step::after{ left:50%; right:0; margin-left:16px; }
.stepper__step[data-first]::before{ display:none; }
.stepper__step[data-last]::after{ display:none; }
.stepper__step.is-done::before, .stepper__step.is-current::before, .stepper__step.is-done::after{ background:var(--accent); }
.stepper__dot{ position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; background:var(--surface); border:2px solid var(--line-strong); color:var(--text-3); transition:all .18s; }
.stepper__step.is-done .stepper__dot{ background:var(--accent); border-color:var(--accent); color:#fff; }
.stepper__step.is-current .stepper__dot{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 4px var(--accent-tint); }
.stepper__lbl{ font-size:12.5px; font-weight:600; color:var(--text-3); line-height:1.2; text-align:center; text-wrap:balance; }
.stepper__step.is-done .stepper__lbl{ color:var(--text); }
.stepper__step.is-current .stepper__lbl{ color:var(--accent-ink); font-weight:700; }
.stepper__step:not([disabled]):hover .stepper__lbl{ color:var(--accent-ink); }
.stepper__step:focus-visible{ outline:none; }
.stepper__step:focus-visible .stepper__dot{ box-shadow:0 0 0 4px var(--ring); }
.stepper__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

/* Desktop-Variante: horizontal, Label rechts vom Punkt */
.stepper--wide{ border:none; padding:0; background:none; }
.stepper--wide .stepper__meta{ display:none; }
.stepper--wide .stepper__step{ flex-direction:row; gap:11px; padding:0; justify-content:center; }
.stepper--wide .stepper__step::before, .stepper--wide .stepper__step::after{ top:16px; }
.stepper--wide .stepper__step::before{ margin-right:calc(50% - 2px); left:0; right:auto; width:0; display:none; }
.stepper--wide .stepper__lbl{ font-size:var(--fs-sm); max-width:none; text-align:left; }
.stepper--wide .stepper__dot{ width:32px; height:32px; font-size:15px; }

/* ============================================================ WIZARD-RAHMEN */
/* Telefon: fester Rahmen, in dem nur die Mitte scrollt.
   height, NICHT min-height: bei min-height ist die Höhe inhaltsgetrieben, das flex:1-Kind
   läuft nie über, sein overflow-y:auto greift nie → das Dokument scrollt und die
   Aktionsleiste rutscht mit raus. Mit fester Höhe scrollt .wiz__body und die Leiste klebt. */
/* Nur im Wizard: die Seite selbst ist der feste Rahmen. Ohne das scrollt auf iOS zusätzlich
   das Dokument (äußere .app-shell min-height:100vh gegen .wiz 100dvh — dvh↔vh-Divergenz bei
   ein-/ausfahrender URL-Leiste) und Kopf + Aktionsleiste wandern mit statt zu stehen. */
body.body--wizard{ overflow:hidden; }
.app-shell--flush{ height:100dvh; min-height:0; overflow:hidden; }
.app-shell--flush .main{ min-height:0; overflow:hidden; }
.wiz{ height:100%; min-height:0; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }
.wiz__head{ flex:none; display:flex; align-items:center; gap:10px; background:var(--surface); padding:calc(env(safe-area-inset-top) + 12px) 16px 10px; }
/* Der Schritt-Anzeiger zählt zum fixen oberen Bereich — im Flex-Cage nie mitschrumpfen/-scrollen. */
.wiz__stepper{ flex:none; }
.wiz__quit{ width:40px; height:40px; min-width:40px; border-radius:11px; }
.wiz__title{ font-size:var(--fs-lg); font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wiz__body{ flex:1; overflow-y:auto; min-height:0; padding:16px 20px 20px; gap:14px; }
/* Der Abstand zwischen den Karten sitzt auf __main, nicht auf __body: am Desktop wird __body
   zum Grid mit zwei Spalten, sein gap trennt dann die Spalten, nicht mehr die Karten. */
.wiz__main{ display:flex; flex-direction:column; gap:14px; min-width:0; }
/* Unten mehr Luft als oben (12px → 56px), plus die Home-Indicator-Zone zusätzlich
   darunter. Progressive Enhancement statt verschachteltem max(): die erste Deklaration setzt
   den garantierten 56px-Sockel (gilt auch, falls env()/calc() auf einer iOS-Version scheitert),
   die zweite legt bei Unterstützung die Safe-Area obendrauf. Kein max()-in-calc mehr — genau das
   war der wahrscheinliche Grund, warum „Zurück/Weiter" auf der PWA am Rand klebten. */
.wiz__bar{ flex:none; display:flex; gap:12px; align-items:center; background:var(--surface); border-top:1px solid var(--line); padding:12px 20px 56px; }
.wiz__bar{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
/* Bei offener Tastatur (viewport.js setzt .wiz--kb): der Rahmen folgt dem visuellen Viewport,
   Kopf + Stepper bleiben sichtbar, die Fußleiste liegt hinter der Tastatur → ausblenden.
   Sie ist sofort wieder da, sobald die Tastatur schließt (Klasse fällt weg). */
.wiz--kb .wiz__bar{ display:none; }

/* Desktop: der Rahmen wird zur Seite. Kein 100dvh-Käfig mehr — daneben steht die Sidebar,
   und ein Telefon-Ablauf über 1400 px gezogen ist kein Desktop-Layout, sondern ein Versehen.
   Gescrollt wird wieder das Dokument; Kopf und Aktionsleiste kleben per sticky. */
@media (min-width:901px){
  /* Desktop: der Telefon-Käfig wird aufgelöst — wieder Dokument-Scroll, Kopf/Leiste sticky. */
  body.body--wizard{ overflow:visible; }
  .app-shell--flush{ height:auto; min-height:100vh; overflow:visible; }
  .app-shell--flush .main{ overflow:visible; }
  .wiz{ height:auto; min-height:100vh; overflow:visible; }
  .wiz__head{
    position:sticky; top:0; z-index:20;
    padding:var(--s4) var(--s6);
    background:rgba(246,247,247,.88); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .wiz__title{ font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.02em; }
  /* Der Schritt-Anzeiger bleibt schmal und mittig — über die volle Breite gezogen stünden
     die drei Punkte sinnlos weit auseinander (Design: maxWidth 560). */
  .wiz__stepper{ border-bottom:none; background:none; padding:var(--s6) var(--s6) 0; }
  .wiz__stepper .stepper__track{ max-width:560px; margin:0 auto; }
  /* Zwei Spalten (Design: DTWizard 1fr/340). align-items:start, damit die rechte Spalte
     nicht auf die Höhe der linken gestreckt wird — sonst greift ihr sticky nie. */
  .wiz__body{
    overflow:visible; padding:var(--s5) var(--s6) var(--s6);
    max-width:1120px; width:100%; margin:0 auto;
    display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start;
  }
  /* top = Höhe des klebenden Kopfs plus Luft, sonst schöbe sich die Summe darunter. */
  .wiz__side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; }
  /* Ohne Seitenspalte („verschickt") bleibt die linke allein — sonst klaffte rechts eine
     340-px-Lücke. Serverseitig gesetzt statt per :has(), damit das Layout nicht an einer
     CSS-Neuerung hängt. */
  .wiz__body--solo{ grid-template-columns:1fr; }
  .wiz__bar{
    position:sticky; bottom:0; z-index:10;
    padding:var(--s4) var(--s6);
    /* Die Leiste liegt über die volle Breite, ihr Inhalt bleibt auf Textbreite —
       ein „Weiter" ganz rechts am 27-Zöller sucht man sonst. */
    justify-content:center;
  }
  .wiz__bar > *{ max-width:560px; }

  /* Chat bleibt auch am Desktop ein fester Rahmen (Sidebar daneben, WhatsApp-Web-artig) —
     die generische .app-shell--flush-Auflösung oben gilt nur dem Wizard. Höhere Spezifität
     (body.body--chat …) gewinnt über die generische Regel, unabhängig von der Reihenfolge. */
  body.body--chat{ overflow:hidden; }
  body.body--chat .app-shell--flush{ height:100dvh; min-height:0; overflow:hidden; }
  body.body--chat .app-shell--flush .main{ min-height:0; overflow:hidden; }
  .chatframe__head{ padding:var(--s4) var(--s6); }
}

/* ============================================================ SPEICHER-INDIKATOR */
/* Ruhig, kein Toast: Autosave darf den Blick nicht aus dem Formular ziehen. */
.savechip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:700; color:var(--ok); background:var(--ok-bg); padding:6px 11px; border-radius:var(--r-pill); line-height:1; white-space:nowrap; }
.savechip svg{ width:14px; height:14px; }
.savechip--busy{ color:var(--text-2); background:var(--n100); }
.savechip__spin{ width:12px; height:12px; border-radius:50%; border:2px solid var(--n300); border-top-color:var(--text-2); animation:spin .7s linear infinite; }

/* ============================================================ VORLAGEN-WÄHLER (Feld-Trigger) */
.pickfield{ width:100%; min-height:var(--tap); display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r-md); font-family:inherit; font-size:var(--fs-base); color:var(--text); cursor:pointer; text-align:left; transition:border-color .14s, box-shadow .14s; }
.pickfield:hover{ border-color:var(--n400); }
.pickfield:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.pickfield__val{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pickfield__val.is-empty{ color:var(--text-3); }
.pickfield__caret{ width:20px; height:20px; color:var(--text-2); flex:none; }
/* „»Flur« anlegen" — letzte Zeile im Sheet, wenn die Suche nichts Exaktes trifft.
   Gestrichelt + getönt, damit es als Angebot lesbar ist und nicht als Treffer. */
.createopt{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:12px 14px; border:1.5px dashed var(--accent-200); background:var(--accent-tint-2); border-radius:var(--r-md); font-family:inherit; font-size:var(--fs-base); font-weight:700; color:var(--accent-ink); cursor:pointer; text-align:left; transition:background .12s, border-color .12s; }
.createopt:hover{ background:var(--accent-tint); border-color:var(--accent); }
.createopt .tile{ width:38px; height:38px; border-radius:11px; }
.createopt .quote{ font-weight:800; }

/* ============================================================ GESPERRT (festgeschrieben) */
.locked{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent-deep); align-items:flex-start; font-size:var(--fs-sm); }
.locked svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.locked b{ font-weight:700; }