:root {
  --bg: #f3f5f0;
  --sidebar-bg: linear-gradient(180deg, #142219 0%, #1c3324 100%);
  --sidebar-text: #d3dccf;
  --accent: #1d6b42;
  --accent-hover: #155232;
  --accent-grad: linear-gradient(135deg, #1d6b42 0%, #3a9c64 100%);
  --bronze: #b08d57;
  --bronze-dark: #8a6d3f;
  --bronze-light: #e3c793;
  --bronze-grad: linear-gradient(135deg, #9c7a45 0%, #c9a668 100%);
  --card-bg: #ffffff;
  --border: #e4e1d6;
  --text: #23291f;
  --text-muted: #6b6a5c;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --yellow: #ca8a04;
  /* Abstufungsscala statt verstreuter Einzelwerte – hält Abstände im ganzen
     Redesign konsistent, ohne dass jede Stelle einzeln nachgezogen werden muss. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 28px; --space-7: 40px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(30,30,20,0.04), 0 8px 24px rgba(30,30,20,0.07);
  --shadow-lg: 0 12px 32px rgba(20,26,16,0.10), 0 2px 6px rgba(20,26,16,0.05);
  --ease: cubic-bezier(0.32,0.72,0,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(155deg, #eef2ea 0%, #f5f1e6 55%, #eef6ef 100%) fixed;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(35,41,31,0.18); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(35,41,31,0.3); background-clip: content-box; }

#app { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
#sidebar {
  width: 232px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 14px; left: 14px; bottom: 14px;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(10,16,11,0.32);
  z-index: 10;
}
.logo-mit-icon { display: flex; align-items: center; gap: 8px; }
.logo-icon { height: 26px; width: auto; display: block; }
.logo-wortmarke { height: 15px; width: auto; display: block; }
.logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
}
.logo-row .logo { padding: 0; }
#sidebar-firmenlogo {
  max-height: 30px;
  max-width: 84px;
  border-radius: 6px;
  background: #fff;
  padding: 3px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#sidebar-firmenlogo.hidden { display: none; }
/* Das Menü darf scrollen, die Fusszeile nicht weggeschoben werden.
   Ohne min-height:0 wächst ein Flex-Element über seinen Behälter hinaus –
   dann steht die Versionsnummer unterhalb des sichtbaren Bereichs, und man
   kommt nicht mehr an «Was ist neu». Genau das ist passiert, als die
   französischen Beschriftungen mehr Platz brauchten. */
#sidebar nav {
  display: flex; flex-direction: column; gap: 2px; padding: 0 10px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin;
}
#sidebar nav::-webkit-scrollbar { width: 6px; }
#sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 99px; }
.nav-btn {
  background: none;
  border: none;
  color: var(--sidebar-text);
  text-align: left;
  padding: 10px 13px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s var(--ease), color 0.15s;
}
.nav-btn:hover { background: rgba(255,255,255,0.08); transform: translateX(3px); }
.nav-btn:active { transform: translateX(3px) scale(0.97); }
.nav-btn.active { background: var(--accent-grad); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(29,107,66,0.38), inset 0 1px 0 rgba(255,255,255,0.12); }
.sidebar-footer { padding: 16px 18px 14px; font-size: 11px; opacity: 0.5; flex: 0 0 auto; }
/* Die Versionsnummer ist der Einstieg zu «Was ist neu» – sie darf nie
   abgeschnitten werden, egal wie lang die Beschriftungen daneben sind. */
.app-version { flex-shrink: 0; }

#main {
  margin-left: 262px;
  flex: 1;
  padding: 32px 40px;
  max-width: 1240px;
}

/* ---------- Generic ---------- */
html { scroll-behavior: smooth; }
::selection { background: rgba(29,107,66,0.22); }
h1 {
  font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
  font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 5px;
}
#main h1 { position: relative; padding-bottom: 12px; }
#main h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #1d6b42, #b08d57);
}
.subtitle { color: var(--text-muted); font-size: 14.5px; margin-bottom: 26px; }
h2.section { display: flex; align-items: center; gap: 8px; }
h2.section::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 3px;
  background: linear-gradient(135deg, #1d6b42, #b08d57);
  flex: 0 0 auto;
}
.view-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

.btn {
  background: var(--accent-grad);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s ease, box-shadow 0.15s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.96); }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: #f8faf8; border-color: #d8d5c8; }
