:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel2:#111c33;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:#22304b;
  --accent:#ef4444;
  --accent2:#22c55e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, #0f214a 0%, var(--bg) 55%);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
code{ background:#0a1020; border:1px solid var(--line); padding:.15rem .35rem; border-radius:8px; }

.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding: 14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}

.brand__link{ display:flex; align-items:center; gap:12px; }
.brand__logo{
  width:48px; height:48px; object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.brand__name{ font-weight:700; letter-spacing:.2px; }
.brand__tag{ color:var(--muted); font-size:.9rem; margin-top:2px; }

.nav{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.nav a{
  padding:10px 12px;
  border-radius: 12px;
  color: var(--muted);
  border:1px solid transparent;
}
.nav a:hover{
  color:var(--text);
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.nav a.active{
  color: var(--text);
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.28);
}
.nav__admin{ color: var(--text) !important; border-color: rgba(255,255,255,.12) !important; }

.main{ max-width: 1100px; margin: 0 auto; padding: 26px 18px 48px; }

.hero{
  margin-top: 10px;
}
.hero__card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.hero__title{ margin:0 0 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.hero__cta{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card--narrow{ max-width: 520px; margin: 0 auto; }

.grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.grid--admin{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .grid, .grid--admin{ grid-template-columns: 1fr; } .brand__tag{ display:none; } }

.tile{
  display:block;
  padding: 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.45);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.tile:hover{ transform: translateY(-1px); border-color: rgba(239,68,68,.30); background: rgba(15,23,42,.62); }
.tile__title{ font-weight: 700; margin-bottom: 6px; }
.tile__text{ color: var(--muted); font-size: .95rem; }

.content p{ color: var(--text); line-height: 1.65; }
.content a{ color: #93c5fd; text-decoration: underline; }
.content ul, .content ol{ padding-left: 1.25rem; }
.content h2, .content h3{ margin-top: 1.2rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.16);
  color: var(--text);
  cursor:pointer;
  font-weight: 650;
}
.btn:hover{ background: rgba(239,68,68,.22); }
.btn--ghost{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.btn--ghost:hover{ background: rgba(255,255,255,.10); }

.form{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.form label{ color: var(--muted); font-size:.95rem; }
.form input, .form textarea{
  width:100%;
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.form input:focus, .form textarea:focus{ border-color: rgba(239,68,68,.45); }
.form__row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.alert{
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  padding: 10px 12px;
  border-radius: 12px;
}
.success{
  border:1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  padding: 10px 12px;
  border-radius: 12px;
}
.muted{ color: var(--muted); }

.list{ margin-top: 14px; display:flex; flex-direction:column; gap:12px; }
.list__item{
  padding: 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.45);
}
.list__meta{ color: var(--muted); font-size:.9rem; }
.list__title{ margin: 6px 0 10px; font-size: 1.15rem; }

.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 18px;
  color: var(--muted);
  background: rgba(11,18,32,.75);
}
.footer__inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer__links a{ color: var(--muted); margin-left: 10px; }
.footer__links a:hover{ color: var(--text); }


/* Simple WYSIWYG editor (self-hosted, no CDN) */
.editor{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(2,6,23,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.editor__toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.editor__toolbar button{
  padding:8px 10px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-weight:650;
  line-height: 1;
}
.editor__toolbar button:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(239,68,68,.30);
}
.editor__toolbar .sep{
  width:1px; background: rgba(255,255,255,.10); margin: 0 4px;
}
.editor__editable{
  display:block;
  padding:14px;
  min-height: 420px;
  outline: none;
  color: var(--text);
  background: #0b1220;
}
.editor__editable:empty:before{
  content: 'Hier schreiben…';
  color: rgba(229,231,235,.45);
}
.editor__editable p{ line-height: 1.65; margin: .5rem 0; }
.editor__editable a{ color:#93c5fd; text-decoration: underline; }
.editor__editable ul, .editor__editable ol{ padding-left: 1.25rem; }

.editor{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(2,6,23,.55);
}
.editor__toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.editor__toolbar button{
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-weight:650;
}
.editor__toolbar button:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(239,68,68,.30);
}
.editor__toolbar .sep{
  width:1px; background: rgba(255,255,255,.10); margin: 0 4px;
}
.editor__editable{
  padding:14px;
  min-height: 380px;
  outline: none;
  color: var(--text);
}
.editor__editable p{ line-height: 1.65; margin: .5rem 0; }
.editor__editable a{ color:#93c5fd; text-decoration: underline; }
.editor__editable ul, .editor__editable ol{ padding-left: 1.25rem; }


/* Dropdown Menü */
.nav__dropdown {
  position: relative;
}
.nav__dropbtn {
  padding:10px 12px;
  border-radius:12px;
  color: var(--muted);
  cursor:pointer;
}
.nav__dropbtn:hover {
  color: var(--text);
}
.nav__dropdown-content {
  display:none;
  position:absolute;
  top:100%;
  right:0;
  background: rgba(11,18,32,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  z-index:20;
}
.nav__dropdown-content a {
  display:block;
  padding:10px 14px;
  color: var(--text);
}
.nav__dropdown-content a:hover {
  background: rgba(239,68,68,.15);
}
.nav__dropdown:hover .nav__dropdown-content {
  display:block;
}


/* ForeColor buttons */
.editor__toolbar button[data-cmd="foreColor"]{
  font-weight: 800;
}


/* ===== Layout Fix: alles zentriert & nicht volle Bildschirmbreite ===== */
.header,
.main,
.footer__inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.header {
  padding-left: 24px;
  padding-right: 24px;
}

.nav {
  justify-content: center;
  flex: 1;
}

.brand {
  min-width: 260px;
}

.nav__admin {
  margin-left: auto;
}

/* Inhalt immer mittig */
.main {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* Karten mittig */
.card,
.hero__card {
  margin-left: auto;
  margin-right: auto;
}

/* Dropdown korrekt ausgerichtet */
.nav__dropdown-content {
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile Fix */
@media (max-width: 900px) {
  .header {
    flex-wrap: wrap;
  }
  .nav {
    justify-content: flex-start;
    width: 100%;
  }
  .nav__admin {
    margin-left: 0;
  }
}


/* Image resize handles */
.img-resizer{
  border:2px dashed rgba(239,68,68,.8);
  pointer-events:none;
}
.img-handle{
  width:14px;
  height:14px;
  background:#ef4444;
  position:absolute;
  right:-8px;
  bottom:-8px;
  cursor:se-resize;
  pointer-events:auto;
}


/* Tables */
.tablewrap{ overflow:auto; margin-top: 14px; border-radius: 14px; border:1px solid rgba(255,255,255,.08); }
.table{ width:100%; border-collapse: collapse; min-width: 820px; background: rgba(15,23,42,.45); }
.table th, .table td{ padding: 12px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align:left; vertical-align: top; }
.table th{ color: var(--muted); font-size: .95rem; background: rgba(255,255,255,.03); }
.table__details{ background: rgba(2,6,23,.35); }
.table__actions{ white-space: nowrap; }

.pagehead{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

.form__grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.form__grid > div:nth-child(1){ grid-column: span 2; }
.form__grid > div:nth-child(2){ grid-column: span 2; }
.form__grid > div:nth-child(3){ grid-column: span 2; }
.form__grid > div:nth-child(4){ grid-column: span 3; }
.form__grid > div:nth-child(5){ grid-column: span 3; }

@media (max-width: 900px){
  .form__grid{ grid-template-columns: 1fr; }
  .form__grid > div{ grid-column: auto; }
  .table{ min-width: 700px; }
}

/* small helper text */
.hint{
  margin-top: 6px;
  color: rgba(229,231,235,.55);
  font-size: .9rem;
}

/* Stats cards */
.stats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
}
.stat{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.45);
  border-radius: 14px;
  padding: 14px;
  min-height: 72px;
}
.stat__label{ color: var(--muted); font-size: .95rem; }
.stat__value{ font-size: 1.45rem; font-weight: 800; margin-top: 6px; }
.stat__sub{ color: rgba(229,231,235,.65); margin-top: 2px; font-size: .95rem; }
.stat--wide{ grid-column: span 2; }
@media (max-width: 980px){
  .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat--wide{ grid-column: span 2; }
}
@media (max-width: 560px){
  .stats{ grid-template-columns: 1fr; }
  .stat--wide{ grid-column: auto; }
}

/* Pagination */
.pagination{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pagination__meta{ color: var(--muted); }

/* ===== Modern Stats Card ===== */
.statsCard{
  position: relative;
  overflow: hidden;
}
.statsCard:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle at 30% 30%, rgba(239,68,68,.35), rgba(239,68,68,0) 60%);
  filter: blur(2px);
  pointer-events:none;
}
.statsHead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.eyebrow{
  color: rgba(229,231,235,.6);
  font-size: .85rem;
  letter-spacing: .4px;
}
.statsTitle{
  margin: 4px 0 2px;
  font-size: 1.35rem;
}
.statsSub{
  color: rgba(229,231,235,.55);
  font-size: .95rem;
}
.statsGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
}
.kpi{
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  min-height: 92px;
}
.kpiTop{
  display:flex;
  align-items:center;
  gap: 8px;
}
.kpiDot{
  width:10px; height:10px;
  border-radius: 999px;
  background: rgba(229,231,235,.35);
}
.kpiDot--accent{ background: rgba(239,68,68,.75); }
.kpiDot--red{ background: rgba(239,68,68,.75); }
.kpiDot--blue{ background: rgba(96,165,250,.75); }

.kpiLabel{
  color: rgba(229,231,235,.65);
  font-size: .92rem;
}
.kpiValue{
  margin-top: 8px;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.6px;
}
.kpiValue--text{
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: 0;
}
.kpiHint{
  margin-top: 4px;
  color: rgba(229,231,235,.55);
  font-size: .92rem;
}
.kpiWide{ grid-column: span 2; }
.statsFoot{ margin-top: 12px; }

@media (max-width: 980px){
  .statsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpiWide{ grid-column: span 2; }
}
@media (max-width: 560px){
  .statsGrid{ grid-template-columns: 1fr; }
  .kpiWide{ grid-column: auto; }
}

/* Stats: nur 3 KPIs */
.statsGrid--3{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){
  .statsGrid--3{ grid-template-columns: 1fr; }
}

/* ===== Hero layout: Text links, Statistik rechts ===== */
.hero__grid{
  display:grid;
  grid-template-columns: 1.45fr 0.75fr;
  gap: 18px;
  align-items: stretch;
}
.hero__left{ min-width: 0; }

.hero__stats{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.hero__statsTitle{
  font-weight: 850;
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.hero__statsSub{
  color: rgba(229,231,235,.55);
  font-size: .92rem;
  margin-bottom: 12px;
}
.heroKpiGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.heroKpi{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.45);
  border-radius: 14px;
  padding: 12px;
}
.heroKpi__label{
  color: rgba(229,231,235,.65);
  font-size: .9rem;
}
.heroKpi__value{
  margin-top: 6px;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.4px;
}

/* Mobile: Statistik unter dem Text */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
}

/* ===== Fix: Hero Statistik rechts + schöner ===== */
.hero__grid{
  display:grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}
.hero__stats{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}
.hero__stats:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(239,68,68,.32), rgba(239,68,68,0) 62%);
  pointer-events:none;
}
.hero__statsTitle{
  font-weight: 900;
  font-size: 1.08rem;
  letter-spacing: .2px;
}
.hero__statsSub{
  color: rgba(229,231,235,.60);
  font-size: .92rem;
  margin-top: 2px;
  margin-bottom: 14px;
}
.heroKpiGrid--3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.heroKpi{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.50);
  border-radius: 14px;
  padding: 12px;
}
.heroKpi__label{
  color: rgba(229,231,235,.65);
  font-size: .85rem;
}
.heroKpi__value{
  margin-top: 6px;
  font-size: 1.65rem;
  font-weight: 950;
  letter-spacing: -0.4px;
}
.hero__statsBtn{
  margin-top: 14px;
  width: 100%;
  justify-content: center;
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .heroKpiGrid--3{ grid-template-columns: 1fr; }
}

/* ===== Fahrzeuge ===== */
.vehList{ display:flex; flex-direction:column; gap: 14px; margin-top: 14px; }
.vehCard{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  border-radius: 18px;
  overflow:hidden;
}
.vehMedia{ padding: 14px; background: rgba(2,6,23,.35); }
.vehMain{
  width: 100%;
  height: auto;
  border-radius: 14px;
  display:block;
  border:1px solid rgba(255,255,255,.08);
}
.vehThumbs{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  overflow:auto;
  padding-bottom: 6px;
}
.vehThumb{
  width: 88px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  flex: 0 0 auto;
}
.vehBody{ padding: 16px 16px 18px; }
.vehTitleRow{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; justify-content: space-between; }
.vehTitle{ margin:0; font-size: 1.25rem; }
.vehType{ color: rgba(229,231,235,.65); font-size: .95rem; }
.vehMeta{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.vehMeta div{ border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); border-radius: 14px; padding: 10px 12px; }
.vehMeta span{ display:block; color: rgba(229,231,235,.55); font-size: .85rem; }
.vehMeta b{ display:block; margin-top: 4px; font-size: .98rem; }
.vehSpecial{ margin-top: 10px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); border-radius: 14px; padding: 10px 12px; }
.vehSpecial span{ color: rgba(229,231,235,.55); font-size: .85rem; display:block; margin-bottom: 4px; }
.vehDesc{ margin-top: 10px; }

@media (max-width: 980px){
  .vehCard{ grid-template-columns: 1fr; }
  .vehMeta{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .vehMeta{ grid-template-columns: 1fr; }
}

/* ===== Admin: Fahrzeug Upload ===== */
.uploadBox{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.45);
  border-radius: 16px;
  padding: 12px;
}
.uploadBox.isDrag{ outline: 2px dashed rgba(239,68,68,.8); outline-offset: 6px; }
.uploadBox__row{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }
.gallery{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.galleryItem{
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(15,23,42,.45);
}
.galleryItem img{ width:100%; height: 150px; object-fit: cover; display:block; }
.galleryActions{ display:flex; gap: 8px; padding: 10px; }
@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr; }
}

/* Admin Form Grid for Fahrzeuge */
.vehGrid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
.vehGrid > div:nth-child(1){ grid-column: span 2; }
.vehGrid > div:nth-child(2){ grid-column: span 4; }
.vehGrid > div:nth-child(3){ grid-column: span 3; }
.vehGrid > div:nth-child(4){ grid-column: span 1; }
.vehGrid > div:nth-child(5){ grid-column: span 2; }
.vehGrid > div:nth-child(6){ grid-column: span 2; }
.vehGrid > div:nth-child(7){ grid-column: span 1; }
.vehGrid > div:nth-child(8){ grid-column: span 2; }
.vehGrid > div:nth-child(9){ grid-column: span 1; }
.vehSpan2{ grid-column: span 6; }
@media (max-width: 900px){
  .vehGrid{ grid-template-columns: 1fr; }
  .vehGrid > div, .vehSpan2{ grid-column: auto; }
}

/* Fahrzeuge: bessere Abstände */
.vehNoImg{
  border:1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 22px;
  text-align:center;
  color: rgba(229,231,235,.55);
}
.vehMeta{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.vehMeta > div{
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
}
.vehMeta dt{
  color: rgba(229,231,235,.55);
  font-size: .85rem;
  margin: 0;
}
.vehMeta dd{
  margin: 6px 0 0;
  font-size: .98rem;
  font-weight: 650;
}
.vehSpecial__label{
  color: rgba(229,231,235,.55);
  font-size: .85rem;
  margin-bottom: 4px;
}
.vehSpecial__value{
  font-weight: 650;
}
.content p{ margin: .6rem 0; }

/* Fahrzeuge: Bildbereich nicht riesig */
.vehMedia{
  padding: 14px;
  background: rgba(2,6,23,.35);
}
.vehMain{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.vehNoImg{
  aspect-ratio: 16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 650;
}

/* ===== Führung ===== */
.leadGrid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
.leadGrid > div:nth-child(1){ grid-column: span 2; }
.leadGrid > div:nth-child(2){ grid-column: span 2; }
.leadGrid > div:nth-child(3){ grid-column: span 2; }
.leadGrid > div:nth-child(4){ grid-column: span 3; }
.leadGrid > div:nth-child(5){ grid-column: span 3; }
@media (max-width: 900px){
  .leadGrid{ grid-template-columns: 1fr; }
  .leadGrid > div{ grid-column: auto; }
}

.leadPhotoBox{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.45);
  border-radius: 16px;
  padding: 12px;
}
.leadPhotoBox.isDrag{ outline: 2px dashed rgba(239,68,68,.8); outline-offset: 6px; }
.leadPhotoRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.leadPreview{ margin-top: 12px; }
.leadPreview img{
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  display:block;
}

.leadGridPublic{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.leadCard{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  border-radius: 18px;
  padding: 16px;
  overflow:hidden;
}
.leadTop{ display:flex; gap: 14px; align-items:center; }
.leadAvatar{
  width: 96px;
  height: 96px;
  border-radius: 20px;
  object-fit: cover;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  flex: 0 0 auto;
}
.leadAvatar--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(229,231,235,.55);
  font-weight: 650;
  font-size: .9rem;
}
.leadFunction{
  color: rgba(229,231,235,.65);
  font-size: .92rem;
  font-weight: 650;
}
.leadName{
  font-size: 1.25rem;
  font-weight: 900;
  margin-top: 2px;
}
.leadUnit{
  color: rgba(229,231,235,.55);
  margin-top: 4px;
  font-size: .95rem;
}
.leadContact{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.leadContact > div{
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
}
.leadContact span{
  display:block;
  color: rgba(229,231,235,.55);
  font-size: .85rem;
}
.leadContact a{
  display:block;
  margin-top: 6px;
  color: rgba(229,231,235,.92);
  text-decoration: none;
  font-weight: 650;
}
.leadContact a:hover{ text-decoration: underline; }
.leadText{ margin-top: 12px; }

@media (max-width: 980px){
  .leadGridPublic{ grid-template-columns: 1fr; }
  .leadContact{ grid-template-columns: 1fr; }
}

/* ===== Führung (Pro Layout) ===== */
.leadGridPublic{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 1100px){
  .leadGridPublic{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .leadGridPublic{ grid-template-columns: 1fr; }
}

.leadCard{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  border-radius: 20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

.leadPhoto{
  position: relative;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.06);
  aspect-ratio: 16 / 10;
  overflow:hidden;
}
.leadPhoto img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* sieht immer gut aus, auch bei unterschiedlichen Formaten */
  object-position: center;
  display:block;
}
.leadPhoto__empty{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(229,231,235,.55);
  font-weight: 700;
}

.leadInfo{
  padding: 14px 16px 16px;
}
.leadFunction{
  color: rgba(229,231,235,.65);
  font-size: .92rem;
  font-weight: 750;
  letter-spacing: .2px;
}
.leadName{
  font-size: 1.35rem;
  font-weight: 950;
  margin-top: 4px;
}
.leadUnit{
  color: rgba(229,231,235,.55);
  margin-top: 6px;
  font-size: .98rem;
}

.leadContact{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px){
  .leadContact{ grid-template-columns: 1fr; }
}
.leadChip{
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
  text-decoration:none;
  color: rgba(229,231,235,.92);
  display:block;
}
.leadChip span{
  display:block;
  color: rgba(229,231,235,.55);
  font-size: .85rem;
}
.leadChip strong{
  display:block;
  margin-top: 5px;
  font-weight: 750;
  font-size: .95rem;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leadChip:hover{ text-decoration: underline; }

.leadText{
  margin-top: 12px;
}
.leadText img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display:block;
}

.leadPreview img{ max-width: 220px; max-height: 220px; }

/* ===== Abschnittstitel ===== */
.sectionTitle{
  margin: 18px 0 10px;
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: .2px;
}

/* ===== Fahrzeuge: gleichmäßige Bildhöhe / professionelles Layout ===== */
.vehMainWrap{
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.vehMain{
  width: 100%;
  height: 100% !important;   /* wichtig: keine riesigen Hochformate mehr */
  object-fit: cover;          /* gleichmäßig, wirkt wie Galerie */
  object-position: center;
  border: 0 !important;
  border-radius: 0 !important;
  display:block;
}
.vehThumbs{
  flex-wrap: wrap;            /* viele Bilder -> zweite Zeile statt endlos scroll */
  overflow: visible;
}
.vehThumb{ width: 96px; height: 64px; }
@media (max-width: 980px){
  .vehCard{ grid-template-columns: 1fr; }
  .vehMedia{ padding: 12px; }
}

/* ===== Neueste Meldung (Startseite) ===== */
.newsTeaser{
  margin-top: 14px;
}
.newsTeaser__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: stretch;
}
.newsTeaser__left{
  padding: 6px 2px;
}
.newsTeaser__kicker{
  color: rgba(229,231,235,.65);
  font-weight: 800;
  letter-spacing: .3px;
  font-size: .92rem;
}
.newsTeaser__title{
  margin-top: 6px;
  font-size: 1.6rem;
  font-weight: 950;
}
.newsTeaser__meta{
  margin-top: 6px;
  color: rgba(229,231,235,.55);
  font-weight: 650;
  font-size: .95rem;
}
.newsTeaser__excerpt{
  margin-top: 12px;
  color: rgba(229,231,235,.9);
  line-height: 1.65;
  max-width: 70ch;
}
.newsTeaser__cta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.newsTeaser__right{
  border:1px solid rgba(255,255,255,.07);
  background: radial-gradient(1200px 300px at 30% 0%, rgba(239,68,68,.18), rgba(2,6,23,.0) 60%), rgba(15,23,42,.25);
  border-radius: 18px;
  padding: 16px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}
.newsTeaser__badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  letter-spacing: .3px;
  color: rgba(255,255,255,.95);
}
.newsTeaser__badge:before{
  content:'';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(239,68,68,.95);
  box-shadow: 0 0 0 6px rgba(239,68,68,.12);
}
.newsTeaser__hint{
  color: rgba(229,231,235,.65);
  line-height: 1.6;
}
@media (max-width: 900px){
  .newsTeaser__grid{ grid-template-columns: 1fr; }
}

/* ===== Startseite: mehr Abstand zwischen Kästen ===== */
.hero{ margin-bottom: 22px; }
.newsTeaser{ margin-top: 26px; }
.grid{ margin-top: 26px; gap: 18px; }
.tile{ padding: 18px; }
@media (max-width: 900px){
  .grid{ gap: 14px; }
}
/* Mehr Luft innerhalb der Hero-Stats */
.hero__grid{ gap: 18px; }
.heroKpiGrid{ gap: 14px; }

/* ===== STARTSEITE: ABSTÄNDE (Fix) ===== */
/* Falls irgendwelche Regeln margin überschreiben: erzwingen wir Abstand zwischen Cards */
.card{ margin-bottom: 28px !important; }
.card + .card{ margin-top: 22px !important; }

/* Speziell: Abstand zwischen Hero und Neueste Meldung */
.hero{ margin-bottom: 22px !important; }
.newsTeaser{ margin-top: 22px !important; }

/* Abstand zwischen Kacheln unten */
.grid{ gap: 22px !important; }

/* ===== STARTSEITE: Abstand zwischen Hero und Neueste Meldung (Final) ===== */
.hero{ margin-bottom: 38px !important; }
.newsTeaser{ margin-top: 38px !important; }
/* Falls der Browser margin-collapse macht: zusätzlich padding im Wrapper */
main > .hero + .newsTeaser{ margin-top: 38px !important; }

/* ===== Startseite: echter Abstand zwischen Hero und Neueste Meldung ===== */
.hero{ margin-bottom: 34px !important; }
.latest-news{ margin-top: 0 !important; } /* Abstand kommt über hero margin */

/* ===== Layout: Abstand zwischen Sektionen (Flex-Gap) ===== */
.main{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* card margins aus, damit gap sauber wirkt */
.card{ margin: 0 !important; }

/* ===== Startseite: Neueste Einsätze (2 Stück) ===== */
.homeIncidents__head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.homeIncidents__head .kicker{
  color: rgba(229,231,235,.65);
  font-weight: 800;
  letter-spacing: .3px;
  font-size: .92rem;
}
.homeIncidents__head h2{
  margin-top: 6px;
  font-size: 1.35rem;
  font-weight: 950;
}
.homeIncidents__list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .homeIncidents__head{ align-items: flex-start; }
  .homeIncidents__list{ grid-template-columns: 1fr; }
}
.homeIncident{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.30);
  border-radius: 18px;
  padding: 14px 16px;
}
.homeIncident__meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(229,231,235,.55);
  font-weight: 750;
  font-size: .9rem;
}
.homeIncident__nr{ color: rgba(255,255,255,.92); }
.homeIncident__title{
  margin-top: 10px;
  font-size: 1.05rem;
  font-weight: 950;
}
.homeIncident__sub{
  margin-top: 8px;
  color: rgba(229,231,235,.70);
  line-height: 1.5;
}
.homeIncident__sub .dot{ margin: 0 8px; opacity: .7; }

.homeIncident__desc{
  margin-top: 10px;
  color: rgba(229,231,235,.72);
  line-height: 1.55;
  font-size: .95rem;
}

/* ===== Startseite: Social Media Card ===== */
.socialCard__head .kicker{color:rgba(229,231,235,.65);font-weight:800;letter-spacing:.3px;font-size:.92rem;}
.socialCard__head h2{margin-top:6px;font-size:1.35rem;font-weight:950;}
.socialCard__head .muted{margin-top:8px;color:rgba(229,231,235,.65);line-height:1.6;}
.socialGrid{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media (max-width:900px){.socialGrid{grid-template-columns:1fr;}}
.socialLink{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.30);text-decoration:none;transition:transform .12s ease,border-color .12s ease,background .12s ease;}
.socialLink:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);background:rgba(15,23,42,.38);}
.socialIcon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(2,6,23,.25);flex:0 0 auto;}
.socialIcon svg{width:22px;height:22px;color:rgba(255,255,255,.92);}
.socialText{flex:1;min-width:0;}
.socialName{font-weight:950;color:rgba(255,255,255,.95);}
.socialHint{margin-top:4px;font-size:.92rem;color:rgba(229,231,235,.62);}
.socialArrow{color:rgba(229,231,235,.55);font-weight:900;}
.socialLink--fb .socialIcon{box-shadow:0 0 0 6px rgba(59,130,246,.10);}
.socialLink--ig .socialIcon{box-shadow:0 0 0 6px rgba(236,72,153,.10);}
.socialLink--wa .socialIcon{box-shadow:0 0 0 6px rgba(34,197,94,.10);}


