/* ============================================================
   12 · Praxis — eine Section, wie sie auf der Seite steht.
   Kein Dokument-Chrome: heller Grund, Marken-Tokens,
   Radius 0, keine Schatten, keine Bewegung.

   Aufbau als Laminat im Schnitt:
     Lage 1  Werkstück   Foto, links angeschnitten
     Lage 2  Marke       weiße Fläche, gerade Kante daneben
   ============================================================ */

:root{
  --n00:#FFFFFF;--n05:#F4F5F6;--n10:#E7E9EB;--n20:#D4D8DB;--n30:#B4BABE;
  --n40:#8C9498;--n50:#6B7377;--n60:#4A5155;--n70:#33383B;--n90:#111111;
  --teal:#08A399;--teal-h:#07938A;--teal-a:#06837B;--teal-d:#068179;--teal-l:#00D4B8;
  /* Signale (Kapitel 04): Rot trägt Rabatt UND Fehler, Grün die
     Bestätigung „auf Lager". Beide gegen Weiß nachgerechnet. */
  --rot:#C42B24;--gruen:#197A43;--amber:#8A6A00;

  --hoehe:690px;          /* Innenhöhe der Section */
  --kante:45%;            /* wo die senkrechte Kante zwischen Foto und
                             Textfläche steht */
  --rundung:3px;          /* minimale Rundung, aus den runden Strichenden
                             der Wortmarke abgeleitet */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--n00);color:var(--n70);
  font:400 17px/1.6 Archivo,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}


/* ---------------------------------------------------------- Section */
.veredelung{position:relative;margin-top:104px;height:var(--hoehe);
  background:var(--n00);overflow:hidden}

/* Lage 1 — das Werkstück, am linken Rand angeschnitten.
   Das Foto steht als ganzes Rechteck da; die weiße Lage stößt mit
   einer geraden, senkrechten Kante daran. Die zwei Pixel Überstand
   verhindern, dass zwischen beiden ein Haarstrich stehen bleibt. */
.werkstueck{position:absolute;z-index:1;left:0;top:0;bottom:0;
  width:calc(var(--kante) + 2px)}
.werkstueck img{width:100%;height:100%;object-fit:cover;object-position:42% 34%}

/* Lage 2 — die Marke, rechts neben dem Werkstück */
.marke{position:absolute;z-index:2;top:0;bottom:0;
  left:var(--kante);right:0;
  background:var(--n00);
  padding:0 56px 0 80px;
  display:flex;flex-direction:column;justify-content:center}

.titel{margin:0;font:600 clamp(32px,3.6vw,50px)/1.04 Archivo,sans-serif;
  font-stretch:112%;letter-spacing:-.03em;color:var(--n90)}
.satz{margin:22px 0 0;max-width:50ch;color:var(--n70)}
.angaben{margin:30px 0 0;padding-top:17px;border-top:1px solid var(--n10);
  max-width:372px;display:flex;flex-wrap:wrap;gap:8px 22px;
  font:400 14px/1.5 'IBM Plex Mono',monospace;letter-spacing:.02em;color:var(--n50)}
.angaben b{color:var(--n90);font-weight:500}

/* ------------------------------------------------------------------
   Die Handlung — sitzt in der Textspalte zwischen den Angaben
   und den Waben, nicht mehr auf der Bildkante.

   Zwei Dinge waren vorher unsauber und sind hier abgestellt:

   1. Der Knopf selbst war geschert und die Schrift mit der Gegen-
      scherung zurückgedreht. Geometrisch stand sie damit gerade, lag
      aber in einem transformierten Teilbaum: der Browser rastert die
      Glyphen dort in eine eigene Ebene und beim Ende der Bewegung
      neu — daher der Sprung in der Strichstärke. Jetzt trägt allein
      die Fläche (::before) die Scherung, die Schrift bleibt
      untransformiert und wird normal gerastert.

   2. Der Wisch war eine zweite, schwarze Lage über einer Teal-Fläche,
      am gerundeten Rand von overflow:hidden beschnitten. Die halb
      gedeckten Randpixel mischten Schwarz mit dem Teal darunter —
      das war der mintfarbene Saum. Jetzt liegen beide Farben in
      EINEM Verlauf auf EINER Fläche; bewegt wird nur dessen Position.
      Eine Kante, die mischen könnte, gibt es nicht mehr.

   Der Knopf ist ein schlichtes Rechteck. Die Formensprache der
   Seite trägt er nicht in seiner Kontur, sondern in der Bewegung:
   der Wisch läuft in 60°. Eine gescherte oder angeschrägte Fläche
   nimmt einem Knopf die Ruhe, die er braucht — und ragt über seine
   Layoutbox hinaus, wofür an jeder Stelle Rand nachgeschoben
   werden müsste.

   Ruhe   Teal-Fläche, schwarze Schrift
   Hover  N90 zieht bei 60° auf, Schrift wird Teal Leucht (9,99:1)
   ------------------------------------------------------------------ */
.handlung{position:relative;z-index:2;
  --knopf-wisch:linear-gradient(90deg,var(--n90) 0 50%,var(--teal) 50% 100%);
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 30px;margin:0;
  /* der Knopf ist mal ein <a>, mal ein <button> — der Browser gibt
     dem Button von sich aus Rahmen, Fläche und eine eigene Schrift.
     Alles drei muss weg, sonst steht ein grauer Kasten um die Form. */
  border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  color:#000;text-decoration:none;
  font:600 15px/1 Archivo,sans-serif;letter-spacing:.012em;
  transition:color .18s ease .13s}
.handlung .t{position:relative;z-index:1;display:block}

/* die Fläche: ein Verlauf mit hartem Sprung. Rechte Hälfte Teal,
   linke N90 — verschoben wird die Position, nicht eine zweite Lage.

   220 % statt 200 %: läge der Verlauf genau doppelt so breit wie der
   Knopf, fiele sein Sprung in den Endlagen exakt auf eine Kante, und
   die halb gedeckte Pixelreihe dort bliebe als Saum stehen (durch die
   Scherung sichtbar als Strich oben und unten). Mit dem Überstand
   steht der Sprung in beiden Endlagen 10 % außerhalb des Knopfes. */
.handlung::before{content:"";position:absolute;z-index:0;inset:0;
  border-radius:var(--rundung);
  background-image:var(--knopf-wisch);
  background-size:220% 100%;background-repeat:no-repeat;
  background-position:100% 0;
  transition:background-position .44s cubic-bezier(.22,1,.36,1)}
.handlung:hover,.handlung:focus-visible{color:var(--teal-l)}
.handlung:hover::before,.handlung:focus-visible::before{background-position:0 0}
.handlung:active{--knopf-wisch:linear-gradient(90deg,#000 0 50%,var(--teal) 50% 100%)}

/* Tastaturfokus als Ring um den Knopf */
.handlung::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  border-radius:var(--rundung);
  box-shadow:0 0 0 0 rgba(0,212,184,0);transition:box-shadow .12s ease}
.handlung:focus-visible::after{box-shadow:0 0 0 2px var(--teal-l)}
.handlung:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){
  .handlung,.handlung::before,.handlung::after{transition:none}
}

/* schmalere Fenster: die Kante wandert nach rechts, damit die
   Textspalte lesbar breit bleibt. */
@media(max-width:1280px){
  :root{--hoehe:690px;--kante:49%}
}
@media(max-width:1080px){
  /* schmale Textspalte, also mehr Zeilen: die Section wird höher */
  :root{--hoehe:700px;--kante:53%}
  .marke{padding-right:40px}
  .satz,.angaben{max-width:none}
}

/* unter 1000 px stehen Foto und Text nicht mehr nebeneinander,
   sondern gestapelt — die feste Sectionhöhe entfällt mit.

   Gestapelt gehören die Waben unmittelbar unter das Foto, das sie
   wechseln: liegt der ganze Textblock dazwischen, sieht niemand
   mehr, worauf sie wirken. Deshalb ist die Textfläche hier eine
   Spalte und die Wabenleiste ihr erstes Kind. */
@media(max-width:1000px){
  .veredelung{height:auto;overflow:visible}
  .werkstueck{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:3/2}
  .marke{position:relative;left:auto;right:auto;top:auto;height:auto;
    padding:22px 26px 38px;display:flex;flex-direction:column}
  .marke-innen{display:flex;flex-direction:column}
  .satz,.angaben{max-width:none}
  .marke .handlung{align-self:flex-start;margin:32px 0 0}
}

/* ------------------------------------------------------------------
   Bildwechsler — sechseckige Waben unter dem Text.
   Keine Kontur: der Zustand steckt im Bild selbst. Was nicht
   gewählt ist, liegt entsättigt und abgedunkelt da; die gewählte
   Ansicht steht in voller Farbe.
   Gewechselt wird beim Zeigen, nicht erst beim Klicken; dabei zieht
   sich die Schräge zurück wie beim Zeigen auf das Foto selbst.
   ------------------------------------------------------------------ */
.marke .handlung{align-self:flex-start;margin:32px 0 0}
.wabenleiste{margin-top:50px}
.waben{display:flex;flex-wrap:wrap}
.wabe{position:relative;width:120px;height:104px;margin-right:-16px;flex:none;
  padding:0;border:0;background:none;cursor:pointer;-webkit-appearance:none}
.wabe:nth-child(even){margin-top:52px}
.wabe.aktiv{z-index:2}
.wabe .flor{position:absolute;inset:0;background:#151515 center/cover no-repeat;
  clip-path:path("M28.0 3.5Q30.0 0.0 34.0 0.0L86.0 0.0Q90.0 0.0 92.0 3.5L118.0 48.5Q120.0 52.0 118.0 55.5L92.0 100.5Q90.0 104.0 86.0 104.0L34.0 104.0Q30.0 104.0 28.0 100.5L2.0 55.5Q0.0 52.0 2.0 48.5Z");
  filter:grayscale(.7) brightness(.68);transition:filter .18s ease}
.wabe:hover .flor,.wabe:focus-visible .flor{filter:grayscale(.2) brightness(.9)}
.wabe.aktiv .flor{filter:none}
.wabe:focus-visible{outline:none}

