/* ============================================================
   PINKE PINKE — Frontend Styles
   Brand: Dark Void + Emerald Green
   ============================================================ */

:root {
  --void: #04060c;
  --obsidian: #080c16;
  --onyx: #0c1220;
  --slate: #141c2e;
  --charcoal: #1c2840;
  --emerald: #7cb342;
  --emerald-bright: #8bc34a;
  --emerald-glow: rgba(124, 179, 66, 0.15);
  --emerald-soft: rgba(124, 179, 66, 0.06);
  --gold: #d4af37;
  --red: #ef5350;
  --red-glow: rgba(239, 83, 80, 0.2);
  --white: #ffffff;
  --silver: #e4e8ef;
  --gray-100: #c8d0dc;
  --gray-200: #9aa5b8;
  --gray-300: #6b7a94;
  --gray-400: #4a5568;
  /* Text aliases — referenced across ~67 rules. Must be defined. */
  --text-primary: #e4e8ef;
  --text-secondary: #c8d0dc;
  --text-muted: #9aa5b8;
  /* Surface alias used in modal-box etc. */
  --card: #0c1220;
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(124, 179, 66, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--void);
  color: var(--silver);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

::selection { background: var(--emerald); color: var(--void); }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
}

h1 { font-size: 28px; margin-bottom: 4px; }
h2 { font-size: 20px; margin-bottom: 16px; }
h3 { font-size: 16px; margin: 24px 0 12px; color: var(--gray-100); font-weight: 600; }

a { color: var(--emerald); text-decoration: none; cursor: pointer; }
a:hover { color: var(--emerald-bright); }

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ============================================================
   AUTH SCREENS (Login, Register, Onboarding)
   ============================================================ */
.auth-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-container.wide { max-width: 720px; }

.back-to-site {
  align-self: flex-start;
  color: var(--gray-200);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 24px;
  transition: color 0.2s;
}
.back-to-site:hover { color: var(--emerald); }

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.auth-logo.small .logo-tiles { width: 36px; height: 36px; }
.auth-logo.small .logo-text { font-size: 18px; }

.logo-tiles {
  width: 56px;
  height: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  transform: rotate(45deg);
}
.logo-tiles .t { border-radius: 3px; }
.logo-tiles .t.gray { background: var(--white); }
.logo-tiles .t.white { background: var(--white); }
.logo-tiles .t.green { background: var(--emerald); }
.logo-tiles .t.green-bright { background: var(--emerald-bright); }

.logo-text {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
}
.logo-text .white { color: var(--white); }
.logo-text .green { color: var(--emerald); }

.auth-slogan {
  color: var(--gray-200);
  font-size: 14px;
  margin-bottom: 32px;
  letter-spacing: 0.5px;
  text-align: center;
}

.auth-card {
  width: 100%;
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 32px;
}
.auth-card h2 { margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-200);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--slate);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--emerald); }
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-400); }

.row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.row .field { flex: 1; margin-bottom: 0; }
.row .flex-2 { flex: 2; }
.row .flex-3 { flex: 3; }

.consent {
  margin: 20px 0 24px;
  padding: 16px;
  background: var(--slate);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-light);
}

/* Empfehlungscode-Block — optional, einklappbar */
.referral-block {
  margin: 0 0 20px;
}
.referral-toggle {
  background: transparent;
  border: none;
  color: var(--gray-200);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: color 0.15s ease;
}
.referral-toggle:hover { color: var(--emerald); }
.referral-toggle.is-open { color: var(--emerald); }
.referral-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.referral-toggle.is-open .referral-toggle-icon::before { content: '−'; }
.referral-toggle.is-open .referral-toggle-icon { font-size: 0; }
.referral-toggle.is-open .referral-toggle-icon::before { font-size: 14px; }
.referral-input-wrap {
  margin-top: 12px;
  padding: 16px;
  background: var(--slate);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-light);
}
.referral-label {
  display: block;
  font-size: 12px;
  color: var(--gray-200);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.referral-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--void);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: border-color 0.15s ease;
}
.referral-input:focus {
  outline: none;
  border-color: var(--emerald);
}
.referral-input.is-valid { border-color: var(--emerald); }
.referral-status {
  margin-top: 8px;
  font-size: 12px;
  min-height: 16px;
}
.referral-status.is-success { color: var(--emerald); }
.referral-status.is-error { color: #ef5350; }
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-100);
}
.checkbox:last-child { margin-bottom: 0; }
.checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--emerald);
}
.checkbox span a { text-decoration: underline; }

.error {
  color: var(--red);
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.btn.small { padding: 8px 16px; font-size: 13px; width: auto; }
.btn.big { padding: 16px 24px; font-size: 15px; }

.btn-primary {
  background: var(--emerald);
  color: var(--void);
}
.btn-primary:hover { background: var(--emerald-bright); }
.btn-primary:disabled { background: var(--gray-400); cursor: not-allowed; }

.btn-secondary {
  background: var(--slate);
  color: var(--gray-100);
  border: 1px solid var(--border-light);
}
.btn-secondary:hover { border-color: var(--emerald); color: var(--white); }

.btn-text {
  background: none;
  border: none;
  color: var(--gray-200);
  cursor: pointer;
  font-size: 13px;
  padding: 6px 12px;
}
.btn-text:hover { color: var(--white); }

.auth-switch {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-200);
}

/* Forgot password link */
.forgot-link {
  text-align: right;
  margin-bottom: 16px;
}
.forgot-link a {
  font-size: 12px;
  color: var(--gray-200);
  cursor: pointer;
}
.forgot-link a:hover { color: var(--emerald); }

/* Login options row — "Angemeldet bleiben" + "Passwort vergessen" */
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-100, #ddd);
  cursor: pointer;
  user-select: none;
}
.checkbox-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--emerald, #7cb342);
  cursor: pointer;
  margin: 0;
}
.forgot-inline {
  font-size: 12px;
  color: var(--gray-200);
  cursor: pointer;
  text-decoration: none;
}
.forgot-inline:hover { color: var(--emerald); }

/* Success message (forgot/reset password) */
.success {
  color: var(--emerald);
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 18px;
  padding: 10px 12px;
  background: var(--emerald-soft);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  display: none;
}
.success:not(:empty) { display: block; }

/* ============================================================
   PLAN PICKER (registration)
   ============================================================ */
.plan-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 520px) {
  .plan-picker {
    grid-template-columns: 1fr;
  }
  .plan-option.featured {
    order: -1;
  }
}
.plan-option {
  position: relative;
  background: var(--slate);
  border: 2px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 20px 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: block;
}
.plan-option:hover {
  border-color: var(--border-accent);
}
.plan-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.plan-option input[type="radio"]:checked + .plan-info {
  /* Visual handled via parent class */
}
.plan-option:has(input[type="radio"]:checked) {
  border-color: var(--emerald);
  background: rgba(124, 179, 66, 0.08);
}
.plan-option.featured {
  border-color: var(--emerald);
}
.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--emerald);
  color: var(--void);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-info { text-align: center; }
.plan-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.plan-sub {
  font-size: 12px;
  color: var(--gray-100);
  margin-bottom: 8px;
}
.plan-total {
  font-size: 11px;
  color: var(--emerald);
  font-weight: 600;
}

/* Payment notice in register form */
.payment-notice {
  background: var(--emerald-soft);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gray-100);
  margin-bottom: 16px;
  line-height: 1.5;
}
.payment-notice small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 193, 7, 0.85);
  font-size: 12px;
}

/* Auto-renewal disclosure — must be visually prominent (BGH §305c) */
.renewal-disclosure {
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid #d4af37;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gray-100);
  margin: 12px 0 24px;
  line-height: 1.55;
}
.renewal-disclosure strong { color: #d4af37; }

/* ============================================================
   TRIAL BADGE (header) + BANNER (dashboard)
   ============================================================ */
.trial-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.15), rgba(212, 175, 55, 0.1));
  border: 1px solid var(--border-accent);
  border-radius: 16px;
  font-size: 12px;
  color: var(--emerald);
  font-weight: 600;
  white-space: nowrap;
}

.trial-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, var(--onyx), var(--slate));
  border: 1px solid var(--border-accent);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.trial-info { flex: 1; min-width: 200px; }
.trial-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 4px;
}
.trial-meta {
  font-size: 13px;
  color: var(--gray-100);
}
.trial-progress {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trial-bar {
  height: 8px;
  background: var(--void);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.trial-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--emerald-bright));
  border-radius: 4px;
  transition: width 0.3s var(--ease);
}
.trial-numbers {
  font-size: 12px;
  color: var(--gray-200);
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   UPGRADE MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}
.modal {
  background: var(--onyx);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-lg);
  padding: 40px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s var(--ease);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.modal h2 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  color: var(--white);
  margin: 0 0 12px;
}
.modal p {
  color: var(--gray-100);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}
.modal-actions .btn { width: auto; }

.onboarding-title {
  margin-top: 24px;
  text-align: center;
  font-size: 26px;
}
.onboarding-sub {
  text-align: center;
  color: var(--gray-200);
  margin: 8px 0 32px;
}

/* ============================================================
   APP HEADER
   ============================================================ */
.app-header {
  background: var(--obsidian);
  border-bottom: 1px solid var(--border-light);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
}
.app-header .logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-header .logo-tiles { width: 28px; height: 28px; }
.app-header .logo-tiles .t { border-radius: 2px; }
.app-header .logo-text { font-size: 16px; line-height: 1; }
.app-header .logo-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.app-header-slogan {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  font-weight: 500;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--emerald-soft);
  border: 1px solid var(--border-accent);
  border-radius: 16px;
  font-size: 12px;
  color: var(--emerald);
  font-weight: 500;
}

/* ============================================================
   APP CONTENT / PAGES
   ============================================================ */
.app-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.page { display: none; animation: fadeIn 0.3s var(--ease); }
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.subtitle { color: var(--gray-200); margin-bottom: 32px; }
.section-title { margin-top: 40px; }

