/* ==========================================================================
   Gebrauchtmaschinen – Bestand
   Farbwelt: Beton und Anthrazit, Warnsignalgelb nur für Handlungen.
   Schrift:  Archivo (Überschriften), IBM Plex Sans (Text), IBM Plex Mono (Daten)
   ========================================================================== */

:root {
  --ink: #1a1c1e;
  --ink-2: #3d4145;
  --steel: #6b7075;
  --paper: #ffffff;
  --paper-2: #f0f1f2;
  --weiss: #ffffff;
  --karte: #f5f6f7;
  --line: #e2e4e6;
  --hivis: #fec601;      /* Gelb aus dem Logo */
  --hivis-tief: #a8730a;
  --akzent: #0f7a6a;
  --rot: #a83232;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, monospace;

  --breite: 1180px;
  --rand: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Eigene display-Regeln überstimmen sonst das hidden-Attribut – dann bleiben
   versteckte Elemente sichtbar, z. B. ein leeres Vorschaubild als Bruchsymbol. */
[hidden] { display: none !important; }


body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--hivis-tief);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--rand);
  top: 8px;
  z-index: 20;
  background: var(--ink);
  color: var(--weiss);
  padding: 8px 14px;
}

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

.servicebalken {
  background: #000;
  color: #b9bcbe;
  font-size: 12.5px;
}

.servicebalken__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 7px var(--rand);
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