.werkstueck img{transition:opacity .16s ease}
.werkstueck img.wechsel{opacity:0}

/* Die Wabenleiste wird nie gestaucht: sonst quetscht Flexbox sie
   lautlos zusammen und schneidet die untere Reihe ab, statt dass der
   Platzmangel auffällt. */
.wabenleiste{flex:none}

/* Sechs Waben brauchen 640 px. Die Textspalte ist 0,55 × Fensterbreite
   − 136 px breit, unterschreitet diese 640 px also ab etwa 1410 px und
   die Reihe bricht um — eine zweite Reihe passt aber nicht mehr in die
   Section, deren Höhe von der 60°-Schräge festgelegt ist. Ab hier
   deshalb eine flache Reihe, die bei Bedarf waagerecht läuft. */
@media(max-width:1420px){
  .wabenleiste{overflow-x:auto;padding-bottom:4px}
  .waben{flex-wrap:nowrap}
  .wabe:nth-child(even){margin-top:0}
}

@media(max-width:1080px){
  .wabe .flor{clip-path:path("M24.0 3.5Q26.0 0.0 30.0 0.0L74.0 0.0Q78.0 0.0 80.0 3.5L102.0 41.5Q104.0 45.0 102.0 48.5L80.0 86.5Q78.0 90.0 74.0 90.0L30.0 90.0Q26.0 90.0 24.0 86.5L2.0 48.5Q0.0 45.0 2.0 41.5Z")}
  .wabe{width:104px;height:90px;margin-right:-14px}
}
@media(max-width:1000px){
  /* erstes Kind der Textspalte, also direkt unter dem Foto. Die
     Leiste läuft dabei bis an beide Fensterränder, damit sich die
     letzte Wabe nicht hinter dem Innenabstand versteckt. */
  .wabenleiste{order:-1;margin:0 -26px 30px;padding:0 26px 4px;overflow-x:auto}
  .waben{flex-wrap:nowrap}
  .wabe .flor{clip-path:path("M22.0 3.5Q24.0 0.0 28.0 0.0L68.0 0.0Q72.0 0.0 74.0 3.5L94.0 38.0Q96.0 41.5 94.0 45.0L74.0 79.5Q72.0 83.0 68.0 83.0L28.0 83.0Q24.0 83.0 22.0 79.5L2.0 45.0Q0.0 41.5 2.0 38.0Z")}
  .wabe{width:96px;height:83px;margin-right:6px}
  .wabe:nth-child(even){margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .wabe .flor,.werkstueck img{transition:none}
}


/* ------------------------------------------------------------------
   Gespiegelt — Foto rechts, Text und Waben links

   Gespiegelt wird die Anordnung, nicht das Bild: ein scaleX(-1) über
   die Section würde auch das Foto seitenverkehrt zeigen (Schriftzüge,
   Markenzeichen, Lenkrad). Stattdessen wandern Foto, Keil und Kante
   einzeln auf die andere Seite, das Polygon wird gespiegelt gesetzt.

   Unter 900px stapeln beide Sections gleich — dort gibt es nichts zu
   spiegeln, deshalb gilt der ganze Block erst darüber.
   ------------------------------------------------------------------ */
@media(min-width:1001px){
  .gespiegelt .werkstueck{left:auto;right:0}

  /* Die weiße Lage spannt über die volle Sectionbreite und wird nur
     noch von der geraden Kante beschnitten. Das ist kein Umweg: nur
     so rechnen die Prozentangaben des Innenfeldes gegen die volle
     Sectionbreite, und der Text steht links in derselben Flucht wie
     alle anderen Sections der Seite (zentriertes Feld, 1560 px,
     44 px Rand). Rechts hält er den Abstand zur Kante des Fotos. */
  .gespiegelt .marke{left:0;right:0;padding:0;
    clip-path:polygon(0 0, calc(100% - var(--kante)) 0,
                      calc(100% - var(--kante)) 100%, 0 100%)}
  .gespiegelt .marke-innen{width:100%;
    padding-left:max(44px, calc((100% - 1560px) / 2 + 44px));
    padding-right:calc(var(--kante) + 56px)}

  /* quadratische Vorlagen — hier ist die Mitte der richtige Ausschnitt */
  .gespiegelt .werkstueck img{object-position:50% 50%}
}

@media(min-width:1001px) and (max-width:1280px){
  .gespiegelt .marke-innen{padding-left:32px}
}
@media(min-width:1001px) and (max-width:1080px){
  .gespiegelt .marke-innen{padding-left:40px}
}


/* ============================================================
   KOPF + HERO

   Vollbreites Herobild, der Kopf liegt darüber. Darunter als
   eigene helle Leiste die Fahrzeugauswahl — der gemeinsame
   Einstieg für Fertigteile und Veredelung (Kapitel 02).

   Abweichung von der Brand Identity, bewusst und auf Ansage:
   Kapitel 06 verlangt für den Kopf eine eigene weiße Fläche,
   Kapitel 09 verbietet Schrift auf dem Bild. Beides ist hier
   aufgehoben. Gegensteuerung, damit das Bild seine Aufgabe noch
   erfüllt: Logo in der Negativfassung, abgedunkelt wird nur als
   Verlauf an den beiden Rändern — die Bildmitte, in der das
   Gewebe liegt, bleibt unangetastet.
   ============================================================ */

:root{
  --d-text:#F2F4F4;
  --d-sek:#A8B0B4;
  --diy-d:#B23A00;
}

.oben{position:relative;background:var(--n90);
  /* Hero und Fahrzeugauswahl teilen sich EIN Fenster — die Leiste
     darf nie unter der Kante verschwinden. */
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column}

/* ---------------------------------------------------------- Kopf */
.kopf{position:absolute;z-index:5;top:0;left:0;right:0}
.kopf-innen{max-width:1560px;margin:0 auto;padding:26px 44px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px}

.markenzeichen{display:block;justify-self:start}
.markenzeichen img{display:block;width:196px;height:auto}

.haupt{justify-self:center;display:flex;gap:clamp(16px,2.1vw,32px);
  font:500 15px/1 Archivo,sans-serif}
.haupt a{color:var(--d-text);text-decoration:none;white-space:nowrap}
.haupt a:hover{color:var(--teal-l)}
.haupt a[aria-current="page"]{font-weight:600}

.dienste{justify-self:end;display:flex;align-items:center;gap:26px}
.dienste a{position:relative;display:block;color:var(--d-text);text-decoration:none}
.dienste a:hover{color:var(--teal-l)}
.dienste svg{display:block;width:23px;height:23px;fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
/* Kennzeichnung ist ein Rechteck, keine Pille (Kap 09) */
.korb .zahl{position:absolute;top:-6px;right:-9px;min-width:17px;height:17px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  background:var(--teal);color:#000;
  font:600 11px/1 Archivo,sans-serif;letter-spacing:.01em;border-radius:2px}
/* Der Griff steht ganz rechts außen — dort, wo der Daumen liegt. */
.menue{display:none;order:9;margin:0;padding:4px 0;border:0;background:none;
  cursor:pointer;color:var(--d-text)}
.menue:hover{color:var(--teal-l)}

.kopf a:focus-visible,.menue:focus-visible{outline:2px solid var(--teal-l);outline-offset:5px}

/* ---------------------------------------------------------- Hero */
.einstieg{position:relative;flex:1 1 auto;min-height:430px;overflow:hidden;
  background:var(--n90);display:flex;align-items:flex-end}
.herobild{position:absolute;z-index:0;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%}

/* Zwei Verläufe statt einer Abdunklung über das ganze Bild:
   oben nur so viel, dass der Kopf trägt, unten nur so weit, wie
   die Schrift reicht. Dazwischen bleibt das Gewebe unberührt. */
.einstieg::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:260px;
  background:linear-gradient(to bottom,rgba(10,10,10,.72) 0%,rgba(10,10,10,.34) 46%,rgba(10,10,10,0) 100%)}
.einstieg::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:64%;
  background:linear-gradient(to top,rgba(10,10,10,.82) 0%,rgba(10,10,10,.42) 34%,rgba(10,10,10,0) 100%)}

.hero-text{position:relative;z-index:2;width:100%;max-width:1560px;margin:0 auto;
  /* oben so viel Luft, dass der Kopf nie auf der Zeile klebt;
     die Maße hängen zusätzlich an der Fensterhöhe, damit auf
     flachen Bildschirmen nichts unter die Kante rutscht */
  padding:120px 44px 60px}
.claim{margin:0;color:var(--d-text);
  font:600 clamp(34px,min(4.4vw,7.2vh),66px)/1.04 Archivo,sans-serif;
  font-stretch:112%;letter-spacing:-.03em}
.hero-text .satz{margin:clamp(16px,2.4vh,26px) 0 0;max-width:60ch;color:var(--d-text);opacity:.92}
.belegzeile{margin:22px 0 0;font:400 14px/1.5 Archivo,sans-serif;color:var(--d-sek)}

/* ---------------------------------------------------------- Fahrzeugauswahl
   Der Zustand steckt in der Kontur, nicht in der Farbe allein:
   offen    = geschlossener Rahmen, 1 px in N40
   gewählt  = Kontur in Teal, doppelte Stärke (wie die Materialprobe
              in Kapitel 09)
   ---------------------------------------------------------- */
.einstiegsband{flex:none;background:var(--n00)}
.band-innen{max-width:1560px;margin:0 auto;padding:28px 44px 32px}

.frage{margin:0 0 18px;font:500 17px/1.5 Archivo,sans-serif;color:var(--n70)}

.wahl{display:flex;align-items:flex-end;flex-wrap:wrap;gap:18px 32px}
#feld-marke{width:210px}
#feld-modell{width:256px}

.feld label{display:block;margin-bottom:11px;
  font:500 12px/1 Archivo,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n50)}

.rahmen{position:relative;background:var(--n00);border-radius:var(--rundung);
  box-shadow:inset 0 0 0 1px var(--n40);
  transition:box-shadow .18s ease}