.btn.danger { background: #fff; color: var(--red); border: 1px solid var(--border); }
.btn.danger:hover { background: #fef2f2; }
.btn.small { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn.green { background: var(--green); }
.btn.green:hover { background: #15803d; }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lg); }

.onboarding {
  background: linear-gradient(135deg, #16261c 0%, #1f4029 60%, #2f6b45 130%);
  color: #e8eef7;
  border-radius: 16px;
  padding: 34px 34px 28px;
  margin-bottom: 24px;
}
.onboarding h2 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.onboarding p { max-width: 560px; line-height: 1.6; margin-bottom: 18px; opacity: 0.9; }
.onboarding .steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 14px; }
.onboarding .steps .done { opacity: 0.55; text-decoration: line-through; }
.onboarding .btn + .btn { margin-left: 10px; }

/* ---------- Hinweis auf aktive Beispieldaten ---------- */
.demo-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fdf6e6;
  border: 1px solid #e6d3a3;
  border-left: 4px solid #c9a668;
  color: #5d4a1f;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13.5px;
}

/* ---------- Kurzanleitung (Tour) ---------- */
#tour { position: fixed; inset: 0; z-index: 4000; }
#tour.hidden { display: none; }
/* Der Spot ist ein Loch in der Abdunklung: der riesige Schatten verdunkelt
   alles ausserhalb, innerhalb bleibt das Element normal sichtbar und klickbar. */
#tour-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8, 16, 12, 0.72);
  border: 2px solid var(--accent, #2f8f5b);
  pointer-events: none;
  transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
}
/* Ohne Ziel gibt es kein Loch – dann dunkelt die Box selbst den Hintergrund ab. */
#tour-spot[style*="display: none"] + #tour-box { box-shadow: 0 0 0 9999px rgba(8, 16, 12, 0.72), var(--shadow); }
#tour-box {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  z-index: 4001;
}
#tour-box h3 { font-size: 17px; margin-bottom: 8px; }
#tour-box p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-bottom: 14px; }
.tour-zaehler { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.tour-punkte { display: flex; gap: 5px; margin-bottom: 14px; }
.tour-punkte span { width: 6px; height: 6px; border-radius: 50%; background: var(--border, #d8dee5); }
.tour-punkte span.aktiv { background: var(--accent, #2f8f5b); transform: scale(1.3); }
.tour-aktionen { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  #tour-spot { transition: none; }
}

/* ---------- Ziele (Quartal & Geschäftsjahr) ---------- */
.ziel-erinnerung {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: #eef6f1; border: 1px solid #bcdcc9; border-left: 4px solid var(--accent, #2f8f5b);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; font-size: 13.5px;
}
.ziel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ziel-karte {
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e6ea);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  border-top: 3px solid var(--border, #e2e6ea);
}
.ziel-karte.gut { border-top-color: #2f8f5b; }
.ziel-karte.warn { border-top-color: #d98324; }
.ziel-karte.offen { border-top-color: #c9a668; }
.ziel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ziel-titel { font-weight: 700; font-size: 15px; }
.ziel-zahlen { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 8px; }
.ziel-zahlen strong { font-size: 24px; font-weight: 800; }
.ziel-balken {
  position: relative; height: 10px; border-radius: 999px;
  background: #eceff2; overflow: visible;
}
.ziel-fuellung {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2f8f5b 0%, #46b478 100%);
  transition: width 0.4s ease;
}
/* Markiert, wo man zeitanteilig stehen müsste */
.ziel-marke {
  position: absolute; top: -4px; width: 2px; height: 18px;
  background: #6b7785; border-radius: 1px; transform: translateX(-1px);
}
.ziel-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ziel-notiz { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Support-Zugriff: unübersehbarer Balken ---------- */
#support-balken {
  position: fixed; top: 0; left: 0; right: 0; z-index: 4500;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: repeating-linear-gradient(135deg, #7c2d12 0 14px, #9a3412 14px 28px);
  color: #fff; font-size: 13px; padding: 9px 16px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.3);
}
#support-balken strong { color: #fde68a; }
/* Inhalt nach unten schieben, damit der Balken nichts verdeckt */
body.support-aktiv #app, body.support-aktiv #sidebar { padding-top: 40px; }
@media (max-width: 720px) {
  #support-balken { font-size: 12px; padding: 8px 12px; }
}

/* ---------- Handlungsbedarf: grüner Punkt im Menü ---------- */
.nav-btn { position: relative; }
.nav-btn.hat-bedarf::after {
  content: "";
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
}
.bottom-nav-btn { position: relative; }
.bottom-nav-btn.hat-bedarf::after {
  content: "";
  position: absolute; top: 4px; right: calc(50% - 16px);
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}

/* ---------- Benachrichtigungen nach dem Login ---------- */
/* Gestapelt und dezent; beim Überfahren fächern die Karten auf. */
#meldungen {
  position: fixed; top: 18px; right: 18px; z-index: 3500;
  width: 320px; max-width: calc(100vw - 24px);
  background: rgba(248, 250, 249, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 18px; padding: 10px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.18);
}
.mld-karte {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e6eaee);
  border-left: 3px solid #94a3b8;
  border-radius: 11px; padding: 9px 13px; cursor: pointer;
  margin-top: 4px; transform: scaleX(calc(1 - var(--i) * 0.05));
  position: relative;
  /* Eingeklappt bleibt nur die oberste Karte lesbar, die übrigen stehen als
     schmale Streifen darunter. Ohne diese Klemmung schaut bei mehrzeiligen
     Karten Text aus dem Stapel heraus. */
  max-height: 30px; overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
              max-height 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.mld-karte:first-child { margin-top: 0; max-height: 120px; }
#meldungen:hover .mld-karte { max-height: 120px; transform: scaleX(1); }
.mld-karte.warn { border-left-color: #d98324; }
.mld-karte.gut { border-left-color: #2f8f5b; }
.mld-karte.info { border-left-color: #3b82f6; }
#meldungen:hover .mld-karte { margin-top: 6px; transform: scaleX(1); }
#meldungen:hover .mld-karte:first-child { margin-top: 0; }
.mld-karte:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.mld-titel { font-size: 13px; font-weight: 650; }
.mld-text { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.mld-fuss { display: flex; align-items: center; gap: 8px; padding: 10px 6px 2px; }
.mld-zahl {
  width: 20px; height: 20px; border-radius: 50%; background: #94a3b8; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.mld-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); flex: 1; }
.mld-weg {
  border: none; background: transparent; cursor: pointer; font-size: 13px;
  color: var(--text-muted); width: 24px; height: 24px; border-radius: 6px;
}
.mld-weg:hover { background: rgba(0,0,0,0.07); color: var(--text); }
@media (max-width: 720px) {
  #meldungen { top: 62px; right: 10px; left: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mld-karte { transition: none; }
}

/* Es gibt bewusst keine globale .hidden-Regel (das Projekt nutzt ID-Regeln
   wie #toast.hidden mit eigenem Verhalten). Für die Elemente, die per
   Klasse aus- und eingeblendet werden, hier explizit: */
.nav-btn.hidden,
.bottom-nav-btn.hidden,
.field.hidden,
#zugang-anfrage-felder.hidden,
#zugang-konto-felder.hidden,
#zugang-hinweis.hidden,
#checkliste.hidden,
#meldungen.hidden,
#auf-feld-stunden.hidden,
#auf-feld-material.hidden { display: none; }

/* ---------- App-Teaser (Coming soon) ---------- */
.app-inhalt {
  display: flex; align-items: center; justify-content: center; gap: 56px;
  flex-wrap: wrap; max-width: 980px; margin: 0 auto;
}
.app-text { flex: 1 1 340px; max-width: 460px; }
.app-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #0f2418;
  background: linear-gradient(135deg, #e3c793 0%, #6cc292 100%);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.app-text h2 { text-align: left !important; margin-bottom: 12px; }
.app-text p { color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.app-liste { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.app-liste li { color: var(--text); font-size: 14px; padding-left: 24px; position: relative; }
.app-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Handy-Mockup: nur CSS, kein Bild und kein Video (Content-Security-Policy) */
.app-mockup { flex: 0 0 auto; perspective: 1000px; }
.app-rahmen {
  position: relative; width: 232px; height: 464px;
  background: #0d1512; border-radius: 34px;
  box-shadow: inset 0 0 0 2px #3b4a42, inset 0 0 0 7px #050a08,
              0 30px 60px -12px rgba(0,0,0,0.75);
  transform: rotateY(-9deg) rotateX(3deg);
}
.app-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 20px; background: #050a08; border-radius: 999px; z-index: 2;
}
.app-schirm {
  position: absolute; inset: 9px; border-radius: 27px; overflow: hidden;
  background: linear-gradient(170deg, #10251b 0%, #0a1712 100%);
  padding: 42px 16px 16px; display: flex; flex-direction: column; gap: 9px;
}
.app-kopf { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.app-klein { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(219,229,241,0.5); font-weight: 700; }
.app-titel { font-size: 15px; font-weight: 700; color: #fff; }
.app-ring { position: relative; width: 116px; height: 116px; margin: 2px auto 8px; }
.app-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.app-ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 10; }
.app-ring-fg {
  fill: none; stroke: #6cc292; stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 289; stroke-dashoffset: 95;
}
.app-ring-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.app-ring-text strong { font-size: 21px; font-weight: 800; color: #fff; }
.app-ring-text span { font-size: 8.5px; color: rgba(219,229,241,0.55); text-transform: uppercase; letter-spacing: 0.08em; }
.app-zeile {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px; padding: 8px 11px; font-size: 11.5px; color: rgba(219,229,241,0.8);
}
.app-zeile strong { color: #fff; font-size: 12px; }
.app-zeile.gut { border-color: rgba(108,194,146,0.35); }
.app-zeile.gut strong { color: #6cc292; }
.app-balken {
  width: 96px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.22);
  margin: auto auto 2px;
}
@media (max-width: 720px) {
  .app-inhalt { gap: 32px; }
  .app-text h2 { text-align: center !important; }
  .app-rahmen { transform: none; }
}

/* ---------- Ablauf-Grafik auf der Startseite ---------- */
.fluss-bild { max-width: 860px; margin: 26px auto 0; }
.fluss-bild svg { width: 100%; height: auto; overflow: visible; }
.fl-pfad { fill: none; stroke: rgba(176, 141, 87, 0.4); stroke-width: 1.5; stroke-dasharray: 5 6; }
.fl-knoten rect {
  fill: #fff;
  stroke: rgba(176, 141, 87, 0.5);
  stroke-width: 1;
}
.fl-symbol { font-size: 17px; }
.fl-label { font-size: 12.5px; fill: #23291f; font-weight: 600; }
.fl-mitte circle {
  fill: rgba(29, 107, 66, 0.14);
  stroke: #1d6b42; stroke-width: 1.6;
}
.fl-mitte-symbol { font-size: 20px; }
.fl-mitte-label { font-size: 12.5px; fill: #23291f; font-weight: 700; }
.fluss-fuss { text-align: center; color: var(--text-muted); font-size: 13.5px; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .fl-punkt { display: none; }
}

/* ---------- Ansicht pro Kunde einstellen ---------- */
.layout-liste { display: flex; flex-direction: column; gap: 4px; }
.layout-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border, #e2e6ea); border-radius: 9px;
  background: var(--card-bg, #fff); font-size: 13.5px;
}
.layout-zeile.aus { opacity: 0.55; }
.layout-zeile label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.layout-pfeile { display: flex; gap: 4px; }
.layout-pfeile .btn[disabled] { opacity: 0.35; cursor: default; }
.layout-blocke { display: flex; flex-direction: column; gap: 8px; }
.layout-block { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

/* ---------- Leistungspakete & Prognose ---------- */
.paket-summe {
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: #f4f7f5; border: 1px solid #dbe5de; font-size: 13px;
}
.paket-marge { margin-top: 8px; font-size: 13px; }
.paket-marge .gut { color: #2f8f5b; }
.paket-marge .rot { color: #c0392b; }
.prognose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.prognose-feld { display: flex; flex-direction: column; gap: 3px; }
.prognose-feld span.muted { font-size: 11.5px; }
.prognose-feld strong { font-size: 22px; font-weight: 800; }
.prognose-feld strong.gut { color: #2f8f5b; }
.prognose-feld strong.rot { color: #c0392b; }
.prognose-warnung {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: 13px;
  background: #fdeceb; border: 1px solid #f0c2bd; color: #8a2f24;
}

/* Richtofferte-Hinweis auf dem gedruckten Dokument – rechtlich relevant,
   darum sichtbar abgesetzt statt als Fussnote. */
.print-note.print-wichtig {
  border-left: 2.5pt solid #000;
  padding-left: 2.5mm;
  font-weight: 600;
}

/* ---------- Dokument-Layout im Stil der Vorlage ---------- */
.print-abschnitt { margin-top: 6mm; }
.print-abschnitt h2 {
  font-size: 11pt; font-weight: 700; margin-bottom: 1.5mm; color: #000;
}
.print-gruppe { margin-top: 3mm; }
.print-gruppe h3 { font-size: 10pt; font-weight: 700; margin-bottom: 1mm; color: #000; }
.print-leistungen { list-style: none; margin: 0; padding: 0; }
.print-leistungen li { font-size: 9.5pt; line-height: 1.55; padding-left: 4mm; position: relative; }
.print-leistungen li::before { content: "•"; position: absolute; left: 1mm; }
/* Zebra-Streifen wie in der Vorlage – erleichtert das Lesen langer Listen */
table.print-pos tbody tr:nth-child(even) { background: #f2f2f2; }
table.print-pos td.pos-nr { text-align: center; color: #333; }
.pos-einheit { color: #555; font-size: 8.5pt; }

.print-schluss {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 10mm; margin-top: 12mm;
}
.print-gruss { font-size: 10pt; }
.print-unterzeichner { font-weight: 700; margin-top: 6mm; }
.print-funktion { font-size: 8.5pt; color: #444; }
.print-signatur { text-align: left; min-width: 60mm; }
.print-ortdatum { font-size: 9.5pt; margin-bottom: 12mm; }
.print-signaturlinie { border-bottom: 0.4pt solid #000; width: 55mm; }
.print-signaturname { font-style: italic; font-size: 9.5pt; margin-top: 1mm; }

.print-fuss {
  display: flex; justify-content: space-between; gap: 10mm;
  margin-top: 10mm; padding-top: 2mm;
  font-size: 8pt; color: #444; line-height: 1.5;
}
.print-fuss-kontakt { text-align: right; }

/* ---------- Terminkalender ---------- */
.kal-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kal-kopf strong { flex: 1; font-size: 16px; text-transform: capitalize; }
.kal-wochentage {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 700; margin-bottom: 4px;
}
.kal-wochentage div { text-align: center; padding: 4px 0; }
.kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-zelle {
  min-height: 92px; border: 1px solid var(--border, #e2e6ea); border-radius: 8px;
  padding: 5px 6px; cursor: pointer; background: var(--card-bg, #fff);
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.kal-zelle:hover { border-color: #2f8f5b; }
.kal-zelle.leer { border: none; background: transparent; cursor: default; }
.kal-zelle.heute { border-color: #2f8f5b; box-shadow: inset 0 0 0 1px #2f8f5b; }
.kal-tag { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.kal-zelle.heute .kal-tag { color: #2f8f5b; }
.kal-termin {
  font-size: 10.5px; line-height: 1.3; padding: 3px 5px; border-radius: 5px;
  background: #eef6f1; border-left: 2px solid #2f8f5b; color: #1d4d3a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal-termin.angefragt { background: #fdf3e6; border-left-color: #d98324; color: #7a4a12; }
.kal-termin.erledigt { background: #f1f3f5; border-left-color: #9aa5b1; color: #5b6670; }
.kal-zeit { font-weight: 700; }
.kal-mehr { font-size: 10px; color: var(--text-muted); }
.termin-anfrage {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 13.5px;
}
@media (max-width: 720px) {
  .kal-zelle { min-height: 62px; }
  .kal-termin { font-size: 9px; }
}

/* ---------- Interner Block im Dokument-Editor ---------- */
/* Deutlich abgesetzt, damit auf einen Blick klar ist: Das sieht der Kunde nie. */
.intern-block {
  background: #f4f6f8; border: 1px dashed #c3ccd6; border-radius: 11px;
  padding: 14px 16px; margin: 16px 0;
}
.intern-kopf {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 700; margin-bottom: 10px;
}

/* ---------- Version & Änderungsprotokoll ---------- */
.version-block { margin-bottom: 22px; }
.version-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.version-nummer {
  background: linear-gradient(135deg, #2f8f5b 0%, #46b478 100%); color: #fff;
  font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px;
}
.version-name { font-size: 17px; font-weight: 700; }
.version-zusammenfassung { font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
.version-liste { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.version-liste li { font-size: 13.5px; line-height: 1.55; padding-left: 22px; position: relative; color: var(--text-muted); }
.version-liste li::before { content: "✦"; position: absolute; left: 0; color: #c9a668; }
.mld-karte.neu { border-left: 3px solid #c9a668; }
.app-version { font-size: 11px; color: rgba(255,255,255,0.35); text-align: center; margin-top: 8px; cursor: pointer; }
.app-version:hover { color: rgba(255,255,255,0.7); }

/* Rabattzeile in den Totalen */
.rabatt-zeile span { color: #c0392b; font-weight: 600; }

/* ---------- Margenrechner im Projekt ---------- */
.marge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.marge-spalte {
  border: 1px solid var(--border, #e2e6ea); border-radius: 11px; padding: 14px;
  border-top: 3px solid var(--border, #e2e6ea);
}
.marge-spalte.geplant { border-top-color: #94a3b8; }
.marge-spalte.effektiv { border-top-color: #2f8f5b; }
.marge-spalte.prognose { border-top-color: #c9a668; }
.marge-spalte.leer { opacity: 0.7; }
.marge-titel { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.marge-wert { font-size: 21px; font-weight: 800; }
.marge-prozent { font-size: 13px; font-weight: 650; margin-top: 1px; }
.marge-wert.gut, .marge-prozent.gut { color: #2f8f5b; }
.marge-wert.rot, .marge-prozent.rot { color: #c0392b; }
.marge-unter { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin-top: 7px; }
.marge-hinweis {
  margin-top: 14px; padding: 10px 13px; border-radius: 9px; font-size: 13px;
  background: #eef6f1; border: 1px solid #bcdcc9;
}
.marge-hinweis.rot { background: #fdeceb; border-color: #f0c2bd; color: #8a2f24; }
.marge-grundlage { font-size: 11.5px; opacity: 0.75; margin-top: 5px; }

/* ---------- Projekt als eigene Seite ---------- */
.projekt-kopf { margin-bottom: 20px; }
.projekt-kopf .btn { margin-bottom: 12px; }
.projekt-titelzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.projekt-titelzeile h1 { margin: 0; }

/* ---------- Projekt-Karte im Auftrag ---------- */
.projekt-karte {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e6ea);
  border-left: 4px solid #94a3b8;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.projekt-karte.gut { border-left-color: #2f8f5b; }
.projekt-karte.warn { border-left-color: #d98324; }
.projekt-karte.rot { border-left-color: #c0392b; }
.projekt-zahlen { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 14px; }
.projekt-zahlen div { display: flex; flex-direction: column; gap: 2px; }
.projekt-zahlen span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.projekt-zahlen strong { font-size: 21px; font-weight: 800; }
.projekt-zahlen strong.gut { color: #2f8f5b; }
.projekt-zahlen strong.rot { color: #c0392b; }
.projekt-balken { position: relative; height: 10px; border-radius: 999px; background: #eceff2; }
.projekt-fuellung { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f8f5b 0%, #46b478 100%); transition: width 0.4s ease; }
.projekt-karte.warn .projekt-fuellung { background: linear-gradient(90deg, #d98324 0%, #e8a552 100%); }
.projekt-karte.rot .projekt-fuellung { background: linear-gradient(90deg, #c0392b 0%, #e05c4c 100%); }
/* Zeigt, wie weit das Projekt laut Angabe fertig ist – im Vergleich zum
   verbrauchten Budget sieht man sofort, ob es aus dem Ruder läuft. */
.projekt-marke { position: absolute; top: -4px; width: 2px; height: 18px; background: #334155; border-radius: 1px; transform: translateX(-1px); }
.projekt-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; }
.projekt-prognose {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.55;
  background: #eef6f1; border: 1px solid #bcdcc9;
}
.projekt-prognose.rot { background: #fdeceb; border-color: #f0c2bd; }
.projekt-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Begrüssungs-Banner auf der Übersicht ---------- */
.gruss-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
  color: #fff;
  min-height: 96px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-lg), 0 1px 0 rgba(255,255,255,0.08) inset;
}
/* Animierter Verlauf – Farben je Tageszeit. Bewusst CSS statt Video:
   Die Content-Security-Policy lässt keine fremden Medien zu. */
.gruss-verlauf {
  position: absolute; inset: 0;
  background-size: 220% 220%;
  animation: gruss-drift 22s ease-in-out infinite alternate;
}
.gruss-banner.morgen .gruss-verlauf { background-image: linear-gradient(115deg, #1d4d3a 0%, #3f7a52 38%, #c9a668 78%, #e8c98a 100%); }
.gruss-banner.mittag .gruss-verlauf { background-image: linear-gradient(115deg, #14503a 0%, #2f8f5b 45%, #6cc292 80%, #cfe6d5 100%); }
.gruss-banner.nachmittag .gruss-verlauf { background-image: linear-gradient(115deg, #16402f 0%, #2f7a55 42%, #9bbf7a 82%, #dcd2a0 100%); }
.gruss-banner.abend .gruss-verlauf { background-image: linear-gradient(115deg, #10261d 0%, #2b4a3a 40%, #a8763f 80%, #d19a54 100%); }
.gruss-banner.nacht .gruss-verlauf { background-image: linear-gradient(115deg, #0a1712 0%, #16302a 45%, #24413c 78%, #38534a 100%); }
@keyframes gruss-drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.gruss-inhalt {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  width: 100%; padding: 20px 26px;
}
.gruss-links { display: flex; align-items: center; gap: 16px; }
/* Heller Kasten hinter dem Logo: Kundenlogos sind meist für weissen
   Hintergrund gemacht und würden auf dem dunklen Verlauf untergehen. */
.gruss-logo {
  flex: 0 0 auto; background: rgba(255,255,255,0.92); border-radius: 10px;
  padding: 7px 10px; display: flex; align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.gruss-logo img { max-height: 38px; max-width: 130px; object-fit: contain; display: block; }
.gruss-text {
  font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
  font-size: 25px; font-weight: 700; letter-spacing: -0.01em;
}
.gruss-text strong { font-weight: 700; }
.gruss-datum { font-size: 13.5px; opacity: 0.82; margin-top: 5px; }
.gruss-uhr {
  font-size: 32px; font-weight: 300; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.gruss-sek { font-size: 17px; opacity: 0.6; }
@media (max-width: 620px) {
  .gruss-text { font-size: 20px; }
  .gruss-uhr { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .gruss-verlauf { animation: none; }
}

/* Kleines Schliesskreuz für ausblendbare Hinweisblöcke */
.block-weg {
  border: none; background: rgba(0,0,0,0.06); cursor: pointer;
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 24px;
  font-size: 12px; line-height: 1; color: inherit; opacity: 0.65;
}
.block-weg:hover { opacity: 1; background: rgba(0,0,0,0.12); }
.onboarding { position: relative; }
.onboarding .block-weg {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.15); color: #fff;
}
.onboarding .block-weg:hover { background: rgba(255,255,255,0.28); }

/* ---------- Cashflow-Diagramm mit Zeitraum-Wahl ---------- */
.cf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cf-zeitraum { display: flex; gap: 4px; background: #eef1f4; padding: 3px; border-radius: 9px; }
.cf-zeitraum button {
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: 12.5px; padding: 6px 12px; border-radius: 7px; color: var(--text-muted);
}
.cf-zeitraum button:hover { color: var(--text); }
.cf-zeitraum button.aktiv { background: var(--card-bg, #fff); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.cf-summen { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 10px; }
.cf-summen div { display: flex; flex-direction: column; gap: 2px; }
.cf-summen span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.cf-summen strong { font-size: 19px; font-weight: 800; }

/* ---------- Einrichtungs-Checkliste ---------- */
/* Sitzt unten rechts über dem Aktionsknopf, damit sich beide nicht überdecken. */
#checkliste {
  position: fixed; right: 22px; bottom: 96px; z-index: 900;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  overflow: hidden;
}
#checkliste.zu { width: auto; border: none; background: transparent; box-shadow: none; }
.cl-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.cl-titel { font-weight: 700; font-size: 15px; }
.cl-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cl-kopf-knoepfe { display: flex; gap: 4px; }
.cl-icon {
  border: none; background: transparent; cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px;
  color: var(--text-muted); font-size: 14px; line-height: 1;
}
.cl-icon:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.cl-balken { height: 4px; background: #eceff2; margin: 0 16px; border-radius: 999px; }
.cl-fuellung { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f8f5b 0%, #46b478 100%); transition: width 0.35s ease; }
.cl-liste { list-style: none; margin: 12px 0 14px; padding: 0 10px; max-height: 46vh; overflow-y: auto; }
.cl-liste li { margin-bottom: 4px; }
.cl-liste button {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 9px 10px; cursor: pointer; font: inherit; color: inherit;
}
.cl-liste button:hover:not(:disabled) { background: rgba(47,143,91,0.07); border-color: rgba(47,143,91,0.22); }
.cl-liste button:disabled { cursor: default; }
.cl-haken {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--border, #cfd6dd);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.cl-liste li.erledigt .cl-haken { background: #2f8f5b; border-color: #2f8f5b; }
.cl-schritt-titel { display: block; font-size: 13.5px; font-weight: 600; }
.cl-liste li.erledigt .cl-schritt-titel { color: var(--text-muted); text-decoration: line-through; font-weight: 500; }
.cl-schritt-text { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }
.cl-fuss { padding: 0 16px 14px; font-size: 12px; }
.cl-fuss .link { font-size: 12px; }
.cl-pille {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e6ea);
  border-radius: 999px; padding: 9px 16px 9px 9px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
}
.cl-pille:hover { border-color: #2f8f5b; }
.cl-ring {
  background: #2f8f5b; color: #fff; border-radius: 999px;
  padding: 3px 9px; font-size: 12px; font-weight: 700;
}
@media (max-width: 720px) {
  #checkliste { right: 12px; left: 12px; bottom: 84px; width: auto; }
}

/* ---------- Ladeanzeige ---------- */
/* 3x3-Raster, das wellenförmig aufleuchtet. Farben bewusst im Grün-Gold
   der Marke statt im Cyan der Vorlage. */
.tp-loader {
  --zelle: 14px;
  display: grid;
  grid-template-columns: repeat(3, var(--zelle));
  gap: 3px;
}
.tp-loader i {
  display: block; width: var(--zelle); height: var(--zelle);
  border-radius: 3px; background-color: transparent;
  animation: tp-welle 1.5s ease infinite;
}
.tp-loader i:nth-child(1) { --farbe: #1d6b42; animation-delay: 0ms; }
.tp-loader i:nth-child(2) { --farbe: #2f8f5b; animation-delay: 100ms; }
.tp-loader i:nth-child(3) { --farbe: #46b478; animation-delay: 200ms; }
.tp-loader i:nth-child(4) { --farbe: #2f8f5b; animation-delay: 100ms; }
.tp-loader i:nth-child(5) { --farbe: #46b478; animation-delay: 200ms; }
.tp-loader i:nth-child(6) { --farbe: #6cc292; animation-delay: 200ms; }
.tp-loader i:nth-child(7) { --farbe: #a9b98c; animation-delay: 300ms; }
.tp-loader i:nth-child(8) { --farbe: #c9a668; animation-delay: 300ms; }
.tp-loader i:nth-child(9) { --farbe: #e3c793; animation-delay: 400ms; }
@keyframes tp-welle {
  0%   { background-color: transparent; }
  30%  { background-color: var(--farbe); }
  60%  { background-color: transparent; }
  100% { background-color: transparent; }
}
#lade-schicht {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(8, 16, 12, 0.55);
  backdrop-filter: blur(2px);
}
#lade-schicht.hidden { display: none; }
#lade-schicht .lade-text { color: #e8eef7; font-size: 13.5px; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
  .tp-loader i { animation-duration: 3s; }
}

/* ---------- Empfehlungsprogramm auf der Startseite ---------- */
.empf-balken { max-width: 1080px; margin: 26px auto 0; padding: 0 10px; }
.empf-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(47,143,91,0.16) 0%, rgba(201,166,104,0.14) 100%);
  border: 1px solid rgba(201,166,104,0.32);
  border-radius: 16px;
  padding: 20px 24px;
}
.empf-titel { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.empf-text p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); max-width: 620px; margin: 0; }
.empf-btn { white-space: nowrap; }

/* ---------- Partner & Referenzen (nur wenn wirklich vorhanden) ---------- */
.partner-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 42px;
  margin-top: 22px;
}
.partner-eintrag { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.75; transition: opacity 0.2s ease; }
.partner-eintrag:hover { opacity: 1; }
.partner-eintrag img { max-height: 34px; max-width: 150px; object-fit: contain; }
.partner-name { font-size: 15px; font-weight: 700; color: var(--text); }
.partner-ort { font-size: 11.5px; color: var(--text-muted); }

/* ---------- Tables ---------- */
table.list { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.list th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 12px 16px;
  background: #f7f6f0;
  border-bottom: 1px solid var(--border);
}
table.list td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr { cursor: pointer; transition: background 0.12s ease; }
table.list tbody tr:hover { background: #f2f7f3; }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty-state {
  padding: 44px 32px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: linear-gradient(160deg, #fff 60%, #faf7ee 100%);
  border: 1.5px dashed rgba(176,141,87,0.4);
  border-radius: var(--radius);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.grau { background: #f1f5f9; color: #475569; }
.badge.blau { background: linear-gradient(135deg, #ecdfc4, #f7f0df); color: #8a6d3f; }
.badge.gruen { background: linear-gradient(135deg, #dcfce7, #f0fdf4); color: #15803d; }
.badge.rot { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: #b91c1c; }
.badge.orange { background: linear-gradient(135deg, #ffedd5, #fff7ed); color: #c2410c; }

/* Bankabgleich: bereits verbuchte Posten bleiben sichtbar, treten aber
   zurück – man soll sehen, dass sie erkannt wurden, ohne sie zu suchen. */
/* Unterschriftsfeld im Kundenbereich. Bewusst gross und mit Linie – auf dem
   Handy soll man mit dem Finger bequem unterschreiben können. */
.sig-feld {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.sig-feld canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
.sig-linie {
  position: absolute; left: 8%; right: 8%; bottom: 42px;
  border-bottom: 1px dashed #cbd5e1; pointer-events: none;
}
.sig-weg {
  position: absolute; top: 8px; right: 8px;
  padding: 5px 10px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 7px;
  background: #f8fafc; color: #475569; cursor: pointer;
}
.sig-weg:hover { background: #eef2f7; }

/* Unterschrift auf dem gedruckten Dokument */
.doc-unterschrift { margin-top: 6mm; }
.doc-unterschrift img { max-height: 18mm; max-width: 60mm; display: block; }
/* Hinterlegte Unterschrift des Absenders über dem Namen */
.print-unterschriftbild { max-height: 14mm; max-width: 50mm; display: block; margin: 1mm 0; }
.print-signaturtitel { font-size: 8pt; font-weight: 700; color: #333; margin-bottom: 1mm; }
.doc-unterschrift .sig-nachweis { font-size: 7.5pt; color: #555; margin-top: 1mm; line-height: 1.35; }

/* Stempeluhr: sitzt fest über der unteren Navigation, damit sie auf der
   Baustelle mit einem Daumen erreichbar ist. */
#stempel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  background: #1e2a3a;
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
  transition: background .15s, transform .12s;
}
#stempel:hover { transform: translateX(-50%) translateY(-1px); }
#stempel.laeuft { background: #b91c1c; }
#stempel .stempel-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
#stempel .stempel-text strong { font-size: 15px; font-variant-numeric: tabular-nums; }
#stempel .stempel-text small { font-size: 11px; opacity: .8; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stempel .stempel-icon { font-size: 17px; }
#stempel .stempel-punkt {
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  animation: stempelPuls 1.4s ease-in-out infinite;
}
@keyframes stempelPuls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 860px) {
  /* Über der unteren Navigation, nicht darauf – und links davon, damit der
     Knopf für Schnellaktionen (unten rechts) frei bleibt. */
  #stempel {
    bottom: 76px;
    left: 12px;
    right: 84px;
    transform: none;
    justify-content: center;
    max-width: none;
  }
  #stempel:hover { transform: translateY(-1px); }
}
@media print { #stempel { display: none; } }

/* Kundendossier: eine Zeile je Ereignis, neuestes zuoberst */
.dossier { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dossier-zeile {
  display: grid; grid-template-columns: 92px 26px 1fr auto;
  gap: 8px; align-items: baseline;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dossier-zeile:last-child { border-bottom: none; }
.dossier-zeile:hover { background: #f8fafc; }
.dossier-datum { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dossier-symbol { font-size: 14px; }
.dossier-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .dossier-zeile { grid-template-columns: 70px 22px 1fr; }
  .dossier-betrag { grid-column: 3; text-align: right; }
}

/* Baustellenfotos am Auftrag */
.foto-galerie { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.foto-karte { position: relative; width: 120px; }
.foto-karte img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; cursor: pointer; }
.foto-karte .foto-weg {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: rgba(15, 23, 42, .72); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.foto-karte .foto-notiz { font-size: 11px; color: var(--text-muted); margin-top: 3px; word-break: break-word; }

/* Zielbalken in der Team-Übersicht */
.ziel-balken {
  height: 7px; border-radius: 4px; background: #e2e8f0;
  overflow: hidden; margin-bottom: 4px;
}
.ziel-balken i { display: block; height: 100%; background: linear-gradient(90deg, #2f8f5b, #3fae72); }

/* Paketwahl in der Verwaltung */
.paket-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 6px; }
.paket-karte {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; font: inherit;
}
.paket-karte:hover { border-color: #94a3b8; background: #f8fafc; }
.paket-karte strong { font-size: 14.5px; }
.paket-karte .paket-plaetze { font-size: 12px; color: #2f8f5b; font-weight: 600; }
.paket-karte .muted { font-size: 11.5px; line-height: 1.4; }

/* Zubuchbare Module in der Verwaltung hervorheben */
.layout-block.zubuchbar { border-color: #bfdbfe; background: linear-gradient(180deg, #f8fbff, #fff); }

/* Filter- und Sortierleiste über einer Liste */
.listen-leiste {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 14px;
}
.listen-leiste label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--text-muted);
}
.listen-leiste select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font: inherit; font-size: 13px; min-width: 170px;
}
/* Aufklappbare Artikelgruppen */
.artikel-block { margin-bottom: 18px; }
.artikel-gruppe-kopf {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 9px;
  background: #f8fafc; font: inherit; text-align: left; cursor: pointer;
}
.artikel-gruppe-kopf:hover { background: #eef2f7; }
.artikel-gruppe-kopf strong { font-size: 14.5px; }
.artikel-gruppe-kopf .muted { font-size: 12.5px; }
.artikel-gruppe-kopf .klapp { color: var(--text-muted); width: 12px; flex: none; }

/* Aktionen je Kundenfirma: wenige Knöpfe, der Rest hinter «⋯» */
.firma-aktionen { white-space: nowrap; text-align: right; }
.firma-aktionen .btn { margin-left: 4px; }

/* Der Dialog dahinter: eine Schaltfläche pro Zeile, damit man liest statt sucht */
.firma-mehr { display: grid; gap: 8px; }
.firma-mehr .btn { justify-content: flex-start; text-align: left; width: 100%; }

/* Gesperrter Zugang: Menü und Schnellzugriff verschwinden, damit gar nicht
   erst der Eindruck entsteht, man könne weiterarbeiten. */
body.zugang-gesperrt #sidebar nav,
body.zugang-gesperrt .bottom-nav,
body.zugang-gesperrt #fab { display: none; }

.zugang-seite { max-width: 620px; margin: 0 auto; padding: 8px 0 40px; }
.zugang-seite.breit { max-width: 1000px; }
.zugang-seite h1 { margin-bottom: 4px; }
.zugang-gewaehlt {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin: 20px 0;
}
.zugang-schritte { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

/* Umzug: drei Schritte untereinander, jeder mit Nummer, Anleitung und
   Knopf. Erledigte bekommen ein Häkchen statt der Nummer – man soll auf
   einen Blick sehen, wie weit man ist. */
.umzug-quelle { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.umzug-quelle button {
  border: 1px solid var(--border); background: var(--card-bg); color: inherit;
  border-radius: 99px; padding: 5px 13px; font: inherit; font-size: 13px; cursor: pointer;
}
.umzug-quelle button.aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
.umzug-schritte { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.umzug-schritt {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--card-bg);
}
.umzug-schritt.fertig { border-color: var(--green); background: rgba(22, 163, 74, 0.04); }
.umzug-nr {
  flex: none; width: 26px; height: 26px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border); font-size: 13px; font-weight: 650;
}
.umzug-schritt.fertig .umzug-nr { background: var(--green); border-color: var(--green); color: #fff; }
.umzug-text { flex: 1; min-width: 190px; }
.umzug-stand { font-size: 12px; color: var(--green); margin-top: 3px; }
.umzug-knopf { display: flex; gap: 6px; flex-wrap: wrap; }

/* Mandatswahl für Treuhänder – steht in der Seitenleiste über dem Konto,
   weil man wissen muss, in wessen Zahlen man gerade schaut. */
.firma-wechsler { margin-bottom: 8px; }
.firma-wechsler-label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(211, 220, 207, 0.6); margin-bottom: 3px;
}
.firma-wechsler select {
  width: 100%; padding: 7px 9px; border-radius: 8px; font-size: 13px;
  background: rgba(255, 255, 255, 0.08); color: var(--sidebar-text);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.firma-wechsler select option { color: #23291f; }

/* Mahnlauf: die Liste soll scrollen, die Summe darunter stehen bleiben –
   sonst weiss man beim Abwählen nicht mehr, worüber man entscheidet. */
.mahnlauf-liste { max-height: 44vh; overflow: auto; margin-bottom: 10px; }
.mahnlauf-summe {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--border); margin-bottom: 12px; font-size: 13.5px;
}
.mahnlauf-hinweis {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; background: var(--card-bg);
}
.mahnlauf-hinweis > div { flex: 1; min-width: 200px; }

/* Die Einrichtungs-Hilfe legt sich sonst über jedes Fenster, das sie selbst
   geöffnet hat – und verdeckt genau die Kacheln, die man anklicken soll. */
body:has(#modal-backdrop:not(.hidden)) #checkliste { display: none; }

/* Branchenwahl: sieben Kacheln, auf dem Telefon zwei nebeneinander. Wer
   sein Gewerbe sieht, klickt – wer eine Liste liest, überlegt. */
.branchen-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 6px;
}
.branchen-karte {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px;
  background: var(--card-bg); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .12s, transform .12s;
}
.branchen-karte:hover { border-color: var(--accent); transform: translateY(-1px); }
.branchen-icon { font-size: 22px; line-height: 1.1; }
.branchen-name { font-weight: 650; font-size: 14.5px; }
.branchen-text { font-size: 12.5px; color: var(--text-muted); }
.branchen-zahl { font-size: 11.5px; color: var(--accent); margin-top: 2px; }
.branchen-liste { max-height: 46vh; overflow: auto; margin-bottom: 12px; }

/* Zahlungsweg: Rechnung oder Karte. Zwei Karten nebeneinander, auf dem
   Telefon untereinander – mehr Wege gibt es nicht, also braucht es auch
   keine Liste. */
.zahlung-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.zahlung-karte {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  background: var(--card-bg); display: flex; flex-direction: column;
}
.zahlung-name { font-weight: 650; font-size: 16px; margin-bottom: 6px; }
.zahlung-text { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.zahlung-knopf { margin-top: auto; width: 100%; }
.zahlung-bestaetigt.gekuendigt { border-left-color: var(--text-muted); }

/* Fällige Abos: die einzige Meldung, die TaPax selbst betrifft – darum
   auffällig, aber nicht rot. Rot heisst Fehler, hier ist nur etwas zu tun. */
.abo-meldung {
  border: 1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: var(--card-bg);
}
.abo-meldung-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.abo-meldung-zeile:first-of-type { border-top: 0; }
.abo-meldung-zeile > span:first-child { flex: 1; min-width: 180px; }
/* Die Vorschau zeigt dasselbe Blatt, das aus dem Drucker kommt – nur
   verkleinert, sonst passt nicht einmal der Kopf ins Fenster. Ein A4-Blatt
   ist 210 mm breit; 60 % davon sind auf jedem Bildschirm lesbar. */
.rechnung-vorschau {
  max-height: 52vh; overflow: auto; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; margin-bottom: 12px;
}
.rechnung-vorschau .a4-page {
  box-shadow: none; margin: 0; min-height: 0;
  transform: scale(0.6); transform-origin: top left; width: 167%;
}
.rechnung-vorschau .a4-body { padding: 12mm 20mm; }
.rechnung-vorschau .doc-brief-head { margin-bottom: 8mm; }

.zahlung-bestaetigt {
  border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; background: var(--card-bg);
}
.zugang-daten {
  margin-top: 26px; padding: 16px 18px; border-radius: 12px;
  background: #f8fafc; border: 1px solid var(--border); font-size: 13.5px;
}

/* Balken über der Anwendung: Testzeit, fehlendes Paket, Sperre */
.zugang-balken {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 10px 16px; border-radius: 10px;
  font-size: 13.5px; background: var(--bg); color: var(--text-muted);
}
.zugang-balken .btn { margin-left: auto; }
.zugang-balken.warnung { background: #fef3c7; color: #92400e; }
.zugang-balken.gesperrt { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Paketwahl beim Start */
.paket-zeitraum {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 18px;
  background: var(--bg); border-radius: 10px; padding: 4px; width: fit-content;
  margin-left: auto; margin-right: auto;
}
.paket-zeitraum button {
  border: none; background: transparent; font: inherit; font-size: 13.5px;
  padding: 7px 16px; border-radius: 8px; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; gap: 7px;
}
.paket-zeitraum button.aktiv { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.paket-sparen {
  background: #dcfce7; color: #166534; border-radius: 999px;
  padding: 2px 8px; font-size: 11px; font-weight: 600;
}

.paket-raster { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .paket-raster { grid-template-columns: repeat(3, 1fr); } }

.paket-karte {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 12px; padding: 20px 18px;
  background: #fff;
}
.paket-karte.empfohlen { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,101,52,.07); }
.paket-fahne {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.paket-name { font-size: 19px; font-weight: 700; }
.paket-fuerwen { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.paket-preis { margin: 14px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.paket-preis strong { font-size: 30px; letter-spacing: -0.5px; }
.paket-preis .muted { font-size: 12.5px; }
.paket-plaetze { font-size: 12px; color: var(--text-muted); }
.paket-text { font-size: 13px; margin: 12px 0 0; }
.paket-liste { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; }
.paket-liste li { padding: 4px 0 4px 20px; position: relative; }
.paket-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.paket-knopf { margin-top: auto; width: 100%; margin-top: 18px; }

.paket-anfrage {
  margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--border);
  border-radius: 10px; font-size: 13px; background: #f8fafc;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.paket-anfrage .btn { margin-left: auto; }

/* Zwischensumme in der Lohnabrechnung */
.doc-positionen tr.summe td {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}

/* Änderungsverlauf im Dokument (Art. 958f OR) */
.journal { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.journal summary {
  cursor: pointer; font-weight: 600; font-size: 14px;
  list-style: none; display: flex; gap: 8px; align-items: baseline;
}
.journal summary::before { content: "▸"; color: var(--text-muted); }
.journal[open] summary::before { content: "▾"; }
.journal summary::-webkit-details-marker { display: none; }
.journal table { font-size: 12.5px; }

/* Leiste für mehrere ausgewählte Zeilen */
.auswahl-leiste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 16px;
}
.auswahl-leiste label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-muted);
}
.auswahl-leiste select {
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font: inherit; font-size: 13px;
}
.auswahl-leiste .btn.danger { margin-left: auto; }

/* Hinweis im Import, bevor eine ganze Liste falsch gespeichert wird */
.import-warnung {
  margin-bottom: 8px; padding: 9px 12px;
  border: 1px solid #fecaca; border-radius: 8px;
  background: #fef2f2; color: #991b1b; font-size: 13px;
}

/* Wer ist gerade da */
.online-leiste {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}
.online-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 9px; font-size: 13.5px; }
.online-kopf .muted { font-size: 12px; }
.online-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.online-person {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  font-size: 12.5px;
}
.online-person i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex: none; }
.online-person.an i { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.online-person.an { border-color: #bbf7d0; background: #f0fdf4; }
.online-name { font-weight: 600; }
.online-kennung { color: var(--text-muted); font-size: 11.5px; }
.online-wann { color: var(--text-muted); font-size: 11.5px; margin-left: 2px; }

.bank-schon { opacity: .55; }
.bank-schon td { background: #fafafa; }

/* MwSt-Abrechnung: Die Ziffern stehen genauso im ESTV-Formular – darum
   monospace, damit man beim Abtippen die Zeile nicht verliert. */
.mwst-tabelle .mwst-ziffer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #64748b;
  font-size: 12.5px;
}
.mwst-tabelle .mwst-stark td { font-weight: 700; background: #f8fafc; }
.mwst-tabelle .mwst-stark .mwst-ziffer { color: #334155; }

@media print {
  .druck-mwst { font-family: system-ui, sans-serif; color: #111; }
  .druck-mwst h1 { font-size: 20px; margin: 0 0 8px; }
  .druck-mwst table th, .druck-mwst table td { padding: 6px 4px; border-bottom: 1px solid #ddd; }
}
.badge.gelb { background: linear-gradient(135deg, #fef9c3, #fefce8); color: #a16207; }

/* ---------- Dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); position: relative; overflow: hidden; }
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-grad);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-card .stat-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.stat-card .stat-value { font-size: 31px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent-hover); }
.stat-card .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.stat-card.warn { background: linear-gradient(160deg, #fff 55%, #fef2f2 100%); }
.stat-card.warn::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.stat-card.warn .stat-value { color: var(--red); }
.stat-card.good { background: linear-gradient(160deg, #fff 55%, #f0fdf4 100%); }
.stat-card.good::before { background: linear-gradient(90deg, #16a34a, #4ade80); }
.stat-card.good .stat-value { color: var(--green); }
.stat-card.lila, .stat-card.bronze { background: linear-gradient(160deg, #fff 55%, #faf5e8 100%); }
.stat-card.lila::before, .stat-card.bronze::before { background: var(--bronze-grad); }
.stat-card.lila .stat-value, .stat-card.bronze .stat-value { color: var(--bronze-dark); }
.stat-card.blau { background: linear-gradient(160deg, #fff 55%, #f7f3e9 100%); }
.stat-card.blau::before { background: var(--bronze-grad); }
.stat-card.blau .stat-value { color: var(--bronze-dark); }
/* Nullwert-Karten treten zurück, damit Karten mit echten Zahlen auffallen –
   sobald ein Wert reinkommt, verschwindet die Klasse serverseitig von selbst. */
.stat-card.leer { background: var(--card-bg); box-shadow: none; border-style: dashed; }
.stat-card.leer::before { opacity: 0.35; }
.stat-card.leer .stat-value { color: var(--text-muted); font-weight: 600; }
.stat-card.leer:hover { transform: none; box-shadow: var(--shadow); }
h2.section { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; margin: 28px 0 14px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,107,66,0.14);
}
.field .hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.field input.invalid { border-color: var(--red); }

/* ---------- Modal ---------- */
#modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  z-index: 250;
  overflow-y: auto;
}
#modal-backdrop.hidden { display: none; }
#modal-backdrop:not(.hidden) { animation: modal-backdrop-ein 0.2s ease; }
@keyframes modal-backdrop-ein { from { opacity: 0; } to { opacity: 1; } }
#modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  padding: 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  animation: modal-ein 0.24s cubic-bezier(0.32,0.72,0,1);
}
@keyframes modal-ein { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
#modal.wide { max-width: 980px; }
.modal-title { font-size: 19px; font-weight: 700; margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.modal-actions .left { margin-right: auto; }

/* ---------- Positionen-Editor ---------- */
table.pos-editor { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.pos-editor th { font-size: 11px; text-transform: uppercase; color: var(--text-muted); text-align: left; padding: 6px 6px; }
table.pos-editor td { padding: 4px 4px; vertical-align: top; }
table.pos-editor input, table.pos-editor select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
table.pos-editor .num input { text-align: right; }
.pos-total-row { display: flex; justify-content: flex-end; gap: 30px; padding: 12px 6px 0; font-size: 14px; }
.pos-total-row .totals { text-align: right; min-width: 280px; }
.pos-total-row .totals div { display: flex; justify-content: space-between; padding: 3px 0; }
.pos-total-row .totals .grand { font-weight: 700; font-size: 16px; border-top: 2px solid var(--text); margin-top: 6px; padding-top: 6px; }
.mwst-hinweis { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; text-align: right; }
/* Muss die Flex-Regel für .totals div überschreiben – sonst reisst
   "space-between" den Satz und den Link auseinander. */
.pos-total-row .totals .mwst-hinweis { display: block; }

/* ---------- Dokument-Detail ---------- */
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.doc-meta { color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
table.doc-positionen { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.doc-positionen th { text-align: left; font-size: 12px; color: var(--text-muted); border-bottom: 2px solid var(--border); padding: 8px 6px; }
table.doc-positionen td { padding: 9px 6px; border-bottom: 1px solid var(--border); }
table.doc-positionen .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 500;
  transition: opacity 0.3s;
}
#toast.hidden { opacity: 0; pointer-events: none; }

/* ---------- Startseite / Login ---------- */
#auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(150deg, #faf8f1 0%, #f4f1e6 45%, #eef2e7 100%);
  overflow-y: auto;
}
.auth-seite {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px;
}
.auth-wrap { min-height: calc(100vh - 110px); }
.auth-mehr {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0 40px;
  animation: mehr-wippen 2.2s ease-in-out infinite;
}
@keyframes mehr-wippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.auth-fuss-seite {
  text-align: center; padding: 24px 16px 40px; color: var(--text-muted); font-size: 13px;
}
.auth-fuss-seite .link { color: var(--text); }
.auth-sektion { padding: 34px 0 44px; color: var(--text); }
.auth-sektion h2 {
  font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
  color: var(--text); font-size: 26px; font-weight: 700; margin-bottom: 12px; text-align: center;
}
.auth-sektion-intro { max-width: 640px; margin: 0 auto 28px; text-align: center; line-height: 1.7; color: var(--text-muted); }
.preis-testphase-hinweis {
  text-align: center; font-size: 13px; color: #6b5430;
  background: rgba(176,141,87,0.12); border: 1px solid rgba(176,141,87,0.3);
  border-radius: 999px; padding: 7px 16px; max-width: fit-content;
  margin: -16px auto 24px;
}
.preis-testphase-hinweis .link { color: #6b5430; text-decoration: underline; }
.auth-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.auth-feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}
.auth-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(29,107,66,0.3); }
.af-icon {
  font-size: 22px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(29,107,66,0.18), rgba(176,141,87,0.2));
  margin-bottom: 12px;
}
.af-titel { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.af-text { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
/* ---------- Problem/Lösung-Blöcke ---------- */
.auth-probleme { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.ap-karte {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--bronze);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.ap-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ap-titel { font-weight: 700; color: var(--text); font-size: 16px; margin-bottom: 10px; }
.ap-problem { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); margin-bottom: 12px; }
.ap-loesung { font-size: 13.5px; line-height: 1.65; color: var(--text); }
.ap-loesung span { color: var(--accent); font-weight: 700; margin-right: 4px; }

/* ---------- Preise (Monat/Jahr-Umschalter + drei Pakete) ---------- */
.preis-umschalter {
  display: inline-flex; gap: 2px; margin: 4px auto 30px; padding: 4px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
  border-radius: 999px;
}
.preis-umschalter { display: flex; justify-content: center; }
.preis-umschalter button {
  background: none; border: none; color: var(--text-muted);
  font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 999px;
  cursor: pointer; transition: background 0.18s var(--ease), color 0.18s; display: flex; align-items: center; gap: 8px;
}
.preis-umschalter button.aktiv { background: var(--bronze-grad); color: #241a0d; box-shadow: 0 4px 14px rgba(176,141,87,0.35); }
.preis-spar-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  background: rgba(29,107,66,0.9); color: #fff; padding: 2px 8px; border-radius: 999px;
}
.preis-umschalter button:not(.aktiv) .preis-spar-badge { background: rgba(29,107,66,0.12); color: var(--accent-hover); }

.preis-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto; }
.preis-neu-karte {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}
.preis-neu-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(29,107,66,0.25); }
.preis-neu-karte.empfohlen {
  background: linear-gradient(165deg, rgba(29,107,66,0.08), #fff 55%);
  border-color: rgba(29,107,66,0.4);
  box-shadow: var(--shadow-lg);
}
.preis-empfehlung-band {
  position: absolute; top: -12px; left: 24px;
  background: var(--accent-grad); color: #fff;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(29,107,66,0.4);
}
.preis-neu-name { font-family: Charter, "Iowan Old Style", Georgia, ui-serif, serif; font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.preis-neu-fuerwen { font-size: 12.5px; color: var(--text-muted); margin-bottom: 18px; }
.preis-neu-betrag { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.preis-neu-zahl { font-size: 34px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.preis-neu-einheit { font-size: 12.5px; color: var(--text-muted); }
.preis-neu-hinweis { font-size: 11.5px; color: var(--text-muted); margin-bottom: 20px; }
.preis-neu-liste { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text); margin-bottom: 22px; }
.preis-neu-liste li { padding-left: 20px; position: relative; }
.preis-neu-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.preis-neu-liste li:first-child { color: var(--bronze-dark); font-weight: 600; }
.preis-neu-liste li:first-child::before { content: "◆"; color: var(--bronze-dark); font-size: 9px; top: 3px; }
.preis-neu-cta { width: 100%; text-align: center; }
.preis-fussnote { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 22px; }
@media (max-width: 640px) {
  .preis-umschalter { flex-wrap: wrap; }
}

.auth-schritte { max-width: 560px; margin: 20px auto 26px; display: flex; flex-direction: column; gap: 14px; }
.auth-schritte div { display: flex; gap: 14px; align-items: flex-start; line-height: 1.55; }
.auth-schritte span {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.auth-cta { display: block; margin: 0 auto; padding: 12px 28px !important; font-size: 15px !important; }
.auth-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}
.auth-tabs button {
  flex: 1;
  border: none;
  background: none;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
}
.auth-tabs button.aktiv { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(15,23,42,0.12); }
.auth-merken {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  cursor: pointer;
}
.auth-merken input { accent-color: var(--accent); }

/* Animierte Hintergrund-Pfade */
.auth-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-bg::before, .auth-bg::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.14;
  animation: glow-pulsieren 9s ease-in-out infinite alternate;
}
.auth-bg::before {
  background: radial-gradient(circle, #2f8f5b 0%, transparent 70%);
  top: -14vw; left: -10vw;
}
.auth-bg::after {
  background: radial-gradient(circle, #b08d57 0%, transparent 70%);
  bottom: -18vw; right: -12vw;
  animation-delay: -4s;
}
@keyframes glow-pulsieren {
  from { transform: scale(1); opacity: 0.1; }
  to { transform: scale(1.15); opacity: 0.18; }
}
/* Punkteraster (Canvas) – liegt unter den Linien und über den Glow-Kreisen */
.auth-bg .auth-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* Vignette: hellt die Mitte leicht auf, damit die Karte dort trägt */
.auth-bg .auth-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.auth-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.auth-bg svg.gespiegelt { transform: scale(-1, -1); }
.auth-bg path {
  fill: none;
  stroke: #c9a668;
  stroke-linecap: round;
  stroke-dasharray: 260 620;
  animation: pfad-fluss linear infinite, pfad-puls ease-in-out infinite alternate;
}
@keyframes pfad-fluss {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1760; }
}
@keyframes pfad-puls {
  from { stroke-opacity: 0.04; }
  to { stroke-opacity: 0.22; }
}

/* Die Startseite steht sofort – kein Einblenden von Titel, Text oder Karte.
   Die frühere Buchstaben-Animation zerlegte die Überschrift in einzelne
   Spans ohne echte Leerzeichen; damit klebte der Text beim Kopieren und für
   Screenreader zusammen ("DeineOffertenundRechnungen…"). */
.auth-hero, .auth-card { position: relative; z-index: 1; }

/* ---------- Hero: Textspalte + Produkt-Mockup ---------- */
.auth-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  flex: 2 1 620px;
  max-width: none;
}
.hero-textspalte { flex: 1 1 340px; max-width: 480px; }
.hero-kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Dunkler als --bronze-dark: auf dem hellen Bronze-Pill lag das reguläre
     --bronze-dark nur bei ~3,9:1 Kontrast, WCAG AA verlangt bei dieser
     Schriftgrösse 4,5:1. Diese Abstufung kommt auf ~5,9:1. */
  color: #6b5430;
  background: rgba(176,141,87,0.14);
  border: 1px solid rgba(176,141,87,0.35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-btn { padding: 12px 22px !important; font-size: 14.5px !important; }
.hero-btn.secondary { background: #fff !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

.hero-mockup {
  flex: 1 1 280px;
  max-width: 320px;
  position: relative;
  opacity: 0;
  transform: translateY(30px) rotate(1.2deg);
  animation: mockup-rein 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mockup-rein { to { opacity: 1; transform: rotate(1.2deg); } }
.hero-mockup-fenster {
  background: #1e293b;
  border-radius: 12px 12px 0 0;
  padding: 9px 12px;
  display: flex;
  gap: 6px;
}
.hero-mockup-fenster span { width: 9px; height: 9px; border-radius: 50%; background: #475569; }
.hero-mockup-fenster span:nth-child(1) { background: #f87171; }
.hero-mockup-fenster span:nth-child(2) { background: #fbbf24; }
.hero-mockup-fenster span:nth-child(3) { background: #4ade80; }
.hero-mockup-inhalt {
  background: #fff;
  border-radius: 0 0 12px 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.hm-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hm-firma { font-weight: 700; font-size: 13.5px; color: #1e293b; }
.hm-titel { font-size: 11.5px; color: #64748b; margin-bottom: 12px; }
.hm-zeile { display: flex; justify-content: space-between; font-size: 12px; color: #334155; padding: 4px 0; border-bottom: 1px dashed #e2e8f0; }
.hm-zeile.hm-total { font-weight: 700; color: #1e293b; border-bottom: none; border-top: 1.5px solid #1e293b; margin-top: 2px; padding-top: 7px; }
.hm-qr-zeile { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #cbd5e1; }
.hm-qr { width: 52px; height: 52px; flex: 0 0 auto; }
.hm-qr svg { width: 100%; height: 100%; }
.hm-qr-text { font-size: 10.5px; color: #64748b; line-height: 1.5; }
.hm-qr-text span { color: #16a34a; font-weight: 600; }
.hero-badge-float {
  position: absolute;
  top: -14px; right: -14px;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(220,38,38,0.4);
  transform: rotate(4deg);
}

/* ---------- Kennzahlen-Leiste ---------- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 8px auto 0;
  padding: 22px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hero-stats > div { text-align: center; }
.hero-stats strong { display: block; font-size: 24px; font-weight: 800; color: var(--text); }
.hero-stats span { font-size: 12px; color: var(--text-muted); }

@media (max-width: 760px) {
  .hero-mockup, .hero-badge-float { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
#auth-screen.hidden { display: none; }
#app.hidden { display: none; }
.auth-wrap {
  display: flex;
  gap: 56px;
  align-items: center;
  max-width: 980px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.auth-hero { flex: 1 1 380px; color: var(--text); max-width: 500px; }
.hero-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.auth-hero .logo-mit-icon { margin-bottom: 0; }
.auth-hero .logo-icon { height: 34px; }
.auth-hero .logo-wortmarke { height: 22px; }
.hero-anmelden-kurzweg {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; flex: 0 0 auto; transition: background 0.15s, border-color 0.15s;
}
.hero-anmelden-kurzweg:hover { background: #fff; border-color: var(--accent); }
@media (max-width: 420px) {
  /* Logo-Wortmarke + Anmelden-Kurzweg passten bei sehr schmalen Screens
     (< ca. 400px) nicht mehr nebeneinander und liefen über den Rand hinaus. */
  .auth-hero .logo-icon { height: 22px; }
  .auth-hero .logo-wortmarke { height: 14px; }
  .hero-anmelden-kurzweg { padding: 5px 12px; font-size: 12px; }
}
.auth-hero h1 {
  font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
  font-size: 34px; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.2; color: var(--text); margin-bottom: 16px;
}
.auth-hero p { line-height: 1.65; color: var(--text-muted); margin-bottom: 18px; }
.auth-hero ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.auth-hero li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: 9px; }
.auth-card {
  flex: 0 1 360px;
  background: #fff;
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: 0 20px 50px rgba(35,41,31,0.12), 0 6px 18px rgba(35,41,31,0.08), 0 0 60px rgba(29,107,66,0.06);
  isolation: isolate;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 17px;
  z-index: -1;
  padding: 1.5px;
  background: conic-gradient(from var(--ring-winkel, 0deg), #2f8f5b, #b08d57, #2f8f5b);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ring-drehen 6s linear infinite;
}
@keyframes ring-drehen { to { --ring-winkel: 360deg; } }
@property --ring-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.auth-card h2 { font-size: 20px; margin-bottom: 4px; }
.auth-card .auth-sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 18px; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .btn { width: 100%; padding: 12px; font-size: 15px; }
.auth-fehler {
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}
.auth-fehler.sichtbar { display: block; }
.auth-fuss { margin-top: 16px; font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; }
.angemeldet-als { font-size: 12px; opacity: 0.7; margin-bottom: 8px; }
/* In anderen Sprachen sind die Wörter länger: «Se déconnecter» statt
   «Abmelden». Bricht die Beschriftung um, wächst die Fusszeile und die
   Versionsnummer rutscht aus dem Bild. Darum eine Zeile, notfalls
   abgeschnitten – die Sinnbilder tragen die Bedeutung ohnehin. */
.logout-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--sidebar-text);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.logout-btn:hover { background: rgba(255,255,255,0.15); }

/* ---------- Charts ---------- */
.chart-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chart-select {
  font-size: 12px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.chart-ziel { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.chart-ziel input {
  width: 90px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  text-align: right;
}
.chart-legende { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.chart-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#chart-tip {
  position: fixed;
  z-index: 300;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(6px);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12.5px;
  pointer-events: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  min-width: 170px;
}
#chart-tip.hidden { display: none; }
#chart-tip .tip-titel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin-bottom: 7px; }
#chart-tip .tip-zeile { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-variant-numeric: tabular-nums; }
#chart-tip .tip-zeile i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }

/* ---------- Kundenportal ---------- */
.portal-fehler { max-width: 480px; margin: 15vh auto; text-align: center; color: #fff; padding: 24px; }
.portal-fehler h1 { font-size: 22px; margin-bottom: 10px; }
.portal-seite { max-width: 720px; margin: 0 auto; padding: 40px 20px 60px; position: relative; z-index: 1; }
.portal-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.portal-kopf img { max-height: 52px; max-width: 140px; border-radius: 8px; background: #fff; padding: 4px; }
.portal-logo-platzhalter {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--accent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
}
.portal-firma { font-size: 20px; font-weight: 800; color: #fff; }
.portal-kunde { font-size: 13.5px; color: #b9c9bd; }
.portal-sektion { margin-bottom: 30px; }
.portal-sektion h2 { color: #fff; font-size: 16px; margin-bottom: 12px; }
.portal-karte {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 12px;
  color: #e7ede8;
}
.portal-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.portal-karte-info { font-size: 12.5px; color: #b9c9bd; margin-bottom: 8px; }
.portal-karte-total { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.portal-karte-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-fuss { text-align: center; font-size: 11px; color: #7f9587; margin-top: 20px; }

/* ---------- Command Palette ---------- */
#cmdk {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15,23,17,0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
}
#cmdk.hidden { display: none; }
#cmdk-box {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
#cmdk-input {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
  font-size: 16px;
  outline: none;
  font-family: inherit;
}
#cmdk-results { overflow-y: auto; padding: 6px; }
.cmdk-gruppe { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 10px 12px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.cmdk-item.aktiv { background: var(--accent-grad); color: #fff; }
.cmdk-item.aktiv .cmdk-sub { color: rgba(255,255,255,0.75); }
.cmdk-icon { font-size: 16px; flex: 0 0 auto; }
.cmdk-titel { flex: 1; font-size: 14px; }
.cmdk-sub { font-size: 12px; color: var(--text-muted); }
.cmdk-leer { padding: 30px; text-align: center; color: var(--text-muted); font-size: 13px; }
#cmdk-fuss { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.cmdk-hint {
  font-size: 11px;
  color: var(--sidebar-text);
  opacity: 0.6;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: auto;
  cursor: pointer;
}

/* ---------- Floating Action Menu ---------- */
#fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
#fab.hidden { display: none; }
#fab-knopf {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent-grad);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(29,107,66,0.45);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#fab.offen #fab-knopf { transform: rotate(45deg); }
.fab-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(20, 30, 46, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#fab.offen .fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.fab-item {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 14px;
  text-align: left;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.fab-item:hover { background: rgba(255,255,255,0.1); }
.fab-trenner { height: 1px; background: rgba(255,255,255,0.12); margin: 3px 6px; }

/* ---------- Mobile Topbar / Drawer-Navigation / Bottom-Tab-Bar ---------- */
/* Auf dem Desktop unsichtbar; erst im Media-Query unten aktiviert. Statt die
   Desktop-Sidebar einfach schmaler zu quetschen (führte zu einer unbedienbaren
   Zeilen-Wurst oben auf dem Screen), wird sie zur ausklappbaren Schublade und
   die fünf wichtigsten Ansichten wandern in eine iOS-artige Tab-Bar unten. */
#mobile-topbar { display: none; }
#sidebar-backdrop { display: none; }
#bottom-nav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  #mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: env(safe-area-inset-top) 14px 0;
    background: var(--sidebar-bg);
    z-index: 220;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  }
  #mobile-topbar .logo-icon { height: 20px; }
  #mobile-topbar .logo-wortmarke { height: 13px; }
  #mobile-firmenlogo {
    max-height: 26px; max-width: 90px;
    border-radius: 6px; background: #fff;
    padding: 2px 5px;
  }
  #mobile-firmenlogo.hidden { display: none; }
  #menu-toggle {
    background: none; border: none; color: #fff; font-size: 21px;
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  }
  #menu-toggle:active { background: rgba(255,255,255,0.15); }

  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(78vw, 280px);
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
    z-index: 240;
    padding-top: env(safe-area-inset-top);
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar nav { flex-direction: column; flex-wrap: nowrap; overflow-y: auto; gap: 2px; padding: 0 10px; }
  .logo-row { padding: 20px 18px 16px; }
  .nav-btn { padding: 12px 14px; font-size: 15px; white-space: normal; }
  .sidebar-footer { padding: 16px 18px; }
  .angemeldet-als { display: block; }
  .logout-btn { width: 100%; }

  #sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s;
    z-index: 230;
  }
  #sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  #app { flex-direction: column; }
  #main {
    margin-left: 0;
    padding: 16px;
    padding-top: calc(56px + env(safe-area-inset-top) + 16px);
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: 100%;
  }

  #bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 210;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  }
  .bottom-nav-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none;
    padding: 7px 2px 6px;
    color: var(--text-muted);
    font-size: 10.5px;
    cursor: pointer;
  }
  .bn-icon { font-size: 20px; line-height: 1; }
  .bottom-nav-btn.active { color: var(--accent); }

  #fab { bottom: calc(72px + env(safe-area-inset-bottom) + 12px); }
  #toast { bottom: calc(72px + env(safe-area-inset-bottom) + 12px); }

  .form-grid { grid-template-columns: 1fr; }
  #modal { padding: 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  table.list th, table.list td { padding: 8px 8px; }
  table.list, table.doc-positionen, table.pos-editor { display: block; overflow-x: auto; }
}

.link { color: var(--accent); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.muted { color: var(--text-muted); }
.mono { font-variant-numeric: tabular-nums; }

/* ============================================================
   Druckansicht: A4-Dokument mit Schweizer QR-Zahlteil
   Alle Masse in mm gemäss SIX Style Guide QR-Rechnung
   ============================================================ */
#print-area { display: none; }

@media print {
  body * { visibility: hidden; }
  #app, #modal-backdrop, #toast { display: none !important; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { display: block; position: absolute; top: 0; left: 0; width: 210mm; }
  @page { size: A4 portrait; margin: 0; }
}

.a4-page {
  width: 210mm;
  min-height: 296mm;
  background: #fff;
  position: relative;
  page-break-after: always;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
}
.a4-body { padding: 18mm 20mm 10mm 20mm; }

.doc-brief-head { display: flex; justify-content: space-between; margin-bottom: 14mm; }
.absender { font-size: 10pt; line-height: 1.5; }
.absender .firma { font-weight: 700; font-size: 13pt; margin-bottom: 2mm; }
.empfaenger { font-size: 10pt; line-height: 1.5; margin-top: 16mm; }

.doc-title-row { margin: 8mm 0 6mm; }
.doc-title-row h1 { font-size: 16pt; margin: 0 0 1mm; }
.doc-title-row .doc-info { font-size: 9pt; color: #333; display: flex; gap: 8mm; flex-wrap: wrap; }

table.print-pos { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-top: 4mm; }
table.print-pos th { text-align: left; border-bottom: 1.5px solid #000; padding: 2mm 1.5mm; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.02em; }
table.print-pos td { padding: 2.2mm 1.5mm; border-bottom: 0.5px solid #ccc; vertical-align: top; }
table.print-pos .num { text-align: right; font-variant-numeric: tabular-nums; }
table.print-totals { width: 70mm; margin-left: auto; margin-top: 4mm; border-collapse: collapse; font-size: 9.5pt; }
table.print-totals td { padding: 1.2mm 1.5mm; }
table.print-totals .num { text-align: right; font-variant-numeric: tabular-nums; }
table.print-totals .grand td { font-weight: 700; font-size: 11pt; border-top: 1.5px solid #000; }
.print-note { font-size: 9pt; margin-top: 8mm; line-height: 1.6; white-space: pre-wrap; }
.print-brand { font-size: 7pt; color: #999; margin-top: 10mm; }

/* --- QR-Zahlteil (105mm hoch, unten auf der Seite) --- */
.qr-bill {
  position: absolute;
  bottom: 0; left: 0;
  width: 210mm;
  height: 105mm;
  border-top: 1px dashed #000;
  display: flex;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
}
.qr-receipt {
  width: 62mm;
  height: 105mm;
  border-right: 1px dashed #000;
  padding: 5mm;
  display: flex;
  flex-direction: column;
}
.qr-payment {
  width: 148mm;
  height: 105mm;
  padding: 5mm;
  display: flex;
}
.qr-payment-left { width: 51mm; display: flex; flex-direction: column; }
.qr-payment-right { flex: 1; padding-left: 5mm; }
.qr-bill .qr-title { font-size: 11pt; font-weight: 700; margin-bottom: 3mm; }
.qr-bill .qr-heading { font-size: 6pt; font-weight: 700; margin-top: 2.2mm; }
.qr-payment .qr-heading { font-size: 8pt; }
.qr-bill .qr-value { font-size: 8pt; line-height: 1.25; }
.qr-payment .qr-value { font-size: 10pt; }
.qr-receipt .qr-amount-row, .qr-payment .qr-amount-row { display: flex; gap: 8mm; margin-top: auto; }
.qr-payment .qr-amount-row { margin-top: 4mm; }
.qr-receipt .qr-acceptance { text-align: right; font-size: 6pt; font-weight: 700; margin-top: 2mm; }
.qr-code-box { width: 46mm; height: 46mm; margin: 4mm 0; position: relative; }
.qr-code-box > svg:first-child, .qr-code-box img { width: 46mm; height: 46mm; display: block; }
.qr-code-box svg.swiss-cross {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 7mm; height: 7mm;
}
.qr-further-info { font-size: 7pt; margin-top: auto; }

/* ---------- Benutzerplätze ---------- */
.plaetze-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 13.5px;
  background: #f4f6f8; border: 1px solid var(--border, #e2e6ea);
  border-radius: 9px; padding: 9px 13px;
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }


/* ---------------- Lager ----------------
   Der Bestand ist eine Zahl, die man im Vorbeigehen liest – darum gross,
   ruhig und mit derselben Farblogik wie überall: grün genug, orange knapp,
   rot leer. */
.lager-stand {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 12px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg);
}
.lager-stand > div { display: flex; flex-direction: column; gap: 2px; }
.lager-stand .muted { font-size: 12px; }
.lager-stand strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.lager-verlauf { max-height: 52vh; overflow: auto; }
.lager-verlauf table { font-variant-numeric: tabular-nums; }
.lager-warnung {
  border: 1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: var(--card-bg);
}
.lager-warnung-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.lager-warnung-zeile:first-of-type { border-top: 0; }
.lager-warnung-zeile > span:first-child { flex: 1; min-width: 170px; }
/* Bestandshinweis direkt an der Position im Dokument. */
.pos-lager { font-size: 11.5px; margin-top: 2px; display: block; }
.pos-lager.knapp { color: var(--orange); }
.pos-lager.leer { color: var(--red); font-weight: 600; }