.socialFooter{
  margin-top: 28px;
}
.socialFooter__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.socialFooter__text h2{ margin: 6px 0 6px 0; }
.socialFooter__icons{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
}
.socialBtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.0);
  text-decoration:none;
}
.socialBtn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.socialBtn svg{ width: 18px; height: 18px; display:block; }
@media (max-width: 780px){
  .socialFooter__inner{ flex-direction: column; align-items:flex-start; }
}

/* ===== Layout fixes ===== */
body{ overflow-x: hidden; }

.header{ padding: 14px 18px; }
.header__inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
@media (min-width: 900px){
  .nav{ flex-wrap: nowrap; }
}

/* ===== Social Footer (global) ===== */
.socialFooter{
  max-width: 1100px;
  margin: 26px auto 0;
  padding: 0 18px;
}
.socialFooter__inner{
  padding: 26px 26px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.socialFooter__text .kicker{
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.socialFooter__text h2{
  margin: 8px 0 8px 0;
  font-size: 28px;
}
.socialFooter__text p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 62ch;
}
.socialFooter__icons{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: nowrap;
}
.socialBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-decoration:none;
}
.socialBtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.socialLogo{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.35));
}
@media (max-width: 780px){
  .socialFooter__inner{ flex-direction: column; align-items:flex-start; }
}

