/* ==========================================================================
   0) Design-Variablen
   ========================================================================== */
:root{
  --bg:#0f1016;
  --panel:#111218;
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --line:#1f2937;
  --brand:#ec7d07;
  --accent:#0b57d0;

  --radius:10px;
  --radius-lg:12px;
  --radius-pill:999px;

  --py:8px;
  --px:10px;

  --font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
}

/* ==========================================================================
   1) Reset & Basis
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{margin:0 0 .25rem}
p{margin:0}
small{font-size:.875rem}
.muted{color:var(--muted)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt-6{margin-top:.5rem}
:focus{outline:2px solid color-mix(in oklab, var(--brand) 60%, white 0%);outline-offset:2px}

/* ==========================================================================
   2) Header (Topbar & Backbar)
   ========================================================================== */

/* Basis für beide Header */
header.topbar,
header.backbar{
  position:relative;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}

/* ---------- Topbar (Startseite) ---------- */
header.topbar .topbar-row{
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:nowrap;                       /* KEIN Umbruch auf Desktop */
  justify-content:flex-start;             /* wir schieben rechts via margin-left */
}

/* Linker Block darf schrumpfen, damit rechts Platz bleibt */
header.topbar .topbar-left{
  flex:1 1 auto;
  min-width:0;                            /* lange Titel dürfen umbrechen, sprengen aber nicht */
  padding-top:64px;                       /* Platz für mittiges Logo */
}

/* Rechter Block ist kompakt und wird hart nach rechts geschoben */
header.topbar .topbar-right{
  flex:0 0 auto;
  margin-left:auto;                       /* schiebt nach rechts */
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding-top:64px;                       /* Abstand unter dem mittigen Logo */
  white-space:nowrap;                     /* Label + Select bleiben in einer Zeile */
}

/* Logo absolut mittig, beeinflusst das Flex-Layout nicht */
header.topbar .logo-center{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  z-index:2;
}
header.topbar .logo-center .logo-img{
  height:clamp(32px,6vw,64px);
  width:auto;
  display:block;
}
@media (max-width:640px){
  header.topbar .topbar-left,
  header.topbar .topbar-right{ padding-top:48px }
  header.topbar .logo-center .logo-img{ height:clamp(28px,8vw,44px) }
}

/* Sehr schmal: darf umbrechen – dann rutscht die rechte Spalte nach unten */
@media (max-width:700px){
  header.topbar .topbar-row{ flex-wrap:wrap }
  header.topbar .topbar-right{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
    white-space:normal;
  }
}

/* ---------- Backbar (Detailseite) ---------- */
header.backbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:20;
}
header.backbar .logo-center{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
}
header.backbar .logo-img{
  height:clamp(28px,6vw,56px);
  width:auto;
  display:block;
}

/* Kompakter Header-Filter (Fahrzeugart) */
.header-filter{ min-width:220px }
@media (max-width:700px){ .header-filter{ min-width:160px } }

/* ==========================================================================
   3) Filterleiste, Summary, Pager, Footer
   ========================================================================== */
section.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
}
.summary{
  display:flex;gap:10px;align-items:center;
  padding:10px 20px;border-bottom:1px solid var(--line)
}
.summary .spacer{flex:1 1 auto}
.pager{display:flex;gap:10px;justify-content:center;padding:12px 0 24px}
.foot{padding:20px;border-top:1px solid var(--line);color:var(--muted)}

/* ==========================================================================
   4) Formelemente & Buttons
   ========================================================================== */
input,select,button,a.primary,.ghost{
  background:var(--panel);color:var(--fg);
  border:1px solid var(--line);
  padding:var(--py) var(--px);
  border-radius:var(--radius)
}
input,select{min-width:160px}
.filter{display:flex;flex-direction:column;gap:6px}
.filter.grow{flex:1 1 260px}
a.primary{
  background:var(--brand);border-color:var(--brand);
  color:#04140f;text-decoration:none;font-weight:600
}
a.primary:hover{filter:brightness(0.95)}
.ghost{text-decoration:none}

/* ==========================================================================
   5) Leistung – Einheit + min + max
   ========================================================================== */