.back-btn {
  background: none;
  border: none;
  color: var(--gray-200);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 0;
}
.back-btn:hover { color: var(--white); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 20px 24px;
}
.stat-value {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.stat-value.emerald { color: var(--emerald); }
.stat-label {
  font-size: 12px;
  color: var(--gray-200);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════════════════
   KPI-Karten (Dashboard Phase 3): Pipeline · Aufträge · Offen · Quote
   ════════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

/* Reihe 2: 2 Karten in voller Breite, etwas luftiger */
.kpi-grid.kpi-grid-secondary {
  grid-template-columns: repeat(2, 1fr);
  margin-top: -12px;  /* näher an Reihe 1 */
}
.kpi-value.kpi-value-emerald { color: #8bc34a; }
.kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(124,179,66,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border-light);
  border-radius: 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.kpi-card:hover {
  border-color: rgba(124,179,66,0.3);
  transform: translateY(-1px);
}
.kpi-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124,179,66,0.08);
  border: 1px solid rgba(124,179,66,0.2);
  border-radius: 10px;
  flex-shrink: 0;
  color: #8bc34a;
}
.kpi-icon svg {
  width: 22px;
  height: 22px;
}
.kpi-body { flex: 1; min-width: 0; }
.kpi-label {
  font-size: 11px;
  color: var(--text-muted, #9aa5b8);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  font-weight: 500;
}
.kpi-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary, #e4e8ef);
  line-height: 1.1;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-card.kpi-orders .kpi-value { color: #8bc34a; }
.kpi-card.kpi-pipeline .kpi-value { color: var(--text-primary, #e4e8ef); }
.kpi-sub {
  font-size: 11px;
  color: var(--text-muted, #9aa5b8);
  line-height: 1.3;
}
@media (max-width: 920px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-grid.kpi-grid-secondary { grid-template-columns: repeat(2, 1fr); }
  .kpi-card { padding: 14px 16px; gap: 12px; }
  .kpi-icon { width: 38px; height: 38px; }
  .kpi-icon svg { width: 18px; height: 18px; }
  .kpi-value { font-size: 18px; }
}
@media (max-width: 480px) {
  .kpi-card { padding: 12px 14px; gap: 10px; }
  .kpi-icon { width: 34px; height: 34px; }
  .kpi-icon svg { width: 16px; height: 16px; }
  .kpi-value { font-size: 16px; }
  .kpi-label { font-size: 10px; }
  .kpi-sub { font-size: 10px; }
}

/* "Nachfassen!"-Filter-Pill mit roter Akzent + Counter-Badge */
.status-filter-followup {
  position: relative;
  border-color: rgba(255, 152, 0, 0.35) !important;
  color: #ffa726 !important;
}
.status-filter-followup:hover {
  background: rgba(255, 152, 0, 0.08) !important;
  border-color: rgba(255, 152, 0, 0.6) !important;
}
.status-filter-followup.active {
  background: rgba(255, 152, 0, 0.15) !important;
  border-color: #ffa726 !important;
  color: #ffb74d !important;
}
.followup-count {
  display: inline-block;
  margin-left: 6px;
  background: #ff9800;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

/* Quote-Item-Status-Hervorhebung: grüner Rand bei accepted, grau bei rejected */
.quote-item-accepted {
  border-left: 3px solid #8bc34a !important;
}
.quote-item-rejected {
  border-left: 3px solid rgba(180, 180, 180, 0.4) !important;
  opacity: 0.78;
}

/* Item rechte Spalte: Preis + Sekundär-Info gestackt */
.quote-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 130px;
}
.quote-item-right .quote-item-price {
  margin: 0;
}
.quote-item-right .btn-quote-del {
  margin-top: 4px;
}
.quote-item-secondary {
  font-size: 11px;
  color: var(--text-muted, #9aa5b8);
  white-space: nowrap;
}
.quote-secondary-accepted {
  color: #8bc34a;
  font-weight: 500;
}
.quote-secondary-rejected {
  color: rgba(180, 180, 180, 0.7);
}
.quote-secondary-followup {
  color: #ffa726;
  font-weight: 500;
}

.action-card {
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 32px;
}
.action-card:hover {
  border-color: var(--border-accent);
  background: var(--slate);
}
.action-card.big {
  padding: 32px;
  text-align: center;
}
.action-mic-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--emerald); color: #04060c;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px auto;
  transition: transform 0.2s;
}
.action-card.big:hover .action-mic-icon { transform: scale(1.08); }
.action-icon { font-size: 32px; margin-bottom: 12px; }
.action-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.action-desc { font-size: 14px; color: var(--gray-200); }

.quote-list { display: flex; flex-direction: column; gap: 8px; }

/* Mic area on new-quote page */
.mic-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.mic-area .mic-button {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  cursor: pointer;
  margin-bottom: 12px;
}
.mic-area .mic-status {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.mic-area .mic-timer {
  font-size: 13px;
  color: var(--emerald);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.draft-or {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  margin: 12px 0;
  letter-spacing: 0.5px;
}


.dashboard-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.search-input {
  width: 100%; padding: 10px 14px; background: var(--slate);
  border: 1px solid var(--border-light); border-radius: 8px;
  color: var(--white); font-size: 14px; font-family: inherit; outline: none;
}
.search-input:focus { border-color: var(--emerald); }
.search-input::placeholder { color: var(--text-muted); }
.status-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.status-filter {
  padding: 5px 12px; font-size: 12px; border-radius: 20px;
  border: 1px solid var(--border-light); background: transparent;
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.status-filter:hover { border-color: var(--emerald); color: var(--white); }
.status-filter.active { background: var(--emerald); border-color: var(--emerald); color: #04060c; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   KUNDENPORTAL STATUS BANNER im Quote-Editor
   Zeigt prominent ob Kunde das Angebot geöffnet/angenommen/abgelehnt
   ═══════════════════════════════════════════════════════════════ */
.portal-status-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  margin: 16px 0 24px;
  border: 1px solid;
}
.portal-status-banner.portal-accepted {
  background: rgba(124, 179, 66, 0.08);
  border-color: rgba(124, 179, 66, 0.4);
  box-shadow: 0 0 0 4px rgba(124, 179, 66, 0.05);
}
.portal-status-banner.portal-rejected {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}
.portal-status-banner.portal-viewed {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}
.portal-status-banner.portal-pending {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* AGB-Warning-Banner — dezent amber, nur sichtbar wenn keine AGB hinterlegt */
.agb-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 12px 0 20px;
  background: rgba(212, 175, 55, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.3);
  position: relative;
}
.agb-warning-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}
.agb-warning-body {
  flex: 1;
  min-width: 0;
}
.agb-warning-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #e4e8ef);
  margin-bottom: 4px;
}
.agb-warning-text {
  font-size: 13px;
  color: var(--text-secondary, #9aa3b0);
  line-height: 1.55;
  margin-bottom: 10px;
}
.agb-warning-cta {
  width: auto;
}
.agb-warning-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted, #666);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.agb-warning-dismiss:hover { color: var(--text-primary, #e4e8ef); }
.portal-status-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.portal-accepted .portal-status-icon {
  background: #7cb342;
  color: #fff;
}
.portal-rejected .portal-status-icon {
  background: #ef4444;
  color: #fff;
}
.portal-viewed .portal-status-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  font-size: 18px;
}
.portal-pending .portal-status-icon {
  background: rgba(255,255,255,0.1);
  color: #9aa5b8;
  font-size: 18px;
}
.portal-status-body { flex: 1; min-width: 0; }
.portal-status-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary, #e4e8ef);
  margin-bottom: 3px;
}
.portal-accepted .portal-status-title { color: #8bc34a; }
.portal-rejected .portal-status-title { color: #f87171; }
.portal-viewed .portal-status-title { color: #93c5fd; }
.portal-status-meta {
  font-size: 12px;
  color: var(--text-secondary, #c8d0dc);
  line-height: 1.5;
}
.quote-status {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  margin-left: 6px; vertical-align: middle;
}
.status-draft    { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.status-sent     { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.status-accepted {
  background: rgba(124,179,66,0.18);
  color: #8bc34a;
  border: 1px solid rgba(124,179,66,0.4);
  padding-left: 18px;
  position: relative;
}
.status-accepted::before {
  content: '';
  position: absolute;
  left: 7px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8bc34a;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(124,179,66,0.6);
  animation: accepted-pulse 2.2s ease-out infinite;
}
@keyframes accepted-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,179,66,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(124,179,66,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,179,66,0); }
}
.status-rejected { background: rgba(239,68,68,0.15);   color: #f87171; }

/* "Gesehen" indicator — kleiner Eye-Icon wenn Kunde das Angebot geöffnet hat */
.quote-viewed-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(124,179,66,0.7);
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 500;
}
.quote-viewed-indicator::before {
  content: '👁';
  font-size: 12px;
}


.quote-item {
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.quote-item:hover { border-color: var(--border-accent); }
.quote-item-title { color: var(--white); font-weight: 500; margin-bottom: 4px; }
.quote-doctype-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 8px;
  letter-spacing: 0.5px;
  vertical-align: 2px;
}
.quote-doctype-badge.doctype-ab {
  background: rgba(124, 179, 66, 0.18);
  color: #7cb342;
  border: 1px solid rgba(124, 179, 66, 0.45);
}
.quote-doctype-badge.doctype-invoice {
  background: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.45);
}
.quote-item-meta { font-size: 12px; color: var(--gray-200); }
.quote-item-price {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--emerald);
}

.empty {
  text-align: center;
  color: var(--gray-300);
  padding: 32px;
  background: var(--onyx);
  border: 1px dashed var(--border-light);
  border-radius: var(--r-md);
}

/* ============================================================
   NEW QUOTE / VOICE
   ============================================================ */
/* Textarea with integrated mic button */
.textarea-mic-wrap {
  position: relative;
  margin-bottom: 12px;
}
.textarea-mic-wrap .text-input {
  padding-bottom: 48px;
  resize: vertical;
}
.mic-inline-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--emerald);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 2;
}
.mic-inline-btn:hover {
  background: var(--emerald-bright);
  transform: scale(1.08);
}
.mic-inline-btn.recording {
  background: var(--red);
  animation: pulse-rec 1.5s infinite;
}
.mic-inline-btn .mic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--void);
}
.mic-inline-btn.recording .mic-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: white;
}
#mic-timer {
  position: absolute;
  bottom: 14px;
  right: 54px;
  font-size: 12px;
  color: var(--red);
  font-family: monospace;
}

@keyframes pulse-rec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.mic-status { color: var(--gray-200); font-size: 14px; }

.transcript-box {
  background: var(--onyx);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 24px;
}
.transcript-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.transcript-text { color: var(--white); font-size: 15px; line-height: 1.7; }

.text-input {
  width: 100%;
  padding: 16px;
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.text-input:focus { border-color: var(--emerald); }

.hint {
  background: var(--emerald-soft);
  border-left: 3px solid var(--emerald);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gray-100);
  margin: 16px 0;
}

.voice-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.btn-text-icon {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--gray-200);
  cursor: pointer;
  padding: 6px 14px;
  font-size: 12px;
  border-radius: var(--r-sm);
  font-family: inherit;
  transition: all 0.2s;
}
.btn-text-icon:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ============================================================
   PROCESSING
   ============================================================ */
.processing {
  text-align: center;
  padding: 80px 0;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-light);
  border-top-color: var(--emerald);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing-text { color: var(--gray-100); }

/* ============================================================
   QUOTE EDITOR
   ============================================================ */
.quote-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.extraction-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
.tag {
  padding: 4px 10px;
  background: var(--emerald-soft);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  font-size: 11px;
  color: var(--emerald);
  font-family: 'JetBrains Mono', monospace;
}

.positions-section { margin-top: 16px; }
.positions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.positions-header h2 { margin: 0; }

.positions-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.positions-actions-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border-light, rgba(255,255,255,0.1));
  margin: 0 4px;
}
.positions-actions-bottom {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light, rgba(255,255,255,0.08));
  justify-content: flex-end;
}

/* Primary-outline Variante — hebt den Haupt-CTA (Katalog) hervor
   ohne volle Primary-Fläche. Grüner Rand + grüner Text. */
.btn.btn-primary-outline {
  background: transparent;
  color: #8bc34a;
  border: 1px solid rgba(124, 179, 66, 0.55);
}
.btn.btn-primary-outline:hover {
  background: rgba(124, 179, 66, 0.08);
  border-color: rgba(124, 179, 66, 0.8);
}

/* Danger-Outline: Löschen-Button dezent, aber klar als destruktiv erkennbar */
.btn.btn-danger-outline {
  background: transparent;
  color: #e06060;
  border: 1px solid rgba(224, 96, 96, 0.35);
}
.btn.btn-danger-outline:hover {
  background: rgba(224, 96, 96, 0.08);
  border-color: rgba(224, 96, 96, 0.6);
  color: #f47373;
}

/* Mikrofon-Fehler-Banner: persistent, mit konkreter Anweisung
   für Dieter & andere die "Zugriff verweigert" erhalten */