/* ===== Fahrzeuge Grid + Modal ===== */
.vehSection{ margin-top: 26px; }
.vehSectionTitle{
  margin: 0 0 14px 0;
  font-size: 22px;
  letter-spacing: .02em;
}
.vehGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){ .vehGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .vehGrid{ grid-template-columns: 1fr; } }

.vehCard2{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display:flex;
  flex-direction: column;
  min-height: 360px;
}
.vehCard2__top{
  padding: 12px 14px 0 14px;
  display:flex;
  justify-content:flex-start;
}
.vehCard2__label{
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  padding: 8px 12px;
  border-radius: 999px;
  letter-spacing: .2px;
}
.vehCard2__media{
  padding: 12px 14px 0 14px;
}
.vehCard2__img{
  width: 100%;
  height: 190px;
  border-radius: 14px;
  object-fit: cover;
  display:block;
}
.vehCard2__noimg{
  width: 100%;
  height: 190px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.7);
}
.vehCard2__thumbs{
  padding: 10px 14px 0 14px;
  display:flex;
  gap: 8px;
  align-items:center;
}
.vehCard2__thumb{
  width: 46px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  opacity: .92;
}
.vehCard2__more{
  width: 46px;
  height: 32px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  border: 1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.8);
  font-size: 12px;
}
.vehCard2__body{
  padding: 14px;
  flex: 1;
}
.vehCard2__name{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
}
.vehCard2__callsign{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,.78);
}
.vehCard2__actions{
  padding: 0 14px 14px 14px;
  display:flex;
  justify-content:flex-end;
}

