/* Interaktive Ersatzteillisten - Gestaltung
   Farben und Schrift nach dem Online-Shop stein-dinse.com */

/* Open Sans liegt hier im Verzeichnis, wird also NICHT von Google geladen.
   Die Dateien stammen aus dem Shop (stein-dinse.com/fonts/), wo dieselbe
   Schrift bereits im Einsatz ist. Es gibt dort nur den regulaeren Schnitt -
   fette Schrift erzeugt der Browser daraus, genau wie im Shop. */
@font-face {
  font-family: "Open Sans";
  src: url("OpenSans-Regular.woff2") format("woff2"),
       url("OpenSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --gruen:        #00963F;  /* Zierfarbe: Linien, Raender, grosse Ueberschriften */
  --gruen-dunkel: #007A33;  /* Flaechen mit Text - erreicht 5,5:1 gegen Weiss */
  --gruen-tief:   #00682b;  /* beim Ueberfahren */
  --rot:          #DB170E;
  --text:         #222;
  --text-leise:   #333;
  --grund:        #fff;
  --grund-leise:  #f7f8f9;
  --linie:        #ddd;
  --linie-kraeftig: #bbb;
  --zebra:        #fafafa;
  --markiert:     #fff6da;

  /* Rundungen wie im Online-Shop. Die Werte sind an stein-dinse.com
     abgemessen: .button und .inputField (Menge, "In den Warenkorb",
     "Zurueck zur Liste") laufen mit 4px, die Suchhuelle .quickSearch mit
     5px, kleine Schaltflaechen wie der Pfad oben und der Ansichtsumschalter
     mit 3px. */
  --rundung-klein: 3px;
  --rundung:       4px;
  --rundung-gross: 5px;
}

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

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
}

a { color: var(--gruen-dunkel); }

/* Sichtbarer Fokus auf allem Bedienbaren - Pflicht fuer die Tastaturbedienung */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
}

/* Nur fuer Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 10px 18px;
  z-index: 100;
}
.sprungmarke:focus { left: 8px; top: 8px; }

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

.kopf { border-bottom: 3px solid var(--gruen); }

/* Streifen ueber dem Seitenkopf, wenn die Seite gegen die Phoenix-Datenbank
   laeuft. Bewusst auffaellig: sonst sieht man der Seite nicht an, ob man den
   Pflegestand oder den Online-Stand vor sich hat. Erscheint nur intern. */
.interner-hinweis {
  margin: 0;
  padding: 7px 20px;
  background: #E8A200;
  color: #1c1400;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .2px;
}

.kopf-innen {
  max-width: 1800px;
  margin: 0 auto;
  padding: 12px 20px 0;
}

/* Erste Zeile: Firmenzeichen mit Slogan-Balken, der bis zum rechten Rand
   durchzieht - wie im Online-Shop.
   Die Grafik endet rechts mit einer schraegen Kante. Sie wird deshalb bei
   93,7 % ihrer Breite abgeschnitten (dort hat der Balken noch volle Hoehe),
   und die Flaeche daneben setzt ihn in derselben Farbe fort. Alle Masse
   stammen aus der Vermessung der Bilddatei:
   Balkenfarbe #21A542, Unterkante bei 49,38 % der Bildhoehe. */
.kopf-marke {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}

.kopf-logo {
  display: block;
  flex: 0 1 560px;
  min-width: 240px;
  overflow: hidden;
  line-height: 0;
}
.kopf-logo img {
  display: block;
  width: 107.2%;      /* 100 / 0.933 - schiebt die schraege Kante aus dem Bild */
  max-width: none;
  height: auto;
}

.kopf-balken { flex: 1 1 auto; position: relative; min-width: 0; }
.kopf-balken::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;         /* eine Haarlinie Ueberlappung gegen sichtbare Fugen */
  right: 0;
  height: 49.06%;     /* exakte Unterkante des Balkens an der Schnittstelle */
  background: #21A542;
}

/* Die Bedienelemente sitzen direkt an der Unterkante des gruenen Balkens,
   rechtsbuendig. Sie liegen damit in der Hoehe ueber der Kopfgrafik - dort
   ist rechts neben dem Firmenzeichen ohnehin nur weisse Flaeche.
   Der Wert 49.06% ist dieselbe Balkenunterkante wie oben. */
.kopf-leiste {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  padding: 10px 0;
  flex: 0 0 100%;     /* auf schmalen Schirmen eine eigene Zeile */
}

@media (min-width: 901px) {
  .kopf-leiste {
    position: absolute;
    top: 49.06%;
    right: 0;
    flex: none;
    padding: 9px 0 0;
    margin: 0;
  }

  /* Die Leiste ist absolut gesetzt und traegt nicht zur Hoehe bei -
     dieser Abstand haelt sie von der gruenen Trennlinie fern. */
  .kopf-innen { padding-bottom: 10px; }
}

.kopf-icon { display: block; height: 22px; width: auto; flex: none; }

.kopf-hotline { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.kopf-hotline-wort { display: block; color: var(--text-leise); }
.kopf-hotline a { font-weight: 700; font-size: 17px; text-decoration: none; color: var(--text); }

.kopf-sprachen { display: flex; align-items: center; gap: 2px; }
.kopf-sprachen .kopf-icon { margin-right: 5px; }
.kopf-sprachen a {
  padding: 5px 9px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text-leise);
  border: 1px solid transparent;
  border-radius: var(--rundung-klein);
}
.kopf-sprachen a:hover { border-color: var(--linie); }
.kopf-sprachen a.aktiv {
  background: var(--gruen-dunkel);
  color: #fff;
  font-weight: 600;
}

.kopf-shop { display: block; }
.kopf-shop img { display: block; width: 132px; height: auto; }
.kopf-shop:hover img { opacity: .85; }