.mic-error-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 20px auto 0;
  max-width: 480px;
  text-align: left;
}
.mic-error-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.mic-error-body {
  flex: 1;
  min-width: 0;
}
.mic-error-body strong {
  display: block;
  color: #f87171;
  font-size: 14px;
  margin-bottom: 6px;
}
.mic-error-msg {
  font-size: 13px;
  color: var(--text-secondary, #c8d0dc);
  line-height: 1.5;
  margin-bottom: 10px;
}
.mic-error-retry {
  background: rgba(124, 179, 66, 0.15);
  color: #8bc34a;
  border: 1px solid rgba(124, 179, 66, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.mic-error-retry:hover {
  background: rgba(124, 179, 66, 0.25);
}

@media (max-width: 720px) {
  .positions-actions-divider { display: none; }
  .positions-actions { width: 100%; }
}

.positions-list {
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
}
.section-group { border-bottom: 1px solid var(--border-light); }
.section-group:last-child { border-bottom: none; }
.section-header {
  background: var(--slate);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.position-row {
  display: grid;
  grid-template-columns: 24px 60px 1fr 80px 50px 90px 90px 32px;
  gap: 8px;
  padding: 10px 16px 4px 16px;
  border-bottom: none;
  align-items: center;
  font-size: 13px;
}
.position-row:last-child { border-bottom: none; }
.position-row:hover { background: var(--slate); }
.position-row.disabled { opacity: 0.4; }
.position-row.custom { background: rgba(124, 179, 66, 0.04); }
.position-row.material-needs-price {
  background: rgba(230, 177, 58, 0.06);
  border-left: 3px solid #e6b13a;
}
.material-hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  cursor: help;
  opacity: 0.85;
}
.pos-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--gray-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60px;
}
.pos-title { color: var(--white); }
.pos-engine-hint {
  display: block;
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(230, 177, 58, 0.08);
  border-left: 3px solid #e6b13a;
  border-radius: 3px;
  font-size: 12px;
  color: #d4af37;
  line-height: 1.4;
  font-weight: 400;
}
.pos-qty input,
.pos-price input {
  width: 100%;
  padding: 4px 8px;
  background: var(--void);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-size: 12px;
  font-family: inherit;
  text-align: right;
  outline: none;
}
.pos-qty input:focus,
.pos-price input:focus { border-color: var(--emerald); }
.pos-unit {
  font-size: 11px;
  color: var(--gray-300);
  font-family: 'JetBrains Mono', monospace;
}
.pos-total {
  text-align: right;
  font-weight: 600;
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.pos-delete {
  background: none;
  border: none;
  color: var(--gray-300);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
}
.pos-delete:hover { color: var(--red); }

/* Quote-Delete Button (in Angebotsliste und Kunden-Dokumentenliste) */
.btn-quote-del {
  background: transparent;
  border: 1px solid rgba(224, 96, 96, 0.25);
  color: rgba(224, 96, 96, 0.6);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
  min-width: 28px;
}
.btn-quote-del:hover {
  background: rgba(224, 96, 96, 0.1);
  border-color: rgba(224, 96, 96, 0.5);
  color: #e06060;
}

/* Voice recording tip above the mic */
.voice-tip {
  background: rgba(124, 179, 66, 0.07);
  border: 1px solid rgba(124, 179, 66, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-muted, #aaa);
  line-height: 1.5;
}
.voice-tip strong { color: var(--emerald, #7cb342); font-weight: 600; }
.voice-tip em { color: var(--text, #e8e8e8); font-style: normal; }

/* ═══ Profile completeness banner — siehe v3.5.0-Polish-Block am Ende der Datei ═══ */
/* Alte rote Variante entfernt — neuer Style ist in v3.5.0-Block (grün, mit Progress-Ring) */

/* Profile incomplete modal list */
.profile-incomplete-list {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  max-height: 220px;
  overflow-y: auto;
}
.profile-incomplete-list ul { margin: 0; padding: 0; list-style: none; }
.profile-incomplete-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  color: #e8e8e8;
}
.profile-incomplete-list li:last-child { border-bottom: none; }
.profile-incomplete-list li::before {
  content: '○ ';
  color: var(--text-muted);
  margin-right: 6px;
}

/* ═══ Contract info box (active subscription) ═══ */
.contract-banner {
  background: rgba(124, 179, 66, 0.04);
  border: 1px solid rgba(124, 179, 66, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.contract-banner.cancelled {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.3);
}
.contract-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.contract-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white, #e8e8e8);
  margin-bottom: 3px;
}
.contract-banner.cancelled .contract-title { color: #f59e0b; }
.contract-sub {
  font-size: 12px;
  color: var(--text-muted, #aaa);
}
.contract-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Danger-ghost button (for cancel action) */
.btn-ghost-danger {
  background: transparent;
  border: 1px solid rgba(224, 96, 96, 0.35);
  color: #e06060;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost-danger:hover {
  background: rgba(224, 96, 96, 0.1);
  border-color: rgba(224, 96, 96, 0.6);
}
/* ═══════════════════════════════════════════════════════════════ */
/* BAUDOKU — Projekt-Dokumentation                                 */
/* ═══════════════════════════════════════════════════════════════ */

/* Button-Bar oben in der Quote-Detail */
.quote-baudoku-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -4px 0 20px 0;
  padding: 12px 16px;
  background: rgba(124, 179, 66, 0.06);
  border: 1px solid rgba(124, 179, 66, 0.20);
  border-radius: 10px;
}
.quote-baudoku-hint {
  color: var(--text-muted);
  font-size: 12px;
}
@media (max-width: 600px) {
  .quote-baudoku-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.btn-ghost-emerald {
  background: transparent;
  color: #7cb342;
  border: 1px solid rgba(124, 179, 66, 0.40);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
}
.btn-ghost-emerald:hover {
  background: rgba(124, 179, 66, 0.10);
  border-color: rgba(124, 179, 66, 0.70);
}

.baudoku-count-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  background: #7cb342;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Baudoku Page */
.baudoku-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.baudoku-count {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: auto;
}
.baudoku-upload-progress {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(124, 179, 66, 0.08);
  border: 1px solid rgba(124, 179, 66, 0.30);
  border-radius: 8px;
}
.baudoku-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.baudoku-progress-fill {
  height: 100%;
  background: #7cb342;
  width: 0%;
  transition: width 0.2s;
}
.baudoku-progress-label {
  font-size: 12px;
  color: #7cb342;
}

.baudoku-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.baudoku-empty {
  text-align: center;
  padding: 48px 20px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 12px;
}
.baudoku-entry {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.baudoku-entry-type {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 179, 66, 0.15);
  color: #7cb342;
}
.baudoku-entry-type.is-note {
  background: rgba(180, 180, 180, 0.1);
  color: #aaa;
}
.baudoku-entry-body { flex: 1; min-width: 0; }
.baudoku-entry-time {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.baudoku-entry-exif-time {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 2px;
  margin-bottom: 6px;
  opacity: 0.75;
}

/* Baudoku Share-Button oben rechts */
.baudoku-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.baudoku-share-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(124, 179, 66, 0.12);
  color: #7cb342;
  border: 1px solid rgba(124, 179, 66, 0.3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.baudoku-share-btn:hover {
  background: rgba(124, 179, 66, 0.2);
  border-color: rgba(124, 179, 66, 0.5);
}
.baudoku-share-btn.active {
  background: rgba(212, 175, 55, 0.12);
  color: #d4af37;
  border-color: rgba(212, 175, 55, 0.4);
}

/* Share-Modal interior */
.share-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.share-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.share-benefit-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.share-url-box {
  padding: 14px;
  background: rgba(124, 179, 66, 0.06);
  border: 1px solid rgba(124, 179, 66, 0.25);
  border-radius: 8px;
}
.share-url-label {
  font-size: 11px;
  color: #7cb342;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 8px;
}
.share-url-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.share-url-input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-family: 'SF Mono', Monaco, monospace;
  min-width: 0;
}
.share-channel-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.share-channel-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.share-channel-btn-danger {
  color: #e06060;
  border-color: rgba(224, 96, 96, 0.3);
}
.share-channel-btn-danger:hover {
  background: rgba(224, 96, 96, 0.08);
  color: #ff7878;
}
.share-hint {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.15);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}

/* Katalog-Picker */
.catalog-search-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}
.catalog-search-input:focus {
  outline: none;
  border-color: #7cb342;
}
.catalog-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  max-height: 140px;
  overflow-y: auto;
  flex-shrink: 0;
}
.catalog-filter-chips::-webkit-scrollbar { width: 6px; }
.catalog-filter-chips::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

.catalog-section-chip {
  display: inline-flex;
  padding: 5px 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
  white-space: nowrap;
}
.catalog-section-chip:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.catalog-section-chip.active {
  background: rgba(124, 179, 66, 0.18);
  color: #7cb342;
  border-color: rgba(124, 179, 66, 0.45);
}
.catalog-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-top: 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.15);
  min-height: 240px;
}
.catalog-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.12s;
  gap: 12px;
}
.catalog-item:hover {
  background: rgba(124, 179, 66, 0.08);
}
.catalog-item:last-child { border-bottom: none; }
.catalog-item-title {
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  flex: 1;
  min-width: 0;
}
.catalog-item-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.catalog-item-id {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  font-family: 'SF Mono', Monaco, monospace;
}
.catalog-item-section {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(124, 179, 66, 0.1);
  color: rgba(124, 179, 66, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.catalog-item-unit {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  padding: 2px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  min-width: 40px;
  text-align: center;
}
.catalog-empty {
  text-align: center;
  color: rgba(255,255,255,0.4);
  padding: 40px 20px;
  font-size: 13px;
}

/* Qty overlay (within catalog modal) */
.catalog-qty-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4,6,12,0.92);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 5;
}
.catalog-qty-box {
  width: 100%;
  max-width: 480px;
}

/* Voice-Recording Modal */
.voice-recording-visual {
  margin: 28px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.voice-mic-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(124, 179, 66, 0.12);
  color: #7cb342;
  border: 2px solid rgba(124, 179, 66, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.voice-mic-circle.recording {
  background: rgba(224, 96, 96, 0.12);
  color: #e06060;
  border-color: rgba(224, 96, 96, 0.5);
  animation: voice-pulse 1.6s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 96, 96, 0.4); }
  50% { box-shadow: 0 0 0 18px rgba(224, 96, 96, 0); }
}
.voice-timer {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2px;
}

/* Audio-Player in Timeline-Eintrag */
.baudoku-entry-audio {
  margin: 6px 0 4px;
  width: 100%;
  max-width: 420px;
  height: 36px;
}

.baudoku-entry-thumb {
  width: 160px;
  height: 120px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  display: block;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 600px) {
  .baudoku-entry-thumb { width: 100%; height: auto; max-height: 220px; }
}
.baudoku-entry-desc {
  color: var(--text-primary, #fff);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.baudoku-entry-content {
  color: var(--text-primary, #fff);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.baudoku-entry-gps {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.baudoku-entry-gps a {
  color: #7cb342;
  text-decoration: none;
}
.baudoku-entry-gps a:hover { text-decoration: underline; }
.baudoku-entry-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  opacity: 0.6;
  transition: opacity 0.15s;
  align-self: flex-start;
}
.baudoku-entry-delete:hover { opacity: 1; color: #e06060; }

/* Upload-Bestätigungs-Modal */
.confirm-meta {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 16px;
}
.confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  gap: 12px;
}
.confirm-row + .confirm-row {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.confirm-label {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.confirm-value {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}
.confirm-value.warning {
  color: #f59e0b;
}
.confirm-extras {
  margin-top: 14px;
}
.confirm-checkboxes {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  transition: background 0.15s;
}
.confirm-checkbox:hover { background: rgba(255,255,255,0.04); }
.confirm-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #7cb342;
  width: 15px;
  height: 15px;
}
.confirm-checkbox span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-primary, #fff);
}

/* Evidence badge on entries */
.baudoku-entry-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.evidence-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.evidence-badge.gps-exif {
  background: rgba(124, 179, 66, 0.18);
  color: #8bc34a;
  border: 1px solid rgba(124, 179, 66, 0.35);
}
.evidence-badge.gps-browser {
  background: rgba(124, 179, 66, 0.08);
  color: #8bc34a;
  border: 1px solid rgba(124, 179, 66, 0.20);
}
.evidence-badge.gps-none {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.evidence-badge.watermarked {
  background: rgba(78, 146, 242, 0.12);
  color: #4e92f2;
  border: 1px solid rgba(78, 146, 242, 0.28);
}
.evidence-badge.hash {
  background: rgba(180, 180, 180, 0.08);
  color: #bbb;
  border: 1px solid rgba(180, 180, 180, 0.20);
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 9.5px;
}

/* Cancel-modal actions — buttons centered */
#cancel-modal .modal-actions {
  justify-content: center !important;
}

/* Autosave-Pill — sticky status indicator at top of settings page */
.autosave-pill {
  position: sticky;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(124, 179, 66, 0.12);
  border: 1px solid rgba(124, 179, 66, 0.30);
  color: #7cb342;
  margin: 0 0 16px 0;
  z-index: 10;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}
.autosave-pill .autosave-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cb342;
  flex-shrink: 0;
}
.autosave-pill[data-state="saving"] {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.30);
  color: #f59e0b;
}
.autosave-pill[data-state="saving"] .autosave-dot {
  background: #f59e0b;
  animation: autosave-pulse 0.8s ease-in-out infinite;
}
.autosave-pill[data-state="error"] {
  background: rgba(224, 96, 96, 0.12);
  border-color: rgba(224, 96, 96, 0.30);
  color: #e06060;
}
.autosave-pill[data-state="error"] .autosave-dot {
  background: #e06060;
}
@keyframes autosave-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.btn-ghost-danger.small { padding: 6px 12px; font-size: 12px; }

/* ═══ Support modal (Telegram-backed) ═══ */
.btn-support {
  color: var(--emerald, #7cb342) !important;
}
.support-textarea {
  width: 100%;
  min-height: 140px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--white, #e8e8e8);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 16px;
  resize: vertical;
  box-sizing: border-box;
}
.support-textarea:focus {
  outline: none;
  border-color: rgba(124, 179, 66, 0.5);
}
.support-char-count {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted, #aaa);
  margin-top: 6px;
}
.support-tg-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(38, 165, 228, 0.08);
  border: 1px solid rgba(38, 165, 228, 0.25);
  border-radius: 10px;
  margin-top: 20px;
}
.support-tg-icon { flex-shrink: 0; }
.support-tg-text { flex: 1; }
.support-tg-text strong { font-size: 14px; color: var(--white, #e8e8e8); }

/* SEPA payment banner — shown during trial under the trial-banner */
.sepa-banner {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.03));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 24px;
}
.sepa-banner-title {
  font-size: 14px;
  color: #d4af37;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.sepa-banner-text {
  font-size: 14px;
  color: var(--white, #e8e8e8);
  line-height: 1.55;
  margin-bottom: 14px;
}
.sepa-banner-text strong { color: #d4af37; }
.sepa-banner-details {
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.sepa-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
}
.sepa-row:last-child { border-bottom: none; }
.sepa-label {
  color: var(--text-muted, #888);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  flex-shrink: 0;
}
.sepa-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--white, #e8e8e8);
  font-size: 13px;
  text-align: right;
  word-break: break-all;
}
.sepa-value.sepa-copy {
  cursor: pointer;
  transition: color 0.15s;
}
.sepa-value.sepa-copy:hover { color: var(--emerald, #7cb342); }
.sepa-value.sepa-copy::after {
  content: ' ⧉';
  font-size: 11px;
  opacity: 0.5;
  font-family: inherit;
}
.sepa-row-amount {
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  margin-top: 4px;
  padding-top: 10px !important;
}
.sepa-value-amount {
  color: #d4af37 !important;
  font-size: 16px !important;
  font-weight: 700;
}
.sepa-row-detail {
  border-bottom: none !important;
  padding: 0 !important;
  margin-top: -4px;
}
.sepa-value-detail {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted, #888);
  font-size: 11px;
  text-align: right;
}
.sepa-banner-foot {
  font-size: 12px;
  color: var(--text-muted, #888);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 520px) {
  .sepa-banner { padding: 16px; }
  .sepa-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sepa-value { text-align: left; font-size: 12px; }
}

/* Per-position notes field */
/* v3.5: opacity 0.3 → 0.5 damit Mobile-User den Drag-Handle überhaupt sieht.
   touch-action: none verhindert dass System-Scrolling das Touch-Event klaut
   bevor Sortable.js es verarbeitet. */
.pos-drag {
  cursor: grab; color: var(--text-muted); opacity: 0.5; font-size: 16px;
  padding: 4px 6px; user-select: none; flex-shrink: 0; text-align: center;
  touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pos-drag:hover { opacity: 0.9; }
.pos-drag:active { cursor: grabbing; opacity: 1; }
.position-wrap--ghost  { opacity: 0.4; background: var(--slate) !important; }
.position-wrap--chosen { background: var(--slate); }
.position-row--chosen  { background: var(--slate); }
.position-row--drag    { box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: grabbing; }
.pos-title-col { display: contents; }
.pos-title { color: var(--white); }
.pos-notes-row {
  padding: 0 16px 8px 100px;
  border-bottom: 1px solid var(--border-subtle);
}
.pos-notes-input {
  width: 100%; font-size: 11px; color: var(--text-muted);
  background: transparent; border: none; border-bottom: 1px dashed transparent;
  resize: none; padding: 2px 0; line-height: 1.4; font-family: inherit;
  transition: border-color 0.15s; outline: none; overflow: hidden; min-height: 18px;
}
.pos-notes-input::placeholder { color: var(--text-muted); opacity: 0.35; font-style: italic; }
.pos-notes-input:focus { border-bottom-color: var(--emerald); color: var(--text-primary); }
.pos-notes-wrap.has-notes .pos-notes-input { color: var(--text-secondary); }

.add-position {
  margin-top: 16px;
  padding: 20px;
  background: var(--onyx);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-md);
}
.add-position h3 { margin-top: 0; }
.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.totals-box {
  margin-top: 24px;
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 20px 24px;
}
.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: var(--gray-100);
  font-family: 'JetBrains Mono', monospace;
}
.total-row.final {
  border-top: 2px solid var(--emerald);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
}

.disclaimer {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--gold);
}

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-card {
  background: var(--onyx);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 32px;
}
.settings-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.settings-actions .btn { width: auto; }
.saved-indicator {
  color: var(--emerald);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s;
}
.saved-indicator.visible { opacity: 1; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--onyx);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  padding: 12px 20px;
  color: var(--white);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--ease);
  z-index: 1000;
  max-width: 90%;
}
.toast.visible { transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--red); }
.toast.success { border-color: var(--emerald); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .app-content { padding: 24px 16px 80px; }
  .auth-card { padding: 24px; }
  .row { flex-direction: column; gap: 0; }
  .row .field { margin-bottom: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .position-row {
    grid-template-columns: 1fr 70px 70px 32px;
    gap: 6px;
  }
  .pos-id, .pos-unit { display: none; }
  .quote-header { flex-direction: column; }
  h1 { font-size: 22px; }
}

/* ============================================================
   GLASSMORPHISM POLISH (Phase 0a)
   Overrides existing card surfaces with glass-style design.
   Loaded last so these rules win against earlier definitions.
   ============================================================ */

/* Auth screens — glassmorphic auth card */
.auth-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: 18px;
}

/* Auth backdrop — radial gradient glow */
#screen-login,
#screen-register,
#screen-forgot,
#screen-reset,
#screen-onboarding {
  position: relative;
}
#screen-login::before,
#screen-register::before,
#screen-forgot::before,
#screen-reset::before,
#screen-onboarding::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(124, 179, 66, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.auth-container {
  position: relative;
  z-index: 1;
}

/* App header — glass bar */
.app-header {
  background: linear-gradient(
    180deg,
    rgba(8, 12, 22, 0.8) 0%,
    rgba(8, 12, 22, 0.6) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Trial badge — refined glass pill */
.trial-badge {
  background: linear-gradient(
    135deg,
    rgba(124, 179, 66, 0.12) 0%,
    rgba(212, 175, 55, 0.06) 100%
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 179, 66, 0.25);
  box-shadow: 0 0 24px rgba(124, 179, 66, 0.08);
}

/* Trial banner — premium glass card */
.trial-banner {
  background: linear-gradient(
    135deg,
    rgba(124, 179, 66, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(212, 175, 55, 0.04) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(124, 179, 66, 0.15);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(124, 179, 66, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Stat cards */
.stat-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 14px;
}
.stat-card:hover {
  border-color: rgba(124, 179, 66, 0.2);
  transform: translateY(-2px);
}

/* Action card — bigger glass surface */
.action-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(124, 179, 66, 0.02) 100%
  );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-card:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(124, 179, 66, 0.05) 100%
  );
  border-color: rgba(124, 179, 66, 0.25);
  transform: translateY(-3px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(124, 179, 66, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Settings card — glassmorphic panel */
.settings-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Modal — premium glass modal */
.modal-overlay {
  background: rgba(4, 6, 12, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.modal {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(124, 179, 66, 0.03) 100%
  );
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(124, 179, 66, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Voice mic button — glass orb */
.mic-button {
  background: linear-gradient(
    135deg,
    rgba(124, 179, 66, 0.15) 0%,
    rgba(124, 179, 66, 0.05) 100%
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 179, 66, 0.3);
  box-shadow:
    0 8px 32px rgba(124, 179, 66, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mic-button:hover {
  background: linear-gradient(
    135deg,
    rgba(124, 179, 66, 0.22) 0%,
    rgba(124, 179, 66, 0.08) 100%
  );
  border-color: rgba(124, 179, 66, 0.5);
  box-shadow:
    0 12px 40px rgba(124, 179, 66, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: scale(1.02);
}

/* Transcript box */
.transcript-box {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

/* Plan picker — glass cards */
.plan-option {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.plan-option:hover {
  border-color: rgba(124, 179, 66, 0.3);
}
.plan-option:has(input[type="radio"]:checked) {
  background: linear-gradient(
    135deg,
    rgba(124, 179, 66, 0.1) 0%,
    rgba(124, 179, 66, 0.02) 100%
  );
  border-color: rgba(124, 179, 66, 0.4);
  box-shadow:
    0 8px 24px rgba(124, 179, 66, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.plan-option.featured {
  border-color: rgba(124, 179, 66, 0.3);
}

/* Payment notice — clean glass */
.payment-notice {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.06) 0%,
    rgba(124, 179, 66, 0.03) 100%
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
}

/* Disclaimer — refined neutral glass */
.disclaimer {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13px;
  color: var(--gray-100);
  margin-top: 24px;
}

/* Hint — refined neutral glass */
.hint {
  background: rgba(124, 179, 66, 0.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 179, 66, 0.12);
  border-left: 3px solid var(--emerald);
}

/* ============================================================
   ICON REMOVAL — Phase 0a fix
   ============================================================ */
.action-icon {
  display: none !important;
}
.action-card {
  text-align: center;
  padding: 40px 32px;
}
.action-card.big {
  padding: 56px 32px;
}
.action-card .action-title {
  font-size: 22px;
  margin-bottom: 8px;
}

/* Mic dot — replaces SVG mic icon */
.mic-button svg { display: none; }
.mic-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.mic-dot {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 24px rgba(124, 179, 66, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mic-button.recording .mic-dot {
  background: #ef4444;
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.6);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ============================================================
   PHASE 1 — Settings Form Elements
   ============================================================ */

/* Required field indicator */
.req {
  color: var(--emerald);
  font-weight: 700;
  margin-left: 2px;
}

/* Subtitle inside settings cards */
.settings-card-sub {
  font-size: 13px;
  color: var(--gray-200);
  margin: -8px 0 20px;
  line-height: 1.5;
  max-width: 640px;
}

/* Hint text under input fields */
.field-hint {
  font-size: 11px;
  color: var(--gray-200);
  margin-top: 6px;
  margin-bottom: 8px;
  line-height: 1.4;
  letter-spacing: 0.1px;
}

.auto-distance-info {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(124, 179, 66, 0.08);
  border: 1px solid rgba(124, 179, 66, 0.25);
  border-left: 3px solid #7cb342;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary, #c4cad6);
}
.auto-distance-info strong {
  color: #7cb342;
  font-weight: 600;
}

/* Select dropdown — match input style */
.field select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field select:focus {
  outline: none;
  border-color: var(--emerald);
  background-color: rgba(124, 179, 66, 0.04);
}
.field select option {
  background: var(--void);
  color: var(--white);
}

/* Textarea — match input style with monospace-friendly look */
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
  transition: all 0.2s;
}
.field textarea:focus {
  outline: none;
  border-color: var(--emerald);
  background-color: rgba(124, 179, 66, 0.04);
}

/* Settings card spacing for the new larger form */
.settings-card {
  padding: 32px;
  margin-bottom: 24px;
}
.settings-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--white);
  letter-spacing: -0.2px;
}
.settings-card h3:not(:first-child) {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ============================================================
   PHASE 2 — Logo Upload UI
   ============================================================ */

.logo-upload-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 16px;
}
@media (max-width: 720px) {
  .logo-upload-area {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Logo preview surface — glass card */
.logo-preview {
  width: 100%;
  min-height: 160px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(10px);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.logo-preview img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}
.logo-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gray-200);
}
.logo-preview-empty-text {
  font-size: 13px;
  letter-spacing: 0.2px;
}

.logo-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.logo-upload-actions .btn {
  width: auto;
  min-width: 180px;
}

.logo-status {
  font-size: 13px;
  margin-top: 4px;
  min-height: 18px;
  letter-spacing: 0.2px;
}
.logo-status.uploading { color: var(--gray-100); }
.logo-status.success { color: var(--emerald); }
.logo-status.error { color: #ef4444; }

/* ============================================================
   PHASE 3 — Quote Editor sections
   ============================================================ */

/* Quote number badge above title */
.quote-number-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.quote-number-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-200);
  font-weight: 600;
}
.quote-number {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 14px;
  color: var(--emerald);
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(124, 179, 66, 0.08);
  border: 1px solid rgba(124, 179, 66, 0.18);
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* Collapsible quote sections */
.quote-section {
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.quote-section[open] {
  border-color: rgba(255, 255, 255, 0.1);
}

.quote-section summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.2s;
}
.quote-section summary::-webkit-details-marker { display: none; }
.quote-section summary:hover { background: rgba(255, 255, 255, 0.02); }

.section-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(124, 179, 66, 0.4);
  flex-shrink: 0;
  transition: all 0.2s;
}
.quote-section[open] .section-icon {
  background: var(--emerald);
  box-shadow: 0 0 12px rgba(124, 179, 66, 0.5);
}

.section-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  color: var(--white);
  font-weight: 600;
  letter-spacing: -0.1px;
  flex: 1;
}

.section-status {
  font-size: 12px;
  color: var(--gray-200);
  letter-spacing: 0.2px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}
.section-status.warning {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.18);
}

.section-body {
  padding: 8px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Checkbox label for "Baustelle wie Rechnung" */
.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--gray-100) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 0 !important;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--emerald);
  cursor: pointer;
}

/* Save bar at bottom of quote */
.quote-save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 179, 66, 0.15);
  border-radius: 14px;
  flex-wrap: wrap;
}
.quote-save-bar .btn {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
}
.quote-save-bar .btn.btn-primary {
  min-width: 180px;  /* Haupt-CTA hat Platz */
}
.quote-save-bar .logo-status {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted, #9aa5b8);
}
@media (max-width: 720px) {
  .quote-save-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 8px;
  }
  .quote-save-bar .btn {
    width: 100%;
    min-width: 0 !important;
  }
  .quote-save-bar .logo-status {
    margin-left: 0;
    text-align: center;
  }
}

/* Date input styling */
.field input[type="date"] {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
  color-scheme: dark;
}
.field input[type="date"]:focus {
  outline: none;
  border-color: var(--emerald);
}
.field input[type="date"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   PHASE 4a — Draft Workflow
   ============================================================ */

.draft-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-200);
  font-weight: 600;
  margin: 24px 0 12px;
}

/* Sessions list — bubbles showing each recording */
.draft-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.draft-session-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.2s;
}
.draft-session-card:hover {
  border-color: rgba(124, 179, 66, 0.18);
}

.draft-session-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(124, 179, 66, 0.12);
  border: 1px solid rgba(124, 179, 66, 0.3);
  color: var(--emerald);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.draft-session-text {
  font-size: 14px;
  color: var(--white);
  line-height: 1.5;
  word-break: break-word;
}

.draft-session-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-icon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--gray-100);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.btn-icon:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.btn-icon.danger:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

/* Live preview block */
.draft-preview {
  padding: 24px 28px;
  border-radius: 16px;
  margin-bottom: 24px;
}
.draft-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.draft-preview-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  color: var(--white);
  font-weight: 600;
}
.draft-preview-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.draft-preview-row:last-child { border-bottom: none; }
.draft-preview-row.total {
  padding-top: 14px;
  margin-top: 6px;
}
.draft-preview-row.total .draft-preview-value {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--emerald);
}
.draft-preview-label {
  width: 140px;
  color: var(--gray-200);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.draft-preview-value {
  flex: 1;
  color: var(--white);
}
.draft-preview-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 12px 0 6px;
}

.draft-feature-tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(124, 179, 66, 0.08);
  border: 1px solid rgba(124, 179, 66, 0.18);
  border-radius: 10px;
  font-size: 11px;
  color: var(--emerald);
  margin-right: 6px;
  margin-bottom: 4px;
}