/* Modal */
.modalOpen{ overflow: hidden; }
.vehModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.vehModal[aria-hidden="false"]{ display: block; }
.vehModal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}
.vehModal__panel{
  position: relative;
  max-width: 1080px;
  margin: 6vh auto;
  background: linear-gradient(180deg, rgba(20,32,56,.96), rgba(12,20,38,.96));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  overflow: hidden;
}
.vehModal__close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.vehModal__content{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 0;
}
@media (max-width: 900px){
  .vehModal__panel{ margin: 2vh 14px; }
  .vehModal__content{ grid-template-columns: 1fr; }
}
.vehModal__gallery{
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px){ .vehModal__gallery{ border-right:none; border-bottom: 1px solid rgba(255,255,255,.08);} }
.vehModal__main{
  width:100%;
  height: 420px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(0,0,0,.22);
}
@media (max-width: 900px){ .vehModal__main{ height: 320px; } }
.vehModal__thumbs{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.vehModal__thumbBtn{
  width: 78px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 0;
  overflow:hidden;
  cursor:pointer;
}
.vehModal__thumbBtn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.vehModal__thumbBtn.isActive{
  outline: 2px solid rgba(255,255,255,.35);
}
.vehModal__info{
  padding: 20px 20px 22px 20px;
}
.vehModal__kicker{
  font-size: 12px;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.vehModal__title{
  margin: 6px 0 14px 0;
  font-size: 28px;
}
.vehModal__meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0 0 14px 0;
}
.vehModal__meta div{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px;
  border-radius: 14px;
}
.vehModal__meta dt{ font-size: 12px; color: rgba(255,255,255,.72); }
.vehModal__meta dd{ margin: 2px 0 0 0; font-weight: 700; }
.vehModal__special{
  margin: 10px 0 14px 0;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.vehModal__specialLabel{ font-size: 12px; color: rgba(255,255,255,.72); }
.vehModal__specialValue{ margin-top: 4px; font-weight: 700; }
.vehModal__desc{ color: rgba(255,255,255,.86); }