/* --- Kopfzeile auf schmalen Schirmen

   Die Kopfgrafik behaelt die volle Breite: das Firmenzeichen links, der
   gruene Balken bis zum rechten Rand - genau wie am Rechner.

   Die Bedienleiste rueckt mit einem negativen Aussenabstand in die untere
   Haelfte der Grafik hinauf - genau wie am Rechner, wo sie an der Unterkante
   des gruenen Balkens haengt. Sie ueberlappt die Grafik dabei; rechts neben
   dem roten Schwung ist dort ohnehin nur weisse Flaeche.

   Der Abstand entspricht der unteren Haelfte der Grafik. Deren Hoehe steht
   fest, weil das Firmenzeichen in jedem Bereich eine feste Sollbreite hat:
   560 px bis 900 px, 210 px bis 700 px. Bei 1479:320 Seitenverhaeltnis und
   107,2 % Bildbreite sind das 130 px bzw. 49 px Hoehe, der Balken endet bei
   49,38 % davon.

   Absolut positionieren waere hier falsch: die Leiste traegt dann nichts
   mehr zur Hoehe bei, und die Hotline liefe unten aus dem Kopf heraus. Mit
   dem negativen Abstand bleibt alles im Fluss und die Hoehe stimmt von
   selbst.

   Sprachwahl und Shop-Verweis stehen zusammen in der ersten Zeile - sie
   gehoeren zur Bedienung und sollen unmittelbar unter dem Balken sichtbar
   sein. Die Hotline ist eine Angabe zum Nachlesen und darf in die zweite
   Zeile; flex-basis 100% schiebt sie dorthin, wo sie wieder unterhalb der
   Grafik liegt.

   gap: 0 hebt die 30 px der Grundregel auf - die wuerden sonst auch zwischen
   den beiden Zeilen stehen. */
@media (max-width: 900px) {
  .kopf-leiste {
    gap: 0;
    padding: 7px 0 0;
    margin-top: -66px;

    /* Ohne eigene Ebene malt der Browser die Kopfgrafik ueber die
       Schaltflaechen: bei nicht positionierten Elementen liegt der Inhalt
       des Bildes ueber den Hintergrundflaechen spaeterer Geschwister. */
    position: relative;
    z-index: 1;

    /* Die leere Flaeche der Leiste liegt ueber dem Firmenzeichen, das auf
       die Startseite verweist. So gehen Klicks dort hindurch. */
    pointer-events: none;
  }
  .kopf-sprachen, .kopf-shop, .kopf-hotline { pointer-events: auto; }

  .kopf-sprachen { order: 1; }
  .kopf-shop     { order: 2; margin-left: 18px; }
  .kopf-hotline  { order: 3; flex: 0 0 100%; padding: 9px 0 3px; }

  /* Einzeilig: Hoerer, Wort und Nummer nebeneinander. Der namenlose span
     um Wort und Nummer ist am Rechner ein Block und stellt beide
     untereinander - hier wird er zur Zeile.
     nowrap auf beiden Teilen: umbrechen wuerde genau das wieder aufloesen,
     wofuer die Zeile da ist. */
  .kopf-hotline > span {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  .kopf-hotline-wort,
  .kopf-hotline a { white-space: nowrap; }
}

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

.inhalt {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.einleitung {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  background: var(--grund-leise);
  border-left: 4px solid var(--gruen);
}
.einleitung-text { padding: 26px 30px; min-width: 0; }
.einleitung h1 {
  font-size: 30px;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: 0 0 12px;
}
.einleitung p {
  margin: 0;
  color: var(--text-leise);
  max-width: 65ch;
}
.einleitung-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.einleitung-schritte li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
}
.einleitung-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gruen-dunkel);
  color: #fff;
  font-size: 16px;
}
.einleitung-bild { position: relative; min-width: 0; overflow: hidden; }
.einleitung-bild img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hinweis { color: var(--text-leise); }

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

.suche {
  position: relative;
  display: flex;
  margin: 22px 0 18px;
  border: 2px solid var(--gruen-dunkel);
  border-radius: var(--rundung-gross);
}

.suche-feld {
  flex: 1;
  border: 0;
  /* Innenmass: 5px Huelle minus 2px Rahmen */
  border-radius: var(--rundung-klein) 0 0 var(--rundung-klein);
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  min-width: 0;
}
.suche-feld:focus { outline: none; }
.suche:focus-within { outline: 3px solid var(--rot); outline-offset: 2px; }

.suche-knopf {
  border: 0;
  border-radius: 0 var(--rundung-klein) var(--rundung-klein) 0;
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 12px 26px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.suche-knopf:hover { background: var(--gruen-tief); }

.suche-vorschlaege {
  position: absolute;
  top: 100%; left: -2px; right: -2px;
  background: var(--grund);
  border: 1px solid var(--linie-kraeftig);
  border-top: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  z-index: 20;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 0 0 var(--rundung-gross) var(--rundung-gross);
}

/* Steht die Vorschlagsliste offen, haengt sie unmittelbar unter der
   Suchleiste. Deren untere Ecken werden dann gerade, damit beide wie ein
   Stueck wirken. */
.suche:has(.suche-vorschlaege:not([hidden])) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.suche:has(.suche-vorschlaege:not([hidden])) .suche-feld { border-bottom-left-radius: 0; }
.suche:has(.suche-vorschlaege:not([hidden])) .suche-knopf { border-bottom-right-radius: 0; }

/* ---------------------------------------------------------------- Auswahl */

.auswahl {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--grund-leise);

  /* Gruen wie die Suchleiste: ohne sie ist die Auswahl der Einstieg in die
     Seite und darf das auch zeigen. */
  border: 2px solid var(--gruen-dunkel);
  border-radius: var(--rundung-gross);

  /* Den Abstand nach oben trug bisher die Suchleiste darueber. Ohne sie
     stiess die Auswahl direkt an die Einleitung. */
  margin: 22px 0 26px;
}

.auswahl-feld { display: flex; flex-direction: column; gap: 4px; }
.auswahl-feld-breit { flex: 1; min-width: 260px; }