/* Input block */
.draft-input-block {
  padding: 24px 0;
}

/* Bottom action bar */
.draft-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  margin-top: 32px;
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 179, 66, 0.15);
  border-radius: 14px;
  position: sticky;
  bottom: 24px;
  z-index: 50;
}
.draft-action-bar .btn-text {
  color: var(--gray-100);
}
.draft-action-bar .btn-text:hover {
  color: #ef4444;
}
.draft-action-bar .btn-primary {
  min-width: 220px;
}

/* "Hinzufügen" button styling */
#add-to-draft-btn {
  width: auto;
  min-width: 160px;
  margin-top: 16px;
}
#add-to-draft-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Meine Preise */
.price-search-row {
  margin-top: 14px;
  margin-bottom: 6px;
}
.price-overrides-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}
.price-section {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.15);
}
.price-section-title {
  padding: 9px 14px;
  background: rgba(124, 179, 66, 0.08);
  border-bottom: 1px solid rgba(124, 179, 66, 0.15);
  color: #7cb342;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.price-override-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: #e4e8ef;          /* hardcoded: nicht auf CSS-Var verlassen */
  min-height: 40px;        /* garantiert sichtbare Höhe auch ohne Content-Farbe */
  transition: background 0.12s;
}
.price-override-row:last-child { border-bottom: none; }
.price-override-row:hover { background: rgba(255,255,255,0.03); }
.price-override-row.has-override {
  background: rgba(124, 179, 66, 0.04);
}
.price-override-row.has-override .price-pos-title::before {
  content: '●';
  color: #7cb342;
  margin-right: 6px;
  font-size: 9px;
  vertical-align: middle;
}
.price-override-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.price-pos-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #9aa5b8;
  flex-shrink: 0;
  width: 52px;
}
.price-pos-title {
  color: #e4e8ef;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-override-input {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.price-override-input input {
  width: 80px;
  padding: 5px 8px;
  background: #04060c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  text-align: right;
  font-family: inherit;
  outline: none;
}
.price-override-input input:focus { border-color: #7cb342; }
.price-override-input input::placeholder { color: #9aa5b8; opacity: 0.6; }
.price-unit {
  font-size: 11px;
  color: #9aa5b8;
  white-space: nowrap;
  min-width: 40px;
}
.price-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.price-save-bar {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ════════════════════════════════════════════════════════════════
   MEIN MATERIAL — User-Material-Defaults
   ════════════════════════════════════════════════════════════════ */
.material-defaults-grid { display: block; }
.md-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-row {
  display: grid;
  grid-template-columns: 200px 1fr 130px 60px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--slate, #1a1a1a);
  border: 1px solid var(--border-subtle, #2a2a2a);
  border-radius: 8px;
}
.md-row.md-header {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #888);
  font-weight: 600;
}
.md-cat {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #fff);
}
.md-brand-input,
.md-price-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--card, #0f0f0f);
  border: 1px solid var(--border-subtle, #2a2a2a);
  border-radius: 6px;
  color: var(--text-primary, #fff);
  font-size: 14px;
}
.md-brand-input:focus,
.md-price-input:focus {
  outline: none;
  border-color: var(--emerald, #7cb342);
}
.md-price {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.md-price-input {
  text-align: right;
  padding-right: 24px;
}
.md-currency {
  position: absolute;
  right: 8px;
  color: var(--text-muted, #888);
  font-size: 13px;
  pointer-events: none;
}
.md-unit {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #888);
}
@media (max-width: 768px) {
  .md-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .md-row.md-header { display: none; }
  .md-cat::before { content: 'Kategorie · '; color: var(--text-muted, #888); font-weight: 400; font-size: 11px; }
  .md-brand-input::before { content: 'Anbieter'; }
  .md-unit::before { content: 'Einheit: '; }
}

/* ════════════════════════════════════════════════════════════════
   MULTI-ROOM — Draft Preview Cards
   ════════════════════════════════════════════════════════════════ */

.draft-room-card {
  background: var(--slate);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.draft-room-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.draft-room-icon { font-size: 14px; flex-shrink: 0; }
.draft-room-name-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 4px;
  outline: none;
  transition: border-color 0.15s;
}
.draft-room-name-input:hover,
.draft-room-name-input:focus { border-bottom-color: var(--emerald); }
.draft-room-floor-select {
  background: var(--void);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  padding: 3px 6px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.draft-room-floor-select:focus { border-color: var(--emerald); }
.draft-room-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.draft-room-dim {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 2px 8px;
}
.draft-feature-tag {
  font-size: 11px;
  color: var(--emerald);
  background: rgba(124,179,66,0.1);
  border-radius: 4px;
  padding: 2px 8px;
}
.draft-room-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.draft-room-items { font-size: 12px; color: var(--text-muted); }
.draft-room-price { font-size: 15px; font-weight: 700; color: var(--emerald); }

/* Phase 4c.2: Expandable position list inside room card */
.draft-room-positions {
  margin-top: 0;
}
.draft-room-positions > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.draft-room-positions > summary::-webkit-details-marker { display: none; }
.draft-room-positions > summary::marker { display: none; }
.draft-room-positions .expand-hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.draft-room-positions[open] .expand-hint {
  transform: rotate(180deg);
}
.position-list-compact {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 10px 0 0 0;
  border-top: 1px dashed var(--border-subtle);
}
.position-list-compact li {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.position-list-compact li:last-child { border-bottom: none; }
.position-list-compact .pos-id {
  font-family: ui-monospace, SF Mono, monospace;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}
.position-list-compact .pos-title {
  color: var(--text-primary, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.position-list-compact .pos-qty {
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
  min-width: 60px;
}
.position-list-compact .pos-total {
  color: var(--emerald);
  font-weight: 600;
  text-align: right;
  min-width: 64px;
}
@media (max-width: 480px) {
  .position-list-compact li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title total"
      "id    qty";
    gap: 2px 8px;
    padding: 8px 0;
  }
  .position-list-compact .pos-title { grid-area: title; white-space: normal; line-height: 1.3; }
  .position-list-compact .pos-id    { grid-area: id; }
  .position-list-compact .pos-qty   { grid-area: qty; text-align: right; }
  .position-list-compact .pos-total { grid-area: total; }
}
.draft-room-floor-badge {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: auto;
}
.draft-preview-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 12px 0;
}

/* ════════════════════════════════════════════════════════════════
   MULTI-ROOM — Quote Builder (room groups)
   ════════════════════════════════════════════════════════════════ */

.room-group {
  margin-bottom: 24px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}
.room-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(124,179,66,0.06);
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--emerald);
}
.room-group-name { flex: 1; font-weight: 700; font-size: 14px; }
.room-group-name-input {
  font-weight: 700; font-size: 14px; flex: 1;
  background: transparent; border: none;
  border-bottom: 1px solid transparent;
  color: var(--emerald); font-family: inherit;
  padding: 1px 4px; outline: none; cursor: text;
  transition: border-color 0.15s; min-width: 80px;
}
.room-group-name-input:hover,
.room-group-name-input:focus { border-bottom-color: rgba(124,179,66,0.5); }
.room-dim-input {
  display: inline-block;
  width: 60px;
  padding: 1px 4px;
  margin: 0 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: right;
  outline: none;
  transition: border-color 0.15s;
  cursor: text;
  -moz-appearance: textfield;
}
.room-dim-input::-webkit-outer-spin-button,
.room-dim-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.room-dim-input:hover,
.room-dim-input:focus { border-bottom-color: rgba(124,179,66,0.5); }
.room-group-totals {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.room-group .section-group {
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
}
.room-group .section-group:last-child { border-bottom: none; }
.room-group .section-header {
  border-radius: 0;
}
/* Mobile/iPad: Room-Header bricht sauber um, Tap-Targets groß genug */
@media (max-width: 720px) {
  .room-group-header {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 10px 12px;
  }
  .room-group-name-input {
    flex: 1 1 140px;
    min-width: 120px;
    min-height: 28px;
  }
  .room-dim-input {
    width: 56px;
    min-height: 28px;
  }
}

/* ════════════════════════════════════════════════════════════════
   KUNDEN DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.customer-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px; margin-bottom: 8px;
  background: var(--slate); border: 1px solid var(--border-light);
  border-radius: 10px; cursor: pointer; transition: border-color 0.15s;
}
.customer-card:hover { border-color: var(--emerald); }
.customer-card-main { flex: 1; min-width: 0; }
.customer-name { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.customer-meta { font-size: 12px; color: var(--text-muted); }
.customer-card-right { text-align: right; flex-shrink: 0; }
.customer-total { font-size: 15px; font-weight: 700; color: var(--emerald); }
.customer-last { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.customer-detail-hero { margin-bottom: 8px; }
.customer-detail-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--text-muted); margin: 6px 0 16px;
}
.customer-detail-meta a { color: var(--emerald); text-decoration: none; }
.customer-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cds-item {
  display: flex;
  flex-direction: column;
  min-width: 0;          /* prevents text overflow in grid cells */
  word-break: break-word;
}
@media (max-width: 768px) {
  .customer-detail-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Customer-Distance-Info auf Detail-Seite */
.customer-distance-info {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(124, 179, 66, 0.08);
  border: 1px solid rgba(124, 179, 66, 0.22);
  border-left: 3px solid #7cb342;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary, #c4cad6);
}
.customer-distance-info--empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  border-left-color: rgba(255, 255, 255, 0.20);
}
.customer-distance-info .cdi-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 200px;
}
.customer-distance-info .cdi-icon { font-size: 15px; }
.customer-distance-info .cdi-text strong {
  color: #7cb342;
  font-weight: 600;
  font-size: 14px;
}
.customer-distance-info .cdi-meta {
  font-size: 11.5px;
  color: var(--text-muted, #9aa3b0);
  opacity: 0.85;
  flex: 0 0 auto;
}
.customer-distance-info .cdi-recalc-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, #c4cad6);
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  flex: 0 0 auto;
}
.customer-distance-info .cdi-recalc-btn:hover {
  background: rgba(124, 179, 66, 0.15);
  border-color: rgba(124, 179, 66, 0.35);
  color: #7cb342;
}
.cds-value { font-size: 22px; font-weight: 700; color: var(--white); }
.cds-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.duplicate-btns { display: flex; gap: 6px; }
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-box {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 28px; width: 100%; max-width: 460px;
}
.modal-box h3 { margin: 0 0 20px; font-size: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Workflow Banner */
.workflow-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--slate);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.workflow-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wf-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.wf-step.active { color: var(--white); font-weight: 600; }
.wf-step.done   { color: var(--emerald); }
.wf-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.wf-step.active .wf-dot { background: var(--emerald); color: #04060c; }
.wf-step.done   .wf-dot { background: rgba(124,179,66,0.2); color: var(--emerald); }
.wf-arrow { color: var(--text-muted); font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   PWA / MOBILE OPTIMIERUNGEN
   ════════════════════════════════════════════════════════════════ */

/* Safe area for iPhone notch */
.app-header {
  padding-top: env(safe-area-inset-top, 0px);
}
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 600px) {
  /* Header kompakter */
  .app-header { padding: 10px 14px; }
  .header-right { gap: 6px; }
  .header-right .btn-text { font-size: 12px; padding: 4px 8px; }
  .trial-badge { font-size: 10px; padding: 4px 8px; }
  .company-badge { display: none; }

  /* Dashboard */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value { font-size: 22px; }
  .action-card.big { padding: 24px 16px; }

  /* Mic Button größer auf Mobile für einfacheres Tippen */
  .mic-area .mic-button {
    width: 140px !important;
    height: 140px !important;
  }
  .mic-dot {
    width: 36px !important;
    height: 36px !important;
  }

  /* New Quote Seite */
  #page-new-quote .subtitle { display: none; }

  /* Quote Builder */
  .quote-section { border-radius: 8px; }
  .section-body { padding: 12px; }
  .row { flex-direction: column; }
  .field { width: 100%; }

  /* Positions */
  .position-row {
    grid-template-columns: 16px 1fr 58px 58px 58px 28px;
    font-size: 12px;
    gap: 3px;
    padding: 8px 8px 4px 8px;
  }
  .pos-id, .pos-unit { display: none; }
  .pos-qty input, .pos-price input {
    width: 100%;
    min-width: 0;
    font-size: 11px;
    padding: 4px 3px;
    text-align: center;
  }
  .pos-price { display: block; }
  .pos-total { font-size: 11px; text-align: right; }

  /* Customer cards */
  .customer-card { padding: 12px 14px; }
}


/* ════════════════════════════════════════════════════════════════
   BOTTOM NAV — nur Mobile
   ════════════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(4, 6, 12, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-light);
  align-items: stretch;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  padding: 8px 4px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:hover,
.bottom-nav-item.active { color: var(--emerald); }
.bottom-nav-item span { font-size: 10px; font-weight: 500; }
.bottom-nav-center {
  position: relative;
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
}
.bottom-nav-plus {
  width: 44px; height: 44px;
  background: var(--emerald); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #04060c;
  box-shadow: 0 2px 12px rgba(124,179,66,0.35);
  transition: transform 0.15s;
}
.bottom-nav-center:active .bottom-nav-plus { transform: scale(1.08); }
.bottom-nav-center span { color: var(--text-muted); font-size: 10px; line-height: 1; }

/* iPad / Tablet: bottom nav stays compact, content has breathing room */
@media (min-width: 769px) and (max-width: 1024px) {
  .bottom-nav { height: 60px; }
  .bottom-nav-plus { width: 42px; height: 42px; }
}

/* Show on mobile, hide desktop header nav items */
@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  .app-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Hide Kunden + Einstellungen from header on mobile */
  .header-right .btn-text:not(:last-child) { display: none; }
}

/* ── PDF Preview & Voice Consent Modals ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-box {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.modal-large { max-width: 760px; }

/* Add-Room Extras-Grid: 2 Spalten Desktop, 1 Spalte Mobile */
.addroom-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  font-size: 13px;
}
.addroom-feature-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 4px;
  line-height: 1.35;
  word-break: break-word;
  transition: background 0.1s;
}
.addroom-feature-grid label:hover {
  background: rgba(255,255,255,0.03);
}
.addroom-feature-grid input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
@media (max-width: 520px) {
  .addroom-feature-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Modal-body scroll-fähig machen damit Inhalt nie abgeschnitten wird */
.modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 16px 20px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
/* Default: dark modal-body matching app theme */
.modal-body {
  padding: 20px;
  background: #0d1117;
  color: #e8e8e8;
  max-height: 75vh;
  overflow-y: auto;
}
/* Spezifisch: PDF-Preview braucht weißen Background damit der gerenderte PDF-Inhalt lesbar bleibt */
#pdf-preview-body {
  background: #fff !important;
  color: #1a1a1a !important;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: #0d1117;
  flex-wrap: wrap;
}
/* Mobile: 3+ Buttons untereinander stapeln und voll-Breite nutzen */
@media (max-width: 600px) {
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 12px 14px;
  }
  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}
.pdf-preview-loading { color: #888; text-align: center; padding: 32px; }

/* Archived status badge */
.status-archived {
  background: rgba(100,100,100,0.15);
  color: #888;
  border: 1px solid rgba(100,100,100,0.3);
}

/* ── Dashboard two-col row ── */
/* Glass card base — einheitlicher Look für Referral, Feedback und ähnliche Karten */
.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}
.dashboard-two-col > * {
  height: 100%;
}
@media (max-width: 600px) {
  .dashboard-two-col { grid-template-columns: 1fr; }
}

/* Referral card */
.referral-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.referral-card > .btn {
  margin-top: auto;
}
.referral-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.referral-icon { font-size: 24px; flex-shrink: 0; }
.referral-title { font-weight: 700; font-size: 15px; }
.referral-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.referral-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(124,179,66,0.08);
  border: 1px solid rgba(124,179,66,0.2);
  border-radius: 8px;
  padding: 10px 14px;
}
.referral-code {
  font-family: monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: 3px;
  flex: 1;
}
.btn-copy {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.btn-copy:hover { background: rgba(255,255,255,0.05); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* Feedback card */
.feedback-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  height: 100%;
  color: #e8e8e8;
}
.feedback-card:hover { border-color: rgba(124,179,66,0.25) !important; transform: translateY(-2px); }
.feedback-card > .btn {
  margin-top: auto;
  width: 100%;
}
.feedback-icon { font-size: 22px; }
.feedback-title { font-weight: 700; font-size: 15px; color: #fff; }
.feedback-sub { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* Star rating */
#feedback-stars .star { cursor: pointer; transition: transform 0.1s; }
#feedback-stars .star:hover { transform: scale(1.2); }

/* Page back button */
.page-back-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  cursor: pointer;
  padding: 0 0 16px 0;
  display: block;
}
.page-back-btn:hover { color: rgba(255,255,255,0.8); }

/* ════════════════════════════════════════════════════════════════════
   PLAN OVERVIEW (Settings) + SEAT CALCULATOR MODAL — Phase 4d Mockup
   ════════════════════════════════════════════════════════════════════ */
.plan-card { border-color: var(--emerald-soft); }
.plan-overview {
  background: rgba(0,0,0,0.20);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0 18px;
}
.plan-overview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  gap: 12px;
}
.plan-overview-row + .plan-overview-row {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.plan-overview-label {
  font-size: 13px;
  color: var(--text-muted, #999);
  flex-shrink: 0;
}
.plan-overview-value {
  font-size: 14px;
  color: var(--text-primary, #fff);
  font-weight: 500;
  text-align: right;
  line-height: 1.4;
}

/* Mobile: stack label above value so long text doesn't wrap weird */
@media (max-width: 600px) {
  .plan-overview-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0;
  }
  .plan-overview-value {
    text-align: left;
    width: 100%;
  }
  .plan-overview-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, #888);
  }
}
.plan-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-status-trial {
  background: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.30);
}
.plan-status-active {
  background: rgba(124, 179, 66, 0.15);
  color: #8bc34a;
  border: 1px solid rgba(124, 179, 66, 0.30);
}
.plan-status-cancelled {
  background: rgba(224, 96, 96, 0.12);
  color: #e06060;
  border: 1px solid rgba(224, 96, 96, 0.25);
}
.plan-status-expired {
  background: rgba(180, 180, 180, 0.10);
  color: #999;
  border: 1px solid rgba(180, 180, 180, 0.20);
}

/* Modal seat calculator specific */
.modal-seat-calc {
  max-width: 560px;
  width: 92vw;
}
.modal-current {
  background: rgba(124,179,66,0.06);
  border: 1px solid rgba(124,179,66,0.20);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-primary, #fff);
  margin-bottom: 8px;
}
.modal-stripe-notice {
  background: rgba(255,193,7,0.06);
  border: 1px solid rgba(255,193,7,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: rgba(255,193,7,0.85);
  margin: 16px 0;
  line-height: 1.4;
}
.modal-stripe-notice strong { color: #ffc107; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

/* Modal-internal versions of calculator controls (so they work standalone) */
.modal .seat-stepper {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px;
  overflow: hidden;
}
.modal .seat-btn {
  background: transparent;
  border: none;
  color: var(--text-primary, #fff);
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modal .seat-btn:hover { background: rgba(124,179,66,0.15); }
.modal .seat-count {
  display: inline-block;
  min-width: 56px;
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  text-align: center;
}
.modal .calc-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted, #aaa);
}
.modal .calc-breakdown {
  background: rgba(0,0,0,0.20);
  border-radius: 10px;
  padding: 16px 18px;
}
.modal .breakdown-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted, #aaa);
  margin-bottom: 10px;
  font-weight: 600;
}
.modal .breakdown-list { list-style: none; margin: 0 0 12px 0; padding: 0; }
.modal .breakdown-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal .breakdown-line:last-child { border-bottom: none; }
.modal .bl-label   { color: var(--text-primary, #fff); }
.modal .bl-formula { color: var(--text-muted, #888); font-size: 11px; opacity: 0.7; font-family: ui-monospace, monospace; }
.modal .bl-amount  { color: var(--text-primary, #fff); font-weight: 600; min-width: 70px; text-align: right; }
.modal .breakdown-totals {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 10px;
}
.modal .breakdown-row {
  display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; color: var(--text-muted, #aaa);
}
.modal .breakdown-row-final {
  font-family: 'Fraunces', serif;
  font-size: 18px; font-weight: 600;
  color: #8bc34a;
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* ════════════════════════════════════════════════════════════════════
   REGISTER FORM SLIM — Plan Summary, AVV Tooltip, Payment Trust Row
   ════════════════════════════════════════════════════════════════════ */
.plan-summary {
  margin: 0 auto 24px;
  padding: 20px 24px;
  max-width: 100%;
  border: 1px solid var(--border-accent, rgba(124,179,66,0.3));
  background: rgba(124,179,66,0.04);
  border-radius: 12px;
}
.plan-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 480px) {
  .plan-summary-header { letter-spacing: 0.5px; font-size: 10px; }
}
.plan-summary-label { color: var(--text-muted, #888); font-weight: 600; }
.plan-summary-change {
  color: var(--emerald, #7cb342);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.plan-summary-change:hover { text-decoration: underline; }
.plan-summary-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  color: var(--text-primary, #fff);
  font-weight: 600;
}
.plan-summary-line span:last-child {
  font-family: 'Fraunces', serif;
  color: var(--emerald, #8bc34a);
  font-size: 24px;
  white-space: nowrap;
}
.plan-summary-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #aaa);
}

/* Slogan under logo on register/login screens */
.auth-logo-slogan {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  font-weight: 500;
}

/* AVV Tooltip — toggleable explanation */
.avv-checkbox span { line-height: 1.5; }
.avv-tooltip-trigger {
  display: inline-block;
  margin-left: 4px;
  color: var(--emerald, #7cb342);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.avv-tooltip {
  display: none;
  margin: 8px 0 0 28px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(124,179,66,0.06);
  border-left: 3px solid var(--emerald, #7cb342);
  border-radius: 4px;
  color: var(--text-primary, #fff);
}
.avv-tooltip.show { display: block; }
.avv-tooltip strong { color: var(--emerald, #8bc34a); }
.avv-tooltip a { color: var(--emerald, #8bc34a); }

/* Payment Trust Row — Stripe + Widerruf signals under submit button */
.payment-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-muted, #888);
  letter-spacing: 0.3px;
}
@media (max-width: 480px) {
  .payment-trust-row { gap: 8px 12px; font-size: 10px; }
}

/* ═══ FIX: iPad field overlap in Eckdaten ═══ */
@media (max-width: 1024px) {
  .quote-header .row {
    flex-direction: column;
    gap: 12px;
  }
  .quote-header .row .field {
    width: 100% !important;
    flex: none !important;
  }
}

/* ═══ FIX: Visual separation between editor sections ═══ */
.quote-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.quote-section:last-child {
  border-bottom: none;
}
details.quote-section-details {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ═══ FIX: Titel dropdown width ═══ */
#q-client-title {
  min-width: 90px;
}

/* ══════════════════════════════════════════════════════════════════
   MEIN KATALOG (eigene Positionen)
   ══════════════════════════════════════════════════════════════════ */
.user-catalog-grid {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-catalog-item {
  display: grid;
  grid-template-columns: 1fr 80px 120px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--card, #0c1220);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  transition: background 0.15s;
}
.user-catalog-item:hover {
  background: #141c2e;
}
.user-catalog-item-title {
  font-size: 14px;
  color: var(--text-primary, #e4e8ef);
  line-height: 1.3;
  word-break: break-word;
}
.user-catalog-item-meta {
  font-size: 11px;
  color: var(--text-muted, #9aa5b8);
  margin-top: 3px;
}
.user-catalog-item-unit {
  font-size: 13px;
  color: var(--text-secondary, #c8d0dc);
  text-align: center;
}
.user-catalog-item-price {
  font-size: 14px;
  color: var(--emerald);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.user-catalog-item-actions {
  display: flex;
  gap: 6px;
}
.user-catalog-btn-del {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.user-catalog-btn-del:hover {
  background: rgba(220,50,50,0.15);
  border-color: rgba(220,50,50,0.4);
  color: #ff6b6b;
}

.user-catalog-grid .empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 720px) {
  .user-catalog-item {
    grid-template-columns: 1fr auto;
    gap: 8px;
    grid-template-areas: "title actions" "meta actions";
    padding: 12px;
  }
  .user-catalog-item-title { grid-area: title; font-size: 14px; }
  .user-catalog-item-unit,
  .user-catalog-item-price {
    grid-area: meta;
    display: inline;
    text-align: left;
    font-size: 12px;
    margin-right: 8px;
  }
  .user-catalog-item-actions { grid-area: actions; }
}

/* ══════════════════════════════════════════════════════════════════
   DATENSCHUTZ — Consent Toggle
   ══════════════════════════════════════════════════════════════════ */
.consent-toggle-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 12px;
}

.consent-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 3px;
}
.consent-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.consent-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  transition: .2s;
}
.consent-toggle-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #e4e8ef;
  border-radius: 50%;
  transition: .2s;
}
.consent-toggle input:checked + .consent-toggle-slider {
  background: var(--emerald);
  border-color: var(--emerald);
}
.consent-toggle input:checked + .consent-toggle-slider::before {
  transform: translateX(20px);
  background: #04060c;
}

.consent-toggle-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}
.consent-toggle-title {
  color: var(--text-primary, #e4e8ef);
  font-weight: 600;
  margin-bottom: 6px;
}
.consent-toggle-desc {
  color: var(--text-secondary, #c8d0dc);
  font-size: 13px;
  line-height: 1.6;
}
.consent-toggle-desc strong { color: var(--text-primary); }
.consent-toggle-desc em { color: var(--text-muted); font-style: normal; font-size: 12px; }

/* Optionaler Consent — visuell abgesetzt von Pflicht-Konsenten */
.checkbox.checkbox-optional {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,0.15);
  opacity: 0.9;
}
.checkbox.checkbox-optional span {
  font-size: 13px;
  color: var(--text-secondary, #c8d0dc);
  line-height: 1.55;
}
.checkbox.checkbox-optional strong {
  color: var(--emerald);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   MEINE RECHNUNGEN — Settings-Section Liste
   ═══════════════════════════════════════════════════════════════ */
.invoices-empty {
  text-align: center;
  padding: 32px 20px;
  background: rgba(0,0,0,0.20);
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.12);
}
.invoices-empty-icon {
  font-size: 32px;
  opacity: 0.4;
  margin-bottom: 10px;
}
.invoices-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e4e8ef);
  margin-bottom: 6px;
}
.invoices-empty-text {
  font-size: 13px;
  color: var(--text-muted, #9aa3b0);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 auto;
}

.invoices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invoice-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.invoice-row:hover { border-color: rgba(124,179,66,0.30); background: rgba(0,0,0,0.28); }
.invoice-row-main { flex: 1; min-width: 0; }
.invoice-row-number {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary, #e4e8ef);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.invoice-row-meta {
  font-size: 12px;
  color: var(--text-muted, #9aa3b0);
  line-height: 1.5;
}
.invoice-row-meta .sep { color: rgba(255,255,255,0.20); margin: 0 6px; }
.invoice-row-amount {
  text-align: right;
  flex-shrink: 0;
}
.invoice-row-gross {
  font-weight: 700;
  font-size: 15px;
  color: var(--emerald, #7cb342);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.invoice-row-tax {
  font-size: 11px;
  color: var(--text-muted, #9aa3b0);
  margin-top: 2px;
  white-space: nowrap;
}
.invoice-row-actions {
  flex-shrink: 0;
}
.invoice-pdf-btn {
  background: rgba(124,179,66,0.12);
  color: var(--emerald, #7cb342);
  border: 1px solid rgba(124,179,66,0.30);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  cursor: pointer;
  font-family: inherit;
}
.invoice-pdf-btn:hover {
  background: rgba(124,179,66,0.20);
  color: #8bc34a;
  border-color: rgba(124,179,66,0.50);
  text-decoration: none;
}

/* Mobile */
@media (max-width: 600px) {
  .invoice-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  .invoice-row-main { flex-basis: 100%; }
  .invoice-row-amount { flex: 1; text-align: left; }
  .invoice-row-actions { margin-left: auto; }
  .invoice-pdf-btn { padding: 7px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   ANGEBOTSNUMMERIERUNG — Settings Card
   ═══════════════════════════════════════════════════════════════ */
.qns-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(124,179,66,0.08);
  border: 1px solid rgba(124,179,66,0.25);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0 18px;
}
.qns-status-label {
  font-size: 12px;
  color: var(--text-muted, #9aa3b0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.qns-status-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--emerald, #7cb342);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.qns-form .row { display: flex; gap: 12px; align-items: flex-start; }
.qns-field-year { flex: 0 0 100px; }
.qns-field-num  { flex: 1; min-width: 0; }

.qns-warning {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.30);
  color: var(--text-secondary, #c4cad6);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  margin: 12px 0;
}
.qns-warning strong { color: #d4af37; }

.qns-save { margin-top: 12px; min-width: 200px; }

.qns-feedback {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
}
.qns-feedback.ok  { background: rgba(124,179,66,0.10); border: 1px solid rgba(124,179,66,0.30); color: #a3d165; }
.qns-feedback.err { background: rgba(239,68,68,0.10);  border: 1px solid rgba(239,68,68,0.30);  color: #fca5a5; }

@media (max-width: 600px) {
  .qns-status { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; }
  .qns-status-value { font-size: 16px; }
  .qns-form .row { flex-direction: column; gap: 0; }
  .qns-field-year { flex: 1 1 auto; }
  .qns-save { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   ENDKUNDEN-RECHNUNGEN — Quote-Editor Section + Modals
   ═══════════════════════════════════════════════════════════════ */
.ci-section {
  background: rgba(124,179,66,0.04);
  border: 1px solid rgba(124,179,66,0.20);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0 24px;
}
.ci-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.ci-section-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #e4e8ef);
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.ci-section-header h3::before {
  content: '📄';
  font-size: 16px;
}
.ci-section-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ci-list { display: flex; flex-direction: column; gap: 8px; }
.ci-list-empty {
  color: var(--text-muted, #9aa3b0);
  font-size: 13px;
  padding: 16px 4px;
  text-align: center;
}
.ci-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.ci-row:hover { border-color: rgba(124,179,66,0.30); }
.ci-row-main { flex: 1; min-width: 0; }
.ci-row-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700;
  color: var(--text-primary, #e4e8ef);
  margin-bottom: 3px;
}
.ci-badge {
  padding: 2px 8px; border-radius: 12px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.4;
}
.ci-badge.draft     { background: rgba(255,255,255,0.10); color: #c4cad6; }
.ci-badge.issued    { background: rgba(59,130,246,0.18);  color: #93c5fd; }
.ci-badge.paid      { background: rgba(124,179,66,0.20);  color: #a3d165; }
.ci-badge.cancelled { background: rgba(239,68,68,0.16);   color: #fca5a5; }
.ci-row-meta {
  font-size: 12px; color: var(--text-muted, #9aa3b0);
}
.ci-row-amount {
  text-align: right; flex-shrink: 0;
  font-weight: 700; font-size: 14px;
  color: var(--text-primary, #e4e8ef);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ci-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ci-action-btn {
  background: rgba(124,179,66,0.10);
  color: var(--emerald, #7cb342);
  border: 1px solid rgba(124,179,66,0.25);
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.ci-action-btn:hover { background: rgba(124,179,66,0.20); border-color: rgba(124,179,66,0.45); }
.ci-action-btn.danger { color: #fca5a5; background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.20); }
.ci-action-btn.danger:hover { background: rgba(239,68,68,0.14); }

/* Modal */
.ci-modal { max-width: 580px; width: 100%; }
.ci-modal-wide { max-width: 760px; }
.ci-modal .field { margin-bottom: 14px; }
.ci-modal .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ci-percent-row {
  display: flex; align-items: center; gap: 8px;
}
.ci-percent-row input { flex: 1; max-width: 100px; }
.ci-percent-row span { color: var(--text-muted, #9aa3b0); font-weight: 600; }

.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
}
.checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  flex-shrink: 0; accent-color: var(--emerald, #7cb342);
}
.checkbox-row label {
  flex: 1; font-size: 13px;
  color: var(--text-secondary, #c4cad6);
  cursor: pointer;
}

.ci-preview {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.20);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary, #c4cad6);
  line-height: 1.55;
  display: none;
}
.ci-preview.visible { display: block; }

.ci-edit-status {
  padding: 10px 14px; border-radius: 8px;
  margin-bottom: 16px; font-size: 13px;
}
.ci-edit-status.draft     { background: rgba(255,255,255,0.06); color: #c4cad6; border: 1px solid rgba(255,255,255,0.12); }
.ci-edit-status.issued    { background: rgba(59,130,246,0.10); color: #93c5fd; border: 1px solid rgba(59,130,246,0.30); }
.ci-edit-status.paid      { background: rgba(124,179,66,0.10); color: #a3d165; border: 1px solid rgba(124,179,66,0.30); }
.ci-edit-status.cancelled { background: rgba(239,68,68,0.10);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.30); }

.ci-totals {
  background: rgba(0,0,0,0.20);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
}
.ci-totals-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.ci-totals-row.gross {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 10px; margin-top: 6px;
  font-weight: 700; font-size: 16px;
  color: var(--emerald-bright, #8bc34a);
}
.ci-totals-label { color: var(--text-muted, #9aa3b0); }
.ci-totals-value { font-variant-numeric: tabular-nums; color: var(--text-primary, #e4e8ef); }

.ci-edit-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 16px;
}
.btn-danger-soft {
  background: transparent;
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.30);
}
.btn-danger-soft:hover {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.50);
}

.modal-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  background: rgba(124,179,66,0.15);
  color: var(--emerald, #7cb342);
  border-radius: 12px;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .ci-section-header { flex-direction: column; align-items: stretch; }
  .ci-section-actions { justify-content: stretch; }
  .ci-section-actions button { flex: 1; }
  .ci-row { flex-wrap: wrap; gap: 8px; }
  .ci-row-main { flex-basis: 100%; }
  .ci-row-amount { font-size: 13px; }
  .ci-modal .field-row { grid-template-columns: 1fr; gap: 0; }
  .ci-edit-actions { flex-direction: column; }
  .ci-edit-actions button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Item-Editor in Customer-Invoice Modal
   ═══════════════════════════════════════════════════════════════ */
.ci-items-block { margin: 18px 0; }
.ci-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ci-items-header label {
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary, #c4cad6);
}
.ci-items-add-btn {
  background: rgba(124,179,66,0.12);
  border: 1px solid rgba(124,179,66,0.30);
  color: var(--emerald, #7cb342);
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: all 0.15s;
}
.ci-items-add-btn:hover {
  background: rgba(124,179,66,0.22);
  border-color: rgba(124,179,66,0.50);
}
.ci-items-add-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.ci-items-scroll {
  background: #11161e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow-x: auto;
  max-height: 360px; overflow-y: auto;
}
.ci-items-table {
  width: 100%; border-collapse: collapse;
  min-width: 580px;
  font-size: 12.5px;
}
.ci-items-table th {
  background: #1a2030;       /* opaque — vorher rgba(255,255,255,0.03) → Items schienen durch */
  text-align: left;
  padding: 10px;
  font-size: 10.5px; font-weight: 600;
  color: var(--text-muted, #9aa3b0);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 2px solid rgba(255,255,255,0.10);
  position: sticky; top: 0;
  z-index: 2;                /* sichert dass Header über Items steht */
}
.ci-items-table th.ci-col-qty,
.ci-items-table th.ci-col-price,
.ci-items-table th.ci-col-total { text-align: right; }
.ci-items-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.ci-items-table input,
.ci-items-table select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-primary, #e4e8ef);
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12.5px; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.ci-items-table input:focus,
.ci-items-table select:focus {
  outline: none;
  border-color: rgba(124,179,66,0.40);
  background: rgba(124,179,66,0.06);
}
.ci-items-table input:disabled {
  opacity: 0.6; cursor: not-allowed;
}
.ci-items-table .ci-input-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ci-col-title  { width: auto; }
.ci-col-qty    { width: 90px; }
.ci-col-unit   { width: 80px; }
.ci-col-price  { width: 110px; }
.ci-col-total  { width: 110px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600; padding-right: 12px !important;
}
.ci-col-action { width: 36px; }
.ci-row-delete-btn {
  background: transparent; border: none;
  color: rgba(239,68,68,0.60); cursor: pointer;
  padding: 4px 8px; font-size: 16px;
  border-radius: 4px; transition: all 0.15s;
}
.ci-row-delete-btn:hover {
  background: rgba(239,68,68,0.12); color: #fca5a5;
}
.ci-row-delete-btn:disabled {
  opacity: 0.3; cursor: not-allowed;
}
.ci-items-empty {
  text-align: center; color: var(--text-muted, #9aa3b0);
  padding: 24px 12px; font-size: 13px;
}
.ci-items-hint {
  font-size: 11px; color: var(--text-muted, #9aa3b0);
  margin-top: 6px; line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   FORM VALIDATION — prominent error banner + field highlight
   ═══════════════════════════════════════════════════════════════ */
.error-banner {
  display: block;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.40);
  color: #fca5a5;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 14px 0 16px;
  animation: errorBannerSlide 0.25s ease-out;
}
@keyframes errorBannerSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.error-banner-icon {
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
}

/* Field-level invalid state — gesetzt durch JS bei Validation-Fehler */
.field-invalid input,
.field-invalid select,
input.field-invalid,
select.field-invalid {
  border-color: rgba(239, 68, 68, 0.60) !important;
  background: rgba(239, 68, 68, 0.04);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}
.field-invalid input:focus,
.field-invalid select:focus,
input.field-invalid:focus,
select.field-invalid:focus {
  border-color: rgba(239, 68, 68, 0.90) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}

/* Consent-Box invalid state — wenn nicht angekreuzt */
.consent.consent-invalid {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.40);
  border-radius: 8px;
  padding: 12px 14px;
  animation: consentShake 0.4s ease-in-out;
}
@keyframes consentShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Native browser validation styling für required fields */
input:required:invalid:not(:placeholder-shown):not(:focus),
select:required:invalid:not(:focus) {
  border-color: rgba(239, 68, 68, 0.30);
}

/* ═══════════════════════════════════════════════════════════════
   SEND-MODAL: Pflicht-Bestätigung KI-Disclaimer
   ═══════════════════════════════════════════════════════════════ */
.send-confirm-box {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.send-confirm-box.send-confirm-invalid {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.50);
  animation: consentShake 0.4s ease-in-out;
}
.send-confirm-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #c4cad6);
  margin: 0;
}
.send-confirm-label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--emerald-bright, #8bc34a);
}
.send-confirm-label strong {
  color: var(--text-primary, #e4e8ef);
  display: block;
  margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════
   QUOTE-CONFIRM-BOX — Pflicht-Bestätigung im Editor
   Erscheint direkt unter Save-Bar, blockiert PDF + Kunden-Link
   ════════════════════════════════════════════════════════════════ */
.quote-confirm-box {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(229, 57, 53, 0.05);
  border: 1px solid rgba(229, 57, 53, 0.28);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.quote-confirm-box.quote-confirm-confirmed {
  background: rgba(139, 195, 74, 0.05);
  border-color: rgba(139, 195, 74, 0.30);
}
.quote-confirm-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #c4cad6);
  margin: 0;
}
.quote-confirm-label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--emerald-bright, #8bc34a);
}
.quote-confirm-label strong {
  color: var(--text-primary, #e4e8ef);
}

/* Customer-Invoice item-add buttons (Katalog + Eigene) */
.ci-items-add-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ci-items-add-group button {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .ci-items-add-group { width: 100%; }
  .ci-items-add-group button { flex: 1; min-width: 0; font-size: 12px; padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════════════
   v3.4: Passwort-Sichtbarkeits-Toggle (Auge-Icon, SVG)
   ═══════════════════════════════════════════════════════════ */
.pw-field {
  position: relative;
  display: flex;
  align-items: stretch;
}
.pw-field input[type="password"],
.pw-field input[type="text"] {
  flex: 1;
  padding-right: 48px; /* Platz für Toggle-Button */
}
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-muted, #9aa5b8);
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  line-height: 0;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
  display: block;
}
.pw-toggle:hover {
  background: rgba(124, 179, 66, 0.08);
  color: #7cb342;
}
.pw-toggle:focus-visible {
  outline: 2px solid #7cb342;
  outline-offset: 1px;
}
.pw-toggle.pw-visible {
  color: #7cb342;
}
.pw-toggle.pw-visible:hover {
  background: rgba(124, 179, 66, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   v3.4.4 — Phase 1: Customer-Datei UI
   ═══════════════════════════════════════════════════════════ */
.customers-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--card, #0c1220);
  border: 1px solid #2a3547;
  border-radius: 8px;
}
.customers-controls .cc-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.customers-controls .cc-spacer { flex: 1; }
.customers-controls .cc-label {
  font-size: 12px;
  color: var(--text-muted, #9aa5b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.customers-controls .cc-select {
  background: #04060c;
  border: 1px solid #2a3547;
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--text-primary, #e4e8ef);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.customers-controls .cc-select:hover { border-color: #7cb342; }
.customers-controls .cc-export-btn {
  background: transparent;
  border: 1px solid #2a3547;
  border-radius: 4px;
  padding: 6px 14px;
  color: var(--text-secondary, #c8d0dc);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.customers-controls .cc-export-btn:hover {
  background: rgba(124, 179, 66, 0.08);
  border-color: #7cb342;
  color: #7cb342;
}
@media (max-width: 600px) {
  .customers-controls { flex-direction: column; align-items: stretch; }
  .customers-controls .cc-group { justify-content: space-between; }
  .customers-controls .cc-spacer { display: none; }
  .customers-controls .cc-export-btn { text-align: center; }
}

/* Quick-Action-Buttons in customer cards (phone, email) */
.customer-card-actions {
  display: flex;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}
.customer-card-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #2a3547;
  border-radius: 6px;
  color: var(--text-muted, #9aa5b8);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.customer-card-action svg {
  width: 16px; height: 16px;
}
.customer-card-action:hover {
  background: rgba(124, 179, 66, 0.10);
  border-color: #7cb342;
  color: #7cb342;
}

/* Customer Detail — Statistik-Box */
.customer-stats-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--card, #0c1220);
  border: 1px solid #2a3547;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}
.customer-stats-box .cs-cell {
  text-align: center;
  padding: 4px;
}
.customer-stats-box .cs-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #e4e8ef);
  line-height: 1.2;
}
.customer-stats-box .cs-value.cs-revenue { color: #7cb342; }
.customer-stats-box .cs-label {
  font-size: 11px;
  color: var(--text-muted, #9aa5b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .customer-stats-box { grid-template-columns: repeat(2, 1fr); }
}

/* Dubletten-Warnung */
.duplicate-warning {
  background: #3a2d1e;
  border-left: 3px solid #c9a84c;
  padding: 12px 14px;
  margin: 12px 0;
  border-radius: 6px;
  font-size: 13px;
  color: #f0d9a0;
}
.duplicate-warning strong { color: #fae09a; }
.duplicate-warning .dw-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-secondary, #c8d0dc);
}
.duplicate-warning .dw-list li { margin: 4px 0; }
.duplicate-warning .dw-actions {
  display: flex; gap: 8px; margin-top: 12px;
  flex-wrap: wrap;
}
.duplicate-warning .dw-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #c9a84c;
  border-radius: 4px;
  color: #c9a84c;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.duplicate-warning .dw-btn:hover { background: rgba(201, 168, 76, 0.12); }
.duplicate-warning .dw-btn-primary {
  background: #c9a84c; color: #0c1220;
}
.duplicate-warning .dw-btn-primary:hover { background: #fae09a; }

/* ════════════════════════════════════════════════════════════════
   v3.4.4 — Customer-Datei Phase 1+2+3 Erweiterungen
   ════════════════════════════════════════════════════════════════ */

/* Tag-Chips (read-only in Liste/Detail) */
.customer-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(124, 179, 66, 0.12);
  color: #7cb342;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}
.tag-chip-more {
  display: inline-flex;
  align-items: center;
  background: rgba(154, 165, 184, 0.12);
  color: #9aa5b8;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Tag-Chips editable im Modal */
.cust-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  border: 1px solid rgba(154, 165, 184, 0.15);
}
.cust-tags-chips:empty::before {
  content: 'Noch keine Tags';
  color: #9aa5b8;
  font-size: 12px;
  font-style: italic;
}
.tag-chip-editable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(124, 179, 66, 0.18);
  color: #7cb342;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 4px 3px 10px;
  border-radius: 12px;
}
.tag-chip-editable button {
  background: transparent;
  border: none;
  color: #7cb342;
  cursor: pointer;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1;
}
.tag-chip-editable button:hover { color: #ff6b6b; }

/* Customer-Card: Action-Buttons (tel/mail) */
.customer-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  justify-content: flex-end;
}
.cust-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: rgba(124, 179, 66, 0.10);
  color: #7cb342;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cust-action:hover {
  background: rgba(124, 179, 66, 0.20);
  transform: scale(1.05);
}
.cust-action svg { display: block; pointer-events: none; }

/* Customer-Detail: Extras-Box (Rating, Source, Tags) */
.customer-detail-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}
.cd-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-rating { color: #c9a84c; font-size: 16px; letter-spacing: 1px; }
.cd-source {
  font-size: 12px;
  color: #9aa5b8;
  background: rgba(154, 165, 184, 0.10);
  padding: 3px 10px;
  border-radius: 10px;
}

/* Customer-Detail: Tab-Bar */
.customer-tab-bar {
  display: flex;
  gap: 4px;
  margin: 24px 0 12px;
  border-bottom: 1px solid rgba(154, 165, 184, 0.15);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ctab {
  background: transparent;
  border: none;
  color: #9aa5b8;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.ctab:hover { color: #c8d0dc; }
.ctab.active {
  color: #7cb342;
  border-bottom-color: #7cb342;
}

.ctab-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* Activity-Timeline */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.act-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(20, 28, 46, 0.5);
  border-radius: 8px;
  border-left: 3px solid #7cb342;
}
.act-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.act-body { flex: 1; }
.act-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.act-head strong { color: #e4e8ef; font-size: 14px; }
.act-date { color: #9aa5b8; font-size: 12px; flex-shrink: 0; }
.act-text { color: #c8d0dc; font-size: 13px; line-height: 1.5; margin: 6px 0; }
.act-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.act-type {
  font-size: 11px;
  color: #9aa5b8;
  background: rgba(154, 165, 184, 0.10);
  padding: 2px 8px;
  border-radius: 8px;
}
.act-del {
  background: transparent;
  border: none;
  color: #9aa5b8;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
}
.act-del:hover { color: #ff6b6b; }

/* Followup-Liste */
.followup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fu-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: rgba(20, 28, 46, 0.5);
  border-radius: 8px;
  border-left: 3px solid #9aa5b8;
}
.fu-item.fu-overdue { border-left-color: #ff6b6b; background: rgba(58, 29, 34, 0.3); }
.fu-item.fu-status-done { opacity: 0.5; }
.fu-date strong { color: #e4e8ef; font-size: 13px; display: block; }
.fu-badge-overdue {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  background: #ff6b6b;
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}
.fu-reason { color: #e4e8ef; font-weight: 600; font-size: 14px; }
.fu-notes { color: #c8d0dc; font-size: 12px; margin-top: 4px; line-height: 1.5; }
.fu-meta { margin-top: 4px; }
.fu-status {
  font-size: 11px;
  color: #9aa5b8;
  background: rgba(154, 165, 184, 0.10);
  padding: 2px 8px;
  border-radius: 8px;
}
.fu-actions { display: flex; gap: 6px; align-items: center; }

/* Adress-Liste */
.address-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.addr-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: rgba(20, 28, 46, 0.5);
  border-radius: 8px;
  border-left: 3px solid #9aa5b8;
}
.addr-item.addr-default { border-left-color: #7cb342; }
.addr-type { color: #9aa5b8; font-size: 13px; font-weight: 600; }
.addr-label { color: #e4e8ef; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.addr-line { color: #c8d0dc; font-size: 13px; }
.addr-notes { color: #9aa5b8; font-size: 12px; margin-top: 4px; font-style: italic; }
.addr-badge-default {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  background: #7cb342;
  color: #0c1220;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.addr-actions { display: flex; gap: 6px; align-items: center; }

/* Quote-Project-Tag (kleiner Label-Tag in Doc-Liste) */
.quote-project-tag {
  display: inline-block;
  font-size: 10px;
  background: rgba(124, 179, 66, 0.12);
  color: #7cb342;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Duplicate-Warning v2 (Modal-spezifisch, ergänzt bestehende) */
.duplicate-warning .dw-list { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.dup-match {
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border-left: 3px solid #c9a84c;
}
.dup-match.dup-high { border-left-color: #ff6b6b; }
.dup-match.dup-medium { border-left-color: #c9a84c; }
.dup-match.dup-low { border-left-color: #9aa5b8; }
.dup-conf { font-size: 11px; font-weight: 700; color: #c9a84c; margin-bottom: 4px; }
.dup-match.dup-high .dup-conf { color: #ff6b6b; }
.dup-match.dup-low .dup-conf { color: #9aa5b8; }
.dup-name { font-size: 14px; color: #e4e8ef; margin-bottom: 2px; }
.dup-meta { font-size: 12px; color: #9aa5b8; }
.dup-reason { font-size: 12px; color: #c8d0dc; font-style: italic; margin-top: 4px; }

/* btn-ghost (vCard-Button) */
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(154, 165, 184, 0.2);
  color: #c8d0dc;
}
.btn-ghost:hover {
  background: rgba(154, 165, 184, 0.08);
  border-color: rgba(154, 165, 184, 0.3);
}

/* Mobile-Anpassungen */
@media (max-width: 720px) {
  .fu-item { grid-template-columns: 90px 1fr; }
  .fu-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .addr-item { grid-template-columns: 1fr; }
  .addr-actions { justify-content: flex-end; }
  .customer-card-actions { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════
   v3.4.4 — Onboarding-Wizard Banner
   ════════════════════════════════════════════════════════════════ */
.onboarding-banner {
  background: linear-gradient(135deg, rgba(124,179,66,0.12) 0%, rgba(124,179,66,0.04) 100%);
  border: 1px solid rgba(124,179,66,0.3);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
  position: relative;
}
.ob-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.ob-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #e4e8ef;
  flex: 1;
  line-height: 1.4;
}
.ob-icon { font-size: 22px; flex-shrink: 0; }
.ob-dismiss {
  background: transparent;
  border: none;
  color: #9aa5b8;
  font-size: 16px;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ob-dismiss:hover { background: rgba(154, 165, 184, 0.15); color: #e4e8ef; }

.ob-progress {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ob-progress-bar {
  flex: 1;
  background: rgba(154, 165, 184, 0.18);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.ob-progress-fill {
  background: #7cb342;
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0%;
}
.ob-progress-text {
  font-size: 12px;
  color: #9aa5b8;
  font-weight: 600;
  white-space: nowrap;
}

.ob-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-step {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(20, 28, 46, 0.4);
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.ob-step:hover { background: rgba(20, 28, 46, 0.6); }

.ob-step-num {
  width: 32px; height: 32px;
  background: rgba(154, 165, 184, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #c8d0dc;
}
.ob-step-body { min-width: 0; }
.ob-step-title { color: #e4e8ef; font-weight: 600; font-size: 14px; }
.ob-step-desc { color: #9aa5b8; font-size: 12px; line-height: 1.4; margin-top: 2px; }

.ob-step-btn {
  background: #7cb342;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.ob-step-btn:hover { background: #5a8029; }

.ob-step-tag {
  font-size: 11px;
  color: #9aa5b8;
  font-style: italic;
}

/* Erledigte Schritte: durchgestrichen + grüner Border + Häkchen-Nummer */
.ob-step.ob-step-done {
  border-left-color: #7cb342;
  opacity: 0.65;
}
.ob-step.ob-step-done .ob-step-num {
  background: #7cb342;
  color: #fff;
}
.ob-step.ob-step-done .ob-step-num::after {
  content: '✓';
  font-size: 16px;
}
.ob-step.ob-step-done .ob-step-num > * { display: none; }
.ob-step.ob-step-done > .ob-step-num { font-size: 0; }
.ob-step.ob-step-done .ob-step-title {
  text-decoration: line-through;
  text-decoration-color: rgba(124, 179, 66, 0.5);
  color: #c8d0dc;
}
.ob-step.ob-step-done .ob-step-btn {
  background: rgba(124, 179, 66, 0.2);
  color: #7cb342;
  pointer-events: none;
}
.ob-step.ob-step-done .ob-step-btn::before { content: 'Erledigt ✓'; }
.ob-step.ob-step-done .ob-step-btn > * { display: none; }
.ob-step.ob-step-done .ob-step-btn { font-size: 0; }
.ob-step.ob-step-done .ob-step-btn::before { font-size: 12px; }

/* Mobile */
@media (max-width: 720px) {
  .onboarding-banner { padding: 16px; }
  .ob-title { font-size: 14px; }
  .ob-step { grid-template-columns: 32px 1fr; padding: 10px 12px; }
  .ob-step-btn, .ob-step-tag { grid-column: 1 / -1; justify-self: flex-end; margin-top: 4px; }
}

/* ════════════════════════════════════════════════════════════════
   v3.4.4 — Empty-State Heroes (Onboarding-style CTAs)
   ════════════════════════════════════════════════════════════════ */
.empty-hero {
  text-align: center;
  padding: 56px 24px;
  background: rgba(20, 28, 46, 0.4);
  border: 1px dashed rgba(154, 165, 184, 0.25);
  border-radius: 12px;
  max-width: 580px;
  margin: 0 auto;
}
.empty-hero.empty-hero-compact {
  padding: 36px 20px;
}
.empty-hero-icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  background: rgba(124, 179, 66, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7cb342;
}
.empty-hero-icon svg { width: 32px; height: 32px; }
.empty-hero h3 {
  margin: 0 0 10px;
  color: #e4e8ef;
  font-size: 18px;
  font-weight: 600;
}
.empty-hero p {
  margin: 0 0 22px;
  color: #9aa5b8;
  font-size: 14px;
  line-height: 1.6;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.empty-hero-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.empty-hero-actions .btn { width: auto; padding: 11px 22px; }
.empty-hero-tips {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid #c9a84c;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  color: #c8d0dc;
  line-height: 1.5;
  max-width: 460px;
  margin: 18px auto 0;
}
.empty-hero-tips strong { color: #c9a84c; }

/* ════════════════════════════════════════════════════════════════
   v3.5.0 — Cancel-Reason-Picker im Cancel-Modal
   ════════════════════════════════════════════════════════════════ */
.cancel-reason-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(154, 165, 184, 0.12);
}
.cancel-reason-label, .cancel-feedback-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e4e8ef);
  margin-bottom: 10px;
}
.cancel-feedback-label { margin-top: 16px; }
.cancel-optional {
  font-weight: 400;
  color: var(--text-muted, #9aa5b8);
  font-size: 11px;
}
.cancel-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.cancel-reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(20, 28, 46, 0.4);
  border: 1px solid rgba(154, 165, 184, 0.12);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary, #c8d0dc);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cancel-reason:hover {
  border-color: rgba(124, 179, 66, 0.3);
  background: rgba(20, 28, 46, 0.6);
}
.cancel-reason input[type="radio"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.cancel-reason input[type="radio"]:checked + span {
  color: var(--text-primary, #e4e8ef);
  font-weight: 600;
}
.cancel-reason:has(input:checked) {
  border-color: #7cb342;
  background: rgba(124, 179, 66, 0.08);
}
#cancel-feedback {
  width: 100%;
  padding: 10px 12px;
  background: rgba(20, 28, 46, 0.4);
  border: 1px solid rgba(154, 165, 184, 0.18);
  border-radius: 6px;
  color: var(--text-primary, #e4e8ef);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}
#cancel-feedback:focus {
  outline: none;
  border-color: rgba(124, 179, 66, 0.5);
}

/* ════════════════════════════════════════════════════════════════
   v3.5.0 — Seats-Section im Customer-Dashboard
   ════════════════════════════════════════════════════════════════ */
.seats-section {
  margin: 18px 0;
  padding: 18px;
  background: rgba(20, 28, 46, 0.4);
  border: 1px solid rgba(154, 165, 184, 0.12);
  border-radius: 10px;
}
.seats-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(154, 165, 184, 0.1);
}
.seats-section-title {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary, #e4e8ef);
}
.seats-section-meta {
  font-size: 12px;
  color: var(--text-muted, #9aa5b8);
  margin-top: 4px;
}
.seats-section-meta strong {
  color: #7cb342;
  font-weight: 600;
}
.seats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.seat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(12, 18, 32, 0.5);
  border-radius: 7px;
  border-left: 3px solid transparent;
  transition: border-color 0.15s;
}
.seat-row:hover { border-left-color: rgba(124, 179, 66, 0.4); }
.seat-row.seat-cancelled { opacity: 0.55; border-left-color: #c9a84c; }
.seat-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.seat-position {
  width: 32px; height: 32px;
  background: rgba(124, 179, 66, 0.15);
  color: #7cb342;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.seat-cancelled .seat-position {
  background: rgba(201, 168, 76, 0.15);
  color: #c9a84c;
}
.seat-details { min-width: 0; }
.seat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e4e8ef);
}
.seat-meta {
  font-size: 12px;
  color: var(--text-muted, #9aa5b8);
  margin-top: 2px;
}
.seat-cancel-info {
  font-size: 11px;
  color: #c9a84c;
  margin-top: 4px;
  font-weight: 600;
}
.seat-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(124, 179, 66, 0.15);
  color: #7cb342;
  border-radius: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.seat-actions { flex-shrink: 0; }
@media (max-width: 600px) {
  .seats-section-head { flex-direction: column; align-items: stretch; }
  .seat-row { flex-wrap: wrap; }
  .seat-actions { width: 100%; }
  .seat-actions .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   v3.5.0 — Profile-Banner Polish (mit Progress-Ring)
   Dezent, kein Lärm, kein Emoji.
   ════════════════════════════════════════════════════════════════ */
.profile-banner {
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.08) 0%, rgba(124, 179, 66, 0.02) 100%);
  border: 1px solid rgba(124, 179, 66, 0.25);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.profile-banner-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}
.profile-banner-textcol { min-width: 0; }
.profile-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e4e8ef);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.profile-banner-sub {
  font-size: 13px;
  color: var(--text-muted, #9aa5b8);
  line-height: 1.45;
}

/* Progress-Ring (SVG circle mit stroke-dasharray Animation) */
.profile-banner-progress-ring {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
}
.profile-banner-progress-ring svg {
  width: 100%; height: 100%;
  display: block;
}
.profile-banner-progress-ring .ring-bg {
  stroke: rgba(154, 165, 184, 0.18);
}
.profile-banner-progress-ring .ring-fill {
  stroke: #7cb342;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease-out;
}
.profile-banner-progress-ring .ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #7cb342;
  letter-spacing: -0.02em;
}

/* Missing-Field-Chips */
.profile-banner-missing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.profile-banner-missing-item {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: rgba(20, 28, 46, 0.5);
  border: 1px solid rgba(154, 165, 184, 0.18);
  border-radius: 14px;
  font-size: 12px;
  color: var(--text-secondary, #c8d0dc);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.profile-banner-missing-item:hover {
  background: rgba(124, 179, 66, 0.12);
  border-color: rgba(124, 179, 66, 0.4);
  color: #7cb342;
  transform: translateY(-1px);
}

/* Actions */
.profile-banner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.profile-banner-actions .btn {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
}
.profile-banner-hint {
  font-size: 11px;
  color: var(--text-muted, #9aa5b8);
  font-style: italic;
}

/* Highlight-Animation wenn jumpToSettingsField springt */
.field-highlight {
  animation: fieldFlash 1.4s ease-out;
}
@keyframes fieldFlash {
  0%   { box-shadow: 0 0 0 0 rgba(124, 179, 66, 0.6); border-color: #7cb342; }
  100% { box-shadow: 0 0 0 14px rgba(124, 179, 66, 0); }
}

/* Mobile */
@media (max-width: 600px) {
  .profile-banner { padding: 16px; }
  .profile-banner-header { grid-template-columns: 1fr; gap: 12px; }
  .profile-banner-progress { justify-self: flex-start; }
  .profile-banner-actions { flex-direction: column; align-items: stretch; }
  .profile-banner-actions .btn { width: 100%; }
  .profile-banner-hint { text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   v3.5.1 — Beta-Phase: Einladungs-Code + Disclaimer
   ════════════════════════════════════════════════════════════════ */
.beta-notice {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.10) 0%, rgba(201, 168, 76, 0.03) 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.beta-notice-title {
  font-size: 13px;
  font-weight: 700;
  color: #c9a84c;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 8px;
}
.beta-notice-body {
  font-size: 13px;
  color: var(--text-secondary, #c8d0dc);
  line-height: 1.55;
}
.required { color: #c9a84c; }

/* v3.5.2: Page-Back-Button für Customer-Detail */
.page-back-row { margin-bottom: 14px; }
.btn-back-link {
  background: transparent;
  border: 0;
  color: var(--text-muted, #9aa5b8);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
  font-family: inherit;
}
.btn-back-link:hover { color: #7cb342; }

/* ════════════════════════════════════════════════════════════════
   v3.5.7 — PINKE-PINKE styled Confirm/Alert Modal
   Ersetzt native confirm() / alert() Dialoge mit branded UI
   ════════════════════════════════════════════════════════════════ */
.pp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: pp-fade-in 0.15s ease-out;
}
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.pp-modal-card {
  background: var(--card, #0c1220);
  border: 1px solid rgba(154, 165, 184, 0.18);
  border-radius: 12px;
  padding: 28px 26px 22px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: pp-scale-in 0.18s ease-out;
}
@keyframes pp-scale-in {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.pp-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124, 179, 66, 0.12);
  border: 1px solid rgba(124, 179, 66, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--emerald, #7cb342);
  margin-bottom: 16px;
}
.pp-modal-icon.danger {
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}
.pp-modal-icon.info {
  background: rgba(154, 165, 184, 0.1);
  border-color: rgba(154, 165, 184, 0.25);
  color: var(--text-muted, #9aa5b8);
}

.pp-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary, #e4e8ef);
  margin-bottom: 10px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pp-modal-message {
  color: var(--text-secondary, #c8d0dc);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 22px;
  white-space: pre-wrap;
}

.pp-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pp-modal-actions .btn {
  min-width: 100px;
}
.pp-modal-actions .btn-primary.danger {
  background: #e74c3c;
  color: #fff;
}
.pp-modal-actions .btn-primary.danger:hover {
  background: #c0392b;
}

/* Mobile-Anpassung */
@media (max-width: 480px) {
  .pp-modal-card { padding: 22px 20px 18px; border-radius: 10px; }
  .pp-modal-title { font-size: 19px; }
  .pp-modal-message { font-size: 13px; }
  .pp-modal-actions { flex-direction: column-reverse; }
  .pp-modal-actions .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   v3.5.17 — Passwort-ändern-Form (Settings → Sicherheit)
   ════════════════════════════════════════════════════════════════ */
.pw-change-form .form-group {
  margin-bottom: 16px;
}
.pw-input-wrap {
  position: relative;
}
.pw-input-wrap input {
  padding-right: 44px;
  width: 100%;
}
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-muted, #9aa5b8);
  cursor: pointer;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 4px;
  line-height: 1;
}
.pw-toggle:hover {
  color: var(--text-primary, #e4e8ef);
  background: rgba(255, 255, 255, 0.05);
}
.pw-change-message {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.pw-change-message.error {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}
.pw-change-message.success {
  background: rgba(124, 179, 66, 0.1);
  border: 1px solid rgba(124, 179, 66, 0.3);
  color: #7cb342;
}

/* ── Fix: Dokument-Karten auf schmalen Screens nicht überlappen ──────────────
   Auf dem Handy war .quote-item eine nicht umbrechende Flex-Zeile. Dadurch lief
   der Preis über Titel und Rahmen ("über den Rahmen schreiben"). Auf schmalen
   Screens stapeln wir Titel-Block und Steuer-Zeile (Preis + Buttons) untereinander. */
@media (max-width: 600px) {
  .quote-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .quote-item-main { min-width: 0; }
  .quote-item-title {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Rechte Steuer-Zeile (Preis + → AB + → Rechnung + ✕): volle Breite, sauber verteilt */
  .quote-item > div:last-child {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .quote-item-price { margin-right: auto; }
}