:root{--bg:#f4f5f7;--panel:#fff;--line:#e4e6eb;--text:#171b22;--muted:#747b86;--yellow:#f7ca00;--dark:#15191f;--shadow:0 18px 45px rgba(20,25,33,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.app{min-height:100vh;display:grid;grid-template-columns:88px minmax(0,1fr)}.rail{background:linear-gradient(180deg,#11161d,#1a2028);color:#fff;display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:18px}.brand-mark{width:42px;height:42px;border:2px solid var(--yellow);color:var(--yellow);display:grid;place-items:center;font-weight:900;border-radius:10px}.rail nav{display:flex;flex-direction:column;gap:7px;width:100%}.rail-bottom{margin-top:auto;width:100%}.rail-item{width:100%;min-height:74px;color:#d7dbe1;border-left:4px solid transparent;display:grid;place-items:center;gap:4px}.rail-item span{font-size:22px}.rail-item small{font-size:11px}.rail-item.active{color:var(--yellow);background:rgba(247,202,0,.08);border-left-color:var(--yellow)}.topbar{height:74px;background:var(--dark);color:white;display:grid;grid-template-columns:250px minmax(560px,1fr) 220px;gap:16px;align-items:center;padding:0 24px}.logo{display:flex;align-items:center;gap:11px;letter-spacing:.08em;font-weight:800;font-size:20px}.logo b{color:var(--yellow)}.logo-icon{color:var(--yellow);font-size:25px}.top-pill{height:42px;border:1px solid #3e4652;background:#20262e;border-radius:7px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;color:#d7dbe1;gap:10px}.top-pill strong{color:var(--yellow)}.search-box{height:48px;background:#fff;color:var(--text);border-radius:7px;display:flex;align-items:center;padding:0 14px;gap:10px}.search-box input{width:100%;border:0;outline:0}.search-box span{color:var(--muted);font-size:22px}.user-box{display:flex;justify-content:end;align-items:center;gap:14px}.user-box small{display:block;color:#bcc2cc}.avatar{width:42px;height:42px;background:#444b55;border-radius:50%;display:grid;place-items:center;font-weight:800}.content{padding:18px;min-height:calc(100vh - 74px)}.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.page-head h1{margin:0;font-size:30px}.page-head p{margin:6px 0 0;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border-radius:7px;border:1px solid var(--line);background:#fff;color:#333b46;font-weight:750}.btn.primary{background:var(--yellow);border-color:var(--yellow);color:#111;font-weight:900}.flash,.alert{padding:13px 15px;border-radius:8px;margin-bottom:16px;border:1px solid #cfe8d5;background:#e8f8ec;color:#186c28}.alert.error{border-color:#ffd0d0;background:#ffe9e9;color:#a82020}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}.stat-card,.panel,.vehicle-card,.form-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.stat-card{padding:22px}.stat-card span{color:var(--muted);display:block}.stat-card strong{font-size:40px;display:block;margin-top:8px}.panel{padding:18px;margin-bottom:16px}.panel h2{margin:0 0 14px;font-size:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.panel-head h2{margin:0}.panel-head a{color:#916f00;font-weight:800}.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}.vehicle-card{overflow:hidden;transition:.15s}.vehicle-card:hover{transform:translateY(-2px);box-shadow:0 22px 55px rgba(20,25,33,.13)}.vehicle-image{height:180px;background:linear-gradient(135deg,#eef1f5,#d7dde5);display:grid;place-items:center;font-size:54px;overflow:hidden}.vehicle-image img{width:100%;height:100%;object-fit:cover}.vehicle-card-body{padding:18px}.vehicle-title-row{display:flex;align-items:start;justify-content:space-between;gap:12px}.vehicle-title-row h3{margin:0;font-size:20px}.vehicle-card-body p{margin:7px 0 14px;color:var(--muted)}.meta-row{display:flex;justify-content:space-between;gap:10px;color:#5f6772;font-size:13px}.plate{display:inline-flex;justify-content:center;align-items:center;border:3px solid #111;background:#fff;color:#111;border-radius:7px;padding:8px 18px;font-size:20px;font-weight:950;letter-spacing:.08em;box-shadow:0 5px 0 #d9dde4}.plate.small{border-width:2px;padding:5px 8px;font-size:12px;border-radius:4px;box-shadow:none;white-space:nowrap}.empty-card{background:#fff;border:1px dashed #c7ccd4;border-radius:12px;padding:40px;color:var(--muted);text-align:center}.empty-card a{color:#8a6b00;font-weight:900}.form-card{padding:22px;max-width:1050px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid label{display:grid;gap:7px;color:#333b46;font-weight:800;font-size:14px}.form-grid label.full{grid-column:1/-1}.form-grid input,.form-grid textarea,.form-grid select{border:1px solid #d7dbe2;border-radius:8px;padding:11px 13px;background:#fbfbfc;outline:none}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(247,202,0,.18);background:#fff}.form-actions{display:flex;gap:10px;margin-top:18px}.vehicle-detail-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px}.vehicle-side{position:sticky;top:18px;align-self:start}.vehicle-large-image{height:220px;background:linear-gradient(135deg,#eef1f5,#d7dde5);border-radius:9px;display:grid;place-items:center;font-size:72px;overflow:hidden;margin-bottom:16px}.vehicle-large-image img{width:100%;height:100%;object-fit:cover}.vehicle-side h1{margin:0 0 6px;font-size:26px}.vehicle-side>p{margin:0 0 14px;color:var(--muted)}.details{display:grid;grid-template-columns:120px 1fr;gap:10px 14px;font-size:14px;margin-top:18px}.details dt{color:var(--muted)}.details dd{margin:0;font-weight:800;overflow-wrap:anywhere}.tabs{display:flex;gap:8px;margin-bottom:16px}.tab{height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:7px;background:#fff;font-weight:800;color:#515a65}.tab.active{background:var(--yellow);border-color:var(--yellow);color:#111}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.doc-row{border:1px solid var(--line);border-radius:9px;padding:12px;display:grid;gap:4px;background:#fafafa;margin-bottom:8px}.doc-row span,.muted{color:var(--muted)}.notes-text{color:#555d67;line-height:1.65}.catalog-preview{display:grid;grid-template-columns:240px 1fr;gap:12px}.catalog-col{border:1px solid var(--line);border-radius:9px;padding:13px;display:grid;gap:10px;background:#fbfbfc}.catalog-col span{padding:8px;border-radius:7px;background:#eee}.fake-board{height:150px;background:linear-gradient(135deg,#fff,#eef1f5);border:1px dashed #c8cdd5;border-radius:9px;display:grid;place-items:center;font-size:42px}.login-screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,rgba(247,202,0,.18),transparent 28%),linear-gradient(135deg,#0f141b,#202833);padding:24px}.login-card{width:min(460px,100%);background:#fff;border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.35);overflow:hidden}.login-brand{background:#15191f;color:#fff;padding:28px;display:flex;gap:14px;align-items:center}.login-logo{width:50px;height:50px;border:2px solid var(--yellow);color:var(--yellow);border-radius:13px;display:grid;place-items:center;font-weight:900}.login-brand h1{margin:0;font-size:25px;letter-spacing:.04em}.login-brand h1 b{color:var(--yellow)}.login-brand p{margin:4px 0 0;color:#cbd1da;font-size:14px}.login-form{padding:28px;display:grid;gap:16px}.login-form label{display:grid;gap:7px;font-weight:800;color:#333b46;font-size:14px}.login-form input{height:48px;border:1px solid #d8dce3;border-radius:8px;padding:0 14px;outline:0;background:#fbfbfc}.login-submit{height:48px;border:0;border-radius:8px;background:var(--yellow);color:#111;font-weight:950;cursor:pointer}.login-warning{border:1px solid #eadba1;background:#fff7d6;color:#6b5714;padding:12px 14px;border-radius:8px;line-height:1.45;font-size:13px}.login-error{background:#ffe5e5;color:#a51f1f;border:1px solid #ffc7c7;padding:10px 12px;border-radius:8px;font-size:13px}.hint{text-align:center;color:var(--muted);margin:4px 0 0;font-size:13px}@media(max-width:1100px){.topbar{grid-template-columns:220px minmax(240px,1fr) 180px}.top-pill{display:none}.vehicle-detail-layout{grid-template-columns:1fr}.vehicle-side{position:static}.dashboard-grid,.stats-grid{grid-template-columns:1fr}}@media(max-width:760px){.app{grid-template-columns:1fr}.rail{display:none}.topbar{grid-template-columns:1fr;height:auto;padding:14px}.user-box{display:none}.content{padding:12px}.page-head{flex-direction:column;align-items:start}.form-grid{grid-template-columns:1fr}.catalog-preview{grid-template-columns:1fr}}


.de-plate{display:inline-flex;align-items:stretch;background:#f9f9f5;border:3px solid #111;border-radius:8px;box-shadow:0 5px 0 #c8ccd3;color:#111;min-height:70px;overflow:hidden;font-family:Arial Black,Impact,system-ui,sans-serif;letter-spacing:.04em;margin-top:10px}.de-plate.small{min-height:38px;border-width:2px;border-radius:5px;box-shadow:none;margin:0}.eu-band{width:46px;background:#123f9c;color:#fff;display:grid;place-items:center;font-family:Arial,sans-serif;letter-spacing:0}.de-plate.small .eu-band{width:28px}.eu-stars{font-size:10px;line-height:.75;color:#ffd51f;text-align:center}.eu-band b{font-size:23px}.de-plate.small .eu-band b{font-size:14px}.plate-prefix,.plate-rest{display:flex;align-items:center;padding:0 12px;font-size:42px;line-height:1}.de-plate.small .plate-prefix,.de-plate.small .plate-rest{font-size:18px;padding:0 6px}.plate-seals{width:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.de-plate.small .plate-seals{width:34px;gap:2px}.seal{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid #777;font-family:Arial,sans-serif;font-weight:900;letter-spacing:0;font-size:9px}.de-plate.small .seal{width:15px;height:15px;font-size:5px}.state-seal{background:#eee;color:#111}.state-seal.nrw{background:linear-gradient(135deg,#1f8a3b 0 50%,#fff 50% 64%,#d71920 64%);color:#111}.state-seal.hamburg{background:#fff;color:#d71920;border-color:#d71920}.state-seal.bayern{background:linear-gradient(45deg,#fff 25%,#4da3ff 25% 50%,#fff 50% 75%,#4da3ff 75%);color:#111}.state-seal.berlin{background:#fff;color:#111}.hu-seal small{font-size:9px;line-height:1}.hu-seal b{font-size:11px;line-height:1}.de-plate.small .hu-seal small{font-size:4px}.de-plate.small .hu-seal b{font-size:5px}



/* v6: Kennzeichen im Fahrzeugdetail begrenzen, damit es nicht über die Karte läuft */
.vehicle-side .de-plate{
  width:100%;
  max-width:100%;
  min-height:56px;
  margin:16px 0 18px;
}
.vehicle-side .de-plate .eu-band{width:38px;min-width:38px}
.vehicle-side .de-plate .plate-prefix,
.vehicle-side .de-plate .plate-rest{
  font-size:32px;
  padding:0 8px;
  min-width:0;
}
.vehicle-side .de-plate .plate-prefix{flex:0 0 auto}
.vehicle-side .de-plate .plate-rest{flex:1 1 auto;justify-content:center}
.vehicle-side .de-plate .plate-seals{width:42px;min-width:42px}
.vehicle-side .de-plate .seal{width:24px;height:24px;font-size:7px}
.vehicle-side .de-plate .hu-seal small{font-size:7px}
.vehicle-side .de-plate .hu-seal b{font-size:9px}

/* kleine Karten etwas ruhiger darstellen */
.vehicle-card .de-plate.small{
  max-width:100%;
}

/* v7: EU-Sterne entfernt, D mittig ausrichten; Lesbarkeit nach Buchstaben/Zahlen */
.eu-band{align-content:center}
.eu-band b{display:block;margin-top:0}
.plate-rest{word-spacing:.12em}


/* v8: großes Kennzeichen in der Fahrzeugdetail-Karte bleibt einzeilig */
.vehicle-side .de-plate{
  flex-wrap:nowrap;
  overflow:hidden;
}
.vehicle-side .de-plate .plate-prefix,
.vehicle-side .de-plate .plate-rest{
  white-space:nowrap;
  line-height:1;
  font-size:28px;
  padding:0 7px;
}
.vehicle-side .de-plate .plate-rest{
  flex:0 0 auto;
  justify-content:flex-start;
}
.vehicle-side .de-plate .plate-prefix{
  flex:0 0 auto;
}
.vehicle-side .de-plate .eu-band{
  width:34px;
  min-width:34px;
}
.vehicle-side .de-plate .plate-seals{
  width:36px;
  min-width:36px;
}
.vehicle-side .de-plate .seal{
  width:22px;
  height:22px;
}


/* v9: Siegel aus dem Kennzeichen raus, HU/TÜV als eigener Badge darunter */
.de-plate{
  gap:0;
}
.de-plate .plate-seals,
.plate-seals{
  display:none!important;
}
.plate-stack{
  display:grid;
  gap:10px;
  margin:16px 0 18px;
}
.vehicle-side .plate-stack .de-plate{
  margin:0;
}
.vehicle-side .plate-stack .plate-prefix,
.vehicle-side .plate-stack .plate-rest{
  font-size:34px;
}
.vehicle-side .plate-stack .plate-rest{
  flex:1 1 auto;
  justify-content:center;
}
.hu-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  border:1px solid #d7dbe2;
  background:#fff;
  border-radius:999px;
  padding:8px 13px;
  color:#333b46;
  font-weight:800;
  box-shadow:0 8px 20px rgba(20,25,33,.08);
}
.hu-badge .hu-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-block;
  background:var(--hu-bg);
  border:1px solid rgba(0,0,0,.25);
}
.hu-badge strong{
  color:var(--hu-fg);
  background:var(--hu-bg);
  border-radius:999px;
  padding:3px 8px;
  line-height:1;
}