.servicebalken .ohne-link { color: #7c8082; }

.servicebalken a { color: #d6d8d9; text-decoration: none; }
.servicebalken a:hover { color: #fff; }

.kopf {
  background: var(--ink);
  color: var(--weiss);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf__leiste {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  /* Eine Zeile: Logo links, Menü rechts daneben. Reicht die Breite nicht,
     rutscht das Menü als Ganzes in eine zweite Zeile – flex-wrap regelt das
     von selbst, auch wenn später Menüpunkte dazukommen. */
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 22px;
  min-height: 74px;
}

.marke { flex: none; align-self: center; }

.marke {
  display: flex;
  align-items: center;
  color: var(--weiss);
  text-decoration: none;
}

/* max-width: none hebt die globale Regel img { max-width: 100% } auf –
   sonst quetscht der Browser das Logo zusammen, statt das Menü umbrechen
   zu lassen, und das Seitenverhältnis geht verloren. */
.marke__logo {
  display: block;
  width: auto;
  flex: none;
  max-width: 360px;      /* Obergrenze der Breite */
  object-fit: contain;   /* damit ein zu breites Logo kleiner wird statt verzerrt */
}

.marke__zeichen {
  width: 26px;
  height: 26px;
  flex: none;
  background: repeating-linear-gradient(45deg, var(--hivis) 0 5px, var(--ink) 5px 10px);
  border: 1px solid var(--hivis);
}

.marke__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kopf__nav {
  /* 0 0 auto: nie schmaler als der Inhalt, lieber Umbruch in Zeile zwei.
     max-width verhindert, dass ein umgebrochenes Menü breiter wird als die
     Seite – dann wird es stattdessen seitlich scrollbar. */
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  font-size: 13.5px;
  /* Passt das Menü nicht, wird es seitlich scrollbar statt die Seite zu
     verbreitern. Die Leiste zeigt dabei keinen Scrollbalken. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.kopf__nav::-webkit-scrollbar { display: none; }

.kopf__nav a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--weiss);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.kopf__nav a:hover { border-bottom-color: #55585b; }
.kopf__nav a.ist-aktiv { border-bottom-color: var(--hivis); }

@media (max-width: 1220px) {
  .kopf__nav { font-size: 13px; }
  .kopf__nav a, .kopf__nav .ohne-link { padding: 0 9px; }
}


/* ---------- Pfadleiste --------------------------------------------------- */

.pfadleiste { background: var(--weiss); border-bottom: 1px solid var(--line); }

.pfadleiste__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 18px var(--rand);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
}

.pfadleiste a {
  color: #9a9d9f;
  text-decoration: none;
}

.pfadleiste a:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.pfadleiste__pfeil { color: #c2c4c5; font-size: 15px; }

.pfadleiste__hier {
  color: var(--ink);
  font-weight: 600;
}

/* Punkte ohne hinterlegten Link */

.ohne-link { color: #6f7376; cursor: default; }
.kopf__nav .ohne-link {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 14px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

/* ---------- Filterleiste ----------------------------------------------- */

.filter {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 20px var(--rand);
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--karte);
}

.filter__gruppe { display: flex; flex-direction: column; gap: 5px; }

.filter__gruppe label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

.filter select {
  font-family: var(--body);
  font-size: 15px;
  padding: 9px 12px;
  background: var(--weiss);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  min-width: 190px;
}

.filter__reset {
  font-size: 14px;
  color: var(--steel);
}

.trefferzeile {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 22px var(--rand) 6px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}

.trefferzeile__zahl { color: var(--ink); font-weight: 600; }

/* ---------- Liste: eine Maschine pro Reihe ------------------------------ */

.liste {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 4px var(--rand) 80px;
}

.reihe {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 300px;
  background: var(--karte);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.16s ease;
}

.reihe:hover { box-shadow: 0 3px 16px rgba(0, 0, 0, 0.10); }
.reihe:focus-visible { outline: 3px solid var(--hivis-tief); outline-offset: 3px; }
.reihe--reserviert { opacity: 0.8; }

/* Bild: vollständig sichtbar, unscharfer Rand füllt die Fläche */

.reihe__bild { display: block; padding: 10px; }

.bildrahmen {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
  background: var(--paper-2);
}

.bildrahmen__hintergrund {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.94);
  transform: scale(1.12);
}

.bildrahmen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mittlere Spalte: Etiketten oben, Datenzeile unten angeheftet */

.reihe__mitte {
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  min-width: 0;
}

.pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.pille {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 15px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  white-space: nowrap;
}

.pille--voll { background: var(--ink); color: var(--weiss); }
.pille--elektro { background: var(--hivis); border-color: var(--hivis); }
.pille--reserviert { border-color: var(--rot); color: var(--rot); }

.reihe__titel {
  display: block;
  margin: 0;
  font-family: var(--body);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.reihe:hover .reihe__titel { text-decoration: underline; text-underline-offset: 4px; }

.reihe__kurzdaten {
  display: block;
  margin-top: auto;
  padding-top: 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

/* Rechte Spalte: Preis oben, Seriennummer unten, kurze Trennlinie */

.reihe__abschluss {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
}

.reihe__abschluss::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--line);
}

.preiszeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }

.preis {
  font-family: var(--body);
  font-weight: 700;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.preis--anfrage { font-size: 20px; }

.preis__mwst {
  font-size: 14px;
  font-weight: 400;
  color: var(--steel);
}

.reihe__sn {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  color: var(--ink-2);
}

.reihe__sn svg { width: 17px; height: 17px; flex: none; color: var(--steel); }

/* ---------- Knöpfe ------------------------------------------------------ */

.btn {
  display: inline-block;
  text-align: center;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 11px 16px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover { background: var(--ink); color: var(--weiss); }

.btn--dunkel {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--weiss);
}
.btn--dunkel:hover { background: #000; border-color: #000; }

.btn--voll {
  background: var(--hivis);
  border-color: var(--hivis);
  color: var(--ink);
}
.btn--voll:hover { background: var(--ink); border-color: var(--ink); color: var(--weiss); }

.btn--geist { border-color: var(--line); color: var(--ink-2); }
.btn--geist:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--weiss); }

.btn--klein { padding: 9px 14px; font-size: 13px; }
.btn--gross { padding: 15px 26px; font-size: 16px; width: 100%; }

.leer {
  padding: 60px 0;
  text-align: center;
  color: var(--steel);
}

/* ---------- Produktseite (PDP) ------------------------------------------ */

.pfad {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 22px var(--rand) 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.pfad a { color: var(--steel); }

.pdp__kopf {
  background: var(--ink);
  color: var(--weiss);
  border-bottom: 1px solid #303336;
}

.pdp__kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 34px var(--rand) 26px;
}

.pdp__modell {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 58px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.pfad--pdp { padding: 0; max-width: none; color: #8d9195; }
.pfad--pdp a { color: #8d9195; }
.pfad--pdp a:hover { color: var(--hivis); }

.pdp {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 34px var(--rand) 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}


.pdp__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.pdp__kurzdaten {
  font-size: 15px;
  font-weight: 500;
  color: var(--akzent);
  margin: 0 0 4px;
}

/* Galerie */

.galerie { margin: 24px 0 10px; }

.bildrahmen--gross {
  aspect-ratio: 10 / 7;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.galerie__leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.galerie__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.galerie__thumbs::-webkit-scrollbar { display: none; }

.galerie__pfeil {
  flex: none;
  width: 30px;
  height: 62px;
  border: 1px solid var(--line);
  background: var(--weiss);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}

.galerie__pfeil:hover:not(:disabled) { background: var(--ink); color: var(--weiss); border-color: var(--ink); }
.galerie__pfeil:disabled { opacity: 0.3; cursor: default; }

.galerie__thumb {
  flex: 0 0 calc((100% - 5 * 8px) / 6);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--weiss);
  cursor: pointer;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
}

.galerie__thumb img { aspect-ratio: 10 / 7; object-fit: contain; width: 100%; background: var(--paper-2); }
.galerie__thumb:hover { border-color: var(--steel); }
.galerie__thumb.ist-aktiv { border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--hivis); }

.pdp__disclaimer {
  font-size: 12px;
  color: var(--steel);
  margin: 0 0 26px;
}

.pdp__beschreibung {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 10px;
}

.pdp__abschnitt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}

/* Datentabelle */

.datentabelle { margin: 0; }

.datentabelle__zeile {
  display: grid;
  grid-template-columns: minmax(200px, 34%) 1fr;
  gap: 16px;
  padding: 11px 0;
}

.datentabelle dt {
  font-size: 15px;
  color: var(--ink-2);
}

.datentabelle dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.datentabelle__einheit { color: var(--steel); font-weight: 400; }

/* Ausstattung */

.ausstattung {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 20px;
  font-size: 15px;
}

.ausstattung li { padding-left: 18px; position: relative; }

.ausstattung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--hivis-tief);
}

/* Ansprechpartner */

.vertrieb {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.vertrieb__person {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--weiss);
  padding: 16px;
}

.vertrieb__person img { width: 76px; height: 76px; object-fit: cover; flex: none; }

.vertrieb__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}

.vertrieb__rolle {
  font-size: 13px;
  color: var(--steel);
  margin: 2px 0 8px;
}

.vertrieb__kontakt {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0;
  word-break: break-word;
}

/* Kaufbox rechts */

.kaufbox {
  background: transparent;
  padding: 0;
}

.kaufbox__standort {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 8px;
}

.kaufbox__titel {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.kaufbox__zeile {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 4px;
}

.kaufbox__preisblock { margin: 26px 0 20px; }

.kaufbox__preiszeile {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}



.kaufbox__waehrung {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--steel);
  margin: 0 0 4px;
}

.kaufbox__preis {
  font-family: var(--body);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.kaufbox__preis--anfrage { font-size: 24px; }

.kaufbox__mwst { font-size: 14px; color: var(--steel); }

.kaufbox__titel {
  font-family: var(--body);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.kaufbox__zeile { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0 0 6px; }

.kaufbox__sn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
  margin: 20px 0 0;
}

.kaufbox__sn svg { width: 16px; height: 16px; flex: none; color: var(--steel); }

.kaufbox__text { font-size: 14.5px; color: var(--ink-2); margin: 18px 0 0; }

.kaufbox__aktionen { display: grid; gap: 10px; margin-top: 22px; }

.btn--breit { width: 100%; padding: 13px 16px; }

.kaufbox__meta {
  margin: 20px 0 0;
  border-top: 1px solid var(--line);
}

.kaufbox__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.kaufbox__meta dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

.kaufbox__meta dd { margin: 0; font-family: var(--mono); font-size: 13px; }

.kaufbox__hinweis {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--paper-2);
  border-left: 4px solid var(--hivis);
  font-size: 13px;
}

/* Auf Formularseiten weiter genutzt */

.detail__titel {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* ---------- Ähnliche Maschinen ------------------------------------------ */

.aehnlich {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand) 80px;
  border-top: 1px solid var(--line);
}

.aehnlich__gitter {
  display: grid;
  /* auto-fill statt auto-fit: bei nur einer Karte bleibt die Spaltenbreite
     erhalten, statt dass die Karte sich über die ganze Zeile zieht. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}

.karte { text-decoration: none; display: block; }
.karte .bildrahmen { aspect-ratio: 10 / 7; border: 1px solid var(--line); }

.karte__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  margin: 12px 0 3px;
}

.karte__daten,
.karte__preis {
  font-family: var(--mono);
  font-size: 13px;
  margin: 0;
}

.karte__daten { color: var(--steel); }
.karte__preis { margin-top: 5px; font-weight: 600; }

/* ---------- Formularseiten ---------------------------------------------- */

.formularseite {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 26px var(--rand) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.formularseite__intro {
  max-width: 54ch;
  color: var(--ink-2);
  margin: 0 0 26px;
}

.form fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 26px;
  padding: 20px 0 0;
}

.form legend {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 0 12px 0 0;
}

.feld { margin-bottom: 18px; }

.feld label,
.feld__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.feld__optional {
  font-weight: 400;
  color: var(--steel);
  font-size: 13px;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  padding: 11px 13px;
  background: var(--weiss);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
}

.feld textarea { resize: vertical; }

.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: var(--rot);
  background: #fdf6f5;
}

.feld__fehler {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--rot);
}

.feld--paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.feld--plz { grid-template-columns: 140px 1fr; }

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.slot { position: relative; margin: 0; }
.slot input { position: absolute; opacity: 0; }

.slot span {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  padding: 11px 6px;
  border: 1px solid var(--line);
  background: var(--weiss);
  cursor: pointer;
}

.slot input:checked + span {
  background: var(--hivis);
  border-color: var(--ink);
  font-weight: 600;
}

.slot input:focus-visible + span { outline: 3px solid var(--hivis-tief); outline-offset: 2px; }

.wahl { display: grid; gap: 10px; margin-bottom: 18px; }

.wahl__option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--weiss);
  cursor: pointer;
}

