/* ===================================================================
   Design Tokens (vereinheitlicht)
   =================================================================== */
:root{
  /* Brand */
  --primary:#00539b;
  --primary-700:#003f78;
  --accent:#00a0e0;

  /* Neutrals */
  --bg:#f3f6f9;
  --surface:#ffffff;
  --text:#0b2239;
  --muted:#4a6073;
  --border:#d7e1ea;

  /* State */
  --ring:rgba(0,83,155,.25);
  --danger:#d13c3c;
  --danger-700:#b52f2f;
  --success:#1a6b33;

  /* Effects */
  --shadow:0 12px 28px rgba(11,34,57,.08);
  --radius:14px;

  /* Layout helpers */
  --col-date:220px;   /* Datumsspalte Personen */
  --col-action:44px;  /* Spalte für ✕-Button */
  --gap:12px;
}
  
 
/* ===================================================================
   Base
   =================================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:16px/1.55 "Murecho", system-ui, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.hidden {
  display: none !important;
}
.show {
  display: block !important;
}
/* Dünner Markenstreifen oben (optional) */
.brand-stripe{ height:6px; background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%); }

/* Container */
.container{ max-width:1200px; margin:0 auto; padding:clamp(16px,3vw,28px); }
.wrap{ max-width:1100px; margin:32px auto; padding:0 16px; }

/* Headings */
h1{ margin:6px 0 10px; font-size:clamp(26px,3.8vw,36px); line-height:1.15; color:var(--primary-700); font-weight:800; }
h2{ margin:4px 0 8px; font-size:22px; line-height:1.25; font-weight:700; }
h2 small{ font-weight:normal; font-size:.9em; color:var(--muted); }
h3{ margin:18px 0 8px; font-size:18px; line-height:1.35; font-weight:700; color:var(--primary-700); }
p.lead{ margin:0 0 12px; color:var(--muted); }

/* ===================================================================
   Forms
   =================================================================== */
