/* ==========================================================================
   Startseite
   Palette aus dem Logo: das Schwarzblau der Wortmarke, das Blau der
   Karosserie, das Rot des Streifens. Keine Fremdschriften -- der Systemsatz
   laedt sofort und schickt keine Daten an Dritte.
   ========================================================================== */

.kfz-h{
  /* Kurznamen auf die Tokens -- keine eigenen Werte mehr in dieser Datei */
  --ink:var(--kfz-ink);
  --ink-soft:var(--kfz-ink-soft);
  --steel:var(--kfz-steel);
  --signal:var(--kfz-signal);
  --signal-dark:var(--kfz-signal-dark);
  --paper:var(--kfz-paper);
  --fog:var(--kfz-fog);
  --line:var(--kfz-line);
  --text:var(--kfz-text);
  --muted:var(--kfz-muted);
  --muted-dark:var(--kfz-on-dark-mute);

  color:var(--text);
  margin-bottom:var(--kfz-sp-7);
}

.kfz-h h1,.kfz-h h2,.kfz-h h3{ letter-spacing:-.01em; }
.kfz-h a{ text-decoration:none; }
.kfz-h :focus-visible{ outline:2px solid var(--steel); outline-offset:3px; }

/* --- Regalwand: der Einstieg ueber die Baureihen ------------------------- */

.kfz-h__wall{
  position:relative;
  background:#0f2338;
  border-radius:16px;
  padding:30px 32px 32px;
  margin-bottom:52px;
  overflow:hidden;
}

/* Die M-Streifen als Kante -- das einzige Zierelement der Seite. */
.kfz-h__wall::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,#7aa7dd 0 33.3%,#1e3f8c 33.3% 66.6%,var(--signal) 66.6% 100%);
}

.kfz-h__wall-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin:6px 0 22px;
}

.kfz-h__wall-head h1{
  margin:0;
  font-size:34px;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
}
.kfz-h__wall-head > div > p{
  margin:9px 0 0;
  font-size:16.5px;
  line-height:1.6;
  color:#9fb2c9;
  max-width:52ch;
}