/* v10: TÜV-Status-Badge ohne linken Kreis; grün/gelb/rot nach Restlaufzeit */
.hu-dot{
  display:none!important;
}
.hu-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  border:1px solid #d9dee6;
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(20,25,33,.08);
}
.hu-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  line-height:1;
}
.hu-text{
  font-weight:800;
  color:#344054;
}
.hu-status.ok .hu-pill{
  background:#16a34a;
}
.hu-status.ok .hu-text{
  color:#166534;
}
.hu-status.warning .hu-pill{
  background:#eab308;
  color:#111827;
}
.hu-status.warning .hu-text{
  color:#92400e;
}
.hu-status.expired .hu-pill{
  background:#dc2626;
}
.hu-status.expired .hu-text{
  color:#991b1b;
}
.hu-status.neutral .hu-pill{
  background:#64748b;
}
.hu-status.neutral .hu-text{
  color:#475569;
}


/* v11: echter TÜV-Status-Fix */
.hu-badge,
.hu-dot{
  display:none!important;
}
.hu-status{
  display:inline-flex!important;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  border:1px solid #d9dee6;
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(20,25,33,.08);
}
.hu-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  line-height:1;
}
.hu-text{
  font-weight:800;
  color:#344054;
}
.hu-status.ok .hu-pill{
  background:#16a34a!important;
  color:#fff!important;
}
.hu-status.ok .hu-text{
  color:#166534!important;
}
.hu-status.warning .hu-pill{
  background:#eab308!important;
  color:#111827!important;
}
.hu-status.warning .hu-text{
  color:#92400e!important;
}
.hu-status.expired .hu-pill{
  background:#dc2626!important;
  color:#fff!important;
}
.hu-status.expired .hu-text{
  color:#991b1b!important;
}
.hu-status.neutral .hu-pill{
  background:#64748b!important;
  color:#fff!important;
}
.hu-status.neutral .hu-text{
  color:#475569!important;
}


