/* JoMa Home Service App – Design System v0.2 */

:root {
  --joma-bg: #FFFFFF;
  --joma-surface: #F7F8F9;
  --joma-border: #E4E7EB;
  --joma-text: #0F1419;
  --joma-text-muted: #5C6773;
  --joma-accent: #9CD3DD;
  --joma-accent-strong: #5BA8B6;
  --joma-accent-dark: #2E5C66;
  --joma-success: #2D8F47;
  --joma-warning: #E2A52B;
  --joma-danger: #C8412D;
  --radius-card: 14px;
  --radius-input: 10px;
  --radius-segment: 12px;
  --radius-segment-inner: 8px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 8px rgba(15, 20, 25, 0.06);
  --shadow-card: 0 4px 16px rgba(15, 20, 25, 0.08);
  --shadow-segment: 0 1px 3px rgba(15, 20, 25, 0.08), 0 1px 1px rgba(15, 20, 25, 0.04);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 28px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--joma-bg);
  color: var(--joma-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, 'Inter', 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

h1, h2, h3 { margin: 0 0 8px; font-weight: 700; color: var(--joma-text); }
h1 { font-size: 28px; letter-spacing: -0.02em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--joma-text-muted); margin-top: 24px; }
.muted { color: var(--joma-text-muted); }
.small { font-size: 14px; }
.error { color: var(--joma-danger); font-size: 14px; margin-top: 8px; }
.note { color: var(--joma-text-muted); font-size: 13px; }

.screen { display: none; min-height: 100vh; min-height: 100dvh; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.screen.active { display: flex; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--joma-border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-input);
  border: none;
  background: transparent;
  color: var(--joma-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.icon-btn:active { background: var(--joma-surface); }
@media (hover: hover) {
  .icon-btn:hover { background: var(--joma-surface); }
}
.icon-btn.syncing svg { animation: spin 0.7s linear infinite; }
.topbar-actions { display: inline-flex; gap: 2px; align-items: center; }

.brand { display: flex; align-items: center; line-height: 1.1; }
.brand-mark { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--joma-text); }

.screen-lock { align-items: center; justify-content: center; padding: 32px 24px; background: linear-gradient(180deg, #FFFFFF 0%, var(--joma-surface) 100%); }
.lock-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lock-logo { width: 88px; height: 88px; border-radius: 22px; box-shadow: var(--shadow-card); margin-bottom: 16px; }
.lock-card h1 { margin: 0; }
.lock-card p { margin: 0 0 12px; }
.lock-card input { width: 100%; font-size: 28px; text-align: center; letter-spacing: 0.4em; padding: 16px; border: 1px solid var(--joma-border); border-radius: var(--radius-input); background: white; font-family: inherit; }
.lock-card input:focus { outline: none; border-color: var(--joma-accent-strong); box-shadow: 0 0 0 3px rgba(91, 168, 182, 0.18); }
.lock-card input::placeholder { letter-spacing: normal; font-size: 17px; font-weight: 500; color: var(--joma-text-muted); opacity: 0.7; }
.lock-card .pin-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--joma-text-muted); cursor: pointer; user-select: none; padding: 4px 8px; margin: -4px 0 4px; }
.lock-card .pin-toggle input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--joma-accent-strong); font-size: inherit; letter-spacing: normal; padding: 0; border: 1px solid var(--joma-border); border-radius: 4px; }

