/* ==========================================================================
   Ersatzteilbereich – eigenständige Gestaltung im Stil von steenholdt.de
   ========================================================================== */

:root {
  /* Aus der Vorlage /de/maschinen/ ausgemessen, damit Kopf und Fuß
     im Ersatzteilbereich genauso aussehen wie auf dem Rest der Seite. */
  --leiste:       rgba(237, 240, 242, .4);   /* bg-secondary/40 */
  --leiste-linie: rgba(232, 232, 232, .7);   /* border-border/70 */
  --logo-hoehe:   96px;                      /* Fusslogo, .footer-logo */
  --breite:       1280px;                    /* max-w-7xl */
  --rand:         16px;                      /* px-4 */
  /* Farbwerte eins zu eins aus der Vorlage, dort als HSL hinterlegt:
     foreground 0 0% 9%, muted-foreground 210 8% 42%, border 0 0% 91%,
     accent 210 15% 92%, secondary 210 15% 94%, primary 210 65% 32%,
     card 0 0% 98%, radius .5rem */
  --tinte:        #171717;
  --tinte-leise:  #636b74;
  --linie:        #e8e8e8;
  --linie-leise:  #e8ebee;
  --flaeche:      #ffffff;
  --flaeche-sanft:#fafafa;
  --marke:        #1d5287;
  --marke-hell:   #2a6aa8;
  --warnung:      #8a5a00;
  --warnung-grund:#fff6e2;
  --gruen:        #14663f;
  --rot:          #a52020;
  --radius:       8px;   /* .5rem wie in der Vorlage */
  --schatten:     0 1px 2px rgba(15, 27, 45, .05), 0 6px 20px rgba(15, 27, 45, .06);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--tinte);
  font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  line-height: 1.2;
  margin: 0;
}

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

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ------------------------------------------------------------- Hinweisbalken */

.hinweisbalken {
  background: var(--warnung-grund);
  color: var(--warnung);
  border-bottom: 1px solid #f0dfb8;
  font-size: 13px;
  text-align: center;
  padding: 7px 16px;
}

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

/* ------------------------------------------------------------------
   Kopfleiste. Werte sind eins zu eins aus dem Stylesheet von
   steenholdt.de uebernommen (.site-header, .header-inner, .brand-logo,
   .top-nav, .langswitch, .right-cluster, .burger, .mobile-menu).
   ------------------------------------------------------------------ */
.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(237, 240, 242, .6);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(232, 232, 232, .7);
}

.kopf-inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kopf-marke { display: inline-flex; align-items: center; text-decoration: none; flex: none; }

.kopf-logo {
  height: 120px;
  width: auto;
  max-width: none;   /* sonst drueckt die allgemeine Bildregel das Logo zusammen */
  user-select: none;
}

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.kopf-nav a {
  padding: 6px 12px;
  border-radius: 4px;
  color: rgb(99, 107, 116);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background .12s, color .12s;
}

.kopf-nav a:hover { background: rgba(0, 0, 0, .03); color: rgb(31, 38, 46); }
.kopf-nav a.aktiv { background: rgb(237, 240, 242); color: rgb(31, 38, 46); border: 0; }

.kopf-rechts { display: flex; align-items: center; gap: 8px; flex: none; }

/* Sprachwahl und Anfragekorb stehen uebereinander, nicht nebeneinander.
   Rechts ausgerichtet, damit beide Kanten eine Linie bilden. Der Menueknopf
   bleibt daneben.
   Wichtig: nur die Sprachwahl zaehlt zur Hoehe des Stapels, damit sie wie das
   Menue mittig in der Leiste sitzt. Der Anfragekorb haengt darunter und wird
   deshalb aus dem Fluss genommen, sonst wuerde er die Sprachwahl nach oben
   schieben. */