/* v14: Safety-Info oben entfernt, Suche breiter */
.topbar{
  grid-template-columns:250px minmax(560px,1fr) 220px!important;
}
.top-pill{
  display:none!important;
}
.search-box{
  width:100%;
}


/* v15: TÜV-Badge mittig unter dem Kennzeichen */
.vehicle-side .plate-stack{
  justify-items:center;
}
.vehicle-side .hu-status{
  margin-left:auto;
  margin-right:auto;
}

/* v15: Danger-Bereich für Fahrzeug löschen */
.danger-card{
  margin-top:18px;
  max-width:1050px;
  background:#fff5f5;
  border:1px solid #fecaca;
  border-radius:12px;
  box-shadow:0 18px 45px rgba(20,25,33,.06);
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.danger-card strong{
  color:#991b1b;
  font-size:18px;
}
.danger-card p{
  margin:6px 0 0;
  color:#7f1d1d;
}
.btn.danger{
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
  font-weight:900;
}
.btn.danger:hover{
  background:#b91c1c;
}


/* v16: TÜV-Badge auch in Fahrzeugkarten, Account klickbar */
.user-box{
  cursor:pointer;
}
.user-box:hover strong{
  color:var(--yellow);
}
.vehicle-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.vehicle-title-area{
  min-width:0;
}
.vehicle-title-area h3{
  margin:0;
  font-size:20px;
}
.vehicle-title-area p{
  margin:7px 0 0;
  color:var(--muted);
}
.vehicle-card-plate{
  display:grid;
  justify-items:end;
  gap:7px;
  flex:0 0 auto;
}
.vehicle-card-plate .hu-status.small{
  padding:4px 8px;
  gap:6px;
  font-size:10px;
  box-shadow:none;
}
.vehicle-card-plate .hu-status.small .hu-pill{
  min-height:18px;
  padding:0 7px;
  font-size:10px;
}
.vehicle-card-plate .hu-status.small .hu-text{
  font-size:10px;
}
.account-list{
  display:grid;
  gap:8px;
}
.account-row{
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  background:#fafafa;
}
.account-row span{
  color:var(--muted);
}
@media(max-width:760px){
  .vehicle-card-top{
    display:grid;
  }
  .vehicle-card-plate{
    justify-items:start;
  }
}


/* v17: Fahrzeugkarte neu ausrichten, damit Modell/TDI nicht umbricht */
.vehicle-card-top{
  display:block!important;
}
.vehicle-title-area{
  width:100%;
  min-width:0;
}
.vehicle-title-area h3{
  margin:0;
  font-size:20px;
}
.vehicle-title-area p{
  margin:7px 0 0;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vehicle-card-plate-row{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  margin-bottom:10px;
}
.vehicle-card-plate{
  display:inline-grid;
  justify-items:center;
  gap:6px;
  flex:0 0 auto;
}
.vehicle-card .meta-row{
  margin-top:8px;
}


/* v18: Name links mittig neben Kennzeichen/TÜV, Modell darunter linksbündig */
.vehicle-card-mainline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.vehicle-card-name h3{
  margin:0;
  font-size:20px;
  line-height:1.15;
}
.vehicle-card-model{
  margin:12px 0 0;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vehicle-card-mainline .vehicle-card-plate{
  display:inline-grid;
  justify-items:center;
  gap:6px;
  margin:0;
}
.vehicle-card-body .meta-row{
  margin-top:14px;
}
@media(max-width:760px){
  .vehicle-card-mainline{
    grid-template-columns:1fr;
  }
  .vehicle-card-mainline .vehicle-card-plate{
    justify-items:start;
  }
}