label{ display:block; margin-top:5px; font-weight:600; color:var(--muted); }
input[type="text"],input[type="date"],input[type="email"],select{
  width:100%; padding:10px 12px; margin-top:6px;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder{ color:#9aa7b7; }
select:disabled{ background:#f3f6fa; cursor:not-allowed; }
input:focus,select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); }

/* Form-Container */
form#multiStepForm,form#vehicleForm{
  margin:48px auto; max-width:960px; padding:28px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* Steps */
.step{ display:none; }
.step.active{ display:block; }


/* Grid-Zeilen */
.person-row{
  display:grid; grid-template-columns:1fr 1fr var(--col-date) var(--col-action);
  align-items:center; gap:var(--gap); margin-bottom:14px;
}
.veh-row{
  display:grid; grid-template-columns:1fr var(--col-action);
  align-items:center; gap:var(--gap); margin-bottom:14px;
}

/* ✕-Button */
.remove-row{
  width:var(--col-action); height:42px; display:flex; align-items:center; justify-content:center; align-self:stretch;
  border-radius:8px; border:1px solid #f1c7c7; background:#fdecec; color:var(--danger-700);
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.remove-row:hover{ background:#fbd5d5; border-color:#f0b1b1; }

/* Checkbox-Zeilen */
.form-check{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.form-check input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--primary); transform:translateY(1px); }

/* Sektionen */
.section{
  margin-top:16px; padding:16px; border:1px solid var(--border);
  border-radius:12px; background:#fbfdff; box-shadow:var(--shadow);
}
.section.privacy{ margin-top:12px; }

/* Info-Zähler */
.countline,.count-line{ margin:4px 0 10px; color:var(--muted); font-size:14px; }
.countline strong{ color:var(--text); }

/* Preview */
#previewContainer{
  margin-top:14px; padding:14px; border:1px dashed var(--border);
  border-radius:10px; background:#fafcff; color:var(--text);
}

/* Buttons (Element) */
button,input[type="submit"]{
  margin-top:15px; padding:11px 16px; border-radius:10px; border:1px solid var(--border);
  background:#eef3f8; color:var(--text); font-weight:700; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
button:hover{ background:#e5eef6; }
button:active{ transform:translateY(1px); }
button:disabled,input[type="submit"]:disabled{ opacity:.6; cursor:not-allowed; }
#weiterBtn,input[type="submit"]{ background:var(--primary); border-color:var(--primary); color:#fff; }
#weiterBtn:hover,input[type="submit"]:hover{ background:var(--primary-700); border-color:var(--primary-700); }
#zurueckBtn{ background:#eef2f7; }
#zurueckBtn:hover{ background:#e6ebf2; }
#addRowsBtn,#vehAddRowsBtn{ background:#eef7ff; border-color:#d4e6fb; color:#0f3767; }
#addRowsBtn:hover,#vehAddRowsBtn:hover{ background:#e3f2ff; }

/* Buttons (Klassen) */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  cursor:pointer; border:1px solid var(--border); background:#eef3f8;
  font-weight:800; color:var(--text); transition:background .15s,border-color .15s,transform .05s;
}
.btn:hover{ background:#e5eef6; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-700); border-color:var(--primary-700); }
.btn-ghost{ background:#fff; border-color:var(--border); }
.btn-danger{ background:#feecec; border-color:#f2c9c9; color:var(--danger-700); }
.btn-danger:hover{ background:#fbdede; border-color:#f0b1b1; }
.btn-small{ padding:6px 10px; font-weight:600; font-size:14px; }

/* Badges */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--border); background:#fff; color:var(--muted); }
.badge.true{ background:#e8f6ee; color:var(--success); border-color:#cdeed9; }
.badge.false{ background:#fff5f5; color:#8b2c2c; border-color:#f1c9c9; }
.badge.approved{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.badge.rejected{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }

/* ===================================================================
   Karten & Layout-Kacheln
   =================================================================== */
/* generische Karte */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
/* Aktionskarten nur im Grid kontextuell stylen → vermeidet Konflikte */
.grid .card{
  position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.grid .card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%); opacity:.9;
}
.grid .card:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(11,34,57,.12); border-color:var(--primary); }
.grid .card a{ display:grid; gap:12px; padding:20px 20px 18px; text-decoration:none; color:inherit; outline:none; }
.grid .card a:focus-visible{ box-shadow:0 0 0 4px var(--ring); border-radius:calc(var(--radius) - 2px); }
.grid .card .title{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.grid .card .title h3{ margin:0; font-size:18px; letter-spacing:.2px; font-weight:800; }
.grid .card .desc{ margin:0; color:var(--muted); font-size:14px; }
.grid .card .icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 20px rgba(0,0,0,.10); flex:0 0 auto; }
.grid .card .icon img{ width:26px; height:26px; object-fit:contain; }
.grid .card .chevron{
  position:absolute; right:16px; bottom:16px; width:24px; height:24px; display:grid; place-items:center;
  border-radius:8px; border:1px solid var(--border); transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.grid .card:hover .chevron{ transform:translateX(2px); background:#f0f6fb; border-color:var(--primary); }

/* einklappbare Karten/Zeilen (Admin-Ansichten) */
.card-h{ display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; padding:12px 14px; cursor:pointer; }
.chev{ width:22px; height:22px; display:grid; place-items:center; transition:transform .18s ease; }
.card.open .chev{ transform:rotate(90deg); }
.meta{ display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:14px; }
.title{ font-weight:700; color:var(--text); }
.card-actions{ display:flex; gap:8px; }
.card-b{ display:none; padding:12px 14px; border-top:1px solid var(--border); background:#fcfeff; }
.card.open .card-b{ display:block; }

/* ===================================================================
   Tabellen
   =================================================================== */
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; }
table{ width:100%; border-collapse:collapse; background:#fff; }
thead th{
  text-align:left; padding:12px; border-bottom:1px solid var(--border);
  font-size:14px; color:var(--muted); background:#f7fbff; position:sticky; top:0;
}
tbody td{ padding:12px; border-bottom:1px solid #eef2f6; vertical-align:middle; }
tbody tr:hover{ background:#f9fcff; }
.center{ text-align:center; }
.mono{ font-variant-numeric:tabular-nums; }

/* Pagination */
.pagination{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.pagination .btn{ padding:8px 12px; }

/* ===================================================================
   Modals
   =================================================================== */
.modal{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(9,18,31,.45); align-items:center; justify-content:center; padding:18px; }
.modal.open{ display:flex; }
.modal-content{
  background:#fff; color:var(--text); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); max-width:720px; width:100%; padding:20px 22px;
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.modal-header h3{ margin:0; font-size:20px; }
.modal-body{ display:grid; gap:10px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.btn-primary,.btn-secondary{ color:#fff; border:none; padding:8px 14px; border-radius:8px; font-weight:700; cursor:pointer; }
.btn-secondary{ background:var(--primary-700); }

/* ===================================================================
   Layout-Grid / Hero
   =================================================================== */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(14px,2.2vw,22px); }
.hero{
  margin:clamp(14px,3vw,22px) 0 18px; display:grid; gap:10px;
}
.hero h1{
  margin:0; font-size:clamp(30px,4.5vw,42px); line-height:1.15; letter-spacing:.2px; color:var(--primary-700); font-weight:800;
}
.hero p{ margin:0; color:var(--muted); max-width:70ch; }

/* ===================================================================
   Footer
   =================================================================== */
.site-footer{ max-width:960px; margin:36px auto 18px; padding:16px 0; border-top:1px solid var(--border); }
.site-footer .footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:14px; color:var(--muted);
}
.footer-brand{ font-weight:700; color:var(--text); }
.footer-nav{ display:flex; align-items:center; gap:6px; }
.footer-nav a{
  color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.footer-nav a:hover{ color:var(--primary); background:#eef7ff; }
.footer-copy{ white-space:nowrap; }

/* ===================================================================
   Utilities
   =================================================================== */
.card .empty{ color:var(--muted); font-style:italic; padding:4px 0; }
.year-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.year-card{ border:1px solid var(--border); border-radius:12px; padding:10px; background:#fbfeff; text-align:center; }
.year-card .y{ font-weight:700; color:var(--muted); }
.year-card .c{ font-size:22px; font-weight:800; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 720px){
  .site-footer .footer-inner{ justify-content:center; text-align:center; }
  .person-row{ grid-template-columns:1fr 1fr; }
  .person-row input[name^="geburtsdatum_"]{ grid-column:span 1; }
  .person-row .remove-row{ grid-column:span 1; }
  .veh-row{ grid-template-columns:1fr var(--col-action); }
}
.is-invalid { border-color: red; }

/* =========================================================
   ÄNDERUNG 1: .person-row/.veh-row Flex NUR im Formular
   (damit Modal-Edit nicht überschrieben wird)
   ========================================================= */
form#multiStepForm .person-row,
form#multiStepForm .veh-row{
  display:flex;
  gap:6px;
  margin-bottom:6px;
}

/* =========================================================
   ÄNDERUNG 2: Modal "Bearbeiten" – Felder nebeneinander
   (Klassen kommen aus renderEditLists(): .grid-3 / .grid-2)
   ========================================================= */
.edit-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  margin-bottom:10px;
}
.edit-card-title{
  font-weight:800;
  color:var(--primary-700);
  margin-bottom:10px;
}
.grid-3{
  display:grid;
  grid-template-columns: 1fr 1fr 220px; /* Nachname | Vorname | Geburtsdatum */
  gap:12px;
  align-items:end;
}
.grid-2{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (max-width: 720px){
  .grid-3{ grid-template-columns:1fr; }
}

button { cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
#personHint, #vehicleHint { color:#666; margin:.25rem 0 0; }

/* Ladeoverlay */
#loadingOverlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(255,255,255,0.8);
  z-index:2000;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-size:1.2rem;
  color:#003366;
}
#loadingOverlay.show { display:flex; }
.spinner {
  border:5px solid #ccc;
  border-top:5px solid #0078d7;
  border-radius:50%;
  width:50px;
  height:50px;
  animation:spin 1s linear infinite;
  margin-bottom:12px;
}
@keyframes spin {
  0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}
}

#loadingOverlay.show{
  display:flex !important;
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  background:rgba(255,255,255,0.85) !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  text-align:center !important;
}

#loadingOverlay .spinner{
  margin:0;
}

/* Formular: Remove-Button nicht über Label-Höhe strecken */
form#multiStepForm .person-row{
  align-items:flex-end;
}

form#multiStepForm .person-row .remove-row{
  align-self:flex-end;     /* überschreibt align-self:stretch */
  height:42px;             /* wie Inputhöhe */
  margin-top:0 !important; /* falls irgendwo gesetzt */
}

  .privacy-page{
    color:#000;                 /* Text schwarz */
    font-size:11px;             /* Fließtext 11px */
    line-height:1.55;
  }

  .privacy-page h1{
    font-size:14px;             /* Header 14px */
    color:var(--primary-700);
    margin:0 0 12px;
    font-weight:800;
    line-height:1.25;
  }

  /* Semantische Hierarchie, aber gleiche Optik (14px) */
  .privacy-page h2,
  .privacy-page h3,
  .privacy-page h4{
    font-size:14px;
    color:var(--primary-700);
    margin-top:18px;
    margin-bottom:10px;
    font-weight:800;
    line-height:1.25;
  }

  .privacy-page p{ margin:0 0 10px; }
  .privacy-page a{ color:var(--primary); }
  .privacy-page a:hover{ color:var(--primary-700); }

  .privacy-page .toc ul{ margin:8px 0 0 18px; padding:0; }
  .privacy-page .toc li{ margin:4px 0; }

  .privacy-page .addr{ white-space:pre-line; margin:6px 0 12px; }

  .privacy-page table thead th,
  .privacy-page table tbody td{ font-size:11px; }

.privacy-page p {
  font-size: 11px;
  line-height: 1.35;
}
/* =========================================================
   ZÜP Switch (DIV-Toggle)
   ========================================================= */
.switch{
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: #cfd6dd;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.switch::after{
  content:"";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.switch[data-on="true"]{
  background: var(--primary);
}

.switch[data-on="true"]::after{
  left: 27px;
}