.kopf-stapel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.kopf-stapel .korb-knopf {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.sprachwahl {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 1px solid rgb(232, 232, 232);
  border-radius: 4px;
}

.sprachwahl a,
.sprachwahl .noch-nicht {
  padding: 4px 8px;
  border-radius: 0;
  color: rgb(99, 107, 116);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.333;
  transition: color .12s;
}

.sprachwahl a:hover { color: rgb(23, 23, 23); }
.sprachwahl a.aktiv { background: transparent; border: 0; color: rgb(23, 23, 23); }
.sprachwahl .noch-nicht { color: #b6bcc3; cursor: default; }
.sprachwahl .strich { color: rgb(232, 232, 232); user-select: none; font-size: 16px; line-height: 1; }

/* Menueknopf, erscheint erst unter 900 Pixel. */
.balkenknopf {
  display: none;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px;
  cursor: pointer;
  margin-right: -8px;
  align-items: center;
  justify-content: center;
  color: rgb(31, 38, 46);
}

.balkenknopf svg { width: 20px; height: 20px; }

/* Klappmenue, oeffnet unter der Leiste. */
.klappmenue {
  display: none;
  background: #ffffff;
  border-top: 1px solid rgba(232, 232, 232, .7);
  padding: 0 4px;
}

.klappmenue.offen { display: block; }

.klappmenue > a {
  display: block;
  padding: 10px 12px;
  color: rgb(23, 23, 23);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .12s;
}

.klappmenue > a:hover { background: rgba(0, 0, 0, .03); }
.klappmenue > a.aktiv { background: rgb(237, 240, 242); color: rgb(31, 38, 46); }

.korb-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}

.korb-knopf:hover { background: rgba(232, 235, 238, .5); }

.korb-knopf svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.korb-zahl[hidden] { display: none; }

.korb-zahl {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--marke);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ Inhalt */

/* Abstand bis zur ersten Ueberschrift wie auf steenholdt.de: dort liegen
   zwischen Kopfunterkante und der Zeile "Gebrauchte Druckmaschinen mit
   Charakter." 80 Pixel, unter 900 Pixel Breite 56. */
.inhalt { padding-block: 80px 56px; }

.seitentitel { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.75px; }

.vorspann {
  color: var(--tinte-leise);
  max-width: 62ch;
  margin: 10px 0 0;
}

.brotkrumen {
  font-size: 13px;
  color: var(--tinte-leise);
  margin: 0 0 14px;
}

.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen span { margin: 0 6px; }

.abschnitt { font-size: 21px; font-weight: 700; margin: 36px 0 14px; }

/* ------------------------------------------------------------------- Suche */

.suche {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin: 22px 0 8px;
  flex-wrap: wrap;
}

.suche-feld {
  position: relative;
  flex: 1 1 340px;
  display: flex;
  align-items: center;
}

.suche-feld svg {
  position: absolute;
  left: 14px;
  width: 19px; height: 19px;
  fill: none; stroke: var(--tinte-leise);
  stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}

.suche-feld input {
  width: 100%;
  padding: 13px 15px 13px 43px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--flaeche);
  font: inherit;
  font-size: 16px;
  font-size: 15px;
  color: inherit;
}

.suche-feld input:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px rgba(23, 58, 107, .13);
}