/* Die Tafelauswahl steht nur da, wenn ein Modell gewaehlt ist. Sie darf
   mitwachsen, aber weniger stark als das Modellfeld - die Modellnamen
   sind laenger als "Tafel 12 - Kurbelgehaeuse". */
.auswahl-feld-tafel { flex: 0 1 300px; min-width: 220px; }

.auswahl-feld label { font-size: 13px; color: var(--text-leise); }

.auswahl-feld select {
  border: 2px solid var(--linie-kraeftig);
  border-radius: var(--rundung);
  background: var(--grund);
  padding: 9px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  min-width: 200px;
  width: 100%;
}
.auswahl-feld select:disabled { background: #eee; color: #767676; }

.auswahl-knopf {
  border: 2px solid var(--gruen-dunkel);
  border-radius: var(--rundung);
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 9px 22px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.auswahl-knopf:hover { background: var(--gruen-tief); }

/* Mit JavaScript wird beim Wechsel automatisch abgeschickt,
   dann braucht es den Knopf nicht mehr. */
.hat-js .auswahl-knopf { display: none; }

/* Volle Breite, damit der Hinweis in eine eigene Zeile unter die Felder rutscht. */
.auswahl-hinweis {
  flex: 1 0 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-leise);
}

/* ---------------------------------------------------------------- PDF */

.pdf { margin-top: 40px; border-top: 1px solid var(--linie); padding-top: 22px; }
.pdf h2 { font-size: 22px; margin: 0 0 8px; }
.pdf-text { margin: 0; font-size: 14px; color: var(--text-leise); max-width: 85ch; }

.pdf-liste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.pdf-kachel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--linie);
  padding: 10px 10px 18px;
}
.pdf-kachel:hover, .pdf-kachel:focus-visible { border-color: var(--gruen); }
.pdf-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--grund-leise);
}
.pdf-bild img { display: block; max-width: 100%; width: auto; height: 158px; object-fit: contain; }
.pdf-ersatzbild { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--gruen-dunkel); }
.pdf-ersatzbild > span { font-size: 16px; font-weight: 600; }
.pdf-name { font-weight: 600; font-size: 17px; margin: 0 8px 8px; }
.pdf-aktion { display: block; font-size: 13px; color: var(--gruen-dunkel); margin: auto 8px 0; }
.pdf-aktion > span { margin-left: 4px; }
.pdf-kachel:hover .pdf-aktion { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .pdf-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pdf-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 380px) {
  .pdf-liste { grid-template-columns: minmax(0, 1fr); }
}

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

.fuss {
  margin-top: 50px;
  border-top: 2px solid var(--gruen);
  background: var(--grund-leise);
  color: var(--text);
  padding: 28px 20px 24px;
}
.fuss-innen { max-width: 1760px; margin: 0 auto; }
.fuss-markenzeile, .fuss-abschluss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.fuss a { text-underline-offset: 3px; }
.fuss-marke { color: var(--text); font-size: 22px; font-weight: 700; text-decoration: none; }
.fuss-slogan { color: var(--text-leise); font-size: 13px; margin: 4px 0 0; }
.fuss-shop { font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.fuss-shop span { margin-left: 8px; }
.fuss-verweise { display: flex; gap: 8px 24px; flex-wrap: wrap; margin: 22px 0; }
.fuss-verweise a { color: var(--text); font-size: 14px; text-decoration: none; padding: 5px 0; }
.fuss a:hover { color: var(--gruen-dunkel); text-decoration: underline; }
.fuss-abschluss { border-top: 1px solid var(--linie); padding-top: 16px; }
.fuss-mwst, .fuss-copy { font-size: 12px; color: var(--text-leise); margin: 0; }
.fuss-copy a { color: inherit; text-decoration: none; }

@media (max-width: 600px) {
  .fuss-markenzeile, .fuss-abschluss { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fuss-verweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 18px 0; }
  .fuss-verweise a { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- Umbrueche */

@media (max-width: 900px) {
  .einleitung { grid-template-columns: minmax(0, 1fr); }
  .einleitung-bild { display: none; }
  .auswahl-feld select { min-width: 0; }
}

@media (max-width: 600px) {
  .einleitung-text { padding: 20px 18px; }
  .einleitung-schritte { flex-direction: column; gap: 10px; margin: 18px 0 0; }
  .einleitung h1 { font-size: 24px; }
  .auswahl { flex-direction: column; align-items: stretch; }

  /* Untereinander zaehlt flex-basis als Hoehe, nicht als Breite - die 300px
     der Tafelauswahl wuerden das Feld sonst 300px hoch machen. */
  .auswahl-feld-tafel { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------- Tafelraster */

.modellkopf { margin-bottom: 18px; }
.modellkopf h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.3px; }
.modellkopf-bj, .modellkopf-anzahl { margin: 0; font-size: 14px; color: var(--text-leise); }

.tafelraster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.tafelkachel a {
  display: block;
  border: 1px solid var(--linie);
  padding: 10px;
  text-decoration: none;
  color: var(--text);
  background: var(--grund);
}
.tafelkachel a:hover { border-color: var(--gruen); }

.tafelkachel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--grund-leise);
}

.tafelkachel-nr {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

/* Steht nur da, wo sie gepflegt ist - deshalb bleibt die Tafelnummer die
   Ueberschrift und die Bezeichnung tritt darunter zurueck. Sie darf
   umbrechen; die Kacheln einer Zeile sind im Raster ohnehin gleich hoch. */
.tafelkachel-bez {
  display: block;
  margin-top: 2px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-leise);
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- Tafelansicht */

.tafelkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;

  /* Die Blaetter-Verweise springen auf diesen Kopf (#tafel). Der Abstand
     haelt ihn von der oberen Kante frei, sonst klebt die Ueberschrift
     unmittelbar am Rand. */
  scroll-margin-top: 14px;
}
.tafelkopf h1 { font-size: 24px; margin: 0; letter-spacing: -0.3px; }
.tafelkopf p { margin: 2px 0 0; color: var(--text-leise); font-size: 15px; }
.tafelkopf-blaettern { display: flex; gap: 8px; }

.knopf {
  display: inline-block;
  border: 2px solid var(--gruen-dunkel);
  border-radius: var(--rundung);
  color: var(--gruen-dunkel);
  background: var(--grund);
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--gruen-dunkel); color: #fff; }
.knopf-aus {
  border-color: var(--linie);
  color: #767676;
  cursor: default;
}

/* Zweispaltig: Zeichnung links, Liste rechts */
.tafel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 1fr);
  gap: 22px;
  align-items: start;
}

