/* =====================================================================
   Gestaltung, eine Fassung fuer Telefon und Desktop.

   Aufbau wie bei den grossen US-Teilehaendlern (Vorbild: carid.com):
     Zeile 1  Dienstleiste  - dunkel, Telefon, Zeiten, Rechtliches
     Zeile 2  Kopf          - Marke, breite Suche, Fahrzeug, Korb
     Zeile 3  Kategorien    - waagerechter Balken mit den Baugruppen
   Darunter die Fahrzeugzeile und der Inhalt auf weissem Blatt.

   Die Grundregeln gelten fuer das Telefon, die Media Queries bauen
   darauf Tablet (640) und Desktop (900, 1200) auf. Bewegung steht
   gesammelt im Abschnitt "Bewegung" und wird bei
   prefers-reduced-motion vollstaendig abgeschaltet.
   ===================================================================== */
:root{
  --akzent:#172638; --akzent-fg:#ffffff;
  --kopf-bg:#172638; --kopf-fg:#fff;
  --kopf-bg2:#172638; --kopf-oben:#0f1925;
  --cta:#ffdf00; --cta-fg:#1d2c43;
  --text:#14181d; --leise:#5c6672; --sehr-leise:#8791a0;
  --rand:#e4e8ed; --rand-stark:#ccd4dd;
  --flaeche:#fff; --f2:#f5f7f9; --f3:#eaeef3; --seite:#eef1f5;
  --gruen:#0a7a35; --gruen-f:#eff9f2; --rot:#d40000; --rot-f:#fdf0ee;
  --gelb:#8a6300; --gelb-f:#fff8e6;
  /* --- Die Eckenrundung ----------------------------------------------
     EINE Form fuer die ganze Oberflaeche, und welche Ecke wie stark
     gerundet ist, steht in der Verwaltung (Technik, Aussehen und
     Sprache: ecke_ol, ecke_or, ecke_ur, ecke_ul). Vorgabe: nur unten
     rechts 15 Pixel, der Rest kantig.

     --ecken setzt die vier Zahlen in der Reihenfolge zusammen, die
     border-radius erwartet: oben links, oben rechts, unten rechts,
     unten links. --r, --rk und --rp tragen dieselbe Form; die drei
     Namen bleiben, damit die 231 Regeln, die sie benutzen,
     unveraendert bleiben.

     Wer eine EINZELNE Ecke braucht, nimmt --e-ol bis --e-ul. Das tun
     die sechs Stellen, an denen zwei Elemente aneinanderstossen und nur
     die Aussenkante gerundet sein darf - das Suchfeld mit seinem Knopf,
     die Sprungmarke, der aufgeklappte Baugruppenkasten, der Hinweis in
     der Trefferliste, das Einwilligungsband und der senkrechte Reiter.
     Dort darf --r NICHT stehen: es enthaelt vier Werte, und vier Werte
     in einem von vier Feldern machen die ganze Angabe ungueltig.

     Rund bleiben unabhaengig davon echte Kreise (50%) und die
     Zaehlblasen (999px) - die stehen als feste Werte in den Regeln. */
  --e-ol:5px; --e-or:0px;
  --e-ur:5px; --e-ul:0px;
  --ecken:var(--e-ol) var(--e-or) var(--e-ur) var(--e-ul);
  --r:var(--ecken); --rk:var(--ecken); --rp:var(--ecken);
  /* Schild fuer den Produktsicherheits-Verweis, als Maske - so nimmt es
     die Textfarbe an und braucht keine eigene Datei. */
  --schild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6.5c0 4.6 3.2 8.9 8 10.5 4.8-1.6 8-5.9 8-10.5V5zm0 5.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4m1 3.6v6h-2v-6z'/%3E%3C/svg%3E");
  --sch:0 1px 2px rgba(18,26,38,.05), 0 1px 3px rgba(18,26,38,.08);
  --sch-karte:0 10px 24px rgba(18,26,38,.10), 0 2px 6px rgba(18,26,38,.06);
  --sch-hoch:0 14px 38px rgba(18,26,38,.20);
  --breite:1320px; --kopf-h:112px; --leiste-h:58px;
  /* Zusaetzlicher Abstand zwischen Logo und Suchfeld, aus der Verwaltung
     (Layout_Logo_Abstand). Wirkt nur im Desktop-Kopf - auf dem Telefon
     steht die Suche in einer eigenen Zeile ueber die ganze Breite, dort
     wuerde ein Abstand sie nur schmaler machen. */
  --logo-abstand:30px;
  --an:.24s cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
/* --- Die Rundung fuer alles, was ein Kasten ist ----------------------
   Gewuenscht: jedes div und jeder Knopf tragen die Rundung aus der
   Verwaltung, nicht nur die Kaesten, die schon eine Regel dafuer haben.

   Die Regel steht ganz vorn und waehlt nach ELEMENT aus - das ist das
   kleinste Gewicht, das CSS kennt. Jede Regel weiter unten mit einer
   Klasse sticht sie, auch jede, die bewusst "border-radius:0" setzt.
   Neu gerundet wird also nur, was bisher gar keine Angabe hatte; am
   bestehenden Aussehen aendert sich nichts.

   Sichtbar ist die Rundung ohnehin nur, wo ein div eine Flaeche, einen
   Rahmen, einen Schatten oder overflow:hidden hat. Ein blosses
   Huellen-div bleibt unsichtbar rund. */
div,button,.knopf,input[type=submit],input[type=button]{border-radius:var(--r)}
/* Vier Gruppen bleiben kantig. Die Kopfzeile (header) und der Fuss
   (footer) sind keine div und daher ohnehin nicht betroffen.

   1. Baender ueber die ganze Fensterbreite. Dort sitzt die Ecke am
      Bildschirmrand, und eine Rundung sieht dort nicht nach Form aus,
      sondern nach Scharte.
   2. Verdunkelungen hinter einem Fenster. Sie decken den ganzen
      Bildschirm ab; eine runde Ecke waere ein heller Zipfel in der Ecke.
   3. Kopfstreifen INNERHALB eines Kastens. Ihre Unterkante liegt mitten
      im Kasten - eine Rundung risse dort eine Kerbe zwischen Streifen
      und Inhalt.
   4. Streifen, deren einziger Schmuck eine Trennlinie ist. Sie haben
      keine Flaeche, nur einen Strich oben oder unten - und ein Strich,
      der sich am Ende hochbiegt, sieht nicht nach Form aus, sondern
      nach Fehler. Kaesten MIT Flaeche fehlen hier absichtlich: die
      sollen gerundet werden, das ist der Sinn der Sache. */
/* 1. Baender ueber die ganze Fensterbreite */
.dienstleiste,.katbalken,.leiste,.tableiste,.innen,.kopf-innen,.fuss-innen,
.einw,.fahrzeugzeile,.korbleiste,.entwleiste,
/* 2. Verdunkelungen hinter einem Fenster */
.schirm,.fzbox,.fzbox-schirm,.lupe,.hero-bildbox,.hero-bg,
/* 3. Kopfstreifen mit eigener Flaeche innerhalb eines Kastens */
.eingang-kopf,.fenster-kopf,.fzs-kopf,.kl-kopf,.schub-kopf,
/* 4. Streifen, deren einziger Schmuck eine Trennlinie ist */
.akorb-form,.az-titel,.bk-bez,.bk-fuss,.bk-reihe,.danke-fuss,.eingang-fuss,
.feldgruppe,.fuss-unten,.fz-wechsel,.karteblock,.kattreffer-zeile,.kk-fuss,
.kp-fuss,.kp-kopf,.mitt-lauf,.preisblock,.rechtfuss,.schub-fuss,.schub-nav,
.speichern,.wruf-stern,.wruf-titel,.wruf-zeile{border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--seite);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--leiste-h) + env(safe-area-inset-bottom))}
a{color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:2px}
img{max-width:100%;height:auto}
.ic{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:3px}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.springen{position:absolute;left:-9999px;top:0;z-index:200;background:var(--flaeche);
  color:var(--text);padding:12px 18px;border-radius:0 0 var(--e-ur) 0;font-weight:650}
.springen:focus{left:0}
h1{font-size:clamp(22px,4.6vw,30px);line-height:1.18;margin:0 0 16px;letter-spacing:-.02em;font-weight:780}
h2{font-size:clamp(17px,3.2vw,21px);line-height:1.28;margin:28px 0 12px;letter-spacing:-.014em;font-weight:720}
/* Ein kurzer Akzentstrich vor den Abschnittsueberschriften - gibt der
   Seite Rhythmus, ohne die Gliederung anzutasten. */
main>h1,.kopfblock h1,.karteblock>h2,.eingang section>h2{position:relative;padding-left:15px}
main>h1::before,.kopfblock h1::before,.karteblock>h2::before,.eingang section>h2::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:3px;
  background:var(--cta)}
h3{font-size:15px;margin:18px 0 8px;font-weight:660}

/* =====================================================================
   1. Dienstleiste - schmaler dunkler Streifen ganz oben
   ===================================================================== */
.dienstleiste{background:var(--kopf-oben);color:rgba(255,255,255,.78);
  font-size:13px;letter-spacing:.01em}
.dienstleiste.hell{background:var(--kopf-oben);color:rgba(0,0,0,.62)}
.dienstleiste .innen{max-width:var(--breite);margin:0 auto;padding:7px 12px;
  display:flex;align-items:center;gap:16px;overflow-x:auto;scrollbar-width:none}
.dienstleiste .innen::-webkit-scrollbar{display:none}
.dienstleiste a{color:inherit;text-decoration:none;white-space:nowrap;
  transition:color var(--an)}
.dienstleiste a:hover{color:#fff}
.dienstleiste.hell a:hover{color:var(--text)}
.dl-tel{display:inline-flex;align-items:center;gap:7px;font-weight:700;
  font-size:14px;color:#fff !important;flex:0 0 auto}
.dienstleiste.hell .dl-tel{color:var(--text) !important}
/* Sprachschalter: zwei Kuerzel, das aktive hinterlegt. Kein Umschalter -
   so sieht man auf einen Blick, welche Sprache gerade gilt, und beide
   Fassungen haben einen eigenen Verweis. */
.dl-sprache{display:inline-flex;align-items:center;gap:2px;margin-left:2px;
  flex:0 0 auto}
.dl-sprache a{padding:2px 6px;border-radius:3px;font-size:11.5px;font-weight:800;
  letter-spacing:.05em;opacity:.7}
.dl-sprache a:hover{opacity:1}
.dl-sprache a.an{background:rgba(255,255,255,.16);color:#fff;opacity:1}
.dienstleiste.hell .dl-sprache a.an{background:rgba(0,0,0,.09);color:var(--text)}
.dl-tel .ic{width:17px;height:17px}
.dl-info{white-space:nowrap;flex:0 0 auto}
.dl-links{display:none;margin-left:auto;gap:16px;flex:0 0 auto}
.dl-links a{font-size:12.5px}
/* Der Verweis in den Haendlerbereich. Er steht zwischen gewoehnlichen
   Links und soll trotzdem als eigener Weg erkennbar sein - deshalb ein
   schmaler Rahmen statt einer weiteren Farbe. Sichtbar ist er ohnehin nur
   fuer angemeldete Haendler im KTS-Shop. */
.dl-links a.dl-hdl{padding:1px 9px;border:1px solid currentColor;
  border-radius:var(--ecken);text-decoration:none;font-weight:700;opacity:.92}
.dl-links a.dl-hdl:hover{opacity:1}
/* Abmelden ist eine Handlung, kein Ziel - deshalb ein Formular mit Knopf.
   Der Knopf sieht aus wie die Links daneben, damit die Leiste ruhig bleibt. */
.abmeldeform{display:contents}
button.alslink{font:inherit;color:inherit;background:0 0;border:0;padding:0;margin:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
button.alslink:hover{color:var(--akzent)}
.dl-links button.alslink{font-size:12.5px;color:inherit;opacity:.9}
.dl-links button.alslink:hover{opacity:1;color:inherit}
.fuss button.alslink{color:rgba(255,255,255,.72);text-decoration:none}
.fuss button.alslink:hover{color:#fff;text-decoration:underline}
button.alslink.schub-abmelden{display:flex;align-items:center;gap:11px;width:100%;
  min-height:48px;padding:11px 16px;text-decoration:none;text-align:left;
  color:var(--text);border-top:1px solid var(--rand)}
button.alslink.schub-abmelden:hover{background:var(--f2);color:var(--text)}

/* =====================================================================
   2. Kopf - Marke, Suche, Fahrzeug, Wunschliste, Korb
   ===================================================================== */
/* z-index:100 - und das ist eine Entscheidung ueber die Vorschlagsliste,
   nicht ueber die Kopfzeile. .kopf bildet einen eigenen Stapelkontext:
   wie hoch .vorschlag darin auch steht, nach aussen zaehlt allein die
   Zahl der Kopfzeile. Mit 60 lag die Liste unter allem, was darueber
   kam - der geoeffneten Kategorieleiste (90) zum Beispiel. Mit 100
   steht sie ueber dem ganzen Seiteninhalt und nur noch unter dem, was
   bewusst darueber gehoert: Fahrzeugfenster (120), Lupe (140) und
   Einwilligung (150). */
.kopf{position:sticky;top:0;z-index:100;background:var(--kopf-bg);color:var(--kopf-fg);
  box-shadow:0 1px 0 rgba(255,255,255,.07)}
.kopf-innen{max-width:var(--breite);margin:0 auto;padding:9px 12px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px 10px}
.kopf a{color:inherit;text-decoration:none}
.burger{grid-column:1;grid-row:1;display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;
  border-radius:var(--rk);cursor:pointer;transition:background var(--an)}
.burger:hover{background:rgba(255,255,255,.14)}
.marke{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;min-width:0;font-weight:800;
  font-size:18px;letter-spacing:-.022em}
.marke a{display:flex;align-items:center;gap:10px;min-width:0}
/* Doppelte Hoehe: das Logo traegt die Marke, der Kopf hat den Platz.
   max-width begrenzt breite Logos, damit die Suche daneben nicht
   zusammenschrumpft. */
.marke img{max-height:72px;max-width:260px;width:auto;display:block}
.marke span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Kopfknoepfe rechts: Fahrzeug, Wunschliste, Korb */
.kopf-knopf{grid-column:3;grid-row:1;position:relative;display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--rk);transition:background var(--an),transform var(--an)}
.kopf-knopf:hover{background:rgba(255,255,255,.14)}
.kopf-knopf:active{transform:scale(.94)}
.korb-knopf{grid-column:4;grid-row:1;position:relative;display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--rk);margin-right:-6px;transition:background var(--an),transform var(--an)}
.korb-knopf:hover{background:rgba(255,255,255,.14)}
.korb-knopf:active{transform:scale(.94)}
.korb-zahl{position:absolute;top:1px;right:-1px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;background:var(--cta);
  color:var(--cta-fg);font-size:11.5px;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--kopf-bg)}
/* Die Zahl am Herz: gleiche Form wie am Korb, nur leiser gefuellt. Der
   Korb ist der Weg zur Bestellung und soll das kraeftige Schild behalten;
   zwei gleich laute Marken nebeneinander heben sich gegenseitig auf. */
.wl-zahl{background:var(--kopf-fg);color:var(--kopf-bg)}
.wl-zahl[hidden]{display:none}
.fz-knopf{display:none}
.wl-knopf{display:none}

/* Suche: auf dem Telefon eigene Zeile, auf dem Desktop breit in der Mitte */
/* Kein overflow:hidden - das wuerde die Vorschlagsliste abschneiden, die
   unter dem Feld haengt. Die runden Ecken kommen deshalb von den beiden
   Kindern, nicht vom Formular. */
.kopfsuche{grid-column:1/-1;grid-row:2;display:flex;min-width:0;position:relative;
  border-radius:var(--rk);background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,0);transition:box-shadow var(--an)}
.kopfsuche:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.kopfsuche input[type=search]{flex:1;min-width:0;width:100%;font:inherit;font-size:16px;
  padding:12px 14px;border:0;background:#fff;color:var(--text);
  border-radius:var(--e-ol) 0 0 var(--e-ul);
  -webkit-appearance:none;appearance:none;outline:none}
.kopfsuche input[type=search]::placeholder{color:var(--sehr-leise)}
.kopfsuche button{display:grid;place-items:center;flex:0 0 auto;width:52px;min-height:46px;
  border:0;border-radius:0 var(--e-or) var(--e-ur) 0;background:var(--cta);color:var(--cta-fg);
  cursor:pointer;transition:filter var(--an)}
.kopfsuche button:hover{filter:brightness(1.1)}
.kopfsuche button:active{filter:brightness(.92)}
.kopf.hell .burger:hover,.kopf.hell .korb-knopf:hover,.kopf.hell .kopf-knopf:hover{background:rgba(0,0,0,.07)}
.kopf.hell .kopfsuche{box-shadow:inset 0 0 0 1px var(--rand-stark)}
/* --- Vorschlaege waehrend der Eingabe -------------------------------- */
.vorschlag{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:1000;
  max-height:min(70vh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--flaeche);color:var(--text);border:1px solid var(--rand);
  border-radius:var(--r);box-shadow:0 16px 40px rgba(18,26,38,.22);
  padding:6px;text-align:left}
.vorschlag[hidden]{display:none}
.vorschlag .titel{padding:9px 11px 5px;font-size:11px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--leise)}
.vorschlag a{display:flex;gap:11px;align-items:center;padding:9px 11px;
  border-radius:var(--rk);color:var(--text);text-decoration:none;font-size:14.5px;
  line-height:1.35}
.vorschlag a:hover,.vorschlag a.aktiv{background:var(--f2)}
.vorschlag a.aktiv{box-shadow:inset 0 0 0 1px var(--akzent)}
.vorschlag a .ic{flex:0 0 auto;width:18px;height:18px;color:var(--leise)}
/* Vorschaubild in der Vorschlagsliste - der Altshop zeigt es dort auch
   (_dyn_list_ajax.asp). Feste Breite, damit die Namen darunter in einer
   Flucht stehen, egal ob ein Bild da ist oder das Symbol. */
.vorschlag a .vbild{flex:0 0 auto;width:40px;height:34px;object-fit:contain;
  background:var(--f2);border-radius:4px;padding:2px;box-sizing:border-box}
.vorschlag a .ic.mitbild{width:40px}
.vorschlag a b{font-weight:700}
.vorschlag a .zweit{display:block;font-size:12.5px;color:var(--leise);font-weight:400}
.vorschlag .leermeldung{padding:12px;font-size:14px;color:var(--sehr-leise)}
.vorschlag .fehlzeile{color:var(--rot);font-weight:600}
.vorschlag .diaglink{display:block;padding:2px 12px 12px;font-size:13px;color:var(--akzent)}
/* --- Suchseite: Begriffssuche ---------------------------------------- */
.trefferzahl{margin:0 0 14px;font-size:13.5px;color:var(--leise)}
.begriffkopf{margin:0 0 20px;padding:16px 18px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.begriffkopf h2{margin:0 0 6px;font-size:19px}
.begriffkopf p{margin:0;font-size:14.5px;color:var(--leise);line-height:1.5}
.begriffkopf .begriff-schalter{margin-top:13px}
/* --- Baugruppen als Kacheln im Inhalt --------------------------------- */
/* Im Altshop stehen die Gruppen nicht nur links, sondern als Kachelgitter
   in der Mitte - mit Bild. Fehlt das Bild, bleibt die Kachel Text. */
.bgkacheln{display:grid;gap:10px;margin:0 0 22px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.bgkacheln a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:9px;min-height:62px;padding:14px 12px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche);color:var(--text);
  text-decoration:none;text-align:center;
  transition:border-color var(--an),box-shadow var(--an),transform var(--an)}
.bgkacheln a:hover{border-color:var(--cta);box-shadow:0 6px 18px rgba(18,26,38,.10);
  transform:translateY(-2px)}
.bgkacheln .bild{display:grid;place-items:center;width:100%;min-height:62px}
.bgkacheln .bild img{display:block;width:auto;height:auto;max-width:112px;max-height:78px;
  object-fit:contain;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.bgkacheln a:hover .bild img{transform:scale(1.06)}
/* Der Name darf umbrechen, auch mitten im Wort: "Differentiallager/
   Simmerring" hat keine Leerstelle, an der der Browser von sich aus
   trennen wuerde, und lief deshalb aus der Kachel heraus. hyphens:auto
   nutzt die Silbentrennung, wo der Browser sie kann; overflow-wrap ist
   die Rueckfallebene, die immer greift. */
.bgkacheln .name{font-size:14.5px;font-weight:700;line-height:1.3;
  max-width:100%;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
/* Lange Namen eine Stufe kleiner, sehr lange zwei - die Klasse setzt der
   Server nach der Zeichenzahl (KtsBgNameKlasse). */
.bgkacheln .name.name-s{font-size:13px;line-height:1.28}
.bgkacheln .name.name-xs{font-size:11.8px;line-height:1.25;letter-spacing:-.01em}
.bgliste .name,.pflichtwahl .name{overflow-wrap:anywhere;hyphens:auto}
.bgliste .name.name-s,.bgliste .name.name-xs{font-size:13.5px}
.bgkacheln .fz{font-size:11.5px;color:var(--sehr-leise);font-weight:400}
/* Die gewaehlte Untergruppe wird gekennzeichnet - sonst sieht der Besucher
   nicht, wo er steht. Nicht nur ueber die Farbe: der linke Balken und das
   Haekchen tragen die Aussage auch ohne Farbwahrnehmung. */
.bgkacheln a.aktiv,.bgwahl a.aktiv{position:relative;border-color:var(--cta);
  background:var(--f2);box-shadow:inset 3px 0 0 var(--cta);font-weight:750}
.bgkacheln a.aktiv::after,.bgwahl a.aktiv::after{content:"\2713";
  position:absolute;top:7px;right:9px;font-size:12px;color:var(--cta)}
.bgkacheln a.aktiv:hover,.bgwahl a.aktiv:hover{background:var(--f2)}
/* --- Untergruppen ohne Bild: eingerueckte Liste ----------------------- */
/* Ein Gitter aus zwei Dutzend mittig gesetzten Textkacheln liest sich nicht.
   Ohne Bild wird daraus eine Liste: nach rechts eingerueckt, mit einer Linie
   an die Baugruppe darueber gebunden, linksbuendig und mit Pfeil. Mehrere
   Spalten bleiben erlaubt - sie stoeren nicht, solange jede Zeile links
   anfaengt und einen Anfangspunkt hat. */
.bgliste{columns:250px 3;column-gap:30px;margin:0 0 22px 6px;padding-left:16px;
  border-left:2px solid var(--rand)}
.bgliste a{display:flex;align-items:baseline;gap:9px;break-inside:avoid;
  padding:10px 10px 10px 4px;border-bottom:1px solid var(--rand);
  color:var(--text);text-decoration:none;font-size:14.5px;line-height:1.35;
  border-radius:var(--rk);transition:background var(--an),color var(--an)}
.bgliste a .pfeil{flex:0 0 auto;color:var(--sehr-leise);font-size:13px}
.bgliste a .name{font-weight:500}
.bgliste a:hover{background:var(--f2);color:var(--cta)}
.bgliste a:hover .pfeil{color:var(--cta)}
.bgliste a.aktiv{color:var(--cta);box-shadow:inset 3px 0 0 var(--cta);
  background:var(--f2)}
.bgliste a.aktiv .name{font-weight:750}
.bgliste a.aktiv .pfeil{color:var(--cta)}
/* --- Pflichtauswahl: die Liste erscheint erst nach dieser Wahl -------- */
/* Steht unter einer Baugruppe noch eine Unterscheidung (2-Rad/4-Rad,
   mit/ohne Servo, Scheibe/Trommel), dann passen die Teile der einen Seite
   nicht auf die andere. Bisher standen die Teile trotzdem schon darunter -
   wer nicht weiterklickte, legte das falsche Teil in den Korb. Jetzt
   bleibt die Liste zu, bis die Wahl getroffen ist, und die Wahl wird
   entsprechend gezeichnet: Kaesten statt Textzeilen, roter Balken links,
   Pfeil rechts. Dieselbe Klasse liegt ueber .bgliste UND .bgkacheln, damit
   es keine Rolle spielt, ob die Ebene Bilder hat. */
.pflichtwahl{display:grid;gap:12px;margin:0 0 10px;padding:0;border-left:0;
  columns:auto;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pflichtwahl a{display:flex;flex-direction:row;align-items:center;
  justify-content:flex-start;text-align:left;gap:14px;min-height:68px;
  padding:15px 18px;border:2px solid var(--rand-stark);
  border-left:6px solid var(--cta);border-radius:var(--r);
  background:var(--flaeche);color:var(--text);text-decoration:none;
  font-size:17px;line-height:1.3;border-bottom:2px solid var(--rand-stark);
  transition:border-color var(--an),box-shadow var(--an),transform var(--an)}
.pflichtwahl a:hover{border-color:var(--cta);color:var(--text);
  background:var(--flaeche);box-shadow:0 8px 22px rgba(18,26,38,.14);
  transform:translateY(-2px)}
.pflichtwahl a .bild{order:0;flex:0 0 auto;display:grid;place-items:center;
  width:84px;min-height:58px}
.pflichtwahl a .bild img{max-width:80px;max-height:58px;object-fit:contain}
.pflichtwahl a .name{order:1;flex:1 1 auto;font-weight:750;font-size:17px}
/* Der Pfeil steht rechts und wird mitgefuehrt - er sagt "hier geht es
   weiter", nicht "hier steht ein Listenpunkt". */
.pflichtwahl a .pfeil{order:2;flex:0 0 auto;font-size:24px;color:var(--cta);
  transition:transform var(--an)}
.pflichtwahl a:hover .pfeil{transform:translateX(3px)}
.pflichtwahl a.aktiv{box-shadow:inset 3px 0 0 var(--cta)}
@media (max-width:620px){
  .pflichtwahl{grid-template-columns:1fr;gap:9px}
  .pflichtwahl a{min-height:58px;padding:13px 15px;font-size:16px}
  .pflichtwahl a .name{font-size:16px}
}
/* Der Hinweis darunter: warum hier noch keine Teile stehen, und der
   Ausweg fuer den, der die ganze Baugruppe sehen will. */
.pflichthinweis a{display:block;margin-top:8px}
/* --- Kopfbereich der Startseite -------------------------------------- */
/* Ein Block aus zwei Teilen: oben das Bild mit dem Produkt-Special, direkt
   darunter die Einstiegskarte mit Fahrzeug und den beiden Knoepfen. */
/* KEIN overflow:hidden hier. Die aufgeklappte Liste der Fahrzeugwahl ist
   hoeher als der Heldenbereich und wurde an dessen Unterkante abgeschnitten -
   man sah nur die oberen fuenf Hersteller. Das Bild, das den Ueberstand
   verursacht (transform:scale), schneidet jetzt .hero-bildbox ab, und der
   Rest darf hinaus.
   z-index:5 gehoert dazu: ohne ihn liegt der naechste Abschnitt
   (.xkar, position:relative) ueber der Liste, weil er spaeter im Quelltext
   steht. 5 bleibt unter der Kopfzeile (z-index:100) - beim Scrollen soll
   die Kopfzeile weiter oben liegen. */
.hero{position:relative;margin:0;border-radius:0;z-index:5;
  background:#10141a;display:flex;flex-direction:column}
/* Nur der Bildkasten schneidet ab - siehe .hero-bg. */
.hero-bildbox{position:absolute;inset:0;overflow:hidden;z-index:0}
/* Das Bild geht ueber die ganze Seitenbreite, der Text darin bleibt auf der
   Inhaltsbreite - wie im Altshop, wo der Kopfbereich ausserhalb des
   Inhaltsrasters steht. Deshalb liegt .hero vor .inhalt und braucht keine
   vw-Rechnerei, die an der Bildlaufleiste scheitert. */
.hero-innen{position:relative;flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:350px;padding:30px 0;
  isolation:isolate}
/* Haelt den Inhalt auf Inhaltsbreite, waehrend Bild und Flaeche ganz breit
   bleiben. Als eigener Kasten, damit die Ausrichtung nicht an der
   Reihenfolge der Regeln haengt. */
.hero-mitte{position:relative;z-index:2;width:100%;max-width:var(--breite);
  margin:0 auto;padding:0 22px}
/* Im Bildteil steht das Special mittig, wie im Altshop */
.hero-innen>.hero-mitte{display:flex;justify-content:center}
/* Das Bild sitzt 15% groesser im Rahmen als frueher: dieselbe Flaeche,
   naeher dran. Ueber transform statt background-size, damit "cover" seine
   Arbeit behaelt und das Bild in jedem Seitenverhaeltnis fuellt;
   .hero-bildbox schneidet den Ueberstand ab (overflow:hidden). */
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:1;transition:opacity .6s ease;z-index:0;
  transform:scale(1.15);transform-origin:center}
.hero-innen::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,11,15,.45) 0%,rgba(8,11,15,.15) 45%,rgba(8,11,15,.55) 100%)}
.hero-special,.hero-sopo{position:relative;z-index:2}
.hero-special{display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:620px;text-align:center}
.hero-special img{display:block;width:100%;max-width:600px;height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.hero-cta{display:inline-flex;align-items:center;min-height:36px;padding:7px 16px;
  border-radius:var(--rk);background:var(--rot);color:#fff;font-size:12.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:filter var(--an)}
.hero-cta:hover{filter:brightness(1.12)}
.hero-sopo{max-width:460px;display:grid;gap:9px;padding:22px;border-radius:var(--rk);
  background:rgba(16,20,26,.78);text-align:left}
.hero-sopo strong{font-size:26px;color:var(--rot);letter-spacing:-.02em;line-height:1.15}
.hero-sopo span{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.5}
.hero-sopo .hero-cta{justify-self:start}
/* Der Einstiegstext stand frueher in einem eigenen dunklen Band UNTER dem
   Bild. Jetzt ist es ein Block: Text und Knoepfe liegen im Bild, lesbar
   durch den Verlauf, der ohnehin darueber liegt. */
/* width:100% ist noetig, nicht Zierde: .hero-mitte ist ein Flex-Kasten
   (.hero-innen>.hero-mitte), und ein Flex-Kind ohne Breitenangabe wird nur
   so breit wie sein Inhalt. Ohne diese Zeile endet der Textblock - und
   damit auch die Fahrzeugwahl darin - bei der Breite seines laengsten
   Elements statt an der Kante des Inhaltsbereichs. Ueberschrift, Absatz
   und Knoepfe bleiben durch align-items:center mittig wie bisher. */
.hero-text{position:relative;z-index:2;margin-top:26px;text-align:center;
  width:100%;display:flex;flex-direction:column;align-items:center}
.hero-text h1{margin:0 0 10px;color:#fff;font-size:30px;letter-spacing:-.02em;
  line-height:1.15;text-shadow:0 2px 14px rgba(8,11,15,.55)}
.hero-text p{margin:0;max-width:62ch;font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(8,11,15,.5)}
.hero-text strong{color:#fff}
/* Zustand "Fahrzeug abgestellt": der Hinweistext ist entfernt, der Platz
   bleibt, damit der Heldenbereich beim Wechsel nicht springt. Zwei Zeilen
   der normalen Absatzschrift (16px * 1.55). */
.hero-text p.hero-platz{min-height:50px}
.hero-knoepfe{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px;
  margin-top:20px;justify-content:center}
/* Der Schalter im Heldenbild ist ein Formular, sieht aber aus wie die
   Knoepfe daneben. */
.hero-schalter{margin:0;display:inline-flex}
.hero-knoepfe .knopf.zweit{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45)}
.hero-knoepfe .knopf.zweit:hover{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.75)}
@media (min-width:760px){
  /* 90px hoeher als vorher: +45 oben, +45 unten. Ueber die Innenabstaende,
     nicht ueber min-height - der Inhalt ist hoeher als jede Mindesthoehe,
     die Mindesthoehe haette also gar nichts bewirkt. */
  .hero-innen{min-height:430px;padding:97px 0}
  .hero-text{margin-top:34px}
  .hero-text h1{font-size:38px}
}
@media (min-width:1100px){
  .hero-innen{min-height:420px}
}
/* Mit Hintergrundbild ist der Kopfbereich am Rechner so hoch wie im
   Altshop der Fremdshops: das Bild traegt dort die Seite, und ein
   flacher Streifen sieht aus, als sei es abgeschnitten. Ohne Bild
   bleibt es bei den Hoehen darueber - eine leere Flaeche von 620 Pixeln
   waere nur Leerlauf. */
@media (min-width:900px){
  .hero.mit-bild .hero-innen{min-height:620px}
}
/* --- Die drei Zusagen unter dem Kopfbereich (nur Fremdshops) --------- */
/* Im Altshop drei schwebende Kaesten mit festen Pixelabstaenden, die auf
   dem Telefon uebereinanderfielen (includes/home.asp 1038). Hier ein
   Raster: drei Spalten am Rechner, eine auf dem Telefon. Die
   Ueberschrift nimmt die Akzentfarbe des Shops - im Altshop ist es
   layout_button_color, dieselbe Farbe. */
.fr-zusagen{border-bottom:1px solid var(--rand);background:var(--flaeche)}
.fr-zusagen .innen{max-width:var(--breite);margin:0 auto;padding:18px 12px;
  display:grid;gap:14px 22px;grid-template-columns:1fr}
.frz-feld{display:flex;align-items:center;justify-content:center;
  gap:14px;min-width:0}
.frz-feld .ic{width:34px;height:34px;flex:0 0 auto;color:var(--text);
  stroke-width:1.3}
.frz-feld strong{display:block;font-size:16px;font-weight:800;
  letter-spacing:.01em;text-transform:uppercase;color:var(--akzent);
  line-height:1.2}
.frz-feld span{display:block;font-size:12px;font-weight:300;
  letter-spacing:.02em;text-transform:uppercase;color:var(--leise);
  line-height:1.35}
@media (min-width:760px){
  .fr-zusagen .innen{grid-template-columns:repeat(3,1fr);padding:22px 18px}
}

/* --- Produkt-Special, wenn es ohne Kopfbereich steht ------------------ */
.special{position:relative;display:block;margin:0 0 24px;border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:var(--text)}
.special img{display:block;width:100%;height:auto}
.special-knopf{display:inline-flex;align-items:center;min-height:38px;
  padding:8px 16px;border-radius:var(--rk);background:var(--cta);color:var(--cta-fg);
  font-size:13px;font-weight:750;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none}
a.special .special-knopf{position:absolute;right:18px;bottom:18px}
.special.sonderposten{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:22px;background:var(--text);color:#fff}
.special.sonderposten .sp-text{flex:1 1 300px;display:grid;gap:7px}
.special.sonderposten strong{font-size:23px;letter-spacing:-.02em}
.special.sonderposten span{font-size:14.5px;color:rgba(255,255,255,.78);line-height:1.5}
/* Das Herstellerbild des Specials fuellte die ganze Inhaltsbreite - bei
   1320 Pixeln war das Logo groesser als alles andere auf der Seite.
   Jetzt 40 Prozent davon, also um 60 Prozent kleiner, und mittig. */
.specialkopf{margin:0 auto 20px;border-radius:var(--r);overflow:hidden;
  width:40%;max-width:40%;text-align:center}
.specialkopf img{display:block;width:100%;height:auto;margin:0 auto}
/* --- Herstellershops: PERFORMANCE INSIDE! ----------------------------- */
.pikopf{margin:0 0 22px;text-align:center}
.pikopf h1,.pikopf h2{margin:0 0 8px;font-size:34px;font-weight:900;
  letter-spacing:-.03em;text-transform:uppercase;line-height:1.05;color:var(--cta)}
.pikopf p{margin:0;font-size:15px;color:var(--leise)}
@media (min-width:760px){
  .pikopf h1,.pikopf h2{font-size:46px}
  .pikopf.gross h1{font-size:58px}
}
/* Hoechstens drei nebeneinander - wie im Altcode, der je Reihe eine
   Tabelle mit drei Zellen setzt. Darueber wuerden die Kacheln schmal und
   die Motive unkenntlich. */
.pikacheln{display:grid;gap:18px;margin:0 0 26px;grid-template-columns:1fr}
@media (min-width:680px){ .pikacheln{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .pikacheln{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} }
.pikachel{display:flex;flex-direction:column;background:var(--flaeche);
  border:1px solid var(--rand);border-radius:var(--rk);overflow:hidden;
  text-decoration:none;color:var(--text);text-align:center;
  transition:box-shadow var(--an),transform var(--an)}
.pikachel:hover{box-shadow:var(--sch-karte);transform:translateY(-2px)}
/* Das Bild ist Hintergrund, nicht <img> - der Altcode schneidet die Motive
   ueber background-position zu, und so bleiben alle Kacheln gleich hoch. */
.pibild{position:relative;display:block;aspect-ratio:16/11;min-height:180px;
  background:var(--f2);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.pientdecken{position:absolute;left:0;bottom:14px;padding:6px 13px;
  background:var(--cta);color:var(--cta-fg);font-size:12px;font-weight:750;
  letter-spacing:.02em}
.piname{display:block;padding:16px 14px 4px;font-size:21px;font-weight:800;
  letter-spacing:-.01em;color:var(--cta)}
.pizeile{display:block;padding:0 14px;font-size:13.5px;color:var(--leise)}
.pischw{display:block;padding:3px 14px 20px;font-size:13.5px;color:var(--leise);
  line-height:1.4}
.pishops{margin-top:8px}

/* --- Top-Hersteller: die Logoreihe unter "Performance inside!" -------- */
/* Im Altshop ein Gitter weit unter der Fahrzeugauswahl, absolut gesetzt
   mit margin-top:500px - davor stand ein grosser leerer Streifen. Hier
   schliesst die Reihe dicht an den Block darueber an: oben nur so viel
   Luft, dass sie sich davon loest.
   Eine Zeile statt eines Gitters, dafuer schiebbar - mit je einem Pfeil
   links und rechts, die nur dastehen, wenn es etwas zu schieben gibt. */
/* min-width:0 ist hier KEIN Schmuck, sondern das Wichtigste an der
   Regel: .topmarken steht als Kind in .eingang, und das ist ein
   Raster. Ein Rasterkind ist von sich aus mindestens so breit wie
   sein Inhalt - und der Inhalt ist eine Flexzeile aus zwei Dutzend
   Kacheln zu 136px, also rund 2600px. Das hat die Spalte und damit
   die GANZE Startseite auseinandergezogen: die Kacheln von
   "Performance inside!" wurden riesig und liefen rechts aus dem Bild.
   overflow-x:auto allein hilft dagegen nicht - es nimmt der Zeile
   nur die Bildlaufleiste, nicht ihre Mindestbreite. */
.topmarken{margin:-4px 0 26px;min-width:0;max-width:100%}
/* Die Ueberschrift ist eine ganz gewoehnliche Abschnittsueberschrift -
   dieselbe Groesse und derselbe rote Streifen davor wie bei "Hersteller"
   darunter. Dafuer steht sie im Markup als direktes Kind von <section>;
   die Regel dazu steht oben bei h2. Hier nur der Abstand nach oben, den
   h2 von Haus aus mitbringt. */
.topmarken>h2{margin-top:0}

.tm-band{position:relative;min-width:0}
.tm-reihe{display:flex;gap:10px;min-width:0;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:2px 0}
.tm-reihe::-webkit-scrollbar{display:none}

/* Die Logos kommen aus /graphics2/logos/ in sehr verschiedenen
   Seitenverhaeltnissen - deshalb ein fester Kasten und object-fit, sonst
   steht die Reihe krumm. Grau, bis die Maus daraufkommt: so traegt kein
   Fremdlogo die Seite, und trotzdem ist jedes zu erkennen. */
.tm-kachel{flex:0 0 auto;scroll-snap-align:start;
  display:grid;place-items:center;width:188px;height:104px;padding:14px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche);
  transition:border-color var(--an),box-shadow var(--an)}
@media (min-width:760px){
  .tm-kachel{width:230px;height:126px;padding:18px}
}
.tm-kachel:hover{border-color:var(--rand-stark);box-shadow:var(--sch)}
.tm-kachel img{max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1);opacity:.72;
  transition:filter var(--an),opacity var(--an)}
.tm-kachel:hover img{filter:none;opacity:1}
/* Ohne Logodatei steht das Kuerzel oder der Langname da - besser als ein
   leerer Kasten oder ein zerbrochenes Bild. */
.tm-kachel.ohne span{font-size:12.5px;font-weight:750;text-align:center;
  line-height:1.25;color:var(--text);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
/* Die letzte Kachel ist kein Hersteller, sondern der Weg zu allen. Sie
   stand frueher als Verweis neben der Ueberschrift - dort nahm sie der
   Ueberschrift den Platz und sah aus wie ein zweiter Titel. */
.tm-kachel.tm-mehr{border-style:dashed;background:var(--f2)}
.tm-kachel.tm-mehr span{display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:800;color:var(--akzent);text-align:center;
  line-height:1.25}
.tm-kachel.tm-mehr .ic{width:17px;height:17px}
.tm-kachel.tm-mehr:hover{border-color:var(--akzent);background:var(--flaeche)}

/* Die Pfeile liegen UEBER den Raendern der Zeile, nicht daneben - so
   bleibt die volle Breite fuer die Logos. */
.tm-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:1px solid var(--rand-stark);border-radius:50%;
  background:var(--flaeche);color:var(--text);
  font:inherit;font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 2px 10px rgba(18,26,38,.18)}
.tm-pfeil:hover{border-color:var(--text)}
.tm-pfeil[hidden]{display:none}
/* Die Pfeile bleiben INNERHALB der Zeile. Ragten sie darueber hinaus,
   schoeben sie die Seite waagerecht auf. */
.tm-pfeil.links{left:4px}
.tm-pfeil.rechts{right:4px}
@media (prefers-reduced-motion:reduce){ .tm-reihe{scroll-behavior:auto} }
/* --- Anmelden oder als Gast bestellen -------------------------------- */
.kassenwahl{display:grid;gap:18px;margin:0 0 20px}
@media (min-width:860px){ .kassenwahl{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kw-spalte{padding:20px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);display:flex;flex-direction:column}
.kw-spalte h2{margin:0 0 8px;font-size:20px}
.kw-spalte .merk{margin:0 0 14px;font-size:14px;color:var(--leise)}
.kw-spalte .feld{margin-bottom:12px}
.kw-spalte .merkliste{margin:0 0 14px}
.kw-spalte .aktionen{margin-top:auto}
/* --- Kundencenter: Vorgaenge aus der Warenwirtschaft JTL -------------
   Eine Zeile je Vorgang, darunter eine aufklappbare Zeile mit den
   Positionen. <details> statt JavaScript - das klappt auch, wenn das
   Skript nicht laedt. */
.jtlliste{width:100%;border-collapse:collapse}
.jtlliste th{text-align:left;font-weight:600;font-size:13px;color:#5c6672;
  border-bottom:1px solid #e4e8ed;padding:6px 8px}
.jtlliste td{padding:6px 8px;border-bottom:1px solid #f0f3f6;vertical-align:top}
.jtlliste th.zahl,.jtlliste td.zahl{text-align:right;white-space:nowrap}
.jtlliste tr.jtldetail td{border-bottom:1px solid #e4e8ed;padding:0 8px 8px}
.jtlliste tr.jtldetail summary{cursor:pointer;font-size:13px;color:#5c6672;
  padding:4px 0}
.jtlpos{width:100%;border-collapse:collapse;margin:4px 0 8px;
  background:#f7f9fb}
.jtlpos th{text-align:left;font-weight:600;font-size:12px;color:#5c6672;
  padding:4px 6px;border-bottom:1px solid #e4e8ed}
.jtlpos td{padding:4px 6px;font-size:13px;border-bottom:1px solid #edf1f5}
.jtlpos th.zahl,.jtlpos td.zahl{text-align:right;white-space:nowrap}
@media (max-width:700px){
  .jtlliste th:nth-child(4),.jtlliste td:nth-child(4){display:none}
  .jtlpos th:nth-child(7),.jtlpos td:nth-child(7){display:none}
}

/* --- Weg bis zur Bestellung ------------------------------------------ */
.schritte{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 22px;padding:0;
  list-style:none;counter-reset:none}
.schritte li{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;
  border:1px solid var(--rand);border-radius:var(--rp);background:var(--flaeche);
  font-size:13.5px;color:var(--sehr-leise)}
.schritte .nr{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--f3);
  color:var(--leise);font-size:12px;font-weight:800}
.schritte li.jetzt{border-color:var(--text);color:var(--text);font-weight:700}
.schritte li.jetzt .nr{background:var(--text);color:#fff}
.schritte li.fertig{color:var(--leise)}
.schritte li.fertig .nr{background:var(--gruen-f);color:var(--gruen)}
.schritte a{color:inherit}
/* --- Aktionsleiste des Warenkorbs ------------------------------------- */
.korbaktionen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px;margin:22px 0 0;padding-top:20px;
  border-top:1px solid var(--rand)}
.ka-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ka-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ka-merk{font-size:12.5px;color:var(--sehr-leise)}

/* --- Zusammenstellung an einen Kunden schicken ------------------------ */
/* Sieht nur der Sachbearbeiter, und zwar nur von den Adressen des Hauses
   aus (lib/Korbsenden.asp). Deshalb ruhig und zugeklappt: es ist ein
   Werkzeug im Laden, keine Handlung, zu der der Kunde eingeladen wird.
   <details> statt eines Javascript-Fensters - ein zugeklapptes Formular
   schickt nichts ab, und ohne Skript geht es trotzdem auf. */
.korbsenden{margin:22px 0 0;border:1px dashed var(--rand-stark);
  border-radius:var(--r);background:var(--f2)}
.korbsenden>summary{display:flex;align-items:center;gap:9px;padding:12px 15px;
  cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:var(--leise)}
.korbsenden>summary::-webkit-details-marker{display:none}
.korbsenden>summary::marker{content:""}
.korbsenden>summary:hover{color:var(--text)}
.korbsenden>summary .ic{width:17px;height:17px;flex:0 0 auto}
.korbsenden[open]>summary{border-bottom:1px solid var(--rand);color:var(--text)}
.ks-innen{display:grid;gap:14px;padding:16px 15px}
.ks-innen .speichern{margin:0}
/* Der Haken fuer die Kopie steht als eigene Zeile zwischen Feldern und
   Knopf - mit dem Kaestchen VOR dem Text, so wie Haken ueberall stehen. */
.kshaken{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--leise)}
.kshaken input{flex:0 0 auto;width:17px;height:17px;margin:0}
.knopf.gross{min-height:50px;padding:12px 24px;font-size:16.5px}
.knopf.gross .ic{width:20px;height:20px}
.knopf.aus{background:var(--f3);color:var(--sehr-leise);border-color:var(--rand);
  cursor:not-allowed;box-shadow:none}
/* Auf dem Telefon bleibt das Mengenfeld der Listenansicht vorbehalten.
   Im Raster sind die Kacheln dafuer zu schmal; dort fuehrt der Knopf
   wie bisher mit der Vorgabemenge in den Warenkorb. */
@media (max-width:620px){
  .liste:not(.zeilen) input.korbmenge{display:none}
  .liste:not(.zeilen) .karte-aktionen .korbzeile .karte-cta{flex:1 1 100%}
}
@media (max-width:620px){
  .korbaktionen{flex-direction:column;align-items:stretch}
  .ka-rechts{align-items:stretch}
  .ka-rechts .knopf{justify-content:center}
  .ka-merk{text-align:center}
}
/* --- Begriffssuche: die drei Wege des Altshops ----------------------- */
.begriffkopf{margin:0 0 20px}
.begriffkopf h2{margin:0 0 6px;font-size:28px;font-weight:350;letter-spacing:-.01em}
.begriff-wo{margin:0 0 10px;font-size:15px;color:var(--text);font-weight:600}
.begriffkopf .merk{margin:0 0 12px;font-size:14px;color:var(--leise);max-width:80ch}
.begriff-schalter{margin:0}
.lagerschalter{display:inline-flex;align-items:center;min-height:32px;padding:5px 14px;
  border-radius:var(--rk);background:var(--rot);color:#fff;font-size:13px;font-weight:650;
  text-decoration:none}
.lagerschalter:hover{filter:brightness(1.1)}
.option{margin:0 0 26px;padding:16px 18px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche)}
.option h3{margin:0 0 8px;font-size:17px;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px}
.option .merk{margin:0 0 12px;font-size:13.5px;color:var(--leise);max-width:85ch}
/* Suchtipps, wenn nichts gefunden wurde. Bewusst eine Liste und keine
   Textwand: wer gerade nichts gefunden hat, liest nicht, sondern sucht
   die eine Zeile, die auf seinen Fall passt. */
.suchtipps{margin:0;padding:0 0 0 20px;max-width:85ch;
  font-size:13.5px;line-height:1.6;color:var(--leise)}
.suchtipps li{margin:0 0 5px}
.suchtipps li:last-child{margin-bottom:0}
.suchtipps em{font-style:normal;font-family:ui-monospace,Consolas,monospace;
  font-size:12.5px;color:var(--text);background:var(--f2);padding:1px 5px;border-radius:3px}
.opt-nr{color:var(--rot);font-weight:800;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase}
.neu{padding:2px 7px;border-radius:var(--rk);background:var(--rot);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.04em}
.sube-gruppen{display:grid;gap:6px}
.sube-gruppen a{display:block;padding:11px 14px;border-radius:var(--rk);
  background:var(--f2);color:var(--text);font-size:14.5px;text-decoration:none;
  border:1px solid transparent;transition:background var(--an),border-color var(--an)}
.sube-gruppen a:hover{background:var(--f3);border-color:var(--rand-stark)}
/* Aufklappbare Gruppe: der Pfeil dreht sich, der Inhalt faehrt darunter auf */
.sube-gruppen a.sube-gruppe{display:flex;align-items:center;gap:10px}
.sube-gruppen a.sube-gruppe::before{content:"\203A";flex:0 0 auto;font-size:19px;
  line-height:1;color:var(--sehr-leise);transition:transform var(--an)}
.sube-gruppen a.sube-gruppe[aria-expanded="true"]{background:var(--text);
  border-color:var(--text);color:#fff}
.sube-gruppen a.sube-gruppe[aria-expanded="true"]::before{transform:rotate(90deg);
  color:#fff}
.sube-inhalt{margin:2px 0 10px;padding:12px;border:1px solid var(--rand);
  border-radius:var(--rk);background:var(--f2)}
.sube-inhalt .liste{margin:0}
.sube-inhalt .artikel{background:var(--flaeche)}
.sube-inhalt .merk{margin:10px 0 0}
.laedt{margin:0;padding:10px 2px;font-size:13.5px;color:var(--leise)}
.themakopf{margin:18px 0 10px;font-size:20px;font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase}
.bilderliste{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bildkachel{display:flex;flex-direction:column;border:1px solid var(--rand-stark);
  border-radius:var(--rk);overflow:hidden;background:var(--flaeche);
  text-decoration:none;color:var(--text);transition:box-shadow var(--an)}
.bildkachel:hover{box-shadow:var(--sch-karte)}
.bk-bez{padding:5px 7px;border-bottom:1px solid var(--rand);font-size:10.5px;
  line-height:1.3;text-align:center;color:var(--leise);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk-bild{display:flex;align-items:center;justify-content:center;height:92px;padding:6px}
.bk-bild img{max-width:80px;max-height:80px;width:auto;height:auto}
.bk-kein{font-size:10.5px;color:var(--sehr-leise)}
.bk-fuss{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5px 7px;border-top:1px solid var(--rand)}
.bk-nr{font-size:10.5px;color:var(--leise);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bk-ampel{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--rot)}
.bk-ampel.ja{background:var(--gruen)}
.bk-ampel.warn{background:var(--gelb)}
/* --- US-Sonderbestellungen im Warenkorb ------------------------------- */
.spuhead{margin:28px 0 10px;font-size:23px;color:var(--rot);letter-spacing:-.01em}
.spuliste{width:100%;border-collapse:collapse}
.spuliste th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sehr-leise);padding:0 8px 7px;
  border-bottom:1px solid var(--rand)}
.spuliste td{padding:12px 8px;border-bottom:1px solid var(--rand);vertical-align:top}
.spuliste .zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.spulogo{display:block;max-width:70px;max-height:28px;width:auto;height:auto;
  margin:0 0 6px}
.spudaten{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0 0;
  font-size:13px}
.spudaten dt{color:var(--sehr-leise)}
.spudaten dd{margin:0;color:var(--leise)}
/* --- US-Import-Service ------------------------------------------------ */
.importkopf{margin:0 0 22px}
.importkopf h1{margin-bottom:8px}
.importkopf .hdl{display:inline-block;padding:3px 10px;border-radius:var(--rp);
  background:var(--gruen-f);color:var(--gruen);font-size:13px;font-weight:700;
  vertical-align:middle}
.importkopf p{margin:0;font-size:15.5px;color:var(--leise);line-height:1.6}
.uslogos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 22px;margin:0 0 26px;padding:18px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche)}
.uslogo img{max-width:92px;max-height:38px;width:auto;height:auto;
  filter:grayscale(1);opacity:.8;transition:filter var(--an),opacity var(--an)}
.uslogos:hover .uslogo img{filter:none;opacity:1}
.uslogo-klein{max-width:56px;max-height:30px;width:auto;height:auto}
.usspalten{display:grid;gap:26px;margin:0 0 24px}
@media (min-width:1000px){ .usspalten{grid-template-columns:1.1fr .9fr} }
.faktorspalte h2,.ustext h2{margin:0 0 6px;font-size:23px}
.leise{color:var(--leise);font-size:14px}
.ustext h3{margin:18px 0 4px;font-size:17px}
.ustext h3.warn{color:var(--rot)}
.ustext p{margin:0;font-size:14.5px;color:var(--leise);line-height:1.6}
.faktoren{width:100%;border-collapse:collapse;margin:14px 0 18px;
  font-variant-numeric:tabular-nums}
.faktoren th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sehr-leise);padding:0 10px 7px;
  border-bottom:1px solid var(--rand)}
.faktoren td{padding:9px 10px;border-bottom:1px solid var(--rand);font-size:14.5px}
.faktoren .r,.kalktabelle .r,.kalkergebnis .r{text-align:right}
.faktoren .fk-ven{display:flex;align-items:center;gap:10px}
.faktoren .fk-ven img{max-width:46px;max-height:26px;width:auto;height:auto}
.spezial{padding:2px 7px;border-radius:var(--rk);background:var(--rot);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.diagzeile td{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:var(--sehr-leise);background:var(--f2)}
/* --- Kalkulator ------------------------------------------------------- */
.kalkkopf{margin:0 0 20px}
.kalkkopf h2{margin:0 0 6px}
.kalkkopf p{margin:0;font-size:14.5px;color:var(--leise);line-height:1.6}
.kalkform{margin:0 0 18px}
.kalkzahl{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.kalkzahl .bez{font-size:13.5px;font-weight:700;color:var(--leise)}
.kalktabelle,.kalkergebnis{width:100%;border-collapse:collapse;margin:0 0 18px}
.kalktabelle th,.kalkergebnis th{text-align:left;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sehr-leise);
  padding:0 8px 7px;border-bottom:1px solid var(--rand);white-space:nowrap}
.kalktabelle td,.kalkergebnis td{padding:7px 8px;border-bottom:1px solid var(--rand);
  font-size:14.5px;vertical-align:middle}
.kalktabelle input,.kalktabelle select{width:100%;min-width:90px}
.kalktabelle input.gross-schrift{text-transform:uppercase}
.korbzelle{white-space:nowrap}
.korbform{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.korbform input[type=number]{width:62px;text-align:center}
.ushinweis td{font-size:13px;color:var(--gelb);background:var(--gelb-f);
  border-bottom:1px solid var(--rand);line-height:1.5}
.usvorschlag td{font-size:13px;background:var(--f2)}
/* --- Fremdshop: Teile direkt aus den USA ------------------------------ */
/* Dieselben Daten wie beim KTS-Shop, bewusst ANDERS gebaut: der KTS-Shop
   hat Logowand, zwei Spalten und eine Faktortabelle, der Fremdshop ein
   helles Band mit drei Schritten und die Faktoren als Karten. Wer beide
   Seiten nebeneinander legt, soll nicht denselben Laden sehen. */
.fr-usband{display:grid;gap:22px;margin:0 0 26px;padding:24px 26px;
  border:1px solid var(--rand);border-left:5px solid var(--akzent);
  border-radius:var(--r);background:var(--flaeche)}
@media (min-width:980px){ .fr-usband{grid-template-columns:1.15fr .85fr;gap:34px} }
.fub-marke{display:inline-block;margin:0 0 10px;padding:4px 11px;
  border-radius:var(--rp);background:var(--f2);border:1px solid var(--rand);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--leise)}
.fub-logo{display:inline-flex;margin:0 0 12px}
.fub-logo img{display:block;height:40px;width:auto}
.fub-text h1{margin:0 0 10px;font-size:30px;line-height:1.15;letter-spacing:-.02em}
.fub-text p{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--leise)}
.fub-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 20px;border-radius:var(--rk);background:var(--cta);
  color:var(--cta-fg);font-size:15px;font-weight:800;text-decoration:none}
.fub-cta:hover{filter:brightness(1.08)}
.fub-cta .ic{width:18px;height:18px}
/* Die drei Schritte: eine Spalte, Zahl links, Text rechts. */
.fub-schritte{display:grid;gap:12px;margin:0;padding:0;list-style:none;
  align-content:start}
.fub-schritte li{display:grid;grid-template-columns:34px 1fr;gap:4px 14px;
  align-items:start;padding:12px 14px;border-radius:var(--rk);background:var(--f2)}
.fubs-nr{grid-row:1 / span 2;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--akzent);color:#fff;font-size:15px;font-weight:800}
.fub-schritte strong{font-size:15px;font-weight:750;line-height:1.3}
.fub-schritte span:not(.fubs-nr){font-size:13.5px;line-height:1.5;color:var(--leise)}
/* Die Faktoren als Karten statt als Tabelle. */
.fr-fksatz{margin:0 0 26px}
.fks-kopf{margin:0 0 14px}
.fks-kopf h2{margin:0 0 4px;font-size:23px}
.fks-kopf p{margin:0;font-size:14px;color:var(--leise)}
.fk-karten{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.fk-karte{display:flex;flex-direction:column;gap:6px;padding:14px;
  border:1px solid var(--rand);border-radius:var(--rk);background:var(--flaeche);
  transition:border-color var(--an)}
.fk-karte:hover{border-color:var(--akzent)}
.fkk-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:30px}
.fkk-kopf img{max-width:84px;max-height:30px;width:auto;height:auto}
.fkk-kuerzel{font-size:12px;font-weight:800;letter-spacing:.08em;
  color:var(--sehr-leise)}
.fkk-sonder{padding:2px 7px;border-radius:var(--rk);background:var(--akzent);
  color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase}
.fkk-name{font-size:13px;line-height:1.35;color:var(--leise);
  overflow-wrap:anywhere}
.fkk-faktor{display:flex;align-items:baseline;gap:6px;margin-top:auto;
  font-variant-numeric:tabular-nums}
.fkk-faktor span{font-size:13px;color:var(--sehr-leise)}
.fkk-faktor strong{font-size:24px;font-weight:800;letter-spacing:-.02em}
.fkk-zweit{font-size:12px;color:var(--sehr-leise);font-variant-numeric:tabular-nums}
.fk-karte.diag{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;color:var(--sehr-leise);background:var(--f2)}
.fks-tun{margin:18px 0 0}
/* Die Hinweise: drei Felder UNTER der Liste, nicht als Spalte daneben. */
.fr-ushinweise{display:grid;gap:14px;margin:0 0 24px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fr-ushinweise article{padding:16px 18px;border:1px solid var(--rand);
  border-radius:var(--rk);background:var(--f2)}
.fr-ushinweise h3{margin:0 0 6px;font-size:16px}
.fr-ushinweise p{margin:0;font-size:13.5px;line-height:1.6;color:var(--leise)}
/* Dieselbe Karte auf der Startseite: hell und liegend, nicht die dunkle
   Doppelkarte des KTS-Shops. */
.fr-dienst{margin:0 0 26px;padding:24px 26px;border:1px solid var(--rand);
  border-left:5px solid var(--akzent);border-radius:var(--r);
  background:var(--flaeche)}
.frd-marke{display:inline-block;margin:0 0 10px;padding:4px 11px;
  border-radius:var(--rp);background:var(--f2);border:1px solid var(--rand);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--leise)}
.frd-logo{display:inline-flex;margin:0 0 12px}
.frd-logo img{display:block;height:36px;width:auto}
.frd-text h2{margin:0 0 8px;font-size:25px;line-height:1.18;letter-spacing:-.02em}
.frd-text p{margin:0 0 12px;max-width:62ch;font-size:15px;line-height:1.6;
  color:var(--leise)}
.frd-punkte{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;padding:0;
  list-style:none}
.frd-punkte li{position:relative;padding-left:18px;font-size:13.5px;
  color:var(--leise)}
.frd-punkte li::before{content:"";position:absolute;left:0;top:7px;width:8px;
  height:8px;border-radius:50%;background:var(--akzent)}
.frd-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 20px;border-radius:var(--rk);background:var(--cta);
  color:var(--cta-fg);font-size:15px;font-weight:800;text-decoration:none}
.frd-cta:hover{filter:brightness(1.08)}
.frd-cta .ic{width:18px;height:18px}
.markenfeld .frd-marke{flex:0 0 auto;margin:0}
/* --- Fremdshop: der Vorstellungstext am Fuss der Startseite ---------- */
/* Der Altshop baut ihn aus zwei floats in einer Tabelle, 370 und 600 Pixel
   breit, das Bild als background-image mit fester Verschiebung - auf dem
   Telefon steht das uebereinander und schneidet ab. Hier zwei Spalten, die
   unter 860px untereinander rutschen, und das Bild als echtes <img>. */
.fr-shoptext{display:grid;gap:22px;margin:30px 0 6px;padding-top:26px;
  border-top:1px solid var(--rand)}
.frs-bild{overflow:hidden;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--f2)}
/* Untereinander (Telefon): das Bild bekommt eine feste Hoehe, sonst
   entscheidet das Seitenverhaeltnis der Datei, wie viel Platz es nimmt. */
.frs-bild img{display:block;width:100%;height:240px;object-fit:cover}
@media (min-width:860px){
  .fr-shoptext{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;
    align-items:stretch}
  /* Nebeneinander: das Bild ist GENAU so hoch wie der Text - nicht
     hoeher, nicht niedriger. Die Spalte streckt sich auf die Zeilenhoehe
     (align-items:stretch), und das Bild fuellt sie absolut aus. Mit
     height:100% allein genuegt es nicht: ein <img> ohne Bezugshoehe
     faellt auf seine eigene Groesse zurueck, und dann steht es wieder
     oben in einer zu hohen Spalte. */
  .frs-bild{position:relative;min-height:100%}
  .frs-bild img{position:absolute;inset:0;width:100%;height:100%}
}
.frs-text h2{margin:0 0 14px;font-size:30px;line-height:1.1;
  letter-spacing:-.02em;text-transform:uppercase}
.frs-text h2::before{content:none}
.frs-text p{margin:0 0 14px;font-size:15px;line-height:1.65;color:var(--leise);
  text-align:justify;hyphens:auto}
.frs-text p:last-child{margin-bottom:0}
@media (max-width:560px){
  .frs-text h2{font-size:23px}
  .frs-text p{text-align:left;hyphens:manual}
}
@media (max-width:560px){
  .fr-usband,.fr-dienst{padding:18px 16px}
  .fub-text h1{font-size:24px}
  .frd-text h2{font-size:21px}
  /* Zwei Karten nebeneinander - bei vierzig Lieferanten waere eine
     Karte je Zeile eine sehr lange Seite. */
  .fk-karten{gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .fk-karte{padding:11px}
  .fkk-faktor strong{font-size:21px}
}
/* Hinweis auf einen Link, der den Shop verlaesst */
.extern{font-size:.85em;opacity:.7;margin-left:2px}
/* --- Getroffene Auswahl, Gitter zugeklappt --------------------------- */
/* Zwei Dutzend Kacheln zwischen der Auswahl und den Teilen heisst: nach
   jedem Klick erst einmal scrollen. Steht die Wahl, zeigt diese Zeile sie
   an, und die Teile stehen direkt darunter. Das Gitter ist nicht weg,
   sondern einen Klick entfernt - <details> kann das ohne Javascript. */
.bgauswahl{margin:0 0 22px}
.bgauswahl>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:10px 14px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);cursor:pointer;list-style:none;
  transition:border-color var(--an),background var(--an)}
.bgauswahl>summary::-webkit-details-marker{display:none}
.bgauswahl>summary::marker{content:""}
.bgauswahl>summary:hover{border-color:var(--cta);background:var(--f2)}
.bgauswahl>summary:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.bw-bild{flex:0 0 auto;display:grid;place-items:center;width:64px;height:48px}
.bw-bild img{display:block;width:auto;height:auto;max-width:64px;max-height:48px}
.bw-text{flex:1 1 150px;display:grid;gap:1px;min-width:0}
.bw-klein{font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sehr-leise)}
.bw-text strong{font-size:15px;font-weight:750;line-height:1.3}
.bw-tun{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--akzent)}
.bw-tun::after{content:"\25BE";font-size:10px}
.bgauswahl[open]>summary .bw-tun::after{content:"\25B4"}
/* Aufgeklappt sitzt das Gitter als Fortsetzung der Zeile darunter. */
.bgauswahl[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.bgauswahl[open] .bgkacheln,.bgauswahl[open] .bgliste{margin:0;padding:14px;
  border:1px solid var(--rand);border-top:0;
  border-radius:0 0 var(--e-ur) var(--e-ul);background:var(--f2)}
@media (max-width:560px){
  .bgauswahl>summary{padding:9px 11px;gap:8px 11px}
  .bw-bild{width:52px;height:40px}
  .bw-bild img{max-width:52px;max-height:40px}
  .bw-text strong{font-size:14px}
}
/* Kopfband ueber den Untergruppen */
.bgband{display:flex;align-items:center;gap:18px;margin:0 0 20px;padding:16px 18px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--f2)}
.bgband img{flex:0 0 auto;width:auto;height:auto;max-width:132px;max-height:92px;
  object-fit:contain}
.bgband h2{margin:0 0 5px;font-size:22px;letter-spacing:-.02em}
.bgband p{margin:0;font-size:14px;color:var(--leise);line-height:1.5}
@media (max-width:620px){
  .bgband{flex-direction:column;align-items:flex-start;gap:12px}
  .bgband img{max-width:96px;max-height:68px}
  .bgband h2{font-size:19px}
}
/* Die Baugruppenwahl der Begriffssuche sieht aus wie die Chips, ist aber
   KEINE .bgchips: die blendet ab 900 px aus, weil die Baugruppen dort in
   der Seitenleiste stehen. Hier sind sie der einzige Weg zum Ergebnis. */
.bgwahl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;
  padding:10px;border:1px solid var(--rand);border-radius:var(--r);background:var(--f2)}
.bgwahl a{display:inline-flex;align-items:center;min-height:38px;padding:7px 13px;
  border:1px solid var(--rand-stark);border-radius:var(--rp);background:var(--flaeche);
  color:var(--text);text-decoration:none;font-size:14px;font-weight:650;
  transition:background var(--an),border-color var(--an),color var(--an)}
.bgwahl a:hover{border-color:var(--cta);background:var(--flaeche);color:var(--text)}
.bgwahl a.aktiv{background:var(--text);border-color:var(--text);color:#fff}
.kopf.hell .korb-zahl{box-shadow:0 0 0 2px var(--kopf-bg)}
.hauptnav{display:none}

/* =====================================================================
   3. Kategoriebalken - waagerecht, scrollbar auf dem Telefon
   ===================================================================== */
.katbalken{position:relative;z-index:55;overflow:hidden;background:var(--kopf-bg2);
  color:var(--kopf-fg);border-bottom:1px solid rgba(0,0,0,.14)}
.katbalken.hell{color:var(--text);border-bottom:1px solid var(--rand)}
.katbalken{position:relative}
/* Rechts eine Abblendkante: zeigt, dass der Streifen weitergeht. */
.katbalken::after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--kopf-bg2))}
.katbalken .innen{max-width:var(--breite);margin:0 auto;padding:0 12px;
  display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.katbalken .innen>*,.katbalken .kat-liste>*,.katbalken .kat-dienste>*{scroll-snap-align:start}
.katbalken .innen::-webkit-scrollbar{display:none}
.katbalken a,.katbalken label{position:relative;display:inline-flex;align-items:center;gap:8px;
  flex:0 0 auto;min-height:44px;padding:10px 13px;color:inherit;text-decoration:none;
  font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background var(--an),color var(--an)}
.katbalken a::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:3px;
  background:var(--cta);transform:scaleX(0);transform-origin:left;
  transition:transform var(--an)}
.katbalken a:hover::after,.katbalken a.aktiv::after{transform:scaleX(1)}
.katbalken a:hover,.katbalken label:hover{background:rgba(255,255,255,.10)}
.katbalken.hell a:hover,.katbalken.hell label:hover{background:rgba(0,0,0,.05)}
.katbalken a.aktiv{font-weight:750}
.katbalken .kat-alle{font-weight:750}
.katbalken .kat-alle .ic{width:18px;height:18px}
/* US-Import und Marine: zwei eigene Geschaeftsfelder, nicht nur zwei
   weitere Kategorien. Deshalb rechts abgesetzt, mit Trennlinie davor,
   Symbol und Signalfarbe - sie sollen ins Auge fallen, ohne die
   Kategorien zu verdraengen. */
.katbalken .kat-spezial{position:relative;margin-left:auto;gap:7px;
  font-weight:750;color:#fff}
.katbalken .kat-spezial+.kat-spezial{margin-left:0}
.katbalken .kat-spezial::before{content:"";position:absolute;left:0;top:12px;bottom:12px;
  width:1px;background:rgba(255,255,255,.22)}
.katbalken .kat-spezial .ic{width:18px;height:18px;color:var(--cta)}
.katbalken .kat-spezial:hover{background:rgba(255,255,255,.1)}
/* Das Hersteller-Special: letzter Punkt im Streifen, Name in Gelb, Logo
   darunter haengend - wie im Altshop (_script_head_NEU_21022023.asp 933).
   Das Gelb ist dasselbe: #ffdf00. Kein Blinken: der Altcode laesst den
   Punkt blinken (.blink_me2), das kostet heute mehr Aufmerksamkeit, als
   es wert ist, und faellt unter prefers-reduced-motion ohnehin weg. */
.katbalken .kat-special{color:#ffdf00;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase}
.katbalken .kat-special:hover{color:#fff;background:rgba(255,223,0,.14)}
.katbalken .kat-special::after{background:#ffdf00}
.katbalken.hell .kat-special{color:#8a6300}
.katbalken.hell .kat-special:hover{color:var(--text)}
/* Das Logo des Specials steht ganz rechts in der Fahrzeugzeile, hinter
   dem Schild "Haendlerpreise", und ragt nach oben in den Streifen
   hinein. Es steht IM Fluss, nicht absolut - was es nach unten
   heraussteht, bekommt dadurch von selbst seinen Platz und liegt nicht
   auf dem, was darunter kommt.

   Mittig zur Schrift des Menuepunkts: .ksb-mess traegt denselben Text in
   derselben Schrift und mit denselben Innenabstaenden, hat aber keine
   Hoehe und ist unsichtbar. Dadurch ist die Spalte genau so breit wie
   der Punkt darueber, und das Logo zentriert sich darin von selbst.

   Die Masse stehen an .fahrzeugzeile (--ksb-h, --ksb-hoch); die 9 Pixel
   sind das obere Polster der Zeile, die das Logo ueberspringen muss, um
   wirklich an der Unterkante des Streifens zu beginnen. */
.ksb-spalte{display:none;align-self:flex-start;margin-left:auto;
  margin-top:calc(0px - var(--ksb-hoch) - 9px);
  margin-bottom:calc(0px - 9px);pointer-events:none}
/* Steht das Schild "Haendlerpreise" davor, schiebt SCHON DAS sich nach
   rechts (.rolle hat margin-left:auto). Dann darf das Logo keinen
   zweiten automatischen Abstand bekommen, sonst teilen sich die beiden
   den freien Platz und stehen in der Mitte der Zeile. */
.rolle + .ksb-spalte{margin-left:0}
.ksb-mess{display:block;height:0;overflow:hidden;visibility:hidden;
  padding:0 13px;font-size:14px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.ksb-spalte a{pointer-events:auto;display:block;text-align:center}
.ksb-spalte img{display:inline-block;height:var(--ksb-h);width:auto;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.45))}
/* Das Logo erst ab 900 Pixel - die Regel steht bei der Fahrzeugzeile,
   weil dort auch die Abschneidekante faellt. Das Schild
   "Haendlerpreise" bleibt immer. */

/* --- Kategorie-Fenster unter dem Streifen ----------------------------- */
/* Der Altshop oeffnet hier ein DHTML-Fenster mit allen Hauptbaugruppen
   (_script_layer.asp Zeile 270-375). Dasselbe, nur: ein Raster statt der
   drei fest gerechneten Spalten, und es bleibt offen, bis man es schliesst
   - im Altshop fiel es schon zu, wenn die Maus beim Hinuntergehen kurz
   danebenlag (onmouseout am Fenster selbst). */
.kat-pfeilchen{width:0;height:0;margin-left:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7;
  transition:transform var(--an)}
#kat-schalter:checked ~ .katbalken .kat-alle .kat-pfeilchen{transform:rotate(180deg)}
#kat-schalter:checked ~ .katbalken .kat-alle{background:rgba(255,255,255,.14)}
.katbalken.hell .kat-alle{color:inherit}
#kat-schalter:checked ~ .katbalken.hell .kat-alle{background:rgba(0,0,0,.07)}

/* Nur im geoeffneten Zustand nach vorn. Ich hatte hier fest z-index:90
   stehen, damit das Kategoriefenster ueber der Seitenleiste (80) liegt.
   Dadurch stand die Leiste aber auch im Ruhezustand VOR der Kopfzeile:
   .kopf hat z-index:100 und bildet einen eigenen Stapelkontext, also zaehlt
   fuer die Vorschlagsliste nach aussen nur die Zahl der Kopfzeile - die
   Leiste mit 90 lag darueber und schnitt die Suchvorschlaege ab.
   Geschlossen steht die Leiste jetzt auf 56 (ueber dem Inhalt, unter der
   Kopfzeile), geoeffnet auf 90; die Kopfzeile steht inzwischen auf 100
   und damit in beiden Faellen darueber. Das Umschalten macht
   :has() und zusaetzlich die Klasse .offen aus dem Skript, damit es auch
   in aelteren Browsern ohne :has() funktioniert. */
.katzone{position:relative;z-index:56}
.katzone:has(#kat-schalter:checked),.katzone.offen{z-index:90}
.katpanel{position:absolute;top:100%;left:0;right:0;z-index:54;
  background:var(--flaeche);border-bottom:1px solid var(--rand);
  box-shadow:0 18px 40px rgba(12,18,28,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.7,.3,1),visibility .18s}
#kat-schalter:checked ~ .katpanel:not(.gpanel){opacity:1;visibility:visible;transform:none}
/* Die Garage haengt am ZWEITEN Kaestchen. Beide Fenster sind Geschwister
   beider Kaestchen - ohne :not() zoege der Kategorie-Schalter auch die
   Garage auf. */
#garage-schalter:checked ~ .katpanel.gpanel{opacity:1;visibility:visible;transform:none}
/* Der Garagenknopf im Streifen. Die Zahl dahinter sagt, wie viele
   Fahrzeuge drinstehen - derselbe Gedanke wie beim Warenkorb. */
.garage-zahl{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--cta);color:var(--cta-fg);
  font-size:11.5px;font-weight:800;line-height:1}
#garage-schalter:checked ~ .katbalken .kat-garage .kat-pfeilchen{transform:rotate(180deg)}
#garage-schalter:checked ~ .katbalken .kat-garage{background:rgba(255,255,255,.14)}
#garage-schalter:checked ~ .katbalken.hell .kat-garage{background:rgba(0,0,0,.07)}
.kp-innen{max-width:var(--breite);margin:0 auto;padding:16px 12px 18px}
.kp-kopf{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid var(--rand)}
.kp-kopf strong{font-size:17px;letter-spacing:-.015em}
.kp-fz{font-size:13px;color:var(--leise)}
.kp-zu{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--rp);color:var(--leise);cursor:pointer}
.kp-zu:hover{background:var(--f2);color:var(--text)}
.kp-zu .ic{width:18px;height:18px}

/* Je Zeile Bild links, Name und Fahrzeug rechts - dieselbe Anordnung wie
   im Altcode, nur ohne die Hintergrundbild-Bastelei. */
.kp-gitter{display:grid;gap:4px 12px;
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.kp-gitter a{display:flex;align-items:center;gap:10px;min-width:0;
  padding:6px 9px;border-radius:var(--r);color:inherit;text-decoration:none;
  border:1px solid transparent;transition:background var(--an),border-color var(--an)}
.kp-gitter a:hover{background:var(--f2);border-color:var(--rand)}
.kp-bild{flex:0 0 36px;width:36px;height:36px;border-radius:var(--rp);
  background:var(--f2);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.kp-bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.kp-name{min-width:0;font-size:14px;font-weight:650;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-fuss{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--rand);font-size:13px}
.kp-fuss a,.kp-fuss label{color:var(--leise);cursor:pointer}
.kp-fuss a:hover,.kp-fuss label:hover{color:var(--text)}

@media (min-width:900px){
  .kp-innen{padding:20px 20px 22px}
  .kp-gitter{gap:6px 18px}
}
/* Auf dem Telefon nimmt das Fenster die ganze Hoehe unter dem Streifen -
   zwanzig Gruppen in einer Spalte brauchen Platz zum Schieben. */
@media (max-width:899px){
  .katpanel{max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .kp-gitter{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .katpanel{transition:none}
  .kat-pfeilchen{transition:none}
}
.katbalken.hell .kat-spezial{color:var(--text)}
.katbalken.hell .kat-spezial::before{background:rgba(18,26,38,.18)}
.katbalken .kat-spezial .extern{font-size:11px;opacity:.75;margin-left:-3px}
/* Dezenter Hinweis, dass der Streifen weitergeht. Die Abblendkante allein
   reicht nicht - sie sieht nach Schatten aus, nicht nach "hier geht es
   weiter". Der Pfeil steht nur da, wenn wirklich noch etwas kommt: das
   Skript weiter unten setzt .katbalken.mehr und nimmt es am Ende wieder
   weg. Er ist anklickbar und schiebt eine Bildschirmbreite weiter, bleibt
   aber aus der Tabulatorfolge und fuer Vorleseprogramme unsichtbar - jeder
   Eintrag ist ohnehin schon erreichbar. */
.kat-pfeil{position:absolute;right:3px;top:50%;transform:translateY(-50%);z-index:3;
  display:none;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:inherit;cursor:pointer;
  opacity:.85;transition:opacity var(--an),background var(--an)}
.katbalken.hell .kat-pfeil{background:rgba(18,26,38,.08)}
.kat-pfeil .ic{width:17px;height:17px}
.kat-pfeil:hover{opacity:1;background:rgba(255,255,255,.26)}
.katbalken.hell .kat-pfeil:hover{background:rgba(18,26,38,.16)}
.katbalken.mehr .kat-pfeil-rechts{display:inline-flex}
/* Derselbe Knopf spiegelverkehrt am Anfang des Streifens. Er kommt erst,
   wenn wirklich schon etwas nach links weggeschoben wurde - am Anfang
   steht dort nichts. Wo genau er sitzt, haengt an der Fensterbreite:
   unterhalb von 900px scrollt der ganze Streifen, dann gehoert er an
   dessen linken Rand. Darueber scrollt nur die Kategorienliste, und die
   faengt hinter "Alle Kategorien" an - diese Breite ist nicht fest, also
   setzt das Skript den Wert. */
.kat-pfeil-links{right:auto;left:3px}
.kat-pfeil-links .ic{transform:scaleX(-1)}
/* Rechts blendet der Streifen in die beiden Dienste ab; links gab es diese
   Kante noch nicht, und der Knopf sass mit harter Grenze auf dem
   angeschnittenen Wort. Die Abblendung haengt am Knopf selbst, weil seine
   Lage je nach Fensterbreite wechselt - so wandert sie mit, ohne dass es
   eine zweite Stelle braucht. z-index:-1 legt sie hinter die runde
   Flaeche des Knopfes, aber noch vor den Streifen. */
.kat-pfeil-links::before{content:"";position:absolute;top:-40px;bottom:-40px;left:-18px;
  width:92px;z-index:-1;pointer-events:none;
  background:linear-gradient(to right,var(--kopf-bg2) 0 54px,transparent 92px)}
.katbalken.zurueck .kat-pfeil-links{display:inline-flex}
@media (prefers-reduced-motion:reduce){
  .kat-pfeil{transition:none}
}
.katbalken .kat-ende{margin-left:12px;font-weight:750}
.katbalken .kat-ende .ic{width:18px;height:18px}
/* Die Dienste stehen ab 1200px in einem eigenen Block rechts am Rand -
   dort ist Platz fuer alle sieben, keiner wird angeschnitten. Darunter
   bleibt alles eine einzige Scrollzeile: display:contents loest die
   beiden Umhuellungen dort wieder auf, als stuenden die Links direkt in
   .innen, und der ganze Streifen laesst sich schieben. Die Grenze lag
   frueher bei 900px; mit der Garage als siebtem Punkt reichte das nicht
   mehr - zwischen 900 und 1200px lief der letzte Punkt unter der
   rechten Kante weg. */
.katbalken .kat-liste,.katbalken .kat-dienste{display:contents}
@media (min-width:1200px){
  .katbalken .innen{overflow:visible}
  .katbalken .kat-liste{display:flex;align-items:stretch;gap:2px;
    flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .katbalken .kat-liste::-webkit-scrollbar{display:none}
  /* Rechtsbuendig: margin-left:auto schiebt die Gruppe an den rechten
     Rand. Dieser Block gilt erst ab 1200px - erst dort ist Platz fuer
     alle sieben Punkte neben dem Einstieg. Darunter faellt der ganze
     Streifen in eine Scrollzeile zurueck (display:contents oben),
     dann ist kein Punkt abgeschnitten, sondern alles erreichbar. */
  .katbalken .kat-dienste{position:relative;display:flex;align-items:stretch;
    flex:0 1 auto;min-width:0;margin-left:auto;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .katbalken .kat-dienste::-webkit-scrollbar{display:none}
  /* Die Abblendkante links der Dienste stammte aus der Zeit, als hier noch
     die Baugruppenliste (.kat-liste) stand und unter den Diensten
     weglief. Die Liste gibt es nicht mehr - der Verlauf verdunkelte nur
     noch ein Stueck leeren Streifen. */
  /* Ab hier scrollt nur noch .kat-liste - der Pfeil gehoert an deren Ende,
     also auf die Abblendkante vor den beiden Diensten und nicht an den
     rechten Rand des ganzen Streifens. */
  .kat-pfeil-rechts{right:auto;left:-35px}
  .katbalken .kat-spezial{margin-left:0}
  .katbalken::after{display:none}
}

/* Die Dienste standen ab 1180px einmal MITTIG (Raster 1fr auto 1fr).
   Mit der Garage als siebtem Punkt ist die Gruppe so breit, dass
   "mittig" und "rechts" fast dasselbe waren - sie steht jetzt wieder
   rechtsbuendig am Rand, wie der Warenkorb darueber. */

/* =====================================================================
   4. Fahrzeugzeile und Mitteilung
   ===================================================================== */
.fahrzeugzeile{background:var(--flaeche);border-bottom:1px solid var(--rand);font-size:14px;
  /* Hoehe des Special-Logos und wie weit es nach oben in den Streifen
     ragt. Die 6.5 sind gerechnet: der Menuepunkt ist 44 Pixel hoch, die
     Textzeile darin 21 (14px mal Zeilenhoehe 1.5) und steht mittig - die
     Schrift endet also 11.5 Pixel ueber der Unterkante des Streifens,
     und 11.5 - 5 = 6.5 laesst das Logo 5 Pixel darunter beginnen. */
  --ksb-h:46px; --ksb-hoch:6.5px}
.fahrzeugzeile .innen{max-width:var(--breite);margin:0 auto;padding:9px 12px;
  display:flex;align-items:center;gap:12px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
/* Ab hier passt alles nebeneinander - und das Logo darf nach oben aus
   der Zeile herausragen, ohne abgeschnitten zu werden. */
@media (min-width:900px){
  .fahrzeugzeile .innen{overflow:visible}
  .ksb-spalte{display:block}
}
.fahrzeugzeile .innen::-webkit-scrollbar{display:none}
.fz-chip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:5px 12px 5px 9px;border-radius:var(--rp);background:var(--f3);
  font-weight:650;white-space:nowrap}
.fz-chip .ic{width:18px;height:18px;color:var(--leise)}
/* Als Link behaelt der Chip Farbe und Form - nur der Zeiger und ein
   Rahmen beim Ueberfahren zeigen, dass er klickt. Der Rahmen kommt aus
   currentColor, damit er auf der hellen wie auf der dunklen Zeile sitzt
   (die Variante "werkstatt" faerbt den Chip weiss auf dunkel). */
a.fz-chip{color:inherit;text-decoration:none;cursor:pointer;
  transition:box-shadow var(--an)}
a.fz-chip:hover{box-shadow:inset 0 0 0 1px currentColor}
a.fz-chip:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.fz-leer{color:var(--leise);flex:0 0 auto}
.fz-wechsel{flex:0 0 auto;color:var(--akzent);font-weight:700;text-decoration:none;
  white-space:nowrap;border-bottom:1px solid transparent;transition:border-color var(--an)}
.fz-wechsel:hover{border-bottom-color:currentColor}
/* Schalter "Universelles Zubehoer" / "Fahrzeug wieder aktivieren".
   Sieht aus wie die uebrigen Bedienelemente der Zeile, ist aber ein
   Formular - die Auswahl darf sich nur auf Knopfdruck aendern, nie ueber
   einen Link, den ein Lesezeichen oder ein Vorauslader anfassen koennte. */
.fz-schalter{flex:0 0 auto;margin:0;display:flex}
.fz-schalter button{display:inline-flex;align-items:center;gap:6px;
  min-height:30px;padding:4px 11px;border:1px solid var(--rand-stark);
  border-radius:var(--rp);background:var(--flaeche);color:var(--akzent);
  font:inherit;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap;
  transition:background var(--an),border-color var(--an)}
.fz-schalter button:hover{background:var(--f2);border-color:var(--akzent)}
.fz-schalter .ic{width:15px;height:15px}
/* "<Fahrzeug> wieder aktivieren" war ein Umriss: Rahmen und Schrift in
   der Knopffarbe, Flaeche durchsichtig. Auf dem dunklen Band stand damit
   gelbe Schrift auf fast schwarzem Grund - zu lesen, aber nur mit Muehe,
   und von einem Hinweis nicht zu unterscheiden. Jetzt gefuellt: Flaeche
   in der Knopffarbe, Schrift in deren Gegenfarbe (--cta-fg), die bei
   jedem Shop zur eingestellten Knopffarbe mitgerechnet wird. Damit ist
   es auch das, was es ist - der Knopf, der das Fahrzeug zurueckholt. */
.fz-schalter.zurueck button{border-color:var(--cta);background:var(--cta);
  color:var(--cta-fg);font-weight:750}
.fz-schalter.zurueck button:hover{background:var(--cta);border-color:var(--cta);
  filter:brightness(1.08)}
.fz-schalter.zurueck button:active{filter:brightness(.94)}
/* Der Fokusrahmen muss sich von der gefuellten Flaeche abheben, nicht von
   der Seite - deshalb in der Schriftfarbe des Knopfes, mit Abstand. */
.fz-schalter.zurueck button:focus-visible{outline:2px solid var(--cta-fg);
  outline-offset:-4px}
.fz-chip.universell{background:var(--f3);color:var(--text)}
.rolle{flex:0 0 auto;margin-left:auto;padding:3px 10px;border-radius:var(--rp);
  background:var(--gruen-f);color:var(--gruen);font-size:12.5px;font-weight:750;white-space:nowrap}
/* --- Mitteilung des Shops, als Laufschrift in der Fahrzeugzeile ------ */
/* Sie stand als eigenes Band quer unter dem Kategoriestreifen und nahm
   dort Hoehe weg, bevor der Besucher etwas vom Laden gesehen hatte.
   Jetzt laeuft sie im freien Raum der Fahrzeugzeile.

   Die Breite ist zweistufig: .mitt-lauf nimmt den Rest der Zeile
   (flex:1 1 0), .mitt-fenster darin 80 Prozent davon. "80 Prozent des
   vorhandenen Platzes" ist damit woertlich das, was es sagt, und links
   wie rechts bleibt Luft zu den Chips und zum Logo.

   min-width:0 ist noetig, sonst nimmt das Element im Flexraster seine
   Inhaltsbreite als Mindestmass - der Text ist eine einzige lange Zeile
   (white-space:nowrap), und die Zeile wuerde die Chips hinausschieben. */
.mitt-lauf{flex:1 1 0;min-width:0;display:flex;justify-content:center;
  align-items:center;overflow:hidden}
.mitt-fenster{width:80%;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,
    #000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,
    #000 calc(100% - 24px),transparent)}
.mitt-bahn{display:inline-flex;gap:64px;padding-left:100%;
  font-size:13.5px;font-weight:650;color:var(--gelb);
  animation-name:mitt-lauf;animation-timing-function:linear;
  animation-iteration-count:infinite}
.mitt-lauf:hover .mitt-bahn{animation-play-state:paused}
.mitt-bild{height:14px;vertical-align:-2px}
@keyframes mitt-lauf{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Wer Bewegung abbestellt hat, bekommt die Mitteilung stehend - einmal,
   abgeschnitten statt laufend. */
@media (prefers-reduced-motion:reduce){
  .mitt-bahn{animation:none;padding-left:0}
  .mitt-bahn span+span{display:none}
  .mitt-fenster{text-overflow:ellipsis}
}
/* Auf schmalen Geraeten ist in der Zeile nichts uebrig: dort bekommt die
   Mitteilung eine eigene Zeile unter den Chips, ueber die volle Breite. */
@media (max-width:860px){
  .fahrzeugzeile .innen{flex-wrap:wrap}
  .mitt-lauf{flex:1 1 100%;order:9;border-top:1px solid var(--rand);
    padding-top:6px}
  .mitt-fenster{width:100%}
}

/* =====================================================================
   5. Inhaltsraster - Inhalt liegt auf weissem Blatt
   ===================================================================== */
/* Oben genauso viel Luft wie an den Seiten: der Abstand ueber dem ersten
   Kasten war die Summe aus dem Polster von .inhalt, dem Polster von main
   und dem oberen Aussenabstand des ersten Kastens - zusammen gut das
   Doppelte des Seitenabstands. Jetzt traegt nur noch main das Polster,
   und zwar oben wie seitlich dasselbe. */
.inhalt{max-width:var(--breite);margin:0 auto;padding:0 0 44px;
  display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
main{min-width:0;background:var(--flaeche);padding:12px 12px 26px;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
main>*:first-child{margin-top:0}

/* --- Schublade: auf dem Telefon von links, auf dem Desktop die Spalte */
.schalter{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Auf dem Telefon stehen die Baugruppen OBEN in der Schublade. Die sechs
   Seitenlinks stehen schon in der Tableiste am unteren Rand - sie zuerst
   zu zeigen hiess, bei jedem Gruppenwechsel an ihnen vorbeizuscrollen. */
.seitenleiste{display:flex;flex-direction:column}
.seitenleiste>.schub-kopf{order:0}
.seitenleiste>.bg-nav{order:1}
.seitenleiste>.schub-nav{order:2;margin-top:14px;border-top:1px solid var(--rand);
  border-bottom:0;padding-top:12px}
.seitenleiste>.schub-fuss{order:3}
/* Dieselbe Rechnung wie bei der Korbleiste: die Schublade deckt die ganze
   Hoehe ab und muss deshalb UEBER der klebenden Kopfzeile liegen. Hier
   stand 80 - das genuegte, solange der Kopf auf 60 lag. Seit er wegen der
   Vorschlagsliste auf 100 steht, schob er sich ueber die offene
   Schublade: oben lugte noch die Zeile "MENUE x" hervor, darunter lag
   der Kopf mit Logo und Korb quer darueber. 110 wie die Korbleiste,
   der Schirm eine Stufe darunter. */
.seitenleiste{position:fixed;top:0;bottom:0;left:0;z-index:110;
  width:min(320px,86vw);overflow-y:auto;background:var(--flaeche);
  border-right:1px solid var(--rand);box-shadow:var(--sch-hoch);
  padding:0 0 26px;transform:translateX(-102%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.schalter:checked ~ .inhalt .seitenleiste{transform:none}
.schirm{position:fixed;inset:0;z-index:105;background:rgba(18,26,38,.45);
  opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:pointer}
.schalter:checked ~ .inhalt .schirm{opacity:1;pointer-events:auto}
html:has(.schalter:checked){overflow:hidden}
.schub-kopf{display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px 10px 16px;border-bottom:1px solid var(--rand);position:sticky;top:0;
  background:var(--flaeche);z-index:2}
.schub-kopf strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.schub-zu{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  border-radius:var(--rk);color:var(--leise);transition:background var(--an)}
.schub-zu:hover{background:var(--f2)}
.schub-nav{display:block;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--rand)}
.schub-nav a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 16px;
  color:var(--text);text-decoration:none;font-weight:600;transition:background var(--an),color var(--an)}
.schub-nav a:hover{background:var(--f2)}
.schub-nav a .ic{color:var(--leise)}
.schub-nav a.aktiv{color:var(--akzent);box-shadow:inset 3px 0 0 var(--akzent)}
.schub-nav a.aktiv .ic{color:var(--akzent)}
.schub-fuss{padding:14px 16px 0;margin-top:14px;border-top:1px solid var(--rand);
  display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px}
.schub-fuss a{color:var(--leise)}

/* --- Baugruppen, drei Ebenen ---------------------------------------- */
.bg-nav{font-size:15px}
.bg-titel{padding:0 16px 8px;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sehr-leise)}
/* Kippschalter "Nur Angebote" - in der Baugruppenspalte und ueber den
   Kacheln. Breite und Innenabstand folgen den Navigationszeilen daneben,
   damit er nicht wie ein Fremdkoerper wirkt. */
.nurang{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 16px 10px;padding:7px 12px;min-height:0;border-radius:999px;
  border:1px solid var(--rand);background:var(--f2);
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;color:var(--leise)}
.nurang:hover{border-color:var(--akzent);color:var(--text)}
.nurang .nurang-bahn{flex:0 0 32px;width:32px;height:18px;border-radius:999px;
  background:var(--rand-stark);position:relative;transition:background .15s}
.nurang .nurang-knopf{position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:left .15s}
/* Eingeschaltet gruen - das ist die Farbe, die im Shop "trifft zu" meint
   (Lagerampel, Haendlerrolle). Rot sass hier falsch: es ist die Farbe der
   Knoepfe, nicht die eines Zustands. */
.nurang[aria-checked="true"]{border-color:var(--gruen);color:var(--gruen);
  background:var(--gruen-f);font-weight:800}
.nurang[aria-checked="true"]:hover{border-color:var(--gruen);color:var(--gruen)}
.nurang[aria-checked="true"] .nurang-bahn{background:var(--gruen)}
.nurang[aria-checked="true"] .nurang-knopf{left:16px}
.nurang-kachel{margin:0 0 14px;max-width:260px}
@media (max-width:700px){.nurang-kachel{max-width:none}}
/* "Nur Lagerware" steht direkt unter "Nur Angebote" - beide gehoeren
   sichtbar zusammen, deshalb der enge Abstand dazwischen. */
.nurang + .nurang{margin-top:-4px}
.nurang-kachel + .nurang-kachel{margin-top:-8px}
.bg-nav .ebene1{border-bottom:1px solid var(--rand)}
.bg-nav .ebene1:last-child{border-bottom:0}
.bg-nav a{display:flex;align-items:center;min-height:46px;padding:9px 16px;
  color:var(--text);text-decoration:none;transition:background var(--an),color var(--an),padding-left var(--an)}
.bg-nav a:hover{background:var(--f2);padding-left:19px}
.bg-nav a.aktiv{background:var(--f3);color:var(--akzent);font-weight:700;
  box-shadow:inset 3px 0 0 var(--akzent)}
/* Das Gruppenbild in der Zeile. Feste Breite, damit die Namen in einer
   Flucht stehen - auch dort, wo zu einer Gruppe kein Bild liegt. Der
   Altshop setzt es als 20px-Hintergrund; als eigenes Feld bleibt der
   Name lesbar, wenn er zweizeilig wird. */
.bg-nav .ebene1>a{gap:10px}
.bgn-bild{flex:0 0 auto;display:grid;place-items:center;width:26px;height:22px}
.bgn-bild img{display:block;max-width:26px;max-height:22px;width:auto;height:auto}
.bgn-name{min-width:0}
.bg-nav .ebene2 a{padding-left:30px;font-size:14px;border-top:1px solid var(--rand)}
.bg-nav .ebene2 a:hover{padding-left:33px}
.bg-nav .ebene3 a{padding-left:46px;font-size:14px;min-height:42px;color:var(--leise);
  border-top:1px dotted var(--rand)}
.bg-nav .ebene3 a:hover{color:var(--text);padding-left:49px}

/* --- Tableiste unten, nur auf kleinen Geraeten ---------------------- */
.tableiste{position:fixed;left:0;right:0;bottom:0;z-index:65;
  height:calc(var(--leiste-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--rand)}
.tableiste a{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;
  color:var(--leise);text-decoration:none;font-size:10.5px;font-weight:700;
  letter-spacing:.01em;transition:color var(--an)}
.tableiste a.aktiv{color:var(--akzent)}
.tableiste a.aktiv::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--akzent)}
.tableiste .zahl{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;
  padding:0 4px;display:grid;place-items:center;border-radius:999px;
  background:var(--cta);color:var(--cta-fg);font-size:10.5px;font-weight:800;line-height:1}

/* =====================================================================
   6. Formularelemente
   ===================================================================== */
/* input:not([type]) steht bewusst mit drin: ein <input> ohne type-Angabe
   ist laut HTML ein Textfeld, fiel hier aber durch jede Regel und kam in
   der Browservorgabe heraus - flacher, eckig, mit anderem Rahmen als das
   Feld daneben. */
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=number],input[type=search],input[type=date],input:not([type]),
select,textarea{font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);background:var(--flaeche);
  color:var(--text);-webkit-appearance:none;appearance:none;max-width:100%;
  transition:border-color var(--an),box-shadow var(--an)}
select{padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6672' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
input[type=number]{width:92px;text-align:right}
input:focus,select:focus,textarea:focus{border-color:var(--akzent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 18%,transparent)}
label{font-size:14px}
button{font:inherit}
button.knopf,a.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:13px 22px;border:0;border-radius:var(--rk);
  background:var(--cta);color:var(--cta-fg);font-size:16px;font-weight:750;
  letter-spacing:.01em;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(18,26,38,.18);
  transition:filter var(--an),transform var(--an),box-shadow var(--an)}
button.knopf:hover,a.knopf:hover{filter:brightness(1.08);box-shadow:0 4px 12px rgba(18,26,38,.20)}
button.knopf:active,a.knopf:active{filter:brightness(.94);transform:translateY(1px);box-shadow:none}
button.knopf:disabled{background:var(--f3);color:var(--sehr-leise);cursor:not-allowed;
  filter:none;box-shadow:none;transform:none}
button.tun{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 18px;border:0;border-radius:var(--rk);
  background:var(--akzent);color:var(--akzent-fg);font-weight:700;cursor:pointer;
  transition:filter var(--an),transform var(--an)}
button.tun:hover{filter:brightness(1.3)}
button.tun:active{transform:translateY(1px)}
button.klein,a.klein{min-height:40px;padding:8px 14px;border:1px solid var(--rand-stark);
  border-radius:var(--rk);background:var(--flaeche);color:var(--text);font-size:14px;
  font-weight:650;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:background var(--an),border-color var(--an)}
button.klein:hover,a.klein:hover{background:var(--f2);border-color:var(--leise)}
button.weg{min-height:40px;padding:8px 13px;border:1px solid #ecc8c3;border-radius:var(--rk);
  background:var(--flaeche);color:var(--rot);font-size:14px;font-weight:650;cursor:pointer;
  transition:background var(--an)}
button.weg:hover{background:var(--rot-f)}
form.inline{display:inline}
form.korb{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Kaufbereich der Artikelkarte: Menge oben, darunter zwei Knoepfe in
   gleicher Breite und mit deutlichem Abstand zueinander. */
.kaufzeile{margin-top:18px;display:grid;gap:18px}
.kaufzeile form{margin:0;display:block}
.kaufzeile form.korb{margin:0;display:grid;gap:10px;
  grid-template-columns:auto minmax(96px,120px);align-items:center}
.kaufzeile form.korb label{grid-column:1;justify-self:start}
.kaufzeile form.korb input[type=number]{grid-column:2;width:100%}
.kaufzeile form.korb button{grid-column:1/-1;margin-top:4px}
.kaufzeile button.knopf,.kaufzeile a.knopf,
.kaufzeile button.klein,.kaufzeile a.klein{width:100%;justify-content:center}
.kaufzeile button.klein,.kaufzeile a.klein{min-height:50px;font-size:15.5px;font-weight:700}
/* "Gebot abgeben" - nur bei Sonderposten, direkt unter dem Kaufbereich.
   Bewusst KEIN voller Knopf in Signalfarbe: daneben steht "In den
   Warenkorb", und zwei gleich laute Knoepfe nebeneinander lassen den
   Besucher raten, welcher der normale Weg ist. Hier also ein umrandeter
   Knopf in der Signalfarbe - sichtbar, aber zweite Wahl. */
.gebotzeile{display:grid;gap:7px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--rand)}
.gebot-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:11px 18px;border:1px solid var(--rot);border-radius:var(--rk);
  background:0 0;color:var(--rot);font-size:15px;font-weight:800;
  text-decoration:none;cursor:pointer;transition:background var(--an),color var(--an)}
.gebot-knopf:hover{background:var(--rot);color:#fff}
.gebot-merk{font-size:13px;color:var(--sehr-leise);line-height:1.45}
form.suche{position:relative;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;
  padding:14px;border:1px solid var(--rand);border-radius:var(--r);background:var(--f2)}
form.suche input[type=text]{flex:1 1 220px;min-width:0}
label.wahl{display:flex;align-items:center;gap:10px;min-height:52px;padding:11px 14px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);background:var(--flaeche);
  cursor:pointer;font-size:15px;transition:border-color var(--an),background var(--an),box-shadow var(--an)}
label.wahl:hover{border-color:var(--rand-stark);background:var(--f2)}
label.wahl.aktiv{border-color:var(--akzent);background:var(--f2);
  box-shadow:0 0 0 1px var(--akzent);font-weight:650}
label.wahl input{margin:0;width:20px;height:20px;accent-color:var(--akzent);flex:0 0 auto}
/* --- Zahlung und Versand, nach Zahlart gruppiert --------------------- */
/* Der Altshop stellt die Zahlart als Ueberschrift und darunter die
   moeglichen Versandwege mit ihrem Preis. Dieselbe Ordnung hier. */
/* Kompakt, weil es hier viele Zeilen werden koennen: vier Zahlarten mal
   drei Versandwege sind zwoelf Kaestchen. Jede Zeile einzeilig (Weg und
   Produkt nebeneinander statt untereinander) und auf breiten Fenstern
   zwei Spalten - damit passt der ganze Schritt auf einen Bildschirm,
   statt dass man zum Vergleichen scrollen muss. */
.zahlblock{margin:0 0 10px;padding:9px 11px 11px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.zahlblock legend{padding:0 6px;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.za-code{margin-left:7px;padding:1px 6px;border-radius:var(--rp);background:var(--f3);
  color:var(--sehr-leise);font-size:10.5px;font-weight:700;letter-spacing:.04em}
.wahlliste{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.wahlliste label.wahl{align-items:center;gap:9px;min-height:44px;padding:7px 10px;
  font-size:14.5px;background:var(--flaeche)}
.wahlliste label.wahl input{width:18px;height:18px}
/* Weg und Produkt in EINER Zeile, durch einen Mittelpunkt getrennt. Wird
   es eng, bricht das Produkt um - deshalb flex-wrap statt nowrap. */
.w-weg{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:1px 7px;min-width:0}
.w-weg strong{font-weight:650}
.w-prod{font-size:13px;color:var(--leise)}
.w-prod::before{content:"\00b7";margin-right:6px;color:var(--rand-stark)}
.w-preis{flex:0 0 auto;align-self:center;font-size:15px;font-weight:750;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.w-leer{font-size:12.5px;font-weight:600;color:var(--sehr-leise)}
label.wahl.ohnepreis{opacity:.75}
.wahlmerk{margin:0 0 14px;font-size:12.5px;color:var(--sehr-leise);line-height:1.5}
/* --- Zahlung und Versand als Matrix ----------------------------------- */
/* Eine Zeile je Versandweg, eine Spalte je Zahlart. Der Vorgaenger war je
   Zahlart ein Kasten mit allen Wegen darin - auf dem Schreibtisch zwanzig
   Kaestchen, viele davon wortgleich, und zum Vergleichen taugte es nicht.
   Hier steht jeder Weg einmal, und was DHL bei Vorkasse statt bei
   Nachnahme kostet, steht nebeneinander. */
.zvfeld{margin:0 0 14px;padding:0;border:0}
.zvtab{width:100%;border-collapse:separate;border-spacing:8px;table-layout:fixed}
.zvtab .zv-kopf th{padding:0 2px 2px;text-align:center;vertical-align:bottom;
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--leise)}
.zvtab .zv-kopf th:first-child{text-align:left;width:30%}
.zv-za{display:flex;flex-direction:column;align-items:center;gap:5px}
.zv-za .za-logo{height:18px}
.zv-zatext{line-height:1.2}
/* Der Versandweg ist die Zeilenbeschriftung - linksbuendig, zweizeilig,
   Produkt kleiner darunter. */
.zv-weg{padding:8px 4px;text-align:left;vertical-align:middle;
  font-weight:400;line-height:1.3}
/* Logo und Name des Versenders nebeneinander, das Logo in fester Breite -
   so stehen die Namen in einer Flucht, auch wenn zu einem Weg kein Bild
   hinterlegt ist. Das Produkt darunter bleibt eingerueckt. */
.zv-wegkopf{display:flex;align-items:center;gap:9px;min-width:0}
/* 50 px breit. Die Hoehe ist gedeckelt, nicht gesetzt: die Logos sind
   verschieden hoch, und object-fit:contain haelt jedes in seinem Feld,
   ohne es zu verzerren. Das Feld steht auch leer da (.va-sym gleich
   breit), damit die Namen in einer Flucht bleiben. */
.va-logo{flex:0 0 auto;width:50px;max-height:30px;object-fit:contain;
  object-position:left center}
.va-sym{flex:0 0 auto;display:grid;place-items:center;width:50px;
  color:var(--sehr-leise)}
.va-sym .ic{width:21px;height:21px}
.zv-weg strong{display:block;font-size:14.5px;font-weight:700;min-width:0}
/* Der Einzug ist die Logobreite plus der Abstand: 50 + 9. */
.zv-prod{display:block;margin-left:59px;font-size:12.5px;color:var(--leise)}
/* Das Kreuzungsfeld. Die ganze Flaeche ist anklickbar; der Radioknopf
   selbst bleibt fuer die Bedienung mit der Tastatur da, aber unsichtbar -
   zwanzig Punkte nebeneinander waren genau das Unruhige. */
.zvtab td{padding:0;vertical-align:middle}
.zv-zelle{display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:48px;padding:8px 10px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche);cursor:pointer;
  font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;
  text-align:center;transition:border-color var(--an),box-shadow var(--an),
  background var(--an)}
.zv-zelle input{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none}
.zv-zelle:hover{border-color:var(--rand-stark);background:var(--f2)}
.zv-zelle.aktiv{border-color:var(--cta);background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--cta),0 2px 10px rgba(18,26,38,.10)}
.zv-zelle.aktiv .zv-preis::before{content:"\2713";margin-right:6px;
  color:var(--cta);font-weight:900}
.zv-zelle:has(input:focus-visible){outline:2px solid var(--akzent);
  outline-offset:2px}
.zv-zelle.ohnepreis{opacity:.8;font-weight:600}
/* Leeres Kreuzungsfeld: die Kombination gibt es nicht. Ein Strich sagt
   das ruhiger als ein leeres Kaestchen. */
.zv-nix{text-align:center;color:var(--rand-stark);font-size:16px}

@media (max-width:899px){
  /* Auf dem Telefon wird aus jeder Zeile wieder eine Karte - dieselbe
     Gruppierung wie frueher, nur nach Versandweg statt nach Zahlart.
     Kombinationen, die es nicht gibt, fallen hier ganz weg: auf einem
     schmalen Schirm ist ein Strich nur Zeile. */
  .zvtab,.zvtab tbody,.zvtab tr,.zvtab th,.zvtab td{display:block}
  .zvtab{border-spacing:0}
  .zvtab .zv-kopf{display:none}
  .zvtab tr{margin:0 0 10px;padding:10px 11px 11px;border:1px solid var(--rand);
    border-radius:var(--r);background:var(--f2)}
  .zv-weg{padding:0 0 8px}
  .zv-prod{margin-left:59px}
  .zvtab td{margin-top:6px}
  .zvtab td.zv-nix{display:none}
  .zv-zelle{justify-content:space-between;min-height:44px;text-align:left}
  /* Die Zahlart steht am Schild selbst (data-za), nicht nur an der Zelle -
     attr() liest nur das eigene Element. */
  .zv-zelle[data-za]::before{content:attr(data-za);font-size:13px;
    font-weight:700;color:var(--text);letter-spacing:0;text-transform:none}
}
/* --- Fahrzeugwahl auf der Startseite --------------------------------- */
/* Eine Zeile, vier nummerierte Stufen, rechts LOS - die Form, die der
   Altshop auf der Startseite hatte. Die Kaestchen liegen auf dem dunklen
   Schaufensterbild, deshalb hell und mit etwas Durchsicht; die Stufe, die
   gerade dran ist, steht weiss heraus, die noch gesperrten bleiben matt.
   Raster statt Flex: ein Flex-Umbruch rechnet mit der Wunschbreite der
   Felder und wirft LOS in die zweite Zeile, sobald der Platz knapp wird.
   Vier Spalten mit minmax(0,1fr) schrumpfen stattdessen mit. */
/* Volle Breite des Inhaltsbereichs - dieselbe Kante wie Kopfzeile,
   Katalogleiste und die Kaesten weiter unten.
   width:100% und align-self:stretch sind beide noetig: .hero-text ist eine
   Flex-Spalte mit align-items:center, und darin bekommt ein Kind ohne
   ausdrueckliche Breite nur seine Inhaltsbreite. Ein blosses max-width
   begrenzt dann nur etwas, das ohnehin schmaler ist - die Zeile blieb bei
   der Breite ihrer laengsten Werte stehen, etwa 860px. */
.fzwahl{margin:0 0 18px;width:100%;max-width:none;align-self:stretch}
/* Auf dem Handy nimmt die Zeile die ganze Breite des Heldenbereichs. */
@media (min-width:761px){
  .fzwahl{width:100%;align-self:center}
}
/* Ab hier ist die Zeile genau so breit wie der Kasten "FOR THE DRIVERS"
   darunter - und wie jeder andere Inhalt auf weissem Blatt. Rechnung:
   .inhalt hat 22px Innenabstand, main darin 1px Rahmen und 26px
   Innenabstand - zusammen 27px je Seite. .hero-mitte hat nur 22px.
   54px weniger als die Heldenbreite trifft die Kante also auf den Punkt. */
@media (min-width:900px){
  .fzwahl{width:calc(100% - 54px)}
}
/* Dick, duenn, dick, duenn - Wort fuer Wort und ohne Leerzeichen
   dazwischen, wie die Ueberschrift im Altshop der Fremdshops. Nur wenn
   in der Verwaltung eine eigene Zeile steht (Klasse "wechsel"); sonst
   bleibt die Zeile, wie sie war. */
.fzw-kopf.wechsel{font-size:clamp(26px,5.2vw,46px);letter-spacing:-.02em;
  line-height:1.05}
.fzw-kopf.wechsel strong{font-weight:900}
.fzw-kopf.wechsel span{font-weight:300}
.fzw-kopf{margin:0 0 12px;font-size:clamp(21px,4vw,33px);font-weight:800;
  letter-spacing:-.015em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  /* Linksbuendig zum ersten Feld - der Heldenbereich zentriert sonst
     alles, und die Zeile stuende versetzt ueber den Kaestchen. */
  text-align:left}
/* Die Spalten sind unterschiedlich breit, weil die Werte es sind:
   CHEVROLET und F 150 PICKUP brauchen Platz, ein Baujahr hat vier
   Stellen. minmax(0,...) laesst jede Spalte trotzdem mitschrumpfen. */
.fzw-zeile{display:grid;align-items:stretch;gap:8px;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1.5fr) minmax(0,.85fr)
                        minmax(0,1.15fr) auto}
/* Getriebeteile haben im Altcode nur drei Stufen - kein Motor. */
.fzw-zeile.drei{grid-template-columns:minmax(0,1.35fr) minmax(0,1.55fr)
                        minmax(0,.8fr) auto}
.fzw-zeile.drei>label.fzs:nth-of-type(4){display:none}
.fzs{min-width:0;display:flex;align-items:center;gap:0;
  border-radius:3px;background:rgba(255,255,255,.94);
  box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer;
  transition:background var(--an),opacity var(--an)}
.fzs.aus{background:rgba(255,255,255,.42);cursor:default}
.fzs-nr{flex:0 0 auto;padding:0 0 0 18px;font-size:18px;font-weight:650;
  color:var(--sehr-leise)}
.fzs-nr::after{content:"|";margin:0 11px 0 12px;color:var(--rand-stark);font-weight:400}
.fzs-feld{flex:1 1 auto;min-width:0}
.fzs select{width:100%;min-height:72px;padding:14px 34px 14px 0;border:0;
  background:0 0;font:inherit;font-size:19px;color:var(--text);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6672' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:13px 8px}
.fzs select:focus{outline:2px solid var(--akzent);outline-offset:-2px}
.fzs.aus select{color:var(--sehr-leise);cursor:default;background-image:none}
/* --- Eigene Ausklappliste (Vorbild carid.com) ------------------------
   Mit Javascript tritt an die Stelle des <select> ein Knopf mit kleiner
   Beschriftung und grossem Wert, darunter die Liste. Das <select> bleibt
   im Formular stehen und traegt den Wert, ist aber ausgeblendet. Ohne
   Javascript greift nichts davon und das <select> bleibt sichtbar. */
.fzs.js{position:relative}
.fzs.js select{display:none}
.fzs-kopf{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:1px;width:100%;min-height:72px;
  padding:10px 32px 10px 0;border:0;background:0 0;font:inherit;
  text-align:left;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6672' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  background-size:13px 8px}
.fzs-kopf:disabled{cursor:default}
.fzs-kopf:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
.fzs-mini{font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sehr-leise);line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fzs-wert{font-size:18px;font-weight:650;color:var(--text);line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fzs.offen .fzs-kopf{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%235c6672' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.fzs.offen{box-shadow:0 0 0 2px var(--akzent),0 1px 3px rgba(0,0,0,.25)}
/* Die Liste ist breiter als das Feld, wenn der Eintrag es braucht. Ein
   Motor heisst "R4 | 2.20 L | 134-4 CUI | OHV | Vergaser" - auf die
   Feldbreite beschnitten stand da "R4 | 2.20 L | 134-4 CUI | OHV ...",
   und genau die Angabe, die zwei Motoren unterscheidet, fehlte. Wer
   aufklappt, will den ganzen Satz sehen.
   max-content waechst mit dem laengsten Eintrag, min-width haelt sie
   mindestens so breit wie das Feld, max-width haelt sie im Bild. Was
   dann immer noch zu lang ist, bricht um - abgeschnitten wird nichts
   mehr. Die erste max-width-Zeile ist fuer Browser ohne min(). */
.fzs-liste{position:absolute;left:0;top:calc(100% + 5px);z-index:60;
  width:max-content;min-width:100%;max-height:330px;overflow-y:auto;
  max-width:calc(100vw - 24px);
  max-width:min(560px, calc(100vw - 24px));
  -webkit-overflow-scrolling:touch;background:var(--flaeche);
  border:1px solid var(--rand-stark);border-radius:3px;
  box-shadow:0 12px 34px rgba(0,0,0,.38)}
/* Die hinteren Felder klappen nach links auf - sonst stuende die breitere
   Liste am rechten Rand halb ausserhalb des Fensters. */
.fzw-zeile>.fzs:nth-of-type(4) .fzs-liste{left:auto;right:0}
.fzw-zeile.drei>.fzs:nth-of-type(3) .fzs-liste{left:auto;right:0}
.fzs-liste ul{margin:0;padding:0;list-style:none}
.fzs-liste li{position:relative;padding:11px 14px 11px 34px;font-size:15px;
  color:var(--text);cursor:pointer;border-bottom:1px solid var(--rand);
  white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.fzs-liste li:last-child{border-bottom:0}
.fzs-liste li:hover{background:var(--f2)}
.fzs-liste li.an{font-weight:700}
.fzs-liste li.an::before{content:"";position:absolute;left:14px;top:50%;
  width:6px;height:11px;margin-top:-8px;border:solid var(--cta);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Wo die Tastatur gerade steht. Beim Tippen eines Buchstabens springt die
   Liste hierher; Enter uebernimmt den Eintrag. Deutlich sichtbar, aber
   anders als die getroffene Wahl (.an) - sonst stehen zwei Haken da. */
.fzs-liste li.voraus{background:var(--f2);
  box-shadow:inset 3px 0 0 var(--akzent)}
/* LOS steht als roter Block in derselben Reihe wie die vier Felder -
   gleiche Hoehe, gleicher Radius, nur eben in der Signalfarbe. */
.fzw-los{min-height:72px;padding:12px 34px;border:0;border-radius:3px;
  background:var(--cta);color:var(--cta-fg);font:inherit;font-size:20px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.fzw-los:hover{filter:brightness(1.1)}
.fzw-los:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Die drei Einstiege der alten Startseite als Reiter unter der Zeile:
   Fahrzeugteile, Motorenteile, Automatikgetriebeteile. Linksbuendig zum
   ersten Feld, der aktive mit rotem Strich. */
.fzw-reiter{display:flex;flex-wrap:wrap;gap:0 24px;margin:11px 0 0;
  text-align:left}
.fzw-reiter a{display:inline-block;padding:3px 0 4px;font-size:12.5px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.74);text-decoration:none;
  border-bottom:2px solid transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.6);transition:color var(--an)}
.fzw-reiter a:hover{color:#fff}
.fzw-reiter a.an{color:#fff;border-bottom-color:var(--cta)}
.fzw-reiter a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1040px){
  .fzs select{font-size:17px;padding:14px 30px 14px 0}
  .fzs-wert{font-size:17px}
  .fzs-kopf{padding-right:26px}
  .fzs-mini{font-size:10px;letter-spacing:.02em}
  .fzs-nr{padding-left:12px;font-size:16px}
  .fzs-nr::after{margin:0 7px 0 8px}
  .fzw-los{padding:12px 24px;font-size:18px}
  /* Auf schmalen Schirmen braucht BAUJAHR anteilig mehr Platz, sonst
     steht dort nur noch BAUJ... */
  .fzw-zeile{grid-template-columns:minmax(0,1.3fr) minmax(0,1.42fr)
                        minmax(0,1fr) minmax(0,1.05fr) auto}
  .fzw-zeile.drei{grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr)
                        minmax(0,1fr) auto}
}
@media (max-width:760px){
  .fzw-zeile,.fzw-zeile.drei{grid-template-columns:1fr;gap:6px}
  .fzs select{min-height:52px;font-size:16px;padding:10px 26px 10px 0}
  .fzs-kopf{min-height:56px;padding:9px 28px 9px 0}
  .fzs-wert{font-size:16px}
  /* Einspaltig: das Feld ist schon so breit wie der Schirm. Die Liste
     nimmt genau die Feldbreite und bricht um - breiter waere sie halb
     ausserhalb des Bildes, und zwar links, weil sie am Feld rechts
     haengt. */
  .fzs-liste{max-height:260px;width:auto;min-width:100%;max-width:100%;
    left:0;right:auto}
  .fzw-zeile>.fzs:nth-of-type(4) .fzs-liste,
  .fzw-zeile.drei>.fzs:nth-of-type(3) .fzs-liste{left:0;right:auto}
  .fzs-nr{font-size:15px;padding-left:13px}
  .fzs-nr::after{margin:0 8px 0 9px}
  .fzw-los{min-height:54px;font-size:17px;padding:11px 22px;margin-top:2px}
  .fzw-reiter{gap:0 16px}
  .fzw-reiter a{font-size:11.5px;letter-spacing:.06em}
}

/* --- Fahrzeugwahl als Fenster --------------------------------------- */
/* Dasselbe Formular wie im Heldenbereich, nur ueber der Seite. Der Kasten
   ist dunkel, weil die Felder dafuer gebaut sind: helle Kaestchen auf
   dunklem Grund. */
.fzbox{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;
  justify-content:center;padding:70px 20px 20px}
.fzbox[hidden]{display:none}
.fzbox-schirm{position:absolute;inset:0;background:rgba(10,14,20,.72);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.fzbox-kasten{position:relative;z-index:1;width:100%;max-width:1222px;
  padding:26px 26px 20px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,var(--kopf-bg) 0%,var(--kopf-oben) 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:kts-auf .22s cubic-bezier(.2,.7,.3,1) both}
.fzbox-zu{position:absolute;right:10px;top:8px;width:34px;height:34px;
  border:0;border-radius:var(--rp);background:0 0;color:rgba(255,255,255,.72);
  font-size:26px;line-height:1;cursor:pointer}
.fzbox-zu:hover{color:#fff;background:rgba(255,255,255,.12)}
/* Im Fenster gibt es kein Inhaltsraster, von dem etwas abzuziehen waere. */
.fzbox .fzwahl{width:100%;max-width:none;margin:0}
html.fzbox-auf{overflow:hidden}
/* Auf dem Telefon: der Kasten ist so hoch wie sein Inhalt, nicht so hoch
   wie der Schirm - sonst stand unter den vier Feldern eine handbreit
   leere Flaeche. Wird der Inhalt laenger als der Schirm (aufgeklappte
   Liste), scrollt der Kasten. Die Ueberschrift bekommt dort eine Stufe
   weniger, damit "Bitte waehlen Sie Ihr US-Car:" in eine Zeile passt. */
@media (max-width:760px){
  .fzbox{padding:56px 12px 12px;align-items:flex-start}
  .fzbox-kasten{padding:20px 14px 14px;overflow-y:auto;
    max-height:calc(100vh - 68px)}
  .fzbox .fzw-kopf{font-size:19px;line-height:1.2}
}

/* --- Warenkorb in Kurzform vor dem Bestellknopf --------------------- */
/* Gesetzlich vorgeschrieben (Paragraph 312j BGB), deshalb aufgeklappt und
   nicht kleingedruckt. Eine Zeile je Position: Menge, Bezeichnung mit
   Nummer darunter, Preis rechts. */
.korbkurz{margin:0 0 16px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);overflow:hidden}
.korbkurz>summary{display:flex;align-items:center;gap:10px;padding:10px 13px;
  cursor:pointer;list-style:none;background:var(--f2);
  border-bottom:1px solid transparent}
.korbkurz[open]>summary{border-bottom-color:var(--rand)}
.korbkurz>summary::-webkit-details-marker{display:none}
.korbkurz>summary::after{content:"";flex:0 0 auto;width:8px;height:8px;
  margin-left:2px;border-right:2px solid var(--leise);border-bottom:2px solid var(--leise);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--an)}
.korbkurz[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.kk-titel{font-size:15px;font-weight:800;letter-spacing:-.01em}
.kk-zahl{flex:1 1 auto;font-size:13px;color:var(--leise)}
.kk-wert{flex:0 0 auto;font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}
.kk-liste{margin:0;padding:4px 0;list-style:none}
.kk-liste li{display:flex;align-items:baseline;gap:9px;padding:6px 13px;
  font-size:13.5px;line-height:1.35}
.kk-liste li+li{border-top:1px solid var(--rand)}
.kk-m{flex:0 0 42px;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--leise)}
.kk-b{flex:1 1 auto;min-width:0}
.kk-nr{display:block;font-size:11.5px;color:var(--sehr-leise);
  font-family:ui-monospace,Consolas,monospace}
.kk-p{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* US-Sonderbestellungen in der Bestelluebersicht: dieselbe Zeile wie die
   Lagerware, nur mit einem Band an der Nummer - es gibt sie im Katalog
   nicht, und die Lieferzeit ist eine andere. */
.kk-spumarke{display:inline-block;margin-left:8px;padding:1px 6px;
  border-radius:var(--rp);background:var(--gelb-f);color:var(--gelb);
  font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:1px}
.kk-fuss{margin:0;padding:8px 13px 10px;border-top:1px solid var(--rand);
  font-size:12px;color:var(--sehr-leise)}
.kk-fuss a{margin-left:4px}
@media (max-width:620px){
  .kk-liste li{padding:6px 10px;gap:7px}
  .kk-m{flex:0 0 34px}
  .korbkurz>summary{padding:9px 10px}
}
/* Auf dem Telefon noch eine Spur enger: dort steht ohnehin nur eine
   Spalte, und der Rahmen um die Zahlart kostet je Block gut 20 Pixel. */
@media (max-width:620px){
  .zahlblock{margin:0 0 8px;padding:6px 7px 8px}
  .wahlliste{gap:5px}
  .wahlliste label.wahl{min-height:42px;padding:6px 9px}
}

/* =====================================================================
   7. Tabellen
   ===================================================================== */
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche)}
.tabelle-huelle.paare{border:0;border-radius:0;background:0 0;overflow:visible}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:11px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rand)}
tr:last-child>td{border-bottom:0}
thead th,tr:first-child>th{background:var(--f2);font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--leise);white-space:nowrap}
td.zahl,th.zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Artikelnummer und UPC standen in einer Schreibmaschinenschrift und fielen
   dadurch aus der Seite heraus. Jetzt dieselbe Schrift wie der Rest; nur die
   Ziffern laufen tabellarisch, damit Nummern untereinander buendig stehen. */
.nummer{font-family:inherit;font-size:13.5px;color:var(--leise);
  font-variant-numeric:tabular-nums}
.marker td{background:var(--gelb-f);font-style:italic;color:var(--gelb)}
/* Gruppenzeile in einer Liste - im Kundencenter der Hersteller ueber
   seinen Fahrzeugen. Bewusst KEINE Kopfzeile: sie steht mitten in der
   Tabelle, traegt den Namen gross und ruhig und laesst die Spaltenkoepfe
   oben die einzigen Kopfzeilen bleiben. */
tr.gruppe>th{background:0 0;text-transform:none;letter-spacing:0;
  font-size:14.5px;font-weight:800;color:var(--text);white-space:normal;
  padding-top:18px;border-bottom:1px solid var(--rand)}
tr.gruppe:first-child>th{padding-top:11px}
/* Die Spalte mit dem Knopf: der Knopf ist 40 Pixel hoch, der Text daneben
   steht oben. Ohne diese Zeile haengt er unter der Zeile statt neben ihr. */
td.kc-tun{white-space:nowrap;vertical-align:middle;text-align:right}
table.daten th{width:38%;background:0 0;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:650;color:var(--leise)}
/* --- Breite Tabellen (Verwaltung) ------------------------------------ */
/* Die Warenkorbliste hat neun Spalten. Die passen auch auf einem breiten
   Schirm nicht in die Inhaltsbreite: die letzten Spalten standen rechts
   ausserhalb der Seite, abgeschnitten und ohne Rollbalken. Zwei Dinge
   dagegen - engere Zeilen (.tab-eng) und ein Rahmen, der notfalls selbst
   seitlich rollt (.tabrahmen), statt die Seite zu dehnen.
   min-width:0 gehoert dazu: in einem Raster oder einer Flexspalte waere
   die Mindestbreite des Rahmens sonst die volle Tabellenbreite, und er
   wuerde die Seite genauso auseinanderziehen wie die Tabelle vorher. */
.tabrahmen{min-width:0;max-width:100%;overflow-x:auto}
.tabrahmen>table{margin:0}
.tab-eng{font-size:13.5px}
.tab-eng th,.tab-eng td{padding:7px 9px;vertical-align:middle}
.tab-eng td.datum,.tab-eng th.datum{white-space:nowrap}
/* Lange Mailadressen sind der Hauptgrund fuer die Breite: sie umbrechen
   von sich aus nicht. anywhere laesst sie an jeder Stelle umbrechen. */
.tab-eng td.mail{max-width:200px;overflow-wrap:anywhere;line-height:1.35}
.tab-eng td.nummer{font-size:13px}
.tab-eng td.mitte,.tab-eng th.mitte{text-align:center}
/* Eingabefelder in der Tabelle: nur so breit wie die Zahl, die
   hineinkommt, und rechtsbuendig wie die Spalte. Die grossen Felder der
   Abschnittsmasken (.feld input) waeren hier je Zeile 48px hoch. */
.tab-eng input.mini{width:92px;padding:5px 7px;font-size:13.5px;text-align:right;
  border:1px solid var(--rand);border-radius:6px;background:var(--flaeche);
  color:var(--text);font-variant-numeric:tabular-nums}
.tab-eng input.mini:focus{outline:2px solid var(--cta);outline-offset:1px}
.tab-eng input[type=checkbox]{width:18px;height:18px;accent-color:var(--cta);
  margin:0;cursor:pointer}
.tab-eng td strong{display:block;font-weight:700}
.tab-eng td .nummer{display:block;margin-top:1px;font-size:12px}
/* Der eine Knopf unter der ganzen Tabelle. */
.tun-zeile{margin:14px 0 4px}
/* --- Warenkorb: kompakte Zeilen mit Bild ------------------------------ */
/* Der Korb stand in der Grundtabelle: 15px Schrift, 11px Polsterung, und
   jede Zeile brauchte dadurch gut 90px Hoehe. Mit Bild waere das eine sehr
   lange Seite geworden. Hier engere Polsterung, kleinere Schrift und
   Knoepfe in Zeilenhoehe. */
.korbtab{font-size:14px}
.korbtab th,.korbtab td{padding:7px 10px;vertical-align:middle}
.korbtab th{padding-top:6px;padding-bottom:6px}
.korbtab td.k-bild,.korbtab th.k-bild{width:62px;padding-right:2px}
.korbtab td.k-bild img{width:52px;height:52px;object-fit:contain;display:block;
  padding:3px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--flaeche)}
.korbtab .k-bez{display:block;font-weight:650;line-height:1.3}
/* NUR auf einem <span> im Zellinneren. Stand die Klasse am <td> selbst -
   so wie in den Angebotspositionen -, nahm display:block die Zelle aus
   der Tabellenzeile heraus, und die ganze Spalte stand versetzt. */
.korbtab td > span.nummer{display:block;font-size:12.5px;line-height:1.3}
/* Zeilen ohne Preis: Fahrgestellnummer, Lieferhinweis und aehnliches.
   Sie sind keine Artikel und bekommen deshalb keine Preisspalten. */
.korbtab tr.kv-info td{background:var(--f2);color:var(--leise)}
.korbtab tr.kv-info strong{color:var(--text);margin-right:10px}
/* Angebotsliste: Fahrgestellnummer und Infotext unter der Nummer, als
   zweite Zeile derselben Zelle. */
.kv-zusatz{display:block;margin-top:2px;font-size:12px;color:var(--sehr-leise);
  white-space:normal}
/* Anleitungen in der Verwaltung: ein Kasten je Schritt, Text in Lesebreite. */
.hilfe-schritt{margin-bottom:14px}
.hilfe-schritt h3{margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:0;
  text-transform:none;color:var(--text)}
.hilfe-schritt p{margin:0 0 7px;max-width:76ch;line-height:1.55}
.hilfe-schritt p:last-child{margin-bottom:0}
a.nummer{font-family:inherit;font-size:14px;font-variant-numeric:tabular-nums;
  font-weight:650}
.korbtab .sperrzuschlag{margin-top:2px;font-size:11.5px}
/* Der gewaehrte Haendlerrabatt. Gruen wie die uebrigen guten Nachrichten,
   der Kaufweg dahinter leise - der Satz gilt je nachdem, ob die Zeile ab
   Lager geht oder als Eilbestellung. */
.korbtab .k-rabatt{display:block;margin-top:2px;font-size:12px;font-weight:700;
  color:var(--gruen)}
.korbtab .k-rabatt em{font-style:normal;font-weight:400;color:var(--sehr-leise)}
/* Menge und "setzen" bilden ein Paar und bleiben zusammen in einer Zeile. */
.k-menge{display:flex;align-items:center;gap:6px;margin:0}
.k-menge input[type=number]{width:66px;min-height:36px;padding:6px 8px;
  font-size:14px;text-align:center}
.korbtab .k-menge button.klein{min-height:36px;padding:6px 11px;font-size:13px}
/* Knopf nur mit Zeichen: quadratisch, damit er neben dem Zahlenfeld nicht
   wie ein halber Textknopf aussieht. Der Text steckt in title/aria-label. */
.korbtab .k-menge button.nurbild{min-width:36px;padding:6px;display:inline-flex;
  align-items:center;justify-content:center}
.korbtab .k-menge button.nurbild .ic{width:17px;height:17px;display:block}
.korbtab button.weg{min-height:36px;padding:6px 11px;font-size:13px}
/* Die US-Sonderbestellungen tragen einen Datenblock - dort steht der
   Text besser oben als mittig. */
.korbtab.spuliste td{vertical-align:top}
.korbtab .spulogo{max-height:24px;margin-bottom:4px}
.korbtab .spudaten{margin-top:5px;font-size:12.5px}
/* Der Einzelpreis unter der Zeilensumme - nur auf dem Telefon sichtbar,
   wo die eigene Spalte dafuer fehlt. */
.k-einzelmini{display:none}

/* --- Der Korb auf dem Telefon ----------------------------------------
   Sechs Spalten passen auf kein Telefon. Bisher lag der Korb deshalb in
   einer seitlich schiebbaren Tabelle: Menge und "entfernen" lagen
   ausserhalb des Bildes, und wer die Summe sehen wollte, musste schieben.
   Dieselben Angaben, dieselbe Bedienung - aber je Zeile eine Karte:
   oben Bild und Artikel, darunter Menge, Summe und Entfernen in einer
   Reihe. Keine zweite Ausgabe im Code, nur ein anderes Raster. */
@media (max-width:620px){
  .korbtab thead{display:none}
  .korbtab,.korbtab tbody{display:block}
  .korbtab tbody tr{display:grid;grid-template-columns:46px minmax(0,1fr) auto;
    grid-template-areas:"bild text text" "menge summe weg";
    align-items:center;column-gap:10px;row-gap:9px;
    padding:11px 2px;border-bottom:1px solid var(--rand)}
  .korbtab tbody tr:last-child{border-bottom:0}
  .korbtab tbody td{display:block;border:0;padding:0}
  .korbtab td.k-bild{grid-area:bild;width:auto}
  .korbtab td.k-bild img{width:46px;height:46px}
  .korbtab td.k-text{grid-area:text;min-width:0}
  .korbtab td.k-einzel{display:none}
  .korbtab td.k-mengetd{grid-area:menge}
  .korbtab td.k-summe{grid-area:summe;text-align:right;font-weight:800;font-size:16px}
  .korbtab td.k-weg{grid-area:weg;text-align:right}
  .korbtab .k-einzelmini{display:block;font-size:11.5px;font-weight:400;
    color:var(--leise);white-space:nowrap}
  .korbtab .k-menge{gap:4px}
  .korbtab .k-menge input[type=number]{width:54px;min-height:34px;padding:5px 4px}
  .korbtab .k-menge button.klein{min-height:34px;padding:6px 9px;font-size:12px}
  .korbtab .k-menge button.nurbild{min-width:34px;padding:6px}
  .korbtab button.weg{min-height:34px;padding:6px 10px;font-size:12px}
  .korbtab .k-bez{font-size:13.5px}
  /* Zuschlags- und Markerzeilen: weder Bild noch Menge noch Entfernen.
     Die gelbe Flaeche traegt im Raster die ZEILE, nicht die Zellen - sonst
     blitzt zwischen ihnen der Spaltenabstand durch. */
  .korbtab tbody tr.marker{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"text summe";
    background:var(--gelb-f);border-radius:var(--rk);padding:9px 10px}
  .korbtab tbody tr.marker td{background:0 0}
  .korbtab tbody tr.marker td.k-bild,
  .korbtab tbody tr.marker td.k-mengetd,
  .korbtab tbody tr.marker td.k-weg{display:none}
  /* Special.Order.USA fuehrt kein Bild. */
  .korbtab.spuliste tbody tr{grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"text text text" "menge summe weg"}
}

/* --- Gutschein im Warenkorb ------------------------------------------
   Der Abzug selbst steht als Zeile in der Korbtabelle (.marker). Dieser
   Kasten ist nur das Eingabefeld - und, sobald ein Code wirkt, die
   Bestaetigung mit dem Knopf zum Zuruecknehmen. Deshalb zwei Zustaende:
   .gutschein (Feld) und .gutschein.an (eingeloest, gruen).

   Der Kasten sieht aus wie ein Abrissgutschein: gestrichelte Kante, zwei
   Kerben an den Seiten, ein Etikett im Kreis. Das ist kein Schmuck - ein
   Eingabefeld mit Beschriftung geht zwischen Summen und Knoepfen unter,
   und wer einen Code in der Hand hat, soll sehen, wo er hingehoert.
   Die Kerben liegen auf der Seitenfarbe und decken die gestrichelte
   Kante ab; in jedem Farbschema, weil --seite mitgeht. */
.gutschein{position:relative;margin-top:22px;padding:15px 20px;
  border:1px dashed var(--rand-stark);border-radius:var(--rk);
  background:var(--f2);
  transition:border-color var(--an),background var(--an),box-shadow var(--an)}
.gutschein:hover,.gutschein:focus-within{border-color:var(--cta);
  background:var(--flaeche);box-shadow:var(--sch)}
.gutschein::before,.gutschein::after{content:"";position:absolute;top:50%;
  width:18px;height:18px;margin-top:-9px;border-radius:50%;
  background:var(--seite)}
.gutschein::before{left:-10px}
.gutschein::after{right:-10px}

/* Das Zeichen links - Etikett beim Eingeben, Haken nach dem Einloesen. */
.gut-sym{flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--cta);color:var(--cta-fg)}
.gut-sym .ic{width:20px;height:20px}

.gut-form{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0}
.gut-ein{flex:1 1 230px;display:flex;flex-direction:column;gap:1px;min-width:0}
.gut-ein label{font-weight:800;font-size:15.5px;cursor:pointer}
.gut-sub{font-size:13.5px;color:var(--leise)}
.gut-feld{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.gut-feld input[type=text]{width:190px;text-align:center;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em}

/* Eingeloest: dieselbe Form, nur gruen und mit dem Satz statt dem Feld. */
.gutschein.an{border-style:solid;border-color:var(--gruen);
  background:var(--gruen-f)}
.gutschein.an:hover,.gutschein.an:focus-within{border-color:var(--gruen);
  background:var(--gruen-f);box-shadow:none}
.gutschein.an .gut-sym{background:var(--gruen);color:#fff}
.gut-an{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.gut-text{flex:1 1 230px;display:flex;flex-direction:column;gap:1px;min-width:0}
.gut-text strong{font-size:15.5px}
.gut-text span{font-size:13.5px;color:var(--leise)}
.gut-notiz{font-style:italic}
.gut-proz{flex:0 0 auto;font-size:21px;font-weight:800;color:var(--gruen);
  white-space:nowrap;letter-spacing:-.01em}

@media(max-width:700px){
  /* Auf dem Telefon zwei Zeilen: oben Zeichen und Text, darunter das Feld
     mit dem Knopf. Ein 190px-Feld neben zwei Textzeilen passt dort nicht,
     und das Zeichen rutscht an den Anfang des Textes statt in die Mitte
     von drei Zeilen. */
  .gut-form,.gut-an{gap:10px 12px}
  .gut-sym{align-self:flex-start}
  .gut-ein,.gut-text{flex:1 1 calc(100% - 50px)}
  .gut-feld{flex:1 1 100%;min-width:0}
  .gut-feld input[type=text]{flex:1 1 0;width:auto;min-width:0}
  .gut-proz{flex:0 0 auto}
  .gut-an form{flex:1 1 auto;min-width:0}
  .gut-an form .weg{width:100%}
}

.summen{width:100%;margin-top:18px}
.summen td{border:0;padding:5px 0}
tr.gesamt td{border-top:2px solid var(--text);font-weight:800;font-size:18px;padding-top:10px}

/* =====================================================================
   8. Meldungen
   ===================================================================== */
.meldung,.fehler,.erfolg,.hinweis,.probe{margin:0 0 18px;padding:12px 15px;
  border-radius:var(--rk);border-left:3px solid var(--rand-stark);
  background:var(--f2);font-size:15px}
.meldung{border-left-color:var(--gruen);background:var(--gruen-f)}
.meldung.warn,.probe{border-left-color:var(--gelb);background:var(--gelb-f);color:var(--gelb)}
.meldung.fehler,.fehler{border-left-color:var(--rot);background:var(--rot-f);color:#8c1a11}
.erfolg{border-left-color:var(--gruen);background:var(--gruen-f);color:#065c27}
.hinweis{border-left-color:var(--akzent);background:var(--f2);font-size:14px}
/* Die Ueberschrift der Umsatzprognose im Kundencenter - im Altcode gruen
   (includes/kundencenter.asp, kdAnalyse4). */
.prognose{color:var(--gruen)}
.leer{padding:30px 20px;border:1px dashed var(--rand-stark);border-radius:var(--r);
  text-align:center;color:var(--leise);background:var(--f2)}
.diag{margin:16px 0;padding:12px 14px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--f2);font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
  white-space:pre-wrap;color:var(--leise);overflow-x:auto}
/* Interne Hinweise (KtsNotizIntern, KtsFehlerMeldung): sie erscheinen nur
   beim Administrator und sollen auch so aussehen - leise und abgesetzt,
   damit beim Durchsehen klar ist, was der Kunde NICHT liest. */
.notiz-intern{margin:10px 0;font-size:12.5px;line-height:1.45;
  color:var(--leise);font-family:ui-monospace,Consolas,monospace}
span.notiz-intern{display:inline;margin:0;opacity:.85}
.meldung .notiz-intern{color:inherit}
/* Vorangestellt, damit beim Durchsehen des Shops ohne Nachdenken klar ist:
   diesen Satz liest nur der Administrator. Steht im Stylesheet und nicht
   im Text, damit keine Meldung dafuer umgeschrieben werden muss. */
.notiz-intern::before{content:"nur Administrator \00B7 ";font-weight:700}
.fertig-kasten{margin:20px 0;padding:16px 18px;border-radius:var(--r);
  border:1px solid #bfe3cb;background:var(--gruen-f)}

/* =====================================================================
   9. Kopfblock, Artikelraster, Blaettern
   ===================================================================== */
.kopfblock,.kopf-seite{margin-bottom:18px}
.kopfblock .zahl,.zahl-zeile{color:var(--leise);font-size:14px}

/* Artikel als Raster von Karten - das Bild oben, Preis und
   Handlungsknopf unten. Ein Kartenfuss haelt Preis und Knopf auf
   gleicher Hoehe, egal wie lang die Bezeichnung ist. */
.liste{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.artikel{position:relative;display:flex;flex-direction:column;gap:8px;
  padding:12px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);box-shadow:var(--sch);overflow:hidden;
  transition:transform var(--an),box-shadow var(--an),border-color var(--an)}
/* Eine Akzentkante faehrt beim Ueberfahren von links ein. */
.artikel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--cta);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);z-index:2}
.artikel:hover::before{transform:scaleX(1)}
.artikel:hover{transform:translateY(-3px);border-color:var(--rand-stark);box-shadow:var(--sch-karte)}

/* Ersparnis als Ecke am Bild - der einzige Ort, an dem Rot geschrien wird. */
.spar{position:absolute;top:10px;left:10px;z-index:3;
  padding:4px 9px;border-radius:var(--rp);background:var(--rot);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(194,38,26,.35)}
.liste.zeilen .spar{top:8px;left:8px;font-size:11px;padding:3px 7px}
/* Angebotskennzeichen - rechts oben am Bild, gegenueber der Ersparnis.
   Die beiden koennen zusammen auftreten: die Ersparnis sagt WIEVIEL,
   das Schild sagt WARUM. */
/* Angebotskennzeichen. Es sass zuerst als Ecke rechts oben am Artikel -
   in der Kachelansicht am Bild, in der ZEILENANSICHT aber im Preisblock,
   wo es den Betrag ueberdeckt hat. Deshalb steht es jetzt in der
   Textspalte, ueber der Lieferzeit: dort hat es in jeder Ansicht seinen
   eigenen Platz und kann nichts verdecken.
   Nicht rot: Rot gehoert der Ersparnis, das ist die lautere Nachricht.
   Das Schild traegt die Akzentfarbe des Shops. */
.angebotschild{display:inline-flex;align-items:center;align-self:flex-start;
  justify-self:start;width:fit-content;max-width:100%;
  padding:3px 10px;border-radius:var(--rp);background:var(--akzent);color:var(--akzent-fg);
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
[data-layout="katalog"] .liste .angebotschild{font-size:10px;padding:2px 8px}
/* Auf der Artikelkarte steht es neben dem Preis. */
.preisblock .angebotschild,.karte-preis .angebotschild,.preis .angebotschild{
  margin-left:8px;vertical-align:3px;font-size:11px}
.artikel>.bildspalte{display:grid;place-items:center;overflow:hidden;
  aspect-ratio:4/3;border-radius:var(--rk);background:var(--f2)}
.artikel>.bildspalte:empty::after{content:"";width:46px;height:46px;border-radius:var(--rk);
  background:var(--f3)}
.artikel h2{margin:0;font-size:14.5px;font-weight:400;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.artikel h2 a{color:inherit;text-decoration:none}
/* C6INFO aus KTSFIL_ARTP46 - die fahrzeugbezogene Angabe. Sie steht direkt
   unter der Bezeichnung, in derselben Groesse, aber fett: im Katalog ist
   sie das, wonach gesucht wird (Position, Seite, Einbauort). Die
   Bezeichnung darueber traegt dafuer kein Fettgewicht mehr. */
.artikel .c6info{margin:3px 0 0;font-size:14.5px;font-weight:800;
  line-height:1.32;color:var(--text)}
.liste.zeilen .artikel .c6info{font-size:15px}
/* Im Katalog fuehrt C6INFO zur Artikelkarte - der Link sieht aus wie der
   Text, nur der Zeiger und die Farbe beim Ueberfahren verraten ihn. */
.artikel .c6info a{color:inherit;text-decoration:none}
.artikel .c6info a:hover{color:var(--akzent)}
.artikel h2 a:hover{color:var(--akzent)}
.artikel .nummer{font-size:12px}
.bildspalte img,.artikel img{width:100%;height:100%;max-width:none;object-fit:contain;
  display:block;background:0 0;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.artikel:hover .bildspalte img{transform:scale(1.07)}
.preisblock{margin-top:auto;padding-top:8px;border-top:1px solid var(--rand);
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.preis{font-size:23px;font-weight:850;line-height:1.05;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.preis.aktion{color:var(--rot)}
/* Pflichtangabe zum Preis: Haendler netto, Endkunden brutto. Leise
   gesetzt - sie steht an jedem Preis und soll ihn nicht erschlagen. */
.steuerhinweis{font-size:11.5px;line-height:1.3;color:var(--leise);margin-top:2px}
/* --- Einkaufspreis fuer den Shop-Administrator (nur Fremdshop) -------- */
/* Steht unter dem Verkaufspreis wie im Altshop, aber als abgesetzte
   Zeile: es ist eine Angabe FUER DEN BETREIBER, kein Teil des Angebots.
   Deshalb dieselbe leise Schreibmaschinenschrift wie die uebrigen
   internen Hinweise. */
.fr-ek{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;
  padding:3px 7px;border-radius:5px;background:var(--f2);
  font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  line-height:1.35;color:var(--leise)}
.fr-ek span{white-space:nowrap}
.fr-ek-weg{opacity:.75}
/* --- Haendlerpreise fuer alle: Band und Zeichen am Preis ------------- */
/* Das Band steht ueber dem Inhalt JEDER Seite. Es ist eine Zeile hoch und
   traegt die Knopffarbe des Shops - kraeftig genug, um gesehen zu werden,
   flach genug, um nicht jedes Mal im Weg zu stehen. Der Lichtstreifen
   wandert langsam darueber; wer Bewegung abbestellt hat, bekommt ihn
   nicht. */
.fr-akt{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 14px;margin:0 0 18px;padding:11px 16px;overflow:hidden;
  border-radius:var(--r);background:var(--cta);color:var(--cta-fg)}
.fr-akt::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  animation:fra-glanz 5.5s ease-in-out infinite;pointer-events:none}
@keyframes fra-glanz{0%{left:-40%}55%{left:112%}100%{left:112%}}
.fra-schild{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:4px 10px;border-radius:var(--rp);background:rgba(0,0,0,.14);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.fra-punkt{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:fra-puls 1.8s ease-in-out infinite}
@keyframes fra-puls{0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.72)}}
.fra-text{flex:1 1 auto;min-width:0;font-size:16px;font-weight:800;
  letter-spacing:-.01em;line-height:1.3}
.fra-rest{flex:0 0 auto;padding:4px 10px;border-radius:var(--rp);
  background:rgba(0,0,0,.14);font-size:12.5px;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fra-zusatz{flex:0 0 auto;font-size:13px;line-height:1.4;opacity:.85}
/* Auf der Startseite steht das Band VOR dem Buehnenbild und damit
   ausserhalb des Inhaltsrasters: durchgehende Leiste, Inhalt darin auf
   dieselbe Breite begrenzt wie der Rest der Seite. */
.fr-aktleiste{background:var(--cta)}
.fr-akt-flach{max-width:var(--breite);margin:0 auto;border-radius:0}
@media (max-width:820px){
  .fr-akt{gap:6px 10px;padding:10px 13px}
  .fra-text{flex:1 1 100%;order:2;font-size:15px}
  .fra-zusatz{flex:1 1 100%;order:3}
}
@media (prefers-reduced-motion:reduce){
  .fr-akt::after{animation:none;display:none}
  .fra-punkt{animation:none}
}
/* Das Zeichen unter dem Preis. Klein, aber in der Aktionsfarbe - es steht
   sechzig Mal auf einer Katalogseite und darf deshalb nicht schreien. */
.fr-aktpreis{display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  padding:2px 8px;border-radius:var(--rp);background:var(--cta);
  color:var(--cta-fg);font-size:11px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.fap-zeichen{font-size:12px;font-weight:900;opacity:.75}
/* --- Mehrzeiliges Listenfeld in der Verwaltung ----------------------- */
/* Ein Dateiname je Zeile. Schreibmaschinenschrift, weil es Dateinamen
   sind: so faellt ein vertippter Unterstrich oder eine falsche Endung
   beim Durchsehen auf. */
.feld textarea.feldliste{width:100%;box-sizing:border-box;resize:vertical;
  min-height:120px;padding:10px 12px;border:1px solid var(--rand-stark);
  border-radius:var(--rk);background:var(--flaeche);color:var(--text);
  font-family:ui-monospace,Consolas,monospace;font-size:14px;line-height:1.6}
.feld textarea.feldliste:focus{border-color:var(--akzent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 18%,transparent)}
.liste-preis{font-size:13px;color:var(--sehr-leise);text-decoration:line-through;margin-top:1px}
.karte .preis{font-size:30px}
.quelle{font-size:11.5px;color:var(--sehr-leise);margin-top:3px}
.eingabe{font-size:12px;color:var(--akzent);margin-top:3px}
.rabatt{font-size:13.5px;color:var(--gruen);font-weight:650;margin-top:3px}
.lager{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;justify-self:start;
  width:fit-content;max-width:100%;
  padding:3px 10px 3px 8px;border-radius:var(--rp);background:var(--f2);
  font-size:12.5px;font-weight:700}
.lager::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* Drei Stufen: gruen = feste Zusage (ab Lager ODER ein Versanddatum),
   gelb = Spanne oder Anfrage, rot = nicht lieferbar. "Versand am 21.10."
   stand vorher auf Gelb, obwohl es genauso verbindlich ist wie "ab Lager". */
.lager.ja{color:var(--gruen);background:var(--gruen-f)}
.lager.warn{color:var(--gelb);background:var(--gelb-f)}
.lager.nein{color:var(--rot);background:var(--rot-f)}
/* --- Baugruppenpfad ueber der Liste ---------------------------------- */
.bgpfad{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;
  font-size:13.5px;color:var(--leise)}
.bgpfad a{color:var(--leise);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent}
.bgpfad a:hover{color:var(--akzent);border-bottom-color:currentColor}
.bgpfad strong{color:var(--text);font-weight:700}
.bgpfad .tr{color:var(--sehr-leise)}

/* --- Untergruppen als Chips, direkt ueber den Treffern ---------------- */
/* Auf dem Telefon der eigentliche Weg durch die Baugruppen: kein Oeffnen
   der Schublade, kein Scrollen an der Seitennavigation vorbei. */
.bgchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;
  padding:10px;border:1px solid var(--rand);border-radius:var(--r);background:var(--f2)}
.bgchips .bez{width:100%;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sehr-leise)}
.bgchips a{display:inline-flex;align-items:center;min-height:38px;padding:7px 13px;
  border:1px solid var(--rand-stark);border-radius:var(--rp);background:var(--flaeche);
  color:var(--text);text-decoration:none;font-size:14px;font-weight:650;
  transition:background var(--an),border-color var(--an),color var(--an)}
.bgchips a:hover{border-color:var(--cta);background:var(--flaeche);color:var(--text)}
.bgchips a.aktiv{background:var(--text);border-color:var(--text);color:#fff}

/* --- Trefferzahl und Umschalter in einer Zeile ------------------------ */
/* Auf dem Telefon zaehlt jede Zeile ueber den Treffern - deshalb stehen
   Zahl und Umschalter nebeneinander statt untereinander. */
.listenkopf{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin:0 0 14px}
.listenkopf .zahl{color:var(--leise);font-size:14px}

/* --- Umschalter Liste / Raster --------------------------------------- */
.ansicht{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0;
  padding:4px;border:1px solid var(--rand-stark);border-radius:var(--rk);background:var(--f2)}
.ansicht .bez{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ansicht a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 12px;
  border:1px solid transparent;border-radius:var(--rk);background:0 0;
  color:var(--leise);text-decoration:none;font-size:13.5px;font-weight:650;
  transition:background var(--an),border-color var(--an),color var(--an)}
.ansicht a:hover{background:var(--flaeche);border-color:var(--rand-stark);color:var(--text)}
.ansicht a.aktiv{background:var(--text);border-color:var(--text);color:#fff}
.ansicht .ic{width:17px;height:17px}
/* Das Kettensymbol neben den Ansichtsknoepfen: ein Klick legt die Adresse
   dieser Auswahl in die Zwischenablage. Ruhig und unauffaellig - es ist
   ein Werkzeug, kein Angebot. */
/* margin-left:auto schiebt Umschalter UND Kette gemeinsam nach rechts.
   Ohne das verteilt justify-content:space-between die drei Kinder der
   Zeile gleichmaessig, und der Umschalter landet in der Mitte. */
.listenkopf .ansicht{margin-left:auto}
/* 46 Pixel sind genau die Hoehe von .ansicht daneben: 36px Knopf plus
   2x4px Polster plus 2x1px Rand (box-sizing ist border-box). */
.sprunglink{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:1px solid var(--rand-stark);
  border-radius:var(--rk);background:var(--flaeche);color:var(--leise);
  text-decoration:none;flex:0 0 auto;cursor:pointer;font:inherit;
  transition:background var(--an),border-color var(--an),color var(--an)}
/* display:inline-flex schlaegt sonst das display:none des Browsers fuer
   [hidden] - ohne Javascript soll der Knopf aber wirklich weg sein. */
.sprunglink[hidden]{display:none}
.sprunglink:hover{background:var(--f2);border-color:var(--leise);color:var(--text)}
.sprunglink .ic{width:18px;height:18px}
/* Nach dem Kopieren kurz ein Haken statt der Kette - gleiche Groesse,
   also kein Springen im Umbruch. */
.sprunglink .sp-ok{display:none}
.sprunglink.ok{border-color:var(--gruen);color:var(--gruen);background:var(--gruen-f)}
.sprunglink.ok .sp-kette{display:none}
.sprunglink.ok .sp-ok{display:inline-flex}

/* --- Zwei Handlungen auf jeder Karte --------------------------------- */
.karte-aktionen{display:grid;gap:7px;margin-top:auto}
.karte-aktionen form{margin:0;display:block}
.karte-aktionen .karte-cta{width:100%}
/* Mengenfeld vor dem Knopf. Der Knopf schrumpft um genau das, was das
   Feld braucht - die Gesamtbreite der Zeile bleibt damit unveraendert. */
/* Die Auswahl muss mindestens so stark sein wie ".karte-aktionen form"
   darueber - sonst gewinnt dort display:block und die Zeile bricht um. */
.karte-aktionen form.korbzeile{display:flex;gap:7px;align-items:stretch}
.karte-aktionen .korbzeile .karte-cta{flex:1 1 auto;width:auto;min-width:0}
/* input.korbmenge, nicht .korbmenge: die allgemeine Regel fuer
   input[type=text] weiter oben ist mit (0,1,1) staerker als eine blosse
   Klasse. Innenabstand und Schriftgroesse kamen hier deshalb nie an - das
   Feld war 48 Pixel hoch statt 38 und zog die ganze Zeile mit. */
input.korbmenge{flex:0 0 58px;width:58px;box-sizing:border-box;text-align:center;
  font:inherit;font-size:15px;font-weight:600;padding:0 6px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);
  background:var(--flaeche);color:var(--text);-webkit-appearance:none;appearance:none}
input.korbmenge:focus{border-color:var(--akzent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 18%,transparent)}
/* Drei Beschriftungen fuer denselben Knopf, umgeschaltet per CSS. Die
   lange steht im Markup zuerst, damit sie gilt, wenn das CSS nicht laedt.
   Das Korbsymbol loest den Text ueberall dort ab, wo neben dem Mengenfeld
   kein Platz fuer Worte ist:
     - auf dem Telefon und dem Tablet (unter 900px) immer
     - am Schreibtisch in der KACHELANSICHT (.liste ohne .zeilen); in der
       Listenansicht ist die Spalte breit genug fuer "In den Warenkorb"
   aria-label und title am Knopf bleiben in allen Faellen die lange
   Fassung - der Knopf heisst also fuer Vorleseprogramme und fuer die Maus
   weiter "In den Warenkorb". */
.karte-cta .cta-kurz,.karte-cta .cta-ic{display:none}
.karte-cta .cta-ic .ic{width:20px;height:20px;display:block}

.liste:not(.zeilen) .karte-aktionen .korbzeile .karte-cta .cta-lang,
.liste:not(.zeilen) .karte-aktionen .korbzeile .karte-cta .cta-kurz{display:none}
.liste:not(.zeilen) .karte-aktionen .korbzeile .karte-cta .cta-ic{display:block}

@media (max-width:899px){
  .karte-aktionen .korbzeile .karte-cta .cta-lang,
  .karte-aktionen .korbzeile .karte-cta .cta-kurz{display:none}
  .karte-aktionen .korbzeile .karte-cta .cta-ic{display:block}
}

@media (max-width:620px){
  /* Und die Zeile insgesamt eine Spur flacher: einzeilige Knoepfe
     brauchen die 42 Pixel Mindesthoehe der Kachelansicht nicht. Unter
     38 geht es nicht - das ist die Grenze, ab der ein Knopf mit dem
     Daumen noch sicher zu treffen ist. */
  .karte-aktionen{gap:6px}
  .karte-aktionen form.korbzeile{gap:6px}
  .karte-aktionen .karte-cta{min-height:38px;padding:7px 6px;font-size:13.5px}
  input.korbmenge{flex:0 0 42px;width:42px;font-size:14.5px;padding:0 3px}
}

/* --- Artikeltexte in der Listenansicht -------------------------------- */
.texte{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:3px}
.texte li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.45;color:var(--leise)}
.texte li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--rand-stark)}
.texte .mehr{padding-left:14px;font-size:13px;font-weight:650}
.texte .mehr::before{content:none}
/* Zusatzangaben der Trefferzeile, wie im Altshop ---------------------- */
div.mehr{margin:6px 0 0;font-size:13px;font-weight:650}
/* Hinweis aus KTSFIL_ARTP48: der Altshop setzt ihn mit Ausrufezeichen und
   hellem Grund ab (Artikel_Sube.asp Zeile 283-300). */
.artikelhinweis{display:grid;gap:3px;margin:8px 0 0;padding:9px 11px 9px 32px;
  position:relative;border:1px solid var(--gelb);border-radius:var(--rk);
  background:var(--gelb-f);font-size:13px;line-height:1.45;color:var(--gelb)}
.artikelhinweis::before{content:"!";position:absolute;left:10px;top:9px;
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border:1px solid var(--gelb);border-radius:50%;
  font-size:10px;font-weight:800;line-height:1}
.artikelhinweis strong{font-weight:750}
.exactfit{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;
  font-size:13.5px;font-weight:700;color:var(--gruen)}
.exactfit::before{content:"\2713";font-size:14px;font-weight:800}
/* "Sie benoetigen diesen Artikel schneller?" - der gruene Kasten des
   Altshops (includes/artikel.asp Zeile 414-490). Er steht unter einem
   Artikel OHNE Lagerbestand und zeigt die eine lagernde Alternative:
   Bild, Nummer, Bezeichnung, Preis, Kaufknopf. Die Zeile ist Flex und
   nicht Raster - ohne Bild soll keine leere Spalte stehenbleiben. */
.schneller{margin:10px 0 0;padding:9px 11px;border:1px solid var(--gruen);
  border-radius:var(--rk);background:var(--gruen-f);font-size:13px;line-height:1.45}
.schneller-kopf{color:var(--gruen);margin-bottom:8px}
.schneller-kopf strong{font-weight:750}
.schneller-zeile{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-start}
.schneller-bild{flex:0 0 auto;display:block;width:56px;height:56px;
  border-radius:var(--rp);background:#fff;overflow:hidden}
.schneller-bild img{width:100%;height:100%;object-fit:contain}
.schneller-text{flex:1 1 140px;min-width:0}
.schneller-text>a{font-weight:700;color:var(--text);text-decoration:none}
.schneller-text>a:hover{text-decoration:underline}
.schneller-text .nummer{margin-top:2px}
.schneller-preis{flex:0 0 auto;margin-left:auto;text-align:right}
.schneller-preis .preis{font-size:16px;font-weight:800;margin-bottom:6px}
.schneller-preis form.korbzeile{display:flex;gap:7px;align-items:stretch;
  justify-content:flex-end;margin-top:6px}
/* Im Kasten steht fuer den Knopf nur die Breite der Preisspalte zur
   Verfuegung - in der Kachel auf dem Telefon gemessen 122 Pixel. "In den
   Warenkorb" bricht dort auf zwei Zeilen um und macht den Kasten 19 Pixel
   hoeher; "+ Warenkorb" braucht mit Innenabstand 99 und passt. Der lange
   Text bleibt in aria-label und title. */
.schneller .korbzeile .karte-cta .cta-lang{display:none}
.schneller .korbzeile .karte-cta .cta-kurz{display:inline}
.schneller .steuerhinweis{margin-top:3px}
/* Die Lagerampel traegt sonst denselben hellgruenen Grund wie der
   Kasten und waere darin nicht zu sehen. */
.schneller .lager.ja{background:var(--flaeche)}
/* Zweite Sicherung: der Kasten gehoert nur in die Listenansicht. Serverseitig
   entscheidet das KtsSchnellerKasten (Artikelinfo.asp) ueber
   Session("str_tblstyle"); kommt die Kachelansicht auf einem anderen Weg
   zustande, bleibt er hier trotzdem weg. */
.liste:not(.zeilen) .schneller{display:none}
@media (max-width:620px){
  .schneller-preis{margin-left:0;text-align:left;flex-basis:100%}
  .schneller-preis form.korbzeile{justify-content:flex-start}
}

/* --- Listenansicht: eine Zeile je Artikel ---------------------------- */
/* Im Raster ist der Textblock durchsichtig - die Karte bleibt ein
   einfacher Stapel. In der Liste ist er die zweite Spalte. Frueher stand
   hier ein Zeilenspann ueber die Karte; der ging schief, sobald ein
   Artikel mehr oder weniger Zeilen hatte als angenommen - genau das war
   auf dem Telefon zu sehen. */
.artikel>.karte-text{display:contents}
.liste.zeilen{grid-template-columns:minmax(0,1fr);gap:10px}
.liste.zeilen .artikel{display:grid;grid-template-columns:84px minmax(0,1fr);
  gap:10px 12px;align-items:start}
.liste.zeilen .artikel>.karte-text{display:flex;flex-direction:column;gap:4px;
  min-width:0;grid-column:2;grid-row:1}
.liste.zeilen .artikel>.bildspalte{grid-column:1;grid-row:1;aspect-ratio:1/1}
.liste.zeilen .artikel h2{-webkit-line-clamp:3;font-size:15px}
.liste.zeilen .artikel .texte li{font-size:13px}
.liste.zeilen .artikel>.preisblock{grid-column:1/-1;grid-row:2;margin-top:0}
.liste.zeilen .artikel>.karte-aktionen{grid-column:1/-1;grid-row:3;margin-top:0;
  grid-template-columns:repeat(2,minmax(0,1fr))}
/* Das aufgeklappte Fach spannt ueber die ganze Karte und steht in einer
   EIGENEN Zeile darunter. Daran haengt, dass Preis und Warenkorbknopf
   oben stehen bleiben, wo sie waren. */
.liste.zeilen .artikel>.altzub-fach{grid-column:1/-1;grid-row:4}
/* Auf dem Telefon bekommt die linke Spalte mehr ab: dort stehen Mengenfeld
   UND Kaufknopf, rechts nur "Zum Artikel". Gemessen bei 320px Fensterbreite
   braucht "+ Warenkorb" mit Innenabstand 99 Pixel - mit zwei gleichen
   Spalten waeren nur 97 da, und der Knopf bricht wieder um. */
@media (max-width:620px){
  .liste.zeilen .artikel>.karte-aktionen{grid-template-columns:1.3fr 1fr}
}
.liste.zeilen .artikel:hover{transform:none}
.liste.zeilen .artikel:hover .bildspalte img{transform:none}

.ehemals{font-size:12.5px;color:var(--sehr-leise);margin-bottom:5px}
.ehemals::after{content:""}
/* --- Kleine Hilfeknoepfe unter dem Kaufknopf -------------------------- */
/* Drei Knoepfe in EINER Zeile: Raster mit gleich breiten Spalten statt
   Flex mit Umbruch. Die Beschriftung darf dafuer zweizeilig werden -
   "Guenstiger gesehen?" braucht bei 13,5px gemessene 151px, verfuegbar ist
   ein Drittel der 320px-Spalte, also 91px. Abgeschnittener Text waere die
   schlechtere Loesung; gemessen passt die Zeile so von 262px aufwaerts. */
.hilfe{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
  align-items:stretch;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--rand)}
/* Sprungknoepfe zu den Abschnitten weiter unten auf der Artikelkarte. Sie
   stehen ueber den Hilfeknoepfen und nur dann, wenn es den Abschnitt gibt -
   ein Knopf, der ins Leere fuehrt, ist schlimmer als keiner. Optisch der
   Kaufknopf in leise: gleiche Hoehe, gleiche Ecken, nur ohne Fuellung.
   Die Zeile ist ein Raster mit gleich breiten Spalten - zwei Knoepfe teilen
   sich die Breite, ein einzelner nimmt sie ganz. So steht die Zeile immer
   genau so breit wie der Knopf darueber. */
.sprungzeile{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;
  margin-top:14px}
.sprung-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;
  padding:9px 15px;border:1px solid var(--akzent);border-radius:var(--rk);
  background:var(--flaeche);color:var(--akzent);text-decoration:none;
  font-size:14px;font-weight:700;
  transition:background var(--an),box-shadow var(--an)}
.sprung-knopf::after{content:"\2193";font-size:13px;opacity:.8}
.sprung-knopf:hover{background:var(--f2);box-shadow:var(--sch)}
/* Der Kopf klebt oben - ohne diesen Abstand verschwindet die Ueberschrift
   des angesprungenen Abschnitts darunter. */
.karteblock[id]{scroll-margin-top:calc(var(--kopf-h) + 18px)}
.hilfe-knopf{display:inline-flex;align-items:center;justify-content:center;
  text-align:center;min-height:38px;padding:7px 6px;
  border:1px solid var(--rand-stark);border-radius:var(--rp);background:var(--flaeche);
  color:var(--akzent);text-decoration:none;font-size:13px;font-weight:650;
  line-height:1.25;hyphens:none;overflow-wrap:break-word;
  transition:background var(--an),border-color var(--an)}
.hilfe-knopf:hover{background:var(--f2);border-color:var(--akzent)}
/* Der Kopf klebt oben - ohne diesen Abstand verschwindet die Zeile
   "Verwendung" darunter, wenn der Knopf dorthin springt. */
details.aufklapp[id]{scroll-margin-top:calc(var(--kopf-h) + 18px)}

/* Logos auf dunklem Grund stehen auf einer weissen Flaeche. Beide Marken
   sind dunkel auf transparent - das US-Import-Logo
   (/images/usimportService_Head.png, 271x110, gemessen: 67% transparent,
   31% dunkel, 2% hell) waere auf der dunklen Karte sonst unsichtbar. */
.fremdlogo{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:var(--rk);background:#fff}
.fremdlogo img{display:block;height:38px;width:auto}
/* --- Die beiden Dienste auf der Startseite ---------------------------- */
/* US-Import-Service und Marine-Teile standen bisher als zwei Zeilen im
   Fuss - gefunden hat sie dort niemand. Jetzt zwei breite Karten direkt
   unter dem Kopfbereich, als erstes nach dem Heldenbild. */
.dienste{display:grid;gap:16px;margin:0 0 26px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.dienst{position:relative;display:flex;flex-direction:column;gap:10px;
  padding:26px 26px 22px;border:1px solid var(--rand);border-radius:var(--r);
  color:#fff;overflow:hidden;text-decoration:none;
  /* Derselbe Hintergrund wie beim Karussell darueber und beim Katalogregal
     darunter - die drei Bloecke sollen als eine Flaeche gelesen werden. */
  background:
    radial-gradient(900px 380px at 88% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, var(--kopf-bg) 0%, var(--kopf-oben) 100%);
  transition:transform var(--an),box-shadow var(--an)}
.dienst::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;
  border-radius:50%;background:var(--cta);opacity:.22;pointer-events:none}
.dienst:hover{transform:translateY(-2px);box-shadow:var(--sch-karte)}
.dienst .ic{width:30px;height:30px;color:#fff;position:relative;z-index:1}
.dienst .marke{position:relative;z-index:1;display:flex;align-items:center;min-height:54px}
.dienst h2{margin-top:2px}
.dienst h2{position:relative;z-index:1;margin:0;color:#fff;font-size:23px;
  letter-spacing:-.02em;line-height:1.15}
.dienst p{position:relative;z-index:1;margin:0;font-size:15px;line-height:1.5;
  color:rgba(255,255,255,.84)}
.dienst .mehr{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;
  margin-top:6px;align-self:flex-start;min-height:40px;padding:8px 16px;
  border-radius:var(--rk);background:var(--cta);color:var(--cta-fg);
  font-size:14.5px;font-weight:800}
.dienst:hover .mehr{filter:brightness(1.08)}
/* Die Markenzeile im unteren Hinweisbereich: zwei ruhige Felder, kein
   zweiter Aufruf - die Karten oben machen die Arbeit. */
.markenzeile{display:grid;gap:14px;margin:18px 0 6px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.markenfeld{display:flex;align-items:center;gap:16px;padding:16px 18px;
  border:1px solid var(--rand);border-radius:var(--rk);background:var(--f2);
  color:var(--text);text-decoration:none;font-size:14px;line-height:1.45;
  transition:border-color var(--an),background var(--an)}
.markenfeld:hover{border-color:var(--akzent);background:var(--flaeche)}
.markenfeld .fremdlogo{flex:0 0 auto;padding:6px 10px;border:1px solid var(--rand)}
.markenfeld .fremdlogo img{height:30px}
/* --- Balkendiagramm Umsatz -------------------------------------------- */
/* Eine Reihe, eine Farbe. Die Saeule ist ein Raster aus drei Zeilen: Wert,
   Balken, Jahr - so stehen Zahl und Beschriftung immer auf derselben Linie,
   egal wie hoch der Balken ist. */
.balken{margin:6px 0 20px;padding:16px 16px 12px;border:1px solid var(--rand);
  border-radius:var(--rk);background:var(--flaeche)}
.balken figcaption{margin:0 0 14px;font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.bk-reihe{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;
  height:230px;padding-bottom:6px;border-bottom:1px solid var(--rand-stark)}
.bk-saeule{display:grid;grid-template-rows:auto 1fr auto;align-items:end;
  justify-items:center;gap:6px;height:100%}
.bk-wert{font-size:12px;font-weight:700;color:var(--leise);white-space:nowrap}
.bk-stab{display:block;width:100%;max-width:74px;min-height:2px;align-self:end;
  border-radius:4px 4px 0 0;background:var(--akzent);
  transition:filter var(--an)}
.bk-saeule:hover .bk-stab{filter:brightness(1.15)}
.bk-saeule:hover .bk-wert{color:var(--text)}
/* Laufendes Jahr: gestreift statt nur andersfarbig - das traegt die Aussage
   auch ohne Farbwahrnehmung, und die Fusszeile sagt es noch einmal. */
.bk-saeule.laufend .bk-stab{
  background:repeating-linear-gradient(135deg,var(--akzent) 0 7px,
             color-mix(in srgb, var(--akzent) 45%, #fff) 7px 14px)}
.bk-jahr{font-size:13px;font-weight:650;color:var(--text)}
.bk-fuss{margin:10px 0 0;font-size:12.5px;color:var(--leise)}
@media (max-width:700px){
  .bk-reihe{height:180px;gap:6px}
  .bk-wert{font-size:10.5px}
  .bk-jahr{font-size:11.5px}
}
/* --- Produktsicherheit (GPSR) ----------------------------------------- */
/* Pflichtangabe, aber kein Kaufweg: deshalb eine leise Zeile unter den
   Hilfeknoepfen statt eines dritten Knopfes daneben. */
.prodsg{margin-top:9px;font-size:13px}
.prodsg a{display:inline-flex;align-items:center;gap:6px;
  color:var(--leise);text-decoration:none;border-bottom:1px solid var(--rand-stark);
  padding-bottom:1px;transition:color var(--an),border-color var(--an)}
.prodsg a::before{content:"";width:13px;height:15px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--schild) center/contain no-repeat;
          mask:var(--schild) center/contain no-repeat}
.prodsg a:hover{color:var(--akzent);border-color:var(--akzent)}
/* --- Explosionszeichnung aus dem Altshop ------------------------------ */
/* Der Baustein kommt unveraendert aus /eshops_allgemein und bringt feste
   Breiten und eigene Tabellen mit. Hier wird nur dafuer gesorgt, dass er
   das Raster nicht sprengt: alles bleibt in der Inhaltsbreite, zu Breites
   bekommt eine eigene Laufleiste. */
.explo{position:relative;max-width:100%;margin:0 0 18px;padding-top:18px;text-align:center}
/* Der Baustein setzt die Eingabe "Bild-Nr." absolut - ohne position:relative
   hier haenge sie am Seitenrand statt an der Zeichnung. */
.explo img{max-width:100%;height:auto}
.explo table{max-width:100%;width:100%}
/* Gibt es zu dieser Baugruppe keine Zeichnung, liefert der Baustein nur
   Leerraum - dann soll der Block auch keinen Platz einnehmen. (:empty
   greift nicht, weil immer ein Kommentar und ein meta mitkommen.) */
.explo:not(:has(img)){display:none}
/* Die Zahlen der Zeichnung springen auf die Artikelkarte - sie darf nicht
   unter dem klebenden Kopf landen. */
.artikel[id]{scroll-margin-top:calc(var(--kopf-h) + 18px)}
/* Anklickbare Zahlen in der Zeichnung (neu/explo_live.js). Die Flaechen
   liegen in Prozent ueber dem Bild, damit sie beim Verkleinern mitwandern.
   Sichtbar, nicht unsichtbar: wer die Markierung sieht, erkennt auch, ob
   sie auf der richtigen Zahl sitzt. */
.explo-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 10px;text-align:left}
.explo-knopf{display:inline-flex;align-items:center;min-height:32px;
  padding:0 13px;border:1px solid var(--rand-stark);border-radius:var(--rk);
  background:var(--flaeche);color:var(--text);font:inherit;font-size:13px;
  font-weight:700;cursor:pointer}
.explo-knopf:hover{border-color:var(--akzent);color:var(--akzent)}
.explo-knopf:disabled{opacity:.6;cursor:default}
.explo-merk{font-size:12.5px;color:var(--sehr-leise)}
.explo-feld{position:absolute;inset:0;pointer-events:none}
.explo .bildrahmen{position:relative;display:inline-block;max-width:100%}
.explo-punkt{position:absolute;display:block;border-radius:3px;
  border:1.5px solid transparent;background:0 0;pointer-events:auto;
  transition:background var(--an),border-color var(--an)}
.explo-punkte-an .explo-punkt{border-color:rgba(200,16,46,.55);
  background:rgba(200,16,46,.10)}
.explo-punkte-an .explo-punkt:hover,
.explo-punkte-an .explo-punkt:focus-visible{border-color:var(--cta);
  background:rgba(200,16,46,.28);outline:0}
.explo:not(.explo-punkte-an) .explo-feld{display:none}
/* --- Angebotskarussell ------------------------------------------------
   Uebernommen aus /eshops_allgemein/testcarousell.asp: fuenf sichtbare
   Karten, die mittlere gross und farbig, die Nachbarn gekippt und
   zurueckgesetzt. Gezogen wird mit der Maus, geblaettert mit den Pfeilen,
   den Punkten oder den Pfeiltasten.

   Das Kleid ist neu: der Block steht auf einer dunklen Buehne in der Farbe
   des Seitenkopfs, mit einem leisen Lichtkegel hinter der mittleren Karte
   und einem Schatten darunter. Die Nachbarn sind grau UND abgedunkelt -
   auf Dunkel wirkt das wie Tiefe statt wie ein Fehler, und die mittlere
   Karte leuchtet als einzige weiss heraus. Der rote Preis ist damit das
   Erste, was man sieht.
   Nur auf dem Schreibtisch: unter 900px zeigen fuenf gestapelte Karten
   nichts, dort bleibt der Block aus. */
/* Der Abstand nach unten ist derselbe wie zwischen den Dienstkarten und
   dem Katalogregal (.dienste und .regal haben beide margin-bottom:26px),
   damit die drei Bloecke gleichmaessig untereinander stehen. */
.xkar{position:relative;margin:34px 0 26px;padding:26px 0 18px;
  border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--kopf-bg) 0%,var(--kopf-oben) 100%)}
/* Lichtkegel hinter der Buehne */
.xkar::before{content:"";position:absolute;left:50%;top:38px;width:620px;height:300px;
  margin-left:-310px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 70%)}
.xkar-kopf{position:relative;display:flex;align-items:center;gap:14px;
  margin:0 0 20px;padding:0 24px}
.xkar-balken{flex:0 0 7px;width:7px;height:46px;background:var(--cta)}
.xkar-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.xkar-auge{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.xkar h2{margin:0;font-size:32px;line-height:1.05;font-weight:800;
  letter-spacing:-.02em;color:#fff;text-transform:uppercase}
.Xcarousel-container{position:relative;width:100%;max-width:1000px;margin:0 auto;
  height:340px;perspective:1000px;cursor:grab;outline:0;
  -webkit-user-select:none;user-select:none}
.Xcarousel-container.zieht{cursor:grabbing}
.Xcarousel-container:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* Schatten auf dem Boden, unter der mittleren Karte */
.Xcarousel-container::after{content:"";position:absolute;left:50%;top:286px;
  width:300px;height:26px;margin-left:-150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 72%)}
.Xcarousel-track{position:relative;width:100%;height:290px;transform-style:preserve-3d}
.Xcard{position:absolute;top:0;left:50%;width:250px;height:290px;margin-left:-125px;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.45);
  text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .35s,filter .35s;
  transform:scale(.6);opacity:0;pointer-events:none;z-index:0}
.Xcard.center{transform:translateX(0) scale(1);opacity:1;pointer-events:auto;z-index:5}
/* Die Abstaende sind so gewaehlt, dass auch die aeusseren Karten bei
   1000px Breite noch vollstaendig im Block liegen: 320 + 125 = 445 < 500. */
.Xcard.left-1{transform:translateX(-190px) scale(.86) rotateY(16deg);opacity:1;
  filter:grayscale(1) brightness(.62);z-index:4;pointer-events:auto}
.Xcard.right-1{transform:translateX(190px) scale(.86) rotateY(-16deg);opacity:1;
  filter:grayscale(1) brightness(.62);z-index:4;pointer-events:auto}
.Xcard.left-2{transform:translateX(-320px) scale(.74) rotateY(22deg);opacity:1;
  filter:grayscale(1) brightness(.45);z-index:3;pointer-events:auto}
.Xcard.right-2{transform:translateX(320px) scale(.74) rotateY(-22deg);opacity:1;
  filter:grayscale(1) brightness(.45);z-index:3;pointer-events:auto}
.Xcard.weit{transform:scale(.6);opacity:0;pointer-events:none;z-index:0}
.Xcard:hover{box-shadow:0 22px 48px rgba(0,0,0,.55)}
.Xcard .xkar-bild{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:18px 14px 8px;background:#fff;min-height:0}
.Xcard .xkar-bild img{max-width:100%;max-height:100%;object-fit:contain}
/* Das Preisschild sitzt als Fahne an der Kante, nicht im Bild. */
.Xcard .xkar-preis{position:absolute;top:14px;left:-6px;z-index:2;
  padding:4px 11px 4px 14px;background:var(--cta);color:var(--cta-fg);
  font-size:15px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 3px 10px rgba(0,0,0,.3)}
.Xcard .card-logo{position:absolute;left:12px;bottom:84px;z-index:2;opacity:.9}
.Xcard .card-logo img{width:56px;height:auto;display:block}
.Xcard .article-description{flex:0 0 auto;padding:10px 12px 12px;
  background:var(--akzent);color:var(--akzent-fg);
  font-size:12.5px;line-height:1.35;text-align:center}
.Xcard .article-description strong{display:block;font-weight:800;
  text-transform:uppercase;overflow-wrap:anywhere}
.Xcard .article-description .p{display:block;margin-top:4px;font-size:16px;font-weight:800}
.nav-arrow{position:absolute;top:118px;z-index:8;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(255,255,255,.10);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;padding:0 0 4px;
  transition:background var(--an),border-color var(--an)}
.nav-arrow:hover{background:var(--cta);border-color:var(--cta)}
.nav-arrow.left{left:10px}
.nav-arrow.right{right:10px}
.xkar .dots{position:absolute;left:0;right:0;bottom:-2px;z-index:8;
  display:flex;justify-content:center;gap:8px}
.xkar .dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.28);cursor:pointer;transition:background var(--an)}
.xkar .dot:hover{background:rgba(255,255,255,.6)}
.xkar .dot.aktiv{background:var(--cta);transform:scale(1.3)}
@media (max-width:899px){.xkar{display:none}}

/* --- Korbleiste ------------------------------------------------------- */
/* Statt nach dem Hinzulegen in den Warenkorb zu springen, faehrt rechts
   eine Leiste mit dem Korbinhalt ein - die Trefferliste bleibt stehen.
   Der Altshop macht dasselbe mit zwei Frames (Warenkorb_Top.asp); hier
   ist es eine Anfrage an /neu/korb_add.asp.
   Sie gilt auf JEDER Breite. Anfangs lief sie nur ab 900px, weil eine
   Leiste NEBEN dem Inhalt auf dem Telefon kein Gewinn ist - dort deckt
   sie jetzt die ganze Breite ab und ist damit dasselbe wie am
   Schreibtisch, nur groesser. Der Weg ohne Javascript bleibt die
   Korbseite. */
/* Ueber die ganze Hoehe, ab ganz oben - und damit ueber allem, was oben
   klebt: Kopfzeile (100), Kategoriebalken (55), geoeffnete
   Kategorieleiste (90) und Tableiste am unteren Rand (65).
   Hier stand 80. Das genuegte, solange die Kopfzeile auf 60 lag; seit
   sie wegen der Vorschlagsliste auf 100 steht, schob sie sich ueber die
   eingefahrene Leiste - Kopf und Fahrzeugzeile deckten deren obere
   Haelfte zu. 110 raeumt das aus und bleibt unter dem, was bewusst noch
   darueber gehoert: Fahrzeugfenster (120), Lupe (140) und
   Einwilligung (150). */
.korbleiste{position:fixed;top:0;right:0;z-index:110;
    display:flex;flex-direction:column;width:min(420px,100%);height:100%;
    background:var(--flaeche);border-left:1px solid var(--rand);
    box-shadow:-18px 0 44px rgba(18,26,38,.16);
    transform:translateX(100%);visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.7,.3,1),visibility 0s linear .28s}
  .korbleiste.auf{transform:none;visibility:visible;
    transition:transform .28s cubic-bezier(.2,.7,.3,1),visibility 0s}
  .kl-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 12px 14px 18px;border-bottom:1px solid var(--rand);background:var(--f2)}
  .kl-kopf strong{font-size:16px;font-weight:800;letter-spacing:-.01em}
  .kl-zu{width:40px;height:40px;border:0;border-radius:var(--rk);background:0 0;
    font-size:26px;line-height:1;color:var(--leise);cursor:pointer}
  .kl-zu:hover{background:var(--f3);color:var(--text)}
  .kl-koerper{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px 18px}
  .kl-inhalt{display:flex;flex-direction:column;gap:14px;min-height:100%}
  .kl-meldung{padding:10px 13px;border-radius:var(--rk);border-left:3px solid var(--gruen);
    background:var(--gruen-f);font-size:14px;font-weight:650;color:var(--text)}
  .kl-meldung.warn{border-left-color:var(--gelb);background:var(--gelb-f)}
  .kl-meldung.fehler{border-left-color:var(--rot);background:var(--rot-f)}
  .kl-leer{padding:26px 10px;text-align:center;color:var(--leise);font-size:14.5px}
  .kl-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .kl-liste li{display:grid;grid-template-columns:1fr auto auto;align-items:start;
    gap:4px 10px;padding:11px 0;border-bottom:1px solid var(--rand)}
  .kl-liste li.marker{color:var(--leise)}
  .kl-text{display:flex;flex-direction:column;gap:2px;min-width:0}
  /* Bezeichnungen wie KIPPHEBEL&HALBKUGEL&MUTTR haben keine Leerzeichen
     und stossen auf schmalen Geraeten in den Betrag. Deshalb darf hier
     auch innerhalb eines Wortes umbrochen werden. */
  .kl-bez{font-size:14px;font-weight:650;line-height:1.3;overflow-wrap:anywhere}
  .kl-nr{font-size:12.5px;color:var(--leise)}
  .kl-rechnung{font-size:12.5px;color:var(--leise)}
  .kl-zahl{font-size:14.5px;font-weight:800;white-space:nowrap}
  .kl-wegform{margin:0}
  .kl-weg{width:28px;height:28px;border:1px solid var(--rand);border-radius:var(--rk);
    background:var(--flaeche);color:var(--leise);font-size:17px;line-height:1;cursor:pointer}
  .kl-weg:hover{border-color:var(--rot);color:var(--rot)}
  .kl-summe{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding-top:4px;font-size:14.5px}
  .kl-summe strong{font-size:21px;font-weight:800;letter-spacing:-.02em}
  .kl-hinweis{margin-top:-8px;font-size:12.5px;color:var(--leise)}
  .kl-aktionen{margin-top:auto;display:grid;gap:8px;padding-top:6px}
  .kl-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
    padding:12px 18px;border-radius:var(--rk);background:var(--cta);color:var(--cta-fg);
    text-decoration:none;font-size:15.5px;font-weight:800}
  .kl-cta:hover{filter:brightness(1.06)}
  .kl-zweit{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    padding:10px 18px;border:1px solid var(--rand-stark);border-radius:var(--rk);
    background:var(--flaeche);color:var(--text);text-decoration:none;font-weight:700}
  .kl-zweit:hover{background:var(--f2)}
  /* "Weiter einkaufen" ist ein <button>, kein Link - er fuehrt nirgendwo
     hin, er schliesst nur. Ein Knopf bringt eigene Schrift und eigene
     Breite mit; beides hier zurueckgesetzt, damit er neben dem Link
     daneben nicht auffaellt. */
  button.kl-zweit{width:100%;font-family:inherit;font-size:inherit;cursor:pointer}
  /* Der Knopf, der gerade geklickt wurde, zeigt solange an, dass etwas laeuft. */
  .kts-laeuft{opacity:.65;pointer-events:none}
/* Leerer Korb: die Zahl steht trotzdem im Dokument, damit das Skript sie
   setzen kann - das hidden-Attribut muss dafuer das display der Regel
   schlagen. */
.korb-zahl[hidden],.tableiste .zahl[hidden]{display:none}
[data-korb-zahl].kts-puls{animation:kts-puls .45s cubic-bezier(.2,.7,.3,1)}
/* --- Dialogfenster fuer die Anfrageformulare -------------------------- */
.fenster{width:min(620px,94vw);max-height:88vh;padding:0;border:0;
  border-radius:var(--r);box-shadow:var(--sch-hoch);background:var(--flaeche);
  overflow:hidden;color:var(--text)}
.fenster::backdrop{background:rgba(18,26,38,.55)}
.fenster-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 12px 12px 18px;border-bottom:1px solid var(--rand);background:var(--f2)}
.fenster-kopf strong{font-size:15.5px;font-weight:750}
.fenster-zu{width:40px;height:40px;border:0;border-radius:var(--rk);background:0 0;
  font-size:24px;line-height:1;color:var(--leise);cursor:pointer}
.fenster-zu:hover{background:var(--f3);color:var(--text)}
.fenster iframe{display:block;width:100%;height:min(70vh,560px);border:0;background:var(--flaeche)}
/* Die Anfrage zur Explosionszeichnung kam im Altshop als 600x830-Popup -
   sie braucht mehr Hoehe als eine Artikelanfrage. */
.fenster.hoch{width:min(680px,94vw)}
.fenster.hoch iframe{height:min(80vh,820px)}
/* --- "Lagernde Alternativen vorhanden!" ------------------------------ */
/* Das Overlay der alten Artikelkarte (Highslide-Iframe auf
   /eshops_allgemein/hinweis_Alternativen.asp): schwarze Flaeche, gelbe
   Zeile, Versalien. Die Form bleibt, nur der Satzbau ist der der neuen
   Oberflaeche - und es laesst sich mit Escape, Klick daneben und Knopf
   schliessen. */
.althinweis{position:relative;width:min(620px,94vw);padding:34px 30px 28px;
  border:0;border-radius:var(--r);background:#0f1217;color:#fff;
  box-shadow:var(--sch-hoch)}
.althinweis::backdrop{background:rgba(8,11,16,.8)}
.althinweis .ah-klein{margin:0;font-size:30px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;line-height:1.1}
.althinweis h2{margin:6px 0 16px;font-size:19px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:#f5b301;line-height:1.25}
.althinweis p{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:#e7ebf0}
.althinweis .ah-zu{position:absolute;top:10px;right:10px;width:38px;height:38px;
  border:0;border-radius:50%;background:0 0;color:#8b94a0;font-size:24px;
  line-height:1;cursor:pointer}
.althinweis .ah-zu:hover{background:rgba(255,255,255,.1);color:#fff}
.ah-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ah-cta{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;border-radius:var(--rk);
  background:var(--cta);color:var(--cta-fg);text-decoration:none;
  font-size:15px;font-weight:750}
.ah-cta:hover{filter:brightness(1.08)}
.ah-zweit{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--rk);background:0 0;color:#fff;font-size:15px;
  font-weight:650;cursor:pointer}
.ah-zweit:hover{background:rgba(255,255,255,.1)}
@media (max-width:620px){
  .althinweis{padding:30px 18px 22px}
  .althinweis .ah-klein{font-size:24px}
  .althinweis h2{font-size:16.5px}
  .ah-knoepfe{flex-direction:column}
  .ah-cta,.ah-zweit{width:100%}
}

/* Anfrage-Schaltflaeche: derselbe schwarze Kasten wie bisher, jetzt aber
   anklickbar. */
/* Der Anfragehinweis stand als schwarzer Block mit weisser Fettschrift da und
   schrie lauter als der Preis, den er ersetzt. Jetzt ein ruhiger Hinweis:
   keine Flaeche, gedaempfte Farbe, normale Schrift. */
a.anfrage{cursor:pointer}
.anfrage{display:inline-block;padding:0;background:0 0;color:var(--leise);
  font-size:12.5px;font-weight:500;line-height:1.4;text-align:left;
  text-decoration:underline;text-decoration-color:var(--rand-stark);
  text-underline-offset:3px;
  transition:color var(--an),text-decoration-color var(--an)}
a.anfrage:hover{color:var(--akzent);text-decoration-color:var(--akzent)}
.karte .anfrage{font-size:13.5px}
/* Beide Knoepfe einer Karte haben dieselbe Form und dieselbe Schriftstaerke.
   "In den Warenkorb" ist schwarz mit weisser Schrift, "Zum Artikel" offen -
   der Unterschied liegt in der Flaeche, nicht in Fettschrift oder Schatten.
   cursor:pointer muss sein: <button> bekommt die Hand nicht von selbst. */
.karte-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;min-height:42px;padding:9px 14px;border-radius:var(--rk);
  border:1px solid var(--text);background:var(--text);color:#fff;
  font:inherit;font-size:14px;font-weight:500;letter-spacing:0;
  text-decoration:none;cursor:pointer;box-shadow:none;
  transition:background var(--an),border-color var(--an),color var(--an)}
.karte-cta:hover{background:#000;border-color:#000;color:#fff}
.karte-cta:active{background:#000}
.karte-cta:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.karte-cta.zweit{background:0 0;color:var(--akzent);border-color:var(--rand-stark)}
.karte-cta.zweit:hover{background:var(--f2);color:var(--akzent);border-color:var(--leise)}

/* --- Blaettern ------------------------------------------------------ */
.blaettern{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 4px;justify-content:center}
.blaettern a,.blaettern span{display:inline-grid;place-items:center;min-width:44px;
  min-height:44px;padding:9px 13px;border:1px solid var(--rand-stark);border-radius:var(--rk);
  background:var(--flaeche);color:var(--text);text-decoration:none;font-weight:650;
  transition:background var(--an),border-color var(--an),transform var(--an)}
.blaettern a:hover{background:var(--f2);border-color:var(--leise);transform:translateY(-1px)}
.blaettern .jetzt{background:var(--text);border-color:var(--text);color:#fff}

/* =====================================================================
   10. Kaesten, Artikelkarte, Adresse, Stufen
   ===================================================================== */
.karte{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
/* --- Luft im Kaufkasten ---------------------------------------------- */
/* Der Kasten rechts trug Preis, Steuerzeile, Lagerschild, Versandkasten,
   Mengenfeld, zwei Knoepfe, die Gebotszeile und drei Hilfeknoepfe - mit
   1 bis 10 px Abstand dazwischen und 15 px Rand. Das war dicht gedraengt,
   waehrend die Bildspalte daneben auf breiten Schirmen immer weiter
   auseinander ging: die Kaufspalte stand fest auf 340 px.
   Beides zusammen gefasst: die Spalte waechst mit dem Fenster mit (bis
   400 px), und innen bekommt jeder Block Abstand nach Bedeutung - der
   Sprung vom Preis zum Kaufknopf ist groesser als der vom Preis zur
   Steuerzeile, die zu ihm gehoert. Alles unter .karte .kasten.kaufen,
   damit die gleichen Klassen in Listen und Kasse unberuehrt bleiben. */
.karte .kasten.kaufen{padding:22px}
/* Die Kette oben rechts im Preiskasten. float statt eigener Zeile:
   so kostet sie keine Hoehe - der Preis bleibt dort, wo er war, und
   seine Zeile wird nur schmaler. */
.karte .kasten.kaufen .kaufkopf{float:right;margin:-4px -4px 0 10px}
.karte .kasten.kaufen .liste-preis{margin-top:6px}
.karte .kasten.kaufen .steuerhinweis{margin-top:6px}
.karte .kasten.kaufen .lager{margin-top:14px}
.karte .kasten.kaufen .vheute{margin-top:16px;padding:12px 14px}
.karte .kasten.kaufen .kaufzeile{margin-top:22px;gap:20px}
.karte .kasten.kaufen .sprungzeile{margin-top:18px;gap:10px}
.karte .kasten.kaufen .gebotzeile{margin-top:20px;padding-top:18px}
.karte .kasten.kaufen .hilfe{margin-top:20px;padding-top:18px;gap:8px}
.karte .kasten.kaufen .hilfe-knopf{min-height:44px;padding:8px 9px}
.karte .kasten.kaufen .prodsg{margin-top:14px}
.karte .kasten.kaufen .quelle{margin-top:14px}
/* Das Prozentschild klebte am Streichpreis. */
.spar.amstrich{position:static;margin-left:10px;vertical-align:middle}
/* Auf dem Telefon: erst Bild und Bezeichnung, dann Preis und Kaufknopf,
   dann die Datentabelle. Auf dem Desktop steht der Preiskasten rechts. */
.karte>.kasten{order:1}
.karte>.karte-daten{order:2}
.karte .bildspalte{aspect-ratio:auto;background:var(--f2);border-radius:var(--r);
  padding:14px;display:grid;place-items:center;overflow:hidden}
.karte .bildspalte img{width:100%;height:auto;object-fit:contain}
.kasten{padding:15px;margin-bottom:16px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.kasten h3{margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--leise)}
.adresse{position:relative;padding:13px 15px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);line-height:1.55;margin-bottom:14px}
.kunde{margin-bottom:18px;color:var(--leise);font-size:14px}
.adresse-aendern{position:absolute;top:10px;right:12px;font-size:13.5px;font-weight:650}
.aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.aktionen button.knopf{flex:1 1 200px}
.stufen{display:grid;gap:14px}
.stufe{padding:14px 16px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);transition:box-shadow var(--an)}
.stufe h2{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--leise)}
.stufe.fertig{border-left:3px solid var(--gruen)}
.stufe.aktiv{border-left:3px solid var(--cta);box-shadow:var(--sch-karte)}
.stufe.wartet{opacity:.55;background:var(--f2)}
.wert{font-size:16px;font-weight:650}
.schritt-art{font-family:ui-monospace,Consolas,monospace;font-size:11px;
  color:var(--sehr-leise);letter-spacing:.04em}

/* --- Kundencenter: Reiter oben, Spalte auf dem Desktop -------------- */
.rahmen{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.rahmen nav{display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;
  scrollbar-width:none;-ms-overflow-style:none}
.rahmen nav::-webkit-scrollbar{display:none}
.rahmen nav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding:10px 15px;border:1px solid var(--rand-stark);border-radius:var(--rp);
  background:var(--flaeche);color:var(--text);text-decoration:none;font-size:14.5px;
  font-weight:650;white-space:nowrap;transition:background var(--an),border-color var(--an)}
.rahmen nav a:hover{background:var(--f2);border-color:var(--leise)}
.rahmen nav a.aktiv{background:var(--text);border-color:var(--text);color:#fff}

/* --- Formulare der Verwaltung ---------------------------------------- */
.feldliste{display:grid;gap:18px}
.feld{display:grid;gap:7px;min-width:0}
.feld>.bez{font-size:13.5px;font-weight:700;color:var(--leise);line-height:1.35}
.feld>input,.feld>select,.feld>textarea{width:100%}
.feld.kurz>input,.feld.kurz>select{max-width:220px}
.feld>.merk{font-size:13px;color:var(--sehr-leise)}
.pflicht{color:var(--rot);font-weight:800;margin-left:2px}
.feld>.falsch{font-size:13px;font-weight:650;color:var(--rot)}
.feld input.falsch,.feld select.falsch{border-color:var(--rot);box-shadow:0 0 0 3px rgba(194,38,26,.12)}
.jn{display:flex;gap:8px;flex-wrap:wrap}
.jn label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
  border:1px solid var(--rand-stark);border-radius:var(--rp);background:var(--flaeche);
  cursor:pointer;font-size:15px;transition:background var(--an),border-color var(--an)}
.jn label:hover{background:var(--f2);border-color:var(--rand-stark)}
.jn label.an{border-color:var(--akzent);background:var(--f2);font-weight:700;
  box-shadow:0 0 0 1px var(--akzent)}
.jn input{margin:0;width:18px;height:18px;accent-color:var(--akzent)}
/* Adressformulare im Checkout. Zehn Felder untereinander sind ein langer
   Weg bis zum Knopf - ab 700px stehen sie deshalb zweispaltig, und die
   Felder selbst sind flacher als in der Verwaltung. */
.feldliste.adrfelder{gap:11px}
.feldliste.adrfelder .feld{gap:4px}
.feldliste.adrfelder .feld>.bez{font-size:12.5px}
.feldliste.adrfelder input,.feldliste.adrfelder select{min-height:40px;
  padding:8px 11px;font-size:15px}
.feldliste.adrfelder select{padding-right:32px}
.feldliste[hidden]{display:none}
@media (min-width:700px){
  .feldliste.adrfelder{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 16px}
}
.jn.knapp{margin-bottom:14px}
.jn.knapp label{min-height:38px;padding:5px 13px;font-size:14px}
/* Die gespeicherte Adresse darunter: enger gesetzt, sie wird gelesen und
   nicht bearbeitet. */
.adresse{padding:10px 13px;line-height:1.45;font-size:14.5px}

.speichern{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--rand)}
.speichern .merk{font-size:13px;color:var(--sehr-leise)}

/* --- Verwaltung: Einstellungen aus der Datei -------------------------- */
/* Zweite Navigationsebene innerhalb des Abschnitts "Technik". */
.cfg-gruppen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:8px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--f2)}
.cfg-gruppen a{display:inline-flex;align-items:center;min-height:36px;padding:6px 13px;
  border:1px solid var(--rand-stark);border-radius:var(--rp);background:var(--flaeche);
  color:var(--text);text-decoration:none;font-size:14px;font-weight:650;
  transition:background var(--an),border-color var(--an),color var(--an)}
.cfg-gruppen a:hover{border-color:var(--akzent)}
.cfg-gruppen a.aktiv{background:var(--text);border-color:var(--text);color:#fff}
/* Der Weg zurueck auf die Uebersicht der Technik-Bereiche. Leiser als die
   Bereiche selbst - er ist der Ausgang, nicht einer der Punkte. */
.cfg-gruppen a.zurueck{border-style:dashed;border-color:var(--rand);
  color:var(--leise);font-weight:600;margin-right:4px}
.cfg-gruppen a.zurueck:hover{border-style:solid;color:var(--text)}
/* Der Schluessel steht neben der Beschriftung - er ist das, was in der
   Datei steht, und danach sucht man dort. */
.cfg-key{font-size:12px;font-weight:600;color:var(--sehr-leise);
  background:var(--f2);border-radius:4px;padding:1px 5px}
.cfg-geheim{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;
  border:1px dashed var(--rand-stark);border-radius:var(--rk);background:var(--f2);
  color:var(--leise);font-size:14px;font-weight:650;width:fit-content}
.cfg-spalten{margin:0;padding:0 0 0 18px;display:grid;gap:4px;
  font-size:13.5px;color:var(--leise)}
.cfg-spalten code{font-size:12.5px}
/* Woher ein Wert kommt - drei Ebenen, zwei davon bekommen eine Farbe. */
.q-db{color:var(--gruen);font-weight:750}
.q-datei{color:var(--akzent);font-weight:750}
/* Fertige Zeilen oder die CREATE-TABLE-Anweisung zum Herauskopieren. */
.cfg-zeilen{display:block;width:100%;margin:10px 0 0;padding:10px 12px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);background:var(--flaeche);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  line-height:1.5;resize:vertical;white-space:pre}
.cfg-anlegen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.cfg-anlegen .merk{font-size:13px;color:var(--sehr-leise)}
/* --- Verwaltung: Kopf, Navigation, Uebersicht ------------------------- */
/* Vorher: eine Ueberschrift, darunter sechzehn gleich aussehende Links.
   Jetzt: Kopf mit Suche, Navigation in Bloecken, und eine Uebersicht, die
   zu jedem Abschnitt sagt, was darin steht. */
.adm-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:6px}
.adm-kopf h1{margin-bottom:4px}
.adm-suche{display:flex;gap:8px;align-items:center;flex:1 1 320px;max-width:520px;margin:0}
.adm-suche input[type=search]{flex:1 1 auto;min-width:0;min-height:44px;padding:10px 14px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);background:var(--flaeche);
  font:inherit;font-size:15px}
.adm-suche input[type=search]:focus{outline:0;border-color:var(--akzent);
  box-shadow:0 0 0 3px rgba(21,73,154,.15)}
.adm-suche .knopf{flex:0 0 auto}

.adm-nav{display:grid;gap:2px;align-content:start}
.adm-nav .adm-start{display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-weight:750}
.adm-nav .adm-start .ic{width:18px;height:18px}
.adm-nav-titel{display:block;margin:16px 0 4px;padding:0 10px;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sehr-leise)}
.adm-nav-titel:first-of-type{margin-top:6px}

.kacheln-kopf{margin-bottom:22px}
.kacheln-kopf h2{margin-bottom:4px}
.kacheln-kopf p{margin:0;color:var(--leise);font-size:15px;max-width:70ch}
.adm-karte{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 26px;padding:16px 18px;border:1px solid var(--rand-stark);
  border-left:3px solid var(--cta);border-radius:var(--r);background:var(--f2)}
.adm-karte strong{display:block;font-size:16px}
.adm-karte span{display:block;margin-top:3px;font-size:14px;color:var(--leise)}
.adm-block{margin:0 0 26px}
.adm-block h3{margin:0 0 2px;font-size:17px}
.adm-block-text{margin:0 0 12px;color:var(--leise);font-size:14px}
.adm-kacheln{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.adm-kachel{display:grid;gap:4px;align-content:start;padding:14px 16px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche);
  box-shadow:var(--sch);color:var(--text);text-decoration:none;
  transition:transform var(--an),box-shadow var(--an),border-color var(--an)}
.adm-kachel:hover{transform:translateY(-2px);border-color:var(--akzent);
  box-shadow:var(--sch-karte)}
.adm-kachel strong{font-size:15.5px}
.adm-kachel span{font-size:13.5px;line-height:1.45;color:var(--leise)}
.adm-kachel em{font-style:normal;font-size:12px;font-weight:700;color:var(--sehr-leise)}

.adm-treffer{display:grid;gap:8px}
.adm-treffer a{display:grid;gap:2px;padding:11px 14px;border:1px solid var(--rand);
  border-radius:var(--rk);background:var(--flaeche);color:var(--text);text-decoration:none;
  transition:border-color var(--an),background var(--an)}
.adm-treffer a:hover{border-color:var(--akzent);background:var(--f2)}
.adm-treffer strong{font-size:15px}
.adm-treffer span{font-size:13px;color:var(--leise)}
.adm-treffer code{font-size:12px;color:var(--sehr-leise)}
/* Warum dieser Treffer? Das Stueck Erklaertext, in dem das gesuchte Wort
   steht - sonst steht in der Liste eine Einstellung, deren Beschriftung
   mit der Suche nichts zu tun hat. */
.adm-tr-warum{font-size:12.5px;font-style:normal;color:var(--text);
  background:var(--f2);border-left:3px solid var(--rand-stark);
  padding:5px 9px;margin:3px 0 1px;border-radius:0 var(--e-or) var(--e-ur) 0}

/* Zwischenueberschrift in langen Abschnitten. */
/* Felder, die nur noch der Altshop liest. Kein Fehler, nur eine
   Einordnung - sie bleiben einstellbar, solange der Altshop laeuft. */
.feld-alt{display:inline-block;padding:1px 7px;border-radius:999px;
  border:1px dashed var(--rand-stark);background:var(--f2);
  color:var(--leise);font-size:11px;font-weight:700;white-space:nowrap;
  letter-spacing:.02em;cursor:help}

/* --- Das Fragezeichen neben einer Einstellung ------------------------- */
/* Das Fragezeichen der Verwaltung heisst adm-hilfe und NICHT hilfe:
   .hilfe gibt es seit Langem auf der Artikelkarte - das ist dort die
   Zeile mit den drei Knoepfen "Ihre Frage?", "Guenstiger gesehen?" und
   "Verwendung". Diese Regeln stehen weiter unten in der Datei und haben
   die aeltere ueberschrieben: aus der Knopfzeile wurde ein 19 Pixel
   grosser Kreis, die drei Knoepfe quollen heraus und deckten den Verweis
   auf die Produktsicherheit darunter zu. Zwei verschiedene Dinge duerfen
   nicht denselben Namen tragen. */
/* Ein echter Knopf, kein span mit title: so laesst er sich mit der
   Tastatur ansteuern (Tab, dann sichtbar durch :focus-visible) und auf
   dem Telefon antippen. Ein title-Text erscheint auf dem Telefon nie.
   type="button" setzt die Seite - sonst schickt Enter das Formular ab. */
.adm-hilfe{position:relative;display:inline-grid;place-items:center;
  width:19px;height:19px;flex:0 0 auto;padding:0;margin-left:2px;
  border:1px solid var(--rand-stark);border-radius:999px;
  background:var(--flaeche);color:var(--leise);
  font:inherit;font-size:11.5px;font-weight:800;line-height:1;
  cursor:help;vertical-align:middle;
  transition:background var(--an),border-color var(--an),color var(--an)}
.adm-hilfe:hover,.adm-hilfe:focus-visible{background:var(--text);border-color:var(--text);color:#fff}
.adm-hilfe:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* Der Text selbst. Erscheint beim Darueberfahren und beim Anklicken -
   :focus deckt Tastatur UND Fingertipp ab. */
.adm-hilfe .adm-hilfe-text{position:absolute;top:calc(100% + 8px);left:-8px;z-index:60;
  display:none;width:330px;max-width:min(330px,76vw);
  padding:11px 13px;border:1px solid var(--rand-stark);border-radius:var(--r);
  background:var(--flaeche);color:var(--text);box-shadow:var(--sch-hoch);
  font-size:13px;font-weight:400;line-height:1.55;text-align:left;
  white-space:normal;cursor:auto}
.adm-hilfe:hover .adm-hilfe-text,.adm-hilfe:focus .adm-hilfe-text{display:block}
/* Das Zipfelchen nach oben, damit der Kasten zum Zeichen gehoert. */
.adm-hilfe .adm-hilfe-text::before{content:"";position:absolute;top:-6px;left:10px;
  width:10px;height:10px;transform:rotate(45deg);
  background:var(--flaeche);border-left:1px solid var(--rand-stark);
  border-top:1px solid var(--rand-stark)}
/* Am rechten Rand kippt der Kasten nach links, sonst steht er ausserhalb. */
.feld:last-child .adm-hilfe .adm-hilfe-text,.adm-hilfe.links .adm-hilfe-text{left:auto;right:-8px}
.feld:last-child .adm-hilfe .adm-hilfe-text::before,.adm-hilfe.links .adm-hilfe-text::before{left:auto;right:10px}

/* Die Beschriftung traegt das Zeichen in derselben Zeile. */
.feld .bez{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}

@media (max-width:620px){
  .adm-hilfe .adm-hilfe-text{left:auto;right:-8px;width:min(330px,86vw)}
  .adm-hilfe .adm-hilfe-text::before{left:auto;right:10px}
}

.feldgruppe{margin:10px 0 -4px;padding-top:16px;border-top:1px solid var(--rand);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sehr-leise)}
.feldliste>.feldgruppe:first-child{margin-top:0;padding-top:0;border-top:0}
/* Anfrageformulare: zwei Felder nebeneinander, wenn Platz ist. Bewusst
   auf .feldliste beschraenkt - .tabelle-huelle.paare ist etwas anderes. */
.feldliste>.paare{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Die zehn Zeilen der Teileanfrage (Altcode: inquiry_set.asp, dort eine
   Tabelle mit je einer Nummer in der ersten Spalte). */
.teilzeilen{display:grid;gap:8px}
.teilzeile{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;
  align-items:center}
.teilzeile>.tz-nr{font-size:13px;color:var(--sehr-leise);text-align:right}
.wahlzeile{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;
  line-height:1.45;cursor:pointer}
.wahlzeile input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;padding:0}
/* Koederfeld: im Markup, aber nicht zu sehen. display:none waere
   verraeterisch - manche Automaten pruefen darauf. */
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Die globale textarea-Regel ist fuer die Verwaltung gedacht: 320 Pixel
   hoch und Schreibmaschinenschrift, damit sich dort Konfigurationstexte
   lesen lassen. In einem Anfrageformular ist eine Anschrift damit
   dreimal so hoch wie noetig und sieht aus wie eine Codeeingabe. */
.feldliste .feld>textarea{min-height:96px;font-family:inherit;font-size:15.5px}
/* --- Die sozialen Netze ---------------------------------------------- */
/* Die Symbole sind die Dateien des Altshops. Sie stehen im Fuss auf
   dunklem Grund; der helle Rahmen dahinter haelt die Marken lesbar, so
   wie es der Altshop mit seinen quadratischen Kacheln auch tat. */
.sozial{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0}
.sozial-bez{flex:0 0 100%;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.fuss.hell .sozial-bez{color:var(--sehr-leise)}
.sozial a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--rk);background:rgba(255,255,255,.1);
  transition:background var(--an),transform var(--an)}
.fuss.hell .sozial a{background:var(--f2)}
.sozial a:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.fuss.hell .sozial a:hover{background:var(--f3)}
.sozial img{display:block;width:26px;height:26px;object-fit:contain}
.sozial .sozial-text{padding:0 10px;font-size:13px;font-weight:700;white-space:nowrap}
.sozial a:has(.sozial-text){width:auto;min-width:40px}

/* Das Trustmary-Widget bringt seine eigene Gestaltung mit; hier steht
   nur der Abstand und eine Grenze nach oben, damit es nicht breiter
   wird als das Blatt. */
.trustmary{margin:28px 0 0;max-width:100%;overflow-x:hidden}
/* --- Kundenbewertungen auf der Startseite ----------------------------- */
.bewertung{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin:0 0 26px;padding:20px 22px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.bw-note{flex:0 0 auto;display:grid;place-items:center;gap:0;
  width:84px;height:84px;border-radius:50%;background:var(--flaeche);
  border:2px solid var(--gruen);color:var(--gruen)}
.bw-note strong{font-size:30px;font-weight:800;line-height:1}
.bw-note span{font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;opacity:.8}
.bw-text{flex:1 1 260px;min-width:0}
.bw-text h2{margin:0 0 6px;font-size:18px;font-weight:800}
.bw-text p{margin:0 0 4px;font-size:14.5px;line-height:1.55;color:var(--text)}
.bw-text p.merk{margin:6px 0 0;font-size:12.5px;color:var(--sehr-leise)}
@media (max-width:560px){
  .bewertung{padding:16px 16px;gap:14px}
  .bw-note{width:70px;height:70px}
  .bw-note strong{font-size:25px}
}

/* --- Teileanfrage ---------------------------------------------------- */
/* Zwanzig Felder auf einer Seite. Damit das nicht wie ein Antrag aussieht,
   steht alles in drei nummerierten Abschnitten, und JEDES Bedienelement ist
   exakt gleich hoch (--ta-h). Vorher war das nicht so: die globale Regel
   fuer Eingabefelder greift nur bei input[type=...], und ein <input> ohne
   type-Angabe fiel durch - daher die unterschiedlich hohen Kaesten.
   Die Regel unten faengt beides ab, die type-Angaben stehen jetzt
   zusaetzlich im Markup. */
.ta-form{--ta-h:50px}
/* Der Kopf ist ein eigenes Band: Signalzeile, Titel, Lauftext und die drei
   Zusagen - rechts daneben das Zeichen fuer "wir suchen das Teil". Vorher
   stand all das lose ueber dem Formular und sah aus wie ein Rest. */
.ta-kopf{display:flex;align-items:center;gap:26px;margin:0 0 22px;
  padding:26px 28px;border:1px solid var(--rand);border-radius:var(--r);
  background:linear-gradient(135deg,var(--f2) 0%,var(--flaeche) 62%);
  overflow:hidden}
.ta-kopf-text{min-width:0;flex:1 1 auto}
.ta-ueber{margin:0 0 4px;font-size:12.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cta)}
.ta-kopf h1{margin:0 0 10px}
.ta-ein{margin:0 0 16px;max-width:62ch;font-size:15.5px;line-height:1.55;color:var(--leise)}
.ta-punkte{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.ta-punkte li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;
  color:var(--text)}
.ta-punkte li::before{content:"\2713";display:inline-flex;align-items:center;
  justify-content:center;width:19px;height:19px;border-radius:50%;
  background:var(--gruen-f);color:var(--gruen);font-size:11px;font-weight:800}
/* Das Zeichen ist Schmuck und faellt als Erstes weg, wenn es eng wird. */
.ta-kopf-bild{flex:0 0 auto;display:none}
.ta-kopf-bild svg{display:block;width:104px;height:104px;fill:none;
  stroke:var(--cta);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  opacity:.16}
@media (min-width:820px){
  .ta-kopf-bild{display:block}
}
@media (max-width:620px){
  .ta-kopf{padding:20px 18px}
}

.ta-raster{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .ta-raster{grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
}

/* Die Nebenspalte: erst was passiert, dann wer es macht. Beides laeuft am
   Schreibtisch mit, weil das Formular dreimal so lang ist wie sie. */
.ta-neben{display:grid;gap:16px;min-width:0}
@media (min-width:1000px){
  .ta-neben{position:sticky;top:calc(var(--kopf-h) + 16px)}
}
.ta-ablauf{padding:20px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);box-shadow:var(--sch)}
.ta-ablauf h2{margin:0 0 14px;font-size:15.5px;font-weight:800}
.ta-ablauf ol{counter-reset:ta-schritt;margin:0;padding:0;list-style:none}
.ta-ablauf li{position:relative;display:grid;gap:2px;
  padding:0 0 18px 38px;counter-increment:ta-schritt}
.ta-ablauf li::before{content:counter(ta-schritt);position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:50%;
  background:var(--cta);color:var(--cta-fg);font-size:13px;font-weight:800}
/* Die Linie verbindet die Schritte und hoert beim letzten auf. */
.ta-ablauf li::after{content:"";position:absolute;left:12px;top:29px;bottom:4px;
  width:2px;background:var(--rand)}
.ta-ablauf li:last-child{padding-bottom:0}
.ta-ablauf li:last-child::after{display:none}
.ta-ablauf strong{font-size:14.5px;font-weight:750;line-height:1.35}
.ta-ablauf span{font-size:13.5px;line-height:1.5;color:var(--leise)}

.ta-form{display:grid;gap:16px;min-width:0}
.ta-block{border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche);
  overflow:hidden}
.ta-block>h2{display:flex;align-items:center;gap:11px;margin:0;
  padding:13px 18px;border-bottom:1px solid var(--rand);background:var(--f2);
  font-size:15.5px;font-weight:750}
.ta-nr{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--text);color:var(--flaeche);font-size:13.5px;font-weight:800}
.ta-felder{display:grid;gap:16px;padding:18px}
.ta-paar{display:grid;gap:16px}
@media (min-width:560px){
  .ta-paar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Gleiche Hoehe fuer alles, was man anfassen kann - auch fuer Felder ohne
   type-Angabe, die die globale Regel nicht erwischt. */
.ta-form input:not([type=checkbox]):not([type=radio]),
.ta-form select,
.ta-form textarea{font:inherit;font-size:16px;width:100%;box-sizing:border-box;
  min-height:var(--ta-h);padding:12px 14px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);
  background:var(--flaeche);color:var(--text);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--an),box-shadow var(--an)}
.ta-form textarea{min-height:calc(var(--ta-h) * 2.4);line-height:1.5;resize:vertical;
  font-family:inherit}
.ta-form input:focus,.ta-form textarea:focus{border-color:var(--akzent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 18%,transparent)}
.ta-form input.falsch,.ta-form textarea.falsch{border-color:var(--rot);
  box-shadow:0 0 0 3px rgba(194,38,26,.12)}
.ta-form .feld{gap:6px}
.ta-form .feld>.bez{font-size:13.5px;font-weight:700;color:var(--leise)}
.ta-frei{font-weight:400;color:var(--sehr-leise)}
.ta-form .merk{margin:0;font-size:13px;color:var(--sehr-leise);line-height:1.45}

/* Die zehn Zeilen. Nummer als runde Marke links, Feld in voller Breite -
   im Altcode ist das eine Tabelle mit "1." bis "10." in der ersten Spalte
   (inquiry_set.asp Zeile 118-178). */
.ta-zeilen{display:grid;gap:10px}
.ta-zeile{display:grid;grid-template-columns:var(--ta-h) minmax(0,1fr);gap:10px;
  align-items:center}
.ta-znr{display:inline-flex;align-items:center;justify-content:center;
  width:var(--ta-h);height:var(--ta-h);border-radius:var(--rk);
  background:var(--f3);color:var(--leise);font-size:14px;font-weight:750}
.ta-zeile:first-child .ta-znr{background:var(--text);color:var(--flaeche)}

.ta-abschluss{display:grid;gap:14px;justify-items:start;
  padding:18px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--f2)}
.ta-abschluss .knopf{min-width:min(280px,100%)}
.ta-abschluss .merk{margin:0;font-size:13px;color:var(--sehr-leise)}

/* Die Kontaktspalte des Altcodes. Auf dem Desktop laeuft sie mit. */
.ta-hilfe-innen{padding:20px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);box-shadow:var(--sch)}
.ta-hilfe-innen h2{margin:0 0 10px;font-size:16px;font-weight:800;line-height:1.3}
.ta-hilfe-innen p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--leise)}
.ta-kontakt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;
  margin:0;font-size:14px}
.ta-kontakt dt{font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sehr-leise);padding-top:2px}
.ta-kontakt dd{margin:0;overflow-wrap:anywhere}
.ta-kontakt a{color:var(--akzent);text-decoration:none;font-weight:650}
.ta-kontakt a:hover{text-decoration:underline}
/* Nach einem Sprung aus der Suche muss das Feld unter dem Kopf stehen. */
.feld[id]{scroll-margin-top:calc(var(--kopf-h) + 20px)}
/* Bei 24 Feldern ist der Speichern-Knopf sonst ausser Sicht. Auf dem
   Telefon nicht: dort steht die Tableiste am unteren Rand. */
@media (min-width:900px){
  .rahmen form .speichern{position:sticky;bottom:0;z-index:3;margin-top:28px;
    padding:14px 0;background:var(--flaeche);
    box-shadow:0 -10px 18px -14px rgba(18,26,38,.45)}
}
/* Der Zugang zur Verwaltung im Kundencenter - abgesetzt, damit er nicht
   wie ein weiterer Kundenpunkt aussieht. */
.rahmen nav a.adm{margin-top:10px;border-top:1px solid var(--rand);
  color:var(--akzent);font-weight:700}

/* --- Firmenprofil ------------------------------------------------------ */
/* Der Inhalt kommt aus der Verwaltung und ist HTML, das jemand von Hand
   schreibt. Deshalb wird hier auf gewoehnliche Auszeichnung gestylt -
   h2, h3, p, ul, blockquote, img - und nicht auf die Tabellen des
   Altbausteins. Was ein Shop an alter Auszeichnung hineinkopiert, wird
   weiter unten eingefangen, damit es das Raster nicht sprengt. */
.fprofil{max-width:100%;overflow-x:auto}
.fprofil table{max-width:100%}
.fprofil img{max-width:100%;height:auto}
.fprofil font{font-size:inherit !important;font-family:inherit !important}

/* --- Rechtliches: Uebersicht und Dokument ----------------------------- */
/* Vorher fiel man ungefragt in die AGB. Jetzt zuerst eine Uebersicht, die
   zu jedem Dokument in einem Satz sagt, was darin steht. */
.rechtkopf{margin:0 0 20px;max-width:70ch}
.rechtkopf p{margin:6px 0 0;color:var(--leise);font-size:15.5px;line-height:1.55}
.rechtkopf.zeile{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;max-width:none}
.rechtkopf.zeile h1{margin-bottom:0}
.knopf-zurueck.klein{min-height:38px;padding:8px 14px;font-size:14px}
.rechtkacheln{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.rechtkachel{display:grid;gap:4px;align-content:start;padding:15px 17px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche);
  box-shadow:var(--sch);color:var(--text);text-decoration:none;
  transition:transform var(--an),box-shadow var(--an),border-color var(--an)}
.rechtkachel:hover{transform:translateY(-2px);border-color:var(--akzent);
  box-shadow:var(--sch-karte)}
.rechtkachel strong{font-size:15.5px}
.rechtkachel span{font-size:13.5px;line-height:1.5;color:var(--leise)}
.rechtfuss{margin-top:26px;padding-top:16px;border-top:1px solid var(--rand);
  font-size:14px;color:var(--leise)}

/* Der Fliesstext selbst. Pflichttexte sind lang - entscheidend sind
   Zeilenlaenge, Absatzluft und sichtbare Zwischenueberschriften. Der Text
   kommt als fertiges HTML aus der Datenbank oder aus dem Altbaustein, also
   wird hier nach Elementen gestaltet, nicht nach Klassen. */
/* Volle Breite. Ich hatte den Text auf 76 Zeichen Zeilenlaenge begrenzt -
   gute Typografie, aber neben der 230px-Navigation blieb rechts eine
   Handbreit Nichts stehen. Jetzt nutzt der Text die ganze Spalte und
   bricht ab 1100px in zwei Saeulen um, damit die Zeilen trotzdem lesbar
   bleiben. Alles, was nicht Fliesstext ist - Ueberschrift 1,
   Inhaltsverzeichnis, Tabellen, Bilder, Hinweiskaesten - laeuft ueber
   beide Saeulen. */
.rechtstext{max-width:none;font-size:15.5px;line-height:1.7;color:var(--text)}
@media (min-width:1100px){
  .rechtstext{column-count:2;column-gap:42px;column-rule:1px solid var(--rand)}
  .rechtstext>h1,.rechtstext>table,.rechtstext>img,
  .rechtstext>.hinweis,.rechtstext>.leer,.rechtstext>.tabelle-huelle{column-span:all}
  /* Der Widerrufsbogen darf NICHT in die beiden Saeulen fallen: er ist ein
     Schriftstueck, das von oben nach unten gelesen und unterschrieben
     wird. Ohne diese Zeile riss die Spaltenumbrechung ihn mitten im Satz
     auseinander - die Anschrift stand links, die Unterschrift rechts. */
  .rechtstext>.wruf{column-span:all}
  /* Eine Ueberschrift soll nicht als letzte Zeile unten in der Saeule
     stehen und ihr Absatz erst oben in der naechsten. */
  .rechtstext h2,.rechtstext h3,.rechtstext h4{break-after:avoid;break-inside:avoid}
  .rechtstext h2:first-child,.rechtstext h2:nth-child(2){margin-top:0;
    padding-top:0;border-top:0}
}
.rechtstext h1,.rechtstext h2,.rechtstext h3,.rechtstext h4{
  margin:26px 0 8px;line-height:1.25;letter-spacing:-.01em}
.rechtstext h1:first-child,.rechtstext h2:first-child{margin-top:0;
  padding-top:0;border-top:0}
.rechtstext h1{font-size:21px}
.rechtstext h2{font-size:19px;padding-top:14px;border-top:1px solid var(--rand)}
.rechtstext h2::before{content:none}
.rechtstext h3{font-size:16.5px}
.rechtstext h4{font-size:15px}
.rechtstext p{margin:0 0 12px}
.rechtstext ul,.rechtstext ol{margin:0 0 14px;padding-left:22px}
.rechtstext li{margin:0 0 5px}
.rechtstext a{color:var(--akzent)}
.rechtstext strong,.rechtstext b{font-weight:750}
.rechtstext hr{margin:22px 0;border:0;border-top:1px solid var(--rand)}
/* Die Altbausteine (Widerrufsformular und, solange recht_quelle auf
   altcode steht, Impressum/AGB/Datenschutz) bringen ihre eigene Moebel
   mit: verschachtelte Tabellen mit festen Pixelbreiten, eigene
   Schriftfamilien, weisse Hintergruende und - das Schlimmste -
   margin-top:-100px und margin-left:25px, mit denen sie sich im Altshop
   unter den Kopf geschoben haben. In dieser Seite zog das den Text aus
   dem Kasten heraus. Hier wird das alles eingefangen. */
.rechtstext table{width:100% !important;max-width:100% !important;
  border-collapse:collapse;margin:0 0 16px;height:auto !important}
.rechtstext td,.rechtstext th{padding:6px 8px;vertical-align:top;
  width:auto !important;height:auto !important;
  font-family:inherit !important;font-size:inherit !important;
  background:0 0 !important;color:inherit !important}
/* Die Bausteine setzen ihre Masse als style-Attribut - dagegen hilft nur
   die gleiche Waffe. Betroffen sind nur Elemente INNERHALB von
   .rechtstext, nicht die Tabellen, die diese Seite selbst baut. */
.rechtstext table[style],.rechtstext td[style],.rechtstext div[style]{
  margin-top:0 !important;margin-left:0 !important;margin-right:0 !important;
  top:auto !important;left:auto !important;position:static !important}
.rechtstext img{max-width:100%;height:auto}
.rechtstext font{font-size:inherit !important;font-family:inherit !important}
/* Der Baustein schreibt seine Ueberschrift selbst noch einmal in eine
   Tabellenzelle mit 36px. Diese Seite hat darueber schon ein <h1> - also
   die doppelte kleiner setzen, statt zwei Titel untereinander zu zeigen. */
.rechtstext td[style*="font-size:36px"],
.rechtstext td[style*="font-size: 36px"]{font-size:19px !important;
  font-weight:800;padding:0 0 10px !important}
/* Inhaltsverzeichnis, aus den Ueberschriften des Textes gebaut. */
.recht-inhalt{margin:0 0 22px;padding:14px 16px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.recht-inhalt strong{display:block;margin-bottom:7px;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sehr-leise)}
.recht-inhalt ol{margin:0;padding-left:18px;columns:280px 2;column-gap:26px}
.recht-inhalt li{margin:0 0 4px;font-size:14px}
.recht-inhalt a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
.recht-inhalt a:hover{color:var(--akzent);border-bottom-color:currentColor}
.rechtstext :target{scroll-margin-top:calc(var(--kopf-h) + 20px)}
/* --- Garage ----------------------------------------------------------- */
/* Sie steht im Kategoriestreifen neben der Teileanfrage und klappt als
   Fenster darunter auf - dieselbe Mechanik wie das Kategorie-Fenster,
   nur am zweiten Kaestchen. Kopf, Innenraum und Fuss des Fensters sind
   dieselben Klassen (.kp-innen, .kp-kopf, .kp-zu, .kp-fuss); eigene
   braucht nur die Fahrzeugreihe.
   Vorher stand sie ueber der Fahrzeugauswahl - dort fand sie niemand,
   weil man die Auswahl erst aufziehen musste. */
/* Die leere Garage: ein Satz statt einer leeren Flaeche. Wer sie zum
   ersten Mal oeffnet, soll lesen, wozu sie gut ist - nicht raten. */
.garage-leer{margin:0 0 4px;font-size:14px;line-height:1.5;color:var(--leise)}
.garage-reihe:empty{display:none}
.garage-reihe{display:flex;flex-wrap:wrap;gap:8px}
/* Auswahl und Loeschknopf sitzen in EINER Huelle mit gemeinsamem Rahmen -
   sonst sehen sie aus wie zwei Dinge, und der Loeschknopf wirkt wie ein
   zweites Fahrzeug. */
.garage-fz{display:inline-flex;align-items:stretch;
  border:1px solid var(--rand-stark);border-radius:999px;overflow:hidden;
  background:var(--flaeche);
  transition:border-color var(--an),background var(--an)}
.garage-fz:hover{border-color:var(--cta);background:var(--f2)}
/* Das Fahrzeug, das gerade gewaehlt ist, braucht keinen Klick mehr -
   es wird deshalb nicht hervorgehoben, sondern als gesetzt markiert. */
.garage-fz.an{border-color:var(--text);background:var(--f2)}
.garage-fz.an>a{font-weight:800}
.garage-fz>a{display:inline-flex;align-items:center;gap:7px;min-height:38px;
  padding:0 5px 0 14px;color:var(--text);text-decoration:none;
  font-size:14px;font-weight:650;white-space:nowrap}
.garage-fz>a .ic{width:15px;height:15px;opacity:.6;flex:0 0 auto}
.garage-fz form{display:flex}
.garage-fz button{display:inline-flex;align-items:center;justify-content:center;
  width:30px;min-height:38px;padding:0 10px 0 2px;border:0;background:0 0;
  color:var(--leise);font:inherit;font-size:17px;line-height:1;cursor:pointer}
.garage-fz button:hover{color:var(--rot)}
.garage-fz button:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
@media print{.katpanel{display:none}}

/* --- Fuss: Widerrufsknopf und Markenhinweis --------------------------- */
/* Die Farben stehen fest: Gelb mit schwarzer Schrift, wie im Altfuss. Sie
   kommen deshalb NICHT aus den Farbvariablen des Shops - der Knopf soll
   auffallen und nicht mit dem Fuss verschwimmen. Kontrast schwarz auf
   #ffdf00 ist 14,6:1, also weit ueber der Anforderung. */
.fuss-widerruf{max-width:var(--breite);margin:0 auto;padding:18px 12px 0;
  display:flex;justify-content:center}
/* .fuss .widerrufknopf, nicht nur .widerrufknopf: im Fuss gilt
   ".fuss a{color:rgba(255,255,255,.76)}", und das ist spezifischer als
   eine einzelne Klasse. Gemessen kam sonst weisse Schrift auf Gelb
   heraus - unlesbar, und genau das Gegenteil des Altknopfes. */
.fuss .widerrufknopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border-radius:var(--rp);
  background:#ffdf00;color:#000;font-weight:750;font-size:15.5px;
  text-decoration:none;transition:filter var(--an),transform var(--an)}
.fuss .widerrufknopf:hover{filter:brightness(1.06);transform:translateY(-1px);color:#000}
.fuss .widerrufknopf:focus-visible{outline:2px solid #fff;outline-offset:3px}

.fuss-marken{max-width:var(--breite);margin:0 auto;padding:16px 12px 0;
  font-size:12.5px;line-height:1.55;text-align:center;opacity:.72}
/* Die Kennungen auf eine eigene Zeile: sie sind fuer den Support, nicht
   fuer den Kunden, und sollen den Satz davor nicht zerreissen. */
.fuss-kennung{display:block;margin-top:4px;font-size:11.5px;
  font-variant-numeric:tabular-nums;opacity:.8}
@media print{.fuss-widerruf,.fuss-marken{display:none}}

/* --- Kataloge: Liste oder Kacheln ------------------------------------- */
/* Der Umschalter sitzt in der Filterzeile und sieht aus wie der in den
   Sonderposten, nur auf hellem Grund. */
.suche .fuell{margin-left:auto}
/* Die Filterzeile hat selbst schon var(--f2) als Grund - der Umschalter
   braucht deshalb die hellere Flaeche, sonst verschwindet er darin. */
.ansichtwahl{display:inline-flex;gap:2px;flex:0 0 auto;padding:3px;
  border-radius:999px;border:1px solid var(--rand);background:var(--flaeche)}
.ansichtwahl a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:34px;border-radius:999px;color:var(--leise)}
.ansichtwahl a:hover{background:var(--f2);color:var(--text)}
.ansichtwahl a.an{background:var(--text);color:var(--flaeche)}
.ansichtwahl .ic{width:18px;height:18px}

/* Die Kachelansicht. Das Titelbild fuehrt - an ihm erkennt man einen
   Katalog, nicht an seinem Namen. Deshalb steht es oben und gross, und
   die Kachel ist hochkant wie der Katalog selbst. */
.katraster{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(188px,1fr))}
.katkachel{display:flex;flex-direction:column;gap:10px;padding:12px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche);
  transition:border-color var(--an),box-shadow var(--an),transform var(--an)}
.katkachel:hover{border-color:var(--rand-stark);box-shadow:var(--sch);
  transform:translateY(-2px)}
.kk-bild{position:relative;display:grid;place-items:center;aspect-ratio:3/4;
  overflow:hidden;border-radius:var(--rp);background:var(--f2)}
.kk-bild img{max-width:100%;max-height:100%;object-fit:contain}
.kk-kein .ic{width:34px;height:34px;color:var(--sehr-leise)}
/* Das Format als Fahne auf dem Bild - in der Liste ist es eine Spalte,
   hier waere eine weitere Textzeile zu viel. */
.kk-art{position:absolute;top:7px;right:7px;padding:2px 7px;border-radius:var(--rp);
  background:rgba(18,26,38,.82);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.kk-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.kk-name{font-size:14.5px;font-weight:700;line-height:1.3;color:inherit;
  text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kk-name:hover{color:var(--akzent)}
.kk-daten{font-size:12.5px;color:var(--leise);font-variant-numeric:tabular-nums}
.kk-merk{font-size:12.5px;color:var(--sehr-leise);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kk-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.kk-knoepfe .katknopf{flex:1 1 auto;width:auto}
@media (min-width:900px){
  .katraster{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px}
}

/* --- Anfragekorb ------------------------------------------------------ */
/* Der Streifen im Katalogbetrachter bekommt denselben Kasten wie der
   US-Kalkulator - es ist dieselbe Stelle und dieselbe Lage: die Nummer
   steht nicht im Shop. Nur die Signalfarbe ist eine andere, weil hier
   nichts gerechnet, sondern gefragt wird. */
.kattreffer-kalk.akorb{border-left:3px solid var(--akzent)}
/* Der Anfragekorb in der Katalogleiste. Er sieht aus wie die anderen
   Knoepfe dort, traegt aber die Zahl - deshalb ein eigener Abstand nach
   innen rechts, damit die Zahl nicht am Rand klebt. */
.akorb-knopf{gap:8px;padding-right:9px}
.akorb-knopf[hidden]{display:none}
.akorb-knopf .akorb-zahl{background:#fff;color:var(--cta)}
.akorb-link{display:inline-flex;align-items:center;gap:6px;margin-left:6px;
  font-weight:700;white-space:nowrap}
.akorb-zahl{display:inline-grid;place-items:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:var(--cta);color:var(--cta-fg);
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}

/* Die Positionsliste. Kopfzeile aus <th>, damit der Tabellenwandler in
   dieser Datei auf dem Telefon Karten mit Beschriftung daraus macht. */
.akorb-tab{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:15px}
.akorb-tab th{padding:8px 10px;text-align:left;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sehr-leise);
  border-bottom:2px solid var(--rand);white-space:nowrap}
.akorb-tab td{padding:9px 10px;border-bottom:1px solid var(--rand);
  vertical-align:middle}
.akorb-tab tr:last-child td{border-bottom:0}
.akorb-kat{font-weight:750;white-space:nowrap}
.akorb-nr{font-variant-numeric:tabular-nums;white-space:nowrap}
.akorb-weg{width:44px;text-align:right}
.akorb-weg a{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--rp);color:var(--sehr-leise)}
.akorb-weg a:hover{background:var(--f2);color:var(--rot)}
.akorb-weg .ic{width:17px;height:17px}
.akorb-form{margin-top:26px;padding-top:22px;border-top:1px solid var(--rand)}
.akorb-form h2{margin:0 0 4px;font-size:18px}
.akorb-form h2::before{content:none}
.akorb-rolle{margin-top:16px;padding:10px 13px;border-radius:var(--rp);
  background:var(--f2)}

/* --- Einwilligungshinweis --------------------------------------------- */
/* Am unteren Rand, nicht als Vorhang ueber der Seite: der Besucher soll
   lesen koennen, wo er gelandet ist, bevor er entscheidet. Ein Vorhang
   waere auch kein Gewinn - geladen wird ohnehin erst nach dem Ja.
   z-index 150: ueber Fahrzeugkasten (120) und Lupe (140), unter der
   Sprungmarke (200). */
.einw{position:fixed;left:0;right:0;bottom:0;z-index:150;
  padding:0 12px calc(12px + env(safe-area-inset-bottom));
  animation:einw-auf .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes einw-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.einw{animation:none}}
.einw-kasten{max-width:var(--breite);margin:0 auto;padding:18px 18px 16px;
  border:1px solid var(--rand);border-radius:var(--e-ol) var(--e-or) 0 0;border-bottom:0;
  background:var(--flaeche);box-shadow:0 -14px 40px rgba(12,18,28,.22);
  display:grid;gap:16px}
.einw-text h2{margin:0 0 7px;font-size:17px;letter-spacing:-.01em}
.einw-text h2::before{content:none}
.einw-text p{margin:0 0 7px;font-size:14px;line-height:1.55;color:var(--leise)}
.einw-links{margin:0 !important;font-size:13.5px}
.einw-links a{color:var(--leise);text-decoration:underline}
.einw-links a:hover{color:var(--text)}

/* BEIDE KNOEPFE GLEICH GROSS UND GLEICH ERREICHBAR. Ablehnen darf nicht
   schwerer sein als Annehmen - kein kleiner grauer Textlink in der Ecke.
   Unterschiedlich ist nur die Farbe, und das ist zulaessig. */
/* grid-auto-columns:1fr sorgt dafuer, dass beide Knoepfe EXAKT gleich
   breit sind - auch wenn die Beschriftungen verschieden lang sind oder
   uebersetzt werden. Mit "auto" war der Ja-Knopf 11px breiter als der
   Nein-Knopf, und genau solche Kleinigkeiten sind es, an denen eine
   Einwilligung als nicht gleichwertig angreifbar wird. */
.einw-knoepfe{display:grid;gap:10px;grid-auto-flow:row;grid-auto-columns:1fr}
.einw-knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;border-radius:var(--rp);cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;
  border:1px solid var(--rand-stark);background:var(--flaeche);color:var(--text);
  transition:background var(--an),border-color var(--an)}
.einw-knopf:hover{background:var(--f2)}
.einw-knopf.ja{border-color:var(--cta);background:var(--cta);color:var(--cta-fg)}
.einw-knopf.ja:hover{filter:brightness(1.07)}
.einw-knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* Auf dem Telefon steht ueber dem Hinweis die Tableiste (z-index 65) -
   der Kasten liegt darueber, also muss er ihre Hoehe freilassen, sonst
   verdeckt er die Hauptnavigation. */
@media (max-width:899px){
  .einw{padding-bottom:calc(var(--leiste-h) + 10px + env(safe-area-inset-bottom))}
}
@media (min-width:760px){
  .einw-kasten{grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:26px;padding:20px 24px 18px}
  .einw-knoepfe{grid-auto-flow:column}
  .einw-knopf{min-width:180px}
}
@media print{.einw{display:none}}

/* --- Widerrufsformular ------------------------------------------------ */
/* Der Bogen bleibt ein Bogen: eine Spalte, nicht zwei - der Wortlaut ist
   gesetzlich vorgegeben und wird als zusammenhaengendes Schriftstueck
   gelesen und unterschrieben. Die Spiegelstriche der Anlage stehen als
   eigene Spalte links, damit die Gliederung des Gesetzestextes erhalten
   bleibt. */
.wruf{column-count:1;max-width:860px}
.wruf-vor{margin:0 0 18px;color:var(--leise)}
.wruf-bogen{padding:26px 24px 22px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche);box-shadow:var(--sch);
  break-inside:avoid}
.wruf-titel{margin:0 0 20px !important;padding:0 0 14px !important;
  border-top:0 !important;border-bottom:1px solid var(--rand);
  font-size:19px !important;letter-spacing:-.01em}
.wruf-titel::before{content:none}

.wruf-zeile{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 10px;
  padding:16px 0;border-bottom:1px solid var(--rand)}
.wruf-zeile:last-of-type{border-bottom:0;padding-bottom:4px}
.wruf-strich{color:var(--sehr-leise);line-height:1.6;user-select:none}
.wruf-inhalt{min-width:0}
.wruf-satz{margin:0 0 12px !important;line-height:2}
.wruf-paar{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}

.wruf-bez{display:block;margin:0 0 5px;font-size:11.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--sehr-leise)}
.wruf-feld{display:block}
.wruf-feld input,.wruf-feld textarea{width:100%;font:inherit;font-size:15px;
  padding:10px 12px;border:1px solid var(--rand);border-radius:var(--rp);
  background:var(--f2);color:var(--text)}
.wruf-feld textarea{resize:vertical;line-height:1.5}
.wruf-feld input:focus,.wruf-feld textarea:focus,.wruf-wahl:focus{
  outline:2px solid var(--akzent);outline-offset:1px;background:var(--flaeche)}
/* Die Auswahl steht MITTEN IM SATZ und soll dort nicht wie ein Formularfeld
   aussehen, sondern wie eine unterstrichene Stelle, an der man waehlt. */
.wruf-wahl{font:inherit;font-size:15px;font-weight:650;color:var(--text);
  padding:2px 24px 2px 6px;border:0;border-bottom:2px solid var(--akzent);
  border-radius:0;background:0 0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 10px top 55%,right 5px top 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.wruf-wahl option{background:var(--flaeche);color:var(--text)}

.wruf-an{font-style:normal;line-height:1.6}
/* Der Empfaengerblock steht auch im Onlineformular (/neu/widerruf.asp) in
   einem .adresse-Kasten. Dort braucht die Anschrift etwas Luft zur
   Ueberschrift darueber. */
.adresse .wruf-an{margin-top:6px}
.wruf-kanal{color:var(--leise)}
/* Platz fuer die Unterschrift von Hand - auf dem Bildschirm eine Linie,
   auf dem Papier die Stelle, an der unterschrieben wird. */
.wruf-linie{display:block;height:44px;border-bottom:1px solid var(--text)}
.wruf-merk{display:block;margin-top:5px;font-size:12.5px;color:var(--sehr-leise)}
.wruf-stern{margin:18px 0 0 !important;padding-top:14px;
  border-top:1px solid var(--rand);font-size:12.5px;line-height:1.55;
  color:var(--sehr-leise)}

.wruf-wege{margin-top:24px;padding:18px 20px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.wruf-wege h3{margin:0 0 8px !important;font-size:15px}
/* Der Weg ueber die Online-Erklaerung ist der schnellste - er steht
   deshalb als Knopf im Fliesstext, nicht als weiterer Link in der Liste. */
.wruf-online{display:inline-flex;align-items:center;min-height:36px;
  margin:0 4px;padding:0 14px;border-radius:999px;background:var(--cta);
  color:var(--cta-fg) !important;font-weight:700;font-size:14px;
  text-decoration:none;white-space:nowrap}
.wruf-online:hover{filter:brightness(1.07)}
@media print{.wruf-online{display:none}}
.wruf-wege p{margin:0 0 10px}
.wruf-wege ul{margin:0 0 10px;padding-left:20px}
.wruf-wege .wruf-merk{font-size:13px}

@media (min-width:640px){
  .wruf-bogen{padding:30px 30px 26px}
  .wruf-zeile{grid-template-columns:22px minmax(0,1fr);gap:0 14px}
  .wruf-paar{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}

/* Gedruckt wird der Bogen, nicht die Seite: kein Rahmen, kein Schatten,
   kein grauer Grund, und die Felder zeigen nur noch, was eingetippt wurde.
   Die Wege darunter bleiben stehen - sie gehoeren auf das Blatt. */
@media print{
  .wruf{max-width:none}
  .wruf-vor{display:none}
  .wruf-bogen{padding:0;border:0;border-radius:0;box-shadow:none;background:0 0}
  .wruf-zeile{border-bottom:1px solid #ccc;break-inside:avoid}
  .wruf-feld input,.wruf-feld textarea{border:0;border-bottom:1px solid #999;
    border-radius:0;background:0 0;padding:2px 0}
  .wruf-wahl{border-bottom:1px solid #999;background-image:none;padding-right:6px}
  .wruf-wege{border:1px solid #ccc;background:0 0;break-inside:avoid}
}

@media print{
  .recht-inhalt{break-inside:avoid}
  /* Beim Drucken eine Spalte: zweispaltige Vertragstexte auf Papier sind
     beim Vorlesen und Zitieren unbrauchbar. */
  .rechtstext{max-width:none;font-size:11pt;column-count:1}
}

/* Vorschau der Bestellbestaetigung in /lib/_mailtest.asp: die Mail bringt
   ihre eigenen Masse mit, hier wird nur verhindert, dass sie das Raster
   sprengt. */
.mailprobe{max-width:100%;overflow-x:auto;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.mailprobe table{max-width:100%}

/* --- Bestaetigungsseite nach der Bestellung --------------------------- */
/* Der Altshop zeigt hier eine Tabelle mit Haken-Grafik und zwei Saetzen.
   Hier dasselbe in der Sprache des Shops: eine Spalte, der Haken als
   Zeichen, die Eckdaten als Liste, darunter die Wege, die jetzt
   weiterfuehren. */
.danke{max-width:640px;margin:8px auto 0;text-align:center}
.danke-haken{width:64px;height:64px;margin:0 auto 18px;display:grid;place-items:center;
  border-radius:50%;background:var(--gruen-f);color:var(--gruen);
  font-size:34px;line-height:1;font-weight:700}
.danke-haken.danke-warn{background:#fdf0e3;color:#a85a08}
.danke h1{margin:0 0 10px;font-size:27px;line-height:1.2}
.danke h1::before{content:none}
.danke-text{margin:0 0 22px;font-size:15.5px;line-height:1.6;color:var(--leise)}
.danke-daten{display:grid;gap:0;margin:0 0 20px;padding:4px 18px;text-align:left;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--f2)}
.danke-daten>div{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:9px 0;border-bottom:1px solid var(--rand)}
.danke-daten>div:last-child{border-bottom:0}
.danke-daten dt{margin:0;font-size:13.5px;color:var(--leise)}
.danke-daten dd{margin:0;font-size:15px;text-align:right}
.danke .hinweis{text-align:left;margin-bottom:20px}
/* Kundencenter: Aufklappen, Zeichen, Summenzeile.
   ACHTUNG: die Namen tragen alle das Praefix kc-. ".aufklapp" und ".aktion"
   gibt es in dieser Datei schon fuer anderes (Abschnittstrenner und
   Aktionspreis) - ohne Praefix hat deren spaetere Regel meinen Knopf auf
   47 Pixel Hoehe aufgeblasen und in die naechste Zeile gedrueckt. */
.kc-summe{margin:0 0 10px;font-size:15px}
.kc-aktion{white-space:nowrap}
.kc-knoepfe{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.kc-knopf,.kc-zeichen{display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:22px;padding:0 7px;border:1px solid var(--rand);
  border-radius:4px;font:inherit;font-size:11.5px;font-weight:700;line-height:1;
  letter-spacing:.02em;text-decoration:none;color:inherit;background:var(--f2)}
.kc-knopf{cursor:pointer;font-weight:400;font-size:12px}
.kc-knopf:hover{background:#eef1f5}
.kc-knopf[aria-expanded="true"]{background:#eef4ff;border-color:#c8d8f5}
.kc-knopf::before{content:"\25B8";display:inline-block;margin-right:4px;
  transition:transform .15s}
.kc-knopf[aria-expanded="true"]::before{transform:rotate(90deg)}
.kc-zeichen.pdf{border-color:#d9b3b3;background:#fdf1f1;color:#a32020}
.kc-zeichen.pdf:hover{background:#f8e2e2}
.kc-zeichen.ere{border-color:#b3c8d9;background:#f1f6fd;color:#1a4f7a}
.kc-zeichen.ere:hover{background:#e2eef8}
.kc-klappzeile>td{border-top:0}
.kc-klappfeld{padding:0 0 12px;background:var(--f2)}
.kc-klappfeld .untertabelle{margin:0;width:100%}
.kc-klappfeld .untertabelle th{font-size:12px;color:var(--leise)}
.kc-klappfeld .untertabelle td,.kc-klappfeld .untertabelle th{padding:6px 8px}
.kc-klappfeld .leer{margin:10px 12px}
.kc-klappfeld .meldung{margin:10px 12px}
.kc-frage{padding:12px;display:grid;gap:8px}
.kc-frage label{font-size:14px}
.kc-frage textarea{width:100%;font:inherit;font-size:14.5px;padding:10px 12px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);
  background:var(--flaeche);color:var(--text);min-height:140px}
.kc-frage-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kc-frage-fuss .merk{margin:0}
.knopf.klein{min-height:38px;padding:8px 18px;font-size:14px}
.nurlesbar{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
td.minus,.zahl.minus{color:#a32020}
/* Enge Tabelle: zehn Spalten passen sonst nicht nebeneinander, und
   Status und Frage rutschen aus dem Blick. */
.kc-eng{font-size:13px}
.kc-eng th,.kc-eng td{padding:6px 8px;vertical-align:middle}
.kc-eng th{font-size:11.5px}
.kc-eng .nummer{font-size:12.5px}
.kc-eng .kc-knopf,.kc-eng .kc-zeichen{height:20px;font-size:11px;padding:0 6px}
.kc-eng .kc-status{font-size:10.5px;min-width:24px}
.kc-eng .kc-storno{font-size:11px}
/* Reicht die Breite trotzdem nicht, wird geschoben statt umgebrochen. */
.kc-breit{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kc-breit>table{min-width:860px}
/* Statuskuerzel der offenen Posten - RG, VE, Z wie im Altcode. */
.kc-status{display:inline-block;min-width:26px;padding:1px 6px;border-radius:4px;
  border:1px solid var(--rand);font-size:11px;font-weight:700;text-align:center;
  cursor:help}
.kc-status.st-rg{border-color:#b3c8d9;background:#f1f6fd;color:#1a4f7a}
.kc-status.st-ve{border-color:#a8cfae;background:#eef8f0;color:#1d6b2c}
.kc-status.st-z{border-color:#d9c79a;background:#fdf7e8;color:#8a6410}
.kc-status.leer{border-color:transparent;background:0 0;color:var(--leise);
  font-weight:400}
.kc-storno{color:#a32020;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:12px}
.zahlinfo{background:#f5f7f9;border:1px solid #e4e8ed;border-radius:8px;
  padding:14px 16px;margin:0 0 18px;font-size:15px;line-height:1.6}
.zahlinfo p{margin:0 0 8px}
.zahlinfo p:last-child{margin:0}
.zahlweiter{background:#eef4ff;border:1px solid #c8d8f5;border-radius:8px;
  padding:16px;margin:0 0 18px;text-align:center}
.zahlweiter p{margin:0 0 10px;font-size:15px}
.bestaetigung{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;
  font-size:14px;line-height:1.5;cursor:pointer}
.bestaetigung input{margin-top:3px;flex:0 0 auto;width:18px;height:18px}
.danke-wege{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px}
.danke-fuss{margin:0;padding-top:16px;border-top:1px solid var(--rand);
  font-size:14px;line-height:1.6;color:var(--leise)}

/* --- Angebotsheft-Banner ("SPECIAL") ---------------------------------- */
/* Im Altshop war das eine 1000x320-Flaeche mit dem Heftbild als
   Hintergrund (background-size:115% 320px, also verzerrt) und drei
   absolut positionierten Kaesten darauf. Hier: dasselbe Bild formatfuellend,
   ein Verlauf von links, damit die Schrift auf jedem Heftbild lesbar
   bleibt, und der Text im Raster der Seite.

   Dazu vier Bewegungen, jede mit einem Grund:
     - das Bild atmet langsam (Ken Burns), damit die Flaeche nicht wie ein
       Klebezettel wirkt
     - ein Lichtstreifen laeuft alle paar Sekunden darueber, wie ueber
       Hochglanzpapier
     - Text und Knopf kommen beim Hereinscrollen gestaffelt herein
     - das Bild folgt dem Mauszeiger um wenige Pixel
   Alles haengt an .ist-da: solange das Banner nicht im Bild ist, bewegt
   sich nichts. Bei "Bewegung reduzieren" steht alles still. */
.heft{position:relative;overflow:hidden;margin:0 0 26px;border-radius:var(--r);
  min-height:260px;display:grid;align-items:center;isolation:isolate;
  background:#101418;color:#fff}
.heft-bild{position:absolute;inset:0;z-index:0;
  background:#101418 center/cover no-repeat;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.06);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);will-change:transform}
/* Der Verlauf kommt von RECHTS: auf den Heftbildern des Shops liegt das
   Titelbild links im Bild - ein Schleier von links wuerde genau das
   zudecken, was das Banner zeigen soll. */
.heft::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,13,16,0) 0%,rgba(10,13,16,.12) 26%,
    rgba(10,13,16,.72) 56%,rgba(10,13,16,.93) 82%,rgba(10,13,16,.96) 100%)}
.heft::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--cta),transparent)}
.heft-text{position:relative;z-index:2;padding:26px 20px;max-width:520px;
  margin-left:auto;text-align:right}
.heft .knopf{margin-top:2px}
.heft-kopf{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:flex-end;align-items:center}
.heft-marke{display:inline-block;padding:3px 10px;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--rp);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.heft h2{margin:0 0 10px;color:#fff;font-size:30px;line-height:1.1;
  letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.heft h2::before{content:none}
.heft-meta{margin:0 0 18px;font-size:14px;font-weight:650;
  color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.heft-tat{margin:0}
.heft-demo{margin:12px 0 0;font-size:12px;color:rgba(255,255,255,.6)}

/* Restlaufzeit. Der Punkt davor schlaegt ruhig - er macht aus der Zahl
   eine Uhr, ohne zu blinken. */
.heft-rest{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;
  border-radius:var(--rp);background:var(--cta);color:var(--cta-fg);
  font-size:11px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.heft-rest::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;opacity:.5}
.heft.ist-da .heft-rest::before{animation:heft-puls 2.1s ease-in-out infinite}
@keyframes heft-puls{
  0%,100%{opacity:.35;transform:scale(.75)}
  50%{opacity:1;transform:scale(1.15)}}

/* Ken Burns. 28 Sekunden je Richtung - so langsam, dass man die Bewegung
   nicht sieht, sondern nur merkt. */
.heft.ist-da .heft-bild{animation:heft-atem 28s ease-in-out infinite alternate}
@keyframes heft-atem{
  from{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.05)}
  to{transform:translate3d(calc(var(--px,0px) - 10px),var(--py,0px),0) scale(1.13)}}

/* Der Lichtstreifen. Laeuft einmal kurz nach dem Erscheinen und danach
   alle neun Sekunden - haeufiger waere Kirmes. */
.heft-glanz{position:absolute;top:-20%;bottom:-20%;width:34%;left:-50%;z-index:2;
  pointer-events:none;transform:skewX(-14deg);opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 42%,rgba(255,255,255,.4) 50%,
    rgba(255,255,255,.14) 58%,rgba(255,255,255,0) 100%)}
.heft.ist-da .heft-glanz{animation:heft-glanz 9s ease-in-out 1s infinite}
@keyframes heft-glanz{
  0%{left:-50%;opacity:0}
  4%{opacity:1}
  26%{left:120%;opacity:1}
  30%{left:120%;opacity:0}
  100%{left:120%;opacity:0}}

/* Hereinkommen. Nur wenn Javascript da ist - sonst stuende der Text
   dauerhaft auf opacity:0, falls das Skript nicht laeuft. */
.heft.heft-an .heft-text > *{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.heft.heft-an.ist-da .heft-text > *{opacity:1;transform:none}
.heft.heft-an.ist-da .heft-text > :nth-child(1){transition-delay:.05s}
.heft.heft-an.ist-da .heft-text > :nth-child(2){transition-delay:.13s}
.heft.heft-an.ist-da .heft-text > :nth-child(3){transition-delay:.21s}
.heft.heft-an.ist-da .heft-text > :nth-child(4){transition-delay:.29s}
.heft.heft-an.ist-da .heft-text > :nth-child(5){transition-delay:.37s}

/* Der Knopf: ein Lichtschein beim Ueberfahren, und der Pfeil geht einen
   Schritt voraus. */
.heft .knopf{position:relative;overflow:hidden}
.heft .knopf::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));
  transition:left .55s cubic-bezier(.2,.7,.3,1)}
.heft .knopf:hover::after,.heft .knopf:focus-visible::after{left:125%}
.heft .knopf .ic{transition:transform var(--an)}
.heft .knopf:hover .ic{transform:translateX(4px)}

@media (min-width:900px){
  .heft{min-height:300px}
  .heft-text{padding:32px 34px}
  .heft h2{font-size:38px}
}
/* Auf dem Telefon ist vom Titelbild ohnehin kaum etwas zu sehen: dort
   deckt der Schleier die ganze Flaeche, und der Text steht wieder links. */
@media (max-width:640px){
  .heft::before{background:linear-gradient(180deg,rgba(10,13,16,.55) 0%,
    rgba(10,13,16,.88) 55%,rgba(10,13,16,.96) 100%)}
  .heft-text{margin-left:0;text-align:left;max-width:none}
  .heft-kopf{justify-content:flex-start}
  .heft h2{font-size:25px}
}
/* Wer Bewegung abbestellt hat, bekommt das Banner als Bild. */
@media (prefers-reduced-motion:reduce){
  .heft .heft-bild,.heft .heft-glanz,.heft .heft-rest::before{animation:none}
  .heft-glanz{display:none}
  .heft.heft-an .heft-text > *{opacity:1;transform:none;transition:none}
  .heft-bild{transition:none}
}

/* --- Firmenprofil ----------------------------------------------------- */
/* Die Seite bindet den Originalbaustein fprofil/Firmenprofil2.asp
   unveraendert ein - er gehoert dem Altshop und wird dort weiter benutzt,
   deshalb wird er NICHT angefasst. Er bringt allerdings die Umgebung des
   Altshops mit: Tabellen fuers Layout, feste Pixelpolster, und vor allem
   Schriften, die es hier nicht gibt ('PTSansR', 'PTSans', 'gibsonbold').
   Fehlt die Schrift, nimmt der Browser seine eigene - deshalb sah die
   Seite aus wie aus einem anderen Shop.
   Alles hier biegt das von aussen zurecht; !important ist noetig, weil die
   Vorgaben im Baustein als style-Attribut stehen und sich anders nicht
   uebersteuern lassen. */
/* Die Reiterzeile ueber dem Profil. Sie stand frueher IM Altbaustein
   (class orderButtonDealer); jetzt baut sie /neu/firmenprofil.asp selbst
   aus der Seitenliste, und nur Seiten mit Inhalt stehen darin. */
.fp-reiter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.fp-reiter a{display:inline-flex;align-items:center;height:40px;padding:0 16px;
  border:1px solid var(--rand);border-radius:999px;background:var(--f2);
  color:var(--leise);text-decoration:none;font-size:14px;font-weight:700;
  white-space:nowrap;
  transition:background var(--an),color var(--an),border-color var(--an)}
.fp-reiter a:hover{border-color:var(--rand-stark);background:var(--flaeche);
  color:var(--text)}
.fp-reiter a.an{background:var(--cta);border-color:var(--cta);color:var(--cta-fg)}

/* Fliesstext in Lesegroesse. Die Breite begrenzt das Inhaltsraster der
   Seite - auf einer Seite aus grossformatigen Bildern sieht eine auf 74
   Zeichen gestutzte Spalte gedrungen aus. */
.fprofil{font-size:15.5px;line-height:1.65;color:var(--text)}
.fprofil > :first-child{margin-top:0}
.fprofil p{margin:0 0 14px}
.fprofil h2{margin:30px 0 10px;font-size:26px;font-weight:850;
  letter-spacing:-.02em;line-height:1.15}
.fprofil h3{margin:24px 0 6px;font-size:18px;font-weight:750;letter-spacing:-.01em}
.fprofil ul{margin:0 0 14px;padding-left:20px}
.fprofil li{margin:0 0 5px}
.fprofil a{color:var(--akzent)}

/* Bilder sind hier gross und tragen die Seite - deshalb als Block mit
   Abstand, nicht im Text schwimmend. */
.fprofil img{display:block;width:100%;height:auto;margin:18px 0;
  border-radius:var(--r)}
.fprofil iframe{display:block;width:100%;max-width:100%;aspect-ratio:16/9;
  height:auto;border:0;border-radius:var(--r);margin:18px 0}

/* Zwei Bilder nebeneinander (Lagerhalle). Auf dem Telefon untereinander. */
.fp-paar{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.fp-paar img{margin:0}

/* Die Stimmen aus dem Team. */
.fprofil blockquote{margin:0 0 18px;padding:14px 18px;
  border-left:3px solid var(--cta);background:var(--f2);border-radius:var(--r)}
.fprofil blockquote p:first-child{margin:0 0 8px;font-size:18px;font-weight:700;
  letter-spacing:-.01em}
.fprofil blockquote p{margin:0 0 8px}
.fprofil blockquote footer{font-size:13.5px;color:var(--leise)}

/* Banner-Exchange: Vorschau und der Code zum Kopieren. */
.fp-banner{margin:0 0 22px;padding:16px 18px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche)}
.fp-banner h3{margin:0 0 10px}
.fp-banner img{margin:0 0 12px;width:auto;max-width:100%;border-radius:0}
.fp-banner label{display:block;font-size:13px;font-weight:700;color:var(--leise)}
.fprofil input[type=text]{width:100%;margin-top:6px;padding:10px 12px;
  font-size:13px;font-family:ui-monospace,Consolas,monospace;
  border:1px solid var(--rand-stark);border-radius:var(--rk);
  background:var(--f2);color:var(--text)}

@media (min-width:760px){
  .fp-paar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
  .fprofil h2{font-size:30px}
}

/* --- Eingefangen: alte Auszeichnung aus dem Altshop -------------------
   Kopiert ein Shop Teile des alten Bausteins in die Verwaltung, kommen
   Tabellen mit festen Breiten und style-Attributen mit. Das hier sorgt
   dafuer, dass so etwas die Seite nicht sprengt - mehr nicht. */
.fprofil table{display:block;width:100% !important;border-collapse:collapse}
.fprofil tbody{display:block}
.fprofil tr{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.fprofil td{display:block;width:auto !important;padding:0 !important;
  color:var(--text) !important;min-width:0}
.fprofil tr + tr{margin-top:18px}
.fprofil *{font-family:inherit !important}

/* --- Shop by Brand ---------------------------------------------------- */
/* Verzeichnis aller Hersteller. Der Altshop (includes/vendors.asp) stellt
   die Logos in feste 140x110-Kaesten und schreibt die Artikelzahl darunter;
   fehlt ein Logo, steht dort "nologo.png" und der Name. Hier dasselbe, nur
   als Raster, und ohne Platzhalterbild: fehlt das Logo, steht der Name
   gross im Kasten - das liest sich besser als ein durchgestrichenes Bild. */
.marken-kopf{position:relative;overflow:hidden;margin:0 0 18px;padding:24px 20px;
  border-radius:var(--r);color:#fff;
  background:
    radial-gradient(760px 320px at 92% 0%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(135deg, var(--kopf-oben) 0%, var(--kopf-bg) 100%)}
.marken-kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--cta),transparent)}
.marken-kopf h1{margin:0 0 7px;color:#fff;font-size:30px;font-weight:300;
  letter-spacing:-.02em}
.marken-kopf h1::before{content:none}
.marken-kopf h1 b{font-weight:850}

/* Die Buchstabenleiste bleibt beim Scrollen oben stehen - bei 800
   Herstellern ist der Weg zurueck nach oben sonst weit. */
.az{position:sticky;top:var(--kopf-h);z-index:30;display:flex;flex-wrap:wrap;gap:4px;
  margin:0 0 18px;padding:9px 10px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche)}
.az a{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 6px;border-radius:var(--rp);
  font-size:15px;font-weight:750;color:var(--leise);text-decoration:none;
  transition:background var(--an),color var(--an)}
.az a:hover{background:var(--cta);color:var(--cta-fg)}
.az-titel{display:flex;align-items:baseline;gap:12px;margin:26px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--rand);
  font-size:30px;letter-spacing:-.02em;scroll-margin-top:calc(var(--kopf-h) + 60px)}
.az-titel::before{content:none}
.az-top{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--sehr-leise)}
.az-top:hover{color:var(--text)}

.markengitter{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.marke-kachel{display:flex;flex-direction:column;gap:6px;padding:10px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche);
  color:inherit;text-decoration:none;
  transition:border-color var(--an),box-shadow var(--an),transform var(--an)}
.marke-kachel:hover{border-color:var(--rand-stark);box-shadow:var(--sch);
  transform:translateY(-2px)}
.mk-bild{display:grid;place-items:center;height:74px;overflow:hidden}
.mk-bild img{max-width:100%;max-height:74px;object-fit:contain}
.mk-ohne{padding:0 6px;font-size:14px;font-weight:800;line-height:1.2;
  text-align:center;color:var(--leise);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mk-name{font-size:12.5px;font-weight:650;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-zahl{font-size:11.5px;color:var(--sehr-leise);font-variant-numeric:tabular-nums}

/* Kopf einer einzelnen Marke */
.markenkopf{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.markenkopf h1{margin:0}
.mk-logo{flex:0 0 auto;display:grid;place-items:center;width:120px;height:72px;
  padding:8px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche)}
.mk-logo img{max-width:100%;max-height:100%;object-fit:contain}

@media (min-width:760px){
  .marken-kopf{padding:26px 26px}
  .markengitter{gap:14px}
}

/* --- Sonderposten ----------------------------------------------------- */
/* Auf der Startseite eine Buehne fuer den Abverkauf. Hier standen zuerst
   vier echte Posten mit Bild und Preis darunter; sie sind raus, weil auf
   der Startseite die FLAECHE wirken soll und nicht vier zufaellige
   Artikel, die mit dem Fahrzeug des Besuchers nichts zu tun haben muessen.
   Geblieben ist das Band - dafuer groesser, mit der wirklichen Zahl der
   Posten und zwei Wegen hinein. */
.sopo{margin:0 0 26px}
.sopo-band{position:relative;overflow:hidden;padding:22px 20px;
  border-radius:var(--r);color:#fff;
  display:grid;gap:16px;align-items:center;
  background:
    radial-gradient(760px 320px at 92% 0%, rgba(212,0,0,.38), transparent 62%),
    linear-gradient(135deg, var(--kopf-oben) 0%, var(--kopf-bg) 100%)}
.sopo-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--cta),transparent)}
.sopo-marke{display:inline-block;margin-bottom:8px;padding:3px 10px;
  border-radius:var(--rp);background:var(--cta);color:var(--cta-fg);
  font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.sopo-band h2,.sopo-kopf h1{margin:0 0 7px;color:#fff;font-size:26px;
  letter-spacing:-.02em;line-height:1.15}
.sopo-band h2::before,.sopo-kopf h1::before{content:none}
.sopo-band p,.sopo-kopf p{margin:0;max-width:56ch;font-size:15px;line-height:1.55;
  color:rgba(255,255,255,.82)}
.sopo-band .knopf{justify-self:start}

/* --- Die Buehne auf der Startseite ------------------------------------ */
/* Hoeher als das Band auf der Sonderpostenseite, mit Warnstreifen am
   oberen Rand und einem grossen Prozentzeichen als Marke. Beides ist
   reines CSS - kein Bild, das erst geladen werden muesste. */
.sopo-buehne{padding:30px 22px 26px;gap:0}
.sopo-buehne::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(135deg,
    var(--cta) 0 14px, rgba(0,0,0,.55) 14px 28px);
  opacity:.9}
.sopo-stempel{position:absolute;right:-18px;bottom:-62px;z-index:0;
  font-size:230px;line-height:1;font-weight:900;letter-spacing:-.06em;
  color:rgba(255,255,255,.05);pointer-events:none;user-select:none}
.sopo-buehne .sopo-text{position:relative;z-index:1}
.sopo-buehne h2{font-size:clamp(25px,4.4vw,36px);margin-bottom:9px}
.sopo-buehne p{font-size:15.5px}

/* Drei Angaben in einer Zeile. Die Zahl wird nachgeschlagen, nicht
   behauptet - steht sie nicht fest, faellt die erste Angabe weg. */
.sopo-zahlen{display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 20px}
.sopo-zahlen span{display:flex;flex-direction:column;gap:1px;
  font-size:13px;color:rgba(255,255,255,.72);line-height:1.3}
.sopo-zahlen b{font-size:21px;font-weight:850;color:#fff;letter-spacing:-.02em;
  line-height:1.1}
.sopo-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
/* Steht der Knopf allein - also ohne Fahrzeug -, nimmt er die doppelte
   Breite. min() statt einer festen Breite: auf dem Telefon bleibt er
   damit innerhalb der Flaeche. */
.sopo-knoepfe .knopf.breit{min-width:min(100%,440px)}
/* Der zweite Weg ist der leisere - er steht nur da, wenn ein Fahrzeug
   gesetzt ist, und soll den ersten nicht ueberschreien. */
/* .knopf hat von Haus aus KEINEN Rahmen (border:0) - fuer den leisen
   Knopf muss er deshalb erst gesetzt werden, nicht nur eingefaerbt. */
.sopo-knoepfe .knopf.zweit{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.5);box-shadow:none}
.sopo-knoepfe .knopf.zweit:hover{background:rgba(255,255,255,.12);
  border-color:#fff;color:#fff;filter:none;box-shadow:none}
@media (max-width:599px){
  .sopo-buehne{padding:24px 16px 22px}
  .sopo-stempel{font-size:150px;bottom:-38px;right:-10px}
  .sopo-knoepfe .knopf{width:100%;justify-content:center}
}

/* Kopf der eigenen Seite: dasselbe Band, nur mit Umschalter statt Knopf. */
.sopo-kopf{position:relative;overflow:hidden;margin:0 0 20px;padding:24px 20px;
  border-radius:var(--r);color:#fff;display:grid;gap:16px;align-items:center;
  background:
    radial-gradient(760px 320px at 92% 0%, rgba(212,0,0,.38), transparent 62%),
    linear-gradient(135deg, var(--kopf-oben) 0%, var(--kopf-bg) 100%)}
.sopo-kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--cta),transparent)}
/* Umschalter und Herstellerauswahl stehen untereinander in der rechten
   Spalte - auf dem Telefon unter dem Text. */
.sopo-werkzeug{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sopo-wahl{display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08)}
/* Die Auswahl steht auf dunklem Grund - helle Schrift, dunkles Feld, und
   ein eigener Pfeil, weil der des Systems auf Dunkel nicht zu sehen ist. */
.sopo-ven{display:flex;gap:8px;align-items:center;max-width:100%}
.sopo-ven select{font:inherit;font-size:15px;height:44px;padding:0 38px 0 14px;
  min-width:220px;max-width:100%;border-radius:var(--rk);
  border:1px solid rgba(255,255,255,.3);background-color:rgba(255,255,255,.1);
  color:#fff;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),
    linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sopo-ven select:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Die Liste selbst zeichnet das System - dort gilt Dunkel nicht, also
   muessen die Eintraege wieder lesbar sein. */
.sopo-ven option{background:var(--flaeche);color:var(--text)}
.sopo-wahl a{padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:rgba(255,255,255,.8);text-decoration:none;white-space:nowrap}
.sopo-wahl a.an{background:#fff;color:var(--text)}

@media (min-width:760px){
  .sopo-band,.sopo-kopf{grid-template-columns:minmax(0,1fr) auto;
    gap:24px;padding:26px 26px}
  /* Die Buehne hat keine rechte Spalte - sie bleibt einspaltig. */
  .sopo-buehne{grid-template-columns:minmax(0,1fr);padding:38px 34px 32px}
  .sopo-werkzeug{align-items:flex-end}
  .sopo-band h2,.sopo-kopf h1{font-size:30px}
}

/* --- Versandkostentabelle im Rechtstext -------------------------------- */
/* Kommt aus #VERSANDKOSTEN_DE# / #VERSANDKOSTEN_EU# (lib/Shop.asp). Die
   Tabelle hat eine Kopfzeile aus <th>, also baut der Tabellenwandler sie
   auf dem Telefon zu Karten um - hier nur die Feinheiten. */
.rt-versand{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.rt-versand th{padding:7px 10px;text-align:left;font-weight:750;
  border-bottom:2px solid var(--rand);white-space:nowrap}
.rt-versand td{padding:7px 10px;border-bottom:1px solid var(--rand);
  vertical-align:middle}
.rt-versand tr:last-child td{border-bottom:0}
/* Flagge und Landesname stehen zusammen in einem <span>. Das ist kein
   Schmuck: auf dem Telefon macht der Tabellenwandler aus der Zelle ein
   Raster (display:grid), und dort waeren Bild und Text ZWEI Elemente -
   die Flagge stuende dann allein in einer Zeile ueber dem Namen. Mit der
   Huelle sind sie ein Element. */
.rt-land{white-space:nowrap}
.rt-land img{width:24px;height:16px;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px var(--rand);vertical-align:-3px;margin-right:8px}
.rt-preis{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
  white-space:nowrap}

/* --- Zuletzt angesehen ------------------------------------------------ */
/* Im Altshop eine Tabelle mit 140x150-Kacheln, die per id="DONOTSHOW"
   unter 1100px komplett verschwand - auf dem Telefon gab es die Reihe also
   gar nicht. Hier eine Reihe, die seitlich wischt statt umzubrechen: der
   Block ist eine Erinnerung, kein Katalog, und soll eine Zeile hoch
   bleiben. Zurueckhaltend gehalten (duenner Rahmen, kein Farbband), damit
   er die Angebote darueber nicht uebertoent. */
/* Eigene Huelle: der Block haengt NICHT mehr in <main>, sondern unter dem
   ganzen Inhaltsbereich - dort gibt es keine Breitenbegrenzung mehr. Die
   Huelle traegt deshalb dieselben Aussenmasse wie .inhalt, und .zlg selbst
   bekommt dieselbe Flaeche wie <main>: weiss, gerahmt, auf dem Schreibtisch
   gerundet und mit Schatten. Vorher stand die Reihe nackt auf dem
   Seitenhintergrund und sah dadurch angeklebt aus.

   Der negative Aussenabstand oben holt den Block nach oben: .inhalt bringt
   unten 44 / 48 / 56px Polster mit, und das liegt jetzt ZWISCHEN main und
   diesem Block. Ohne die Korrektur klafft dort eine Handbreit Luft. Was
   stehen bleibt, sind die gewollten 12 bis 14px. */
.zlg-band{max-width:var(--breite);margin:0 auto;padding:0}
.zlg{margin:-32px 0 0;padding:18px 12px 20px;background:var(--flaeche);
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.zlg-kopf{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.zlg-kopf h2{display:flex;align-items:center;gap:9px;margin:0;
  font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--leise)}
.zlg-kopf h2::before{content:none}
.zlg-kopf .ic{width:18px;height:18px;color:var(--sehr-leise)}
.zlg-zahl{display:inline-grid;place-items:center;min-width:21px;height:21px;
  padding:0 6px;border-radius:999px;background:var(--f3);color:var(--leise);
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}

/* scroll-snap, damit die Kacheln beim Wischen nicht halb stehenbleiben.
   Die Leiste wird ausgeblendet: sie ueberdeckt sonst die Bezeichnungen. */
.zlg-reihe{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.zlg-reihe::-webkit-scrollbar{display:none}
/* flex-grow:1, aber kein Schrumpfen: sind es wenige Artikel, fuellen die
   Kacheln die Breite aus, statt rechts eine leere Haelfte zu lassen; sind
   es viele, behalten sie ihre Groesse und die Reihe scrollt. Die Deckelung
   verhindert, dass zwei Artikel zu zwei Plakaten werden. */
.zlg-kachel{flex:1 0 146px;max-width:214px;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:7px;padding:10px;
  border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);color:inherit;text-decoration:none;
  transition:border-color var(--an),box-shadow var(--an),transform var(--an)}
.zlg-kachel:hover{border-color:var(--rand-stark);box-shadow:var(--sch);
  transform:translateY(-2px)}
.zlg-bild{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;
  border-radius:var(--rp);background:var(--f2)}
.zlg-bild img{max-width:100%;max-height:100%;object-fit:contain}
.zlg-kein .ic{width:26px;height:26px;color:var(--sehr-leise)}
.zlg-name{font-size:12.5px;font-weight:650;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zlg-nr{margin-top:auto;font-size:11.5px;color:var(--sehr-leise);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.zlg-preis{font-size:14px;font-weight:800;color:var(--rot);
  font-variant-numeric:tabular-nums}
/* Dieselben Stufen wie <main>: 640px mehr Innenabstand, ab 900px ein
   eigenstaendiger Kasten mit Rundung und Schatten, dazu der seitliche
   Abstand von 22px, den .inhalt dort bekommt. */
@media (min-width:640px){
  .zlg{margin-top:-36px;padding:22px 18px 24px}
  .zlg-kopf h2{font-size:17px}
  .zlg-kachel{flex-basis:158px}
}
@media (min-width:900px){
  .zlg-band{padding:0 22px}
  .zlg{margin:-42px 0 0;padding:22px 26px 26px;
    border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--sch)}
}

/* --- Katalogregal auf der Startseite ---------------------------------- */
/* Die Originalkataloge sind das beste Werbemittel des Shops und standen
   bisher nur als Zeile in der Schublade. Hier stehen sie als Regal: dunkler
   Grund, damit die hellen Titelbilder herausleuchten, Baende leicht
   gekippt. Links der Text, rechts das Fach - unter 900px untereinander,
   dann wird das Fach zu einer Reihe zum Wischen. */
.regal{position:relative;overflow:hidden;margin:0 0 26px;
  padding:26px 20px;border-radius:var(--r);
  background:
    radial-gradient(900px 380px at 88% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, var(--kopf-bg) 0%, var(--kopf-oben) 100%);
  color:#fff;display:grid;gap:22px;align-items:center}
.regal::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--cta),transparent)}
.regal-marke{display:inline-block;margin-bottom:8px;padding:3px 10px;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--rp);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.regal-text h2{margin:0 0 8px;color:#fff;font-size:27px;letter-spacing:-.02em;line-height:1.15}
.regal-text h2::before{content:none}
.regal-text p{margin:0;max-width:52ch;font-size:15.5px;line-height:1.55;
  color:rgba(255,255,255,.82)}
.regal-zahlen{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 18px}
.regal-zahlen span{font-size:13px;color:rgba(255,255,255,.7);
  display:flex;align-items:baseline;gap:6px}
.regal-zahlen b{font-size:22px;font-weight:850;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.regal-text .knopf{margin-top:2px}

/* Die Baende ueberlappen wie im Regal. Sie laufen nie aus der Spalte
   heraus: das Fach bleibt scrollbar, auch auf dem Desktop. */
.regal-fach{display:flex;gap:0;align-items:flex-end;
  overflow-x:auto;padding:16px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.regal-buch + .regal-buch{margin-left:-26px}
.regal-fach::-webkit-scrollbar{display:none}
.regal-buch{flex:0 0 auto;display:block;width:118px;position:relative;
  border-radius:3px;background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.45);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease;
  transform-origin:bottom center}
.regal-buch img{display:block;width:100%;height:158px;object-fit:cover;
  border-radius:3px}
/* Buchruecken: der Titel steht nur zum Vorlesen und beim Ueberfahren da. */
.regal-ruecken{position:absolute;left:0;right:0;bottom:0;padding:6px 7px;
  border-radius:0 0 3px 3px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
  color:#fff;font-size:11px;font-weight:700;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  opacity:0;transition:opacity var(--an)}
.regal-buch:hover .regal-ruecken,.regal-buch:focus-visible .regal-ruecken{opacity:1}

/* --- Fremdshop: Kataloge als Verzeichnis ----------------------------- */
/* Gegenstueck zum Regal darueber. Der KTS-Shop inszeniert ein Schaufenster
   - dunkle Flaeche, gekippte Baende, Titel nur beim Ueberfahren. Hier ist
   es ein Verzeichnis: helle Flaeche mit Akzentkante, Zahlen in der
   Kopfzeile, Baende gerade und gleichmaessig, Titel und Jahrgang immer
   lesbar. Dieselben Daten, anderes Bild. */
.fr-kat,.fr-katkopf{margin:0 0 26px;padding:22px 24px;
  border:1px solid var(--rand);border-top:4px solid var(--akzent);
  border-radius:var(--r);background:var(--flaeche)}
.fr-katkopf{margin-bottom:18px}
.frk-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:16px 28px}
.frk-worte{flex:1 1 320px;min-width:0}
.frk-marke{display:inline-block;margin:0 0 7px;font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--sehr-leise)}
.frk-worte h1,.frk-worte h2{margin:0 0 7px;font-size:26px;line-height:1.15;
  letter-spacing:-.02em}
.frk-worte h2::before{content:none}
.frk-worte p{margin:0;max-width:62ch;font-size:14.5px;line-height:1.55;
  color:var(--leise)}
/* Die Zahlen stehen rechts in der Kopfzeile, als Felder - nicht als
   Fliesstext unter der Ueberschrift wie im Regal. */
.frk-zahlen{display:flex;flex-wrap:wrap;gap:10px;margin:0;flex:0 0 auto}
.frk-zahlen div{min-width:92px;padding:8px 12px;border:1px solid var(--rand);
  border-radius:var(--rk);background:var(--f2);text-align:right}
.frk-zahlen dt{font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sehr-leise)}
.frk-zahlen dd{margin:1px 0 0;font-size:19px;font-weight:850;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Die Baende: ein ruhiges Raster, kein Fach zum Wischen. */
.frk-reihe{display:grid;gap:14px;margin:20px 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.frk-band,.frk-mehr{display:flex;flex-direction:column;gap:7px;height:100%;
  padding:10px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--flaeche);color:var(--text);text-decoration:none;
  transition:border-color var(--an),box-shadow var(--an)}
.frk-band:hover,.frk-mehr:hover{border-color:var(--akzent);box-shadow:var(--sch)}
.frkb-bild{display:block;overflow:hidden;border-radius:4px;background:var(--f2)}
.frkb-bild img{display:block;width:100%;height:150px;object-fit:cover}
.frkb-titel{font-size:12.5px;font-weight:750;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.frkb-jahr{margin-top:auto;font-size:11px;font-weight:700;color:var(--sehr-leise);
  font-variant-numeric:tabular-nums}
/* Die letzte Kachel fuehrt ins Verzeichnis. */
.frk-mehr{align-items:flex-start;justify-content:center;gap:2px;
  background:var(--f2);text-align:left}
.frk-mehr strong{font-size:28px;font-weight:850;letter-spacing:-.03em;
  line-height:1.05}
.frk-mehr span{font-size:12.5px;color:var(--leise);line-height:1.3}
.frk-mehr em{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-style:normal;font-size:12.5px;font-weight:800;color:var(--akzent)}
.frk-mehr em .ic{width:15px;height:15px}
/* Der Kopf des Betrachters: Titelbild daneben, Angaben als Felder. */
.fr-katpdfkopf{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin:0 0 18px;padding:16px 18px;border:1px solid var(--rand);
  border-left:4px solid var(--akzent);border-radius:var(--r);
  background:var(--flaeche)}
.fkp-bild{flex:0 0 auto;display:block;width:72px;overflow:hidden;
  border-radius:4px;background:var(--f2)}
.fkp-bild img{display:block;width:100%;height:96px;object-fit:cover}
.fkp-text{flex:1 1 240px;min-width:0}
.fkp-logo{display:block;max-width:110px;max-height:26px;width:auto;height:auto;
  margin:0 0 7px}
.fkp-text h1{margin:0 0 9px;font-size:23px;line-height:1.18;letter-spacing:-.02em}
.fkp-felder{display:flex;flex-wrap:wrap;gap:8px}
.fkp-felder span{display:flex;flex-direction:column;min-width:76px;
  padding:5px 10px;border-radius:var(--rk);background:var(--f2);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sehr-leise)}
.fkp-felder b{font-size:15px;font-weight:850;letter-spacing:-.01em;
  text-transform:none;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .fr-kat,.fr-katkopf{padding:16px 14px}
  .frk-worte h1,.frk-worte h2{font-size:21px}
  .frk-reihe{gap:10px;grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
  .frkb-bild img{height:126px}
  .frk-zahlen div{min-width:0;flex:1 1 auto;padding:6px 10px}
  .frk-zahlen dd{font-size:16px}
}
.dreh-a{transform:rotate(-2.5deg)}
.dreh-b{transform:rotate(1.5deg) translateY(-6px)}
.dreh-c{transform:rotate(-1deg) translateY(3px)}
.dreh-d{transform:rotate(2.5deg)}
.regal-buch:hover,.regal-buch:focus-visible{transform:rotate(0) translateY(-10px) scale(1.04);
  box-shadow:0 18px 34px rgba(0,0,0,.6);z-index:2}
/* Beim Ueberfahren ruecken die dahinter liegenden Baende zur Seite. */
.regal-fach:hover .regal-buch:hover ~ .regal-buch{margin-left:-10px}
/* Am Ende des Fachs stand einmal eine Kachel "Alle Kataloge". Sie war am
   Rand der Spalte angeschnitten, und der Weg steht jetzt wieder als roter
   Knopf im Text links - wie vorher. */
@media (min-width:900px){
  .regal{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;padding:30px 30px}
  .regal-text h2{font-size:31px}
  /* Auf dem Desktop liegen die Baende enger, damit das ganze Fach samt
     "Alle Kataloge" in die Spalte passt und nichts angeschnitten wirkt. */
  .regal-fach{flex-wrap:nowrap;justify-content:flex-start}
  .regal-buch{width:128px}
  .regal-buch img{height:172px}
  .regal-buch + .regal-buch{margin-left:-30px}
  .regal-fach:hover .regal-buch:hover ~ .regal-buch{margin-left:-6px}
  /* Die Kachel "Alle Kataloge" am Ende des Fachs bleibt jetzt auch auf
     dem Schreibtisch stehen: der rote Knopf daneben ist entfallen, er
     steht als "PDF-Katalog" oben im Streifen. Ohne die Kachel fuehrte im
     Regal gar nichts mehr zur Uebersicht. */
}

/* --- Artikelkarte: Bildergalerie -------------------------------------- */
/* Hauptbild mit Miniaturenreihe darunter. Das Hauptbild hat ein festes
   Seitenverhaeltnis, damit die Seite beim Umschalten nicht springt. */
.galerie{margin:0 0 16px}
.gal-gross{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche);
  padding:10px;cursor:zoom-in;position:relative}
.gal-gross img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.gal-gross:hover img{transform:scale(1.04)}
/* Die Lupe als Zeichen, dass da noch mehr kommt. */
.gal-gross::after{content:"";position:absolute;right:10px;bottom:10px;
  width:30px;height:30px;border-radius:var(--rk);background:rgba(18,26,38,.62);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-size:17px;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity var(--an)}
.gal-gross:hover::after,.gal-gross:focus-visible::after{opacity:1}
.galerie.leerbild .gal-gross{cursor:default}
.galerie.leerbild img{filter:grayscale(60%);opacity:.7}
.gal-mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gal-mini button{display:grid;place-items:center;width:58px;height:58px;padding:4px;
  border:1px solid var(--rand);border-radius:var(--rk);background:var(--flaeche);
  cursor:pointer;transition:border-color var(--an),box-shadow var(--an)}
.gal-mini button:hover{border-color:var(--akzent)}
.gal-mini button.an{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.gal-mini img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
/* Videofeld in der Bildleiste. Es sieht aus wie ein Vorschaubild und steht
   hinter dem letzten. Als <a> mit Anker funktioniert es auch ohne
   Javascript - dann springt es zum Abschnitt "Unterlagen" weiter unten. */
.gal-mini a{display:grid;place-items:center;gap:2px;width:58px;height:58px;
  padding:4px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--flaeche);cursor:pointer;text-decoration:none;
  transition:border-color var(--an),box-shadow var(--an)}
.gal-mini a:hover{border-color:var(--akzent)}
.gal-mini a.an{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.gal-video .ic{width:21px;height:21px;color:var(--rot)}
.gal-video img{max-height:30px}
.gal-video span{font-size:10px;font-weight:750;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sehr-leise)}
/* Die Buehne nimmt den Platz des Hauptbildes ein, solange das Video
   laeuft. Der Rahmen bekommt seine Adresse erst beim Klick - vorher geht
   keine Anfrage an Youtube hinaus. */
.gal-gross[hidden]{display:none}
.gal-buehne{position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--rand);border-radius:var(--r);background:#000}
.gal-buehne[hidden]{display:none}
.gal-buehne iframe{width:100%;height:100%;border:0;display:block}
.buehne-zu{position:absolute;top:8px;right:8px;width:30px;height:30px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(10,13,18,.72);color:#fff;font:inherit;font-size:19px;
  line-height:1;cursor:pointer;transition:background var(--an)}
.buehne-zu:hover{background:rgba(10,13,18,.94)}
/* Ruecknahmehinweis nach ElektroG, wie im Altshop unter dem Bild. */
.elektrog{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:9px 12px;
  border:1px solid var(--rand);border-radius:var(--rk);background:var(--f2);
  font-size:13px;color:var(--leise)}
.elektrog img{max-width:120px;height:auto;flex:0 0 auto}

/* --- Lupe: Grossansicht ----------------------------------------------- */
.lupe{position:fixed;inset:0;z-index:140;display:grid;place-items:center;
  background:rgba(10,13,18,.92);padding:48px 16px;
  animation:kts-ein .18s ease both}
.lupe[hidden]{display:none}
.lupe img{max-width:min(96vw,1400px);max-height:84vh;width:auto;height:auto;
  display:block;background:#fff;border-radius:var(--rk)}
.lupe button{position:absolute;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);border-radius:999px;
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  font:inherit;line-height:1;transition:background var(--an)}
.lupe button:hover{background:rgba(255,255,255,.22)}
.lupe-zu{top:14px;right:14px;width:44px;height:44px;font-size:26px}
.lupe-vor,.lupe-zur{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px}
.lupe-vor{left:14px}
.lupe-zur{right:14px}
.lupe-zahl{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.8);font-size:13px;font-variant-numeric:tabular-nums}
@media (max-width:639px){
  .lupe{padding:56px 8px}
  .lupe-vor,.lupe-zur{width:40px;height:40px;font-size:24px}
}

/* --- Artikelkarte: Bausteine ----------------------------------------- */
/* Herstellerlogo. Es steht rechts neben der Bezeichnung und laeuft nicht
   mit ihr um - deshalb float und kein Raster: die Bezeichnung ist mal eine
   Zeile lang und mal vier. */
.venlogo{float:right;margin:2px 0 10px 16px;width:96px;max-width:34%;
  display:grid;place-items:center;padding:6px 8px;
  border:1px solid var(--rand);border-radius:var(--rk);background:var(--flaeche)}
.venlogo img{max-width:100%;max-height:48px;width:auto;height:auto;display:block}
.karte-kopf::after{content:"";display:block;clear:both}
@media (min-width:900px){
  .venlogo{width:120px;margin-left:20px}
  .venlogo img{max-height:60px}
}

.passt{display:grid;gap:3px;margin-bottom:14px;padding:11px 14px;border-radius:var(--rk);
  border-left:3px solid var(--gruen);background:var(--gruen-f)}
.passt strong{color:#065c27;font-size:15px}
.passt span{font-size:13.5px;color:var(--leise)}
.lieferung{display:grid;gap:3px;margin-top:10px;padding:11px 14px;border-radius:var(--rk);
  border:1px solid var(--rand);background:var(--f2)}
.lieferung strong{font-size:15px}
/* Ein festes Versanddatum ist eine Zusage - gleiche Farbe wie "ab Lager". */
.lieferung strong.zusage{color:var(--gruen)}
.lieferung span{font-size:13.5px;color:var(--leise)}
.lieferung .herkunft{color:var(--gelb);font-weight:650}
.lieferung .express{color:var(--akzent);font-weight:650}
.karteblock{margin-top:34px;padding-top:26px;border-top:1px solid var(--rand)}
.karteblock h2{margin-top:0}
/* Teillieferung und Mitteilung stehen im selben Formular wie die
   Versandwege - die Zwischenueberschrift trennt sie davon ab. */
h3.zuliefer{margin:14px 0 8px;font-size:15.5px;font-weight:800;
  letter-spacing:-.01em}
h3.zuliefer+.feldliste{margin-bottom:6px;gap:10px}
/* --- Zahlarten: Logo oder Symbol in der Legende --------------------- */
/* Die Legende der Zahlartengruppe traegt links das Zeichen der Zahlart -
   entweder ein hinterlegtes Logo (Bild) oder ein eigenes Symbol. */
.zahlblock>legend{display:flex;align-items:center;gap:8px}
.zahlblock>legend .za-code{margin-left:0}
.za-logo{height:20px;width:auto;max-width:76px;display:inline-block;
  vertical-align:middle;border-radius:2px}
.za-sym{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:20px;border:1px solid var(--rand-stark);border-radius:3px;
  background:var(--flaeche);color:var(--leise);flex:0 0 auto}
.za-sym .ic{width:15px;height:15px}
/* Der echte PayPal-Knopf wird vom PayPal-Skript in diesen Kasten gezeichnet.
   Die Breite bleibt begrenzt, sonst wird der Knopf unangenehm breit. */
.pp-knopf{max-width:420px;margin:0 0 10px}
.pp-knopf:empty{display:none}
.pp-melde{margin:0 0 10px;font-size:13.5px;color:var(--rot)}
.pp-melde:empty{display:none}
/* Lieferantenlogo in der Katalogueberschrift */
.kataloglogo{max-height:30px;max-width:92px;width:auto;height:auto;
  vertical-align:middle;margin-right:10px}
/* Sperr-, Speditions-, Batterie- und Glaszuschlag am Artikel. Der
   Altshop zeigt die Zeile unter dem Preis (_script_Lieferzeiten.asp). */
.sperrzuschlag{margin:5px 0 0;font-size:12.5px;line-height:1.4;
  font-weight:650;color:var(--gelb)}
.sperrzuschlag span{font-weight:400;color:var(--sehr-leise)}
/* Diagnosekasten, nur mit ?zuschlag=1 in der Adresse. Bewusst schmucklos -
   er soll auffallen und nicht im Layout untergehen. */
.sperrdiag{margin:6px 0 0;padding:6px 8px;border:1px dashed var(--gelb);
  border-radius:4px;font-size:11.5px;line-height:1.5;font-family:monospace;
  color:var(--text);background:rgba(0,0,0,.04);word-break:break-word}
/* --- "Versand heute!" ------------------------------------------------ */
/* Der Altshop zeigt dafuer eine gruene bzw. gelbe Tabelle mit festen
   Pixelbreiten je Ansicht (versandHeute.asp). Hier ein Block in den
   Shopfarben: gruen heisst "geht heute noch raus". */
.vheute{margin:10px 0 0;padding:9px 11px;border-radius:var(--rp);
  background:var(--f2);border:1px solid var(--rand);
  font-size:13px;line-height:1.45}
/* Mit color-mix wird der Kasten gruen getoent; ohne bleibt die Flaeche
   aus der Zeile darueber stehen. */
.vheute{background:color-mix(in srgb, var(--gruen) 12%, var(--flaeche));
  border-color:color-mix(in srgb, var(--gruen) 35%, var(--rand))}
.vheute>strong{display:block;font-size:13.5px;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;color:var(--gruen)}
.vheute.morgen{background:var(--f2);border-color:var(--rand)}
.vheute.morgen>strong{color:var(--leise);text-transform:none}
.vh-liste{margin:5px 0 0;padding:0 0 0 1px;list-style:none}
.vh-liste li{margin:1px 0;color:var(--text)}
.vh-liste b{font-weight:800}
.vh-ab{color:var(--sehr-leise);font-size:12px}
.vh-rest{display:block;margin-top:4px;font-size:12.5px;color:var(--leise)}
.vh-spaeter{display:block;margin-top:2px;font-size:12px;color:var(--sehr-leise)}
/* In den Listen nur ein Schild - dort ist kein Platz fuer die Dienste. */
.vh-schild{display:inline-block;margin-top:4px;padding:1px 7px;
  border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--f2);border:1px solid var(--rand);color:var(--gruen)}
.vh-schild{background:color-mix(in srgb, var(--gruen) 14%, var(--flaeche));
  border-color:color-mix(in srgb, var(--gruen) 35%, var(--rand))}
.vh-schild b{font-weight:800}
/* --- Katalogliste und PDF-Ansicht ----------------------------------- */
/* Die Altseite zeigt je Lieferant eine Tabelle mit Jahrgang, Seitenzahl,
   Format und Dateigroesse (kataloge.asp Zeile 272-384). Dieselben Spalten,
   nur kompakt und auf dem Handy scrollbar. */
.kattab{width:100%;border-collapse:collapse;font-size:13.5px}
.kattab th,.kattab td{padding:7px 8px;vertical-align:middle;
  border-bottom:1px solid var(--rand);text-align:left}
.kattab th{font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sehr-leise);white-space:nowrap}
.kattab td.mitte,.kattab th.mitte{text-align:center;white-space:nowrap}
.kattab td.rechts,.kattab th.rechts{text-align:right;white-space:nowrap}
.kattab tr:last-child td{border-bottom:0}
.kattab .katname{font-weight:700;color:var(--text);text-decoration:none}
.kattab .katname:hover{color:var(--akzent)}
.kattab .katmerk{display:block;font-size:12px;color:var(--sehr-leise);
  margin-top:2px}
.kattab .katbild{width:34px;height:46px;object-fit:cover;border-radius:2px;
  border:1px solid var(--rand);background:var(--f2)}
.kattab .katart{display:inline-block;padding:1px 6px;border-radius:3px;
  border:1px solid var(--rand-stark);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--leise)}
.katknopf{display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 11px;border:1px solid var(--cta);border-radius:3px;
  background:var(--cta);color:var(--cta-fg);font-size:12px;font-weight:800;
  letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer}
.katknopf:hover{filter:brightness(1.08)}
.katknopf.zweit{background:transparent;color:var(--text);
  border-color:var(--rand-stark)}
.katknopf.zweit:hover{border-color:var(--akzent);color:var(--akzent);filter:none}
.katbreit{overflow-x:auto;-webkit-overflow-scrolling:touch}
.katbreit>table{min-width:620px}
/* Die PDF-Ansicht: Kopfzeile, Leiste, darunter der Betrachter des Browsers.
   Der Altshop hatte dafuer eine eigene Anwendung unter /pdfkataloge/. */
.katpdf-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:0 0 12px}
.katpdf-kopf .katpdf-titel{margin:0;font-size:21px;font-weight:800;
  letter-spacing:-.015em}
.katpdf-meta{font-size:12.5px;color:var(--sehr-leise)}
.katpdf-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:9px 11px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--f2);margin:0 0 12px}
.katpdf-leiste form{display:flex;align-items:center;gap:7px;margin:0}
.katpdf-leiste label{font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sehr-leise)}
.katpdf-leiste input[type="text"],.katpdf-leiste input[type="number"]{
  height:26px;padding:0 7px;border:1px solid var(--rand-stark);
  border-radius:3px;background:var(--flaeche);color:var(--text);font-size:13px}
.katpdf-leiste input.seite{width:62px;text-align:center}
.katpdf-leiste input.nummer{width:190px}
.katpdf-leiste .fuell{margin-left:auto}
/* Der Trefferstreifen ueber dem Katalog - das Gegenstueck zum zweiten
   Rahmen des Altbetrachters (results.asp, 70px hoch). Er steht zwischen
   Leiste und Katalog und ist nur da, wenn gesucht wurde. */
.kattreffer{margin:0 0 12px;border:1px solid var(--rand-stark);
  border-radius:var(--rk);background:var(--flaeche);overflow:hidden}
.kattreffer-leer{padding:11px 13px;font-size:13.5px;color:var(--leise)}
.kattreffer-leer a{margin-left:8px;color:var(--akzent)}
.kattreffer-zeile{display:flex;align-items:center;gap:12px;padding:9px 13px;
  border-bottom:1px solid var(--rand)}
.kattreffer-zeile:last-child{border-bottom:0}
.kattreffer-bild{flex:0 0 46px;width:46px;height:46px;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--rand);
  border-radius:3px;background:var(--f2);overflow:hidden}
.kattreffer-bild img{max-width:100%;max-height:100%;object-fit:contain}
.kattreffer-text{flex:1 1 auto;min-width:0}
.kattreffer-text a{display:block;font-weight:700;font-size:14px;
  color:var(--text);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kattreffer-text a:hover{color:var(--akzent)}
.kattreffer-nr{display:block;font-size:12px;color:var(--sehr-leise);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kattreffer-lager{flex:0 0 auto;font-size:12.5px;font-weight:700;
  color:var(--leise);white-space:nowrap}
.kattreffer-preis{flex:0 0 auto;font-size:15px;white-space:nowrap}
/* Der Kaufknopf steht sonst unter dem Mengenfeld: die Flex-Regeln fuer
   .korbzeile gelten nur innerhalb von .karte-aktionen, und die gibt es
   hier nicht. Beide Felder bekommen dieselbe Hoehe, sonst sitzt der Knopf
   versetzt. */
.kattreffer-kauf{flex:0 0 auto}
.kattreffer-kauf form.korbzeile{display:flex;align-items:stretch;gap:7px;margin:0}
.kattreffer-kauf input.korbmenge{height:40px;min-height:40px}
.kattreffer-kauf .karte-cta{width:auto;min-height:40px;height:40px;
  padding:0 16px;white-space:nowrap}
.kattreffer-kalk{padding:12px 13px}
.kattreffer-kalkkopf{font-size:14px;font-weight:700;margin:0 0 10px}
.kattreffer-kalkkopf span{display:block;font-weight:400;font-size:12.5px;
  color:var(--sehr-leise);margin-top:2px}
/* ACHTUNG: dieses Formular heisst .kalkzeile und NICHT .kalkform. Beide
   gab es einmal unter demselben Namen - das hier ist die einzeilige
   Rechenhilfe im Katalogtreffer, .kalkform ist das Positionsformular des
   US-Import-Service. Weil diese Regeln weiter unten stehen, machten sie
   aus dessen Formular eine Flex-Zeile: die Zeilenzahl stand dann neben der
   Tabelle statt darueber. */
.kalkzeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin:0}
.kalkzeile label{display:flex;flex-direction:column;gap:3px;font-size:11px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sehr-leise)}
.kalkzeile input{height:34px;padding:0 9px;border:1px solid var(--rand-stark);
  border-radius:3px;background:var(--flaeche);color:var(--text);
  font:inherit;font-size:14px;font-weight:400;text-transform:none;
  letter-spacing:0}
.kalkzeile .l-nr{flex:1 1 150px}
.kalkzeile .l-bez{flex:2 1 220px}
.kalkzeile .l-nr input,.kalkzeile .l-bez input{width:100%}
.kalkzeile .l-usd input{width:120px;text-align:right}
.kalkzeile .l-menge input{width:62px;text-align:center}
.kalkzeile .karte-cta{height:34px;white-space:nowrap}
/* Der Anfragekorb hat nur ZWEI Felder statt vier - der Knopf soll daneben
   stehen, nicht in einer eigenen Zeile darunter.
   Dieser Block MUSS nach den .kalkzeile-Regeln stehen: gleiche
   Spezifitaet, es gewinnt die spaetere Regel. Weiter oben eingesetzt war
   er wirkungslos, und der Knopf lag ueber die volle Breite. */
.akorbzeile .l-nr{flex:0 1 190px}
/* Ohne Deckel wuchs das Bezeichnungsfeld auf die ganze Zeile und schob
   den Knopf eine Zeile tiefer. */
.akorbzeile .l-bez{flex:1 1 230px;max-width:560px}
/* .karte-cta ist sonst der grosse Kaufknopf ueber die volle Breite -
   width:100% kam von dort und schob ihn in eine eigene Zeile. */
.akorbzeile .karte-cta{flex:0 0 auto;width:auto;padding:0 18px}
/* Beschriftung und Pflichtstern sind EIN Element, sonst macht die
   Flexspalte zwei Zeilen daraus und der Stern steht allein darunter. */
.akorbzeile label>.l-txt{display:block}
.akorbzeile .pflicht{text-transform:none;margin-left:2px}
.kattreffer-kalkmerk{margin:9px 0 0;font-size:12px;color:var(--sehr-leise)}
.kattreffer-kalkfehler{margin:0 0 9px;padding:7px 10px;border-radius:3px;
  background:var(--rot-f);color:var(--cta);font-size:13px;font-weight:700}
.kalkrechnung{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:0 0 11px;font-size:18px}
.kalkrechnung .mal{color:var(--sehr-leise);font-size:15px}
.kalkrechnung strong{font-size:22px}
.kalkrechnung .kalkstueck{font-size:12.5px;color:var(--sehr-leise)}
.kalkrechnung .kalksumme{margin-left:12px;font-size:14px;color:var(--leise)}
.kalkwahl{display:flex;flex-wrap:wrap;gap:8px}
.kalkwahl form{margin:0}
.kalkwahl .karte-cta{height:34px;display:inline-flex;align-items:center;
  white-space:nowrap;text-decoration:none}
.kattreffer-mehr{padding:8px 13px;font-size:13px;background:var(--f2)}
.kattreffer-mehr a{color:var(--akzent)}
@media (max-width:700px){
  .kattreffer-zeile{flex-wrap:wrap;gap:8px}
  .kattreffer-text{flex:1 1 100%;order:1}
  .kattreffer-bild{order:0}
  .kattreffer-lager,.kattreffer-preis{order:2}
  .kattreffer-kauf{order:3;margin-left:auto}
}
.katpdf-rahmen{display:block;width:100%;height:calc(100vh - 290px);
  min-height:460px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--f2)}
/* Steht der Trefferstreifen darueber, braucht der Betrachter denselben
   Platz weniger - sonst schoebe er die Seite ueber den Rand. */
.hat-treffer .katpdf-rahmen{height:calc(100vh - 380px);min-height:380px}
.katpdf-fuss{margin:10px 0 0;font-size:12.5px;color:var(--sehr-leise)}
@media (max-width:720px){
  .katpdf-rahmen{height:calc(100vh - 230px);min-height:380px}
  /* Auf dem Handy bekommt jede Gruppe der Leiste eine eigene Zeile, das
     Nummernfeld nimmt den Rest der Breite - sonst ragt die Leiste heraus. */
  .katpdf-leiste form{flex:1 1 100%;flex-wrap:wrap}
  .katpdf-leiste input.nummer{flex:1 1 110px;width:auto;min-width:0}
  .katpdf-leiste .fuell{display:none}
}
/* --- Bloecke aus /eshops_allgemein/ ----------------------------------- */
/* Der Altshop bringt Werbeflaechen und Landeseiten aus einem gemeinsamen
   Ordner mit. Sie laufen als eigene Anfrage, damit eine fehlende Datei nicht
   die ganze Seite unuebersetzbar macht - siehe Fremd.asp. */
.fremdblock{margin:0 0 24px}
.fremdblock:empty{display:none}
.fremdrahmen{display:block;width:100%;border:0;min-height:120px;
  transition:height .2s ease}
.fremdblock.schmal .fremdrahmen{min-height:80px}
.karteblock .merk{margin:10px 0 0;font-size:12.5px;color:var(--sehr-leise)}
.karteblock table{font-size:14.5px}
.karteblock .liste{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
/* Aufklappbarer Abschnitt - <details>/<summary>, ohne Javascript. */
.aufklapp{margin-top:34px;padding-top:26px;border-top:1px solid var(--rand)}
.aufklapp>summary{position:relative;display:flex;align-items:center;gap:10px;
  margin:0;padding:2px 0 2px 15px;list-style:none;cursor:pointer;
  font-size:20px;font-weight:800;letter-spacing:-.018em;color:var(--text)}
.aufklapp>summary::-webkit-details-marker{display:none}
.aufklapp>summary::before{content:"";position:absolute;left:0;top:50%;
  width:5px;height:22px;margin-top:-11px;border-radius:3px;background:var(--cta)}
.aufklapp>summary:hover{color:var(--akzent)}
.aufklapp>summary .pfeil{margin-left:auto;display:grid;place-items:center;
  width:30px;height:30px;border:1px solid var(--rand-stark);border-radius:50%;
  font-size:13px;color:var(--leise);
  transition:transform var(--an),border-color var(--an),color var(--an)}
.aufklapp>summary:hover .pfeil{border-color:var(--akzent);color:var(--akzent)}
.aufklapp[open]>summary .pfeil{transform:rotate(180deg)}
.aufklapp>summary .zahl{font-size:13px;font-weight:650;color:var(--sehr-leise)}
.aufklapp .aufklapp-inhalt{margin-top:18px;animation:kts-schieb .25s ease both}
.aufklapp .merk{margin:10px 0 0;font-size:12.5px;color:var(--sehr-leise)}
/* Wichtige Hinweise als Fliesstext statt als Aufzaehlung. */
.hinweis-text{margin:0;line-height:1.62}
/* Einleitungstext der Anfrageformulare. */
.ein{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--leise)}
.hinweis-text p{margin:0}
/* Preis in den Listen unter der Artikelkarte - kleiner als auf der Karte. */
.karteblock .preisblock .preis{font-size:19px}
.karteblock .preisblock{min-height:34px}
.preis-frage{font-size:13.5px;font-weight:650;color:var(--gelb)}
/* --- VHT: nur fuer registrierte Haendler ------------------------------ */
/* Im Altcode steht an der Preisstelle kein Knopf, sondern eine Ueber-
   schrift und darunter der Satz mit dem Weg zum VHT-Shop
   (_script_kalkulation.asp Zeile 150-155). Dasselbe hier - deshalb ist
   dieser "Knopf" zweizeilig und kein Knopf. */
/* --- Einstieg nach der Anmeldung (/neu/haendler.asp) ------------------ */
/* Der Altcode setzt dort acht Kaesten absolut mit festen Pixelwerten
   uebereinander (includes/dealer.asp). Hier ein Raster: am Schreibtisch
   drei Spalten, auf dem Telefon untereinander, ohne eine einzige feste
   Breite. */
.hdl-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;
  margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--rand)}
.hdl-kopf>div:first-child{flex:1 1 320px;min-width:0}
.hdl-marke{display:inline-block;margin-bottom:8px;padding:3px 10px;
  border-radius:var(--rp);background:var(--akzent);color:var(--akzent-fg);
  font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.hdl-kopf h1{margin:0 0 4px;padding-left:0}
.hdl-kopf h1::before{content:none}
.hdl-kopf p{margin:0;font-size:14.5px;color:var(--leise)}
.hdl-kopf-tun{display:flex;flex-wrap:wrap;gap:10px}
.hdl-kopf-tun .knopf.zweit{background:transparent;color:var(--text);
  border:1px solid var(--rand-stark);box-shadow:none}
.hdl-kopf-tun .knopf.zweit:hover{background:var(--f2);border-color:var(--leise);
  filter:none}

/* Der Hinweis auf offene Angebote ist der Grund, warum jemand hier
   landet - er steht oben und nicht am Rand wie im Altcode. */
.hdl-kv{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.hdl-kv a{font-weight:700;white-space:nowrap}

.hdl-special{position:relative;display:block;margin:0 0 22px;overflow:hidden;
  border-radius:var(--r)}
.hdl-special img{display:block;width:100%;height:auto}
.hdl-special-knopf{position:absolute;right:18px;bottom:18px;
  padding:9px 18px;border-radius:var(--rp);background:var(--cta);
  color:var(--cta-fg);font-size:14px;font-weight:800;letter-spacing:.02em}

.hdl-wege{display:grid;gap:14px;margin:0 0 26px;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:680px){ .hdl-wege{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .hdl-wege{grid-template-columns:repeat(3,minmax(0,1fr))} }
.hdl-weg{display:block;padding:16px 18px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--flaeche);color:var(--text);
  text-decoration:none;
  transition:border-color var(--an),box-shadow var(--an),transform var(--an)}
a.hdl-weg:hover{border-color:var(--rand-stark);box-shadow:var(--sch-karte);
  transform:translateY(-2px)}
.hdl-weg .ic{width:22px;height:22px;color:var(--cta);margin-bottom:8px;
  display:block}
.hdl-weg strong{display:block;margin:0 0 4px;font-size:17px;font-weight:750;
  letter-spacing:-.01em}
/* Der Kundencenter-Kasten traegt selbst Verweise und ist deshalb ein div -
   anklickbar ist dort die Ueberschrift. */
.hdl-weg strong a{color:inherit;text-decoration:none}
.hdl-weg strong a:hover{color:var(--akzent)}
.hdl-weg>span{display:block;font-size:13.5px;line-height:1.5;color:var(--leise)}
.hdl-weg>span a{color:var(--akzent);font-weight:650}
/* Der Kontaktkasten ist kein Verweis - er soll auch nicht so aussehen. */
/* strong.hdl-zahl: .hdl-weg strong setzt display:block - das gilt auch
   fuer die Zahl mitten im Satz. Deshalb hier mit derselben Tiefe
   gegengehalten, sonst steht sie in einer eigenen Zeile. */
.hdl-weg strong.hdl-zahl{display:inline;margin:0;font-size:inherit;
  letter-spacing:0;color:var(--rot);font-weight:800}
.hdl-kontakt{background:var(--f2)}
.hdl-kontakt a{color:var(--akzent);font-weight:700}

.hdl-bis{font-size:13px;font-weight:400;color:var(--leise);
  letter-spacing:0;text-transform:none}

/* --- Alternativen und Service Parts an der Listenzeile ---------------- */
/* Zwei kurze Wege, die den Bereich an Ort und Stelle aufklappen. Leise
   gesetzt: sie sind ein Angebot, nicht die Hauptsache der Zeile.
   NUR AM SCHREIBTISCH: auf dem Telefon steht die Zeile ohnehin schon
   zweispaltig und eng, ein aufgeklapptes Fach darin waere laenger als
   die Zeile selbst. Darunter bleibt der Weg ueber die Artikelseite.
   Die Listenansicht wird serverseitig geprueft (KtsAltZubZeile). */
.altzub,.altzub-fach{display:none}
/* Zweite Sicherung, dieselbe wie beim Kasten "schneller": in einer Liste
   ohne .zeilen - also im Kachelraster - bleiben die beiden Knoepfe weg,
   auch wenn sie serverseitig doch einmal durchrutschen. Genau das war auf
   /neu/sonderposten.asp zu sehen: die Seite gibt immer Kacheln aus,
   gefragt wurde aber die im Katalog gewaehlte Ansicht aus der Sitzung. */
.liste:not(.zeilen) .altzub,
.liste:not(.zeilen) .altzub-fach{display:none}
@media (min-width:900px){
  .altzub{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .altzub-fach{display:block}
  .altzub-fach[hidden]{display:none}
}
.altzub a{display:inline-flex;align-items:center;min-height:26px;
  padding:3px 10px;border:1px solid var(--rand-stark);border-radius:999px;
  color:var(--akzent);text-decoration:none;font-size:12.5px;font-weight:700;
  white-space:nowrap;transition:background var(--an),border-color var(--an)}
.altzub a:hover{background:var(--f2);border-color:var(--akzent)}
.altzub a[aria-expanded="true"]{background:var(--text);border-color:var(--text);
  color:#fff}
/* Ein kleines Dreieck, das sich beim Aufklappen dreht. */
.az-pfeil{width:0;height:0;margin-left:7px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7;transition:transform var(--an)}
.altzub a[aria-expanded="true"] .az-pfeil{transform:rotate(180deg)}

/* In der Knopfspalte (KTS-Shops, KtsAltZubRechts). Dort stehen sie unter
   "Zum Artikel" und sollen zu den Knoepfen darueber passen: dieselbe
   Eckenrundung var(--rk), dieselbe Breite, nebeneinander zu zweit. Die
   Pillenform von oben waere hier ein Fremdkoerper. */
/* Die Knopfspalte ist unterhalb des Desktops zweispaltig (Warenkorb |
   Zum Artikel). Die beiden Wege stehen DARUNTER, nicht daneben - also
   ueber beide Spalten. */
.karte-aktionen .altzub{margin-top:0;grid-column:1/-1}
@media (min-width:900px){
  .karte-aktionen .altzub{display:flex;gap:7px}
}
.karte-aktionen .altzub a{flex:1 1 0;min-width:0;justify-content:center;
  min-height:32px;padding:4px 8px;border-radius:var(--rk);
  border-color:var(--rand-stark);font-size:12.5px}
/* Die Varianten, deren Knoepfe eine eigene Rundung haben, geben sie
   hierher weiter - "passend zu den Knoepfen darueber" heisst in jeder
   Variante etwas anderes. */
[data-layout="filiale"] .karte-aktionen .altzub a{border-radius:999px}
[data-layout="markt"] .karte-aktionen .altzub a{border-radius:999px}

/* Das Fach unter der Zeile. Inhalt kommt von /neu/altzub.asp. */
.altzub-fach{margin:8px 0 2px;padding:10px 12px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2)}
.az-kopf{margin:0 0 8px;font-size:11.5px;font-weight:850;letter-spacing:.07em;
  text-transform:uppercase;color:var(--leise)}
.az-laedt,.az-leer{font-size:13px;color:var(--leise);padding:4px 0}
.az-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* Flex statt Raster mit Haltepunkt: das Fach steht in der Textspalte der
   Karte, nicht in der Seitenbreite - ein @media auf die FENSTERbreite
   wuerde dort das Falsche messen. So bricht jede Zeile selbst um, sobald
   es eng wird, egal wie breit die Spalte gerade ist. */
.az-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  padding:8px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--flaeche)}
.az-bild{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;
  overflow:hidden;border-radius:var(--rk);background:var(--f2)}
.az-bild img{max-width:100%;max-height:100%;object-fit:contain}
.az-text{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-size:13px;line-height:1.3}
.az-text a{color:inherit;text-decoration:none;font-weight:650}
.az-text a:hover{color:var(--akzent)}
.az-text .nummer{font-size:11.5px}
.az-text .lager{align-self:flex-start;font-size:11.5px;padding:2px 8px;
  white-space:nowrap}
.az-preis{flex:0 0 auto;margin-left:auto;display:flex;align-items:baseline;gap:7px;
  white-space:nowrap}
.az-preis .preis{font-size:17px}
.az-preis .liste-preis{margin-top:0}
.az-tun{flex:0 0 auto}
.az-tun form{margin:0}
.az-tun .karte-cta{min-height:34px;padding:6px 12px;font-size:13px;width:auto;
  white-space:nowrap}
.az-mehr{margin:8px 0 0;font-size:12.5px}
.az-mehr a{color:var(--akzent)}

.vht-weg,.nurhdl-weg{display:block;text-align:left;text-decoration:none;line-height:1.3}
.vht-weg strong{display:block;font-size:14px;font-weight:800;color:var(--akzent)}
/* "Nicht autorisiert!" ist kein Weg irgendwohin - deshalb ein span und
   kein Verweis, und die Ueberschrift traegt die Warnfarbe statt der
   Akzentfarbe. */
.nurhdl-weg{cursor:default}
.nurhdl-weg strong{display:block;font-size:14px;font-weight:800;color:var(--rot)}
.nurhdl-weg>span{display:block;margin-top:3px;font-size:12px;font-weight:400;
  color:var(--leise)}
.vht-weg>span{display:block;margin-top:3px;font-size:12px;font-weight:400;
  color:var(--leise)}
.vht-weg:hover strong{text-decoration:underline}
.vht-weg .extern{margin-left:4px;font-size:11px;opacity:.75}
.preis-spaeter{font-size:12.5px;color:var(--sehr-leise)}
.daten-gitter{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin:0 0 14px}
.daten-gitter div{padding:10px 13px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--f2)}
.daten-gitter .bez{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sehr-leise);margin-bottom:3px}
/* Grundpreis nach Preisangabenverordnung. Steht ueberall unter dem Preis,
   also auch in den Listen und im Korb - dort darf er die Zeile nicht
   auseinanderziehen, deshalb die Packungsangabe eine Spur leiser. */
.grundpreis{font-size:13px;color:var(--leise);margin-top:4px;line-height:1.35}
.grundpreis .gp-inhalt{color:var(--sehr-leise)}
.liste .grundpreis{font-size:12.5px;margin-top:3px}
.k-text .grundpreis{margin-top:3px;font-size:12.5px}
/* Der Altoelhinweis ist ein .aufklapp-Block wie "Verwendung" und braucht
   kein eigenes Aussehen. Nur der Text darin bekommt dieselbe Zeilenhoehe
   wie die uebrigen Rechtstexte. */
#altoel .hinweis-text{font-size:14px}
#altoel .hinweis-text p{margin:0 0 10px}
.merkmale{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.merkmale span{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:var(--rp);background:var(--f3);font-size:12.5px;font-weight:650;color:var(--leise)}
.merkmale span.warn{background:var(--gelb-f);color:var(--gelb)}
.merkmale span.gut{background:var(--gruen-f);color:var(--gruen)}
.blatt{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:650}

/* --- Eingang, Anmeldung, Rechtstexte --------------------------------- */
.eingang{display:grid;gap:34px}
.eingang-kopf{position:relative;margin:-18px -12px 0;padding:34px 18px 30px;
  background:linear-gradient(135deg,var(--kopf-bg) 0%,var(--kopf-bg2) 100%);
  color:#fff;overflow:hidden}
.eingang-kopf h1{position:relative;z-index:1;margin-bottom:10px;color:#fff;
  font-size:clamp(23px,5.6vw,38px)}
.eingang-kopf::after{content:"";position:absolute;right:-150px;top:-140px;width:300px;height:300px;
  border-radius:50%;background:var(--cta);opacity:.18;z-index:0}
/* Feine Schraegstreifen im Banner - Struktur statt Farbfleck. */
.eingang-kopf::before{content:"";position:absolute;inset:0;z-index:0;opacity:.09;
  background-image:repeating-linear-gradient(115deg,#fff 0 2px,transparent 2px 13px)}
.eingang .gross{margin:0;font-size:clamp(15px,3.4vw,18px);color:rgba(255,255,255,.86);
  max-width:62ch;position:relative;z-index:1}
.eingang-kopf .knopf{margin-top:20px;position:relative;z-index:1}
.eingang-wege{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
a.weg{display:grid;gap:4px;padding:18px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);text-decoration:none;color:var(--text);box-shadow:var(--sch);
  transition:transform var(--an),box-shadow var(--an),border-color var(--an)}
a.weg:hover{border-color:var(--cta);box-shadow:var(--sch-karte);transform:translateY(-3px)}
a.weg .ic{width:26px;height:26px;color:var(--cta);margin-bottom:6px;
  transition:transform var(--an)}
a.weg:hover .ic{transform:scale(1.12)}
a.weg strong{font-size:16px;font-weight:700}
a.weg span{font-size:13.5px;color:var(--leise)}
.herstellerliste{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* Auch button: "Zubehoer" ist kein Hersteller, sondern ein Schalter. Er
   stellt den Fahrzeugbezug ab und springt in den Katalog - das geht nur
   per POST (neu/fahrzeug.asp, tun=aus), also ist die Kachel dort ein
   Formular mit Knopf. Aussehen muss sie wie die anderen. */
.herstellerliste a,
.herstellerliste button{display:flex;align-items:center;justify-content:center;min-height:56px;
  width:100%;padding:9px 14px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);
  color:var(--text);text-decoration:none;font:inherit;font-weight:700;font-size:14.5px;
  text-align:center;cursor:pointer;
  transition:border-color var(--an),background var(--an),color var(--an),transform var(--an)}
.herstellerliste a:hover,
.herstellerliste button:hover{border-color:var(--cta);background:var(--f2);color:var(--text);
  transform:translateY(-2px)}
.herstellerliste form{display:contents}
/* Kachel mit Bild - die Klasse setzt die Seite nur, wenn eine Bilddatei zur
   Baugruppe wirklich da ist. Ohne Bild bleibt die Kachel wie bisher. */
.herstellerliste a.mitbild{flex-direction:column;justify-content:center;gap:10px;
  min-height:84px;padding:14px 11px}
/* Die Dateien im Altbestand sind Symbole, im Altcode 20 px breit dargestellt.
   Deshalb width/height auto: ein kleines Symbol bleibt scharf statt
   hochgerechnet zu werden, ein grosses Bild wird auf 108x70 begrenzt. */
.herstellerliste a.mitbild img{display:block;width:auto;height:auto;
  max-width:100px;max-height:58px;object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.herstellerliste a.mitbild:hover img{transform:scale(1.06)}
.merkliste{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;color:var(--leise)}
.eingang-fuss{padding-top:26px;border-top:1px solid var(--rand)}
.anmeldekasten{max-width:440px}
.anmeldekasten .aktionen{margin-bottom:22px}
.anmeldekasten .abmelden{padding-top:18px;border-top:1px solid var(--rand)}
/* "Passwort vergessen?" steht direkt unter dem Knopf - dort sucht man
   es, nicht im Kleingedruckten unter der Registrierung. */
.anm-vergessen{margin:-6px 0 18px;font-size:13.5px}
.anm-vergessen a{color:var(--leise)}
.anm-vergessen a:hover{color:var(--text)}
.anmeldekasten .merk{display:block;margin:0 0 16px;font-size:13px;
  color:var(--sehr-leise);line-height:1.5}
.anmeldekasten .feld .merk{margin:0}
/* HIER STAND EIN ZWEITER .rechtstext-BLOCK. Er hat denselben Bauteil noch
   einmal beschrieben - und weil er WEITER UNTEN steht, hat er den ersten
   (Abschnitt "Rechtstexte") bei gleicher Spezifitaet geschlagen. Dessen
   max-width:none war damit wirkungslos, und der Text blieb auf 75 Zeichen
   stehen, obwohl daneben eine Handbreit Platz frei war. Genau das war auf
   Impressum und Widerrufsformular zu sehen.
   Die Regeln stehen jetzt nur noch an EINER Stelle, oben bei den
   Rechtstexten. Was hier wirklich dazugehoerte, ist dort eingearbeitet. */

/* --- Verwaltung: Textzeilen, Kennzahlen, Laender --------------------- */
.textzeile{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;border:1px solid var(--rand);border-radius:var(--rk);
  background:var(--flaeche);text-decoration:none;color:var(--text);margin-bottom:8px;
  transition:border-color var(--an),background var(--an),transform var(--an)}
.textzeile:hover{border-color:var(--rand-stark);background:var(--f2);transform:translateX(2px)}
.textzeile span{font-size:13px;color:var(--sehr-leise);white-space:nowrap}
.knopf-zurueck{display:inline-flex;align-items:center;min-height:46px;padding:11px 18px;
  border:1px solid var(--rand-stark);border-radius:var(--rk);background:var(--flaeche);
  color:var(--text);text-decoration:none;font-weight:650;
  transition:background var(--an),border-color var(--an)}
.knopf-zurueck:hover{background:var(--f2);border-color:var(--leise)}
.stat-gitter{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kennzahl{padding:16px 18px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--flaeche);box-shadow:var(--sch);
  transition:transform var(--an),box-shadow var(--an)}
.kennzahl:hover{transform:translateY(-2px);box-shadow:var(--sch-karte)}
.kennzahl .zahl-gross{font-size:30px;font-weight:800;letter-spacing:-.026em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.kennzahl .bez{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--leise);margin-top:4px}
.ja{color:var(--gruen);font-weight:700}
.nein{color:var(--sehr-leise)}
.laenderliste{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.laenderliste label{display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 12px;
  border:1px solid var(--rand);border-radius:var(--rk);background:var(--flaeche);
  cursor:pointer;font-size:14.5px;transition:background var(--an),border-color var(--an)}
.laenderliste label:hover{background:var(--f2)}
.laenderliste label.an{border-color:var(--akzent);background:var(--f2);font-weight:650}
.laenderliste input{margin:0;width:19px;height:19px;accent-color:var(--akzent)}
/* DIESE REGEL STAND HIER OHNE KLASSE - als nacktes "textarea". Damit hat
   sie JEDES Textfeld im ganzen Shop auf 320px Hoehe und Schreibmaschinen-
   schrift gezwungen: die Nachricht im Gebot, die Frage im Kundencenter
   und das Widerrufsformular. Gemeint war nur der Editor dieser Seite
   (neu/administration.asp Zeile 436) und die Abschriften darunter, wo
   HTML-Quelltext steht und Festbreitenschrift richtig ist. Jetzt steht
   genau das dran. */
textarea[name="inhalt"],textarea.cfg-zeilen{
  min-height:320px;line-height:1.5;font-family:ui-monospace,Consolas,monospace;
  font-size:14px;resize:vertical;width:100%}
.zeilenform{display:grid;gap:12px;padding:14px;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--f2);margin-bottom:12px}
.zeilenform h3{margin:0;font-size:15px;font-weight:650}
.zeilenform .paare{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:560px){
  .zeilenform .jn label{padding:8px 12px;font-size:14px;gap:6px}
  .zeilenform .jn input{width:16px;height:16px}
}

/* --- Stufen der Fahrzeugwahl ---------------------------------------- */
.stufen{display:grid;gap:14px}

/* =====================================================================
   11. Fuss - vier Spalten wie bei den grossen Haendlern
   ===================================================================== */
.fuss{margin-top:0;padding:30px 12px 22px;background:var(--kopf-bg);
  color:rgba(255,255,255,.76);font-size:14.5px}
.fuss.hell{color:var(--leise)}
.fuss-innen{max-width:var(--breite);margin:0 auto;display:grid;gap:26px;
  grid-template-columns:minmax(0,1fr)}
.fuss h3{margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#fff}
.fuss.hell h3{color:var(--text)}
.fuss ul{margin:0;padding:0;list-style:none}
.fuss li{margin-bottom:8px;line-height:1.45}
.fuss a{color:inherit;text-decoration:none;transition:color var(--an)}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss.hell a:hover{color:var(--akzent)}
.fuss-unten{max-width:var(--breite);margin:24px auto 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.6)}
.fuss.hell .fuss-unten{border-top-color:var(--rand);color:var(--sehr-leise)}
.fuss-tel{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:800;
  color:#fff !important;letter-spacing:-.018em}
.fuss.hell .fuss-tel{color:var(--text) !important}

/* =====================================================================
   12. Tabellen zu Karten unter 700 px
   ===================================================================== */
@media (max-width:699px){
  .tabelle-huelle.karten{border:0;border-radius:0;overflow:visible;background:0 0}
  .tabelle-karten .kopfzeile{display:none}
  .tabelle-karten tr{display:block;margin-bottom:10px;padding:12px 14px;
    border:1px solid var(--rand);border-radius:var(--r);background:var(--flaeche)}
  .tabelle-karten td{display:grid;grid-template-columns:38% minmax(0,1fr);gap:12px;
    padding:5px 0;border:0}
  .tabelle-karten td::before{content:attr(data-label);padding-top:2px;
    font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--sehr-leise)}
  .tabelle-karten td:not([data-label]){display:block}
  .tabelle-karten td:not([data-label])::before{content:none}
  /* In der Kartenansicht steht der Wert unter seiner Beschriftung, nicht
     in einer Spalte - rechtsbuendig ergibt dort keinen Sinn mehr. */
  .tabelle-karten td.zahl,.tabelle-karten td.r,
  .tabelle-karten td.rt-preis{text-align:left}
  /* Zellen mit einem Eingabefeld: Beschriftung DARUEBER, Feld ueber die
     ganze Breite. Nebeneinander bleiben der Beschriftung nur 38% - lange
     Namen wie "US-Lieferanten-Nr." brechen dort auf zwei Zeilen, und das
     Feld daneben steht dann nicht mehr auf ihrer Hoehe. Genau das war im
     Kalkulator zu sehen. Die zweite Regel nennt die Tabelle noch einmal
     beim Namen, damit es auch ohne :has() stimmt. */
  .tabelle-karten td:has(input,select,textarea),
  .kalktabelle.tabelle-karten td{grid-template-columns:minmax(0,1fr);
    gap:5px;padding:7px 0}
  .tabelle-karten td:has(input,select,textarea)::before,
  .kalktabelle.tabelle-karten td::before{padding-top:0}
  /* Welche Position gerade bearbeitet wird, ist in der Kartenansicht sonst
     nicht zu sehen - die Tabellenzeile ist ja aufgeloest. */
  .tabelle-karten tr[data-pos]::before{content:attr(data-pos);display:block;
    margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--rand);
    font-size:11.5px;font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;color:var(--text)}
  .tabelle-karten td:empty{display:none}
  .tabelle-paare tr{display:grid;grid-template-columns:minmax(0,1fr);padding:10px 0;
    border-bottom:1px solid var(--rand)}
  .tabelle-paare tr:last-child{border-bottom:0}
  .tabelle-paare th{padding:0 0 3px;border:0;background:0 0;font-size:11.5px;
    font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--sehr-leise);width:auto}
  .tabelle-paare td{padding:0;border:0}
}

/* =====================================================================
   13. Ab 640 px
   ===================================================================== */
@media (min-width:640px){
  .dienstleiste .innen{padding:7px 18px}
  .kopf-innen{padding:10px 18px}
  .katbalken .innen{padding:0 18px}

  .fahrzeugzeile .innen{padding:10px 18px}
  .inhalt{padding:0 0 48px}
  main{padding:18px 18px 30px}
  .dl-links{display:flex}
  .liste{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .aktionen button.knopf{flex:0 0 auto}
  .karte{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .karte>.karte-kopf{grid-column:1;grid-row:1}
  .karte>.kasten{grid-column:2;grid-row:1/span 2}
  .karte>.karte-daten{grid-column:1;grid-row:2}
  .summen{width:min(380px,100%);margin-left:auto}
  .fuss{padding:36px 18px 24px}
  .fuss-innen{gap:30px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .eingang-kopf{margin:-22px -18px 0;padding:44px 26px 38px}
  .eingang-kopf::after{right:-110px;top:-110px}
}

/* =====================================================================
   14. Ab 900 px - Desktop. Schublade wird Spalte, Tableiste weg
   ===================================================================== */
@media (min-width:900px){
  :root{--kopf-h:64px}
  body{padding-bottom:0}
  .kopf-innen{display:flex;align-items:center;gap:16px;padding:11px 22px}
  /* Ab hier ist die Schublade die linke Spalte - der Schalter dazu hat
     keine Wirkung mehr. Deshalb verschwindet auch "Alle Kategorien" aus
     dem Kategoriebalken; die Gruppen stehen daneben und in der Spalte. */
  .burger,.schub-kopf,.schub-nav,.schub-fuss,.schirm,.tableiste,
  .katbalken .kat-alle{display:none}
  /* Der Oeffner des Kategorie-Fensters ist etwas anderes als der Schalter
     fuer die Schublade - er bleibt auch hier stehen. */
  .katbalken .kat-alle.kat-oeffner{display:inline-flex}
  .marke{order:0;font-size:21px;margin-right:6px}
  .marke img{max-height:84px;max-width:300px}
  .kopfsuche{order:1;flex:1 1 auto;max-width:620px;grid-column:auto;
    margin-left:var(--logo-abstand,0)}
  .fz-knopf{order:2;display:flex;align-items:center;gap:9px;margin-left:auto;
    padding:7px 13px;border-radius:var(--rk);border:1px solid rgba(255,255,255,.22);
    max-width:260px;transition:background var(--an),border-color var(--an)}
  .fz-knopf:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
  .kopf.hell .fz-knopf{border-color:var(--rand-stark)}
  .fz-knopf .ic{width:24px;height:24px;flex:0 0 auto}
  .fz-knopf b{display:block;font-size:13.5px;font-weight:750;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
  .fz-knopf small{display:block;font-size:11px;opacity:.72;line-height:1.2}
  .wl-knopf{order:3;display:grid}
  .korb-knopf{order:4;margin:0 -4px 0 2px}
  .hauptnav{display:none}
  .inhalt{padding:18px 0 56px;gap:0;grid-template-columns:272px minmax(0,1fr)}
  .inhalt.breit{grid-template-columns:minmax(0,1fr)}
  .inhalt.breit .seitenleiste{display:none}
  /* z-index MUSS hier zurueckgesetzt werden. Auf dem Telefon ist die
     Schublade ein Fenster, das ueber allem liegt - dafuer steht oben
     z-index:110, hoeher als die Kopfzeile (100). Auf dem Desktop ist
     dasselbe Element aber nur noch eine Spalte neben dem Inhalt, und die
     110 blieben stehen: sie legten die Spalte VOR die Aufklappfenster
     des Kategoriestreifens (.katzone 90). Wer "Ersatzteile" oder die
     Garage aufklappte, bekam das Fenster unter der Baugruppenspalte
     halb verdeckt.
     1 statt 110: ueber dem gewoehnlichen Inhalt, unter den Fenstern und
     unter der Kopfzeile. */
  .seitenleiste{position:sticky;top:calc(var(--kopf-h) + 18px);align-self:start;
    z-index:1;
    max-height:calc(100vh - var(--kopf-h) - 36px);width:auto;transform:none;
    box-shadow:var(--sch);border:1px solid var(--rand);border-radius:var(--r);
    padding:16px 0;background:var(--flaeche)}
  /* Den Schirm und die Scrollsperre der Schublade gibt es auf dem Desktop
     nicht mehr. Stand das Kaestchen vom Telefon her noch auf "offen" und
     wurde das Fenster nur breiter gezogen, legte sich sonst ein dunkler
     Schleier ueber die Seite, den niemand mehr wegbekam - und die Seite
     liess sich nicht mehr scrollen. */
  .schirm{display:none}
  html:has(.schalter:checked){overflow:visible}
  main{border:1px solid var(--rand);border-radius:var(--r);padding:26px 26px 32px;
    margin-left:22px;box-shadow:var(--sch)}
  .inhalt.breit main{margin-left:0}
  .inhalt{padding-left:22px;padding-right:22px}
  /* Die Kaufspalte waechst mit: ab 1260 px Fensterbreite ueber die
     bisherigen festen 340 px hinaus, hoechstens 400 px. Darunter bleibt
     alles wie gehabt - bei 1100 px gemessen dieselben 340 px. */
  .karte{grid-template-columns:minmax(0,1fr) clamp(340px,27vw,400px);
    gap:clamp(30px,2.6vw,38px);align-items:start}
  .liste{grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
  /* Liste auf dem Desktop: Bild, Text, Preis und Knoepfe nebeneinander */
  .liste.zeilen .artikel{grid-template-columns:132px minmax(0,1fr) minmax(210px,240px);
    gap:10px 20px;padding:16px}
  .liste.zeilen .artikel>.bildspalte{grid-column:1;grid-row:1/span 2}
  .liste.zeilen .artikel>.karte-text{grid-column:2;grid-row:1/span 2}
  .liste.zeilen .artikel>.preisblock{grid-column:3;grid-row:1;margin-top:0;
    border-top:0;padding-top:0;display:block;text-align:right}
  .liste.zeilen .artikel>.karte-aktionen{grid-column:3;grid-row:2;
    margin-top:10px;align-self:start;grid-template-columns:minmax(0,1fr)}
  .liste.zeilen .artikel>.altzub-fach{grid-column:1/-1;grid-row:3}
  .liste.zeilen .artikel h2{margin-top:-2px;font-size:16.5px}
  .liste.zeilen .artikel .c6info{font-size:16.5px}
  /* Der Pfad steht auf dem Desktop ueber der Liste, die Chips nicht -
     dort ist die Spalte links der Weg. */
  .bgchips{display:none}
  .rahmen{grid-template-columns:230px minmax(0,1fr);gap:26px}
  /* align-content:start, sonst ziehen sich die Eintraege ueber die ganze
     Hoehe des Inhalts auseinander - bei einem langen Rechtstext sah die
     Navigation aus, als fehlte sie halb. */
  .rahmen nav{display:grid;gap:4px;overflow:visible;align-content:start;min-width:0}
  .rahmen nav a{border:0;border-radius:var(--rk);justify-content:flex-start;background:0 0;
    white-space:normal;line-height:1.3;min-height:40px}
  .rahmen nav a:hover{background:var(--f2)}
  .katbalken::after{display:none}
  .fuss-innen{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
  .eingang-kopf{margin:-26px -26px 0;padding:56px 34px 48px;border-radius:9px 9px 0 0}
}

/* =====================================================================
   15. Ab 1200 px
   ===================================================================== */
@media (min-width:1200px){
  .liste{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
  .inhalt{grid-template-columns:288px minmax(0,1fr)}
  .marke{font-size:22px}
}

/* =====================================================================
   16. Bewegung - gesammelt, damit sie an einer Stelle abschaltbar ist
   ===================================================================== */
@keyframes kts-auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kts-ein{from{opacity:0}to{opacity:1}}
@keyframes kts-schieb{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes kts-puls{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

main{animation:kts-auf .34s cubic-bezier(.2,.7,.3,1) both}
.eingang-kopf{animation:kts-ein .5s ease both}
.katbalken .innen>*,.katbalken .kat-liste>*,.katbalken .kat-dienste>*{animation:kts-ein .4s ease both}
.korb-zahl{animation:kts-puls .5s cubic-bezier(.2,.7,.3,1) .12s both}
.artikel{animation:kts-auf .38s cubic-bezier(.2,.7,.3,1) both}
.artikel:nth-child(1){animation-delay:.02s}
.artikel:nth-child(2){animation-delay:.05s}
.artikel:nth-child(3){animation-delay:.08s}
.artikel:nth-child(4){animation-delay:.11s}
.artikel:nth-child(5){animation-delay:.14s}
.artikel:nth-child(6){animation-delay:.17s}
.artikel:nth-child(7){animation-delay:.20s}
.artikel:nth-child(8){animation-delay:.23s}
.artikel:nth-child(n+9){animation-delay:.26s}
a.weg{animation:kts-auf .4s cubic-bezier(.2,.7,.3,1) both}
a.weg:nth-child(2){animation-delay:.06s}
a.weg:nth-child(3){animation-delay:.12s}
a.weg:nth-child(4){animation-delay:.18s}
.kennzahl{animation:kts-auf .38s cubic-bezier(.2,.7,.3,1) both}
.kennzahl:nth-child(2){animation-delay:.05s}
.kennzahl:nth-child(3){animation-delay:.10s}
.kennzahl:nth-child(4){animation-delay:.15s}
.meldung,.fehler,.erfolg,.probe{animation:kts-schieb .3s ease both}
.stufe.aktiv{animation:kts-auf .34s cubic-bezier(.2,.7,.3,1) both}
.bg-nav .ebene2,.bg-nav .ebene3{animation:kts-ein .3s ease both}
.schalter:checked ~ .inhalt .schub-nav a{animation:kts-schieb .3s ease both}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;transition-duration:.001s !important}
  .artikel:hover,a.weg:hover,.kennzahl:hover,.textzeile:hover,.blaettern a:hover{transform:none}
  .artikel:hover .bildspalte img{transform:none}
}

/* =====================================================================
   17. Kleine Schirme - Lesbarkeit
   ===================================================================== */
/* Am Schreibtisch sitzt man vor einem ruhigen Bildschirm. Auf dem Telefon
   steht man in der Werkstatt oder draussen, und das Glas spiegelt. Die
   leisen Grautoene, die am Schreibtisch richtig zurueckstehen, sind dort
   nicht mehr zu lesen. Nachgemessen auf weissem Grund:

     --sehr-leise  #8791a0   3,19 : 1
     --leise       #5c6672   5,84 : 1

   Als lesbar gilt ab 4,5:1 bei normaler Schrift. Der erste Wert liegt
   darunter - und genau in ihm stehen Streichpreis, Packungsangabe und
   die Zeilen unter dem Preis.

   Unter 900px werden beide Toene deshalb eine Stufe dunkler:

     --sehr-leise  #69727f   4,87 : 1   (auf --f2 4,53)
     --leise       #525b67   6,88 : 1   (auf --f2 6,41)

   Derselbe Farbton, nur dunkler - die Abstufung "laut, leise, sehr leise"
   bleibt also erhalten, und am Schreibtisch aendert sich nichts.

   Dazu die kleinsten Schriftgrade: was am Schreibtisch mit 10,5 bis 12px
   auskommt, bekommt auf dem Telefon 11,5 bis 12,5px. Und die Karten der
   Trefferliste bekommen eine sichtbare Kante - auf einer Spalte
   untereinander laufen sie sonst ineinander. */
@media (max-width:899px){
  :root{--leise:#525b67; --sehr-leise:#69727f}

  .steuerhinweis,.quelle,.eingabe,.vh-ab,.vh-spaeter{font-size:12.5px}
  .artikel .nummer{font-size:12.5px}
  .tableiste a{font-size:11.5px}

  /* Trennung zwischen den Karten: sichtbare Kante, etwas mehr Luft. */
  .artikel{border-color:var(--rand-stark)}
  .liste{gap:14px}
}

/* --- Senkrechter Reiter: Teileanfrage --------------------------------- */
/* Der Altshop hat ihn am linken Rand kleben (includes/_script_head.asp
   Zeile 579: schwarzer Kasten, left:-80px, top:500px, rotate(-90deg)).
   Hier steht er an derselben Stelle, nimmt aber die Signalfarbe des Shops
   und ist ein gewoehnlicher Link - kein Overlay. Ab 900px abwaerts faellt
   er weg; dort fuehren der Kategoriestreifen und die Schublade hin.

   Zur Eckenangabe: der Reiter klebt links am Fensterrand und ist um 180
   Grad gedreht. Gedreht erscheinen die vier Felder ueber Kreuz - Feld 1
   (sonst oben links) zeigt hier unten rechts. Gerundet wird deshalb nur
   die freie, rechte Seite, und zwar mit den Werten, die der Betrachter
   dort erwartet: unten rechts in Feld 1, oben rechts in Feld 4. */
.teilereiter{position:fixed;left:0;top:46%;z-index:48;
  display:inline-flex;align-items:center;
  writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
  padding:16px 10px;border-radius:var(--e-ur) 0 0 var(--e-or);
  background:var(--cta);color:var(--cta-fg);text-decoration:none;
  font-size:13px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:var(--sch-karte);
  transition:padding var(--an),filter var(--an)}
.teilereiter:hover{padding-right:15px;filter:brightness(1.08)}
.teilereiter:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
/* Gemessen: unterhalb von 1100px Fensterbreite beginnt das Blatt bei 22
   Pixeln - der 40 Pixel breite Reiter laege dann darauf. Darunter faellt
   er deshalb weg; der Weg zur Teileanfrage steht dort im
   Kategoriestreifen, in der Schublade und im Fuss. */
@media (max-width:1100px){
  .teilereiter{display:none}
}
@media (prefers-reduced-motion:reduce){
  .teilereiter{transition:none}
}

/* =====================================================================
   18. Druck
   ===================================================================== */
@media print{
  .dienstleiste,.kopf,.katbalken,.tableiste,.seitenleiste,.schirm,.fahrzeugzeile,
  .fuss,.springen,.blaettern,.karte-cta,.teilereiter{display:none !important}
  /* Die Dokumentliste links und der Drucken-Knopf gehoeren auf den
     Bildschirm, nicht auf das Blatt. Sie standen beim Drucken eines
     Rechtstextes mit auf dem Papier und haben ein Drittel der Seite
     gekostet. */
  .rahmen>nav,.rechtkopf .knopf-zurueck{display:none !important}
  .rahmen{display:block}
  body{padding:0;font-size:11pt;background:#fff}
  .inhalt{display:block;max-width:none;padding:0}
  main{border:0;border-radius:0;margin:0;padding:0;box-shadow:none;animation:none}
  .kasten,.artikel,.stufe,.tabelle-huelle{border-color:#999;box-shadow:none}
  .liste{display:block}
  a{color:inherit;text-decoration:none}
}

/* Die Farben eines Fremdshops stehen NICHT hier, sondern direkt in der
   Seite (lib/Layout.asp, KtsFrFarbenCss). Zwei Gruende: es sind vier
   Zeilen, und sie muessen sofort wirken - ein Stylesheet aus dem
   Zwischenspeicher wuerde eine Farbaenderung in der Verwaltung bis zu
   einer Stunde lang verschlucken. */