/* =========================================================================
   Platin Car Parts - Design-System
   Schwarz / Platin, passend zum Logo. Mobile first.
   ========================================================================= */

:root {
  --bg:          #0a0a0b;
  --bg-2:        #101014;
  --surface:     #15151a;
  --surface-2:   #1c1c23;
  --surface-3:   #24242c;
  --line:        #2b2b34;
  --line-hell:   #3a3a45;

  --text:        #f4f4f5;
  --text-2:      #b9b9c2;
  --muted:       #8b8b96;

  --platin:      #e8e8ec;
  --platin-2:    #b6b6c0;
  --akzent:      #ffffff;

  --ok:          #34d399;
  --ok-bg:       rgba(52, 211, 153, .12);
  --warn:        #fbbf24;
  --warn-bg:     rgba(251, 191, 36, .12);
  --danger:      #f87171;
  --danger-bg:   rgba(248, 113, 113, .12);
  --info:        #60a5fa;
  --info-bg:     rgba(96, 165, 250, .12);

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-xl: 26px;

  --schatten: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.38);
  --schatten-s: 0 1px 2px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.25);

  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Roboto, Arial, sans-serif;
  --breite: 1280px;
  --kopf-h: 68px;
}

* { box-sizing: border-box; }

/* Muss vor allen display-Regeln stehen: sonst überschreibt z. B.
   `.login-seite { display: grid }` das hidden-Attribut. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Sprungziele dürfen nicht unter der festen Kopfzeile verschwinden. */
:target,
#kontakt, #kategorien { scroll-margin-top: calc(var(--kopf-h) + 18px); }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* -------------------------------------------------- Logo als Wasserzeichen

   Liegt fest in der Bildschirmmitte und bleibt beim Scrollen stehen.
   "fixed" statt "absolute": Sonst würde es mit der Seite nach oben wandern
   und wäre unten nicht mehr zu sehen.
   z-index: -1 setzt es hinter jeden Inhalt, aber noch über die Hintergrund-
   farbe des Body - genau dorthin gehört ein Wasserzeichen.
   pointer-events: none, damit es keine Klicks abfängt. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('/img/logo');
  background-repeat: no-repeat;
  background-position: center center;
  /* vmin = die kleinere Bildschirmseite. So passt das Logo auf dem Handy
     genauso wie auf dem Laptop, ohne je über den Rand zu laufen. */
  background-size: min(58vmin, 520px) auto;
  opacity: .045;
}

/* Auf sehr kleinen Bildschirmen etwas kleiner, sonst legt es sich als
   grosse Fläche hinter jeden Text. */
@media (max-width: 560px) {
  body::before { background-size: min(66vmin, 320px) auto; opacity: .04; }
}

img { max-width: 100%; display: block; }
a { color: var(--platin); text-decoration: none; }
a:hover { color: #fff; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 750; letter-spacing: -.02em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

::selection { background: #fff; color: #000; }

:focus-visible {
  outline: 2px solid var(--platin);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- Layout */

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-eng { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ Kopf */

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,10,11,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.kopf-inner {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--kopf-h);
}

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { height: 46px; width: auto; }
@media (min-width: 900px) { .logo img { height: 58px; } }

.kopf-nav { display: none; gap: 4px; margin-left: auto; align-items: center; }
@media (min-width: 900px) { .kopf-nav { display: flex; } }

.nav-link {
  padding: 8px 14px; border-radius: var(--r-s);
  color: var(--text-2); font-size: .93rem; font-weight: 550;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--surface-2); color: #fff; }
.nav-link.aktiv { color: #fff; background: var(--surface-2); }

.kopf-suche { flex: 1; max-width: 520px; display: none; }
@media (min-width: 700px) { .kopf-suche { display: block; } }

.burger {
  margin-left: auto; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-s);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  cursor: pointer;
}
@media (min-width: 900px) { .burger { display: none; } }

.mobil-menu {
  display: none; flex-direction: column; gap: 2px;
  padding: 10px 0 16px; border-top: 1px solid var(--line);
}
.mobil-menu.offen { display: flex; }
/* Auf niedrigen Bildschirmen (Querformat, kleine Handys, offene Tastatur)
   wurde das Menü höher als das Fenster. Weil der Kopfbereich festgeklebt ist,
   liessen sich die unteren Einträge nicht erreichen - auch nicht durch
   Scrollen. Deshalb bekommt das Menü selbst eine Höhengrenze und scrollt. */
.mobil-menu.offen {
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobil-menu a { padding: 12px 14px; border-radius: var(--r-s); color: var(--text-2); font-weight: 600; }
.mobil-menu a:hover { background: var(--surface-2); color: #fff; }

/* --------------------------------------------------------------- Suchbox */

.suche {
  position: relative; display: flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; transition: border-color .15s, box-shadow .15s;
}
.suche:focus-within { border-color: var(--line-hell); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.suche svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.suche input {
  width: 100%; padding: 11px 16px 11px 42px;
  background: transparent; border: 0; color: var(--text);
  font-size: .95rem; font-family: inherit; border-radius: 999px;
}
.suche input:focus { outline: none; }
.suche input::placeholder { color: var(--muted); }
.suche .loeschen {
  position: absolute; right: 6px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-3); border: 0; color: var(--text-2); cursor: pointer;
  display: none; place-items: center; font-size: 16px; line-height: 1;
}
.suche.hat-text .loeschen { display: grid; }

/* --------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-s);
  font-family: inherit; font-size: .95rem; font-weight: 650; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: transform .12s, background .15s, border-color .15s, opacity .15s;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primaer { background: var(--platin); color: #0a0a0b; }
.btn-primaer:hover { background: #fff; color: #0a0a0b; }

.btn-sekundaer { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-sekundaer:hover { background: var(--surface-3); border-color: var(--line-hell); color: #fff; }

.btn-geist { background: transparent; color: var(--text-2); border-color: var(--line); }
.btn-geist:hover { background: var(--surface-2); color: #fff; }

.btn-gefahr { background: var(--danger-bg); color: var(--danger); border-color: rgba(248,113,113,.35); }
.btn-gefahr:hover { background: rgba(248,113,113,.2); }

.btn-erfolg { background: var(--ok-bg); color: var(--ok); border-color: rgba(52,211,153,.35); }
.btn-erfolg:hover { background: rgba(52,211,153,.2); }

.btn-klein { padding: 7px 13px; font-size: .85rem; min-height: 36px; }
.btn-gross { padding: 14px 28px; font-size: 1.02rem; min-height: 52px; }
.btn-block { width: 100%; }

.btn-wa { background: #1fae54; color: #fff; }
.btn-wa:hover { background: #17974a; color: #fff; }

/* ------------------------------------------------------------- Formulare */

.feld { display: block; margin-bottom: 14px; }
.feld > span, .label {
  display: block; font-size: .8rem; font-weight: 650; color: var(--text-2);
  margin-bottom: 6px; letter-spacing: .03em; text-transform: uppercase;
}
.feld .hinweis { font-size: .78rem; color: var(--muted); margin-top: 5px; text-transform: none; letter-spacing: 0; font-weight: 400; }

input[type=text], input[type=number], input[type=email], input[type=tel],
input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-s); color: var(--text);
  font-family: inherit; font-size: 16px; /* 16px verhindert Zoom auf iOS */
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--line-hell); box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b96' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 17px;
  padding-right: 36px;
}
select option { background: var(--surface-2); color: var(--text); }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px 0; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--platin); flex-shrink: 0; }
.check span { font-size: .92rem; color: var(--text-2); }