.rahmen select{-webkit-appearance:none;appearance:none;
  display:block;width:100%;height:56px;margin:0;border:0;border-radius:var(--rundung);
  background:transparent;padding:0 44px 0 18px;
  font:500 16px/1 Archivo,sans-serif;color:var(--n90);cursor:pointer}

/* Ohne eigenes Zeichen sieht ein Auswahlfeld aus wie ein Textfeld —
   appearance:none nimmt dem Browser auch den Pfeil weg. Es ist
   derselbe flache Winkel wie am Megamenü, gebaut als Kontur, damit
   er die Strichstärke der übrigen Zeichen trifft. */
.rahmen:has(select)::after{content:"";position:absolute;z-index:1;pointer-events:none;
  right:18px;top:50%;width:11px;height:7px;margin-top:-3.5px;
  background:var(--n50);
  clip-path:polygon(0 0, 50% 62%, 100% 0, 100% 26%, 50% 88%, 0 26%)}
.rahmen:hover::after{background:var(--n90)}
.rahmen:focus-within::after{background:var(--teal-d)}
.rahmen select.leer{font-weight:400;color:var(--n50)}
.rahmen select:focus{outline:none}
.rahmen:focus-within{box-shadow:inset 0 0 0 2px var(--teal-d)}

.feld.entschieden .rahmen{box-shadow:inset 0 0 0 2px var(--teal)}
.feld.entschieden .rahmen:focus-within{box-shadow:inset 0 0 0 2px var(--teal-d)}

.feld.gesperrt .rahmen{box-shadow:inset 0 0 0 1px var(--n20)}
.feld.gesperrt label{color:var(--n40)}
.feld.gesperrt select{color:var(--n40);cursor:not-allowed}

/* derselbe Knopf wie unten in der Section — eine Knopfform je Seite */
.wahl .handlung{position:relative;flex:none;margin:0;min-width:174px}

/* Nebeneingang DIY: eigener Weg, aber kein zweiter Knopf (Kap 02).
   Die Bereichsfarbe erscheint als Schrift nur in ihrer dunklen
   Fassung, sonst reicht der Kontrast nicht (Kap 04). */
.nebeneingang{margin:0 0 0 auto;padding-bottom:17px;
  font:400 15px/1.6 Archivo,sans-serif;color:var(--n50)}
.nebeneingang a{color:var(--diy-d);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.nebeneingang a:hover{color:var(--n90)}
.einstiegsband a:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px}

/* ---------------------------------------------------------- schmaler */
@media(max-width:1280px){
  .kopf-innen{padding:22px 32px;gap:28px}
  .haupt{gap:16px;font-size:14px}
  .markenzeichen img{width:172px}
  .hero-text{padding:112px 32px 54px}
  .band-innen{padding:26px 32px 30px}
}
@media(max-width:1180px){
  .kopf-innen{grid-template-columns:auto 1fr;gap:20px}
  .haupt{display:none}
  .menue{display:block}
  .dienste{gap:22px}
  #feld-marke{width:180px}
  #feld-modell{width:220px}
  .nebeneingang{margin-left:0;width:100%;padding-bottom:0}
}
@media(max-width:900px){
  .kopf-innen{padding:16px 22px}
  .markenzeichen img{width:150px}
  .einstieg{height:auto;min-height:min(78vh,600px)}
  .hero-text{padding:180px 22px 44px}
  .hero-text .satz{max-width:none}
  .band-innen{padding:24px 22px 28px}
  .wahl{display:block}
  #feld-marke,#feld-modell{width:100%;margin-bottom:18px}
  .wahl .handlung{width:100%;min-width:0}
  .nebeneingang{margin-top:22px}
}
@media(max-width:520px){
  .claim{font-size:clamp(30px,8.6vw,40px)}
  .dienste{gap:18px}
}
@media(prefers-reduced-motion:reduce){
  .rahmen{transition:none}
}


/* ============================================================
   Zwei Wege, klar gewichtet (Kapitel 02, Rangfolge der Säulen)

   Rang 1 · Veredelung auf Anfrage — steht im Hero, groß, mit
            eigenem Knopf. Das ist der Umsatzbringer und das
            einzige echte Alleinstellungsmerkmal.
   Rang 2 · Fertigteile — in der Leiste darunter, konkret
            bedienbar über Marke und Modell.
   Rang 4 · DIY — leiser Nebeneingang am rechten Rand der Leiste.

   Beide Knöpfe dürfen Teal tragen, weil sie räumlich getrennt
   sitzen: einer auf dem dunklen Bild, einer auf der weißen
   Leiste. Ein Cockpit aus nebeneinanderstehenden Knöpfen, vor
   dem Kapitel 02 warnt, entsteht dadurch nicht.
   ============================================================ */

.hero-handlung{margin:clamp(20px,3.4vh,34px) 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px}
.hero-text .handlung{position:relative;flex:none;margin:0;min-width:198px}
.hero-handlung .dazu{font:400 15px/1.5 Archivo,sans-serif;color:var(--d-sek)}

.hero-text .belegzeile{margin-top:clamp(16px,2.8vh,30px)}

.frage b{font-weight:600;color:var(--n90)}

@media(max-width:900px){
  .hero-handlung{margin-top:28px;gap:12px 20px}
  .hero-text .handlung{min-width:0;width:100%}
  .hero-handlung .dazu{width:100%}
  /* auf dem Handy passt beides nicht gleichzeitig ins Fenster —
     dort scrollt die Leiste normal nach */
  .oben{min-height:0}
  .einstieg{min-height:min(74vh,560px)}
}

/* sehr flache Fenster: dann darf die Leiste ausnahmsweise
   nachscrollen, statt den Hero zu zerquetschen */
@media(max-height:600px){
  .oben{min-height:0}
  .einstieg{min-height:440px}
}


/* ============================================================
   MEGAMENÜ „Carbonteile nach Marke"

   Weiße Fläche unter dem Kopf, weil der Kopf selbst auf dem Bild
   liegt und eine Liste aus 65 Modellreihen dort nicht lesbar wäre.
   Radius 0 bis auf die minimale Rundung, Abgrenzung über Konturen
   statt über Schatten (Kapitel 09).

   Links die Tafel: im Grundzustand das Signet, sobald man auf eine
   Marke zeigt deren Name. Genau dort sitzt später das Herstellerlogo,
   wenn es dafür eine Freigabe gibt — bis dahin steht die Wortmarke,
   die markenrechtlich unbedenklich ist.
   ============================================================ */

.mega-schalter{display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;white-space:nowrap;color:var(--d-text)}
/* Der Winkel liegt bei 30° zur Waagerechten — die Gegenflanke der
   60°-Schräge des Signets. Offen zeigt er nach oben. */
.mega-pfeil{display:block;flex:none;width:11px;height:7px;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:square;stroke-linejoin:miter;
  transition:transform .2s ease}
.mega-schalter[aria-expanded="true"] .mega-pfeil{transform:rotate(180deg)}
.mega-schalter:hover,.mega-schalter[aria-expanded="true"]{color:var(--teal-l)}
a.mega-schalter{text-decoration:none}

/* Die Listen stehen fertig im HTML und sind bis zum Öffnen verborgen —
   `hidden` muss gegen das eigene `display:grid` der Listen gewinnen. */
.mega-listen [hidden]{display:none}

.mega{position:absolute;z-index:6;top:100%;left:0;right:0;
  background:var(--n00);border-bottom:1px solid var(--n10)}
.mega-innen{max-width:1560px;margin:0 auto;padding:38px 44px 44px;
  display:grid;grid-template-columns:330px minmax(0,1fr);gap:0 56px;align-items:stretch}

/* ---------------------------------------------------------- Tafel */
.mega-tafel{overflow:hidden;background:var(--n05);border-radius:var(--rundung)}
.tafel-bild{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* Herstellerzeichen sitzt im selben Feld wie das Bild, damit die
   Tafel beim Wechsel nicht springt */
.tafel-zeichen{display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;background:var(--n05);padding:28px}
.tafel-zeichen img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
.tafel-text{padding:22px 26px 26px}
.tafel-oben{margin:0 0 10px;font:500 12px/1 Archivo,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n50)}
.tafel-titel{margin:0;font:600 22px/1.25 Archivo,sans-serif;color:var(--n90)}
.tafel-marke{margin:0;font:600 clamp(28px,2.4vw,38px)/1.1 Archivo,sans-serif;
  font-stretch:112%;letter-spacing:-.02em;color:var(--n90)}