.home-main { flex: 1; padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 16px; }
.home-header { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.home-date { font-size: 13px; font-weight: 600; color: var(--joma-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.home-greeting { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--joma-text); line-height: 1.15; }
.home-status { margin: 6px 0 4px; color: var(--joma-text-muted); font-size: 15px; line-height: 1.45; max-width: 32ch; }

/* Home-Statistik (Apple-Style):
   Hero-Card oben zeigt den Monatsumsatz mit grosser Headline, darunter
   trennt ein iOS-Section-Header die zeituebergreifende "Offene Forderungen"-
   Sektion ab. Zwei kleinere Cards nebeneinander zeigen die DISJUNKTEN
   Mengen "Im Zahlungsziel" und "Ueberfaellig". Drei Schriftgroessen, zwei
   Textfarben, ein farbiger Akzent-Punkt pro Karte. */
.home-stats { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.hs-hero, .hs-card {
  background: var(--joma-surface);
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  text-align: left;
}
.hs-hero {
  padding: 24px 22px 22px;
  /* Dezente gruene Toenung als positiver Cashflow-Indikator. Hintergrund
     verlaeuft fast unsichtbar nach Erfolgs-Gruen, der Rand nimmt den Ton auf. */
  background: linear-gradient(180deg, var(--joma-surface) 0%, rgba(45, 143, 71, 0.05) 100%);
  border-color: rgba(45, 143, 71, 0.18);
}
.hs-hero .hs-label { color: var(--joma-success); }
.hs-trend {
  width: 12px; height: 12px;
  stroke: var(--joma-success); stroke-width: 1.8;
  fill: none; flex-shrink: 0;
}
.hs-label {
  margin: 0 0 8px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--joma-text-muted);
  display: flex; align-items: center; gap: 8px;
}
.hs-value {
  margin: 0; font-size: 34px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.05;
  color: var(--joma-text);
  font-variant-numeric: tabular-nums;
}
.hs-sum {
  margin: 0; font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--joma-text);
  font-variant-numeric: tabular-nums;
}
.hs-meta { margin: 6px 0 0; font-size: 13px; color: var(--joma-text-muted); }
.hs-section {
  margin: 6px 4px -4px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--joma-text-muted);
}
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-card { padding: 16px 16px 18px; }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--joma-text-muted); flex-shrink: 0; }
.hs-dot--open  { background: var(--joma-accent-dark); }
.hs-dot--alert { background: var(--joma-danger); }
/* Klickbare Cards (sowohl "Im Zahlungsziel" als auch "Ueberfaellig") tragen
   die Klasse .is-link. .is-alert ist orthogonal und faerbt nur den Rand
   intensiver, weil die Forderungs-Lage rot eskaliert. */
.hs-card.is-link { cursor: pointer; }
.hs-card.is-link:active { transform: scale(0.997); }
.hs-card.is-link:focus-visible { outline: 2px solid var(--joma-accent-dark); outline-offset: 2px; }
.hs-card.is-alert { border-color: rgba(200, 65, 45, 0.35); }
.hs-allgut {
  margin: 0; padding: 14px 16px;
  font-size: 14px; color: var(--joma-text-muted);
  text-align: center;
}
@media (max-width: 360px) {
  .hs-grid { grid-template-columns: 1fr; }
}

/* Hero-Button (Home) */
.hero-btn { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 22px 22px 20px; background: linear-gradient(135deg, var(--joma-accent-strong) 0%, var(--joma-accent-dark) 100%); border: none; border-radius: 18px; box-shadow: 0 8px 24px rgba(46, 92, 102, 0.22); text-align: left; cursor: pointer; color: white; transition: transform 0.08s ease, box-shadow 0.2s ease; }
.hero-btn:active { transform: scale(0.99); box-shadow: 0 4px 12px rgba(46, 92, 102, 0.18); }
@media (hover: hover) {
  .hero-btn:hover { box-shadow: 0 10px 28px rgba(46, 92, 102, 0.28); }
}
.hero-btn-icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 255, 255, 0.18); color: white; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-btn-text { display: flex; flex-direction: column; flex: 1; }
.hero-btn-text strong { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.hero-btn-text small { font-size: 13px; color: rgba(255, 255, 255, 0.82); margin-top: 3px; line-height: 1.35; }
.hero-btn-arrow { opacity: 0.8; flex-shrink: 0; }

/* Quick-Cards 3-Spalten-Grid */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.quick-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 8px; background: var(--joma-bg); border: 1px solid var(--joma-border); border-radius: 14px; box-shadow: var(--shadow-soft); cursor: pointer; transition: transform 0.08s ease, border-color 0.2s ease, background 0.2s ease; color: var(--joma-text); }
.quick-card svg { color: var(--joma-accent-strong); }
.quick-card span { font-size: 13px; font-weight: 600; }
.quick-card:active { transform: scale(0.97); }
@media (hover: hover) {
  .quick-card:hover { border-color: var(--joma-accent-strong); background: var(--joma-surface); }
}

/* Segmented Control - die EINE Sprache fuer alle Filter/Toggles.
   Verwendet von: .segmented (Angebot/Rechnung), .tabs (Archiv-Hauptfilter),
   .sub-tabs (Archiv-Statusfilter), .stat-tabs (Verlauf-Filter).
   Alle nutzen jetzt das gleiche visuelle Vokabular: graue Surface-Bar mit
   weissem Pill fuer aktiven Zustand. */