.filter-row.full{
  display:flex;gap:12px;width:100%;
  max-width:420px;
}
.filter-row.full .filter{flex:1;min-width:0}
.filter-row.full .filter.unit{flex:0 0 80px;min-width:80px}
#f-punit{width:80px;min-width:80px;max-width:80px;padding-right:0}
.filter-row.full .filter input,
.filter-row.full .filter select{width:100%}

/* ==========================================================================
   6) Tabelle
   ========================================================================== */
.tbl{
  width:100%;border-collapse:separate;border-spacing:0 6px;
  padding:10px 20px
}
.tbl th{
  font-weight:600;color:var(--muted);
  text-align:left;padding:6px 8px;white-space:nowrap
}
.tbl td{
  background:var(--panel);padding:10px;border:1px solid var(--line);white-space:nowrap
}
.tbl td:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.tbl td:last-child{border-radius:0 var(--radius) var(--radius) 0}
.clip{display:inline-block;max-width:26ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.badge{
  background:var(--panel);border:1px solid var(--line);
  padding:4px 8px;border-radius:var(--radius-pill);color:var(--muted)
}

/* ==========================================================================
   7) Detailseite: Titel, Tabs, Panels, Toolbar
   ========================================================================== */
.titlewrap{padding:16px 20px 4px}
.titlewrap h2{margin:0;font-size:20px}
.subtitle{color:var(--muted);margin:6px 0 0}

.tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:10px 20px;border-bottom:1px solid var(--line);
  position:sticky;top:56px;background:#0f1016;z-index:19
}
.tab{padding:8px 12px;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.tab.active{background:var(--brand);border-color:var(--brand);color:#04140f;font-weight:600}
.panel{display:none;padding:16px 20px}
.panel.active{display:block}

.kvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kv{border:1px solid var(--line);border-radius:12px;padding:10px}
.kv .k{font-size:12px;color:var(--muted);margin-bottom:4px}
.kv .v{font-weight:600;word-break:break-word}

.toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 20px 0;
  flex-wrap:wrap;              /* NEU: erlaubt responsives Umbrechen */
}
.toolbar .badge{margin-left:auto}

/* ==========================================================================
   8) Responsive – Kartenlayout (Mobil ≤ 600px)
   ========================================================================== */
@media (max-width:600px){

  input,select{min-width:0}

  .filter-row.full{max-width:100%}
  .filter-row.full .filter input,
  .filter-row.full .filter select{width:100%}

  /* Toolbar: PDF & Mail je eigene Zeile; Badge nach unten rechts */
  #btn-pdf,
  #btn-mail{
    flex:1 0 100%;            /* NEU: volle Breite auf mobiler Ansicht */
  }
  .toolbar .badge{
    flex:1 1 100%;
    text-align:right;
    margin-left:0;
  }

  /* Tabelle als Karten */
  .tbl thead{display:none}
  .tbl tbody tr{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:6px 10px;
    padding:10px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
  }
  .tbl tbody tr + tr{margin-top:8px}
  .tbl tbody td{
    background:transparent;border:0;padding:0;white-space:normal
  }
  .tbl tbody td:nth-child(1)::before{content:"Jahr";   display:block;color:var(--muted);font-size:.85rem}
  .tbl tbody td:nth-child(2)::before{content:"TG-Nr."; display:block;color:var(--muted);font-size:.85rem}
  .tbl tbody td:nth-child(3)::before{content:"Marke";  display:block;color:var(--muted);font-size:.85rem}
  .tbl tbody td:nth-child(4)::before{content:"Modell"; display:block;color:var(--muted);font-size:.85rem}
  .tbl td:nth-child(2) code{
    display:block;white-space:normal;overflow-wrap:anywhere;word-break:break-word;
    font-size:0.95rem;line-height:1.25;
  }
  .tbl .col-details{
    grid-column:2;grid-row:1 / span 2;align-self:start;
  }
  .tbl .col-details a{
    display:grid;place-items:center;
    width:36px;height:36px;border-radius:10px;
    background:var(--accent);color:#fff;text-decoration:none;font-size:0;
  }
  .tbl .col-details a::before{content:"🔍";font-size:18px;line-height:1}
}

/* iOS: verhindert Autozoom bei Inputs */
input, select, textarea {
  font-size: 16px;
}