.tafel-satz{margin:14px 0 0;font:400 15px/1.55 Archivo,sans-serif;color:var(--n60)}
.tafel-leise{color:var(--n50)}
.tafel-weg{display:inline-block;margin:20px 0 0;color:var(--teal-d);
  font:500 15px/1.4 Archivo,sans-serif;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.tafel-weg:hover{color:var(--n90)}

/* ---------------------------------------------------------- Listen */
.marken{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 28px}
/* Eine Marke ist ein Link auf ihre Kategorie; mit Skript öffnet der Klick
   stattdessen die Modellreihen. Knopf und Link sehen gleich aus. */
.marken button,.marken a{width:100%;margin:0;padding:11px 12px 11px 0;border:0;background:none;
  cursor:pointer;text-align:left;color:var(--n70);text-decoration:none;
  display:flex;align-items:center;gap:14px;
  font:500 17px/1.3 Archivo,sans-serif;
  border-bottom:1px solid var(--n10)}
.marken button:hover,.marken button:focus-visible,
.marken a:hover,.marken a:focus-visible{color:var(--n90)}
.marken .mi{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.marken .mi img{display:block;max-width:100%;max-height:100%;
  opacity:.82;transition:opacity .15s ease}
.marken button:hover .mi img,.marken a:hover .mi img{opacity:1}
.marken .mn{flex:1 1 auto;min-width:0}
.marken .mz{flex:none;font:400 13px/1 Archivo,sans-serif;color:var(--n40)}
.marken button:hover .mz,.marken a:hover .mz{color:var(--teal-d)}

.zurueck{margin:0 0 22px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--n50);font:500 14px/1 Archivo,sans-serif}
.zurueck:hover{color:var(--n90)}
.listen-titel{margin:0 0 18px;font:600 26px/1.15 Archivo,sans-serif;
  font-stretch:112%;letter-spacing:-.02em;color:var(--n90)}
.modelle{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 28px}
.modelle a{display:block;padding:11px 0;color:var(--n70);text-decoration:none;
  font:400 16px/1.35 Archivo,sans-serif;border-bottom:1px solid var(--n10)}
.modelle a:hover{color:var(--n90)}
.listen-leer{margin:0;max-width:46ch;font:400 16px/1.6 Archivo,sans-serif;color:var(--n60)}

/* ---------------------------------------------------------- Über uns
   Fünf Punkte, jeder mit einem Satz, der sagt, was einen dort
   erwartet — bei einem Menü über die eigene Firma ist der Titel
   allein zu wenig. Beim Zeigen wandert das Bild in die Tafel. */
.ue-liste{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 48px}
.ue-liste a{display:block;padding:16px 0;text-decoration:none;
  border-bottom:1px solid var(--n10)}
.ue-titel{display:block;font:500 18px/1.3 Archivo,sans-serif;color:var(--n90)}
.ue-satz{display:block;margin-top:5px;max-width:44ch;
  font:400 14px/1.5 Archivo,sans-serif;color:var(--n60)}
.ue-liste a:hover .ue-titel,.ue-liste a:focus-visible .ue-titel{color:var(--teal-d)}

.mega button:focus-visible,.mega a:focus-visible{outline:2px solid var(--teal-d);outline-offset:2px}

@media(max-width:1440px){
  .mega-innen{grid-template-columns:290px minmax(0,1fr);gap:0 40px;padding:32px 32px 38px}
}
@media(max-width:1300px){
  .marken,.modelle{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   MOBILES MENÜ — ein Stapel Tafeln, jede schiebt sich von rechts

   Der Griff sind drei Striche, der mittlere breiter als die
   äußeren. Die Flanke, die dabei entsteht, läuft im selben 60°
   wie die Schräge des Signets — aus dem Griff wird eine Wabe.

   Jede Ebene legt sich als eigene Tafel über die vorige und wird
   dabei eine Neutralstufe dunkler. Damit ist ohne jede
   Beschriftung ablesbar, wie tief man im Menü steckt.
   ============================================================ */

/* ---------------------------------------------------------- Griff */
.wabengriff{display:flex;flex-direction:column;align-items:center;gap:5px;width:26px}
.wabengriff i{display:block;height:2px;background:currentColor;
  transition:width .16s ease}
/* 5px Zwischenraum + 2px Strich = 7px Achsabstand.
   7 / tan(60°) = 4,04 je Seite, also 8px schmaler als der mittlere. */
.wabengriff i:first-child,.wabengriff i:last-child{width:18px}
.wabengriff i:nth-child(2){width:26px}
.menue:hover .wabengriff i:first-child,
.menue:hover .wabengriff i:last-child{width:26px}

/* ---------------------------------------------------------- Rahmen */
.mobilmenu{position:fixed;z-index:60;inset:0}
.mobilmenu[hidden]{display:none}

.m-schleier{position:absolute;inset:0;background:rgba(10,10,10,.5);
  opacity:0;transition:opacity .3s ease}
.mobilmenu.m-offen .m-schleier{opacity:1}

.m-stapel{position:absolute;inset:0;pointer-events:none}

.m-tafel{position:absolute;top:0;bottom:0;right:0;width:min(440px,100%);
  pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;
  padding:0 22px 40px;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.22,1,.36,1)}
.m-tafel.m-da{transform:translateX(0)}
.m-t1{background:var(--n00)}
.m-t2{background:var(--n05)}
.m-t3{background:var(--n10)}

/* ---------------------------------------------------------- Tafelkopf */
.m-kopf{position:sticky;z-index:3;top:0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:0 -22px;padding:16px 22px;background:inherit;
  border-bottom:1px solid var(--n20)}
.m-kopf img{display:block;width:150px;height:auto}
.m-schliessen,.m-zurueck{margin:0;padding:6px 0;border:0;background:none;cursor:pointer;
  color:var(--n60);font:500 15px/1 Archivo,sans-serif}
.m-zurueck{display:flex;align-items:center;gap:9px;color:var(--n90)}
.m-zurueck svg{display:block;width:11px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.m-schliessen:hover,.m-zurueck:hover{color:var(--teal-d)}

.m-titel{margin:26px 0 6px;font:600 26px/1.15 Archivo,sans-serif;
  font-stretch:112%;letter-spacing:-.02em;color:var(--n90)}

/* ---------------------------------------------------------- Zeilen */
.m-liste{display:block;margin-top:14px}
.m-zeile{position:relative;overflow:hidden;width:100%;margin:0;padding:21px 0;
  border:0;border-bottom:1px solid var(--n20);background:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;text-align:left;text-decoration:none}
.m-wort{position:relative;z-index:1;flex:1 1 auto;
  font:500 19px/1.3 Archivo,sans-serif;color:var(--n90)}
.m-zahl{position:relative;z-index:2;flex:none;min-width:22px;text-align:right;
  font:400 14px/1 Archivo,sans-serif;color:var(--n50)}
/* der Pfeil trägt dieselbe 60°-Flanke wie das Signet */
.m-weiter{position:relative;z-index:2;flex:none;display:block;width:11px;height:18px;
  fill:none;stroke:var(--n40);stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.m-zeile:hover .m-weiter,.m-zeile:focus-visible .m-weiter{stroke:var(--teal-d)}
.m-zeile:hover .m-wort,.m-zeile:focus-visible .m-wort{color:var(--teal-d)}

/* Ebene 3 sind reine Modellreihen — leiser gesetzt als die Ebenen darüber */
.m-t3 .m-wort{font-weight:400;font-size:17px;color:var(--n70)}
.m-t3 .m-zeile{padding:17px 0}

/* das Herstellerzeichen liegt schwach hinter der Zeile */
.m-schatten{position:absolute;z-index:0;right:52px;top:50%;transform:translateY(-50%);
  width:56px;height:56px;object-fit:contain;opacity:.17;pointer-events:none}

.m-leer{margin:14px 0 0;max-width:40ch;font:400 16px/1.6 Archivo,sans-serif;color:var(--n60)}

.mobilmenu button:focus-visible,.mobilmenu a:focus-visible{
  outline:2px solid var(--teal-d);outline-offset:2px}

@media(min-width:1181px){
  .mobilmenu{display:none}
}
@media(max-width:1180px){
  .mega{display:none}
}
@media(prefers-reduced-motion:reduce){
  .m-tafel,.m-schleier,.wabengriff i{transition:none}
}


/* ============================================================
   SORTIMENT — Fertigteile im Raster

   Die Kachel bekommt ihre Kante vom Bildfeld, nicht von einem
   Rahmen um die Karte. Kapitel 09: das Feld gehört zum Bild —
   eine quadratische Fläche in N05, das Teil darin bei jedem
   Artikel gleich groß, die Fläche daneben bleibt weiß. Ein
   zweiter Kasten um Text und Preis würde diese Kante verdoppeln
   und das Raster wieder unruhig machen.

   Vier Karten im Fenster, der Rest liegt rechts daneben. Weil
   genau vier hineinpassen, sagt kein Anschnitt etwas über den
   Vorrat — das übernehmen die beiden Winkel oben rechts und die
   Laufleiste unter der Schiene.

   Vom Gewohnten weicht es drei Mal ab, jedes Mal aus Kapitel 09
   heraus:
     · kein Schatten, keine Erhebung — Abgrenzung über N00 gegen
       N05, der Kontrast gehört den Produkten (Kapitel 03)
     · kein Kennzeichnungs-Fähnchen auf dem Bild; dass ein Preis
       herabgesetzt ist, steht im Preis und sonst nirgends
     · beim Zeigen bewegt sich nichts, es wechselt nur die Farbe
   ============================================================ */

.sortiment{--spalten:4;--luecke:24px;
  margin-top:104px;padding-bottom:120px;background:var(--n00)}
.sortiment-innen{max-width:1560px;margin:0 auto;padding:0 44px}

/* ---------------------------------------------------------- Kopf */
.sortiment-kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;margin-bottom:46px}
.sortiment-wort{flex:1 1 auto;min-width:0}
/* Der Titel darf die volle Breite neben den Winkeln nehmen; nur der
   Fließtext bekommt eine Zeilenlänge, die sich noch lesen lässt. */
.sortiment .satz{max-width:74ch}

/* Die Winkel sind dieselbe Form wie am Aufdecker der Sections
   darüber. Fläche in N00, Kontur in N20 — ein Bedienelement, das
   versucht Marke zu sein, nähme den Teilen die Aufmerksamkeit. */
.rollen{flex:none;display:flex;gap:10px;padding-bottom:6px}
.roller{display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin:0;padding:0;border:0;border-radius:0;
  background:var(--n00);box-shadow:inset 0 0 0 1px var(--n20);
  cursor:pointer;transition:box-shadow .18s ease}
.roller svg{display:block;width:12px;height:20px;fill:none;stroke:var(--n70);
  stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;
  transition:stroke .18s ease}
.roller:hover{box-shadow:inset 0 0 0 1px var(--teal-d)}
.roller:hover svg{stroke:var(--teal-d)}
.roller:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--teal-d)}
.roller[disabled]{cursor:default;box-shadow:inset 0 0 0 1px var(--n10)}
.roller[disabled] svg{stroke:var(--n30)}

/* ---------------------------------------------------------- Schiene
   Nativer Scroll, Rasterung auf Kartenkanten, damit nie eine
   halbe Karte stehen bleibt. Die Spaltenzahl steht in einer
   Variablen — die Kartenbreite rechnet sich daraus, nicht
   umgekehrt. */
.schiene{display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
  /* NUR Spaltenabstand: die Karten stehen im Untergitter, jede
     Textzeile ist eine eigene Rasterzeile. Ein gap würde denselben
     Wert auch zwischen Preis und Steuerhinweis legen — die Abstände
     innerhalb der Karte gehören den Zeilen selbst. */
  column-gap:var(--luecke);row-gap:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* Platz für die Kontur der Karten: `overflow-x:auto` schneidet alles
     ab, was über den Inhalt hinausragt — und die Kontur liegt außen.
     Ohne diesen Innenabstand fehlte sie oben und unten an jeder Karte
     und seitlich an der ersten und letzten. Der negative Rand hält die
     Schiene dabei an ihrer Flucht. */
  padding:3px;margin:0 -3px;scroll-padding-inline:3px;
  /* die eigene Rollleiste bleibt aus: die Laufleiste darunter ist
     die Anzeige, zwei übereinander wären ein Widerspruch */
  scrollbar-width:none}
.schiene::-webkit-scrollbar{display:none}
.schiene:focus-visible{outline:2px solid var(--teal-d);outline-offset:6px}

/* ---------------------------------------------------------- Karte
   Die Karte trägt dieselben Bauteile wie der Rest dieser Seite:
   die Kontur des Auswahlrahmens aus der Einstiegsleiste, dieselbe
   minimale Rundung, und den gescherten Teal-Knopf, der oben im
   Hero und unten in den Sections steht.

   Zustand wie bei der Fahrzeugauswahl: in Ruhe eine 1 px starke
   Kontur in N40, beim Zeigen schließt sie sich auf 2 px in Teal —
   „noch nicht gewählt" gegen „entschieden".

   Das Bildfeld sitzt bündig oben in der Karte, in N05, damit das
   Teil auf einer eigenen Fläche steht und nicht auf demselben
   Weiß wie der Text darunter. */
.teil{position:relative;scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;
  padding-bottom:26px;background:var(--n00);
  border-radius:var(--rundung);overflow:hidden;
  /* Die Kontur liegt AUSSEN, nicht als inset: innen läge sie unter dem
     Bildfeld, das bündig an drei Kanten anstößt — links, rechts und oben
     wäre von der Linie nichts zu sehen, und die Karte hinge unten an
     einem Strich. Außen umschließt sie auch das Bild. */
  box-shadow:0 0 0 1px var(--n20);
  transition:box-shadow .18s ease}
.teil > *:not(.teil-feld){padding-left:18px;padding-right:18px}
.teil:hover,.teil:focus-within{box-shadow:0 0 0 2px var(--teal)}

/* Alle Karten teilen sich dieselben sieben Zeilen.

   Ohne das hängt die Höhe jeder Zeile am Text der einzelnen
   Karte: ein Name, der zweizeilig umbricht, schiebt den Preis
   der Karte nach unten, und ein Artikel ohne Vergleichspreis
   stellt seinen Knopf auf eine andere Höhe als der Nachbar.
   In einem Raster, in dem verglichen werden soll, ist genau das
   der Fehler — verglichen wird über die Zeile, nicht über die
   Karte. Deshalb liegen die Zeilen im Raster der Schiene, und
   jede Karte reicht ihre sieben Kinder als Untergitter hinein.
   Wo Untergitter fehlt, bleibt es beim Stapel darüber. */
@supports (grid-template-rows: subgrid){
  .schiene{grid-template-rows:repeat(7, auto)}
  /* nur in der Schiene: im umbrechenden Raster der Kategorieseite
     gibt es keine durchgehenden Zeilen, in die sich ein Untergitter
     einhängen könnte — dort richtet die Karte sich selbst aus. */
  .schiene .teil{display:grid;grid-row:1 / -1;grid-template-rows:subgrid}
}

/* ---------------------------------------------------------- Bildfeld
   Der Grund ist derselbe wie der der Seite: die Teile sind freigestellt
   fotografiert, und eine graue Fläche darunter setzt einen Kasten um
   ein Bild, das gar keinen Rand hat. Die Karte grenzt sich über ihre
   Kontur ab, nicht über einen Farbwechsel in der Mitte. */
/* Quadratisch, weil ALLE Produktfotos quadratisch vorliegen. Im 4:3-Feld
   stand das Bild 240 px hoch in 320 px Breite — 80 px Weiss neben jedem
   Teil, ein Viertel der Kartenbreite. Probeweise am 28.08.2026 auf 1:1
   gestellt. */
.teil-feld{position:relative;aspect-ratio:1/1;background:var(--n00)}
.teil-feld img{width:100%;height:100%;object-fit:contain}

/* Das Rabatt-Kennzeichen ist eine Wabe — das liegende Sechseck des
   Signets, flache Ober- und Unterkante, Spitzen links und rechts.

   Die Flanken müssen die 60° des Signets treffen, und die stecken
   im Seitenverhältnis: der waagerechte Weg einer Flanke ist
   Höhe / (2·tan 60°) = Höhe / 3,4641. Bei 54 px Höhe sind das
   15,59 px je Seite. Damit die Ecken in Prozent stehen können —
   und der Winkel beim Verkleinern erhalten bleibt — ist die Breite
   über aspect-ratio an die Höhe gekoppelt (88 / 54). 15,59 / 88
   ergibt die 17,72 % der beiden oberen Ecken.

   Rot mit weißer Schrift, 5,65:1 (Kapitel 04). */
.merk{position:absolute;left:14px;top:14px;z-index:1;
  display:flex;align-items:center;justify-content:center;
  height:34px;aspect-ratio:88 / 54;
  clip-path:polygon(17.72% 0, 82.28% 0, 100% 50%,
                    82.28% 100%, 17.72% 100%, 0 50%);
  background:var(--rot);color:var(--n00);
  font:600 11px/1 Archivo,sans-serif;letter-spacing:.01em}

/* ---------------------------------------------------------- Text */
.teil-passt{margin:26px 0 0;
  font:500 11px/1.45 'IBM Plex Mono',monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--n50)}