.gitter-2 { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gitter-2 { grid-template-columns: 1fr 1fr; } }
.gitter-3 { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gitter-3 { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------------------- Karten */

.karte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 20px;
}
.karte-titel { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------- Hero */

.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1000px 420px at 78% -10%, rgba(255,255,255,.09), transparent 62%),
    radial-gradient(700px 340px at 8% 110%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #0d0d10, #0a0a0b);
}
/* Nur oben/unten setzen. Das Element trägt auch die Klasse .wrap, deren
   seitliches padding (0 16px) sonst von der padding-Kurzform überschrieben
   würde – dann klebte der ganze Hero-Text am linken Bildschirmrand. */
.hero-inner { padding-top: 44px; padding-bottom: 40px; position: relative; z-index: 1; }
@media (min-width: 900px) { .hero-inner { padding-top: 72px; padding-bottom: 64px; } }

/* ---------------------------------------- Animierter Hero-Hintergrund

   Bewegt werden ausschliesslich transform und opacity - beides erledigt die
   Grafikkarte. Kein JavaScript, keine Bilder: kostet also weder Ladezeit noch
   spürbar Akku auf dem Handy. */

.hero-hg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* Weiche Lichtschleier, die langsam durchs Bild wandern. */
.hero-hg .hg-schleier {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(60px); opacity: .5;
  will-change: transform;
}
.hero-hg .s1 {
  width: 62vw; height: 62vw; max-width: 620px; max-height: 620px;
  top: -22%; right: -12%;
  background: radial-gradient(circle, rgba(210,214,224,.30), transparent 68%);
  animation: schleier1 26s ease-in-out infinite;
}
.hero-hg .s2 {
  width: 55vw; height: 55vw; max-width: 540px; max-height: 540px;
  bottom: -28%; left: -14%;
  background: radial-gradient(circle, rgba(150,160,180,.26), transparent 68%);
  animation: schleier2 32s ease-in-out infinite;
}
.hero-hg .s3 {
  width: 40vw; height: 40vw; max-width: 400px; max-height: 400px;
  top: 34%; left: 42%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  animation: schleier3 22s ease-in-out infinite;
}

@keyframes schleier1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-8%, 10%, 0) scale(1.15); }
}
@keyframes schleier2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(12%, -12%, 0) scale(.9); }
}
@keyframes schleier3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.9); opacity: .35; }
  50%      { transform: translate3d(-14%, -8%, 0) scale(1.2); opacity: .6; }
}

/* Ein Lichtstrahl, der über den ganzen Kopfbereich streicht - wie Licht,
   das über eine polierte Motorhaube läuft. Deutlich höher als der Bereich
   selbst, damit er durch die Drehung oben wie unten sauber durchläuft. */
.hero-hg .hg-strahl {
  position: absolute; top: -90%; bottom: -90%; width: 55%;
  background: linear-gradient(100deg,
    transparent, rgba(255,255,255,.05) 30%, rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.05) 70%, transparent);
  transform: rotate(12deg) translate3d(-170%, 0, 0);
  animation: strahlZug 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes strahlZug {
  0%, 55%  { transform: rotate(12deg) translate3d(-170%, 0, 0); }
  100%     { transform: rotate(12deg) translate3d(330%, 0, 0); }
}