/* Die Zeichnung bleibt beim Scrollen der Liste stehen */
.tafel-bild { position: sticky; top: 12px; min-width: 0; }

/* min-width: 0 ist hier entscheidend. Rasterfelder haben von sich aus die
   Mindestbreite ihres Inhalts - eine Tabelle mit mehreren nicht umbrechenden
   Spalten sprengt damit ihre Spalte und die ganze Seite. Wie weit, haengt an
   der Textlaenge und schwankt dadurch von Sprache zu Sprache. */
.tafel-liste { min-width: 0; }

.zoomflaeche {
  position: relative;
  border: 1px solid var(--linie);
  background: var(--grund);
  /* clip statt hidden - der Unterschied ist hier entscheidend.
     hidden macht die Flaeche zum Scroll-Container, sobald der Inhalt groesser
     ist als sie selbst, also sobald man hineingezoomt hat. Der Browser richtet
     die Wischgeste dann auf DIESE Flaeche statt auf die Seite, und weil ihre
     Balken verborgen sind, passiert sichtbar gar nichts: ueber der Zeichnung
     liess sich die Seite nach dem Zoomen nicht mehr bewegen.
     clip schneidet genauso ab, erzeugt aber keinen Scroll-Container.
     hidden bleibt als Rueckfallebene fuer aeltere Browser stehen. */
  overflow: hidden;
  overflow: clip;

  /* pan-y ueberlaesst dem Browser das senkrechte Scrollen mit einem
     Finger. Zwei Finger erkennt er nicht als Scrollgeste, die Ereignisse
     bleiben also fuer das eigene Verschieben und Zoomen uebrig. */
  touch-action: pan-y;
  cursor: grab;
}
.zoomflaeche.wird-gezogen { cursor: grabbing; }

.zoominhalt {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}

.tafelzeichnung { display: block; width: 100%; height: auto; }

/* Das SVG liegt deckungsgleich ueber der Zeichnung */
.hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hotspot circle, .hotspot rect, .hotspot polygon {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition: fill .12s, stroke .12s;
}
.hotspot:hover circle, .hotspot:hover rect, .hotspot:hover polygon {
  fill: rgba(0, 150, 63, .22);
  stroke: var(--gruen-dunkel);
}
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible circle,
.hotspot:focus-visible rect,
.hotspot:focus-visible polygon {
  fill: rgba(219, 23, 14, .18);
  stroke: var(--rot);
  stroke-width: 3;
}
.hotspot.markiert circle,
.hotspot.markiert rect,
.hotspot.markiert polygon {
  fill: rgba(219, 23, 14, .20);
  stroke: var(--rot);
  stroke-width: 3;
}

.zoomknoepfe { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 4px; }
.zoomknoepfe button {
  width: 34px; height: 34px;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rundung);
  background: rgba(255,255,255,.94);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}
.zoomknoepfe button:hover { background: #fff; border-color: var(--gruen-dunkel); }

/* --- Artikelliste */

/* Der Listenkopf bleibt beim Scrollen stehen, damit "Nur markiertes Teil
   zeigen" immer erreichbar ist. Er ist die zweite von drei klebenden Ebenen:
   ganz oben die Zeichnung (nur auf schmalen Schirmen), darunter dieser Kopf,
   darunter die Kopfzeile der Tabelle.

   --klebe-oben  ist die Unterkante dessen, was ueber dem Listenkopf klebt.
                 Auf breiten Schirmen steht die Zeichnung daneben statt
                 darueber, deshalb 0.
   --listenkopf-hoehe setzt etkataloge.js, weil die Hoehe von der Sprache und
                 der Schirmbreite abhaengt - der Kopf darf umbrechen.

   Der eigene Hintergrund ist Pflicht: ohne ihn wandern die Zeilen sichtbar
   unter dem Kopf hindurch. Das margin ist bewusst zu padding geworden, damit
   auch der Zwischenraum zur Tabelle mit abgedeckt ist. */
.listenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: var(--klebe-oben, 0px);
  z-index: 3;
  background: var(--grund);
  padding-bottom: 8px;
}
.listenkopf-anzahl { font-weight: 600; font-size: 15px; }
.listenkopf-filter { font-size: 14px; color: var(--text-leise); cursor: pointer; }

/* Feste Spaltenaufteilung: so bestimmt die Tabelle nicht mehr selbst ihre
   Breite, sondern fuegt sich in die vorhandene ein - unabhaengig von der
   Sprache und der Laenge einzelner Texte. */
.artikelliste {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
}

/* Die Breiten haengen an der Spaltenposition, nicht an Klassen: bei fester
   Spaltenaufteilung zaehlt allein die Kopfzeile, und so bleiben die Angaben
   unabhaengig davon, welche Klassen die Kopfzellen tragen.
   Tafelansicht: Pos | Artikelnr | Bezeichnung | Verfuegbar | Preis | Bild | Shop
   Die Bezeichnung (3.) bekommt bewusst keine Breite - ihr gehoert der Rest. */