/* Suche */
.kfz-h__wall-search{ flex:0 1 460px; min-width:0; }
.kfz-h__wall-search label{
  display:block;
  margin-bottom:8px;
  font-size:13.5px;
  font-weight:600;
  color:#a3b1c4;
}
.kfz-h__wall-row{ display:flex; gap:9px; }
.kfz-h__wall-row input{
  flex:1 1 auto;
  min-width:0;
  height:50px;
  padding:0 16px;
  font-size:16px;
  color:var(--text);
  background:#fff;
  border:1px solid transparent;
  border-radius:10px;
  font-variant-numeric:tabular-nums;
}
.kfz-h__wall-row input::placeholder{ color:#93a0b1; }
.kfz-h__wall-row input:focus{
  outline:none; border-color:var(--steel);
  box-shadow:0 0 0 3px rgba(90,127,191,.35);
}
.kfz-h__wall-row button{
  flex:0 0 auto;
  height:50px;
  padding:0 26px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:var(--signal);
  border:0;
  border-radius:10px;
  cursor:pointer;
}
.kfz-h__wall-row button:hover{ background:var(--signal-dark); }

/* Kacheln */
.kfz-h__tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.kfz-h__tiles--small{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:14px;
}

.kfz-h__tile{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:206px;
  padding:20px 22px 22px;
  border-radius:14px;
  background:linear-gradient(145deg,#2a5f9e 0%,#16324e 100%);
  color:#fff;
  text-decoration:none;
  border:1px solid transparent;
}
.kfz-h__tile:nth-child(2){ background:linear-gradient(145deg,#26578f 0%,#16324e 100%); }
.kfz-h__tile:nth-child(3){ background:linear-gradient(145deg,#1f4a7c 0%,#16324e 100%); }
.kfz-h__tile:nth-child(4){ background:linear-gradient(145deg,#1d4472 0%,#16324e 100%); }
.kfz-h__tile:hover{ border-color:rgba(255,255,255,.4); color:#fff; }

.kfz-h__tile-series{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#a8c6e8;
}
.kfz-h__tile-code{
  display:block;
  font-size:44px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.kfz-h__tile-count{
  display:block;
  margin-top:10px;
  font-size:15px;
  color:#c3d1e2;
  font-variant-numeric:tabular-nums;
}

.kfz-h__tile--small{
  min-height:132px;
  padding:16px 18px 18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
.kfz-h__tiles--small .kfz-h__tile{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
}
.kfz-h__tile--small:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.kfz-h__tile--small .kfz-h__tile-series{ color:#9fb2c9; }
.kfz-h__tile--small .kfz-h__tile-code{ font-size:27px; letter-spacing:-.02em; }
.kfz-h__tile--small .kfz-h__tile-count{ margin-top:7px; font-size:14px; color:#9fb2c9; }

/* Kennzahlen im Fuss der Wand */
.kfz-h__wall-facts{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-top:22px;
  padding:18px 22px;
  background:rgba(255,255,255,.05);
  border-radius:14px;
}
.kfz-h__wall-facts dl{ display:flex; gap:34px; margin:0; flex-wrap:wrap; }
.kfz-h__wall-facts dt{
  font-size:21px; font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.kfz-h__wall-facts dd{ margin:2px 0 0; font-size:13.5px; color:#9fb2c9; }
.kfz-h__wall-facts > p{
  margin:0; font-size:15px; line-height:1.55; color:#c3d1e2; max-width:44ch;
}

/* --- Abschnitte ---------------------------------------------------------- */

.kfz-h__block{ margin-bottom:56px; }

.kfz-h__head{ margin-bottom:20px; }
.kfz-h__head h2{
  margin:0;
  font-size:27px;
  font-weight:700;
  letter-spacing:-.012em;
}
.kfz-h__head p{ margin:6px 0 0; font-size:16px; color:var(--muted); }

.kfz-h__head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.kfz-h__more{
  font-size:16px; font-weight:600; color:var(--signal);
  border-bottom:1px solid rgba(184,69,46,.35); padding-bottom:2px;
}
.kfz-h__more:hover{ color:var(--signal-dark); border-bottom-color:var(--signal-dark); }

/* --- Bauteile ------------------------------------------------------------ */

.kfz-h__chips{ display:flex; flex-wrap:wrap; gap:9px; }

.kfz-h__chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px;
  font-size:15.5px; font-weight:500;
  color:var(--text);
  background:var(--fog);
  border:1px solid transparent;
  border-radius:999px;
}
.kfz-h__chip span{
  font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.kfz-h__chip:hover{ background:#fff; border-color:var(--steel); color:var(--text); }

.kfz-h__chips--quiet .kfz-h__chip{ font-size:14px; padding:7px 13px; color:var(--muted); }

.kfz-h__aside{ margin:26px 0 11px; font-size:15px; color:var(--muted); }

/* --- Zuletzt eingelagert ------------------------------------------------- */
/* Kein eigenes Raster: die Sektion benutzt #product-grid-container aus
   custom.css, damit Spaltenzahl, Abstaende und Kartengroesse exakt denen der
   Kategorieseiten entsprechen. Hier nur der Abstand zur Ueberschrift. */

.kfz-h #product-grid-container{ margin-top:4px; }

/* --- Hinweise ------------------------------------------------------------ */

.kfz-h__notes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.kfz-h__notes article{ border-top:2px solid var(--ink); padding-top:15px; }
.kfz-h__notes h3{ margin:0 0 9px; font-size:17px; font-weight:600; letter-spacing:-.005em; }
.kfz-h__notes p{ margin:0; font-size:16px; line-height:1.68; color:#303a46; }
.kfz-h__notes a{ color:var(--signal); border-bottom:1px solid rgba(184,69,46,.3); }
.kfz-h__num{ white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; }

/* --- Kontakt ------------------------------------------------------------- */

.kfz-h__call{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  padding:32px 40px;
  background:var(--ink);
  border-radius:16px;
}
.kfz-h__call h2{ margin:0 0 7px; font-size:25px; font-weight:700; letter-spacing:-.012em; color:#fff; }
.kfz-h__call p{ margin:0; font-size:16px; color:#b9c4d2; }

.kfz-h__phones{ display:flex; gap:14px; flex-wrap:wrap; }
.kfz-h__phones a{
  display:block; padding:14px 22px;
  background:var(--ink-soft);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
}
.kfz-h__phones a:hover{ border-color:var(--steel); background:#22304180; }
.kfz-h__phones span{ display:block; font-size:12.5px; color:var(--muted-dark); margin-bottom:4px; }
.kfz-h__phones strong{
  display:block; font-size:24px; font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width:1100px){
  .kfz-h__wall-head{ align-items:flex-start; }
  .kfz-h__wall-search{ flex:1 1 100%; }
  .kfz-h__tile{ min-height:180px; }
  .kfz-h__tile-code{ font-size:38px; }
}

@media (max-width:991px){
  .kfz-h__wall{ padding:26px 22px 26px; }
  .kfz-h__wall-head h1{ font-size:29px; }
  .kfz-h__tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kfz-h__tiles--small{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kfz-h__head h2{ font-size:25px; }
  .kfz-h__notes{ grid-template-columns:1fr; gap:22px; }
  .kfz-h__call{ padding:26px 24px; }
  .kfz-h__wall-facts{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:575px){
  .kfz-h__wall{ padding:22px 16px 22px; border-radius:14px; }
  .kfz-h__wall-head{ margin-bottom:18px; gap:22px; }
  .kfz-h__wall-head h1{ font-size:25px; }
  .kfz-h__wall-head > div > p{ font-size:15.5px; }
  .kfz-h__wall-row{ flex-wrap:wrap; }
  .kfz-h__wall-row button{ flex:1 1 100%; }
  .kfz-h__tile{ min-height:126px; padding:15px 14px 16px; }
  /* 28px liessen "E90 / E91" in der halben Spalte umbrechen */
  .kfz-h__tile-code{ font-size:22px; }
  .kfz-h__tile-count{ margin-top:7px; font-size:13.5px; }
  .kfz-h__tiles--small{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kfz-h__tile--small{ min-height:104px; }
  .kfz-h__tile--small .kfz-h__tile-code{ font-size:19px; }
  .kfz-h__wall-facts{ padding:16px 16px; gap:16px; }
  .kfz-h__wall-facts dl{ gap:20px; }
  .kfz-h__wall-facts dt{ font-size:19px; }
  .kfz-h__head h2{ font-size:23px; }
  .kfz-h__block{ margin-bottom:44px; }
  .kfz-h__phones{ width:100%; }
  .kfz-h__phones a{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  .kfz-h *{ transition:none !important; }
}

/* --------------------------------------------------------------------------
   Beide Regeln gelten nur auf der Startseite, weil diese Datei nur hier
   geladen wird.
   -------------------------------------------------------------------------- */

/* Die Suche im Verkaeufer-Panel waere hier das dritte Suchfeld auf einem
   Bildschirm (Kopfzeile, Panel, Hero). Auf der Startseite uebernimmt der Hero. */
.seller-panel .store-search{ display:none; }

/* In einer Sektion, die "Zuletzt eingelagert" heisst, sagt ein NEU-Aufkleber
   auf jeder Karte nichts mehr. */
.kfz-h #product-grid-container .kfz-badge-new{ display:none; }

/* Das Verkaeufer-Panel wiederholt hier Bewertungen und Verkaufszahl, die schon
   im Hero stehen -- und zwar mit einer anderen Zahl, weil es nur die
   eBay-Verkaeufe zaehlt. Auf der Startseite deshalb aus. */
.seller-panel{ display:none; }