.segmented,
.tabs,
.sub-tabs,
.stat-tabs {
  display: flex;
  background: var(--joma-surface);
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-segment);
  padding: 4px;
  gap: 4px;
}
.segmented { margin-bottom: 16px; }

.seg-option,
.tab,
.sub-tab,
.stat-tab {
  flex: 1;
  padding: 10px 14px;
  min-height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--radius-segment-inner);
  font-size: 14px;
  font-weight: 600;
  color: var(--joma-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.seg-option.active,
.tab.active,
.sub-tab.active,
.stat-tab.active {
  background: white;
  color: var(--joma-accent-dark);
  box-shadow: var(--shadow-segment);
}
.seg-option:active,
.tab:active,
.sub-tab:active,
.stat-tab:active { background: rgba(15, 20, 25, 0.04); }
@media (hover: hover) {
  .seg-option:hover:not(.active),
  .tab:hover:not(.active),
  .sub-tab:hover:not(.active),
  .stat-tab:hover:not(.active) { color: var(--joma-text); }
}
/* Spezifische semantische Toene fuer Sub-Tabs erhalten bleiben:
   ueberfaellig in Rot, bezahlt in Gruen, klar als Status erkennbar. */
.sub-tab[data-sub="ueberfaellig"].active { color: var(--joma-danger); }
.sub-tab[data-sub="bezahlt"].active { color: var(--joma-success); }

/* Etwas mehr Luft nach oben fuer die Sub-Tabs unter den Haupt-Tabs,
   damit sich der zweite Filter-Layer klar abhebt. */
.sub-tabs { margin-top: 8px; font-size: 13px; }
.sub-tab { font-size: 13px; min-height: 36px; padding: 8px 10px; }

/* Statistik-Screen */
.stat-period-label { font-size: 13px; color: var(--joma-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 12px; font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.stat-card { padding: 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--joma-border); background: var(--joma-bg); }
.stat-card .stat-label { font-size: 12px; color: var(--joma-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-card .stat-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-card .stat-sub { font-size: 12px; color: var(--joma-text-muted); }
/* Statistik-Karten in der Joma-Palette: gedaempfte Tints des Akzent-Tuerkis,
   abgeleitet von var(--joma-accent), var(--joma-success), var(--joma-danger).
   Damit harmonieren sie mit den Status-Badges im Archiv. */
.stat-card-blue { border-color: rgba(91, 168, 182, 0.28); background: rgba(91, 168, 182, 0.08); }
.stat-card-blue .stat-value { color: var(--joma-accent-dark); }
.stat-card-green { border-color: rgba(45, 143, 71, 0.28); background: rgba(45, 143, 71, 0.08); }
.stat-card-green .stat-value { color: var(--joma-success); }
.stat-card-red { border-color: rgba(200, 65, 45, 0.28); background: rgba(200, 65, 45, 0.07); }
.stat-card-red .stat-value { color: var(--joma-danger); }
.stat-card-neutral { border-color: var(--joma-border); background: var(--joma-surface); }
.stat-card-neutral .stat-value { color: var(--joma-text); }
.stat-section { font-size: 14px; font-weight: 600; color: var(--joma-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 4px 0 10px; }
.stat-section-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 10px; flex-wrap: wrap; }
.stat-section-row .stat-section { margin: 0; }
/* .stat-tabs / .stat-tab teilen sich die Segmented-Sprache (siehe oben).
   Im Stat-Header inline gerendert, damit Verlauf-Label links bleibt. */
.stat-tabs { display: inline-flex; flex: 0 0 auto; }
.stat-tab { flex: 0 0 auto; font-size: 13px; padding: 8px 14px; min-height: 36px; }
.stat-verlauf { display: flex; flex-direction: column; gap: 4px; }
.stat-bar-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--joma-border); }
.stat-bar-row:last-child { border-bottom: none; }
.stat-bar-row .stat-bar-label { width: 92px; font-size: 13px; color: var(--joma-text-muted); flex-shrink: 0; }
.stat-bar-row .stat-bar-track { flex: 1; height: 8px; background: var(--joma-surface); border-radius: 4px; overflow: hidden; }
.stat-bar-row .stat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--joma-accent) 0%, var(--joma-accent-strong) 100%); border-radius: 4px; transition: width 0.3s ease; }
.stat-bar-row .stat-bar-value { width: 88px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; flex-shrink: 0; }