.tafel-liste .artikelliste thead th:nth-child(1) { width: 46px; }
.tafel-liste .artikelliste thead th:nth-child(2) { width: 138px; }
.tafel-liste .artikelliste thead th:nth-child(4) { width: 108px; }
.tafel-liste .artikelliste thead th:nth-child(5) { width: 86px; }
.tafel-liste .artikelliste thead th:nth-child(6) { width: 54px; }
.tafel-liste .artikelliste thead th:nth-child(7) { width: 62px; }

/* Trefferliste: Artikelnr | Bezeichnung | Verfuegbar | Preis | Gefunden in */
.artikeltreffer thead th:nth-child(1) { width: 140px; }
.artikeltreffer thead th:nth-child(3) { width: 150px; }
.artikeltreffer thead th:nth-child(4) { width: 100px; }
.artikeltreffer thead th:nth-child(5) { width: 140px; }

/* Lange Bezeichnungen duerfen umbrechen, statt ueber die Spalte
   hinauszulaufen. Artikelnummern sind davon ausgenommen - siehe .artikelnr. */
.artikelliste td, .artikelliste th { overflow-wrap: break-word; }

.artikelliste th {
  background: #f2f2f2;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #555;
  padding: 8px;
  border-bottom: 2px solid var(--linie-kraeftig);
  position: sticky;
  /* Das eine Bildpunkt Ueberlappung schliesst den Subpixel-Spalt, durch
     den sonst eine Haarlinie der Zeilen sichtbar waere. Der Listenkopf
     liegt mit hoeherem z-index darueber, verdeckt wird also nichts. */
  top: calc(var(--klebe-oben, 0px) + var(--listenkopf-hoehe, 0px) - 1px);
  z-index: 2;
}