.trefferzeile { color: var(--tinte-leise); font-size: 14px; margin: 14px 0 0; }

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 20px;
  border-radius: 9px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.knopf-voll { background: var(--marke); color: #fff; }
.knopf-voll:hover { background: var(--marke-hell); }
.knopf-voll:disabled { background: #94a2b8; cursor: default; }

.knopf-leer {
  background: var(--flaeche);
  border-color: var(--linie);
  color: var(--tinte);
}

.knopf-leer:hover { border-color: var(--marke); color: var(--marke); }

.knopf-klein { padding: 8px 13px; font-size: 13px; }
.knopf-gross { padding: 14px 26px; font-size: 15px; }

/* ------------------------------------------------------------------ Raster */

/* ------------------------------------------------------------------
   Artikelkarten. Aufbau, Masse und Schriftgrade sind aus dem
   Maschinenkatalog von steenholdt.de uebernommen, damit beide
   Uebersichten gleich aussehen: fuenf Karten je Reihe ab 1280 Pixel,
   Abstand 12, Bildseitenverhaeltnis 4 zu 3, Rahmen 1 Pixel, Radius 6.
   ------------------------------------------------------------------ */
.raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 640px)  { .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.karte {
  display: flex;
  flex-direction: column;
  background: var(--flaeche-sanft);
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.karte:hover {
  border-color: rgba(29, 82, 135, .6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.karte-bild {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(237, 240, 242, .6);
  overflow: hidden;
  text-decoration: none;
}

.karte-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.karte:hover .karte-bild img:not(.ersatzbild) { transform: scale(1.02); }

.kein-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--tinte-leise);
  font-size: 12px;
}

.karte-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px;
}

.karte-nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.4px;
  line-height: 15.6px;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.karte-titel {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 600;
  color: var(--tinte);
  /* Zwei Zeilen, dann Auslassung. Die Mindesthoehe haelt alle Karten
     einer Reihe gleich hoch, auch bei einzeiligen Bezeichnungen. */
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.karte-titel a { color: inherit; text-decoration: none; }

.karte-preis {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 232, 232, .6);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--tinte);
}

.karte-preis .betrag { font-weight: 600; white-space: nowrap; }
.karte-preis .zusatz { font-size: 12px; line-height: 16px; color: var(--tinte-leise); white-space: nowrap; }
.karte-preis .anfrage { font-size: 12px; line-height: 16px; color: var(--tinte-leise); }

.karte-fuss { margin-top: 8px; }

.karte-fuss .knopf {
  width: 100%;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.preis { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.preis-zusatz {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--tinte-leise);
  letter-spacing: 0;
}
.preis-anfrage { font-size: 14px; font-weight: 600; color: var(--tinte-leise); }

/* --------------------------------------------------------------- Blättern */

.blaettern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.blaettern-stand { font-size: 14px; color: var(--tinte-leise); }

.leer { color: var(--tinte-leise); margin-top: 26px; }

/* ----------------------------------------------------------------- Detail */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 34px;
  align-items: start;
}

.detail-buehne {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-buehne img { width: 100%; height: 100%; object-fit: contain; }
.detail-ohne-bild { background: var(--flaeche-sanft); }

/* Platzhalter fuer Artikel ohne Foto. Die Datei liegt im Verhaeltnis 4:3
   vor, genau wie die Bildflaeche, und fuellt sie darum vollstaendig aus.
   Zartes Blau mit weissem Zeichen, dadurch wirkt sie ruhig und wird nicht
   mit einem Teilefoto verwechselt. */
.karte-bild img.ersatzbild,
.detail-buehne img.ersatzbild {
  width: 100%;
  height: 100%;
  /* Beide Rahmen sind Flex mit mittiger Ausrichtung, ihre Hoehe stammt aus
     aspect-ratio. Eine Hoehe in Prozent daran aufzuloesen, gelingt nicht in
     jedem Browser, Safari ist da eigen. Darum zwei Sicherungen: stretch
     laesst das Bild den Rahmen ausfuellen, und das Seitenverhaeltnis am Bild
     selbst ergibt zusammen mit der Breite genau die Rahmenhoehe, auch wenn
     die Prozentangabe ins Leere greift. */
  align-self: stretch;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Kein Innenabstand. Hier stand einmal padding: 12%, aus der Zeit, als der
     Platzhalter ein freistehendes Zeichen war und nicht beschnitten werden
     durfte. Mit box-sizing: border-box hat dieser Abstand die Bildflaeche
     verkleinert, deshalb blieb ein heller Rand um den Platzhalter stehen und
     das Bild wurde zusaetzlich oben und unten angeschnitten. */
  padding: 0;
}

.preis-hinweis {
  /* Unten Luft, sonst klebt das Feld fuer die Menge am Hinweis. */
  margin: 8px 0 20px;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinte-leise);
}

.detail-vorschau {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.detail-vorschau button {
  padding: 0;
  border: 2px solid var(--linie);
  border-radius: 7px;
  background: var(--flaeche);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
}

.detail-vorschau button.aktiv { border-color: var(--marke); }
.detail-vorschau img { width: 100%; height: 100%; object-fit: cover; }

.detail-titel { font-size: 27px; font-weight: 800; margin: 4px 0 14px; }

.detail-preis {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: 18px;
}

.detail-preis .preis-zusatz { font-size: 12px; margin-top: 3px; }
.detail-preis.preis-anfrage { font-size: 19px; }

.detail-aktion {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.menge { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--tinte-leise); }

.menge input,
.korbtabelle input[type="number"] {
  width: 84px;
  padding: 11px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
}

.detail-block { border-top: 1px solid var(--linie); margin-top: 26px; padding-top: 20px; }
.detail-block h2 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }

.vorformatiert { margin: 0; color: #33415a; }

.daten { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 20px; margin: 0; }
.daten dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-leise); }
.daten dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------ Anfragekorb */

.korbtabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 20px;
}

.korbtabelle th,
.korbtabelle td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--linie-leise);
  text-align: left;
  vertical-align: middle;
}

.korbtabelle thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinte-leise);
  background: var(--flaeche-sanft);
}

.korbtabelle tfoot th,
.korbtabelle tfoot td {
  border-bottom: none;
  background: var(--flaeche-sanft);
  font-weight: 800;
}

.korbtabelle .rechts { text-align: right; }
.korbtabelle .mitte  { text-align: center; }
.korbtabelle input[type="number"] { width: 74px; text-align: center; }

.korb-nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--tinte-leise);
}

.korb-bez { font-weight: 600; }

.entfernen {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte-leise);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.entfernen:hover { border-color: var(--rot); color: var(--rot); }

.hinweis { font-size: 13px; color: var(--warnung); margin-top: 12px; }

.nurlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -------------------------------------------------------------- Formular */

.anfrageform {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 760px;
}

.anfrageform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }

.anfrageform input[type="text"],
.anfrageform input[type="email"],
.anfrageform input[type="tel"],
.anfrageform input[type="number"],
.anfrageform textarea {
  padding: 11px 13px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--tinte);
  background: var(--flaeche);
}

.anfrageform input:focus,
.anfrageform textarea:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px rgba(23, 58, 107, .13);
}

.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.pflicht { color: var(--rot); }

.anfrageform .feldname { display: block; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.anfrageform label.einwilligung {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--tinte-leise);
  line-height: 1.5;
}

.einwilligung input { margin-top: 3px; width: 17px; height: 17px; flex: none; }

.formfuss { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

.formmeldung { margin: 4px 0 0; font-size: 14px; color: var(--tinte-leise); }
.formmeldung.fehler { color: var(--rot); font-weight: 600; }

.erfolg {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gruen);
  border-radius: var(--radius);
  padding: 26px;
}

.erfolg h2 { font-size: 21px; font-weight: 800; color: var(--gruen); margin-bottom: 10px; }

/* ------------------------------------------------------------ Kurzmeldung */

.kurzmeldung {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 18px);
  background: var(--tinte);
  color: #fff;
  padding: 12px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(15, 27, 45, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 90;
}

.kurzmeldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

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

.fuss {
  margin-top: 64px;
  border-top: 1px solid var(--leiste-linie);
  background: var(--leiste);
  font-size: 14px;
}

.fuss-inhalt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-block: 32px;
  color: var(--tinte-leise);
}

.fuss-titel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--tinte-leise);
  margin-bottom: 8px;
}

/* Erste Spalte im Fuß: Logo und Leitsatz, wie auf den Maschinenseiten. */
.fuss-marke img { height: var(--logo-hoehe); width: auto; }

.fuss-spruch {
  margin: 16px 0 0;
  max-width: 320px;
  color: var(--tinte-leise);
}

/* Volle Zeile über der Schlusszeile, für die Hinweise zu Preisen. */
.fuss-hinweise {
  border-top: 1px solid rgba(232, 232, 232, .6);
  color: var(--tinte-leise);
}

.fuss-hinweise .huelle { padding-block: 24px; }

.fuss address { font-style: normal; }
.fuss a { color: var(--tinte); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

/* Schlusszeile: Urheberhinweis links, Impressum und Datenschutz rechts. */
.fuss-schluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fuss-recht { display: flex; gap: 16px; }

.fuss-zeile a { font-size: 12px; line-height: 16px; color: var(--tinte-leise); }

.fuss-zeile {
  border-top: 1px solid rgba(232, 232, 232, .6);
  font-size: 12px;
  line-height: 16px;
  color: var(--tinte-leise);
}

.fuss-zeile .huelle { padding-block: 16px; }

/* --------------------------------------------------------------- Schmal */

@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; gap: 24px; }
  .fuss-inhalt { grid-template-columns: 1fr; gap: 20px; }
}