.wahl__option:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.wahl__option strong { display: block; font-size: 15px; }
.wahl__option small { display: block; color: var(--steel); font-size: 13px; }
.wahl__option input { margin-top: 4px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { margin-top: 4px; }
.feld--check { margin: 22px 0; }

.klein { font-size: 13px; color: var(--steel); margin: 12px 0 0; }

.meldung {
  padding: 14px 16px;
  margin-bottom: 22px;
  border-left: 4px solid var(--rot);
  background: #f8ecea;
  font-size: 14px;
}

.meldung p { margin: 0; }

/* Seitenspalte */

.formularseite__seite {
  border: 1px solid var(--line);
  background: var(--weiss);
  padding: 20px;
  position: sticky;
  top: 96px;
}

.aside__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 12px;
}

.formularseite__seite .bildrahmen {
  aspect-ratio: 10 / 7;
  border: 1px solid var(--line);
}

.aside__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  margin: 14px 0 10px;
}

.aside__preis {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  margin: 14px 0 10px;
}

.aside__link { font-size: 14px; color: var(--steel); }
.aside__klein { font-size: 12px; color: var(--steel); margin: 10px 0 0; }

.summe {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 14px;
}

.summe__zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.summe__zeile--gesamt {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 600;
  font-size: 17px;
}