.artikelliste td { padding: 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.artikelliste tbody tr:nth-child(even) td { background: var(--zebra); }
.artikelliste tbody tr:hover td { background: #f0f8f3; }

/* Hervorhebung statt Ausblenden.
   Der rote Balken sitzt nur an der ersten Zelle - eine Regel auf allen td
   ergaebe einen Strich zwischen jeder Spalte. */
.artikelzeile.markiert td {
  background: var(--markiert) !important;
}
.artikelzeile.markiert td:first-child {
  box-shadow: inset 3px 0 0 var(--rot);
}

.artikelzeile-alternativ td,
.artikelzeile-nachfolger td { background: #f7f9fb; }
.artikelzeile-alternativ .spalte-nr,
.artikelzeile-nachfolger .spalte-nr { padding-left: 14px; }
.zeichen-alternativ { color: var(--text-leise); margin-right: 5px; }

/* Kennzeichnung der Zeilenart als kleine Badge unter der Artikelnummer.
   Der Pfeil vor der Nummer und die Einrueckung allein wurden uebersehen -
   beides ist zurueckhaltend, und in einer langen Liste faellt es nicht auf.
   Die Badge sagt es in Worten, in beiden Ansichten.

   display: block bricht die Zeile hinter der Nummer um, width: fit-content
   laesst die Flaeche trotzdem nur so breit werden wie ihr Text. Ohne das
   liefe die Faerbung ueber die ganze Spalte. */
.zeilenart-wort {
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: var(--rundung-klein);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Die Alternative ist eine Nebenspur - neutral getoent.
   Der Nachfolger ist die Spur, die weiterfuehrt: gruen wie alles, was im
   Katalog auf den Shop zeigt. */
.artikelzeile-alternativ .zeilenart-wort { background: #e4eaef; color: #333; }
.artikelzeile-nachfolger .zeilenart-wort { background: #dceee3; color: #14532d; }

/* Eine Artikelnummer darf NIE umbrechen - halbierte Nummern lassen sich weder
   lesen noch abtippen. Der Bindestrich in Nummern wie 12022600-Z ist fuer den
   Zeilenumbruch eine ganz regulaere Trennstelle, deshalb reicht es nicht,
   overflow-wrap wegzulassen: es braucht white-space: nowrap.
   Die Spalte ist so bemessen, dass auch die laengsten Nummern hineinpassen. */
.artikelnr {
  font-family: Consolas, "Courier New", monospace;
  white-space: nowrap;
  overflow-wrap: normal;
}
.positionen { display: block; font-size: 11px; color: var(--text-leise); margin-top: 2px; }

.bezeichnung { display: block; }
.bezeichnung-de { display: block; font-size: 12px; color: var(--text-leise); }
.zusatz { display: block; font-size: 12px; color: var(--text-leise); margin-top: 2px; }
.zusatz-nnr { color: var(--gruen-dunkel); }

/* Der Verfuegbarkeitstext darf umbrechen - er ist je nach Sprache
   unterschiedlich lang und war der Hauptgrund fuer die zu breite Tabelle. */
.spalte-verf { white-space: normal; }
.ampel { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; }
.ampel-gruen   { background: #00963F; }
.ampel-gelb    { background: #E8A200; }
.ampel-rot     { background: var(--rot); }
.ampel-blau    { background: #1F6FB2; }
.ampel-schwarz { background: #555; }
.ampel-text { font-size: 12px; color: var(--text-leise); }

.spalte-preis { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.spalte-bild, .spalte-shop { white-space: nowrap; }

.bild-knopf {
  border: 1px solid var(--linie-kraeftig);
  background: var(--grund);
  padding: 3px 9px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  border-radius: var(--rundung);
}
.bild-knopf:hover { border-color: var(--gruen-dunkel); }

.shop-knopf {
  display: inline-block;
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  text-decoration: none;
  border-radius: var(--rundung);
}
.shop-knopf:hover { background: var(--gruen-tief); }

/* Vorschaufenster fuer Artikelbilder */
.bildfenster {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.bildfenster img { max-width: 88vw; max-height: 82vh; background: #fff; padding: 8px; border-radius: var(--rundung-gross); }
.bildfenster-zu {
  position: absolute;
  top: 16px; right: 20px;
  width: 42px; height: 42px;
  border: 0;
  border-radius: var(--rundung);
  background: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* --- Umbrueche */

/* Nebeneinander lohnt sich erst ab genuegend Breite. Darunter wuerden die
   festen Spalten die Bezeichnung auf wenige Zeichen zusammendruecken -
   dann ist die Liste unter der Zeichnung besser aufgehoben und hat die
   volle Breite zur Verfuegung. */
@media (max-width: 1550px) {
  .tafel { grid-template-columns: 1fr; }

  /* Die Zeichnung nicht ueber ihre natuerliche Groesse aufblasen - sonst
     wird sie unscharf und schiebt die Liste weit nach unten. */
  .tafel-bild { position: static; max-width: 950px; }

  /* In voller Breite darf die Bezeichnung wieder viel Platz bekommen */
  .tafel-liste .artikelliste thead th:nth-child(2) { width: 150px; }
  .tafel-liste .artikelliste thead th:nth-child(4) { width: 150px; }
}

@media (max-width: 1600px) {
  .artikelliste { font-size: 13px; }
  .artikelliste td, .artikelliste th { padding: 6px; }
}

/* Ab hier wird die Zeichnung wieder angeheftet - auf einem Handy waere sie
   sonst weg, sobald man in der Liste liest. Sie bekommt dazu eine feste
   Hoehe; das Bild fuellt sie mit object-fit: contain aus, und das
   Hotspot-SVG deckt sich weiterhin genau damit, weil dessen
   preserveAspectRatio="xMidYMid meet" nach derselben Regel arbeitet. */
/* Die Mindesthoehe gehoert dazu: quer gehaltenes Handy hat rund 390 Bild-
   punkte Hoehe - eine angeheftete Zeichnung waere dort nur gut 140 Punkte
   hoch und liesse fuer die Liste kaum Platz. Dann bleibt sie lieber oben
   stehen und scrollt mit. */
@media (max-width: 1000px) and (min-height: 600px) {
  .tafel-bild {
    position: sticky;
    top: 0;
    z-index: 5;
    max-width: none;
    background: var(--grund);
    padding-bottom: 6px;
    box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .35);
  }

  .zoomflaeche    { height: 38vh; }
  .zoominhalt     { height: 100%; }
  .tafelzeichnung { height: 100%; object-fit: contain; }

  /* Der Listenkopf klebt hier unter der Zeichnung statt am Bildschirmrand */
  .tafel-liste { --klebe-oben: calc(38vh + 6px); }

  /* Damit die angeklickte Zeile nicht hinter Zeichnung und Listenkopf landet:
     der Abstand vergroessert die Zeile fuer die Scroll-Rechnung nach oben, und
     das block: 'center' aus etkataloge.js trifft dadurch von selbst die Mitte
     der freien Flaeche darunter - ohne Sonderfall im Skript. */
  .artikelzeile {
    scroll-margin-top: calc(38vh + 10px + var(--listenkopf-hoehe, 0px));
  }
}

/* --- Kartenansicht

   Unterhalb dieser Breite wird aus jeder Tabellenzeile eine Karte.
   Der Grund ist die feste Spaltenaufteilung: Pos, Artikelnr, Verfuegbar,
   Preis, Bild und Shop belegen zusammen 548 px. Bei 768 px Fensterbreite
   blieben der Bezeichnung 165 px - vier bis fuenf Zeilen Text je Artikel -
   und weiter unten faellt sie auf 0 px, dann bricht der Text buchstabenweise
   um und die Seite scrollt waagerecht. Als Karte hat jeder Artikel die
   volle Breite.

   Die Zellen behalten Markup und Reihenfolge; nur ihre Klassen bestimmen,
   wo sie im Raster landen. Vorlese- und Tastaturreihenfolge bleiben damit
   die der Tabelle. */
@media (max-width: 820px) {
  .artikelliste,
  .artikelliste tbody,
  .artikelliste tr,
  .artikelliste td { display: block; }

  /* Ohne Kopfzeile gibt es keine Spaltenbreiten mehr - die festen Breiten
     weiter oben laufen hier ins Leere. */
  .artikelliste       { table-layout: auto; font-size: 14px; }
  .artikelliste thead { display: none; }

  .artikelliste tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    gap: 3px 12px;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--grund);
    border: 1px solid var(--linie);
    border-radius: 10px;
  }

  /* Linke Spalte tragen Nummer, Verfuegbarkeit und Bildknopf, rechte
     Spalte Position, Preis und Shop. Die rechte Spalte richtet sich nach
     ihrem laengsten Inhalt und bleibt dadurch schmal. */
  .artikelliste .spalte-nr     { grid-column: 1; grid-row: 1; }
  .artikelliste .spalte-pos    { grid-column: 2; grid-row: 1; justify-self: end; }
  .artikelliste .spalte-bez    { grid-column: 1 / -1; grid-row: 2; }
  .artikelliste .spalte-verf   { grid-column: 1; grid-row: 3; }
  .artikelliste .spalte-preis  { grid-column: 2; grid-row: 3; justify-self: end; }
  .artikelliste .spalte-bild   { grid-column: 1; grid-row: 4; }
  .artikelliste .spalte-shop   { grid-column: 2; grid-row: 4; justify-self: end; }

  /* Nur in der Trefferliste der Suche - dort gibt es weder Bild noch Shop,
     die vierte Zeile ist also frei. */
  /* Doppelte Klasse, weil die Ausrichtung der Trefferliste weiter unten
     in der Datei steht und sonst bei gleicher Spezifitaet gewinnt. */
  .artikelliste.artikeltreffer .spalte-anzahl {
    grid-column: 1 / -1;
    grid-row: 4;
    text-align: left;   /* in der Tabelle rechtsbuendig, auf der Karte linksbuendig */
    margin-top: 4px;
  }

  .artikelliste .spalte-anzahl[data-label]::before {
    content: attr(data-label) " ";
    color: var(--text-leise);
    font-size: 13px;
  }

  /* Leere Zellen (z. B. ein Artikel ohne Bild) sollen keine Luecke reissen */
  .artikelliste td:empty { display: none; }

  /* Ohne Positionsnummer traegt die Zelle kein data-label - dann faellt sie
     hier ganz weg, statt ein blosses "Pos. -" zu zeigen. */
  .artikelliste .spalte-pos:not([data-label]) { display: none; }

  .artikelliste .spalte-pos[data-label]::before {
    content: attr(data-label) " ";
    color: var(--text-leise);
    font-weight: 400;
  }

  .artikelliste td {
    padding: 0;
    border-bottom: 0;
    vertical-align: baseline;
  }

  /* Zebrastreifen, Ueberfahren und die Markierung haengen in der Tabelle an
     den Zellen. In der Karte gehoeren sie an die Karte selbst. */
  .artikelliste tbody tr:nth-child(even) td,
  .artikelliste tbody tr:hover td,
  .artikelzeile.markiert td { background: none; }

  .artikelzeile.markiert td:first-child { box-shadow: none; }
  .artikelzeile.markiert {
    background: var(--markiert);
    border-color: var(--rot);
    box-shadow: inset 4px 0 0 var(--rot);
  }

  /* Eine markierte Alternative behielt sonst ihre graue Tonung: die Regel
     .artikelliste tbody tr.artikelzeile-alternativ weiter unten ist
     spezifischer. Die Karte bekam dadurch zwar den roten Balken, aber nicht
     die gelbe Flaeche - halb markiert. Mit demselben Vorspann gewinnt die
     Markierung. */
  .artikelliste tbody tr.artikelzeile.markiert { background: var(--markiert); }

  /* Alternativen: eingerueckt und abgesetzt, wie in der Tabelle.

     Die Klasse allein reichte nicht - .artikelliste tbody tr weiter oben ist
     spezifischer und hat margin und background wieder ueberschrieben. Die
     Karten standen dadurch buendig und weiss wie alle anderen, die Absicht
     dieser Regel kam nie an. Mit vorangestelltem .artikelliste tbody
     gewinnt sie. */
  .artikelliste tbody tr.artikelzeile-alternativ,
  .artikelliste tbody tr.artikelzeile-nachfolger {
    margin-left: 18px;
    background: #f7f9fb;
  }

  /* Die Tonung gehoert an die Karte, nicht an die einzelnen Zellen: als
     Zellenhintergrund blieb die rechte Spalte weiss und die Karte sah
     zweifarbig aus. */
  .artikelzeile-alternativ td,
  .artikelzeile-nachfolger td { background: none; }

  .artikelzeile-alternativ .spalte-nr,
  .artikelzeile-nachfolger .spalte-nr { padding-left: 0; }

  /* Auf der Karte ist die Artikelnummer die Ueberschrift und entsprechend
     fett - die Badge darunter braucht etwas mehr Abstand als in der Tabelle. */
  .zeilenart-wort { margin-top: 5px; }

  /* Die Artikelnummer ist auf der Karte die Ueberschrift */
  .artikelnr { font-size: 15px; font-weight: 700; }
  .spalte-pos { font-size: 12px; color: var(--text-leise); }
  .spalte-preis { font-size: 15px; font-weight: 700; }
  .bezeichnung { line-height: 1.35; }

  /* Fingerfreundliche Schaltflaechen - die Rundung steht schon oben */
  .bild-knopf, .shop-knopf {
    display: inline-block;
    padding: 7px 16px;
    font-size: 13px;
  }

  .listenkopf { margin-bottom: 10px; }
}

/* --- Seitenkopf auf dem Handy

   In voller Groesse belegt der Kopf rund 660 von 844 Bildpunkten, bevor
   ueberhaupt Inhalt kommt. Hier ruecken Firmenzeichen, Hotline, Sprachwahl
   und Shop-Verweis enger zusammen; es faellt nichts weg. */
@media (max-width: 700px) {
  .kopf-innen { padding: 8px 14px 0; }
  .kopf-logo  { flex: 0 1 210px; min-width: 150px; }

  /* Das Firmenzeichen ist hier 210 px breit, also rund 49 px hoch - die
     untere Haelfte misst 25 px. */
  .kopf-leiste { margin-top: -25px; }

  .kopf-hotline { font-size: 12px; gap: 6px; }
  .kopf-hotline a { font-size: 15px; }
  .kopf-icon { height: 18px; }

  /* Der Globus muss weichen: neben dem roten Schwung der Grafik ist nur
     begrenzt Platz, und die Kuerzel sagen dasselbe. */
  .kopf-sprachen .kopf-icon { display: none; }
  .kopf-sprachen a { padding: 4px 7px; font-size: 12px; }
  .kopf-shop { margin-left: 14px; }
  .kopf-shop img { width: 88px; }

  .inhalt { padding: 16px 14px 30px; }
}

/* Auf den schmalsten Geraeten reicht der Platz nur noch knapp. Sprachkuerzel
   und Shop-Verweis ruecken weiter zusammen, das Firmenzeichen gibt Breite ab.
   Der gruene Balken laeuft dabei auf null zu - er ist reine Zierflaeche, die
   Grafik selbst traegt Schriftzug und Slogan. */
/* Auf den schmalsten Geraeten reicht der Platz rechts vom roten Schwung nur
   noch knapp. Kuerzel und Shop-Verweis ruecken deshalb zusammen. */
@media (max-width: 380px) {
  .kopf-sprachen a { padding: 4px 4px; font-size: 11px; }
  .kopf-shop { margin-left: 12px; }
  .kopf-shop img { width: 70px; }
}

/* ---------------------------------------------------------------- Suchergebnis */

/* Keine eigene Hoechstbreite - das Suchergebnis nutzt dieselbe Breite
   wie Kopf, Suchleiste und Auswahl darueber. */
.suchergebnis { width: 100%; }
.nichts-gefunden { font-size: 22px; margin: 10px 0 4px; }

.ergebnis-titel {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #5a646e;
  background: #f2f4f6;
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  padding: 7px 14px;
  margin: 24px 0 0;
  font-weight: 600;
}
.ergebnis-anzahl { color: var(--text-leise); font-weight: 400; }

.modelltreffer { list-style: none; margin: 0; padding: 0; }
.modelltreffer a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: var(--text);
}
.modelltreffer a:hover { background: #f0f8f3; }
.modelltreffer-name { font-weight: 600; }
.modelltreffer-zahl { color: var(--text-leise); font-size: 13px; white-space: nowrap; }

/* --- Kopf des gefundenen Artikels */

.artikelkopf {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 18px;
  background: var(--grund-leise);
  border: 1px solid var(--linie);
  margin-top: 24px;
}
.artikelkopf-links { flex: 1; min-width: 240px; }
.artikelkopf-nr {
  font-family: Consolas, "Courier New", monospace;
  font-size: 24px;
  margin: 0;
  letter-spacing: -0.5px;
}
.artikelkopf-bez { font-size: 16px; margin: 3px 0 0; }
.artikelkopf-zahl { font-size: 13px; color: var(--text-leise); margin: 6px 0 0; }
.artikelkopf-rechts { text-align: right; }
.artikelkopf-preis { font-size: 22px; font-weight: 700; margin: 0; }
.artikelkopf-verf { font-size: 13px; color: var(--text-leise); margin: 4px 0 10px; }

.shop-gross {
  display: inline-block;
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 10px 22px;
  text-decoration: none;
  font-size: 15px;
  border-radius: var(--rundung);
}
.shop-gross:hover { background: var(--gruen-tief); }

/* --- Fundstellen */

.fundstellen { margin-top: 22px; }

.fundstellen-marke {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #5a646e;
  background: #f2f4f6;
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  padding: 7px 14px;
  margin: 18px 0 0;
}

.fundstellen-liste { list-style: none; margin: 0; padding: 0; }

.fundstelle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}
.fundstelle:hover { background: #f7fbf8; }

.fundstelle-bild {
  width: 80px;
  height: 56px;
  object-fit: contain;
  background: var(--grund);
  border: 1px solid var(--linie);
  flex: none;
}

.fundstelle-text { flex: 1; min-width: 180px; }
.fundstelle-name { display: block; font-weight: 600; font-size: 15px; }
.fundstelle-bj { display: block; font-size: 12px; color: var(--text-leise); }

.fundstelle-tafeln { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fundstelle-wort { font-size: 12px; color: var(--text-leise); }

.tafelnummer {
  border: 1px solid var(--gruen-dunkel);
  border-radius: var(--rundung-klein);
  color: var(--gruen-dunkel);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.tafelnummer:hover { background: var(--gruen-dunkel); color: #fff; }

.fundstellen-mehr { margin-top: 16px; }

.artikeltreffer .spalte-anzahl { white-space: nowrap; text-align: right; }
.artikeltreffer .spalte-anzahl a { font-size: 13px; }

@media (max-width: 700px) {
  .fundstelle-bild { display: none; }
  .artikelkopf-rechts { text-align: left; }
}

/* ---------------------------------------------------------------- Vorschlaege */

.vorschlag-gruppe {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #333;
  background: #f4f6f7;
  padding: 6px 14px;
  border-bottom: 1px solid #e4e8ea;
}

.vorschlag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}
.vorschlag:hover, .vorschlag.aktiv { background: #f0f8f3; }

.vorschlag-marke {
  background: #eef3f6;
  color: #4a5560;
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
  border-radius: var(--rundung-klein);
}
.vorschlag-nr {
  font-family: Consolas, "Courier New", monospace;
  color: #555;
  min-width: 110px;
  white-space: nowrap;
}
.vorschlag-text { flex: 1; }
.vorschlag-zusatz { color: var(--text-leise); font-size: 12px; white-space: nowrap; }

/* ---------------------------------------------------------------- Tippfilter */

.tippfilter { position: relative; }

/* Die vom Tippfilter ersetzte Klappliste - ausgeblendet, aber im Formular.
   display:none-Felder werden beim Absenden weiterhin uebertragen. */
.tippfilter-original { display: none !important; }

.tippfilter-feld {
  width: 100%;
  border: 2px solid var(--linie-kraeftig);
  border-radius: var(--rundung);
  background: var(--grund);
  padding: 9px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
}
.tippfilter-feld:focus { border-color: var(--gruen-dunkel); }

.tippfilter-liste {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--grund);
  border: 1px solid var(--linie-kraeftig);
  border-top: 0;
  max-height: 320px;
  overflow-y: auto;
  z-index: 30;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  border-radius: 0 0 var(--rundung) var(--rundung);
}

/* Wie bei der Suche: das Feld gibt seine unteren Ecken ab, solange die
   Liste darunter haengt. */
.tippfilter:has(.tippfilter-liste:not([hidden])) .tippfilter-feld {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.tippfilter-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
}
.tippfilter-eintrag:hover, .tippfilter-eintrag.aktiv { background: #f0f8f3; }
.tippfilter-leer { padding: 10px 12px; color: var(--text-leise); font-size: 14px; }

/* Positionsnummer aus der Zeichnung - erste Spalte der Artikelliste */
.spalte-pos {
  width: 46px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;

  /* Kein nowrap: ein Artikel kann an vielen Stellen der Zeichnung sitzen, und
     "2, 4, 6, 13, 16, 26, 31, 37, 42, 45, 47, 57, 61, 66" lief dann 254 px
     weit ueber die 46 px breite Spalte in die Bezeichnung hinein. Umbrechen
     macht die Zeile hoeher, aber nichts ueberlappt mehr. */
  white-space: normal;
  overflow-wrap: break-word;
}
.artikelliste th.spalte-pos { text-align: center; }
.ohne-pos { color: #999; font-weight: 400; }
.artikelzeile-alternativ .spalte-pos { padding-left: 8px; }