/* Kleinere Bildschirme: weniger gleichzeitige Bewegung. */
@media (max-width: 560px) {
  .hero-hg .s3 { display: none; }
  .hero-hg .hg-schleier { filter: blur(44px); }
}

/* Wer im Betriebssystem "Bewegung reduzieren" gewählt hat, sieht ein
   ruhiges Bild - die Schleier bleiben, sie bewegen sich nur nicht. */
@media (prefers-reduced-motion: reduce) {
  .hero-hg .hg-schleier,
  .hero-hg .hg-strahl { animation: none; }
  .hero-hg .hg-strahl { opacity: 0; }
}

.hero h1 { max-width: 17ch; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--platin-2); }
.hero p.lead { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-2); max-width: 60ch; margin-bottom: 26px; }

.hero-suche { max-width: 640px; }
.hero-suche .suche input { padding-top: 15px; padding-bottom: 15px; font-size: 1rem; }

/* Automatisch so viele Spalten, wie hineinpassen - und alle gleich breit.
   Mit fester Spaltenzahl blieb nach dem Entfernen einer Kachel eine Lücke
   stehen, und die Titel brachen mitten im Wort um. */
.vorteile {
  display: grid; gap: 12px; margin-top: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .vorteile {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    /* Nicht über die volle Seitenbreite ziehen: Auf einem breiten Bildschirm
       waren die Kacheln sonst gut doppelt so breit wie ihr Text und wirkten
       leer. Die Grenze liegt bewusst nah an der Suchleiste darüber, damit der
       Kopfbereich eine gemeinsame Kante hat. */
    max-width: 940px;
  }
}
.vorteil {
  display: flex; gap: 11px; align-items: center;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 13px 14px;
}
/* Der Textblock darf schrumpfen, sonst drückt er die Kachel auseinander. */
.vorteil > div { min-width: 0; }
.vorteil svg { width: 20px; height: 20px; color: var(--platin); flex-shrink: 0; }
.vorteil b { display: block; font-size: .88rem; font-weight: 700; }
.vorteil small { color: var(--muted); font-size: .78rem; line-height: 1.45; display: block; }

/* ------------------------------------------------------- Kategorie-Kacheln */