/* ---------- Quittung / 404 ---------------------------------------------- */

.quittung {
  max-width: 720px;
  margin: 0 auto;
  padding: 70px var(--rand) 90px;
}

.quittung__label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--hivis);
  padding: 5px 11px;
  margin: 0 0 18px;
}

.quittung__titel {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 26px;
}

.quittung__daten {
  margin: 0 0 26px;
  border-top: 1px solid var(--line);
}

.quittung__daten > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.quittung__daten dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}

.quittung__daten dd { margin: 0; font-family: var(--mono); font-size: 15px; }

.quittung__text { color: var(--ink-2); margin: 0 0 26px; }

.quittung .aktionen { flex-direction: row; flex-wrap: wrap; }

/* ---------- Fuss -------------------------------------------------------- */

.fuss {
  background: #1a1a1a;
  color: var(--weiss);
  font-size: 15px;
}

.fuss__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 74px var(--rand) 34px;
}

.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.fuss__titel {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--weiss);
  margin: 0 0 22px;
}

.fuss__spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss__spalte li { margin-bottom: 12px; }

.fuss a {
  color: #e4e5e6;
  text-decoration: none;
}

.fuss a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; }
.fuss .ohne-link { color: #7c8082; }

/* Soziale Netzwerke */

.fuss__social {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin: 64px 0 40px;
}

.fuss__social a,
.fuss__social > .ohne-link {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--weiss);
  color: #1a1a1a;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

.fuss__social > .ohne-link { background: #6a6e70; color: #1a1a1a; }
.fuss__social a:hover { background: var(--hivis); text-decoration: none; }
.fuss__social img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }

/* Untere Zeile */

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

.fuss__rechtliches { display: flex; flex-wrap: wrap; gap: 26px; font-size: 14px; }

.fuss__copyright {
  margin: 0;
  font-size: 13px;
  color: #b9bcbe;
}

/* ---------- Responsiv ---------------------------------------------------- */

@media (max-width: 1000px) {
  .reihe { grid-template-columns: 260px minmax(0, 1fr); }
  .reihe__abschluss {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 22px;
  }
  .reihe__abschluss .aktionen { flex-direction: row; margin-top: 0; }
  .pdp { grid-template-columns: 1fr; gap: 32px; }
  .kaufbox { position: static; order: -1; }
  .standort { grid-template-columns: 1fr; }
  .formularseite { grid-template-columns: 1fr; gap: 32px; }
  .formularseite__seite { position: static; }
  .fuss__spalten { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 680px) {
  :root { --rand: 16px; }
  .reihe { grid-template-columns: 1fr; }
  .reihe__mitte { padding: 20px 18px; }
  .reihe__abschluss { padding: 18px; gap: 10px; }
  .reihe__abschluss::before { left: 18px; right: 18px; }
  .reihe__titel { font-size: 19px; }
  .pillen { margin-bottom: 14px; }
  .reihe__kurzdaten { padding-top: 16px; font-size: 14px; }
  .preis { font-size: 25px; }
  .daten > div { padding-right: 14px; margin-right: 14px; }
  .galerie__thumb { flex-basis: calc((100% - 2 * 8px) / 3); }
  .datentabelle__zeile { grid-template-columns: 1fr; gap: 2px; }
  .vertrieb__person { flex-direction: column; }
  .feld--paar, .feld--plz { grid-template-columns: 1fr; }
  .quittung__daten > div { grid-template-columns: 1fr; gap: 2px; }
  .fuss__spalten { grid-template-columns: 1fr; gap: 30px; }
  .fuss__innen { padding: 48px var(--rand) 28px; }
  .fuss__social { justify-content: flex-start; margin: 40px 0 28px; }
  .fuss__unten { flex-direction: column; align-items: flex-start; gap: 16px; }
  .kopf__nav { justify-content: flex-start; }
  .pfadleiste__innen { padding: 13px var(--rand); font-size: 13.5px; gap: 8px; }
}

/* Ab hier passt das Menü nicht mehr neben das Logo und steht in einer
   eigenen Zeile darunter – linksbündig und notfalls seitlich scrollbar. */
@media (max-width: 1170px) {
  .kopf__leiste { column-gap: 16px; padding-top: 12px; min-height: 0; }
  .kopf__nav { flex: 1 1 100%; margin: 6px 0 0; }
}

@media (max-width: 900px) {
  .kopf__nav { font-size: 13px; gap: 0; }
  .kopf__nav a, .kopf__nav .ohne-link { padding: 9px 10px; }
}

@media (max-width: 460px) {
  /* !important, weil die Höhe als style-Attribut im HTML steht (LOGO_HOEHE) */
  .marke__logo { height: 26px !important; max-width: 140px; }
  .kopf__leiste { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.leer p { margin: 0 0 16px; }
.leer .btn { margin: 0 4px; }

/* ---------- Galerie: Bilder vollständig zeigen -------------------------- */




.galerie__thumb img { object-fit: contain; background: var(--paper-2); }

/* ---------- Zahlungshinweis im Checkout --------------------------------- */

.zahlungshinweis {
  background: var(--weiss);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  padding: 14px 16px;
  font-size: 14.5px;
  margin: 0;
}

/* ---------- Uebergabe im Checkout --------------------------------------- */

.uebergabe {
  background: var(--karte);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  padding: 18px 20px 4px;
  margin-bottom: 4px;
}

.uebergabe .feld:last-child { margin-bottom: 18px; }
.uebergabe .klein { margin-bottom: 0; }

.uebergabe--telefon { padding-bottom: 18px; border-left-color: var(--hivis); }
.uebergabe__satz { font-size: 14.5px; color: var(--ink-2); margin: 0 0 12px; }
.uebergabe__satz:last-child { margin-bottom: 0; }

.check--breit {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.uebergabe__felder { margin-bottom: 4px; }

/* ---------- Wie es weitergeht (Bestellbestaetigung) --------------------- */

.naechste {
  border: 1px solid var(--line);
  border-top: 4px solid var(--hivis);
  background: var(--weiss);
  padding: 22px 24px 6px;
  margin: 0 0 26px;
}

.naechste__titel {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 16px;
}

.naechste__liste {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
}

.naechste__liste li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 18px 42px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.naechste__liste li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--weiss);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}

.naechste__liste strong { color: var(--ink); }
.naechste__mail { font-family: var(--mono); font-size: 13.5px; }

@media (max-width: 640px) {
  .uebergabe { padding: 14px 14px 4px; }
  .naechste { padding: 18px 16px 4px; }
}

/* ---------- Ablauf des Telefontermins (Seitenspalte) -------------------- */

.ablauf {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.ablauf li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}

.ablauf li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 8px;
  height: 2px;
  background: var(--hivis-tief);
}

/* ---------- Gewährleistungszusage --------------------------------------- */

.zusage {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  padding: 11px 13px;
  background: var(--karte);
  border-left: 3px solid var(--hivis-tief);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}

.zusage svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--hivis-tief); }
.zusage strong { color: var(--ink); }