.teil-name{margin:8px 0 0;
  font:600 17px/1.3 Archivo,sans-serif;font-stretch:106%;
  letter-spacing:-.012em;color:var(--n90)}
.teil-name a{color:inherit;text-decoration:none;transition:color .18s ease}
.teil-name a:hover{color:var(--teal-d)}
.teil-name a:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px}

/* ---------------------------------------------------------- Preis
   Preisangabenverordnung: der Gesamtpreis, der Hinweis auf die
   enthaltene Umsatzsteuer und der auf die zusätzlichen Versand-
   kosten stehen an JEDEM Preis, nicht nur in einer Fußzeile.
   Der durchgestrichene Wert ist der niedrigste Gesamtpreis der
   letzten 30 Tage (§ 11 PAngV); was er bedeutet, sagt die
   Fußzeile unter der Schiene. */
.euro{margin:26px 0 0;font:600 20px/1.2 Archivo,sans-serif;
  font-stretch:104%;letter-spacing:-.01em;color:var(--n90)}
.euro s{margin-left:10px;font:400 13px/1 Archivo,sans-serif;
  font-stretch:100%;letter-spacing:0;color:var(--n50);
  text-decoration-thickness:1px}
.abgaben{margin:8px 0 0;font:400 12px/1.5 Archivo,sans-serif;color:var(--n50)}
.abgaben a{color:var(--n50);
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.abgaben a:hover{color:var(--teal-d)}
.abgaben a:focus-visible{outline:2px solid var(--teal-d);outline-offset:2px}

/* Keine Lagerware und deshalb kein Grün: die Teile werden vom
   Kunden eingeschickt und veredelt. Was hier steht, ist eine
   Wartezeit — das ist in Kapitel 04 das Amber, nicht die
   Bestätigung. */
.teil-frist{margin:26px 0 0;
  font:400 12px/1.5 'IBM Plex Mono',monospace;letter-spacing:.01em;color:var(--n60)}
.teil-frist b{font-weight:500;color:var(--amber)}
/* Lagerware sagt etwas anderes als eine Wartezeit: „auf Lager" ist die
   Bestätigung (Grün), „auf Bestellung" eine Wartezeit (Amber), „nicht
   lieferbar" ein Hindernis (Rot) — Kapitel 04. */
.teil-frist.is-da b{color:var(--gruen)}
.teil-frist.is-bestellung b{color:var(--amber)}
.teil-frist.is-weg b{color:var(--rot)}
/* Bleibt die Zeile leer, hält sie nur noch den Platz — ohne eigene Höhe,
   damit eine Liste ganz ohne solche Angaben nicht auseinanderfällt. */
.teil-passt:empty,.teil-frist:empty{margin:0}

/* Derselbe Knopf wie im Hero und in den Sections, nur kleiner.
   Den seitlichen Einzug der Karte trägt hier der Rand: der Knopf
   setzt sein padding auf 0 (die Fläche soll über die ganze Zeile
   laufen) und hebelt damit den Einzug aus .teil > * aus. */
.teil-korb{margin:26px 18px 0;height:46px;padding:0;font-size:14px}

/* ---------------------------------------------------------- Knopf, zweitrangig
   Dieselbe Form und dieselbe Bewegung wie der Teal-Knopf, nur
   leiser: durchsichtige Fläche mit einer Kontur in N90. Er steht
   dort, wo eine Handlung angeboten wird, die nicht die Haupt-
   handlung der Section ist.

   Gewischt wird wieder EIN Verlauf auf EINER Fläche — hier von
   durchsichtig auf N90 — damit an der Kante nichts mischt. Die
   Kontur liegt als inset-Schatten auf derselben Fläche und wandert
   deshalb nicht mit.
   ---------------------------------------------------------- */
.zweitrangig{color:var(--n90);
  --knopf-wisch:linear-gradient(90deg,var(--n90) 0 50%,transparent 50% 100%)}
.zweitrangig::before{box-shadow:inset 0 0 0 1px var(--n90)}
.zweitrangig:hover,.zweitrangig:focus-visible{color:var(--n00)}
.zweitrangig:active{--knopf-wisch:linear-gradient(90deg,#000 0 50%,transparent 50% 100%)}
/* auf heller Fläche trägt der Fokusring die dunkle Teal-Fassung */
.zweitrangig:focus-visible::after{box-shadow:0 0 0 2px var(--teal-d)}

/* ---------------------------------------------------------- Laufleiste

   Kapitel 09 lässt genau hier eine Rundung zu: an den Enden einer
   Fortschrittslinie. Erledigter Teil in Teal, Rest in N20.
   Sie zeigt an und nimmt nichts entgegen. */
.lauf{position:relative;overflow:hidden;margin-top:34px;height:3px;
  background:var(--n20);border-radius:2px}
.lauf-stand{position:absolute;left:0;top:0;height:100%;width:25%;
  background:var(--teal);border-radius:2px;
  transition:transform .22s ease,width .22s ease}

/* ---------------------------------------------------------- Fuß */
.sortiment-fuss{display:flex;align-items:flex-start;justify-content:space-between;
  gap:40px 56px;margin-top:44px}
.kleingedrucktes{margin:0;max-width:66ch;
  font:400 13px/1.65 Archivo,sans-serif;color:var(--n50)}

/* ---------------------------------------------------------- schmaler */
@media(max-width:1280px){
  .sortiment-innen{padding:0 32px}
  .teil-name{font-size:18px}
}
@media(max-width:1000px){
  .sortiment{--spalten:3;--luecke:20px}
  .sortiment-kopf{display:block}
  .rollen{margin-top:28px;padding-bottom:0}
  .sortiment-fuss{display:block}
  .kleingedrucktes{margin-top:28px;max-width:none}
}
@media(max-width:760px){
  /* Zwei Karten im Fenster — so, wie am Telefon aus der Werkstatt
     heraus bestellt wird (Kapitel 05). Enger wird das Raster
     nicht: bei einer Karte je Fenster lässt sich nichts mehr
     vergleichen, und genau dafür sind die Freisteller da. */
  .sortiment{--spalten:2;--luecke:14px;margin-top:76px;padding-bottom:88px}
  .sortiment-innen{padding:0 22px}
  .sortiment-kopf{margin-bottom:34px}
  .teil > *:not(.teil-feld){padding-left:13px;padding-right:13px}
  .teil{padding-bottom:20px}
  .merk{left:9px;top:9px;height:29px;font-size:10px}
  .teil-passt{margin-top:20px;font-size:10.5px;letter-spacing:.05em}
  .teil-name{margin-top:7px;font-size:15px}
  .euro{margin-top:20px;font-size:18px}
  /* nebeneinander wird der Vergleichspreis in der schmalen Karte
     abgeschnitten — er rückt unter den Gesamtpreis */
  .euro s{display:block;margin:3px 0 0;font-size:12.5px}
  .abgaben{font-size:11.5px}
  .teil-frist{margin-top:20px;font-size:11px}
  .teil-korb{margin:20px 13px 0;height:42px;font-size:13px}
  .sortiment-fuss .handlung{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .roller,.roller svg,.teil-feld,.teil-name a,.lauf-stand{transition:none}
}


/* ============================================================
   MITLAUFENDER KOPF

   Aufgedeckt wird er wie alles auf dieser Seite: mit einer Kante
   in 60°, die von links durchläuft. Kein Herunterklappen und kein
   Aufblenden — beides gehört nicht zu dieser Formensprache.

   Die Kante ist ein clip-path, und bewegt wird darin genau EIN
   Wert. Damit CSS ihn überblenden kann, muss er als eigener Typ
   angemeldet sein (@property); eine gewöhnliche Variable würde
   springen. Bei 72 px Höhe läuft eine 60°-Kante 72 / tan 60° =
   41,6 px waagerecht — das ist die Breite der Schräge.

   Fällt @property aus, wird der clip-path ungültig und einfach
   verworfen: der Kopf steht dann sofort da. Deshalb liegt darunter
   zusätzlich eine gewöhnliche Blende, damit auch dieser Fall nicht
   hart umspringt.

   Er verschwindet NICHT wieder beim Weiterscrollen. Ein Kopf, der
   sich wegduckt, fehlt genau dann, wenn jemand ihn sucht.
   ============================================================ */

@property --wisch{syntax:"<length-percentage>";inherits:false;initial-value:-46px}

/* Der Wachposten steht ganz oben und nimmt keinen Platz weg. */
.kopf-wache{position:absolute;top:0;left:0;width:1px;height:1px;
  pointer-events:none}

/* Ist der mitlaufende Kopf da, tritt der Kopf über dem Bild ab —
   zwei Navigationen übereinander wären eine zu viel. Ausgeblendet
   wird nur die Innenzeile: im .kopf hängt das Megamenü. */
.kopf-innen{transition:opacity .16s ease}
body.kopf-da .kopf-innen{opacity:0;pointer-events:none}

.kopf-fest{position:fixed;z-index:30;top:0;left:0;right:0;
  background:var(--n00);box-shadow:inset 0 -1px 0 var(--n20);
  --wisch:-46px;
  clip-path:polygon(0 0, calc(var(--wisch) + 42px) 0, var(--wisch) 100%, 0 100%);
  opacity:0;pointer-events:none;
  transition:--wisch .58s cubic-bezier(.22,1,.36,1),
             opacity .2s ease}
body.kopf-da .kopf-fest{--wisch:100%;opacity:1;pointer-events:auto}

.kopf-fest-innen{max-width:1560px;margin:0 auto;padding:0 44px;height:72px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px}

.kopf-fest .markenzeichen img{width:168px}

.fest-nav{justify-self:center;display:flex;align-items:center;
  gap:clamp(14px,1.9vw,28px);font:500 15px/1 Archivo,sans-serif}
.fest-nav a{color:var(--n90);text-decoration:none;white-space:nowrap;
  transition:color .18s ease}
.fest-nav a:hover{color:var(--teal-d)}
/* Der Schalter erbt sonst die helle Fassung aus dem Kopf über dem
   Bild — hier steht er auf Weiß. */
.fest-nav .mega-schalter{color:var(--n90)}
.fest-nav .mega-schalter:hover,
.fest-nav .mega-schalter[aria-expanded="true"]{color:var(--teal-d)}

.fest-dienste{justify-self:end;display:flex;align-items:center;gap:20px}
.fest-dienste a{position:relative;display:block;color:var(--n90);text-decoration:none}
.fest-dienste a:hover{color:var(--teal-d)}
.fest-dienste svg{display:block;width:22px;height:22px;fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}

/* Der Griff im mitlaufenden Kopf steht auf Weiß, nicht auf dem
   Bild — deshalb die dunkle Fassung. Er erscheint erst, wenn die
   Navigation daneben verschwindet. */
.kopf-fest .menue{display:none;order:9;margin:0;padding:4px 0;border:0;
  background:none;cursor:pointer;color:var(--n90)}
.kopf-fest .menue:hover{color:var(--teal-d)}

.kopf-fest a:focus-visible,.kopf-fest .menue:focus-visible,
.kopf-fest .mega-schalter:focus-visible{
  outline:2px solid var(--teal-d);outline-offset:4px}

/* Das Megamenü hängt am Kopf über dem Bild und liegt dort absolut
   unter ihm. Ist der mitlaufende Kopf im Bild, gehört es unter DEN
   — sonst klappt es weit oberhalb des Fensters auf. */
body.kopf-da .mega{position:fixed;top:72px;left:0;right:0}
.fest-handlung:focus-visible{outline:none}

@media(max-width:1180px){
  .kopf-fest-innen{padding:0 32px;height:66px;grid-template-columns:auto 1fr;gap:20px}
  .fest-nav{display:none}
  .kopf-fest .menue{display:block}
  .kopf-fest .markenzeichen img{width:146px}
}
@media(max-width:760px){
  .kopf-fest-innen{padding:0 22px;height:60px}
  .fest-dienste{gap:16px}
  .fest-handlung{height:40px;padding:0 16px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .kopf-fest{transition:opacity .2s ease;clip-path:none}
}


/* ============================================================
   STIMMEN — Google-Rezensionen

   Die Zitate stehen auf N05-Feldern, derselben Fläche, auf der im
   Sortiment die Teile stehen. Kein Rahmen, kein Schatten und kein
   Anführungszeichen als Zierat — das Zitat ist schon durch die
   Fläche als eigener Block erkennbar.

   Die Sterne sind die einzige Stelle der Seite, an der Amber als
   Fläche vorkommt (Kapitel 04). Sie tragen eine Aussage; deshalb
   dürfen sie hier stehen, wo sonst kein Symbol steht.
   ============================================================ */

.stimmen{padding:0 0 118px;background:var(--n00)}
.stimmen-innen{max-width:1560px;margin:0 auto;padding:0 44px}

.stimmen-kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px 56px;margin-bottom:44px}
.stimmen-mehr{flex:none;height:50px;font-size:14px}

.stimmen-liste{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stimme{display:flex;flex-direction:column;
  padding:30px 30px 28px;background:var(--n05)}

.sterne{margin:0;display:flex;gap:3px}
.stern{display:block;width:15px;height:15px;fill:#F0B429}

.stimme blockquote{margin:20px 0 0;
  font:400 16px/1.62 Archivo,sans-serif;color:var(--n70)}

.stimme-wer{margin:24px 0 0;padding-top:18px;
  border-top:1px solid var(--n20);
  font:500 14px/1.4 Archivo,sans-serif;color:var(--n90)}
.stimme-wer span{display:block;margin-top:5px;
  font:400 12px/1.5 'IBM Plex Mono',monospace;color:var(--n50)}
.stimmen-pruefung{margin:26px 0 0;max-width:72ch;
  font:400 13px/1.55 Archivo,sans-serif;color:var(--n50)}
.stimmen-pruefung a{color:var(--n70);text-decoration:underline;
  text-decoration-color:var(--n30);text-underline-offset:3px}
.stimmen-pruefung a:hover{color:var(--teal-d);text-decoration-color:currentColor}

@media(max-width:1280px){
  .stimmen-innen{padding:0 32px}
}
@media(max-width:1000px){
  .stimmen-kopf{display:block}
  .stimmen-mehr{margin-top:26px}
  .stimmen-liste{grid-template-columns:1fr;gap:16px}
  .stimme{padding:26px 24px 24px}
}
@media(max-width:760px){
  .stimmen{padding-bottom:84px}
  .stimmen-innen{padding:0 22px}
  .stimmen-mehr{width:100%}
}


/* ============================================================
   WhatsApp — ständig erreichbarer Kurzweg

   Wabe wie im Fuß, aber im Grün von WhatsApp. Das ist bewusst
   KEIN Ton dieser Marke: das Zeichen wird über seine Farbe
   erkannt, ein Teal-Sechseck liest niemand als WhatsApp.

   Sie liegt fest unten rechts, wo der Daumen ist. Über dem Fuß
   verschwindet sie — dort steht dieselbe Verbindung ohnehin
   ausgeschrieben, und zwei Wege nebeneinander verwirren nur.
   ============================================================ */

.wa-schnell{position:fixed;z-index:40;right:26px;bottom:26px;
  display:flex;align-items:center;justify-content:center;
  /* Gleichseitiges Sechseck wie die Bildwaben: bei Seitenlänge s ist
     die Breite 2s und die Höhe s·√3 — Verhältnis 2 : 1,7320508. Die
     Flanken laufen dann über je ein Viertel der Breite, deshalb die
     25 % in den oberen Ecken. Der Winkel bleibt derselbe wie bei den
     gestreckten Waben, nur sind hier alle sechs Kanten gleich lang. */
  height:56px;aspect-ratio:2 / 1.7320508;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background:#25D366;color:#0B2E18;
  transition:background-color .18s ease,opacity .25s ease,visibility .25s}
.wa-schnell svg{display:block;width:29px;height:29px;fill:currentColor}
.wa-schnell:hover{background:#1FB755}
.wa-schnell:focus-visible{outline:none;background:var(--n90);color:#25D366}

/* Sobald der Fuß im Bild steht, blendet sich die Wabe aus. Der
   Umschalter kommt aus dem Beobachter unten auf der Seite. */
.fuss-im-bild .wa-schnell{opacity:0;visibility:hidden;pointer-events:none}

@media(max-width:760px){
  .wa-schnell{right:16px;bottom:16px;height:50px}
  .wa-schnell svg{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){
  .wa-schnell{transition:none}
}


/* ============================================================
   VORTEILE — die Leiste vor dem Fuß

   Vier Zusagen nebeneinander, ohne Symbole. Getrennt wird nicht
   mit einer senkrechten Linie, sondern mit der Schräge der Seite:
   ein 1 px breiter Strich, um 30° aus dem Lot geschert, steht
   damit in denselben 60° wie die Sectionkante, der Knopf und die
   Flanken des Signets.

   Waagerecht ist die Trennung dagegen gerade — eine gescherte
   Linie quer über die volle Spaltenbreite liefe aus dem Feld
   heraus, und der Winkel ist hier fest, nicht dehnbar.
   ============================================================ */

.vorteile{background:var(--n05)}
/* So viele Spalten, wie es Punkte gibt — die Zahl kommt aus dem Template
   (`--punkte`). Mit fest vier Spalten stand die Leiste bei drei Punkten
   links gedrängt und rechts klaffte ein Viertel der Breite. */
.vorteile-innen{max-width:1560px;margin:0 auto;padding:0 44px;
  list-style:none;display:grid;
  grid-template-columns:repeat(var(--punkte,4),minmax(0,1fr))}

.vorteile li{position:relative;padding:52px 44px 54px}
.vorteile li:first-child{padding-left:0}
.vorteile li:last-child{padding-right:0}

.vorteile li + li::before{content:"";position:absolute;left:0;
  top:30px;bottom:30px;width:1px;background:var(--n20);
  transform:skewX(-30deg)}

.vorteile b{display:block;
  font:600 clamp(18px,1.4vw,22px)/1.25 Archivo,sans-serif;
  font-stretch:106%;letter-spacing:-.015em;color:var(--n90)}
.vorteile span{display:block;margin-top:8px;
  font:400 13px/1.5 'IBM Plex Mono',monospace;letter-spacing:.01em;
  color:var(--n50)}

@media(max-width:1280px){
  .vorteile-innen{padding:0 32px}
  .vorteile li{padding:46px 32px 48px}
}
@media(max-width:900px){
  /* zwei mal zwei: senkrecht bleibt die Schräge, waagerecht
     trennt eine gerade Linie */
  .vorteile-innen{padding:0 22px;grid-template-columns:1fr 1fr}
  .vorteile li{padding:30px 24px 32px}
  .vorteile li:nth-child(odd){padding-left:0}
  .vorteile li:nth-child(even){padding-right:0}
  .vorteile li:nth-child(n)::before{display:none}
  .vorteile li:nth-child(even)::before{display:block;top:24px;bottom:24px}
  .vorteile li:nth-child(n+3){border-top:1px solid var(--n20)}
}
@media(max-width:480px){
  .vorteile-innen{grid-template-columns:1fr}
  .vorteile li{padding:24px 0 26px}
  .vorteile li:nth-child(odd),.vorteile li:nth-child(even){padding:24px 0 26px}
  /* einspaltig gibt es nichts nebeneinander zu trennen — die
     Schräge muss weg, sonst steht sie im Text. Gleiche
     Spezifität wie die Regel darüber, deshalb :nth-child(n). */
  .vorteile li:nth-child(n)::before{display:none}
  .vorteile li + li{border-top:1px solid var(--n20)}
}

/* ============================================================
   FUSS

   Werkstatt-Fläche in N90 — die zweite und letzte dunkle Fläche
   der Seite. Der Kopf öffnet sie, der Fuß schließt sie.

   Das Adressfeld ist der Hauptdarsteller, nicht die Navigation:
   das Geschäft besteht darin, dass jemand sein Teil einschickt.
   Es liegt auf einer eigenen, eine Spur helleren Fläche (#1A1A1A
   aus der Palette) und trägt die einzige Schräge des Fußes — die
   senkrechte 60°-Kante der Sections, mit demselben Kopfstück
   oben, damit sie nicht in eine spitze Ecke ausläuft.

   (260 − 38) / tan 60° = 128 px Versatz.
   ============================================================ */

.fuss{background:var(--n90);color:var(--d-text);
  font:400 15px/1.6 Archivo,sans-serif}
.fuss-innen{max-width:1560px;margin:0 auto;padding:78px 44px 66px;
  display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1.35fr);
  gap:64px}

/* ---------------------------------------------------------- Adressfeld */
.fuss-adresse{position:relative;align-self:start;
  min-height:252px;padding:32px 36px 34px 156px;
  background:#1A1A1A;
  clip-path:polygon(124px 0, 100% 0, 100% 100%, 0 100%, 124px 38px)}

.fuss-lab{margin:0;
  font:500 12px/1 Archivo,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-l)}

/* Die lange Firmierung steht klein über der Anschrift: sie gehört
   auf das Paket, bricht in der Mono aber über zwei Zeilen und
   würde die Adresse darunter erschlagen. */
.firmierung{margin:20px 0 0;
  font:400 13px/1.5 'IBM Plex Mono',monospace;color:var(--d-sek)}
.anschrift{margin:8px 0 0;
  font:500 21px/1.6 'IBM Plex Mono',monospace;letter-spacing:.01em;
  color:var(--n00)}

.fuss-beilage{margin:24px 0 0;padding-top:20px;
  border-top:1px solid rgba(242,244,244,.14);
  max-width:44ch;font-size:14px;color:var(--d-sek)}

/* ---------------------------------------------------------- Spalten */
/* Vier Spalten: Carbon, Service, Über uns, Kontakt. Zwischen 1080 und
   1400 px teilt sich der Fuß noch mit dem Adressfeld — dort reicht die
   Breite nur für zwei mal zwei. Darunter steht er allein und hat wieder
   Platz für alle vier nebeneinander. */
.fuss-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px;
  padding-top:6px}
@media(max-width:1400px) and (min-width:1081px){
  .fuss-spalten{grid-template-columns:1fr 1fr;gap:36px 28px}
}
.fuss-spalte h2{margin:0 0 18px;
  font:500 12px/1 Archivo,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-sek)}
.fuss-spalte ul{margin:0;padding:0;list-style:none}
.fuss-spalte li + li{margin-top:11px}
.fuss-spalte a{color:var(--d-text);text-decoration:none;
  transition:color .18s ease}
.fuss-spalte a:hover{color:var(--teal-l)}

/* Die Zeichen sitzen in Waben — dasselbe liegende Sechseck wie
   das Rabatt-Kennzeichen auf den Karten, nur kleiner und in der
   Fassung für die dunkle Fläche.

   Der Winkel steckt wieder im Seitenverhältnis: der waagerechte
   Weg einer Flanke ist Höhe / (2·tan 60°). Bei 88 / 54 liegen die
   oberen Ecken deshalb bei 17,72 % — dieselben Werte wie bei der
   Kennzeichnung, damit beide Waben derselben Form folgen. */
.fuss-folgen{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 7px}
.wabe-zeichen{display:flex;align-items:center;justify-content:center;
  height:34px;aspect-ratio:88 / 54;flex:none;
  clip-path:polygon(17.72% 0, 82.28% 0, 100% 50%,
                    82.28% 100%, 17.72% 100%, 0 50%);
  background:#242424;color:var(--d-text);
  transition:background-color .18s ease,color .18s ease}
.wabe-zeichen svg{display:block;width:18px;height:18px;fill:currentColor}
.wabe-zeichen:hover{background:var(--teal);color:#000}
/* die Wabe ist beschnitten — ein Ring außen wäre weg. Der Fokus
   wechselt deshalb die Fläche, wie beim Zeigen, nur in Teal Leucht. */
.wabe-zeichen:focus-visible{outline:none;background:var(--teal-l);color:#000}

/* Nummer, Zeiten, Versprechen — in dieser Reihenfolge. Wer hier
   liest, will zuerst wissen, ob überhaupt jemand rangeht. */
.fuss-hotline{margin:26px 0 0;padding-top:18px;
  border-top:1px solid rgba(242,244,244,.14);
  font:400 13px/1.55 Archivo,sans-serif;color:var(--d-sek)}
.fuss-hotline a{display:block;
  font:400 17px/1.4 'IBM Plex Mono',monospace;letter-spacing:.01em;
  color:var(--n00);text-decoration:none;transition:color .18s ease}
.fuss-hotline a:hover{color:var(--teal-l)}
.fuss-hotline b{display:block;margin:5px 0 7px;
  font:500 13px/1.4 Archivo,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-l)}

/* ---------------------------------------------------------- Boden */
.fuss-boden{border-top:1px solid rgba(242,244,244,.14)}
.fuss-boden-innen{max-width:1560px;margin:0 auto;padding:26px 44px 34px;
  display:flex;align-items:center;flex-wrap:wrap;gap:18px 36px}
.fuss-zeichen{flex:none;display:block}
.fuss-zeichen img{display:block;width:152px;height:auto}
.fuss-firma{flex:1 1 340px;margin:0;
  font:400 12.5px/1.6 Archivo,sans-serif;color:var(--d-sek)}
/* `flex:none` stand hier bis zum 2026-08-27 und ging auf, solange die Liste
   vier Punkte hatte: der Kasten schrumpfte nicht, brauchte es aber auch nicht.
   Mit dem fünften („Bewertungen") war die Zeile am Handy breiter als der
   Bildschirm — und weil ein nicht schrumpfender Flex-Kasten seine Kinder gar
   nicht erst umbrechen lässt, half das vorhandene `flex-wrap` nichts. Die
   ganze SEITE lief quer, nicht nur der Fuß.

   `0 1 auto` + `min-width:0` heißt: wachsen nicht, schrumpfen ja. Damit greift
   der Umbruch, und ein sechster Punkt bricht nichts mehr. */
.fuss-recht{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:8px 24px;
  margin:0;padding:0;list-style:none;
  font:400 12.5px/1 Archivo,sans-serif}
.fuss-recht a{color:var(--d-sek);text-decoration:none;transition:color .18s ease}
.fuss-recht a:hover{color:var(--teal-l)}

.fuss a:not(.wabe-zeichen):focus-visible{outline:2px solid var(--teal-l);outline-offset:3px}

/* ---------------------------------------------------------- Knopf auf Dunkel
   Der zweitrangige Knopf, gespiegelt für die Werkstatt-Fläche:
   Kontur und Schrift hell, beim Zeigen füllt dieselbe Bewegung
   die Fläche hell auf und die Schrift wird dunkel. */
.auf-dunkel{color:var(--d-text);
  --knopf-wisch:linear-gradient(90deg,var(--d-text) 0 50%,transparent 50% 100%)}
.auf-dunkel::before{box-shadow:inset 0 0 0 1px rgba(242,244,244,.55)}
.auf-dunkel:hover,.auf-dunkel:focus-visible{color:var(--n90)}
.auf-dunkel:active{--knopf-wisch:linear-gradient(90deg,var(--n00) 0 50%,transparent 50% 100%)}
.auf-dunkel:focus-visible::after{box-shadow:0 0 0 2px var(--teal-l)}
.auf-dunkel:focus-visible{outline:none}

/* Die Widerrufs-Schaltfläche muss hervorgehoben sein, darf aber
   nicht wie die Haupthandlung der Seite aussehen — sie ist kein
   Angebot. Deshalb dieselbe Form, hell umrandet statt Teal. */
.fuss-widerruf{flex:none;height:44px;margin:0;font-size:13.5px}
/* Urheberzeile, bewusst leise: kleiner als die Rechtslinks, gleiche Farbe wie
   der Nebentext, erst beim Zeigen in Teal. */
.fuss-credit{display:block;margin-top:2px;font-size:11.5px;color:var(--d-sek);opacity:.75}
.fuss-credit a{color:inherit;text-decoration:none;transition:color .18s ease}
.fuss-credit a:hover,.fuss-credit a:focus-visible{color:var(--teal-l)}

/* ---------------------------------------------------------- schmaler */
@media(max-width:1280px){
  .fuss-innen{padding:66px 32px 56px;gap:48px}
  
  .fuss-boden-innen{padding:24px 32px 30px}
}
@media(max-width:1080px){
  .fuss-innen{grid-template-columns:1fr;gap:46px}
  .fuss-adresse{max-width:560px}
}
/* Unter 1000 px entfällt die Schräge — wie in den Sections. Ohne
   sie braucht das Feld auch den linken Vorlauf nicht mehr. */
@media(max-width:1000px){
  .fuss-adresse{clip-path:none;min-height:0;padding:30px 28px 32px;
    border-left:3px solid var(--teal)}
  .fuss-spalten{gap:34px 28px}
}
@media(max-width:760px){
  .fuss-innen{padding:52px 22px 44px}
  .fuss-spalten{grid-template-columns:1fr 1fr;gap:32px 22px}
  .fuss-spalte:last-child{grid-column:1 / -1}
  .anschrift{font-size:17px}
  .fuss-boden-innen{padding:22px 22px 28px;gap:16px 22px}
}

/* ══════════════════════════════════════════════════════════════════
   Warenkorb-Tafel

   Dieselbe Geste wie das Mobilmenü: von rechts herein, 340 ms, mit
   Schleier darunter. Wer den Korb öffnet, hat schon gelernt, wie das
   Menü sich verhält — zwei Bewegungen für dieselbe Art Panel wären
   nur eine zweite Vokabel.
   ══════════════════════════════════════════════════════════════════ */

.korbtafel{position:fixed;z-index:70;inset:0}
.korbtafel[hidden]{display:none}

.k-schleier{position:absolute;inset:0;background:rgba(10,10,10,.5);
  opacity:0;transition:opacity .3s ease}
.korbtafel.k-offen .k-schleier{opacity:1}

.k-tafel{position:absolute;top:0;bottom:0;right:0;width:min(440px,100%);
  display:flex;flex-direction:column;background:var(--n00);
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.22,1,.36,1)}
.korbtafel.k-offen .k-tafel{transform:translateX(0)}

/* Während ein Vorgang läuft, bleibt die Tafel bedienbar, nimmt aber
   keine zweite Eingabe an — sonst zählt jemand schneller hoch, als der
   Server rechnet. */
.korbtafel.k-wartet .k-inhalt{opacity:.55;pointer-events:none}
.k-inhalt{flex:1;display:flex;flex-direction:column;min-height:0;
  transition:opacity .18s ease}

/* ---------------------------------------------------------- Kopf */
.k-kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 22px;border-bottom:1px solid var(--n20)}
.k-titel{display:flex;align-items:baseline;gap:8px;margin:0;
  font:600 17px/1 Archivo,sans-serif;color:var(--n90)}
.k-titel .k-zahl{font:400 14px/1 'IBM Plex Mono',monospace;color:var(--n50)}
.k-titel .k-zahl:empty{display:none}
.k-schliessen{margin:0;padding:6px 0;border:0;background:none;cursor:pointer;
  color:var(--n60);font:500 15px/1 Archivo,sans-serif}
.k-schliessen:hover{color:var(--n90)}

/* ---------------------------------------------------------- Positionen */
.k-liste{flex:1;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:0;list-style:none}
.k-post{display:grid;grid-template-columns:72px 1fr 24px;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--n10)}

.k-bild{display:block}
.k-bild img{display:block;width:72px;height:72px;object-fit:cover;
  border-radius:var(--rundung);background:var(--n05)}

.k-text{min-width:0}
.k-name{display:block;color:var(--n90);text-decoration:none;
  font:500 15px/1.35 Archivo,sans-serif}
.k-name:hover{color:var(--teal-d)}

/* Die Konfiguration ist bei einem veredelten Teil der halbe
   Kaufgegenstand — sie steht vollständig da, Merkmal für Merkmal, und
   nicht abgeschnitten. Das Wort davor darf klein sein, der Wert nicht:
   den muss der Kunde lesen können. */
.k-fassung{margin:8px 0 0}
.k-fassung dt{margin-top:7px;
  font:500 11.5px/1.45 Archivo,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--n40)}
.k-fassung dt:first-child{margin-top:0}
.k-fassung dd{margin:0;font:400 13.5px/1.45 Archivo,sans-serif;color:var(--n70)}

.k-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:10px}
.k-menge{display:inline-flex;align-items:center;gap:2px;
  box-shadow:inset 0 0 0 1px var(--n20);border-radius:var(--rundung)}
.k-menge button{width:28px;height:28px;margin:0;padding:0;border:0;background:none;
  cursor:pointer;color:var(--n60);font:400 16px/1 Archivo,sans-serif}
.k-menge button:hover{color:var(--n90)}
.k-menge b{min-width:22px;text-align:center;
  font:500 14px/1 'IBM Plex Mono',monospace;color:var(--n90)}
.k-stueck{font:400 13px/1 'IBM Plex Mono',monospace;color:var(--n50)}
.k-preis{font:500 15px/1 Archivo,sans-serif;color:var(--n90)}

.k-weg{width:24px;height:24px;margin:0;padding:0;border:0;background:none;
  cursor:pointer;color:var(--n40)}
.k-weg svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round}
.k-weg:hover{color:var(--rot)}

/* ---------------------------------------------------------- Fuß */
.k-fuss{padding:20px 22px 24px;border-top:1px solid var(--n20);background:var(--n05)}
.k-summe{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0;font:400 15px/1 Archivo,sans-serif;color:var(--n60)}
.k-summe b{font:600 20px/1 Archivo,sans-serif;color:var(--n90)}
.k-abgaben{margin:8px 0 18px;
  font:400 12px/1.5 Archivo,sans-serif;color:var(--n50)}
.k-abgaben a{color:inherit}
.k-fuss .handlung{width:100%}
.k-weiter{display:block;margin-top:14px;text-align:center;
  font:500 14px/1 Archivo,sans-serif;color:var(--n60)}
.k-weiter:hover{color:var(--n90)}

/* ---------------------------------------------------------- leer */
.k-leer{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;padding:40px 22px;text-align:center}
.k-leer p{margin:0;font:400 16px/1.5 Archivo,sans-serif;color:var(--n60)}

@media(max-width:520px){
  .k-tafel{width:100%}
  .k-post{grid-template-columns:60px 1fr 24px;gap:13px;padding:16px 18px}
  .k-bild img{width:60px;height:60px}
  .k-kopf,.k-fuss{padding-left:18px;padding-right:18px}
}