.kat-leiste { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.kat-leiste::-webkit-scrollbar { height: 6px; }
.kat-leiste::-webkit-scrollbar-thumb { background: var(--line-hell); border-radius: 99px; }
.kat-chip {
  flex-shrink: 0; padding: 8px 15px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); font-size: .87rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: all .15s; font-family: inherit;
}
.kat-chip:hover { border-color: var(--line-hell); color: #fff; }
.kat-chip.aktiv { background: var(--platin); color: #0a0a0b; border-color: var(--platin); }
.kat-chip .anz { opacity: .6; font-size: .8em; margin-left: 4px; }

/* ------------------------------------------------------------- Shop-Layout */

.shop { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 26px 0 60px; align-items: start; }
@media (min-width: 1000px) { .shop { grid-template-columns: 268px 1fr; gap: 32px; } }

.filter-spalte { display: none; }
@media (min-width: 1000px) {
  .filter-spalte { display: block; position: sticky; top: calc(var(--kopf-h) + 16px); }
}
.filter-spalte.offen { display: block; }

.filter-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; }
.filter-gruppe + .filter-gruppe { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.filter-gruppe h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 10px; font-weight: 700;
}
.filter-liste { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; margin: -4px; padding: 4px; }
.filter-liste::-webkit-scrollbar { width: 6px; }
.filter-liste::-webkit-scrollbar-thumb { background: var(--line-hell); border-radius: 99px; }
.filter-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-s); cursor: pointer;
  font-size: .88rem; color: var(--text-2); background: transparent; border: 0;
  font-family: inherit; text-align: left; width: 100%;
}
.filter-opt:hover { background: var(--surface-2); color: #fff; }
.filter-opt.aktiv { background: var(--surface-3); color: #fff; font-weight: 650; }
.filter-opt .anz { font-size: .78rem; color: var(--muted); flex-shrink: 0; }

.werkzeugleiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.treffer { color: var(--text-2); font-size: .92rem; }
.treffer b { color: #fff; }
.filter-knopf { display: inline-flex; }
@media (min-width: 1000px) { .filter-knopf { display: none; } }

.aktive-filter { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-3); border: 1px solid var(--line-hell);
  border-radius: 999px; padding: 5px 8px 5px 13px; font-size: .82rem; color: var(--text);
}
/* iOS Safari zoomt beim Antippen in jedes Feld mit weniger als 16px Schrift.
   Für Suchfelder war das durch eine spätere Regel wieder verlorengegangen. */
.suche input[type=search],
input[type=search],
.filter-spalte input,
.filter-spalte select {
  font-size: 16px;
}

/* [34] Tippfläche des Löschknopfs an aktiven Filtern: mindestens 24x24px
   (WCAG 2.5.8) - vorher waren es 17x19px und damit kaum zu treffen. */
.filter-pill button {
  min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.filter-pill button:hover { color: #fff; }

/* ----------------------------------------------------------- Produktgitter */

.produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
@media (max-width: 460px) { .produkte { grid-template-columns: 1fr; } }

.produkt {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.produkt:hover { transform: translateY(-3px); border-color: var(--line-hell); box-shadow: var(--schatten); }

.produkt-bild {
  position: relative; aspect-ratio: 4 / 3; background: var(--surface-2);
  overflow: hidden; display: block;
}
/* Laedt ein Bild einmal nicht, zeigt der Browser stattdessen den alt-Text.
   Ohne diese Begrenzung lief der lange Teiletitel aus dem Rahmen und legte
   sich quer ueber die Karte - es sah aus, als sei das Layout kaputt. */
.produkt-bild img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;
  font-size: .75rem; color: var(--muted); text-align: center;
  overflow: hidden;
}
.produkt:hover .produkt-bild img { transform: scale(1.045); }
.produkt-bild .kein-bild {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--line-hell);
}
.produkt-bild .kein-bild svg { width: 68px; height: 68px; }

.bild-zaehler {
  position: absolute; right: 9px; bottom: 9px;
  background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; display: flex; align-items: center; gap: 5px;
}

.produkt-inhalt { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.produkt-kat { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.produkt-titel {
  font-size: .98rem; font-weight: 700; margin: 5px 0 8px; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; line-height: 1.32;
}
.produkt a.produkt-titel:hover { color: #fff; }
.produkt-meta { font-size: .8rem; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.produkt-meta span + span::before { content: ' · '; }
.produkt-fuss { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.preis { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.preis small { font-size: .7rem; font-weight: 500; color: var(--muted); display: block; margin-top: -2px; }

.badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2; }
.badge {
  font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px);
}
.badge-top { background: rgba(255,255,255,.92); color: #0a0a0b; }
.badge-res { background: rgba(251,191,36,.9); color: #201800; }
.badge-verkauft { background: rgba(0,0,0,.78); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.badge-neu { background: rgba(52,211,153,.9); color: #04231a; }

.merken {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10,10,11,.62); border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center; cursor: pointer; color: #fff;
  backdrop-filter: blur(6px); transition: background .15s, transform .15s;
}
.merken:hover { background: rgba(10,10,11,.9); transform: scale(1.06); }
.merken svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.merken.aktiv svg { fill: #f87171; stroke: #f87171; }

.produkt.ist-verkauft .produkt-bild img { filter: grayscale(1) brightness(.6); }

/* --------------------------------------------------------------- Zustände */

.leer { text-align: center; padding: 60px 20px; color: var(--muted); }
.leer svg { width: 60px; height: 60px; margin: 0 auto 16px; color: var(--line-hell); }
.leer h3 { color: var(--text); }

.skelett { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.skelett .sk-bild { aspect-ratio: 4/3; background: var(--surface-2); }
.skelett .sk-zeile { height: 12px; background: var(--surface-2); border-radius: 4px; margin: 12px 15px; }
.skelett .sk-zeile.kurz { width: 45%; }
.puls { animation: puls 1.4s ease-in-out infinite; }
@keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.blaettern { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.blaettern button {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--r-s);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  font-family: inherit; font-weight: 600; cursor: pointer; font-size: .9rem;
}
.blaettern button:hover:not(:disabled) { background: var(--surface-3); color: #fff; }
.blaettern button.aktiv { background: var(--platin); color: #0a0a0b; border-color: var(--platin); }
.blaettern button:disabled { opacity: .35; cursor: not-allowed; }

/* -------------------------------------------------------------- Detailseite */

/* minmax(0, 1fr) statt nur 1fr: Eine Rasterspalte darf sonst nicht schmaler
   werden als ihr breitester Inhalt. Der Vorschaustreifen unter der Galerie
   ist bei zehn Fotos rund 900 px breit – die Teileseite wurde dadurch auf dem
   Handy 900 px breit, liess sich herauszoomen und seitlich wegwischen.
   Bei Teilen mit nur einem Foto gibt es keinen Streifen; deshalb fiel es
   lange nicht auf. */
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 22px 0 60px; align-items: start; }
@media (min-width: 950px) { .detail { grid-template-columns: minmax(0,1.35fr) minmax(340px,.9fr); gap: 40px; } }
/* Auch die beiden Spalteninhalte dürfen schrumpfen. */
.detail > * { min-width: 0; }

.brotkrumen { font-size: .84rem; color: var(--muted); padding: 16px 0 4px; display: flex; gap: 7px; flex-wrap: wrap; }
.brotkrumen a { color: var(--text-2); }
.brotkrumen span::before { content: '/'; margin-right: 7px; color: var(--line-hell); }

.galerie-haupt {
  position: relative; aspect-ratio: 4/3; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden;
}
.galerie-haupt img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; background: #0d0d10; }
.galerie-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(10,10,11,.7); border: 1px solid rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px);
}
.galerie-nav:hover { background: rgba(10,10,11,.95); }
.galerie-nav.links { left: 12px; }
.galerie-nav.rechts { right: 12px; }

.galerie-mini { display: flex; gap: 9px; margin-top: 11px; overflow-x: auto; padding-bottom: 4px; }
.galerie-mini button {
  flex-shrink: 0; width: 82px; aspect-ratio: 4/3; border-radius: var(--r-s);
  overflow: hidden; border: 2px solid var(--line); background: var(--surface-2); cursor: pointer; padding: 0;
}
.galerie-mini button.aktiv { border-color: var(--platin); }
.galerie-mini img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.94);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.lightbox.offen { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; width: auto; }
.lightbox .zu {
  position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 24px; cursor: pointer;
}

/* Blättern in der Vollbildansicht. Am Handy nützen Tastaturpfeile nichts –
   es braucht sichtbare Knöpfe (und Wischen, das macht das Skript). */
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox .lb-nav svg { width: 26px; height: 26px; }
.lightbox .lb-nav:hover { background: rgba(255,255,255,.22); }
.lightbox .lb-nav.links { left: 14px; }
.lightbox .lb-nav.rechts { right: 14px; }
.lightbox .lb-zaehler {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px;
  background: rgba(0,0,0,.6); color: #fff; font-size: .84rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
/* Bei nur einem Foto gibt es nichts zu blättern. */
.lightbox.einzeln .lb-nav,
.lightbox.einzeln .lb-zaehler { display: none; }

/* Am Handy weiter oben, damit die Knöpfe nicht auf dem Bild kleben. */
@media (max-width: 560px) {
  .lightbox .lb-nav { width: 44px; height: 44px; }
  .lightbox .lb-nav.links { left: 8px; }
  .lightbox .lb-nav.rechts { right: 8px; }
}

.kauf-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 22px;
}
@media (min-width: 950px) { .kauf-box { position: sticky; top: calc(var(--kopf-h) + 16px); } }

.detail-preis { font-size: 2.2rem; font-weight: 850; letter-spacing: -.03em; line-height: 1.1; }
.detail-preis-note { color: var(--muted); font-size: .84rem; margin-top: 2px; }

.daten-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.daten-tabelle th, .daten-tabelle td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.daten-tabelle th { color: var(--muted); font-weight: 550; width: 42%; }
.daten-tabelle td { color: var(--text); font-weight: 600; }
.daten-tabelle tr:last-child th, .daten-tabelle tr:last-child td { border-bottom: 0; }

.beschreibung { white-space: pre-wrap; color: var(--text-2); line-height: 1.75; }

.status-band {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  border-radius: var(--r-m); font-size: .9rem; font-weight: 600; margin-bottom: 16px;
}
.status-band.res { background: var(--warn-bg); color: var(--warn); }
.status-band.verkauft { background: var(--danger-bg); color: var(--danger); }
.status-band.aktiv { background: var(--ok-bg); color: var(--ok); }

/* -------------------------------------------------------------------- Fuß */

.fuss { border-top: 1px solid var(--line); background: var(--bg-2); padding: 44px 0 26px; margin-top: 40px; }
.fuss-gitter { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 700px) { .fuss-gitter { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 13px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.fuss a { color: var(--text-2); font-size: .9rem; }
.fuss a:hover { color: #fff; }
.fuss-unten {
  border-top: 1px solid var(--line); margin-top: 30px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--muted); font-size: .82rem;
}

/* ------------------------------------------------------------------- Modal */

.modal-hg {
  position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.7);
  display: none; align-items: flex-end; justify-content: center; padding: 0;
  backdrop-filter: blur(3px);
}
@media (min-width: 700px) { .modal-hg { align-items: center; padding: 20px; } }
.modal-hg.offen { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  padding: 22px; box-shadow: var(--schatten);
}
@media (min-width: 700px) { .modal { border-radius: var(--r-l); } }
.modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-kopf h3 { margin: 0; }
.modal-zu {
  width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-2); cursor: pointer; font-size: 20px; line-height: 1;
  flex-shrink: 0;
}
.modal-zu:hover { color: #fff; background: var(--surface-3); }

/* ------------------------------------------------------------------- Toast */

.toast-box { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 300; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; }
.toast {
  background: var(--surface-3); border: 1px solid var(--line-hell); color: var(--text);
  border-radius: var(--r-m); padding: 13px 16px; font-size: .92rem; font-weight: 550;
  box-shadow: var(--schatten); animation: toastRein .22s ease;
  display: flex; align-items: center; gap: 10px;
}
.toast.ok { border-color: rgba(52,211,153,.5); }
.toast.ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.toast.fehler { border-color: rgba(248,113,113,.5); }
.toast.fehler::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
@keyframes toastRein { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------- Textseiten */

/* Wie beim Hero: nur oben/unten setzen, sonst fällt das seitliche padding
   von .wrap weg und Impressum, AGB & Co. kleben am Bildschirmrand. */
.textseite { max-width: 820px; padding-top: 34px; padding-bottom: 70px; }
.textseite h2 { margin-top: 34px; }
.textseite h3 { margin-top: 24px; }
.textseite ul { padding-left: 20px; color: var(--text-2); }
.textseite li { margin-bottom: 7px; }
.textseite p { color: var(--text-2); }
.hinweis-box {
  background: var(--warn-bg); border: 1px solid rgba(251,191,36,.3);
  border-radius: var(--r-m); padding: 15px 17px; color: var(--warn); font-size: .9rem;
}
.hinweis-box b { color: #fde68a; }

/* --------------------------------------------------------- Kontaktbereich */
.kontakt-gitter { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 860px) { .kontakt-gitter { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* ---------------------------------------------------- Korrektur Suchfeld
   Die generische Regel für input[type=search] weiter oben steht später im
   Stylesheet und hat die gleiche Spezifität wie `.suche input` - sie würde
   dem Suchfeld sonst Rahmen, Hintergrund und die linke Innenabstand für die
   Lupe wegnehmen. Deshalb hier noch einmal mit höherer Spezifität. */
.suche input[type=search],
.suche input[type=text] {
  padding: 11px 40px 11px 42px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  /* Nicht kleiner als 16px: iOS Safari zoomt sonst beim Antippen in die Seite
     hinein, und der Besucher muss danach von Hand wieder herauszoomen. */
  font-size: 16px;
}
.suche input[type=search]:focus,
.suche input[type=text]:focus { outline: none; box-shadow: none; border: 0; }
.hero-suche .suche input[type=search] { padding-top: 15px; padding-bottom: 15px; font-size: 1rem; }

/* ================================================== Fahrzeug-Einstieg */

.fz-suche {
  background: linear-gradient(135deg, #17171d, #0e0e12);
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 22px 20px;
}
@media (min-width: 800px) { .fz-suche { padding: 26px 28px; } }

.fz-kopf h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: 6px; }
.fz-kopf p { color: var(--text-2); font-size: .93rem; max-width: 62ch; margin-bottom: 18px; }

.fz-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.fz-tab {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); font-family: inherit; font-size: .88rem; font-weight: 650;
}
.fz-tab:hover { color: #fff; border-color: var(--line-hell); }
.fz-tab.aktiv { background: var(--platin); border-color: var(--platin); color: #0a0a0b; }

.fz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
@media (min-width: 620px) { .fz-form { grid-template-columns: 140px 140px auto; } }
.fz-form .btn { grid-column: 1 / -1; }
@media (min-width: 620px) { .fz-form .btn { grid-column: auto; } }
.fz-form input { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; text-align: center; }

.fz-hilfe { color: var(--muted); font-size: .84rem; margin: 14px 0 0; line-height: 1.6; max-width: 70ch; }
.fz-hilfe strong { color: var(--text-2); }

.fz-liste { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .fz-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fz-liste { grid-template-columns: repeat(3, 1fr); } }

.fz-karte {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 13px 15px; cursor: pointer;
  font-family: inherit; transition: border-color .15s, background .15s, transform .12s;
}
.fz-karte:hover { border-color: var(--line-hell); background: var(--surface-3); transform: translateY(-2px); }
.fz-karte .fz-sym { width: 34px; height: 34px; flex-shrink: 0; color: var(--platin-2); }
.fz-karte b { display: block; font-size: .92rem; color: var(--text); line-height: 1.3; }
.fz-karte small { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.fz-karte .fz-anzahl {
  margin-left: auto; flex-shrink: 0; background: var(--surface-3); color: var(--text);
  border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700;
}

/* ------------------------------------------------------- Fahrzeugdaten */

.fz-daten { display: grid; grid-template-columns: 1fr; gap: 0 26px; }
@media (min-width: 560px) { .fz-daten { grid-template-columns: 1fr 1fr; } }
.fz-daten .zeile {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.fz-daten .zeile span:first-child { color: var(--muted); }
.fz-daten .zeile span:last-child { color: var(--text); font-weight: 600; text-align: right; }

.fz-band {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 13px 16px; margin-bottom: 16px;
}
.fz-band .fz-sym { width: 30px; height: 30px; color: var(--platin-2); flex-shrink: 0; }
.fz-band b { font-size: .95rem; }
.fz-band small { display: block; color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------------- Ankauf */

.ankauf-band {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; color: inherit;
  background:
    radial-gradient(600px 200px at 90% 50%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(135deg, #1a1a20, #0f0f13);
  border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px;
  transition: border-color .15s, transform .12s;
}
.ankauf-band:hover { border-color: var(--line-hell); transform: translateY(-2px); color: inherit; }
.ankauf-marke {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--platin-2); margin-bottom: 8px;
}
.ankauf-band h2 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin-bottom: 8px; max-width: 22ch; }
.ankauf-band p { color: var(--text-2); font-size: .92rem; margin: 0; max-width: 58ch; }

.ankauf-schritte { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 30px; }
@media (min-width: 760px) { .ankauf-schritte { grid-template-columns: repeat(3, 1fr); } }
.ankauf-schritt {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 18px;
}
.ankauf-schritt .nr {
  width: 30px; height: 30px; border-radius: 50%; background: var(--platin); color: #0a0a0b;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; margin-bottom: 11px;
}
.ankauf-schritt b { display: block; margin-bottom: 5px; font-size: .96rem; }
.ankauf-schritt small { color: var(--muted); font-size: .85rem; line-height: 1.55; }
.fz-karte.aktiv { border-color: var(--platin); background: var(--surface-3); }
.fz-karte.aktiv .fz-sym { color: var(--platin); }


/* ============================ Fotoauswahl und Abschnitte
   Wird sowohl im Verkäufer-Bereich als auch auf der Ankaufseite benutzt. */

/* --------------------------------------------------------------- Fotos */

.foto-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
}
.foto-kachel {
  position: relative; aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; }
.foto-kachel .weg {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.2); color: #fff;
  cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.foto-kachel .haupt {
  position: absolute; left: 5px; bottom: 5px;
  background: rgba(255,255,255,.92); color: #0a0a0b;
  font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
}
.foto-kachel .verschieben {
  position: absolute; right: 5px; bottom: 5px; display: flex; gap: 3px;
}
.foto-kachel .verschieben button {
  width: 24px; height: 24px; border-radius: 6px; background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; font-size: 13px;
  display: grid; place-items: center; padding: 0;
}
.foto-hinzu {
  aspect-ratio: 1; border-radius: var(--r-m);
  border: 2px dashed var(--line-hell); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted); cursor: pointer; font-family: inherit; font-size: .74rem; font-weight: 650;
  text-align: center; padding: 8px;
}
.foto-hinzu:hover { border-color: var(--platin-2); color: var(--text); }
.foto-hinzu svg { width: 24px; height: 24px; }
.foto-lade {
  position: absolute; inset: 0; background: rgba(10,10,11,.7); display: grid; place-items: center;
  color: #fff; font-size: .72rem; font-weight: 700;
}

.abschnitt-titel {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 750; margin: 26px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.abschnitt-titel:first-child { margin-top: 0; }

/* ============================================================ Warenkorb */

.korb-knopf {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--r-s);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.korb-knopf:hover { background: var(--surface-3); border-color: var(--line-hell); color: #fff; }
.korb-knopf svg { width: 21px; height: 21px; }
.korb-knopf.nur-handy { display: grid; margin-left: auto; }
@media (min-width: 900px) { .korb-knopf.nur-handy { display: none; } }
.korb-zahl {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px;
  border-radius: 999px; background: var(--platin); color: #0a0a0b;
  font-size: .68rem; font-weight: 800; display: grid; place-items: center; padding: 0 5px;
}

.korb-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 940px) { .korb-layout { grid-template-columns: minmax(0,1.6fr) minmax(320px,.9fr); gap: 32px; } }

.korb-zeile {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 13px; align-items: start;
}
@media (min-width: 640px) { .korb-zeile { grid-template-columns: 104px 1fr auto; align-items: center; } }
.korb-zeile .bild {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--r-s); overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center; color: var(--line-hell);
}
.korb-zeile .bild img { width: 100%; height: 100%; object-fit: cover; }
.korb-zeile .bild svg { width: 34px; height: 34px; }
.korb-zeile h4 { font-size: .97rem; margin: 0 0 4px; line-height: 1.3; }
.korb-zeile .zeile { font-size: .8rem; color: var(--muted); }
.korb-rechts { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (min-width: 640px) { .korb-rechts { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 8px; } }

.menge { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.menge button {
  width: 34px; height: 36px; background: var(--surface-2); border: 0; color: var(--text);
  font-size: 17px; cursor: pointer; font-family: inherit;
}
.menge button:hover:not(:disabled) { background: var(--surface-3); }
.menge button:disabled { opacity: .35; cursor: not-allowed; }
.menge span { min-width: 38px; text-align: center; font-weight: 700; font-size: .92rem; }

.summe-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 20px;
}
@media (min-width: 940px) { .summe-box { position: sticky; top: calc(var(--kopf-h) + 16px); } }
.summe-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .93rem; }
.summe-zeile span:first-child { color: var(--text-2); }
.summe-zeile.gesamt {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px;
  font-size: 1.25rem; font-weight: 800;
}
.summe-zeile.gesamt span:first-child { color: var(--text); }

.korb-hinweis {
  background: var(--warn-bg); border: 1px solid rgba(251,191,36,.32);
  color: var(--warn); border-radius: var(--r-m); padding: 12px 14px;
  font-size: .88rem; margin-bottom: 14px;
}

/* ------------------------------------------------------------ Kasse */

.schritte { display: flex; gap: 8px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.schritt { display: flex; align-items: center; gap: 8px; font-size: .87rem; color: var(--muted); font-weight: 600; }
.schritt .nr {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--line); display: grid; place-items: center; font-size: .8rem; font-weight: 800;
}
.schritt.aktiv { color: #fff; }
.schritt.aktiv .nr { background: var(--platin); border-color: var(--platin); color: #0a0a0b; }
.schritt.fertig .nr { background: var(--ok-bg); border-color: rgba(52,211,153,.4); color: var(--ok); }
.schritt-pfeil { color: var(--line-hell); }

.wahl { display: grid; gap: 10px; }
.wahl label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 14px 15px; transition: border-color .15s, background .15s;
}
.wahl label:hover { border-color: var(--line-hell); }
.wahl label.gewaehlt { border-color: var(--platin); background: var(--surface-3); }
.wahl input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--platin); flex-shrink: 0; }
.wahl b { display: block; font-size: .95rem; }
.wahl small { display: block; color: var(--muted); font-size: .83rem; line-height: 1.5; margin-top: 3px; }

.bestell-uebersicht {
  background: var(--surface-2); border: 1px solid var(--line-hell);
  border-radius: var(--r-m); padding: 18px;
}
.bestell-uebersicht .pos {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}

/* Warenkorb und Burger gehören am Handy zusammen an den rechten Rand.
   Ohne diese Regel schöben beide je ein „margin-left:auto“ und der
   Warenkorb landete in der Mitte. */
.korb-knopf.nur-handy + .burger { margin-left: 0; }

/* ------------------------------------------ Treffer bei Schlüsselnummern */

.schluessel-info {
  background: var(--info-bg); border: 1px solid rgba(96,165,250,.3);
  color: var(--text-2); border-radius: var(--r-m); padding: 12px 15px;
  font-size: .88rem; line-height: 1.6; margin-bottom: 16px;
}
.schluessel-info strong { color: #fff; }

.treffer-hinweis {
  display: inline-block; background: var(--warn-bg); color: var(--warn);
  border-radius: 999px; padding: 3px 9px; margin-bottom: 8px;
  font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
}


/* ------------------------------------------------- Erkanntes Fahrzeug */

.fz-vorschau {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0; font-size: .9rem; color: var(--ok);
}
.fz-vorschau strong { color: var(--text); font-weight: 700; }
.fz-vorschau.unbekannt { color: var(--muted); }
.fz-vorschau svg { flex-shrink: 0; }

.erkanntes-fahrzeug {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(96,165,250,.25);
}
.erkanntes-fahrzeug:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.erkanntes-fahrzeug .fz-sym { width: 30px; height: 30px; color: var(--info); flex-shrink: 0; }
.erkanntes-fahrzeug small { color: var(--muted); font-size: .76rem; }
.erkanntes-fahrzeug strong { color: #fff; font-size: .95rem; }

/* ------------------------------------------------- Hover auf Eingabefeldern
   Die Navigation reagiert beim Überfahren – Formularfelder sollen das auch,
   sonst wirken sie tot, bevor man hineinklickt. */
input[type=text]:hover, input[type=number]:hover, input[type=email]:hover,
input[type=tel]:hover, input[type=password]:hover, input[type=search]:hover,
select:hover, textarea:hover {
  border-color: var(--line-hell);
}
.check:hover span { color: var(--text); }
.wahl label:hover b { color: #fff; }


/* ------------------------------------------ Schlachtfahrzeug-Assistent */

.modal-breit { max-width: 780px; width: 100%; }

.assistent-liste {
  max-height: 52vh; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 4px;
}
.assistent-gruppe { padding: 10px 12px 4px; }
.assistent-gruppe > h4 {
  margin: 0 0 8px; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.assistent-gruppe > h4 button {
  background: none; border: 0; color: var(--platin-2); cursor: pointer;
  font: inherit; text-transform: none; letter-spacing: 0; font-size: .8rem;
  padding: 4px 6px; border-radius: var(--r-s); min-height: 24px;
}
.assistent-gruppe > h4 button:hover { background: var(--surface-2); color: #fff; }

.assistent-teile {
  display: grid; grid-template-columns: 1fr; gap: 2px;
}
@media (min-width: 620px) { .assistent-teile { grid-template-columns: 1fr 1fr; } }

/* Grosse Tippflaeche - das laeuft am Auto stehend auf dem Handy. */
.assistent-teil {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--r-s); cursor: pointer;
  min-height: 44px; color: var(--text-2);
}
.assistent-teil:hover { background: var(--surface-2); color: var(--text); }
.assistent-teil input { width: 19px; height: 19px; flex-shrink: 0; accent-color: var(--platin); }
.assistent-teil.gewaehlt { background: var(--surface-2); color: #fff; }
.assistent-teil small { color: var(--muted); font-size: .78rem; }

/* Am unteren Rand kleben: Auf dem Handy lag der Anlegen-Knopf sonst weit
   unterhalb des Bildschirms, und man musste erst durch 112 Positionen
   scrollen, um ihn zu erreichen. */
.modal-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 14px 0 2px;
  border-top: 1px solid var(--line);
  position: sticky; bottom: -22px;
  background: var(--surface);
}
@media (max-height: 760px) {
  .assistent-liste { max-height: 42vh; }
}


/* --------------------------------------------------------- Suchauftrag */

.suchauftrag {
  max-width: 460px; margin: 22px auto 4px; padding: 18px;
  text-align: left; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-m);
}
.suchauftrag h4 { margin: 0 0 6px; font-size: 1rem; color: #fff; }
.suchauftrag p { margin: 0 0 12px; font-size: .88rem; color: var(--text-2); }
.suchauftrag .gesucht { color: var(--muted); font-size: .84rem; }
.suchauftrag .gesucht strong { color: var(--text); }
.suchauftrag input[type=email] {
  padding: 11px 14px; border-radius: var(--r-s);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 16px;
}
.suchauftrag input[type=email]:focus { outline: none; border-color: var(--line-hell); }
.suchauftrag .check { font-size: .82rem; color: var(--text-2); align-items: flex-start; }
.suchauftrag .check input { margin-top: 2px; }


/* -------------------------------------------- Suchauftraege im Admin */

.nachfrage-liste { display: grid; gap: 8px; }
.nachfrage-zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--r-m);
  background: var(--surface-2); border: 1px solid var(--line);
}
.nachfrage-zeile .anzahl {
  min-width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--platin); color: #0a0a0b; font-weight: 750;
}
.nachfrage-zeile b { color: #fff; }
.nachfrage-zeile small { display: block; color: var(--muted); font-size: .8rem; }

.suchauftrag-zeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line);
}
.suchauftrag-zeile .was { color: #fff; font-weight: 600; }
.suchauftrag-zeile .wer { color: var(--text-2); font-size: .88rem; }
.suchauftrag-zeile small { color: var(--muted); font-size: .8rem; }


/* ------------------------------------------------ Entwürfe abarbeiten */

.abarbeiten .ab-fortschritt {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 16px;
}
.abarbeiten .balken {
  flex: 1; height: 7px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.abarbeiten .balken span {
  display: block; height: 100%; width: 0;
  background: var(--platin); transition: width .25s;
}
.abarbeiten .foto-gitter { min-height: 96px; }
.abarbeiten .modal-fuss { gap: 8px; }

/* Am Handy zählt jeder Millimeter: Der wichtigste Knopf wird breit. */
@media (max-width: 560px) {
  .abarbeiten .modal-fuss { flex-wrap: wrap; }
  .abarbeiten .modal-fuss .spacer { display: none; }
  .abarbeiten [data-ab-online] { flex: 1 0 100%; order: -1; }
  .abarbeiten [data-ab-zurueck],
  .abarbeiten [data-ab-ueberspringen] { flex: 1; }
}

/* ---------------------------------------- Erzwungener Passwort-Wechsel */
.pw-zwang {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: 20px; background: var(--bg);
}
.pw-zwang-box {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 26px 22px;
}
.pw-zwang-box h2 { margin: 0 0 8px; font-size: 1.25rem; }
.pw-zwang-box p { color: var(--text-2); font-size: .9rem; line-height: 1.6; margin: 0 0 18px; }
.pw-zwang-box .feld { margin-bottom: 12px; }