/* ---------- Rechtsseite (Impressum) ------------------------------------- */

.rechtsseite {
  max-width: 760px;
  margin: 0 auto;
  padding: 46px var(--rand) 90px;
}

.rechtsseite__kopf {
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 3px solid var(--ink);
}

.rechtsseite__label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 10px;
}

.rechtsseite__titel {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 52px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 14px;
}

.rechtsseite__intro { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 56ch; }

.rechtsseite__warnung {
  background: #fdf3d8;
  border-left: 4px solid var(--hivis);
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 34px;
}

/* Anbieterkasten – die Kernangabe, deshalb hervorgehoben */
.anbieter {
  background: var(--ink);
  color: var(--weiss);
  padding: 26px 28px;
  margin-bottom: 4px;
}

.anbieter__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hivis);
  margin: 0 0 12px;
}

.anbieter__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.15;
}

.anbieter__adresse { margin: 0; font-size: 15.5px; color: #c9cbcc; line-height: 1.55; }

.rechtsdaten { margin: 0 0 10px; }

.rechtsdaten > div {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.rechtsdaten dt {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: 2px;
}

.rechtsdaten dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.rechtsdaten__quelle { font-size: 12.5px; color: var(--steel); }

.rechtsseite__abschnitt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 42px 0 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}

.rechtsseite__text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 68ch;
}

.rechtsseite__text strong { color: var(--ink); }

.rechtsseite__fuss {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}

@media (max-width: 640px) {
  .rechtsseite { padding-top: 30px; }
  .rechtsdaten > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .anbieter { padding: 20px 18px; }
}