/* steenholdt.de wechselt bei 900 Pixel auf den Menueknopf. */
@media (max-width: 900px) {
  .kopf-inhalt { height: 112px; }
  .kopf-logo { height: 96px; }
  .kopf-nav { display: none; }
  .balkenknopf { display: inline-flex; }
  /* Nur noch das Zeichen, sonst bliebe fuer Logo und Sprachwahl kein Platz. */
  .korb-wort { display: none; }
  .korb-knopf { padding: 5px 7px; }
  .inhalt { padding-block: 56px 56px; }
}

@media (max-width: 640px) {
  .seitentitel { font-size: 25px; }
  .detail-titel { font-size: 22px; }
  .feldpaar { grid-template-columns: 1fr; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .karte-text { padding: 12px; }
  .korbtabelle thead { display: none; }
  .korbtabelle,
  .korbtabelle tbody,
  .korbtabelle tfoot,
  .korbtabelle tr,
  .korbtabelle td,
  .korbtabelle th { display: block; width: 100%; }
  .korbtabelle tbody tr { border-bottom: 1px solid var(--linie); padding: 10px 0; position: relative; }
  .korbtabelle td { border-bottom: none; padding: 4px 15px; text-align: left; }
  .korbtabelle td.rechts,
  .korbtabelle td.mitte { text-align: left; }
  .korbtabelle td[data-titel] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .korbtabelle td[data-titel]::before {
    content: attr(data-titel);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tinte-leise);
    font-weight: 700;
  }
  .korbtabelle td[data-titel="Summe"] { font-weight: 800; }
  .korbtabelle tbody td:last-child { position: absolute; top: 10px; right: 10px; padding: 0; width: auto; }
  .korbtabelle tbody td:first-child { padding-right: 54px; }
  .korbtabelle tfoot th { text-align: left; padding-bottom: 2px; }
}

/* Formularblock der Serviceseite. Bewusst eine eigene Klasse: der Block der
   Suchanfrage stellt sein erstes Feldpaar auf 2 zu 1, das passt hier nicht. */
.sv-anfrage {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(23, 58, 107, .14);
}
.sv-anfrage .vorspann { max-width: 46rem; font-size: 15px; line-height: 1.55; }
.sv-anfrage .anfrageform { max-width: 46rem; }

/* Anfrage für Teile, die nicht im Katalog stehen. */
.suchanfrage {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(23, 58, 107, .14);
}
.suchanfrage .vorspann { max-width: 46rem; }
.suchanfrage .anfrageform { max-width: 46rem; }
/* Die Menge braucht nicht die halbe Zeile. */
.suchanfrage .feldpaar:first-of-type { grid-template-columns: 2fr 1fr; }

/* Hinweis unter der Suche und kleine Erläuterung im Suchformular */
.suchhinweis {
  margin: -.4rem 0 1.6rem;
  font-size: .95rem;
  color: #5b6880;
}
.suchhinweis a {
  color: #173a6b;
  font-weight: 600;
}
.suchanfrage .feldhinweis {
  margin: -.55rem 0 .2rem;
  font-size: .88rem;
  color: #6b7891;
}

/* ------------------------------------------------------ Serviceseite */

/* Oben stehen zwei Knoepfe nebeneinander, am Handy untereinander. */
.sv-oben { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* Der Ersatzteilknopf im Zartrot der Startseite, damit er dort und hier
   gleich aussieht. Die Schrift bleibt schwarz wie bei den Nachbarknoepfen. */
.knopf-teile {
  background: #e59c96;
  border: 1px solid #d98a84;
  color: var(--tinte);
}
.knopf-teile:hover { background: #dd8b84; border-color: #cf7b74; color: var(--tinte); }

.anfrageform select {
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  width: 100%;
}
.anfrageform select:focus { outline: 2px solid var(--marke); outline-offset: 1px; }

.sv-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 30px;
}

.sv-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-sanft);
  padding: 20px 20px 22px;
}

.sv-karte-titel { font-size: 19px; font-weight: 700; }

.sv-karte-text { margin: 10px 0 0; color: var(--tinte-leise); }

.sv-karte-fuss { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* Weg zurueck von der Anfrageseite zur Serviceseite. */
.sv-zurueck { margin: 0 0 10px; font-size: 15px; }
.sv-zurueck a { color: var(--marke); text-decoration: none; }
.sv-zurueck a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .sv-raster { grid-template-columns: 1fr; gap: 14px; }
}