/* Einheitliche Seitenbreite + Zentrierung */
:root { --container-max: 960px; }           /* bei Bedarf 1024px/1100px etc. */

/* === Ratenplan UI (v09u UI consolidate) === */
:root{
  --bg:#0b1220; --card:#0f172a; --muted:#93a4c0; --line:#172135;
}
/* Generic */
*{box-sizing:border-box}
body{background:var(--bg);color:#e6edf7}

h2{margin:0 0 14px 0}

/* Buttons, inputs */
select,input,button{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:#e6edf7}
button.btn, .btn{display:inline-block;padding:8px 12px;border-radius:10px;background:#3b82f6;border:1px solid #3b82f6;color:#fff;text-decoration:none;cursor:pointer}

/* Cards / KPIs */
.grid{display:grid;gap:14px}
.kpi-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.25);padding:16px;min-height:104px;display:flex;flex-direction:column;justify-content:center}
.card .label{font-size:12px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.card .value{font-size:28px;font-weight:700;margin-top:6px}

/* Table */
table{width:100%}
.table{border-collapse:separate;border-spacing:0 6px}
.table thead th{font-weight:600;color:var(--muted);font-size:13px;padding:8px 10px}
.table tbody tr{background:var(--card);border-radius:12px}
.table tbody td{padding:10px;border-top:1px solid var(--line)}
.table tbody tr td:first-child{border-top-left-radius:12px}
.table tbody tr td:last-child{border-top-right-radius:12px}
.table tbody tr+tr td{border-top:0}
.table tbody tr:nth-child(even){filter:brightness(1.03)}

/* Badges */
.badge{padding:3px 10px;border-radius:999px;font-size:12px;display:inline-block}
.badge.offen{background:#334155;color:#cbd5e1}
.badge.bezahlt{background:#166534;color:#a7f3d0}
.badge.storniert{background:#991b1b;color:#fecaca}

/* Utility spacers */
.mb-3{margin-bottom:12px}
.mt-3{margin-top:12px}

/* Responsive */
@media (max-width: 900px){
  .kpi-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-2{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .kpi-3{grid-template-columns:1fr}
}


/* ===== Tabellen-Polish (Customer) ===== */
.table{
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.table thead th,
.table tbody td{
  padding: 12px 14px;
}
.table thead th{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
}
.table tbody tr{
  background: var(--card);
  box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line);
}
.table tbody td:first-child{
  border-radius: 12px 0 0 12px;
}
.table tbody td:last-child{
  border-radius: 0 12px 12px 0;
}
.table th:nth-child(1), .table td:nth-child(1){ width: 60px;  text-align: center; }
.table th:nth-child(2), .table td:nth-child(2){ width: 24%;   text-align: left;   }
.table th:nth-child(3), .table td:nth-child(3){ width: 16%;   text-align: left;   }
.table th:nth-child(4), .table td:nth-child(4){ width: 14%;   text-align: right;  }
.table th:nth-child(5), .table td:nth-child(5){ width: 14%;   text-align: center; }
.table th:nth-child(6), .table td:nth-child(6){ width: 22%;   text-align: right;  }
.badge{ padding: 2px 8px; font-size: 11px; }


/* ===== Status-Badges – bessere Lesbarkeit ===== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.35) inset, 0 0 0 1px rgba(0,0,0,.25);
  text-transform: none;
}
.badge::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}
.badge.offen{ background:#283548; color:#e6eefc; border-color:#3a4a66; }
.badge.bezahlt{ background:#124f2d; color:#dbffe9; border-color:#1f6f41; }
.badge.storniert{ background:#5a1a1a; color:#ffe1e1; border-color:#7a2626; }

.badge.offen::before{ background:#a7b9da; }
.badge.bezahlt::before{ background:#34d399; }
.badge.storniert::before{ background:#fca5a5; }


/* ===== Monatsübersicht (Customer) ===== */
.months-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.month-card{
  background:var(--card);
  border-radius:16px;
  padding:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.month-title{
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
  text-transform:uppercase;
  font-size:12px;
}
.month-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
  border-top:1px solid var(--line);
}
.month-row:first-of-type{ border-top:0; }
.mono{ font-variant-numeric: tabular-nums; }
@media (max-width: 1100px){
  .months-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 800px){
  .months-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px){
  .months-grid{ grid-template-columns:1fr; }
}


/* Heading row with year dropdown */
.heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.heading-row h2{ margin:0; }
.year-form{ display:flex; gap:8px; align-items:center; }
.year-form label{ color:var(--muted); font-size:14px; }
.year-form select, .year-form button{ padding:6px 10px; font-size:14px; }


/* Year form row under heading */
.heading-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom:20px;
}
.year-form{ display:flex; gap:8px; align-items:center; }


/* Monatsübersicht – einfache Farblogik */
.months-grid .amount-open{ color:#ef4444; font-weight:700; }  /* rot für offene Beträge > 0 */
.months-grid .amount-paid{ color:#16a34a; font-weight:700; }  /* grün für bezahlte Beträge > 0 */
.months-grid .amount-zero{ color:#e5e7eb; font-weight:700; }  /* hell, wenn 0,00 € */


/* Monatsübersicht – Farblogik (fix, forced) */
.months-grid .amount { font-weight:700; }
.months-grid .amount-open { color:#ef4444 !important; }
.months-grid .amount-paid { color:#16a34a !important; }
.months-grid .amount-zero { color:#e5e7eb !important; }


/* Monatsübersicht – Monatsnamen hervorheben */
.month-card .month-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #f3f4f6;
}


/* Gesamt-Kacheln einfärben */
.total-card .amount-open { color:#ef4444 !important; font-weight:700; }
.total-card .amount-paid { color:#16a34a !important; font-weight:700; }
.total-card .amount-zero { color:#e5e7eb !important; font-weight:700; }


/* Trennlinie zwischen Gesamt- und Monatskacheln */
.summary-section {
  border-bottom: 2px solid #1f2937;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* Gesamt-Kacheln Farb-Logik */
.summary-section .amount-open { color:#ef4444 !important; font-weight:700; }
.summary-section .amount-paid { color:#16a34a !important; font-weight:700; }
.summary-section .amount-zero { color:#e5e7eb !important; font-weight:700; }


/* Guthaben Farb-Logik */
.summary-section .amount-credit { color:#facc15 !important; font-weight:700; }


/* Monatskacheln als Link */
.month-link{ text-decoration:none; color:inherit; display:block; }
.month-link .month-card{ cursor:pointer; }
.month-link:focus .month-card, .month-link:hover .month-card{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }


/* Klickfläche über ganzer Monatskarte */
.month-card{ position:relative; }
.month-card::before{ z-index:0; } /* unsere Bordüre bleibt unter dem Link */
.month-card > *{ position:relative; z-index:1; }
.month-card .stretched-link{
  position:absolute; inset:0; z-index:3;
  text-indent:-9999px; overflow:hidden; border-radius:16px;
}
.month-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }

.month-card .stretched-link:link,
.month-card .stretched-link:visited,
.month-card .stretched-link:hover,
.month-card .stretched-link:active{ text-decoration:none; color:inherit; }


/* Monat als klickbare Karte (Anchor umspannt die Karte) */
.month-card-link{ display:block; text-decoration:none; color:inherit; }
.month-card-link *{ pointer-events:none; } /* Klicks gehen an den Link */
.month-card-link:hover .month-card{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.month-card{ cursor:pointer; }


/* Sicherstellen, dass Monatskarten klickbar sind */
.month-card{ position:relative; }
.month-card *{ pointer-events:auto; } /* JS Click auf Karte soll immer greifen */


/* Klickbare Monatskarten – robust */
.month-card-link{ display:block; text-decoration:none; color:inherit; }
.month-card{ position:relative; cursor:pointer; }
.month-card::before{ pointer-events:none !important; z-index:0; }
.month-card-link *{ pointer-events:auto; } /* Kinder dürfen Events haben, Link bleibt klickbar */
.month-card-link:hover .month-card{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }


/* Admin Monatskacheln (verwenden dieselben Styles) */
.month-card-link{ display:block; text-decoration:none; color:inherit; }
.month-card{ position:relative; cursor:pointer; }
.month-card::before{ pointer-events:none !important; z-index:0; }
.month-card-link:hover .month-card{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }


/* Admin Monatsübersicht – Linkfarbe neutralisieren und Titel angleichen */
.months-grid a, .months-grid a:visited { color: inherit; text-decoration: none; }
.months-grid .month-title { text-align:center; font-size:1.1rem; font-weight:600; color:#f3f4f6; margin-bottom:6px; }
/* Farben für Beträge (erzwingt Kunden-Style auch im Admin) */
.months-grid .amount-open { color:#ef4444 !important; font-weight:700; }
.months-grid .amount-paid { color:#16a34a !important; font-weight:700; }
.months-grid .amount-zero { color:#e5e7eb !important; font-weight:700; }


/* --- Admin Monatsdetail UI polish --- */
.heading-row .btn.btn-sm{ padding:6px 10px; font-size:.9rem; }
.btn.btn-sm{ padding:6px 10px; font-size:.85rem; border-radius:10px; }
.btn.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.12); }
.btn.btn-ghost:hover{ background:rgba(255,255,255,.06); }

.table td, .table th{ vertical-align: middle; }
.table .inline-form{ display:inline; }
.table td:last-child{ white-space:nowrap; text-align:right; }
.badge{ padding:2px 8px; border-radius:9999px; font-size:.8rem; }

/* KPI cards two columns on wide screens */
.grid.kpi-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 700px){
  .grid.kpi-2{ grid-template-columns: 1fr; }
}

/* Fix dark theme contrast for card borders */
.card{ border:1px solid rgba(255,255,255,.08); }


/* --- Compact action buttons in month detail table --- */
.table td.actions{ white-space:nowrap; text-align:right; }
.table td.actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.btn.btn-icon{ width:32px; height:32px; padding:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.16); }
.btn.btn-icon:hover{ background:rgba(255,255,255,.06); }
.btn.btn-icon.btn-success{ border-color: rgba(34,197,94,.6); }
.btn.btn-icon.btn-success:hover{ background: rgba(34,197,94,.18); }
.btn.btn-icon.btn-danger{ border-color: rgba(239,68,68,.6); }
.btn.btn-icon.btn-danger:hover{ background: rgba(239,68,68,.18); }
.btn.btn-icon[disabled]{ opacity:.5; cursor:not-allowed; }


/* Hide descriptive text inside buttons for visual users, keep for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* Action column style */
.table td.actions{ white-space:nowrap; text-align:right; }
.table td.actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.btn.btn-icon{ width:32px; height:32px; padding:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.16); }
.btn.btn-icon:hover{ background:rgba(255,255,255,.06); }
.btn.btn-icon.btn-success{ border-color: rgba(34,197,94,.6); }
.btn.btn-icon.btn-success:hover{ background: rgba(34,197,94,.18); }
.btn.btn-icon.btn-danger{ border-color: rgba(239,68,68,.6); }
.btn.btn-icon.btn-danger:hover{ background: rgba(239,68,68,.18); }
.btn.btn-icon[disabled]{ opacity:.5; cursor:not-allowed; }


/* Ensure action column has enough space */
.table td.actions, .table th.actions {
  width: 140px;
  min-width: 140px;
  text-align: right;
}

.table td.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap; /* allow wrap on small screens */
}

.btn.btn-icon {
  flex: 0 0 auto;
}


/* Table action buttons inside cells */
.table td.actions, .table th.actions {
  width: 120px;
  min-width: 120px;
  text-align: center;
}

.table td.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.table td.actions .btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
}

.table td.actions .btn-icon.success {
  background-color: #198754; /* green */
  color: #fff;
}

.table td.actions .btn-icon.danger {
  background-color: #dc3545; /* red */
  color: #fff;
}


/* --- Column sizing for admin month detail table --- */
.table { width:100%; border-collapse: separate; border-spacing: 0; }
.table .col-id { width: 6%; min-width: 48px; }
.table .col-product { width: 34%; }
.table .col-order { width: 12%; }
.table .col-amount { width: 10%; }
.table .col-status { width: 12%; }
.table .col-due { width: 12%; }
.table .col-actions { width: 14%; min-width: 120px; }

/* Alignments */
.table td:nth-child(4), .table th:nth-child(4){ text-align:right; } /* Betrag */
.table td:nth-child(5), .table th:nth-child(5){ text-align:center; } /* Status */
.table td:nth-child(6), .table th:nth-child(6){ white-space:nowrap; } /* Fällig am */
.table td:nth-child(2){ word-break: break-word; } /* Produkt kann umbrechen */

/* Tighten horizontal padding a bit for more compact look */
.table th, .table td{ padding: 12px 14px; }


/* Alias classes for success/danger icon buttons */
.btn.btn-icon.success{ background-color:#198754; color:#fff; }
.btn.btn-icon.danger{ background-color:#dc3545; color:#fff; }
.btn.btn-icon[disabled]{ opacity:.5; cursor:not-allowed; }


/* Info style for credit badge and button */
.badge.info{ background:rgba(14,165,233,.15); color:#7dd3fc; border:1px solid rgba(14,165,233,.35); padding:3px 8px; border-radius:9999px; font-size:.85rem; }
.btn.btn-icon.info{ background-color:#0ea5e9; color:#fff; }
.btn.btn-icon.info[disabled]{ opacity:.5; cursor:not-allowed; }

.summary-cards .card h4{ margin:0 0 .4rem 0; opacity:.9; }
.amount-credit{ color:#38bdf8; font-weight:700; }


/* Info card for credits on dashboard */
.card.info { border:1px solid rgba(14,165,233,.35); background: rgba(14,165,233,.06); }
.card.info h4 { color:#7dd3fc; }


/* Amount color helpers (dashboard/admin/customer unified) */
.amount-open { color:#ef4444 !important; font-weight:700; }
.amount-paid { color:#16a34a !important; font-weight:700; }
.amount-zero { color:#e5e7eb !important; font-weight:700; }
.amount-credit { color:#facc15 !important; font-weight:700; }

/* Admin > Users: 2-column create form */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:900px}
.form-field{display:flex;flex-direction:column}
.form-span-2{grid-column:1 / -1}
.inline-check{display:flex;align-items:center;gap:8px;margin-top:6px}
/* reuse phone-row styles from earlier (already present), but ensure width for this form */
.phone-row{display:flex;gap:8px;align-items:center}
.phone-cc{min-width:200px}
.phone-number{flex:1;min-width:0}


/* Admin > Users: whatsapp toggle + hint */
.hint{margin:.25rem 0 0;color:#9ca3af;font-size:.875rem}


/* ---- Notifications layout tweaks ---- */
.card--narrow{max-width:640px}
.card--wide{max-width:780px}
.mb-2{margin-bottom:16px}
.alert-success{color:#1b5e20}
.alert-error{color:#c62828}
.form-compact{background:transparent;padding:0;gap:8px}
.form-group{margin:12px 0}
.checkline{display:flex;align-items:center;gap:8px}
.checkline input[type="checkbox"]{position:relative;top:1px}
.btn-save{margin-top:10px}

/* ---- merged from app.css ---- */
:root { --bg:#0b1020; --card:#111834; --text:#e8ecff; --muted:#93a1ff; --accent:#5b7cfa; --danger:#c62828; --ok:#1b5e20; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif}

.main-nav ul{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.main-nav a{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;background:#0f1838}
.main-nav a:hover{background:#16235c}
.content{padding-top:16px}
.card{background:var(--card);padding:16px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.login-container{display:flex;align-items:center;justify-content:center;min-height:75vh}
.login-form{display:flex;flex-direction:column;gap:12px;min-width:320px;background:var(--card);padding:24px;border-radius:14px}
.login-form input, .login-form select, .login-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #3043a6;background:#0c1430;color:var(--text)}
.login-form button, button{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer}
.login-form button:hover, button:hover{opacity:.9}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{border-bottom:1px solid #263165;padding:10px;text-align:left}
.status-badge{padding:4px 8px;border-radius:6px;background:#2b3a7a}
.status-bezahlt{background:#134e21}
.status-storniert{background:#5f2020}
.status-offen{background:#2b3a7a}
.summary-cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.summary-cards .card h4{margin:0 0 6px 0}
.back-button{display:inline-block;padding:8px 12px;background:#0f1838;border-radius:10px;color:#fff;text-decoration:none}
.notice{padding:10px;border-radius:10px;background:#0c1737;border:1px solid #2b3a7a}

/* ---- utility classes generated from inline styles ---- */
.u-7a825928{opacity:.6;padding:20px 0;}
.u-6d000617{margin-left:auto;}
.u-6becc959{color:#1b5e20;}
.u-cc402481{color:#c62828;}
.u-0fd8744d{max-width:420px;}
.u-01ef7fc9{display:flex;gap:8px;align-items:center;}
.u-63f3b971{margin:.5rem 0 1rem; display:flex; gap:.5rem; align-items:center;}
.u-21e8bb66{max-width:160px;}
.u-4c11a575{display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0;}
.u-e2b01b0d{max-width:640px;}
.u-bfbe3f1e{width:100%;padding:10px;border-radius:10px;border:1px solid #3043a6;background:#0c1430;color:#fff;}
.u-6b99de8b{display:none;}
.u-a562f4fd{justify-content:space-between;}
.u-0599310b{color:#b71c1c;}
.u-87c136df{margin-bottom:16px;}
.u-ee8795df{margin-bottom:16px;max-width:980px;}
.u-65259e79{justify-content:space-between; gap:.5rem; align-items:center;}
.u-16332389{display:flex; gap:.75rem; align-items:center;}

/* dashboard filter select width */
.u-maxw-140{max-width:140px;}


/* ---- Form rows + Switch toggle ---- */
.form-row{display:flex;gap: 8px;margin-bottom:10px;align-items:center}
.form-row > label{min-width:160px}
.switch{display:flex;align-items:center;gap:10px}
.switch input{display:none}
.slider{position:relative;width:40px;height:22px;background-color:#ccc;border-radius:22px;cursor:pointer;transition:background-color .3s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s}
.switch input:checked + .slider{background-color:#2a6df4}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch-label{font-size:14px}



/* ---- Unified two-column form layout ---- */
.form-row{display:grid;grid-template-columns: 140px 1fr;gap: 8px;align-items:center;margin-bottom:10px}
.form-row > label{justify-self:start}
.form-row .inline-group{display:flex;gap: 8px;align-items:center}
/* toggle switch */
.switch{display:flex;align-items:center;gap:10px}
.switch input{display:none}
.slider{position:relative;width:40px;height:22px;background-color:#ccc;border-radius:22px;cursor:pointer;transition:background-color .3s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s}
.switch input:checked + .slider{background-color:#2a6df4}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch-label{font-size:14px}


.form-grid{display:block}
.hint{opacity:.7;font-size:.9em;margin:0}


/* Customer self-service alignment tweaks */
.inline-group { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.hint { opacity:.7; font-size:.9em; margin:0; }



/* Admin edit form consistency */
.form-row{display:grid;grid-template-columns:140px 1fr;gap:8px;align-items:center;margin-bottom:10px}
.inline-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:10px}
.switch input{display:none}
.slider{position:relative;width:40px;height:22px;background-color:#ccc;border-radius:22px;cursor:pointer;transition:background-color .3s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s}
.switch input:checked + .slider{background-color:#2a6df4}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch-label{font-size:14px}



/* Ensure consistent admin edit layout */
.form-row{display:grid;grid-template-columns:140px 1fr;gap:8px;align-items:center;margin-bottom:10px}
.inline-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:10px}
.switch input{display:none}
.slider{position:relative;width:40px;height:22px;background-color:#ccc;border-radius:22px;cursor:pointer;transition:background-color .3s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s}
.switch input:checked + .slider{background-color:#2a6df4}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch-label{font-size:14px}



.form-row{display:grid;grid-template-columns:140px 1fr;gap:8px;align-items:center;margin-bottom:10px}
.inline-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:10px}
.switch input{display:none}
.slider{position:relative;width:40px;height:22px;background-color:#ccc;border-radius:22px;cursor:pointer;transition:background-color .3s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s}
.switch input:checked + .slider{background-color:#2a6df4}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch-label{font-size:14px}



.form-row{display:grid;grid-template-columns:140px 1fr;gap:8px;align-items:center;margin-bottom:10px}
.inline-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:10px}
.switch input{display:none}
.slider{position:relative;width:40px;height:22px;background-color:#ccc;border-radius:22px;cursor:pointer;transition:background-color .3s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s}
.switch input:checked + .slider{background-color:#2a6df4}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch-label{font-size:14px}


/* --- NAV / DROPDOWN --- */
.main-nav { padding: 10px 0; }
.nav-list {
  display: flex; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.nav-list > li > a,
.nav-list > li > button.dropdown-toggle {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: #13213b;
  color: #e6edff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}
.nav-list > li > a:hover,
.nav-list > li > button.dropdown-toggle:hover {
  background: #2b3f6b;
}

.push { margin-left: auto; }

.dropdown { position: relative; }
.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #0e1627;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 6px;
  z-index: 1000;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown .dropdown-menu li { list-style: none; }
.dropdown .dropdown-menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: #dfe7ff; text-decoration: none;
}
.dropdown .dropdown-menu a:hover { background: #1a2744; color: #fff; }

.logout-link { background: #21345d; }
.logout-link:hover { background: #2e4b8e; }

/* --- centered layout for forms --- */
z0px;
  margin: 0 auto;
}
.page-center input,
.page-center select,
.page-center textarea,
.page-center button,
.page-center .btn,
.page-center .button {
  width: 100%;
}

/* Brand logo alignment */
.site-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header/Navi genauso mittig und gleich breit */
header .main-nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* (optional) Logo-Feinschliff */
.nav-list .brand img { display:block; height:44px; }
.nav-list .brand { margin-right:12px; }