/* Basis-Design-Tokens, identisch auf allen 9 Seiten verifiziert (nur Light — jede Seite
   überschreibt diese in ihrem eigenen, weiterhin lokalen @media(prefers-color-scheme:dark)
   ggf. selbst; dieser Block bleibt bewusst ungated, damit die dortige Kaskaden-Reihenfolge
   nicht durcheinanderkommt). Erweiterte/seitenspezifische Tokens bleiben lokal. */
:root{
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-heading: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: rgba(26,26,26,.62);
  --color-border: #cec5b3;
  --color-accent: #002b2f;
  --color-accent-700: #001416;
  --color-accent-soft: #e9e5e5;
  --color-focus-ring: rgba(0,43,47,.14);
  --radius:14px;
  --radius-sm:8px;
  --shadow: 0 2px 4px rgba(0,20,22,.04), 0 14px 32px -16px rgba(0,20,22,.16);
  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
}

/* Work Sans, self-hosted instead of loaded from fonts.googleapis.com/fonts.gstatic.com —
   loading fonts directly from Google's CDN sends every visitor's IP address to Google on
   every page view (including the two public, unauthenticated forms) without a legal basis,
   a well-established GDPR issue (e.g. LG München I, 3 O 17493/20). Both files are the same
   variable-font subsets Google itself serves (weight axis 400–700 in one file per subset). */
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/work-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:'Work Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/work-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;
}

.account-menu{ position:relative; flex-shrink:0; }
.account-menu[hidden]{ display:none; }
.account-chip{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:none; border-radius:999px; padding:5px 12px 5px 5px; cursor:pointer; color:#fff; font:inherit; font-size:12.5px; font-weight:700; }
.account-chip:hover{ background:rgba(255,255,255,.22); }
.account-avatar{ width:24px; height:24px; border-radius:50%; background:#fff; color:var(--color-accent); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.account-dropdown{ position:absolute; top:calc(100% + 8px); right:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); box-shadow:0 12px 28px -10px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.12); min-width:170px; padding:6px; z-index:60; }
.account-dropdown[hidden]{ display:none; }
.account-dropdown-item{ display:block; width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:6px; font:inherit; font-size:13px; font-weight:600; color:var(--color-text); cursor:pointer; }
.account-dropdown-item:hover{ background:var(--color-accent-soft); }

#toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1a1a1a; color:#fff; padding:10px 18px; border-radius:4px; font-size:13px; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw; text-align:center; }

.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; }

/* Modal-Grundgerüst. .modal-icon.info/.modal-icon.lock bleiben bewusst pro Seite lokal —
   index.html verwendet dort einen anderen Farbton (--color-accent-tint-2) als kunde.html/
   einstellungen.html (--color-accent-soft), das ist keine Kopie, sondern eine abweichende
   bestehende Gestaltung, die diese Auslagerung nicht verändern soll. */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,15,13,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:300; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{ background:var(--color-surface); border-radius:var(--radius); box-shadow:0 24px 60px -20px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.14); max-width:400px; width:100%; padding:var(--space-6); transform:translateY(10px) scale(.97); transition:transform .18s cubic-bezier(.2,.9,.3,1.2); }
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-icon{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3); }
.modal-icon svg{ width:21px; height:21px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.modal-icon.danger{ background:var(--color-danger-tint); color:var(--color-danger); }
.modal-title{ font-family:var(--font-heading); font-size:17px; font-weight:700; margin:0 0 6px; }
.modal-message{ font-size:13.5px; color:var(--color-text-muted); line-height:1.55; margin:0 0 var(--space-4); white-space:pre-wrap; }
.modal-input{ width:100%; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px 12px; font-family:inherit; font-size:15px; margin:2px 0 var(--space-4); background:var(--color-bg); color:var(--color-text); display:block; }
.modal-input:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-focus-ring); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; }
.modal-actions .btn{ min-width:84px; justify-content:center; }
@media (max-width:420px){ .modal-actions{ flex-direction:column-reverse; } .modal-actions .btn{ width:100%; } }