.stat-verlauf-empty { padding: 16px 0; }
.stat-jahr-monate { display: flex; flex-direction: column; gap: 0; }
.stat-jahr { border: 1px solid var(--joma-border); border-radius: 12px; background: var(--joma-bg); margin-top: 8px; overflow: hidden; }
.stat-jahr[open] { box-shadow: 0 1px 3px rgba(15, 20, 25, 0.04); }
.stat-jahr-header { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 12px; user-select: none; }
.stat-jahr-header::-webkit-details-marker { display: none; }
.stat-jahr-header:active { background: var(--joma-surface); }
.stat-jahr-label { font-size: 16px; font-weight: 700; color: var(--joma-text); letter-spacing: -0.01em; }
.stat-jahr-summe { margin-left: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--joma-text-muted); }
.stat-jahr-chevron { color: var(--joma-text-muted); transition: transform 0.2s ease; flex-shrink: 0; }
.stat-jahr[open] .stat-jahr-chevron { transform: rotate(90deg); }
.stat-jahr .stat-jahr-monate { padding: 0 16px 12px; }

.quick-row { display: flex; gap: 10px; margin-top: 16px; }
.quick-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  min-height: 48px;
  background: var(--joma-surface);
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-input);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: var(--joma-text);
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.quick-btn:active { background: #EEF1F4; }
@media (hover: hover) {
  .quick-btn:hover { border-color: var(--joma-accent-strong); }
}

.form-main { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.field-label { font-size: 13px; font-weight: 600; color: var(--joma-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 10px; }
/* H3 in Form-Mains (Aktionen, Preise, Sicherheit) klare Section-Trennung. */
.form-main h3 { margin-top: 20px; }
.form-main > h3:first-of-type { margin-top: 8px; }

input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], textarea, select {
  width: 100%;
  padding: 14px 16px;
  min-height: 52px;
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-input);
  background: white;
  font-size: 16px;
  font-family: inherit;
  color: var(--joma-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { resize: vertical; min-height: 96px; padding: 14px 16px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--joma-accent-strong); box-shadow: 0 0 0 3px rgba(91, 168, 182, 0.18); }

/* Button-System: alle Varianten teilen das gleiche Grundgeruest (Hoehe,
   Radius, Padding, Font-Weight). Unterschiede nur in Farbe und Border. */
.btn-primary, .btn-secondary, .btn-ghost, .btn-paid, .btn-danger {
  padding: 14px 20px;
  border-radius: var(--radius-input);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-paid:active, .btn-danger:active {
  transform: scale(0.99);
}
.btn-primary { background: var(--joma-accent-strong); color: white; }
.btn-primary.big { font-size: 17px; min-height: 56px; }
.btn-secondary { background: white; color: var(--joma-text); border-color: var(--joma-border); }
.btn-secondary.small { padding: 8px 14px; min-height: 40px; font-size: 14px; }
.btn-ghost { background: transparent; color: var(--joma-text-muted); border: none; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--joma-accent-dark); }
  .btn-secondary:hover { border-color: var(--joma-accent-strong); }
  .btn-ghost:hover { color: var(--joma-text); }
}
.btn-ghost.small { padding: 8px 14px; min-height: 40px; font-size: 14px; }

.row-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.row-buttons > button { flex: 1; min-width: 120px; }
/* In Modal-Cards: Buttons-Reihe etwas mehr Luft nach oben fuer klare Trennung
   vom Form-Content darueber. */
.modal-card .row-buttons { margin-top: 12px; }

.settings-summary { display: flex; gap: 16px; flex-wrap: wrap; background: var(--joma-surface); border-radius: var(--radius-card); padding: 14px 16px; font-size: 14px; border: 1px solid var(--joma-border); }
.settings-summary > div { display: flex; flex-direction: column; gap: 2px; }

.result-card { background: var(--joma-surface); border: 1px solid var(--joma-border); border-radius: var(--radius-card); padding: 18px 16px; margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.result-card h3 { margin-top: 0; }

.positions { display: flex; flex-direction: column; gap: 8px; }
.position {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 14px 16px;
  min-height: 56px;
  background: white;
  border-radius: var(--radius-input);
  border: 1px solid var(--joma-border);
  box-shadow: var(--shadow-soft);
  font-size: 15px;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.positions.editable .position:active { background: var(--joma-surface); }
.position .cat-chip { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cat-leistung { background: #E0F4F7; color: #2E5C66; }
.cat-material { background: #FFF1E0; color: #8B5A1B; }
.cat-entsorgung { background: #E8E4F4; color: #4B3C8F; }
.cat-farbe { background: #FCE4E4; color: #8A2A2A; }
.cat-fahrt { background: #E4F1E2; color: #2D6630; }
.cat-sonstiges { background: #F0F2F4; color: #5C6773; }
.position .desc { color: var(--joma-text); white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.position .qty { color: var(--joma-text-muted); font-size: 12px; margin-top: 2px; }
.position .amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.positions.editable .position { cursor: pointer; }
.positions.editable .position:hover { border-color: var(--joma-accent-strong); }

.totals { border-top: 1px solid var(--joma-border); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.totals .row { display: flex; justify-content: space-between; align-items: center; }
.totals .row strong { font-size: 18px; font-variant-numeric: tabular-nums; }

.customer-picker { display: flex; gap: 8px; align-items: stretch; }
.customer-picker input { flex: 1; }
.customer-picker .btn-secondary.small { min-height: 52px; padding: 8px 16px; }
.customer-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.customer-results .result {
  padding: 14px 16px;
  min-height: 52px;
  background: white;
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.customer-results .result:active { background: var(--joma-surface); }
@media (hover: hover) {
  .customer-results .result:hover { border-color: var(--joma-accent-strong); box-shadow: var(--shadow-card); }
}
.customer-selected {
  padding: 14px 16px;
  background: rgba(91, 168, 182, 0.08);
  border: 1px solid var(--joma-accent-strong);
  border-radius: var(--radius-input);
  font-size: 14px;
  line-height: 1.5;
}

/* Listen-Items: weisse Karten, gleiche Sprache wie .position-Kacheln.
   Subtiler Schatten, gleicher Radius, gleiche Innenabstaende. */
.list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.list-item {
  padding: 14px 16px;
  min-height: 56px;
  background: white;
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.list-item:active { transform: scale(0.995); background: var(--joma-surface); }
@media (hover: hover) {
  .list-item:hover { border-color: var(--joma-accent-strong); box-shadow: var(--shadow-card); }
}
.list-item .meta { font-size: 13px; color: var(--joma-text-muted); }
.list-item .status-badge { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 6px; }
.status-entwurf { background: #F0F2F4; color: #5C6773; }
.status-gesendet { background: #E0F4F7; color: #2E5C66; }
.status-verrechnet { background: #DDEBFA; color: #1F4E91; }
.status-bezahlt { background: #E4F1E2; color: #2D6630; }
.status-ueberfaellig { background: #FCE4E4; color: #8A2A2A; }
.status-verworfen { background: #ECECEC; color: #5C6773; text-decoration: line-through; }
.meta-bezug { color: var(--joma-accent-strong); font-weight: 600; }

/* Such-Felder: Pill-Look mit eingebettetem Icon, weicher Schatten,
   deutlicher Fokus-Ring im Joma-Tuerkis. Gleich fuer Archiv und Kunden. */
.search-wrap {
  position: relative;
  margin: 0 0 12px;
}
.search-wrap .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--joma-text-muted);
  pointer-events: none;
}
#archiv-search,
#kunden-search,
.search-wrap input[type="search"],
.search-wrap input[type="text"] {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-pill);
  background: var(--joma-surface);
  font-size: 15px;
  color: var(--joma-text);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
#archiv-search::placeholder,
#kunden-search::placeholder,
.search-wrap input::placeholder { color: var(--joma-text-muted); }
#archiv-search:focus,
#kunden-search:focus,
.search-wrap input:focus {
  outline: none;
  border-color: var(--joma-accent-strong);
  background: white;
  box-shadow: 0 0 0 3px rgba(91, 168, 182, 0.18);
}
#archiv-search::-webkit-search-cancel-button,
#kunden-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Monatsuebersicht im Rechnungen-Archiv */
.monats-uebersicht { background: var(--joma-surface); border: 1px solid var(--joma-border); border-radius: var(--radius-card); padding: 14px 16px; margin: 10px 0 18px; }
.monats-uebersicht h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--joma-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.monats-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--joma-border); }
.monats-row:last-child { border-bottom: none; }
.monats-row.current { font-weight: 700; }
.monats-row .label { font-size: 14px; }
.monats-row .label small { color: var(--joma-text-muted); margin-left: 8px; font-weight: 400; font-size: 12px; }
.monats-row .value { font-size: 14px; font-variant-numeric: tabular-nums; }
.monats-row.current .value { color: var(--joma-accent-dark); }

/* .tabs / .tab und .sub-tabs / .sub-tab werden oben in der Segmented-Sprache
   gemeinsam definiert. Keine eigene Regel mehr hier, sonst widersprueche. */

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); background: var(--joma-text); color: white; padding: 12px 20px; border-radius: 24px; font-size: 14px; z-index: 1000; box-shadow: var(--shadow-card); animation: toast-in 0.2s ease; }

/* Allgemeine Info-Card: dezent in Joma-Akzent, fuer Hinweise in Einstellungen
   und sonstigen Info-Boxen. */
.info-card {
  background: rgba(91, 168, 182, 0.08);
  border: 1px solid rgba(91, 168, 182, 0.22);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--joma-text);
}
.info-card strong { display: block; margin-bottom: 4px; color: var(--joma-accent-dark); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

.legal-links { display: flex; flex-direction: column; gap: 4px; }
.legal-link-btn {
  padding: 12px 14px; min-height: 48px;
  background: var(--joma-bg); border: 1px solid var(--joma-border); border-radius: var(--radius-input);
  color: var(--joma-text); text-decoration: none; font-size: 15px; font-weight: 500; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: flex-start; text-align: left;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.legal-link-btn:hover { border-color: var(--joma-accent-strong); background: var(--joma-surface); }
.legal-link-btn:active { background: var(--joma-surface); }

.legal-screen { max-width: 720px; }
.legal-screen p, .legal-screen li { font-size: 15px; line-height: 1.55; color: var(--joma-text); margin: 0 0 10px; }
.legal-screen ul { padding-left: 22px; margin: 0 0 14px; }
.legal-screen .legal-h { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--joma-text-muted); margin: 22px 0 8px; font-weight: 600; }
.legal-screen .legal-h:first-of-type { margin-top: 4px; }
.legal-screen a { color: var(--joma-accent-strong); text-decoration: none; }
.legal-screen a:hover { color: var(--joma-accent-dark); }

/* Restored-Hinweis im Beleg-Detail: zeigt an, dass der Beleg aus dem Sheet
   wiederhergestellt wurde und die Detail-Positionen nur im PDF im Drive
   vorliegen. */
.restored-hint {
  background: rgba(91, 168, 182, 0.08);
  border-left: 4px solid var(--joma-accent-strong);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--joma-text);
}
.restored-hint strong {
  display: block;
  margin-bottom: 4px;
  color: var(--joma-accent-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.restored-hint a { display: inline-flex; text-decoration: none; }

/* Bezug zwischen Angebot und Rechnung im Beleg-Detail.
   Wird oberhalb der Positionen angezeigt und enthaelt einen klickbaren Link
   zum jeweils verbundenen Beleg (Angebot <-> Rechnung). */
.detail-bezug {
  background: rgba(91, 168, 182, 0.08);
  border-left: 4px solid var(--joma-accent-strong);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 12px 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--joma-text);
}
.detail-bezug strong {
  display: block;
  margin-bottom: 4px;
  color: var(--joma-accent-dark);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.detail-bezug a {
  color: var(--joma-accent-strong);
  font-weight: 600;
  text-decoration: none;
}
.detail-bezug a:hover { color: var(--joma-accent-dark); text-decoration: underline; }

/* Empty-State fuer leere Listen (Kunden, Archiv, Statistik). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px 32px;
  gap: 8px;
  color: var(--joma-text-muted);
}
.empty-state .icon {
  width: 64px;
  height: 64px;
  color: var(--joma-accent-strong);
  margin-bottom: 4px;
}
.empty-state .headline {
  font-size: 17px;
  font-weight: 600;
  color: var(--joma-text);
  margin: 0;
}
.empty-state .sub {
  font-size: 14px;
  color: var(--joma-text-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}
.empty-state .btn-primary {
  margin-top: 12px;
  min-width: 200px;
}

/* PWA-Update-Banner: erscheint, wenn der Service-Worker eine neue Version
   installiert hat. Klick auf "Jetzt aktivieren" laedt die App neu. */
.update-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(86px + var(--safe-bottom));
  background: var(--joma-text);
  color: white;
  padding: 10px 14px 10px 18px;
  border-radius: 14px;
  font-size: 13px;
  z-index: 900;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
}
.update-banner .btn-secondary { background: white; color: var(--joma-text); border-color: white; }
.update-banner[hidden] { display: none !important; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Toolbar-Zeile mit Label links und dezenter Text-Action rechts.
   Ersetzt die schwebende .row-buttons-Lösung darunter und schafft
   eine klare Hierarchie direkt am Textfeld. */
.field-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.field-head .field-label { margin-top: 0; }
.field-action {
  background: none; border: none; padding: 6px 4px; margin: -6px -4px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--joma-accent-strong); cursor: pointer;
  border-radius: 6px;
  transition: color 120ms ease, background 120ms ease;
}
.field-action:hover { color: var(--joma-accent-dark); }
.field-action:active { background: var(--joma-surface); }
.field-action:focus-visible { outline: 2px solid var(--joma-accent-strong); outline-offset: 2px; }
.field-action[hidden] { display: none; }

/* Caption direkt unter einem Eingabefeld. Sehr leise, kein Container,
   nur Icon plus Hinweistext. Eng am Feld, kein zweites UI-Element. */
.field-caption {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--joma-text-muted);
  line-height: 1.4;
}
.field-caption svg { color: var(--joma-text-muted); opacity: 0.7; flex-shrink: 0; }

/* Loading-State auf Buttons: Spinner-SVG vor dem Text, cursor:wait. */
.btn-primary.loading, .btn-secondary.loading, .btn-ghost.loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.85;
}
.btn-primary.loading::before,
.btn-secondary.loading::before,
.btn-ghost.loading::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Photo Upload */
.photo-uploader { display: flex; flex-direction: column; gap: 8px; }
.photo-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-buttons .btn-secondary { flex: 1; min-width: 140px; }
.photo-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--joma-border); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb .del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(15,20,25,0.8); color: white; font-size: 14px; cursor: pointer; line-height: 1; }

/* Chat */
.chat-row { display: flex; gap: 8px; align-items: stretch; }
.chat-row input { flex: 1; }
.chat-history { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.chat-msg { padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.chat-msg.user { background: var(--joma-surface); border: 1px solid var(--joma-border); align-self: flex-end; }
.chat-msg.ai { background: #E0F4F7; color: #2E5C66; align-self: flex-start; }

/* Mail-Vorschau als Card: kein <pre>, normale Typografie, Header mit Icon. */
.mail-preview {
  background: white;
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  margin-top: 6px;
}
.mail-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--joma-surface);
  border-bottom: 1px solid var(--joma-border);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--joma-text-muted);
}
.mail-preview-head svg { color: var(--joma-accent-strong); }
.mail-preview-body {
  padding: 14px 16px 16px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--joma-text);
  white-space: pre-wrap;
}

/* Detail: Meta-Card im Apple-Style. Drei Schriftgroessen, zwei Textfarben,
   ein einziger Farbakzent (Status-Punkt). Konsequent linksbuendig, eine
   Spalte. Keine Badge-Pills. */
.detail-meta-card {
  background: var(--joma-surface);
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  text-align: left;
}
.mc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.mc-title {
  font-size: 26px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--joma-text); margin: 0; line-height: 1.1;
}
.mc-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; color: var(--joma-text); white-space: nowrap;
}
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--joma-text-muted); flex-shrink: 0; }
.mc-status.is-ueberfaellig .mc-dot { background: var(--joma-danger); }
.mc-status.is-bezahlt    .mc-dot { background: var(--joma-success); }
.mc-status.is-verrechnet .mc-dot { background: var(--joma-accent-dark); }
.mc-status.is-entwurf    .mc-dot { background: var(--joma-text-muted); }
.mc-status.is-verworfen  .mc-dot { background: var(--joma-text-muted); }
.mc-status.is-verworfen  { text-decoration: line-through; color: var(--joma-text-muted); }
/* Gesendet wird durch einen leeren Ring vom verrechnet abgehoben, damit
   beide Status optisch unterscheidbar sind. */
.mc-status.is-gesendet   .mc-dot { background: transparent; border: 1.5px solid var(--joma-accent-dark); width: 9px; height: 9px; }
.mc-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-row { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.mc-row dt {
  font-size: 11px; font-weight: 500; margin: 0;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--joma-text-muted);
}
.mc-row dd {
  margin: 0; font-size: 15px; color: var(--joma-text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  overflow-wrap: anywhere; word-break: break-word;
}
.mc-hint { font-size: 15px; color: var(--joma-text-muted); }
/* "Ändern"-Button bewusst in muted statt accent-dark, damit der einzige
   Farbakzent in der Box der Status-Punkt bleibt. Unterstreichung markiert
   ihn weiterhin klar als interaktiv. */
.mc-edit {
  margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 12px;
  background: none; border: 0; cursor: pointer;
  font-size: 15px; color: var(--joma-text-muted);
  font-family: inherit; text-decoration: underline;
}
.mc-edit:hover, .mc-edit:focus-visible { color: var(--joma-text); }
/* Titel + Leistung als separater Beschreibungsblock unter der Meta-Card. */
.detail-beschreibung {
  background: var(--joma-surface);
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px;
}
.detail-beschreibung h4 { margin: 0; font-size: 11px; font-weight: 600; color: var(--joma-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.detail-beschreibung .db-titel { font-size: 17px; font-weight: 600; color: var(--joma-text); margin: 0; }
.detail-beschreibung .db-leistung { font-size: 14px; color: var(--joma-text); margin: 0; line-height: 1.55; }

/* Modal: Bottom-Sheet auf Mobile, zentriert auf Tablet. Apple-typischer
   Backdrop in dunklem semi-transparent, weiche grosse Radien oben. */
.modal {
  position: fixed; inset: 0;
  background: rgba(15, 20, 25, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 500; padding: 0;
  animation: modal-backdrop-in 0.15s ease;
}
.modal[hidden] { display: none; }
.modal-card {
  background: white;
  width: 100%;
  max-width: 480px;
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(20px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 92vh;
  overflow-y: auto;
  animation: modal-card-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: -0.01em; color: var(--joma-text); }
@media (min-width: 480px) { .modal { align-items: center; } .modal-card { border-radius: 20px; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-card-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Floating Home-Button (FAB) */
.fab-home { position: fixed; right: 18px; bottom: calc(18px + var(--safe-bottom)); width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--joma-border); background: white; box-shadow: 0 6px 18px rgba(15, 20, 25, 0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--joma-accent-dark); z-index: 400; transition: transform 0.08s ease, box-shadow 0.2s ease; }
.fab-home:hover { box-shadow: 0 8px 22px rgba(15, 20, 25, 0.22); }
.fab-home:active { transform: scale(0.94); }
.fab-home[hidden] { display: none !important; }
@media (min-width: 768px) {
  .fab-home { right: calc(50% - 240px + 18px); }
}

/* Bezahlt-Markieren: Haupt-Aktion bei offener Rechnung, gruener Akzent.
   Geometrie kommt aus dem gemeinsamen Button-Grundgeruest oben. */
.btn-paid {
  width: 100%;
  color: white;
  background: var(--joma-success);
}
.btn-paid:active { background: #25753A; }
@media (hover: hover) {
  .btn-paid:hover { background: #25753A; }
}

/* Danger Button: voller Breite, dezent rot, klar als Loesch-Aktion erkennbar. */
.btn-danger {
  width: 100%;
  background: white;
  color: var(--joma-danger);
  border-color: #F0C8C6;
  margin-top: 18px;
}
.btn-danger:active { background: #F8E8E8; }
@media (hover: hover) {
  .btn-danger:hover { background: #FCF4F4; }
}

/* Neukunden-Formular */
.row-2col { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }

/* Anrede-Group: Segmented-Control-Sprache, passt zu allen anderen Tab-Bars
   in der App. Aktiver Zustand mit weisser Pille und Joma-Akzent-Text. */
.anrede-group {
  display: flex;
  background: var(--joma-surface);
  border: 1px solid var(--joma-border);
  border-radius: var(--radius-segment);
  padding: 4px;
  gap: 4px;
  margin: 4px 0 6px;
}
.anrede-option { flex: 1; position: relative; cursor: pointer; }
.anrede-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.anrede-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  min-height: 40px;
  border-radius: var(--radius-segment-inner);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--joma-text-muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: -0.005em;
}
.anrede-option input:checked + span {
  background: white;
  color: var(--joma-accent-dark);
  box-shadow: var(--shadow-segment);
}
.anrede-option input:focus-visible + span { outline: 2px solid var(--joma-accent-strong); outline-offset: 2px; }

@media (min-width: 768px) {
  .screen { max-width: 480px; margin: 0 auto; border-left: 1px solid var(--joma-border); border-right: 1px solid var(--joma-border); }
}