/* =========================================================================
   BÖRDE BAGGER, Inh. Christian Obst - Pitch-Entwurf, Fassung 4 (Rebrand)
   Guss-Verfahren "Werkbank-Weiss": jedes Motiv steht auf demselben Papier
   (#F0ECE3, gemessen aus dem gebackenen Guss), mit demselben Standschatten und
   derselben Tonwertkurve. Die Farbwelt kommt aus dem Logo und nirgendwo sonst:
   Blau #0C2280 (Wortmarke), Orange #C25F17 (Piktogramm und Linie). Kein
   neutrales Ink, kein Amber, kein zweiter Buntwert.
   Aufbau: 1 Tokens - 2 Basis - 3 Kopf - 4 Bauteile - 5 Bemassung - 6 Sektionen
           7 Anfrageliste - 8 Motion - 9 Desktop - 10 Overrides
   ========================================================================= */

/* ---------- 1 Tokens ---------- */
:root{
  --blau:#0C2280;            /* Logo-Blau, Vollton */
  --blau-tief:#0A1B63;
  --blau-nacht:#071043;
  --blau-rand:#22398F;
  --papier:#F0ECE3;          /* gemessen aus dem Bild-Guss */
  --papier-tief:#E2DCD0;
  --papier-kante:#D2CABA;
  --signal:#C25F17;          /* Logo-Orange, Flaechen und Linien */
  --signal-hell:#E8822F;     /* Orangetext auf Blau, gemessen 4,93:1 */
  --signal-tief:#9C4A0F;     /* Orangetext auf Papier, gemessen 5,24:1 */
  /* Gemessen in Runde 7: Weiss auf dem Vollton-Orange ergibt 4,25:1 und
     verfehlt 4,5:1. Ueberall dort, wo WEISSE SCHRIFT auf Orange steht
     (Masschips, gedrueckte Filter- und Tagknoepfe, Kalenderfelder, Zaehler),
     steht deshalb dieser um eine Stufe tiefere Ton derselben Farbe:
     Weiss darauf misst 5,47:1. Gleicher Farbton (25 Grad), gleiche Herkunft. */
  --signal-fest:#A95010;
  --tinte:#131A2E;           /* Text auf Papier */
  --tinte-mut:#4A5068;
  --text:#F2F3F8;            /* Text auf Blau */
  --text-mut:#B9BFD6;
  --linie:rgba(242,243,248,.18);
  --linie-stark:rgba(242,243,248,.40);
  --linie-hell:rgba(19,26,46,.20);
  --linie-hell-stark:rgba(19,26,46,.38);
  --f-d:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;/* Anzeige, am Firmenschild-FOTO gemessen (R18) */
  --f-b:"Spectral",Georgia,"Times New Roman",serif;           /* Fliesstext, aufrecht */
  --f-l:var(--f-d);                                          /* Etikett = Anzeigeschrift */
  --f-m:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  /* Runde 18 - Kanten nach Bauteilklasse. Kein Radius: eine 45-Grad-Fase ist
     am Maschinenschild echt, ein Eckradius waere die Kapitulation. */
  --fase:7px;                /* Blech- und Bedienteile */
  --fase-k:5px;              /* kleine Schilder, Chips */
  /* Abkantung: jede Vollflaeche ist ein gekantetes Blech, nicht ein Farbeimer.
     Oben faengt die Kante das Licht, unten steht sie im eigenen Schatten.
     Werte bewusst an der Wahrnehmungsschwelle - spuerbar statt sichtbar. */
  --kante-licht:rgba(214,226,255,.17);
  --kante-schatten:rgba(2,6,26,.42);
  --kante-licht-p:rgba(255,253,248,.72);
  --kante-schatten-p:rgba(122,108,84,.24);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:620ms;
  --dur-kurz:220ms;
  --rand:20px;
  --kopf-h:62px;
}

/* ---------- 2 Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  background:var(--blau)}
body{
  margin:0;background:var(--blau);color:var(--text);
  font-family:var(--f-b);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  hyphens:manual;overflow-wrap:break-word;
}
main{display:block;overflow-x:clip}
footer{overflow-x:clip}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:700;letter-spacing:-.024em;line-height:1.02;
  margin:0;word-break:keep-all;text-wrap:pretty}
h1{font-size:clamp(2.05rem,8.4vw,3.1rem)}
h2{font-size:clamp(1.66rem,6.4vw,2.35rem)}
h3{font-size:1.12rem;letter-spacing:-.014em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
img,svg{display:block}
img{max-width:100%;height:auto}
picture{display:contents}
/* Ohne das gewinnt jede eigene display-Regel gegen das UA-`display:none`
   von [hidden] - gemessen in Runde 16 am Zuruecksetzen-Knopf der Torprobe. */
[hidden]{display:none !important}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--signal-hell);outline-offset:2px}
.hell :focus-visible,.papierfeld :focus-visible{outline-color:var(--signal-tief)}
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.springlink{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;left:8px;top:8px}
.springlink:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
  z-index:99;background:var(--signal-fest);color:#fff;padding:10px 14px}

.mono{font-family:var(--f-m);font-size:.7rem;letter-spacing:.06em;font-weight:400;
  font-variant-numeric:tabular-nums}
.zahl{font-family:var(--f-m);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Sektionsmarke in der Display-Schrift mit Orangeriegel, kein Mono-Versal-Kicker */
.marke-z{font-family:var(--f-d);font-weight:700;font-size:.86rem;letter-spacing:.005em;
  color:var(--text-mut);display:flex;align-items:center;gap:11px;margin:0 0 14px}
.marke-z::before{content:"";width:26px;height:3px;background:var(--signal-hell);flex:0 0 auto}
.hell .marke-z,.papierfeld .marke-z{color:var(--tinte-mut)}
.hell .marke-z::before,.papierfeld .marke-z::before{background:var(--signal)}

.bahn{padding-left:var(--rand);padding-right:var(--rand);max-width:1360px;margin:0 auto}

/* MATERIAL (Runde 18) statt blosser Koernung.
   Der Inhaber las die Flaechen als "Markenfarbe als Farbeimer". Die Antwort
   steckt im Artefakt selbst: das Firmenschild ist eine BEDRUCKTE PLANE, und
   ihre Oberflaeche ist ein feines, regelmaessiges senkrechtes Linienraster
   (in assets/eingang/boerde/bagger-01.jpg bei dreifacher Vergroesserung als
   stehendes Streifenbild sichtbar, Periode rund drei Pixel). Genau dieses
   Raster tragen jetzt alle Flaechen - dieselbe Struktur auf Blau wie auf
   Papier, weil es dieselbe bedruckte Plane ist.
     Lage 1  LINIENRASTER, senkrecht, Periode 3 px, weiche Flanken (kein harter
             Stufenwechsel - das vermeidet Moire auf krummen Pixelverhaeltnissen).
     Lage 2  KORN, fein und richtungslos, damit das Raster nicht digital wirkt.
   Das Material sitzt als HINTERGRUNDLAGE der Flaeche selbst, nicht als
   Pseudoelement darueber: zwei Sektionen dieser Seite kreuzen sich absichtlich
   (.ohne-unten + .nach-kreuzung ueberlappen um 62 px). Eine Overlay-Lage haette
   sich dort verdoppelt und als hellerer Streifen ueber die volle Breite
   gestanden - im ersten Bau dieser Runde gemessen und gesehen. Als
   Hintergrundlage deckt die obere Flaeche die untere einfach ab.
   background-blend-mode mischt die Lagen in die Flaechenfarbe hinein, der
   Farbwert selbst bleibt ueber die ganze Flaeche derselbe: Material, kein Verlauf. */
.koernung{position:relative;isolation:isolate}

/* ---------- 3 Kopf ----------
   Eine Leiste, keine gestapelten Utility-Baender. Der Kopf ist blau wie die
   Wortmarke, die Markenzelle steht in Papier und tritt 14 px unter die Leiste;
   die Orangelinie des Logos laeuft als Unterkante mit und macht die Stufe
   sichtbar. Das ist die Kopfform, nicht ein aufgesetzter Logo-Kasten. */
.kopf{position:sticky;top:0;z-index:40;background:var(--blau);
  border-bottom:3px solid var(--signal)}
.kopf__reihe{display:flex;align-items:stretch;min-height:var(--kopf-h);position:relative}
/* flex:0 1 auto, NICHT 1 1 auto: die Papierplakette darf schrumpfen, aber nie
   wachsen. Mit 1 1 auto dehnte sie sich zwischen 600 und 880 px auf bis zu
   743 px und stand zu vier Fuenfteln leer. */
.wortmarke{display:flex;align-items:center;gap:10px;background:var(--papier);
  color:var(--blau);text-decoration:none;padding:8px 14px 9px;position:relative;
  flex:0 1 auto;min-width:0;margin-bottom:-14px;z-index:3;
  border-bottom:3px solid var(--signal);
  box-shadow:0 16px 30px -22px rgba(7,16,67,.8)}
.wortmarke__zeichen{width:38px;height:29px;flex:0 0 auto}
.wortmarke__text{min-width:0}
.wortmarke b{font-family:var(--f-d);font-weight:700;font-size:1.02rem;letter-spacing:-.028em;
  line-height:1;display:block;color:var(--blau)}
.wortmarke b i{font-style:normal;display:inline}
.wortmarke b i::before{content:" "}
.wortmarke__text>span{font-family:var(--f-l);font-size:.62rem;font-weight:600;
  letter-spacing:.005em;color:var(--signal-tief);display:block;margin-top:3px}
.kopf__kennfeld{display:flex;align-items:stretch;margin-left:auto;flex:0 0 auto}
.kopf-tel{display:none}
.kopf-liste{display:flex;align-items:center;gap:8px;padding:0 12px;
  border:0;border-left:1px solid var(--linie);background:transparent;cursor:pointer;
  font-family:var(--f-d);font-weight:700;font-size:.78rem;letter-spacing:.01em;
  color:var(--text);min-height:44px;min-width:44px;justify-content:center}
.kopf-liste .anz{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 5px;background:var(--blau-rand);color:var(--text);
  font-family:var(--f-m);font-size:.68rem}
.kopf-liste.hat .anz{background:var(--signal-fest);color:#fff}
.zug{display:flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-left:1px solid var(--linie);background:transparent;cursor:pointer;
  padding:0 16px;min-height:44px;min-width:52px;color:var(--text)}
.zug i{display:block;width:20px;height:11px;position:relative;flex:0 0 auto}
.zug i::before,.zug i::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:var(--text);transition:transform var(--dur-kurz) var(--ease)}
.zug i::before{top:0}.zug i::after{bottom:0}
.zug[aria-expanded="true"] i::before{transform:translateY(4.5px) rotate(21deg)}
.zug[aria-expanded="true"] i::after{transform:translateY(-4.5px) rotate(-21deg)}
.kopf__index{display:none}

.menu{position:fixed;inset:0;z-index:60;display:none}
.menu[data-offen="true"]{display:block}
.menu__grund{position:absolute;inset:0;z-index:1;background:rgba(5,10,40,.74);border:0;
  width:100%;padding:0;cursor:pointer}
.menu__blatt{position:absolute;z-index:2;inset:0;background:var(--blau);
  overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--kopf-h) + 26px) var(--rand) 34px;
  -webkit-overflow-scrolling:touch;border-top:3px solid var(--signal)}
.menu a{display:flex;align-items:baseline;gap:14px;text-decoration:none;
  padding:14px 0;border-bottom:1px solid var(--linie);min-height:48px}
.menu a b{font-family:var(--f-d);font-weight:700;font-size:1.36rem;letter-spacing:-.02em}
.menu a[aria-current="page"] b{color:var(--signal-hell)}
.menu__fuss{margin-top:28px;display:grid;gap:14px}

/* ---------- 4 Bauteile ----------
   RUNDE 18 - EINE Geste, zwei Bauweisen.
   Bis Runde 17 trug der Hauptknopf den versetzten Hartschatten (ein zweites
   Rechteck dahinter) - der Template-Klassiker schlechthin - und daneben standen
   ein Rahmen- und ein Unterstrich-Knopf: drei Gesten fuer dieselbe Aufgabe.
   Jetzt gibt es EINE Form, das gekantete Bedienschild: an zwei gegenueber-
   liegenden Ecken auf 45 Grad gefast wie ein Typenschild, mit einem orangen
   Anschlag an der Fuehrungskante (dieselbe Grammatik wie die Masslinien).
   Die beiden Bauweisen unterscheiden sich nicht in der FUELLUNG, sondern darin,
   wie das Schild in der Flaeche sitzt:
     .schild          ERHABEN  - lackiertes Schild, Licht auf der Oberkante,
                                 Schatten unter der Unterkante.
     .schild--rahmen  EINGELASSEN - dieselbe Fase, in die Flaeche versenkt:
                                 Schatten oben, Lichtkante unten. Ein Bedienteil,
                                 das eingelassen ist, nicht ein leerer Rahmen.
   Gedrueckt wird das erhabene Schild wirklich hineingedrueckt (Licht kippt),
   statt dass ein Schlagschatten kleiner wird. */
.schild{display:inline-flex;align-items:center;gap:10px;background:var(--papier);
  color:var(--blau);font-family:var(--f-d);font-weight:700;font-size:.95rem;
  letter-spacing:-.004em;padding:14px 21px;min-height:48px;text-decoration:none;border:0;
  cursor:pointer;position:relative;
  clip-path:polygon(var(--fase) 0,100% 0,100% calc(100% - var(--fase)),
    calc(100% - var(--fase)) 100%,0 100%,0 var(--fase));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.26),
    inset 3px 0 0 var(--signal);
  transition:transform var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease),
    background-color var(--dur-kurz) var(--ease)}
/* KILL 2 aus critic-21, gemessen: Primaer und Sekundaer hatten dieselbe
   Silhouette, dasselbe Mass und dieselbe Flanke - die Bauartunterscheidung hing
   an zwei bis drei Pixeln Innenkante, und der Hauptknopf reagierte auf Hover mit
   5,4 Prozent geaenderten Pixeln gegen 51,8 Prozent beim Zweitknopf.
   Das lackierte Schild bekommt deshalb seine eigene Bauform: es ist TIEFER
   gestanzt (Fase 12 statt 7 px) und traegt die orange Flanke als volle Kante,
   nicht als Strich. Beim Ueberfahren kippt es ins Licht - die Flanke waechst,
   die Unterkante wird orange, das Schild hebt sich zwei Pixel. */
.schild{--fase:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.42),
  inset 0 -2px 0 rgba(0,0,0,.26),inset 6px 0 0 var(--signal)}
.schild:hover{transform:translateY(-2px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.70),inset 0 -4px 0 var(--signal),
    inset 14px 0 0 var(--signal)}
/* Die lackierte Flaeche faengt beim Kippen zusaetzlich Licht - sonst reagiert
   ausgerechnet der Hauptknopf schwaecher als sein Nachbar (critic-21 mass
   5,4 gegen 51,8 Prozent geaenderter Pixel). */
.hell .schild:hover,.papierfeld .schild:hover,.hero .schild:hover{background:var(--blau-rand)}
.schild:hover{background:#FBF8F1}
.schild:active{transform:translateY(1px);
  box-shadow:inset 0 4px 0 rgba(0,0,0,.34),inset 0 -2px 0 rgba(255,255,255,.28),
    inset 14px 0 0 var(--signal-fest)}
/* Das eingelassene Schild behaelt die flachere Fase - es ist in die Flaeche
   gesenkt, nicht aus ihr gestanzt. */
.schild--rahmen{--fase:7px}
.schild--klein{--fase:var(--fase-k)}
.schild[disabled]{opacity:.45;cursor:not-allowed;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.schild--klein{font-size:.84rem;padding:11px 15px;min-height:44px;--fase:var(--fase-k)}
.schild .kenn{font-family:var(--f-m);font-size:.62rem;letter-spacing:.03em;
  color:var(--tinte-mut);font-weight:400}
/* Auf Papier kehrt sich die Fuellung um: blauer Block, orange Anschlag */
.hell .schild,.papierfeld .schild,.hero .schild{background:var(--blau);color:#fff}
.hell .schild .kenn,.papierfeld .schild .kenn,.hero .schild .kenn{color:#C9CFEA}
/* EINGELASSEN: gleiche Fase, gleiche Groesse, umgekehrtes Licht */
.schild--rahmen{color:var(--text);padding:14px 21px;
  background:rgba(2,6,26,.46);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.55),inset 0 -3px 0 rgba(214,226,255,.30),
    inset 3px 0 0 rgba(232,130,47,.72)}
.schild--rahmen:hover{transform:translateY(-1px);color:#fff;
  background:rgba(3,8,32,.44);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.40),inset 0 -2px 0 rgba(255,255,255,.26),
    inset 6px 0 0 var(--signal-hell)}
.schild--rahmen:active{transform:translateY(1px);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.46),inset 0 -1px 0 rgba(255,255,255,.16),
    inset 6px 0 0 var(--signal-hell)}
.schild--rahmen .kenn{color:var(--text-mut)}
.schild--rahmen:hover .kenn{color:var(--signal-hell)}
.hell .schild--rahmen,.papierfeld .schild--rahmen,.hero .schild--rahmen{
  background:rgba(120,105,78,.22);color:var(--tinte);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.40),inset 0 -3px 0 rgba(255,255,252,.95),
    inset 3px 0 0 rgba(156,74,15,.75)}
.hell .schild--rahmen .kenn,.papierfeld .schild--rahmen .kenn,.hero .schild--rahmen .kenn{
  color:var(--tinte-mut)}
.hell .schild--rahmen:hover,.papierfeld .schild--rahmen:hover,.hero .schild--rahmen:hover{
  background:rgba(120,105,78,.30);color:var(--tinte);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.48),inset 0 -3px 0 rgba(255,255,252,.98),
    inset 6px 0 0 var(--signal-tief)}
.hell .schild--rahmen:hover .kenn,.hero .schild--rahmen:hover .kenn{color:var(--signal-tief)}
/* Sekundaer: Unterstrich */
.marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--f-l);font-weight:600;font-size:.95rem;padding:12px 0;min-height:48px;
  border-bottom:2px solid var(--text);color:var(--text);width:fit-content}
.marke .kenn{font-family:var(--f-m);font-size:.64rem;letter-spacing:.04em;color:var(--text-mut)}
.marke:hover{border-bottom-color:var(--signal-hell);color:var(--signal-hell)}
.marke:hover .kenn{color:var(--signal-hell)}
.hell .marke,.papierfeld .marke,.hero .marke{color:var(--tinte);border-bottom-color:var(--tinte)}
.hell .marke .kenn,.papierfeld .marke .kenn,.hero .marke .kenn{color:var(--tinte-mut)}
.hell .marke:hover,.papierfeld .marke:hover,.hero .marke:hover{color:var(--signal-tief);
  border-bottom-color:var(--signal-tief)}
.hell .marke:hover .kenn,.papierfeld .marke:hover .kenn{color:var(--signal-tief)}

.zahlenleiste{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);
  border-top:3px solid var(--signal)}
.zahlenleiste>div{background:var(--blau-tief);padding:13px 15px 15px;min-width:0;
  position:relative;overflow:hidden}
/* Die Kennwertleiste zeichnet sich am Scrollweg mit: unter jeder Zelle zieht
   sich eine Linie in Signalfarbe auf, waehrend der Wert hochzaehlt. Nur
   transform, kein Layout. Steht die Seite, steht die Linie. */
.zahlenleiste[data-riss]>div::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--signal);transform:scaleX(var(--fort,1));transform-origin:left center}
.hell .zahlenleiste[data-riss]>div::after{background:var(--signal-tief)}
.zahlenleiste b{display:block;font-family:var(--f-m);font-weight:700;font-size:1.2rem;
  letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff}
.zahlenleiste span{display:block;font-family:var(--f-l);font-size:.7rem;font-weight:600;
  color:var(--text-mut);margin-top:5px}
.hell .zahlenleiste{background:var(--linie-hell)}
.hell .zahlenleiste>div{background:var(--papier-tief)}
.hell .zahlenleiste b{color:var(--tinte)}
.hell .zahlenleiste span{color:var(--tinte-mut)}

.kennplakette{font-family:var(--f-m);font-size:.62rem;letter-spacing:.04em;
  color:var(--signal-hell);border:1px solid rgba(232,130,47,.55);padding:4px 7px;flex:0 0 auto;
  white-space:nowrap}
.hell .kennplakette,.papierfeld .kennplakette,.hero .kennplakette{color:var(--signal-tief);
  border-color:rgba(156,74,15,.5)}

/* ---------- 5 Bemassung: die Buehne ----------
   Die echte Maschine steht freigestellt da, der Standschatten ist ins Bild
   gebacken. Darauf zeichnen sich beim Scrollen die Massketten in Orange.
   Kein Pinning, kein Scroll-Lock: der Fortschritt haengt an scrollY. */
/* Die Maschine steht immer auf ihrem Blatt. Auf Blau wird das Blatt zur
   Datenblatt-Tafel mit Haarlinie, auf dem hellen Hero verschmilzt es mit der
   Seite: dieselbe Papierfarbe wie im gebackenen Guss, also keine Bildkante. */
.buehne{position:relative;isolation:isolate;background:var(--papier);
  padding:clamp(10px,2vw,18px);
  border:1px solid var(--papier-kante);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.7)}
.hero .buehne,.hell .buehne{padding:0;border:0;box-shadow:none;background:transparent}
/* Auf blauen Sektionen steht die Maschine IM Raum statt auf einer Papierkachel davor:
   Freisteller mit Alpha, Standschatten eingebacken, dahinter eine helle Lichtinsel
   statt der dunklen. Kein Rahmen, keine Kante, keine Collage-Naht. */
.buehne--alpha{padding:0;border:0;box-shadow:none;background:transparent}
.buehne--alpha .buehne__licht{left:3%;right:3%;top:5%;bottom:3%;
  background:radial-gradient(56% 50% at 50% 54%,rgba(150,178,255,.22),rgba(12,34,128,0) 70%)}
.buehne.buehne--alpha .buehne__fuss{color:var(--text-mut)}
.buehne.buehne--alpha .kennplakette{color:var(--signal-hell);border-color:rgba(232,130,47,.5)}
.buehne--alpha .masschip--breite{background:var(--blau-nacht);
  box-shadow:0 0 0 1px rgba(242,243,248,.34)}
.buehne__licht{position:absolute;left:8%;right:8%;top:10%;bottom:8%;z-index:0;display:block;
  pointer-events:none;
  background:radial-gradient(58% 52% at 50% 56%,rgba(12,34,128,.10),rgba(12,34,128,0) 72%);
  animation:streiflicht 13s var(--ease) infinite alternate}
@keyframes streiflicht{
  from{transform:translate3d(-2.5%,1.2%,0) scale(.96)}
  to{transform:translate3d(2.5%,-1.2%,0) scale(.96)}
}
.buehne__bild{position:relative;margin:0;z-index:1}
.buehne__bild img{width:100%;height:auto;display:block}
.buehne__mass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.buehne__mass path{vector-effect:non-scaling-stroke}
.mass-linie{stroke:var(--signal);stroke-width:2;fill:none}
.mass-hilfs{stroke:var(--signal);stroke-width:1;fill:none;opacity:.6;stroke-dasharray:4 4}
.mass-pfeil{fill:var(--signal)}
.masschip{position:absolute;z-index:3;font-family:var(--f-m);font-size:.7rem;
  letter-spacing:.01em;color:#fff;background:var(--signal-fest);padding:4px 9px;
  white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.3;font-weight:400;
  box-shadow:0 3px 12px rgba(7,16,67,.3);opacity:var(--sicht,0)}
.masschip b{font-weight:700;margin-left:5px}
/* Die Chips stehen an ihrer Kette, nicht in der Bildecke: die Werte kommen
   aus der gemessenen Silhouette des jeweiligen Bildes (build/teile.mjs). */
.masschip--hoehe{right:var(--chip-h-rechts,1%);top:3%}
.masschip--weite{left:50%;bottom:-2%;transform:translateX(-50%)}
.masschip--breite{left:var(--chip-b-breit,52%);top:68%;transform:translateX(-50%);
  background:var(--blau);color:#fff}
.masschip--breite::after{content:"";position:absolute;left:50%;bottom:-7px;
  transform:translateX(-50%);width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:7px solid var(--blau)}
.buehne--alpha .masschip--breite::after{border-top-color:var(--blau-nacht)}
/* Hochformat-Zeichnung: das Handy bekommt den Hochkant-Beschnitt, also braucht
   es eine eigene viewBox. Umgeschaltet wird ueber Deckkraft, nicht ueber
   display:none - getTotalLength() misst sonst 0 und die Kette zeichnet nicht. */
.buehne__mass--schmal{opacity:0}
/* Der Fuss der Tafel liegt IMMER auf Papier (die Tafel traegt ihn), also
   immer Tinte. Sonst stuende heller Text auf hellem Grund. */
.buehne__fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:clamp(10px,2vw,18px) 0 0;
  font-family:var(--f-l);font-size:.74rem;color:var(--tinte-mut)}
.buehne .kennplakette{color:var(--signal-tief);border-color:rgba(156,74,15,.5)}

/* ---------- DIE TORPROBE (Runde 16) ----------------------------------------
   Vorgaenger: der Hoftor-Vergleich (zwei Balken gegen ein geratenes 2.000-mm-Tor).
   Jetzt traegt der Kunde sein eigenes Mass ein. Die Zeichnung ist ein Riss im
   festen Massstab: 2.400 mm auf die volle Breite. Zwei Pfosten stehen fuer die
   engste Stelle, darunter liegen die vier Maschinen als Balken im echten
   Laengenverhaeltnis. Was nicht durchpasst, verschwindet nicht - es tritt
   zurueck und sagt, wie viel fehlt.

   Bewegt wird AUSSCHLIESSLICH transform: .torprobe__tor skaliert in x, die
   beiden Pfosten skalieren mit dem Kehrwert gegen, damit sie ihre Strichstaerke
   behalten. Keine Breite, kein left, kein Layout-Thrash. Die Balken selbst sind
   statisch (ihre Breite ist ein Mass, kein Zustand). */
.torvorspann{display:grid;gap:14px;margin-bottom:30px}
.torvorspann__satz{margin:0;max-width:60ch;color:var(--text-mut)}
.hell .torvorspann__satz{color:var(--tinte-mut)}

.torprobe{--tor-anteil:.4167;position:relative;margin:0}
.torprobe__steuer{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px 20px;flex-wrap:wrap;border-top:1px solid var(--linie-stark);padding-top:14px}
.hell .torprobe__steuer{border-top-color:var(--linie-hell-stark)}
.torprobe__frage{font-family:var(--f-l);font-weight:600;font-size:1rem;min-width:0}
.torprobe__anzeige{margin:0;font-family:var(--f-m);font-weight:700;font-size:1.5rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--signal-hell)}
.hell .torprobe__anzeige{color:var(--signal-tief)}
.torprobe__regler{display:flex;align-items:center;gap:10px;margin-top:12px}
.torknopf{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;
  justify-content:center;background:transparent;color:inherit;cursor:pointer;
  border:1px solid var(--linie-stark);font-family:var(--f-m);font-size:1.2rem;line-height:1;
  transition:background-color var(--dur-kurz) var(--ease),border-color var(--dur-kurz) var(--ease)}
.hell .torknopf{border-color:var(--linie-hell-stark)}
.torknopf:hover,.torknopf:focus-visible{background:var(--signal-fest);border-color:var(--signal-fest);
  color:#fff}
.torschieber{flex:1 1 auto;min-width:0;height:48px;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.torschieber::-webkit-slider-runnable-track{height:6px;background:var(--linie-stark);border-radius:0}
.torschieber::-moz-range-track{height:6px;background:var(--linie-stark);border-radius:0}
.hell .torschieber::-webkit-slider-runnable-track{background:var(--linie-hell-stark)}
.hell .torschieber::-moz-range-track{background:var(--linie-hell-stark)}
.torschieber::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:34px;
  margin-top:-14px;background:var(--signal);border:2px solid var(--papier);border-radius:0}
.torschieber::-moz-range-thumb{width:18px;height:34px;background:var(--signal);
  border:2px solid var(--papier);border-radius:0}
.hell .torschieber::-webkit-slider-thumb{border-color:var(--papier)}
.torschieber:focus-visible{outline:2px solid var(--signal-hell);outline-offset:3px}
.torprobe__skala{position:relative;display:flex;justify-content:space-between;gap:10px;
  margin:4px 0 0;font-family:var(--f-m);font-size:.62rem;letter-spacing:.03em;
  color:var(--text-mut);font-variant-numeric:tabular-nums}
.hell .torprobe__skala{color:var(--tinte-mut)}
.torprobe__skala span:last-child{text-align:right}
/* 2.000 mm liegen bei (2000-600)/(2400-600) = 77,8 Prozent des Reglerwegs.
   Die Marke steht dort, nicht in der Mitte - eine Skalenmarke an der falschen
   Stelle waere eine Falschangabe, kein Gestaltungsdetail. Der Regler selbst ist
   um die beiden 48-px-Knoepfe plus 10 px Fuge eingerueckt, das rechnet der
   calc() mit, damit die Marke ueber dem richtigen Punkt der SCHIENE sitzt. */
.torprobe__marke{position:absolute;top:0;white-space:nowrap;
  left:calc(58px + (100% - 116px) * .778);transform:translateX(-50%)}
.torprobe__marke::before{content:"";position:absolute;left:50%;top:-16px;width:1px;height:12px;
  background:var(--linie-stark)}
.hell .torprobe__marke::before{background:var(--linie-hell-stark)}

.torprobe__feld{position:relative;margin-top:22px}
/* Runde 16, Fix-Iteration 1 (critic-16, Kill 1): das Tor besteht nicht mehr aus zwei
   durchgehenden Pfosten ueber die volle Feldhoehe - die schnitten Schrift (auf 360 px acht,
   auf 390 px sechs, ueber den Bedienweg bis zwoelf Glyphenkollisionen; getroffen unter
   anderem das "c" von "cm", also die Einheit hinter der Zahl). Es besteht jetzt aus
   Segmenten, die strukturell nur dort liegen, wo keine Schrift steht: EIN Kopfband mit
   Kette und Masszahl, und JE Balkenspur ein eigenes Pfostenpaar. Damit ist die Kollision
   nicht kleiner geworden, sondern unmoeglich - auf jeder Breite und bei jedem Reglerwert
   (ein Abschneiden unterhalb 640 px haette den Fehler auf 1440 beim Maximalwert stehen
   gelassen). Alle Segmente teilen denselben --tor-anteil und stehen deshalb in einer
   Flucht; bewegt wird weiterhin ausschliesslich transform. */
.torkopf{position:relative;height:26px;margin-bottom:2px}
.torprobe__tor{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:2;
  transform:scaleX(var(--tor-anteil));transform-origin:50% 50%;
  transition:transform var(--dur-kurz) var(--ease)}
.torpfosten{position:absolute;top:0;bottom:0;width:2px;display:block;background:var(--signal-hell)}
.hell .torpfosten{background:var(--signal-tief)}
.torpfosten--l{left:0;transform:scaleX(calc(1 / var(--tor-anteil)));transform-origin:left center}
.torpfosten--r{right:0;transform:scaleX(calc(1 / var(--tor-anteil)));transform-origin:right center}
.torzeile__tor{position:absolute;left:0;right:0;top:-5px;bottom:-5px;display:block;z-index:2;
  pointer-events:none;transform:scaleX(var(--tor-anteil));transform-origin:50% 50%;
  transition:transform var(--dur-kurz) var(--ease)}
.torkette{position:absolute;left:0;right:0;top:12px;height:2px;display:block;
  background:var(--signal-hell);transform:scaleX(var(--fort,1));transform-origin:center}
.hell .torkette{background:var(--signal-tief)}
/* Die Masszahl unterbricht die Kette, wie in einer technischen Zeichnung. Sie
   liegt AUSSERHALB des skalierten Tores (sonst wuerde sie mitgestaucht) und
   mittig - da sich das Tor symmetrisch oeffnet, muss sie nie wandern. */
.torkettenwert{position:absolute;left:50%;top:1px;transform:translateX(-50%);margin:0;z-index:3;
  padding:0 10px;background:var(--blau);font-family:var(--f-m);font-size:.72rem;
  letter-spacing:.02em;color:var(--signal-hell);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.torkettenwert b{font-weight:700}
.hell .torkettenwert{background:var(--papier);color:var(--signal-tief)}

.torliste{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.torzeile{min-width:0}
.torzeile__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:0 0 7px}
.torzeile__name{font-family:var(--f-l);font-weight:600;font-size:.95rem;min-width:0}
.torzeile__name em{font-style:normal;font-family:var(--f-m);font-size:.62rem;letter-spacing:.04em;
  color:var(--text-mut);margin-left:9px;white-space:nowrap}
.hell .torzeile__name em{color:var(--tinte-mut)}
.torzeile__mass{font-family:var(--f-m);font-weight:700;font-size:1.02rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.torzeile__spur{position:relative;display:block;height:26px;overflow:visible;
  background:rgba(242,243,248,.13)}
.hell .torzeile__spur{background:var(--papier-tief)}
.torzeile__spur .torbalken{position:absolute;left:50%;top:0;bottom:0;display:block;
  width:calc(var(--m,.3) * 100%);transform:translateX(-50%);background:var(--signal);
  transition:background-color var(--dur-kurz) var(--ease)}
.torzeile__urteil{margin:9px 0 0;min-height:1.2em;font-family:var(--f-m);font-size:.76rem;
  font-variant-numeric:tabular-nums;color:var(--text-mut)}
.hell .torzeile__urteil{color:var(--tinte-mut)}
.torzeile__urteil b{color:var(--signal-hell);font-weight:700}
.hell .torzeile__urteil b{color:var(--signal-tief)}
/* Was nicht durchpasst, tritt zurueck - dieselbe Sprache wie die
   Kompatibilitaetsachse auf /anbaugeraete/: sichtbar bleiben, aber gesperrt. */
.torzeile.ist-zu-breit .torzeile__kopf{opacity:.62}
.torzeile.ist-zu-breit .torzeile__spur .torbalken{
  background:repeating-linear-gradient(135deg,var(--signal-fest) 0 7px,rgba(18,22,40,.55) 7px 14px)}
.hell .torzeile.ist-zu-breit .torzeile__spur .torbalken{
  background:repeating-linear-gradient(135deg,var(--signal-tief) 0 7px,rgba(226,220,208,.9) 7px 14px)}
.torzeile--eigen .torzeile__name{font-size:1.06rem}
.torzeile--eigen .torzeile__spur{outline:1px solid var(--linie-stark);outline-offset:3px}
.hell .torzeile--eigen .torzeile__spur{outline-color:var(--linie-hell-stark)}
.torprobe__fuss{display:flex;gap:10px 14px;align-items:flex-start;flex-wrap:wrap;
  margin:22px 0 0;font-size:.8rem;color:var(--text-mut);max-width:66ch}
.hell .torprobe__fuss{color:var(--tinte-mut)}
.torprobe__fuss b{color:var(--signal-hell)}
.hell .torprobe__fuss b{color:var(--signal-tief)}
.torprobe__zurueck{margin:12px 0 0}
.torzurueck{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;
  background:none;border:0;cursor:pointer;font-family:var(--f-m);font-size:.72rem;
  letter-spacing:.03em;color:var(--text-mut);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px}
.hell .torzurueck{color:var(--tinte-mut)}
.torzurueck:hover,.torzurueck:focus-visible{color:var(--signal-hell)}
.hell .torzurueck:hover,.hell .torzurueck:focus-visible{color:var(--signal-tief)}

/* ---------- Karten ---------- */
.klassenkarte{display:flex;flex-direction:column;background:var(--blau-tief);
  border:1px solid var(--linie);border-top:3px solid var(--signal);padding:0 18px;
  min-width:0;position:relative;
  transition:border-color var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease),
    transform var(--dur-kurz) var(--ease)}
.klassenkarte:hover{transform:translateY(-3px);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.8),0 0 0 1px rgba(232,130,47,.5)}
.klassenkarte__bild{display:block;margin:0 -18px 0;background:var(--papier);overflow:hidden}
.klassenkarte__bild img{width:100%;height:auto;display:block;
  transition:transform var(--dur) var(--ease)}
.klassenkarte:hover .klassenkarte__bild img{transform:scale(1.035)}
.klassenkarte__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:16px}
.klassenkarte__klasse{font-family:var(--f-d);font-weight:700;font-size:2.2rem;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.klassenkarte h3{margin-top:8px;font-size:1.04rem;color:#fff}
.klassenkarte h3 a{text-decoration:none}
.klassenkarte h3 a:hover{color:var(--signal-hell)}
.klassenkarte>p{margin:8px 0 16px;font-size:.9rem;color:var(--text-mut)}
.massbalken{display:grid;gap:11px;margin-bottom:16px}
.massbalken__zeile{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:baseline}
.massbalken__name{font-family:var(--f-l);font-size:.76rem;font-weight:600;color:var(--text-mut);
  min-width:0}
.massbalken__zeile b{font-family:var(--f-m);font-weight:700;font-size:.86rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:#fff}
.massbalken__spur{grid-column:1/-1;height:8px;background:rgba(242,243,248,.12);position:relative;
  overflow:hidden}
.massbalken__spur i{position:absolute;left:0;top:0;bottom:0;width:100%;display:block;
  background:var(--signal);transform:scaleX(var(--anteil,1));transform-origin:left center}
.js .massbalken__spur i{transform:scaleX(calc(var(--anteil,1) * var(--fort,1)))}
.js [data-riss] .massbalken__spur i{transition:none}
.js .massbalken__spur i:not([data-zeichnen]){transform:scaleX(0);
  transition:transform 760ms var(--ease) 120ms}
.js .auf.da .massbalken__spur i:not([data-zeichnen]){transform:scaleX(var(--anteil,1))}
.klassenkarte__daten{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);
  border-top:1px solid var(--linie);margin:0 -18px auto}
.klassenkarte__daten div{background:var(--blau-tief);padding:10px 13px 11px;min-width:0}
.klassenkarte__daten b{display:block;font-family:var(--f-m);font-weight:700;font-size:.88rem;
  white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff}
.klassenkarte__daten span{display:block;font-family:var(--f-l);font-size:.68rem;font-weight:600;
  color:var(--text-mut);margin-top:3px}
.klassenkarte__fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--linie);flex-wrap:wrap;margin:0 -18px;padding:14px 18px 16px}
.preisnote{font-family:var(--f-m);font-size:.72rem;color:var(--text-mut)}
.hell .preisnote,.papierfeld .preisnote{color:var(--tinte-mut)}

.warenkarte{display:flex;flex-direction:column;background:var(--blau-tief);
  border:1px solid var(--linie);padding:0 16px 16px;min-width:0;
  transition:opacity var(--dur-kurz) var(--ease),border-color var(--dur-kurz) var(--ease)}
.warenkarte:hover{border-color:rgba(232,130,47,.6)}
.warenkarte__bild{margin:0 -16px 14px;background:var(--papier);overflow:hidden}
.warenkarte__bild img{width:100%;height:auto;display:block}
.warenkarte h3{font-size:1.04rem;color:#fff}
.warenkarte__gruppe{font-family:var(--f-m);font-size:.64rem;letter-spacing:.04em;
  color:var(--signal-hell);margin-bottom:8px}
.warenkarte:not(:has(.warenkarte__bild)) .warenkarte__gruppe{margin-top:15px}
.warenkarte__hinweis{font-size:.88rem;color:var(--text-mut);margin:7px 0 13px}
.warenkarte__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--f-l);font-size:.78rem;color:var(--text-mut);
  padding:6px 0;border-top:1px solid var(--linie)}
.warenkarte__zeile b{color:#fff;font-weight:700;font-family:var(--f-m);font-size:.8rem;
  font-variant-numeric:tabular-nums}
.warenkarte__fuss{margin-top:14px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;flex-wrap:wrap}
.preis{font-family:var(--f-m);font-weight:700;font-size:1.06rem;font-variant-numeric:tabular-nums;
  white-space:nowrap;line-height:1.1;color:#fff}
.preis em{display:block;font-style:normal;font-size:.62rem;color:var(--text-mut);
  font-weight:400;margin-top:3px;font-family:var(--f-l)}
.warenkarte[data-passt="nein"]{opacity:.34}
.warenkarte[data-passt="nein"] .schild{pointer-events:none}
.sperrvermerk{display:none;font-family:var(--f-m);font-size:.64rem;
  color:var(--signal-hell);border:1px solid rgba(232,130,47,.5);
  padding:4px 7px;margin-top:11px;width:fit-content}
.warenkarte[data-passt="nein"] .sperrvermerk{display:block}

/* Werkzeugwand: vier echte Aufnahmen als Raster statt einer Deko-Grafik */
.werkzeugwand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.werkzeugwand__feld{margin:0;background:var(--papier);border:1px solid var(--papier-kante);
  position:relative;overflow:hidden}
.werkzeugwand__feld img{width:100%;height:auto;display:block}
.werkzeugwand__feld figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--f-m);font-size:.6rem;letter-spacing:.02em;color:#fff;
  background:var(--blau);padding:5px 8px;text-align:left}

/* Runde 14, Befund 6: .werkzeugpaar/.werkzeugkarte sind mit der abgeschriebenen
   Sektion auf /kompaktlader/ entfallen. Kein Knoten im Auslieferbaum trug die
   Klassen mehr (geprueft ueber alle 16 Seiten), deshalb fliegen sie mit. */

/* Werkzeugliste auf der Maschinenseite: Zeile mit echtem Bild statt Tabelle */
.werkzeugliste{margin-top:16px;border-top:1px solid var(--linie-hell)}
.werkzeugzeile{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--linie-hell);
  text-decoration:none;color:var(--tinte);
  transition:background-color var(--dur-kurz) var(--ease)}
.werkzeugzeile figure{margin:0;width:72px;height:54px;background:var(--papier-tief);
  overflow:hidden}
.werkzeugzeile figure img{width:100%;height:100%;object-fit:cover}
.werkzeugzeile b{display:block;font-family:var(--f-d);font-weight:700;font-size:.98rem;
  letter-spacing:-.016em}
.werkzeugzeile em{font-style:normal;display:block;font-size:.78rem;color:var(--tinte-mut);
  margin-top:2px}
.werkzeugzeile__preis{font-family:var(--f-m);font-size:.82rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--tinte-mut)}
.werkzeugzeile:hover{background:var(--papier-tief)}

/* ---------- Tabellen ---------- */
.tafel{width:100%;border-collapse:collapse}
.tafel caption{text-align:left;font-family:var(--f-l);font-size:.8rem;font-weight:600;
  color:var(--text-mut);padding-bottom:12px}
.hell .tafel caption{color:var(--tinte-mut)}
.tafel th,.tafel td{text-align:left;padding:12px 0;border-bottom:1px solid var(--linie);
  font-size:.94rem;vertical-align:baseline}
.tafel thead th{font-family:var(--f-l);font-size:.76rem;font-weight:700;
  color:var(--text-mut);border-bottom:3px solid var(--signal)}
.tafel tbody th{font-family:var(--f-l);font-size:.86rem;font-weight:500;color:var(--text-mut);
  padding-right:14px}
.tafel td.wert{font-family:var(--f-m);font-weight:700;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:#fff}
.tafel td.wert--text{font-family:var(--f-l);font-weight:600;white-space:normal;text-align:left;
  overflow-wrap:break-word;color:var(--text)}
.tafel tr:first-child th,.tafel tr:first-child td{border-top:3px solid var(--signal)}
.tafel thead+tbody tr:first-child th,.tafel thead+tbody tr:first-child td{border-top:0}
.tafel th.mitte,.tafel td.mitte{text-align:center}
.tafel td.ja{color:var(--signal-hell)}
.tafel td.nein{color:var(--text-mut);opacity:.6}
.hell .tafel th,.hell .tafel td{border-bottom-color:var(--linie-hell);color:var(--tinte)}
.hell .tafel thead th,.hell .tafel tbody th{color:var(--tinte-mut)}
.hell .tafel td.wert{color:var(--tinte)}
.hell .tafel td.ja{color:var(--signal-tief)}
.hell .tafel td.nein{color:var(--tinte-mut);opacity:.55}
.hell .tafel tr:first-child th,.hell .tafel tr:first-child td{border-top-color:var(--signal)}
.wischer{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wischer::after{content:"";position:sticky;right:0;top:0;float:right;width:44px;height:100%;
  pointer-events:none;background:linear-gradient(to left,var(--blau),transparent)}
.hell .wischer::after{background:linear-gradient(to left,var(--papier),transparent)}
.wischhinweis{font-family:var(--f-l);font-size:.76rem;color:var(--text-mut);margin:8px 0 0}
.hell .wischhinweis{color:var(--tinte-mut)}

.vermerk{display:flex;gap:12px;align-items:flex-start;border-left:3px solid var(--signal);
  background:rgba(194,95,23,.16);padding:12px 15px;font-size:.88rem;color:var(--text)}
.vermerk b{font-family:var(--f-l);font-size:.76rem;font-weight:700;
  color:var(--signal-hell);display:block;margin-bottom:3px}
.hell .vermerk,.papierfeld .vermerk{background:rgba(194,95,23,.10);color:var(--tinte)}
.hell .vermerk b,.papierfeld .vermerk b{color:var(--signal-tief)}

/* Formularfelder */
.feld{min-height:48px;font:inherit;padding:0 12px;border:1px solid var(--linie-hell-stark);
  background:#F7F4EE;color:var(--tinte);border-radius:0}
textarea.feld{padding:10px 12px;resize:vertical;min-height:120px}

/* ---------- 6 Sektionen ---------- */
.abschnitt{padding-top:56px;padding-bottom:56px;position:relative}
.hell{background:var(--papier);color:var(--tinte)}
.hell h1,.hell h2,.hell h3{color:var(--tinte)}
.tief{background:var(--blau-tief)}
.kontaktplatte{background:var(--blau-nacht)}

/* Hero, Fassung 3: die Buehne ist der Raum, nicht das Blatt.
   Zwei unabhaengige Leser haben denselben Satz geschrieben - die Maschine stand
   auf einer grossen beigen Flaeche "ohne Boden". Sie steht jetzt IM Markenblau,
   freigestellt mit eingebackenem Standschatten, in einer Lichtinsel, und der
   Textblock ist das helle Werkblatt, das die Buehne von links ueberlappt.
   Die Ebenen sind damit umgekehrt und tragen: Lichtraum, Maschine, Papierriegel. */
.hero{position:relative;z-index:3;background:var(--blau);color:var(--text);
  padding-top:18px;padding-bottom:44px;overflow:hidden}
.hero h1,.hero h2,.hero h3{color:#fff}
/* Die Lichtinsel hinter der Maschine: das Blau ist kein Vollton, es hat eine
   Mitte. Rein dekorativ, ohne Bewegung, unter allem anderen. */
.hero::before{content:"";position:absolute;z-index:0;inset:-6% -10% 12% 30%;
  pointer-events:none;
  background:radial-gradient(52% 46% at 62% 44%,rgba(150,178,255,.20),rgba(12,34,128,0) 72%)}
.hero__raster{position:relative;z-index:1;display:grid;gap:0}
.hero__buehne{order:-1;margin:0 calc(var(--rand) * -1)}
.hero__text{position:relative;z-index:3;background:var(--papier);color:var(--tinte);
  padding:22px 20px 24px;margin-top:-46px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.hero__text h1{color:var(--tinte)}
.hero__text .marke-z{color:var(--tinte-mut)}
.hero__text .marke-z::before{background:var(--signal)}
/* RUNDE 18: das eingefaerbte Wort in der Ueberschrift ist die meistkopierte
   KI-Geste und faellt ersatzlos. An seine Stelle tritt die Grammatik, die die
   Seite ohnehin spricht: die letzte Zeile steht auf einer gezogenen Masslinie
   mit Anschlag, so wie jedes Mass auf dieser Seite. Die Schrift bleibt Tinte. */
.hero h1 em{font-style:normal;color:inherit;position:relative;
  display:inline-block;padding-bottom:9px}
/* Die Masslinie selbst */
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;
  background:var(--signal-tief)}
/* Die zwei Anschlaege an ihren Enden - so steht jedes Mass auf dieser Seite */
.hero h1 em::before{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;
  border-left:3px solid var(--signal-tief);border-right:3px solid var(--signal-tief)}
.hero__lead{max-width:40ch;margin:16px 0 0;color:var(--tinte-mut);font-size:1.02rem}
.hero__tun{display:flex;flex-direction:column;align-items:stretch;gap:13px;margin:22px 0 0}
.hero__stand{margin:16px 0 0;font-family:var(--f-m);font-size:.7rem;letter-spacing:.02em;
  line-height:1.5;color:var(--tinte-mut);max-width:40ch}
.hero__stand b{color:var(--signal-tief);font-weight:700}
.hero__stand em{font-style:normal;color:var(--tinte-mut);opacity:.85}
.hero__stand em::before{content:"·";margin:0 6px 0 2px}
/* Der Textblock ist jetzt Papier: dort gelten die Papier-Fassungen der Knoepfe.
   Der Hauptknopf ist der blaue Block, der Zweitknopf sein Umriss in Tinte. */
.hero__text .schild{background:var(--blau);color:#fff}
.hero__text .schild .kenn{color:#C9CFEA}
/* Runde 18: auch im Hero-Bogen ist der Zweitknopf kein Rahmen mehr, sondern
   dasselbe eingelassene Schild - eine Geste auf der ganzen Seite. */
.hero__text .schild--rahmen{color:var(--tinte);border:0;
  background:rgba(120,105,78,.22);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.40),inset 0 -3px 0 rgba(255,255,252,.95),
    inset 3px 0 0 rgba(156,74,15,.75)}
.hero__text .schild--rahmen .kenn{color:var(--tinte-mut)}
.hero__text .schild--rahmen:hover{color:var(--tinte);transform:translateY(-1px);
  background:rgba(120,105,78,.30);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.48),inset 0 -3px 0 rgba(255,255,252,.98),
    inset 6px 0 0 var(--signal-tief)}
.hero .buehne__fuss{color:var(--text-mut)}
.hero .kennplakette{color:var(--signal-hell);border-color:rgba(232,130,47,.5)}

/* Sortiment-Zeilen */
.wegzeile{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:15px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;
  position:relative;transition:background-color var(--dur-kurz) var(--ease)}
.wegzeile:first-of-type{border-top:1px solid var(--linie)}
.wegzeile__bild{margin:0;width:78px;height:59px;overflow:hidden;background:var(--papier);
  flex:0 0 auto}
.wegzeile__bild img{width:100%;height:100%;object-fit:cover}
.wegzeile__txt{min-width:0}
.wegzeile strong{font-family:var(--f-d);font-weight:700;font-size:1.16rem;display:block;
  letter-spacing:-.024em;color:#fff;transition:transform var(--dur-kurz) var(--ease)}
.wegzeile p{margin:4px 0 0;font-size:.86rem;color:var(--text-mut)}
.wegzeile__nr{font-family:var(--f-m);font-size:.68rem;color:var(--signal-hell);flex:0 0 auto;
  align-self:flex-start;padding-top:4px;font-variant-numeric:tabular-nums}
.wegzeile:hover{background:var(--blau-tief)}
.wegzeile:hover strong{transform:translateX(6px)}
.hell .wegzeile,.hell .wegzeile:first-of-type{border-color:var(--linie-hell)}
.hell .wegzeile strong{color:var(--tinte)}
.hell .wegzeile p{color:var(--tinte-mut)}
.hell .wegzeile__nr{color:var(--signal-tief)}
.hell .wegzeile:hover{background:var(--papier-tief)}

.diptychon{display:grid;gap:24px}
.diptychon--bild-zuerst .masch-bild{order:-1}
/* Gedreht: Bild links, Text rechts. Bricht den wiederkehrenden Kopfbau der
   Kategorieseiten (Befund der zweiten Instanz: "ab der zweiten Seite dasselbe
   Skelett"). Greift erst zweispaltig, mobil bleibt die Lesereihenfolge. */
.dipt{position:relative;text-decoration:none;color:inherit;display:block;min-width:0}
.dipt figure{margin:0;position:relative;overflow:hidden;background:var(--papier);
  aspect-ratio:4/3}
.dipt img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.dipt:hover img{transform:scale(1.04)}
.dipt__txt{padding-top:16px}
.dipt h3{font-size:1.32rem;color:#fff}
.dipt p{margin:7px 0 0;font-size:.92rem;color:var(--text-mut)}
.dipt__marke{margin-top:12px}
.hell .dipt h3{color:var(--tinte)}
.hell .dipt p{color:var(--tinte-mut)}
/* Randanschnitt: das Bild laeuft aus dem Raster heraus */
.anschnitt{margin:0;overflow:hidden;margin-right:calc(var(--rand) * -1);background:var(--papier)}

.band{position:relative;overflow:hidden;background:var(--blau)}
.band>figure{margin:0;position:relative;aspect-ratio:16/12}
.band--kopf>figure{aspect-ratio:auto;height:clamp(370px,62svh,540px)}
.band img{width:100%;height:100%;object-fit:cover;object-position:52% 58%}
.band__flor{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,16,67,.96) 14%,rgba(7,16,67,.62) 54%,rgba(7,16,67,.22))}
.band__txt{position:absolute;left:0;right:0;bottom:0;padding-bottom:28px;z-index:2}
.band__txt h2{color:#fff;max-width:17ch}
.band__txt p{color:var(--text-mut);max-width:46ch;margin-top:11px;font-size:.95rem}
.band--ort>figure{aspect-ratio:16/11}

/* Region: die Herkunft des Namens in einem Satz, ohne erfundene Adresse */
.region{margin-top:14px;max-width:52ch}
.region__satz{font-size:.98rem;color:var(--text);margin:0}
.region__satz b{color:var(--signal-hell);font-weight:700}
.region__notiz{font-family:var(--f-m);font-size:.68rem;letter-spacing:.03em;
  color:var(--text-mut);margin:8px 0 0}
.hell .region__satz{color:var(--tinte)}
.hell .region__satz b{color:var(--signal-tief)}
.hell .region__notiz{color:var(--tinte-mut)}

.telzeile{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:#fff;
  padding:18px 0;border-top:3px solid var(--signal);border-bottom:1px solid var(--linie);
  margin-top:22px}
.telzeile b{font-family:var(--f-d);font-weight:700;font-size:clamp(1.95rem,9.2vw,3rem);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
  transition:color var(--dur-kurz) var(--ease)}
.telzeile span{font-family:var(--f-l);font-size:.86rem;font-weight:600;color:var(--signal-hell)}
.telzeile:hover b{color:var(--signal-hell)}
.hell .telzeile{color:var(--tinte);border-bottom-color:var(--linie-hell)}
.hell .telzeile span{color:var(--signal-tief)}
.kontaktplatte__ort{font-family:var(--f-m);font-size:.68rem;letter-spacing:.03em;
  color:var(--text-mut);margin:26px 0 0}

.filterzeile{display:flex;gap:8px;flex-wrap:wrap;padding:0}
.filterknopf{font-family:var(--f-l);font-size:.82rem;font-weight:600;
  background:transparent;border:1px solid var(--linie-stark);color:var(--text);
  padding:0 15px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;
  transition:background-color var(--dur-kurz) var(--ease),color var(--dur-kurz) var(--ease),
    border-color var(--dur-kurz) var(--ease)}
.filterknopf:hover{border-color:var(--signal-hell);color:var(--signal-hell)}
.filterknopf[aria-pressed="true"]{background:var(--signal-fest);color:#fff;border-color:var(--signal-fest)}
/* Modellname vorn, Gewichtsklasse als leise Zweitzeile: der Kunde sucht nach
   "R13 PRO", gefiltert wird ueber die Klasse. Mono, weil alle Masse hier mono
   laufen. Auf dem gedrueckten Knopf steht sie in gebrochenem Weiss. */
.filterknopf__klasse{font-family:var(--f-m);font-size:.62rem;letter-spacing:.03em;
  font-weight:400;color:var(--text-mut);margin-left:8px}
.filterknopf:hover .filterknopf__klasse{color:inherit}
.filterknopf[aria-pressed="true"] .filterknopf__klasse{color:rgba(255,255,255,.82)}
.hell .filterknopf__klasse,.papierfeld .filterknopf__klasse{color:var(--tinte-mut)}
.hell .filterknopf[aria-pressed="true"] .filterknopf__klasse,
.papierfeld .filterknopf[aria-pressed="true"] .filterknopf__klasse{color:rgba(255,255,255,.82)}
/* Dieselbe Ordnung in der Kompatibilitaetstabelle. */
.spaltenklasse{display:block;font-family:var(--f-m);font-size:.62rem;letter-spacing:.03em;
  font-weight:400;color:var(--text-mut);margin-top:3px}
.hell .spaltenklasse,.papierfeld .spaltenklasse{color:var(--tinte-mut)}
.filterstand{font-family:var(--f-l);font-size:.86rem;color:var(--text-mut);padding-top:14px;margin:0}
.filterstand b{color:var(--signal-hell);font-weight:700}
.hell .filterknopf{color:var(--tinte);border-color:var(--linie-hell-stark)}
.hell .filterknopf:hover{border-color:var(--signal-tief);color:var(--signal-tief)}
.hell .filterstand{color:var(--tinte-mut)}
.hell .filterstand b{color:var(--signal-tief)}

.raster{display:grid;gap:16px;grid-template-columns:1fr}

.fuss{background:var(--blau-nacht);color:var(--text-mut);padding-top:44px;padding-bottom:36px;
  border-top:3px solid var(--signal)}
.fuss h2{font-size:1.2rem;color:#fff;margin-bottom:14px}
.fuss a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--linie)}
.fuss a:hover{border-bottom-color:var(--signal-hell);color:var(--signal-hell)}
.fuss__spalten{display:grid;gap:28px}
.fuss__liste li{padding:0}
.fuss__liste a{border-bottom:0;font-size:.94rem}
.fuss__klein{font-size:.8rem;line-height:1.65;margin-top:28px;padding-top:20px;
  border-top:1px solid var(--linie)}
/* Das Voll-Logo mit Inhaberzeile steht auf seinem eigenen Papier */
.firmenschild{background:var(--papier);padding:16px 18px;width:fit-content;max-width:100%;
  border-bottom:3px solid var(--signal)}
.firmenschild img{width:min(300px,100%);height:auto}
.fuss__ort{font-family:var(--f-m);font-size:.72rem;letter-spacing:.03em;line-height:1.6;
  color:var(--text);margin-top:16px}
.fuss__ort span{color:var(--text-mut)}

/* ---------- 7 Anfrageliste ---------- */
.liste{position:fixed;inset:0;z-index:70;display:none}
.liste[data-offen="true"]{display:block}
.liste__grund{position:absolute;inset:0;z-index:1;background:rgba(5,10,40,.72);border:0;
  width:100%;padding:0;cursor:pointer}
.liste__blatt{position:absolute;z-index:2;right:0;top:0;bottom:0;width:min(430px,100%);
  background:var(--blau-tief);border-left:1px solid var(--linie);
  display:flex;flex-direction:column;overscroll-behavior:contain}
.liste__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px var(--rand);border-bottom:3px solid var(--signal);background:var(--blau);
  color:var(--text)}
.liste__kopf b{font-family:var(--f-d);font-weight:700;font-size:1.04rem}
.liste__zu{background:transparent;border:1px solid var(--linie-stark);color:var(--text);
  min-height:44px;min-width:44px;cursor:pointer;font-family:var(--f-l);font-size:.82rem;
  font-weight:600;padding:0 13px}
.liste__zu:hover{border-color:var(--signal-hell);color:var(--signal-hell)}
.liste__inhalt{flex:1 1 auto;overflow-y:auto;padding:16px var(--rand);overscroll-behavior:contain}
.liste__leer{font-size:.92rem;color:var(--text-mut)}
.listenposten{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 0;
  border-bottom:1px solid var(--linie);align-items:start}
.listenposten strong{font-family:var(--f-d);font-weight:700;font-size:.98rem;display:block;
  letter-spacing:-.016em;color:#fff}
.listenposten .art{font-family:var(--f-m);font-size:.62rem;color:var(--signal-hell);
  display:block;margin-bottom:4px}
.listenposten .zeile{font-family:var(--f-m);font-size:.7rem;color:var(--text-mut);margin-top:5px;
  font-variant-numeric:tabular-nums}
.listenposten__rechts{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.raus{background:transparent;border:1px solid var(--linie);cursor:pointer;
  font-family:var(--f-l);font-size:.72rem;color:var(--text-mut);min-height:34px;padding:0 10px}
.raus:hover{border-color:var(--signal-hell);color:var(--signal-hell)}
.liste__fuss{border-top:1px solid var(--linie);padding:15px var(--rand) 19px;
  display:grid;gap:13px;background:var(--blau)}
.liste__summe{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--f-l);font-size:.84rem;font-weight:600;color:var(--text-mut)}
.liste__summe b{font-family:var(--f-m);font-size:1.14rem;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- 8 Motion ---------- */
.auf{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
  border-color var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease)}
.js .auf{opacity:0;transform:translateY(14px)}
.auf.da{opacity:1;transform:none}
.auf[data-stufe="1"]{transition-delay:60ms}
.auf[data-stufe="2"]{transition-delay:120ms}
.auf[data-stufe="3"]{transition-delay:180ms}
.buehne__mass [data-zeichnen]{stroke-dasharray:var(--laenge,400);
  stroke-dashoffset:calc(var(--laenge,400) * (1 - var(--fort,0)))}
.buehne__mass [data-spitze]{opacity:var(--spitze,0);transition:opacity 200ms linear}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .auf{opacity:1;transform:none}
  .js .auf{opacity:1;transform:none}
  .buehne__mass [data-zeichnen]{stroke-dashoffset:0}
  .buehne__mass [data-spitze]{opacity:1}
  .zahlenleiste[data-riss]>div::after{transform:scaleX(1)}
  .masschip{opacity:1}
  .js .massbalken__spur i,
  .js .massbalken__spur i:not([data-zeichnen]){transform:scaleX(var(--anteil,1))}
  .torprobe__tor{transition:none}
  .torkette{transform:none}
  .buehne__licht{animation:none}
  .klassenkarte:hover,.dipt:hover img,.schild:hover{transform:none}
}

/* ---------- 9 Desktop ---------- */
@media (min-width:560px){
  .zahlenleiste{grid-template-columns:repeat(4,1fr)}
  .raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__tun{flex-direction:row;align-items:center;gap:20px}
  .torliste{gap:20px}
  .werkzeugwand{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (min-width:900px){
  :root{--rand:40px;--kopf-h:76px}
  h1{font-size:clamp(2.9rem,4.5vw,4.15rem)}
  h2{font-size:clamp(2rem,2.9vw,2.7rem)}
  .abschnitt{padding-top:92px;padding-bottom:92px}
  .wortmarke{flex:0 0 auto;padding:12px 26px 13px;gap:14px;margin-bottom:-18px}
  .wortmarke__zeichen{width:48px;height:36px}
  .wortmarke b{font-size:1.24rem}
  .wortmarke__text>span{font-size:.68rem}
  .hero{padding-top:0;padding-bottom:0;min-height:calc(100svh - var(--kopf-h))}
  .hero__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;
    min-height:calc(100svh - var(--kopf-h));padding-top:26px;padding-bottom:26px}
  .hero__buehne{order:0;margin:0;grid-column:2;grid-row:1}
  .hero__text{grid-column:1;grid-row:1;margin-top:0;margin-right:-9%;padding:34px 38px 36px;
    align-self:center}
  .hero__lead{font-size:1.1rem}
  /* Der blaue Textriegel ueberlappt die linke Kante der Buehne (gemessen @1440:
     Riegel endet bei x=740, Buehne beginnt bei x=644). Deshalb liegt die
     Bemassung rechts und unten-mittig, nicht links - kein Chip wird
     angeschnitten. Der Tafelfuss flieht nach rechts. */
  .hero .buehne__fuss{justify-content:flex-end}
  .wegzeile{grid-template-columns:158px minmax(0,1fr) auto;padding:21px 0;gap:24px}
  .wegzeile__bild{width:158px;height:118px}
  .wegzeile strong{font-size:1.46rem}
  .wegzeile p{font-size:.92rem}
  .diptychon{grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:36px;align-items:end}
  .diptychon--bild-zuerst .masch-bild{order:0}
  .diptychon--gedreht{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
  .diptychon--gedreht > *:first-child{order:2}
  .diptychon--gedreht > *:last-child{order:1}
  .diptychon .dipt:first-child figure{aspect-ratio:16/11}
  .diptychon .dipt:last-child figure{aspect-ratio:4/3.5}
  .band>figure{aspect-ratio:21/8}
  .band--kopf>figure{aspect-ratio:auto;height:clamp(430px,70svh,640px)}
  .band--ort>figure{aspect-ratio:21/8}
  .band__txt{padding-bottom:48px}
  .raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .raster--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fuss__spalten{grid-template-columns:1.4fr 1fr 1fr;gap:44px}
  .telzeile{flex-direction:row;align-items:baseline;gap:22px;justify-content:space-between}
  .torliste{gap:22px}
  .torzeile__spur{height:34px}
  .torprobe__feld{padding-top:30px}
  .masschip{font-size:.82rem;padding:5px 11px}
  .werkzeugwand{gap:14px}
}
@media (min-width:1180px){
  .raster{gap:26px}
}

/* ---------- 10 Overrides (immer als Letztes) ---------- */
.ueber{position:relative;z-index:4}
.zahlenleiste--kreuzt{position:relative;z-index:3;margin-bottom:-52px;
  box-shadow:0 24px 46px -30px rgba(0,0,0,.85)}
.kreuzt-hoch{position:relative;z-index:3;margin-top:-62px}
.nach-kreuzung{padding-top:104px}
@media (min-width:900px){
  .zahlenleiste--kreuzt{margin-bottom:-62px}
  .kreuzt-hoch{margin-top:-74px}
  .nach-kreuzung{padding-top:128px}
}
.ohne-oben{padding-top:0}
.ohne-unten{padding-bottom:0}

/* --- Kopf ueber dem Menueblatt, damit der Hamburger tippbar bleibt --- */
.kopf{z-index:65}
.menu{z-index:60}
.menu__kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-10px 0 14px}
.menu__kopfzeile span{font-family:var(--f-m);font-size:.66rem;letter-spacing:.06em;
  color:var(--text-mut)}
.menu__zu{background:transparent;border:1px solid var(--linie-stark);color:var(--text);
  font-family:var(--f-l);font-weight:600;font-size:.82rem;cursor:pointer;
  min-height:44px;min-width:110px;padding:0 16px;border-radius:0}
.menu__zu:hover,.menu__zu:focus-visible{border-color:var(--signal-hell);color:var(--signal-hell)}

/* --- Das Massband: die Zeichensprache laeuft ueber die Sektionsgrenze weiter --- */
.massband{position:relative;z-index:3;display:grid;gap:12px;
  background:var(--blau-tief);border:1px solid var(--linie);
  border-top:3px solid var(--signal);padding:20px var(--rand) 22px;
  box-shadow:0 26px 52px -32px rgba(0,0,0,.9)}
.hell .massband{background:var(--blau);color:var(--text)}
.massband__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap}
.massband__kopf span{font-family:var(--f-l);font-size:.82rem;font-weight:600;
  color:var(--text-mut)}
.massband__kopf b{font-family:var(--f-m);font-weight:700;font-size:1.16rem;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.massband__spur{height:14px;background:rgba(242,243,248,.12);position:relative;overflow:hidden}
.massband__spur i{position:absolute;left:0;top:0;bottom:0;width:100%;display:block;
  background:var(--signal);transform-origin:left center;
  transform:scaleX(calc(var(--ziel,1) * var(--fort,1)))}
.massband__fuss{font-family:var(--f-l);font-size:.8rem;color:var(--text-mut);margin:0}
.massband__fuss b{color:var(--signal-hell);font-family:var(--f-m);font-weight:700}
@media (min-width:900px){
  .massband{padding:24px 30px 26px}
  .massband__spur{height:18px}
  .massband__kopf b{font-size:1.34rem}
}

/* --- Die Anrisslinie laeuft durch Katalog- und Datenblattzeilen weiter --- */
.anriss{position:absolute;left:0;bottom:-1px;height:2px;width:100%;display:block;
  background:var(--signal);transform-origin:left center;transform:scaleX(var(--fort,1));
  pointer-events:none}
.tafel tr{position:relative}
.tafel .anriss{bottom:0;opacity:.85}
.warenkarte{position:relative}
.anriss--oben{top:-1px;bottom:auto;z-index:2}

/* --- Teiltafel: Ersatzteilstrecke der Maschinenseite --- */
.teiltafel{width:100%;border-collapse:collapse}
/* Ab der zweispaltigen Breite liegt jede Baugruppentabelle auf DEMSELBEN Raster.
   Ohne feste Breiten rechnet jede der vier Tabellen ihre Spalten aus dem eigenen
   Inhalt und die Seite bekommt vier verschiedene Raster untereinander. */
@media (min-width:700px){
  .teiltafel{table-layout:fixed}
  .teiltafel col.sp-teil{width:38%}
  .teiltafel col.sp-nr{width:20%}
  .teiltafel col.sp-pr{width:20%}
  .teiltafel col.sp-tun{width:22%}
}
.teiltafel caption{text-align:left;font-family:var(--f-m);font-size:.68rem;
  letter-spacing:.06em;color:var(--signal-hell);padding-bottom:12px}
.teiltafel th,.teiltafel td{text-align:left;padding:12px 10px 12px 0;
  border-bottom:1px solid var(--linie);vertical-align:baseline}
.teiltafel thead th{font-family:var(--f-m);font-size:.66rem;letter-spacing:.06em;
  color:var(--text-mut);padding-bottom:9px}
.teiltafel tbody th{font-family:var(--f-l);font-weight:600;font-size:.95rem;color:#fff}
.teiltafel .nr{font-family:var(--f-m);font-size:.78rem;color:var(--text-mut);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.teiltafel .pr{font-family:var(--f-m);font-size:.86rem;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.teiltafel .pr em{display:block;font-style:normal;font-family:var(--f-l);font-size:.64rem;
  color:var(--text-mut)}
.teiltafel td:last-child{text-align:right;padding-right:0}
.teiltafel .schild--klein{white-space:nowrap}
@media (max-width:699px){
  .teiltafel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .teiltafel tbody th,.teiltafel td{display:block;padding:0;border:0}
  .teiltafel tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--linie);align-items:baseline}
  .teiltafel tbody th{grid-column:1}
  .teiltafel .nr{grid-column:1}
  .teiltafel .pr{grid-column:2;grid-row:1/3;text-align:right}
  .teiltafel td:last-child{grid-column:1/-1;text-align:left;margin-top:9px}
}

.vermerk--bild{border-left-color:var(--signal-hell)}

/* --- Papierfeld: die Breitenreihe auf vollbreitem Papier --- */
.papierfeld{background:var(--papier);color:var(--tinte);padding:32px 0 34px;
  margin:30px 0 0;position:relative;z-index:2;
  border-top:3px solid var(--signal);
  /* Licht kommt auf der ganzen Seite von oben: das Papierfeld liegt AUF der
     Sektion und wirft seinen Schatten nach unten, nicht nach oben. Die obere
     Kante trennt der Signalriegel. */
  box-shadow:0 18px 40px -34px rgba(0,0,0,.7)}
.papierfeld__satz{max-width:52ch;margin:0;color:var(--tinte-mut);font-size:.94rem}
.breitreihe{display:grid;gap:22px;margin-top:26px}
.breitzeile{min-width:0;padding-top:16px;border-top:1px solid var(--linie-hell);
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 16px;align-items:start}
.breitzeile__bild{margin:0;grid-row:1/3;background:var(--papier-tief);
  border:1px solid var(--papier-kante);overflow:hidden}
.breitzeile__bild img{width:100%;height:auto;display:block}
.breitzeile__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  min-width:0}
.breitzeile__kopf h3{font-size:1.02rem;color:var(--tinte);letter-spacing:-.018em}
.breitzeile__kopf b{font-family:var(--f-m);font-weight:700;font-size:1.02rem;color:var(--tinte);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.breitzeile__spur{height:20px;background:var(--papier-tief);position:relative;overflow:hidden;
  grid-column:2}
.breitzeile__spur i{position:absolute;left:0;top:0;bottom:0;width:100%;display:block;
  background:var(--blau);
  transform:scaleX(calc(var(--ziel,1) * var(--fort,1)));transform-origin:left center}
.breitzeile__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px;
  grid-column:1/-1}
.breitzeile__meta{font-family:var(--f-l);font-size:.82rem;color:var(--tinte-mut);flex:1 1 220px;
  min-width:0}
.breitzeile .preis{color:var(--tinte);flex:0 0 auto}
.breitzeile .preis em{color:var(--tinte-mut)}
.breitzeile[data-passt="nein"]{opacity:.4}
.breitzeile[data-passt="nein"] .schild{pointer-events:none}
.breitzeile[data-passt="nein"] .sperrvermerk{display:block;color:var(--signal-tief);
  border-color:rgba(156,74,15,.5);margin-top:9px;grid-column:1/-1}
@media (min-width:900px){
  .papierfeld{padding:44px 0 48px;margin-top:38px}
  .breitreihe{gap:26px}
  .breitzeile{grid-template-columns:130px minmax(0,1fr)}
  .breitzeile__spur{height:26px}
  .breitzeile__kopf h3{font-size:1.16rem}
  .breitzeile__kopf b{font-size:1.16rem}
}

/* Helle Fassungen fuer die per JavaScript eingesetzten Bausteine */
.hell .liste__leer{color:var(--tinte-mut)}
.hell .warenkarte__hinweis{color:var(--tinte-mut)}

/* ---------- CTA-Reihe: mobil volle Breite, ab 480 nebeneinander ---------- */
.tunreihe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.tunreihe--papier{margin-top:26px}
@media (max-width:479px){
  .tunreihe{display:grid;grid-template-columns:minmax(0,1fr);gap:13px}
  .tunreihe>.schild,.tunreihe>.terminknopf{width:100%;justify-content:center}
}

/* ---------- Leiser Terminknopf fuer Karten, Zeilen und Datenblatt ---------- */
.terminknopf{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:7px 14px;background:transparent;border:1px solid var(--linie-stark);
  color:var(--text);font-family:var(--f-l);font-weight:600;font-size:.86rem;
  cursor:pointer;border-radius:0;white-space:normal;flex-wrap:wrap;min-width:0;
  transition:border-color var(--dur-kurz) var(--ease),color var(--dur-kurz) var(--ease),
    background-color var(--dur-kurz) var(--ease)}
.terminknopf .kenn{font-family:var(--f-m);font-size:.62rem;letter-spacing:.03em;
  color:var(--text-mut);font-weight:400}
.terminknopf:hover{border-color:var(--signal-hell);color:var(--signal-hell)}
.terminknopf:hover .kenn{color:var(--signal-hell)}
.hell .terminknopf,.papierfeld .terminknopf{color:var(--tinte);border-color:var(--linie-hell-stark)}
.hell .terminknopf .kenn,.papierfeld .terminknopf .kenn{color:var(--tinte-mut)}
.hell .terminknopf:hover,.papierfeld .terminknopf:hover{border-color:var(--signal-tief);
  color:var(--signal-tief);background:rgba(156,74,15,.07)}
.hell .terminknopf:hover .kenn,.papierfeld .terminknopf:hover .kenn{color:var(--signal-tief)}
.tafel .terminknopf{margin:2px 0}

/* ---------- Lagerchip ----------
   Die Marke links ist ein Fuellstand, keine Ampel: voll, halb, leer. */
.lagerchip{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;
  font-family:var(--f-m);font-size:.66rem;letter-spacing:.03em;line-height:1.25;
  color:var(--text);border:1px solid var(--linie-stark);padding:6px 10px;
  width:fit-content;max-width:100%;font-variant-numeric:tabular-nums}
.lagerchip i{width:9px;height:9px;flex:0 0 auto;display:block;
  border:1px solid var(--signal-hell);background:transparent}
.lagerchip[data-lager="lager"] i{background:var(--signal-hell)}
.lagerchip[data-lager="frist"] i{
  background:linear-gradient(to top,var(--signal-hell) 0 50%,transparent 50% 100%)}
.lagerchip[data-lager="anfrage"] i{border-color:var(--text-mut)}
.lagerchip em{font-style:normal;color:var(--text-mut);font-size:.94em;white-space:nowrap}
.lagerchip em::before{content:"·";margin:0 5px 0 0}
.hell .lagerchip,.papierfeld .lagerchip{color:var(--tinte);border-color:var(--linie-hell-stark)}
.hell .lagerchip i,.papierfeld .lagerchip i{border-color:var(--signal-tief)}
.hell .lagerchip[data-lager="lager"] i,.papierfeld .lagerchip[data-lager="lager"] i{
  background:var(--signal-tief)}
.hell .lagerchip[data-lager="frist"] i,.papierfeld .lagerchip[data-lager="frist"] i{
  background:linear-gradient(to top,var(--signal-tief) 0 50%,transparent 50% 100%)}
.hell .lagerchip[data-lager="anfrage"] i{border-color:var(--tinte-mut)}
.hell .lagerchip em,.papierfeld .lagerchip em{color:var(--tinte-mut)}

.klassenkarte__stand{display:flex;align-items:center;justify-content:space-between;
  gap:10px 14px;flex-wrap:wrap;padding:14px 0 2px;min-width:0}
.klassenkarte__fuss .terminknopf{flex:0 0 auto}
.standleiste{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:24px}
.standleiste .preisnote{font-size:.76rem}

/* ---------- Verfuegbarkeitstafel auf der Startseite ---------- */
.standkopf{display:grid;gap:22px}
.standkopf__tun{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.standtafel{margin-top:28px;border-top:3px solid var(--signal)}
.standzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;
  align-items:center;padding:12px 0 14px;border-bottom:1px solid var(--linie);min-width:0}
.hell .standzeile{border-bottom-color:var(--linie-hell)}
.standzeile__name{grid-column:1;grid-row:1;display:inline-flex;align-items:center;gap:11px;
  min-height:44px;min-width:0;text-decoration:none;color:inherit;
  font-family:var(--f-d);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;
  transition:color var(--dur-kurz) var(--ease)}
.standzeile__name em{font-style:normal;font-family:var(--f-m);font-weight:400;
  font-size:.64rem;letter-spacing:.04em;color:var(--text-mut);flex:0 0 auto}
.hell .standzeile__name em{color:var(--tinte-mut)}
.standzeile__name:hover{color:var(--signal-hell)}
.hell .standzeile__name:hover{color:var(--signal-tief)}
.standzeile .lagerchip{grid-column:1;grid-row:2;justify-self:start}
.standzeile .terminknopf{grid-column:2;grid-row:1/3;align-self:center;justify-self:end}
@media (max-width:759px){
  .standzeile .lagerchip{grid-column:1/-1;grid-row:2;width:auto}
  .standzeile .terminknopf{grid-column:2;grid-row:1;align-self:center}
  .standzeile .terminknopf .kenn{display:none}
}
@media (min-width:760px){
  .standzeile{grid-template-columns:minmax(0,1fr) minmax(0,auto) max-content;
    gap:14px 20px;padding:11px 0}
  .standzeile .lagerchip{grid-column:2;grid-row:1;justify-self:end;max-width:none}
  .standzeile .terminknopf{grid-column:3;grid-row:1}
}
@media (min-width:900px){
  .standkopf{grid-template-columns:minmax(0,1.35fr) minmax(0,auto);align-items:end;gap:40px}
  .standkopf__tun{align-items:flex-end}
}

/* ---------- Terminfenster (Attrappe) ---------- */
.termin{position:fixed;inset:0;z-index:80;display:none}
.termin[data-offen="true"]{display:block}
.termin__grund{position:absolute;inset:0;z-index:1;background:rgba(5,10,40,.76);
  border:0;width:100%;padding:0;cursor:pointer}
.termin__blatt{position:absolute;z-index:2;left:0;right:0;bottom:0;
  max-height:94svh;display:flex;flex-direction:column;overscroll-behavior:contain;
  background:var(--blau-tief);border-top:3px solid var(--signal)}
.termin__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px var(--rand);border-bottom:1px solid var(--linie);background:var(--blau);
  flex:0 0 auto}
.termin__kopf b{display:block;font-family:var(--f-d);font-weight:700;font-size:1.06rem;
  color:var(--text)}
.termin__gegenstand{display:block;font-family:var(--f-m);font-size:.66rem;letter-spacing:.03em;
  color:var(--signal-hell);margin-top:3px}
.termin__inhalt{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:18px var(--rand) 4px}
.termin__feld{border:0;padding:0;margin:0 0 20px;min-width:0}
.termin__feld legend{font-family:var(--f-l);font-weight:700;font-size:.8rem;
  color:var(--text-mut);padding:0;margin-bottom:10px}
.termin__weiter{width:100%;justify-content:center;margin-bottom:18px}
.termin__fuss{flex:0 0 auto;margin:0;padding:13px var(--rand) calc(17px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie);background:var(--blau);
  font-family:var(--f-l);font-size:.76rem;line-height:1.55;color:var(--text-mut)}
.tagreihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tagchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;padding:6px 4px;background:transparent;border:1px solid var(--linie);
  color:var(--text);cursor:pointer;border-radius:0;font-family:var(--f-m);
  transition:background-color var(--dur-kurz) var(--ease),border-color var(--dur-kurz) var(--ease),
    color var(--dur-kurz) var(--ease)}
.tagchip b{font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.tagchip span{font-size:.6rem;letter-spacing:.03em;color:var(--text-mut)}
.tagchip:hover{border-color:var(--signal-hell);color:var(--signal-hell)}
.tagchip:hover span{color:var(--signal-hell)}
.tagchip[aria-pressed="true"]{background:var(--signal-fest);border-color:var(--signal-fest);color:#fff}
.tagchip[aria-pressed="true"] span{color:rgba(255,255,255,.82)}
.zeitwahl{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.zeitknopf{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
  min-height:56px;padding:9px 15px;background:transparent;border:1px solid var(--linie);
  color:var(--text);cursor:pointer;border-radius:0;text-align:left;
  font-family:var(--f-l);font-weight:600;font-size:.94rem;
  transition:background-color var(--dur-kurz) var(--ease),border-color var(--dur-kurz) var(--ease),
    color var(--dur-kurz) var(--ease)}
.zeitknopf em{font-style:normal;font-family:var(--f-m);font-size:.62rem;letter-spacing:.03em;
  color:var(--text-mut);font-weight:400}
.zeitknopf:hover{border-color:var(--signal-hell);color:var(--signal-hell)}
.zeitknopf:hover em{color:var(--signal-hell)}
.zeitknopf[aria-pressed="true"]{background:var(--signal-fest);border-color:var(--signal-fest);color:#fff}
.zeitknopf[aria-pressed="true"] em{color:rgba(255,255,255,.82)}
.termin__quittung h3{font-size:1.14rem;color:#fff;margin-bottom:6px}
.termin__quittung .tafel{margin-top:14px}
.termin__quittung .tunreihe{margin-top:20px;margin-bottom:18px}
.termin__zurueck{background:transparent;border:0;padding:12px 0;min-height:44px;cursor:pointer;
  font-family:var(--f-l);font-weight:600;font-size:.88rem;color:var(--text);
  border-bottom:2px solid var(--text);width:fit-content}
.termin__zurueck:hover{color:var(--signal-hell);border-bottom-color:var(--signal-hell)}
@media (min-width:480px){
  .zeitwahl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:760px){
  .termin__blatt{left:50%;top:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);width:min(580px,calc(100vw - 64px));max-height:86vh;
    border:1px solid var(--linie-stark);border-top:3px solid var(--signal);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
  .termin__fuss{padding-bottom:17px}
}

/* Runde 16: hier stand der Belegungsplan der Vermietung (Kalenderraster,
   Zellenzustaende frei/belegt/zu, Legende). Mit der Route /vermietung/ ist er
   entfallen; die Regeln sind ersatzlos geloescht statt tot mitgeschleppt. */

/* ---------- Gemessene Nachbesserungen (Reihenfolge zaehlt) ---------- */

/* Die Beschriftung "Besichtigungstermin vereinbaren" bricht auf 390 zweizeilig
   um. Zwei Fassungen desselben Wortes, umgeschaltet an derselben Kante wie der
   Hero-Beschnitt (559/560). */
.nur-breit{display:none}
.nur-schmal{display:inline}
@media (min-width:560px){
  .nur-breit{display:inline}
  .nur-schmal{display:none}
}

/* Trefferflaechen im Fuss: 13 Links je Seite, Haus-Mindestmass 44 px. */
.fuss__liste a{display:flex;align-items:center;min-height:44px;padding:2px 0}
.fuss__klein a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.marke-z a{display:inline-flex;align-items:center;padding:11px 0;margin:-11px 0}
.klassenkarte h3 a{display:inline-flex;align-items:center;padding:14px 0;margin:-14px 0}

/* p:last-child{margin-bottom:0} aus Abschnitt 2 gewinnt gegen eine reine Klasse
   (0,1,1 gegen 0,1,0) - deshalb hier mit Elementnamen. */
p.kontaktnotiz{color:var(--text-mut);margin:20px 0 40px}

/* Kopfbaender, unter denen ein Massband die Sektionsgrenze kreuzt, brauchen
   den Platz dafuer. */
.band--mit-band>figure{height:clamp(430px,66svh,600px)}
.band--mit-band .band__txt{padding-bottom:112px}
@media (min-width:900px){
  .band--mit-band>figure{height:clamp(480px,74svh,690px)}
  .band--mit-band .band__txt{padding-bottom:140px}
}

/* Handy-Hero: die Maschine bekommt den oberen Teil des Bildschirms ganz fuer
   sich, der blaue Textriegel schiebt sich darunter und ueberlappt sie. */
@media (max-width:559px){
  .ab-breit{display:none}
  .hero{padding-top:10px;padding-bottom:34px}
  .hero__buehne{margin:0 calc(var(--rand) * -0.5)}
  .hero__text{margin-top:-38px;margin-left:0;margin-right:0}
  .hero__lead{margin-top:12px;font-size:.98rem;line-height:1.48}
  /* Der Textriegel schiebt sich 38 px unter die Maschine und deckte den
     Tafelfuss halb zu. Der Vermerk steht auf dem Handy in der Standzeile. */
  .hero .buehne__fuss{display:none}
  .buehne__bild{width:fit-content;margin:0 auto}
  .buehne__bild img{max-height:37svh;width:auto}
  .masschip{font-size:.62rem;padding:3px 7px}
  .masschip--breite{top:66%}
}

/* ---------- Gemessene Nachbesserungen, Runde 7 ----------
   Alles hier ist ein Sondenbefund, keine Ahnung. Reihenfolge zaehlt: diese
   Regeln stehen nach ihren Grundfassungen. */

/* Befund (/bagger/ 360/390/1440): der Verweis "eigene Seite" in der Tafelzeile
   war 90x21 px. Trefferbox ueber Innenabstand, Zeilenoptik unveraendert. */
.tafel a{display:inline-flex;align-items:center;min-height:44px;padding:11px 0;margin:-11px 0}

/* Befund (/kontakt/ 360): Eingabefelder liefen 4 px ueber ihre Spalte. */
.feld{width:100%;max-width:100%;min-width:0}

/* Befund (/ und /bagger/r13-pro/ 360/390): auf dem Handy hugged die Tafel das
   Bild (width:fit-content), die Masschips ragten 22 px darueber hinaus.
   Die Chips bleiben jetzt innerhalb der Bildflaeche. */
@media (max-width:559px){
  .masschip{max-width:96%}
  .masschip--weite{left:50%}
  .masschip--breite{left:var(--chip-b-schmal,var(--chip-b-breit,52%));top:66%}
  .masschip--hoehe{right:0;top:2%}
  /* Wo ein Hochkant-Beschnitt ausgeliefert wird, zeichnet die Hochkant-Kette. */
  .buehne--hoch .buehne__mass--breit{opacity:0}
  .buehne--hoch .buehne__mass--schmal{opacity:1}
}

/* ---------- Runde 8: gemessene Nachbesserungen ----------
   Alles hier ist Befund der eigenen Abnahme. Die Regeln
   stehen bewusst am Dateiende: die letzte Regel gewinnt (FEHLER-019). */

/* Beispielabbildung-Chip. Bauart wie der Lagerchip: Mono, klein, ohne
   Ampelfarbe, direkt am Gegenstand. Entscheidung des Auftraggebers: die
   Werkzeugmotive bleiben, sie heissen aber, was sie sind. */
.beispielchip{position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--f-m);font-size:.58rem;letter-spacing:.04em;line-height:1;
  padding:5px 7px;background:rgba(19,26,46,.82);color:#F2EFE8;
  border-top:2px solid var(--signal);white-space:nowrap;pointer-events:none}
/* .beispielchip--eck ist mit den Eckfaehnchen der Werkzeugkacheln entfallen. */
.warenkarte__bild,.breitzeile__bild,.werkzeugwand__feld{position:relative}
@media (max-width:559px){
  .beispielchip{font-size:.54rem;padding:4px 6px}
}

/* Klassenkarten /bagger/: gemeinsame Standlinie als gezeichnete Linie ueber
   allen drei Karten. Die Bilder liegen im gemeinsamen Massstab vor
   (work/r9/bilder9.mjs), die Linie macht den Bezug sichtbar. */
.klassenkarte__bild{position:relative}
.standlinie{position:absolute;left:0;right:0;top:88.5%;height:1px;display:block;
  background:rgba(156,74,15,.55);z-index:2;pointer-events:none}
.standlinie::after{content:"";position:absolute;left:0;top:-3px;width:2px;height:7px;
  background:var(--signal-tief)}
.massstabnote{font-family:var(--f-l);font-size:.84rem;color:var(--text-mut);
  max-width:62ch;margin:0 0 22px}
.massstabnote b{color:var(--signal-hell);font-weight:700}
.hell .massstabnote{color:var(--tinte-mut)}
.hell .massstabnote b{color:var(--signal-tief)}

/* Startseite: die Kennwertleiste am Hero-Fuss kreuzt die Sektionsgrenze. */
.hero__fuss{position:relative;z-index:3;padding-bottom:0}
@media (min-width:900px){
  .hero__raster{min-height:calc(100svh - var(--kopf-h) - 96px)}
  .hero{padding-bottom:0}
}
@media (max-width:899px){
  .hero__fuss{margin-top:26px}
}

/* /anbaugeraete/: das Papierfeld liegt jetzt AUF der Kante zwischen Kopf- und
   Katalogsektion statt bündig darunter. */
.papierfeld--kreuzt{margin-top:-64px;z-index:3}
@media (min-width:900px){
  .papierfeld--kreuzt{margin-top:-78px}
}

/* /service/: Werkbuch als eigene Kopfbauform. Fuenf Zeilen, jede mit ihrer
   eigenen scrollgebundenen Linie - dieselbe Zeichensprache wie die Massketten,
   nur auf Papier. */
.werkbuch{margin-top:26px;border-top:3px solid var(--signal)}
.werkbuch__zeile{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:baseline;
  padding:11px 0 12px;border-bottom:1px solid var(--linie-hell)}
.werkbuch__nr{grid-row:1/3;font-family:var(--f-m);font-size:.66rem;letter-spacing:.04em;
  color:var(--signal-tief);align-self:center}
.werkbuch__zeile b{font-family:var(--f-d);font-weight:700;font-size:1.06rem;
  letter-spacing:-.02em;color:var(--tinte)}
.werkbuch__wie{font-family:var(--f-l);font-size:.84rem;color:var(--tinte-mut);grid-column:2}
.werkbuch__zeile i{position:absolute;left:0;right:0;bottom:-1px;height:2px;display:block;
  background:var(--signal);transform:scaleX(var(--fort,0));transform-origin:left center}
.werkbuch__bild{position:relative;background:var(--papier-tief)}
.werkbuch__bild img{width:100%;height:auto;display:block}
.werkbuch__bild figcaption{position:absolute;left:0;bottom:0;
  font-family:var(--f-m);font-size:.6rem;letter-spacing:.04em;
  padding:6px 9px;background:rgba(19,26,46,.82);color:#F2EFE8;
  border-top:2px solid var(--signal)}
@media (min-width:900px){
  .werkbuch__bild{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .werkbuch__zeile i{transform:scaleX(1)}
}

/* Runde 8, zweite Messung: der Chip lag in der Werkzeugwand auf der Bildunterschrift.
   Er wandert dort an die Oberkante; in der schmalen Breitzeile traegt die Metazeile
   das Wort statt eines Chips, der breiter waere als das Vorschaubild. */
/* Runde 16: die Werkzeugkacheln tragen ihre Kennzeichnung nicht mehr als Eckfaehnchen
   auf dem Bild, sondern als Zusatz in ihrer Bildunterschrift ("Tieflöffel 300 mm ·
   Beispielabbildung"). Grund: im ersten Bildschirm von /anbaugeraete/ standen vier
   gleiche schwebende Etiketten uebereinander und lasen sich als unfertige Demo. Die
   ZAHL der Kennzeichnungen ist unveraendert (vier Kacheln, vier Kennzeichnungen,
   gleicher Wortlaut, Gesamtzaehlung im HTML nachgemessen gleich) - sie stehen nur an
   der Stelle, an der ohnehin gelesen wird. Die Regel selbst ist ersatzlos geloescht. */
.breitzeile__bild .beispielchip{display:none}

/* Das Papierfeld muss die Sektionsgrenze SICHTBAR kreuzen. Ueber margin-top
   wandert sonst die ganze Sektion mit (Margin-Collapsing), gemessen in der
   ersten Kontrollaufnahme. Deshalb versetzt statt verschoben. */
.papierfeld--kreuzt{margin-top:30px;top:-78px;margin-bottom:-48px;position:relative;z-index:3}
@media (max-width:899px){
  .papierfeld--kreuzt{top:-62px;margin-bottom:-36px}
}

/* Gemessen (probe-r10/home 1440): die Kennwertleiste kreuzte die Sektionsgrenze
   NICHT, weil der Hero seine eigene Mindesthoehe behielt und die Leiste 48 px
   ueber der Unterkante stehen blieb. Die Mindesthoehe traegt jetzt allein das
   Hero-Raster; der Hero ist so hoch wie sein Inhalt. */
@media (min-width:900px){
  .hero{min-height:0}
}

/* Erster Versuch und warum er falsch war:
   der Hero wurde auf z-index 6 gehoben, damit die an seinem Fuss haengende
   Kennwertleiste ueber der Folgesektion liegt. Gemessen half das nichts (die
   Leiste blieb ueberdeckt) und es kehrte den Fehler spaeter um: als die Leiste in
   die Folgesektion wanderte, verdeckte der hochgesetzte Hero ihre obere Haelfte
   samt aller vier Zahlen. Die Regel ist deshalb wieder draussen; der Hero bleibt
   auf z-index 3, und das kreuzende Bauteil sitzt in der Sektion, die oben liegt. */

/* Die Kennwertleiste der Startseite wird aus der Folgesektion nach oben ueber die
   Kante gezogen, statt aus dem Hero herauszuhaengen. Der Betrag ist groesser als
   die Kopfpolsterung von .nach-kreuzung, sonst bleibt sie innerhalb der Sektion. */
.kreuzt-hoch--leiste{margin-top:-140px;margin-bottom:34px}
@media (min-width:900px){
  .kreuzt-hoch--leiste{margin-top:-172px;margin-bottom:44px}
}
.hero__fuss{display:none}

/* Gemessen, nachdem zwei Versuche gescheitert waren: der Hero steht auf
   z-index 3, die Folgesektion bildet ueber .koernung{isolation:isolate} einen
   eigenen Stapelkontext mit z-index auto - ihre Kinder koennen den Hero deshalb
   nie ueberragen, egal welchen z-index sie selbst tragen. Angehoben wird darum
   die SEKTION, nicht das Bauteil. Ihr Hintergrund beginnt an ihrer eigenen
   Oberkante; nach oben ragt nur die Kennwertleiste. */
.ueber-hero{position:relative;z-index:5}

/* ---------------------------------------------------------------------------
   Runde 9, Mobile-Pass, Kritiker-Kill 5: /service/ war die einzige Marketing-
   route ohne Bild im ersten Screen (gemessen heroBildanteil 0 bei 360 und 390;
   die Werkstattaufnahme stand erst bei y>844). Auf dem Geraet, auf dem der
   Inhaber den Link oeffnet, war der Einstieg damit reiner Text.
   Die Aufnahme wandert unter 900 px vor das Werkbuch - dieselbe Mechanik, die
   .diptychon--bild-zuerst schon fuer die Maschinenbilder benutzt, also keine
   neue Bauform. Als Band im 16:10-Ausschnitt, damit Kicker, H1 und Einleitung
   im selben Screen bleiben und die Liste direkt darunter anschliesst.
   Ausschliesslich max-width: der abgenommene Desktop kann davon nicht
   erreicht werden. */
@media (max-width:899px){
  .werkbuch__bild{order:-1;margin-bottom:4px}
  .werkbuch__bild img{aspect-ratio:16/10;height:auto;object-fit:cover;object-position:50% 42%}
}

/* ===========================================================================
   Runde 10 - Scroll-Kinematik "Der Arm arbeitet" (nur Rippa R15 ECO)
   ---------------------------------------------------------------------------
   Drei Ebenen aus einer echten Aufnahme, verschachtelt wie die Maschine selbst:
   der Loeffel liegt IM Ausleger und erbt dessen Drehung. Gedreht wird um die
   gemessenen Bolzen (work/kinematik/ebenen2.py), deshalb entsteht kein Loch.
   Animiert wird ausschliesslich transform; der Fortschritt kommt als eine Zahl
   (--kin) aus riss.js, die Winkel rechnet calc(). Kein Pinning, kein Scroll-Lock.

   Reihenfolge in diesem Block: nackte Regeln, dann min-width, dann max-width.
   Eine nackte Regel HINTER einer max-width-Abfrage wuerde auf allen Breiten
   gewinnen (FEHLER-019).
   =========================================================================== */
.kinraster{display:grid;gap:26px}
.kinraster__text,.kinraster__bild,.kinraster__weg{min-width:0}

.kin{position:relative;margin:0;color:var(--signal-hell)}
.hell .kin{color:var(--signal-tief)}
.kin__feld{position:relative;aspect-ratio:1835/1713;margin-inline:auto;
  max-width:min(100%,66svh)}
.kin__ebenen{position:absolute;left:0;top:0;width:var(--bildanteil,92%);
  aspect-ratio:1685/1473;z-index:1}
/* Lichtinsel und Standschatten: dieselbe Behandlung, die jede andere Maschine auf
   dieser Seite traegt (.buehne__licht plus eingebackener Standschatten). Bei einem
   drehenden Arm kann der Schatten nicht mit ins Bild gebacken werden - er gehoert
   ohnehin ans Fahrwerk, das stillsteht, und sitzt deshalb genau auf der gemessenen
   Standlinie (Mitte 62,56 % / 85,35 % des Zeichenfeldes, Breite nach der gemessenen
   Fahrwerksaufstandsflaeche 622 bis 1673 von 1835). Ohne beides schwebt der
   Freisteller auf der Flaeche - genau der Bruch, den die zweite Instanz benannt hat. */
.kin__licht{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.kin__licht::before,.kin__licht::after{content:"";position:absolute;display:block}
.kin__licht::before{left:3%;right:8%;top:2%;height:84%;
  background:radial-gradient(56% 50% at 54% 54%,rgba(150,178,255,.22),rgba(12,34,128,0) 70%);
  animation:streiflicht 13s var(--ease) infinite alternate}
.kin__licht::after{left:32.04%;width:61.03%;top:82.65%;height:5.40%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(1,4,18,.88),rgba(1,4,18,.34) 46%,rgba(1,4,18,0) 74%)}
.hell .kin__licht::before{
  background:radial-gradient(58% 52% at 54% 54%,rgba(12,34,128,.10),rgba(12,34,128,0) 72%)}
.hell .kin__licht::after{
  background:radial-gradient(50% 50% at 50% 50%,rgba(19,26,46,.42),rgba(19,26,46,.16) 46%,rgba(19,26,46,0) 74%)}
.kin__ebenen picture{display:block;width:100%}
.kin__blatt{display:block;width:100%;height:auto}
.kin__arm,.kin__loeffel{position:absolute;inset:0}
/* Runde 16: der Loeffel liegt UNTER dem Arm. Er bleibt Kind von .kin__arm (die
   kinematische Kette: er erbt dessen Drehung) und steht im Markup vor dem Armbild,
   aber ein absolut gesetztes Kind malt sonst ueber den Flussinhalt seines Elters.
   Deshalb bekommt genau das Armbild eine eigene Stapelstufe. Grund: der Loeffel
   traegt seit Runde 16 zusaetzliches echtes Material (den Schnellwechsler), das in
   Ruhe vollstaendig unter dem Arm verschwinden muss und erst beim Drehen die Fuge
   fuellt. Vorgaenger war ein abgedunkelter Gelenkpfropfen mit harter Kante. */
.kin__arm > picture{position:relative;z-index:1}
.kin__arm{transform:rotate(calc(var(--kin-a,0) * -26deg));transform-origin:50.623% 73.048%}
/* Drehrichtung gemessen (work/kinematik/bolzen.py): bei -44 Grad wandert die
   Zahnreihe 162 px nach OBEN, bei +44 Grad 155 px nach UNTEN. Der Loeffel rollt
   in die Grabstellung, also +44. */
.kin__loeffel{transform:rotate(calc(var(--kin-l,0) * 44deg));transform-origin:15.49% 58.792%}
.kin--aktiv .kin__arm,.kin--aktiv .kin__loeffel{will-change:transform}
.kin__riss{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.kin__riss path{vector-effect:non-scaling-stroke}
.kin__riss [data-zeichnen]{stroke-dasharray:var(--laenge,400);
  stroke-dashoffset:calc(var(--laenge,400) * (1 - var(--fort,0)))}
.kin__riss [data-spitze]{opacity:var(--spitze,0);transition:opacity 200ms linear}
.kin__stand{stroke-width:2.4}
.kin__erde{color:var(--signal-hell);opacity:calc(var(--sicht,0) * .42)}
.hell .kin__erde{color:var(--signal)}
.kin__chip{z-index:4}
.kin__chip--hoehe{right:1.2%;top:87.6%}
.kin__chip--weite{left:1.6%;top:79.6%}
.kin__chip--tiefe{left:24%;top:88.4%}
.kin__fuss{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;font-family:var(--f-l);font-size:.74rem;line-height:1.5;
  color:var(--text-mut)}
.hell .kin__fuss{color:var(--tinte-mut)}
.kin__fuss span:last-child{flex:1 1 260px;min-width:0}

/* Die Wegleiste: drei Stationen, eine durchgehende Orangeachse.
   Der Balken links jeder Station fuellt sich in ihrer eigenen Spanne, die
   Station selbst tritt aus dem Halbdunkel, wenn ihre Armstellung erreicht ist.
   Das ist dieselbe Zeichensprache wie die Kennwertleiste, nur senkrecht. */
.kinweg{list-style:none;margin:26px 0 0;padding:0}
.kinweg__halt{display:flex;gap:16px;align-items:stretch;padding:14px 0;
  border-top:1px solid rgba(242,243,248,.16)}
.hell .kinweg__halt{border-top-color:var(--papier-kante)}
.kinweg__halt:first-child{border-top:0;padding-top:0}
.kinweg__spur{flex:0 0 3px;position:relative;overflow:hidden;
  background:rgba(232,130,47,.22);align-self:stretch}
.hell .kinweg__spur{background:rgba(194,95,23,.22)}
.kinweg__spur b{position:absolute;inset:0;display:block;background:var(--signal-hell);
  transform:scaleY(var(--fort,0));transform-origin:50% 0}
.hell .kinweg__spur b{background:var(--signal)}
.kinweg__nr{flex:0 0 auto;font-family:var(--f-m);font-size:.72rem;line-height:1.5;
  color:var(--signal-hell);padding-top:2px;font-variant-numeric:tabular-nums}
.hell .kinweg__nr{color:var(--signal-tief)}
.kinweg__txt{min-width:0;flex:1 1 auto;
  opacity:calc(.42 + var(--sicht,0) * .58);
  transition:opacity var(--dur-kurz) var(--ease)}
.kinweg__txt strong{display:block;font-family:var(--f-d);font-weight:700;
  font-size:1.02rem;line-height:1.25}
.kinweg__mass{display:block;font-family:var(--f-m);font-size:.78rem;margin-top:5px;
  color:var(--text-mut);font-variant-numeric:tabular-nums}
.hell .kinweg__mass{color:var(--tinte-mut)}
.kinweg__mass b{color:var(--signal-hell);font-weight:700;margin-left:7px;
  white-space:nowrap}
.hell .kinweg__mass b{color:var(--signal-tief)}
.kinweg__txt em{display:block;font-style:normal;font-size:.84rem;margin-top:6px;
  color:var(--text-mut);max-width:40ch}
.hell .kinweg__txt em{color:var(--tinte-mut)}

@media (min-width:900px){
  /* Zwei Spalten mit gestapeltem Textblock: Kopf oben links, Wegleiste
     darunter, die Zeichnung ueber die volle Hoehe rechts daneben. Ein
     Rasterschema, das sonst nirgends auf der Seite vorkommt. */
  .kinraster{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-areas:"text bild" "weg bild";
    grid-template-rows:auto 1fr;gap:22px 46px;align-items:start}
  .kinraster__text{grid-area:text}
  .kinraster__weg{grid-area:weg}
  .kinraster__bild{grid-area:bild;align-self:center}
  .kinraster--gedreht{grid-template-areas:"bild text" "bild weg";
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .kinweg{margin-top:8px}
}
@media (max-width:899px){
  /* Handy: Kopf, dann die Zeichnung, dann die Wegleiste. So steht die
     Maschine im Bild, waehrend die Stationen darunter durchlaufen. */
  .kinraster{gap:20px}
  .kinweg{margin-top:4px}
  .kinweg__txt em{font-size:.82rem}
}
@media (max-width:559px){
  /* Randlos: die Zeichnung nutzt die ganze Geraetebreite, damit die Bewegung
     auch auf 390 px lesbar bleibt. Kein horizontaler Ueberlauf, weil nur die
     Aussenabstaende der Bahn zurueckgenommen werden. */
  .kinraster__bild{margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1)}
  .kin__fuss{margin-left:var(--rand);margin-right:var(--rand)}
  .kin__chip{font-size:.62rem;padding:3px 7px}
  /* Auf 360 px standen Grabtiefe und Transporthoehe auf derselben Zeile und
     lagen 8 px auseinander. Die drei Masschips werden hier gestaffelt: jeder
     sitzt auf der Hoehe der Strecke, die er benennt (Reichweite ueber der
     Grundlinie, Transporthoehe auf der Standlinie 85,3 %, Grabtiefe darunter
     am Tiefenpfeil). Keine Beruehrung mehr, keine geraten Werte. */
  .kin__chip--weite{left:1.2%;top:77.5%}
  .kin__chip--hoehe{right:1.2%;top:85.2%}
  .kin__chip--tiefe{left:13%;top:92.6%}
}
@media (prefers-reduced-motion:reduce){
  /* Feste Stellung statt Bewegung: die ENDstellung, weil sie als einzige zu
     der fertig gezeichneten Bemassung passt (Ausleger 26 Grad vorn, Loeffel
     44 Grad eingerollt, Zaehne nach unten). riss.js startet hier gar nicht. */
  .kin{--kin:1;--kin-a:1;--kin-l:1}
  .kin__licht::before{animation:none}
  .kin__riss [data-zeichnen]{stroke-dashoffset:0}
  .kin__riss [data-spitze]{opacity:1}
  .kin__erde{opacity:.42}
  .kinweg__spur b{transform:scaleY(1)}
  .kinweg__txt{opacity:1}
  .kin--aktiv .kin__arm,.kin--aktiv .kin__loeffel{will-change:auto}
}

/* =========================================================================
   11 Kopfbauformen der Maschinenseiten
   Vier Maschinen, vier Skelette. Regel des Hauses: naked-Regeln, die eine
   Handy-Breakpoint ueberschreiben muesste, stehen in @media(min-width:...)
   (FEHLER-019). Jede Textspalte traegt min-width:0 (FEHLER-008).
   ========================================================================= */

/* --- r13-pro: Breitkopf. Titelzeile ueber die ganze Bahn, Maschine als Band. */
.kopfbreit__zeile{display:grid;gap:10px;align-items:end;margin-bottom:22px}
.kopfbreit__zeile h1{font-size:clamp(2.3rem,10.6vw,4.4rem);letter-spacing:-.032em}
.kopfbreit__rolle{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-top:8px;border-top:2px solid var(--signal-hell)}
.kopfbreit__rolle b{font-family:var(--f-l);font-weight:700;font-size:.94rem;color:var(--text)}
.kopfbreit__rolle span{font-family:var(--f-m);font-size:.68rem;letter-spacing:.04em;
  color:var(--text-mut)}
/* Das Band bricht bewusst aus der Bahn aus und traegt einen eigenen Grund:
   die Maschine steht auf einer Flaeche, die breiter ist als der Textsatz. */
.kopfbreit__band{position:relative;margin:0 0 26px;padding:clamp(14px,2.6vw,26px) 0;
  background:linear-gradient(180deg,var(--blau-nacht),var(--blau-tief) 78%)}
.kopfbreit__band::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--signal)}
.kopfbreit__fuss{display:grid;gap:22px;margin-bottom:26px}
.kopfbreit__lead{margin:0;font-size:1.12rem;color:var(--text);max-width:34ch}
/* Das Band ist breit, die Maschine darin bleibt lesbar gross statt riesig:
   der Freisteller sitzt in der Mitte eines Feldes, das breiter ist als er. */
.kopfbreit__band .buehne{max-width:860px;margin-inline:auto}

/* --- r10-eco: Karteikopf. Einzige Maschinenseite mit hellem Kopf. */
/* Mobil steht die Maschine VOR dem Textblock: der erste Bildschirm einer
   Maschinenseite darf keine Textwueste sein. Die Kennschiene laeuft dort quer
   statt hoch, damit die Aufnahme noch auf den ersten Screen kommt. */
.kopfkarte{display:grid;gap:22px}
.kopfkarte__schiene{order:1;border-top:3px solid var(--signal);padding-top:12px;min-width:0;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;align-items:center}
.kopfkarte__bild{order:2}
.kopfkarte__text{order:3}
.kopfkarte__klasse{display:block;font-family:var(--f-d);font-weight:700;
  font-size:clamp(2.9rem,13.5vw,5.2rem);line-height:.84;letter-spacing:-.05em;
  color:var(--signal-tief)}
.kopfkarte__dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:0;
  font-size:.8rem}
.kopfkarte__dl dt{font-family:var(--f-l);font-weight:600;color:var(--tinte-mut)}
.kopfkarte__dl dd{margin:0;color:var(--tinte);font-size:.78rem}
.kopfkarte__lead{margin:14px 0 0;font-size:1.04rem;color:var(--tinte-mut);max-width:38ch}
.kopfkarte__wofuer{margin:16px 0 0;font-size:.9rem;color:var(--tinte-mut);max-width:44ch}
.kopfkarte__wofuer b{font-family:var(--f-l);font-weight:700;color:var(--tinte);
  display:block;font-size:.78rem;margin-bottom:4px}

/* --- rs04: Kontrastkopf. Blau links, Papierfeld rechts ueber den Rand hinaus. */
/* Mobil steht die Maschine zwischen Titelzeile und Bedienteil, damit der erste
   Bildschirm des Kompaktladers eine Maschine zeigt und nicht nur Text
   (gemessen: heroBildanteil @390 von 0 auf 0,3). */
.kopfkontrast{display:grid;gap:24px}
.kopfkontrast__kopf{order:1}
.kopfkontrast__tafel{order:2}
.kopfkontrast__text{order:3}
/* Der Anschnitt nach rechts entsteht STRUKTURELL: ab 900 px nimmt die Bahn
   dieser Sektion ihren rechten Innenabstand zurueck und laeuft bis zum
   Fensterrand, waehrend der linke Rand auf der Seitenflucht bleibt. Keine
   vw-Rechnung, kein negativer Aussenabstand - also weder Querscrollen noch
   ein neuer Behaelterueberlauf (FEHLER-008/-019). Mobil bleibt der kleine
   Anschnitt der Bahnbreite, dieselbe Mechanik wie .anschnitt. */
.kopfkontrast__tafel{position:relative;background:var(--papier);color:var(--tinte);
  padding:clamp(16px,3vw,22px);margin-top:3px;
  margin-right:calc(var(--rand) * -1);
  border-top:3px solid var(--signal)}
.kopfkontrast__werte{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:18px 0 0;
  background:var(--papier-kante)}
.kopfkontrast__werte>div{background:var(--papier);padding:10px 12px;min-width:0}
.kopfkontrast__werte dt{font-family:var(--f-l);font-size:.68rem;font-weight:600;
  color:var(--tinte-mut);margin:0 0 3px}
.kopfkontrast__werte dd{margin:0;font-family:var(--f-m);font-weight:700;font-size:1.02rem;
  color:var(--tinte);font-variant-numeric:tabular-nums}

@media (min-width:900px){
  .kopfbreit__zeile{grid-template-columns:minmax(0,1fr) auto;gap:30px}
  .kopfbreit__rolle{border-top:0;border-left:2px solid var(--signal-hell);
    padding:2px 0 2px 14px;display:block}
  .kopfbreit__rolle span{display:block;margin-top:3px}
  .kopfbreit__fuss{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;
    align-items:start}
  .kopfkarte{grid-template-columns:minmax(0,168px) minmax(0,1fr) minmax(0,1.12fr);
    gap:34px;align-items:start}
  .kopfkarte__schiene{display:block;order:0}
  .kopfkarte__text{order:0}
  .kopfkarte__bild{order:0}
  .kopfkarte__dl{margin-top:16px}
  .kopfkarte__wofuer{max-width:none}
  .kopfkontrast{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    grid-template-areas:"kopf tafel" "text tafel";gap:20px 40px;align-items:stretch}
  .kopfkontrast__kopf{grid-area:kopf;order:0;align-self:end}
  .kopfkontrast__text{grid-area:text;order:0}
  .kopfkontrast__tafel{grid-area:tafel;order:0;
    display:flex;flex-direction:column;justify-content:center}
  .kopfkontrast__tafel{padding:30px 34px 30px 30px;margin-right:0}
  /* Bahn dieser Sektion: links auf der Seitenflucht, rechts randlos */
  .kopf-kontrast>.bahn{max-width:none;
    padding-left:max(var(--rand), calc((100% - 1360px) / 2 + var(--rand)));
    padding-right:0}
  .kopfkontrast__werte{grid-template-columns:repeat(4,1fr)}
}

/* --- Kill 6: Registerkopf (/ersatzteile/) und Bogenkopf (/kontakt/) -------- */
.registerkopf,.bogenkopf{display:grid;gap:24px}
.registerkopf__reg{list-style:none;margin:26px 0 0;padding:0;
  border-top:2px solid var(--signal-hell)}
.registerkopf__reg li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--linie)}
.registerkopf__nr{font-family:var(--f-m);font-size:.66rem;color:var(--signal-hell)}
.registerkopf__name{font-family:var(--f-l);font-weight:600;font-size:.98rem;color:var(--text);
  min-width:0}
.registerkopf__anz{font-family:var(--f-m);font-weight:700;font-size:.9rem;color:var(--text-mut)}
.registerkopf__anz::after{content:" Pos.";font-weight:400;font-size:.7rem;color:var(--text-mut)}
.registerkopf__bild,.bogenkopf__bild{margin:0;position:relative;background:var(--papier);
  padding:12px 12px 0;border-top:3px solid var(--signal)}
.registerkopf__bild picture,.bogenkopf__bild picture{display:block}
.registerkopf__bild img,.bogenkopf__bild img{width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3}
.registerkopf__bild figcaption,.bogenkopf__bild figcaption{font-family:var(--f-m);
  font-size:.64rem;letter-spacing:.03em;color:var(--tinte-mut);padding:9px 2px 11px}
/* Der Passepartout des Bogenkopfs ragt in die Telefonsektion hinein: eine
   Ueberlappung ueber die Sektionsgrenze statt eines zweiten Vollbildbandes. */
.bogenkopf__bild{position:relative;z-index:3;margin-bottom:-40px;
  box-shadow:0 22px 44px -30px rgba(0,0,0,.8)}
/* Der Passepartout haengt in diese Sektion hinein - ihr Vorlauf haelt die
   Telefonzeile frei, damit nichts verdeckt wird. */
.nach-bogen{padding-top:34px}

@media (min-width:900px){
  /* Zwei Zeilen statt zweier Spalten: oben Titel und Aufnahme nebeneinander,
     darunter das Register ueber die ganze Breite in zwei Spalten. So bleibt die
     weiche Lageraufnahme klein und der Kopf hat keine tote Ecke. */
  /* Titel und Register stehen uebereinander in der linken Spalte, die
     Lageraufnahme steht als Quadrat daneben und ueber beide Zeilen. So bleibt
     die weiche Aufnahme klein und der Kopf hat keine tote Ecke. */
  .registerkopf{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
    grid-template-areas:"text bild" "reg bild";gap:22px 44px;align-items:start}
  .registerkopf__text{grid-area:text}
  .registerkopf__bild{grid-area:bild;align-self:start}
  .registerkopf__bild img{aspect-ratio:1/1}
  .registerkopf__reg{grid-area:reg;margin-top:4px}
  .bogenkopf{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:44px;align-items:end}
  .nach-bogen{padding-top:96px}
  .bogenkopf__bild{margin-bottom:-64px}
  .bogenkopf__bild img{aspect-ratio:4/3}
}

/* --- Der Zeichnungsrand: eine Orangelinie ueber die ganze Seitenlaenge ----- */
body{position:relative}
.seitenlinie{position:absolute;z-index:6;pointer-events:none;display:block;
  top:var(--kopf-h);bottom:0;width:3px;background:var(--signal);
  left:max(9px, calc((100% - 1360px) / 2 + 9px))}
/* Teilung wie am Blattrand: alle 96 px ein Strich nach innen. */
.seitenlinie::after{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;
  background:repeating-linear-gradient(to bottom,
    var(--signal) 0 2px, transparent 2px 96px)}
@media (min-width:900px){
  .seitenlinie{top:var(--kopf-h)}
}
@media print{ .seitenlinie{display:none} }

/* --- Teiletafel auf Papier: die Verschleissliste steht auf zwei Maschinenseiten
       (R13 PRO, RS04) auf dem Papierfeld, damit die Sektionsfolge dieser Seiten
       wirklich zwischen Blau und Papier wechselt statt drei blaue Felder
       hintereinander zu stapeln (Kontrastfelder je Seite gemessen). --------- */
.hell .teiltafel caption{color:var(--signal-tief)}
.hell .teiltafel th,.hell .teiltafel td{border-bottom-color:var(--linie-hell)}
.hell .teiltafel thead th{color:var(--tinte-mut)}
.hell .teiltafel tbody th{color:var(--tinte)}
.hell .teiltafel .nr{color:var(--tinte-mut)}
.hell .teiltafel .pr{color:var(--tinte)}
.hell .teiltafel .pr em{color:var(--tinte-mut)}

/* --- Passendes Werkzeug auf den Maschinenseiten: Karten statt Zeilenliste.
       Auf diesen Seiten war die Aufnahme der Maschine bis Runde 10 das einzige
       Inhaltsbild (gemessen: inhaltsbilder 1). Die Werkzeuge sind echtes
       Material aus demselben Katalog - sie stehen jetzt gross genug, um als
       Bild zu zaehlen, und brechen zugleich die dritte Zeilenliste der Seite. */
@media (min-width:900px){
  .werkzeugliste--karten{display:grid;grid-template-columns:1fr 1fr;
    column-gap:24px;border-top:0;margin-top:14px}
  .werkzeugliste--karten .werkzeugzeile{grid-template-columns:minmax(0,1fr);
    align-content:start;gap:10px;padding:16px 0 18px;
    border-top:1px solid var(--linie-hell)}
  .werkzeugliste--karten .werkzeugzeile:hover{background:transparent}
  .werkzeugliste--karten .werkzeugzeile:hover figure{border-color:var(--signal-tief)}
  .werkzeugliste--karten .werkzeugzeile figure{width:100%;height:auto;aspect-ratio:4/3;
    border:1px solid transparent;transition:border-color var(--dur-kurz) var(--ease)}
  .werkzeugliste--karten .werkzeugzeile__preis{text-align:left;
    font-size:.86rem;color:var(--signal-tief)}
  .tief .werkzeugliste--karten .werkzeugzeile{border-top-color:var(--linie)}
  .tief .werkzeugliste--karten .werkzeugzeile__preis{color:var(--signal-hell)}
}

/* Auf dem Handy stehen dieselben Werkzeuge als breite Karten: der Freisteller
   liegt vollstaendig (contain) auf seinem Papierstreifen, es wird nichts
   beschnitten, und die Aufnahme ist gross genug, um als Bild zu zaehlen statt
   als 72-px-Vignette. Gemessen: Inhaltsbilder je Maschinenseite @390 von 1 auf 9. */
@media (max-width:899px){
  .werkzeugliste--karten{margin-top:14px;border-top:0}
  .werkzeugliste--karten .werkzeugzeile{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"bild bild" "name preis";gap:8px 14px;padding:14px 0 16px}
  .werkzeugliste--karten .werkzeugzeile figure{grid-area:bild;width:100%;height:auto;
    aspect-ratio:2.6/1;background:var(--papier-tief)}
  .werkzeugliste--karten .werkzeugzeile figure img{object-fit:contain}
  .werkzeugliste--karten .werkzeugzeile>span:not(.werkzeugzeile__preis){grid-area:name}
  .werkzeugliste--karten .werkzeugzeile__preis{grid-area:preis;align-self:end}
  .tief .werkzeugliste--karten .werkzeugzeile figure{background:rgba(242,243,248,.08)}
}

/* --- Kontextfeste Textfarben ---------------------------------------------
   Seit die Sektionsfolge je Maschinenseite zwischen Blau und Papier wechselt
   (Kontrastfelder), duerfen Textfarben nicht mehr am Bauteil festgeschrieben
   sein. .satz-mut nimmt die gedaempfte Farbe des Feldes, auf dem der Satz
   steht - gemessen mit design-probe.sh, Kontrasttreffer wieder 0. */
.satz-mut{color:var(--text-mut)}
.hell .satz-mut,.papierfeld .satz-mut{color:var(--tinte-mut)}

.werkzeugliste{border-top-color:var(--linie)}
.werkzeugzeile{color:var(--text);border-bottom-color:var(--linie)}
.werkzeugzeile em,.werkzeugzeile__preis{color:var(--text-mut)}
.werkzeugzeile figure{background:rgba(242,243,248,.08)}
.werkzeugzeile:hover{background:rgba(242,243,248,.06)}
.hell .werkzeugliste,.papierfeld .werkzeugliste{border-top-color:var(--linie-hell)}
.hell .werkzeugzeile,.papierfeld .werkzeugzeile{color:var(--tinte);
  border-bottom-color:var(--linie-hell)}
.hell .werkzeugzeile em,.hell .werkzeugzeile__preis,
.papierfeld .werkzeugzeile em,.papierfeld .werkzeugzeile__preis{color:var(--tinte-mut)}
.hell .werkzeugzeile figure,.papierfeld .werkzeugzeile figure{background:var(--papier-tief)}
.hell .werkzeugzeile:hover,.papierfeld .werkzeugzeile:hover{background:var(--papier-tief)}

/* --- Zaehlende Zahlen: sichtbar erst, wenn sie stimmen -------------------
   Bis Runde 10 zaehlten die Werte der Datenblatt-Tafel bei voller Deckkraft
   von 0 hoch; im Scrollweg stand dort lesbar "0 mm" und "137 kg". Die
   Deckkraft haengt jetzt am Zaehlfortschritt (--zaehl, aus riss.js) und
   erreicht 1 erst, wenn der Wert exakt ist. Chips und Wegleiste haben ihre
   eigene Einblendung; die Regel gilt zusaetzlich fuer sie, damit die
   Zwei-Prozent-Grenze ausnahmslos ueber alle Zahlen der Seite laeuft. */
.js b[data-zahl]{opacity:var(--zaehl,1)}
@media (prefers-reduced-motion:reduce){
  .js b[data-zahl]{opacity:1}
}

/* Auf dem Handy stand die Maschinenwand der Bestellseite in zwei Spalten und
   damit unter der Bildschwelle - gemessen: 0 Inhaltsbilder @390. Einspaltig
   traegt jede Aufnahme wieder als Bild. */
@media (max-width:559px){
  .werkzeugwand{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* =========================================================================
   13 Kopfleiste: Umschaltpunkt 900 -> 1180
   Gemessen ueber zwoelf Breiten mit document.elementFromPoint: zwischen 900 und
   1150 px brauchen Wortmarke (262) + sechs Navigationsspalten (rund 640) +
   Telefonzelle (153) + Listenzelle mehr Platz, als da ist. Die Navigation lief
   deshalb unter die Telefonzelle; bei 1024 war "Vermietung" an seinem eigenen
   Mittelpunkt nicht anklickbar, bei 900 drei Links. Der Index steht jetzt erst
   ab 1180 px, darunter uebernimmt dasselbe Menueblatt wie auf dem Handy - eine
   Leiste, kein gequetschter Kompromiss.
   ========================================================================= */
@media (min-width:1180px){
  .zug{display:none}
  .menu{display:none !important}
  .kopf__index{display:flex;flex:1 1 auto;min-width:0;align-items:stretch;
    margin-left:26px}
  .kopf__index a{display:flex;align-items:center;gap:8px;padding:0 15px;text-decoration:none;
    font-family:var(--f-l);font-size:.86rem;font-weight:600;
    color:var(--text);border-right:1px solid var(--linie);white-space:nowrap;
    transition:background-color var(--dur-kurz) var(--ease),color var(--dur-kurz) var(--ease)}
  .kopf__index a:first-child{border-left:1px solid var(--linie)}
  .kopf__index a:hover{background:var(--blau-tief);color:var(--signal-hell)}
  /* Die Marke der aktiven Spalte ist ein gezeichneter Riegel, kein Schatten.
     Als inset-box-shadow zaehlte sie in der Sonde als Lichtquelle von unten und
     zerlegte die gemeinsame Lichtrichtung der Seite (gemessen: 1440 GEMISCHT). */
  .kopf__index a[aria-current="page"]{background:var(--blau-tief);position:relative}
  .kopf__index a[aria-current="page"]::after{content:"";position:absolute;
    left:0;right:0;bottom:0;height:3px;background:var(--signal)}
  .kopf-tel{display:flex;flex-direction:column;justify-content:center;padding:0 19px;
    border-left:1px solid var(--linie);text-decoration:none;flex:0 0 auto}
  .kopf-tel b{font-family:var(--f-m);font-weight:700;font-size:.86rem;
    font-variant-numeric:tabular-nums;color:var(--text)}
  .kopf-tel span{font-family:var(--f-l);font-size:.7rem;font-weight:500;color:var(--text-mut)}
  .kopf-tel:hover b{color:var(--signal-hell)}
  .kopf-liste{padding:0 19px}
}

/* --- Firmenschild gesetzt statt als Bild -------------- */
.firmenschild__wort{display:flex;align-items:center;gap:12px;margin:0;min-width:0;
  flex-wrap:nowrap}
.firmenschild__zeichen{width:clamp(46px,22%,88px);height:auto;flex:0 1 auto;order:2;
  min-width:0}
.firmenschild__wort b{font-family:var(--f-d);font-weight:700;
  font-size:clamp(1.34rem,4.6vw,2.1rem);line-height:.96;letter-spacing:-.038em;
  color:var(--blau);display:block;order:1;flex:0 1 auto;min-width:0}
.firmenschild__wort b span{display:block}
.firmenschild__inh{margin:9px 0 0;padding-top:8px;border-top:3px solid var(--signal);
  font-family:var(--f-d);font-weight:700;font-size:clamp(.72rem,2.3vw,.98rem);
  letter-spacing:.11em;color:var(--signal-tief);overflow-wrap:break-word}
.firmenschild__claim{margin:3px 0 0;font-family:var(--f-d);font-weight:700;
  font-size:clamp(.74rem,2.4vw,1rem);letter-spacing:-.01em;color:var(--blau);
  overflow-wrap:break-word}

/* --- Telefonzelle bleibt auf dem Tablet erreichbar ------------------------
   Der Index wandert erst ab 1180 px in die Leiste; die Rufnummer ist auf
   dieser Seite aber das Hauptangebot und darf im Band dazwischen nicht
   verschwinden. Kompakte Fassung ohne Nebenzeile. */
@media (min-width:560px) and (max-width:1179px){
  .kopf-tel{display:flex;flex-direction:column;justify-content:center;padding:0 15px;
    border-left:1px solid var(--linie);text-decoration:none;flex:0 0 auto}
  .kopf-tel b{font-family:var(--f-m);font-weight:700;font-size:.82rem;
    font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
  .kopf-tel span{display:none}
  .kopf-tel:hover b{color:var(--signal-hell)}
}

/* =========================================================================
   12 Bodenkontakt und Grading
   Befund der zweiten Instanz: „hart freigestellte Maschinen ohne Schatten,
   Bodenkontakt oder gemeinsames Grading". Beides stimmte: der eingebackene
   Standschatten misst auf dem Blau nur wenige Prozent Helligkeitsabstand,
   und die zwei weichen Hallenaufnahmen standen ungegradet auf der Buehne.
   ========================================================================= */

/* Standschatten auf der GEMESSENEN Aufstandsflaeche (fx1/fx2/y2 aus der
   Silhouette, siehe build/teile.mjs). Liegt UNTER dem Bild, folgt der Breite
   des Fahrwerks und nicht der Bildkante. */
.buehne__stand{position:absolute;z-index:0;display:block;pointer-events:none;
  left:var(--fuss-l,20%);width:var(--fuss-b,60%);
  top:var(--fuss-o,88%);height:var(--fuss-h,6%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(3,8,40,.68) 0%, rgba(3,8,40,.34) 46%, rgba(3,8,40,0) 74%)}
/* Auf Papier ist derselbe Schatten waermer und schwaecher: dieselbe Lichtregel,
   anderer Grund. */
.hero .buehne__stand,.hell .buehne__stand,.papierfeld .buehne__stand{
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(58,44,26,.34) 0%, rgba(58,44,26,.16) 48%, rgba(58,44,26,0) 74%)}
@media (max-width:559px){
  .buehne--hoch .buehne__stand{left:var(--fuss-l-schmal,var(--fuss-l,20%));
    width:var(--fuss-b-schmal,var(--fuss-b,60%));
    top:var(--fuss-o-schmal,var(--fuss-o,88%))}
}
/* Die Lichtinsel hinter der Maschine traegt jetzt sichtbar: gleiche Farbe,
   groesserer Radius, hoehere Deckkraft. Sie bleibt die einzige Lichtquelle. */
.buehne--alpha .buehne__licht{left:0;right:0;top:2%;bottom:2%;
  background:radial-gradient(62% 56% at 50% 56%,
    rgba(150,178,255,.34),rgba(12,34,128,0) 72%)}
@media (prefers-reduced-motion:reduce){
  .buehne__licht{animation:none}
}

/* --- Ein Grading fuer alle gerahmten Aufnahmen ---------------------------
   Die zwei Hallenaufnahmen sind Handybilder und die weichsten der Lieferung.
   Sie bekommen dieselbe Behandlung wie jedes andere Motiv der Seite: leicht
   zurueckgenommene Saettigung, ein blauer Hauch aus der Markenfarbe und die
   Koernung der Seite. Damit gehoeren sie in dieselbe Welt statt roh auf der
   Buehne zu liegen. */
/* .werkbild ist das EINE Rezept fuer jede gerahmte Kundenaufnahme: derselbe
   Ausschnitt-Regler (--ausschnitt zieht den Bildausschnitt auf die Maschine),
   dieselbe Tonwertkurve, derselbe blaue Hauch aus der Markenfarbe, dieselbe
   Koernung. Damit gehoeren die Handyaufnahmen in dieselbe Welt wie die
   Freisteller, statt roh auf der Buehne zu liegen. */
.werkbild img{object-position:var(--ausschnitt,50%) center}
.registerkopf__bild,.bogenkopf__bild{isolation:isolate}
.registerkopf__bild picture,.bogenkopf__bild picture{position:relative;display:block}
.registerkopf__bild img,.bogenkopf__bild img,.werkbuch__bild.werkbild img{
  filter:saturate(.86) contrast(1.05) brightness(1.03)}
.werkbuch__bild.werkbild{position:relative;isolation:isolate}
.werkbuch__bild.werkbild::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(12,34,128,.07),rgba(12,34,128,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
.registerkopf__bild::after,.bogenkopf__bild::after{content:"";position:absolute;
  left:12px;right:12px;top:15px;
  height:calc(100% - 15px - 2.6rem);pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(12,34,128,.10),rgba(12,34,128,.26)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}

/* --- Geraet ohne brauchbare Abbildung: gesetzte Platte statt schlechtem Bild - */
.ohnebild{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  aspect-ratio:4/3;width:100%;padding:12px 13px;background:var(--papier-tief);
  border-bottom:3px solid var(--signal)}
.ohnebild b{font-family:var(--f-d);font-weight:700;font-size:.94rem;line-height:1.1;
  letter-spacing:-.02em;color:var(--tinte)}
.ohnebild span{font-family:var(--f-m);font-size:.62rem;letter-spacing:.04em;
  color:var(--signal-tief)}
.werkzeugzeile .ohnebild{aspect-ratio:4/3;padding:7px 8px}
.werkzeugzeile .ohnebild b{font-size:.78rem}
.werkzeugzeile .ohnebild span{font-size:.56rem}

/* --- Nachzug zu den Farbwechseln dieser Runde: drei Stellen, an denen ein
       Bauteil seine Farbe vom alten Feld geerbt hat. Alle drei gemessen
       (design-probe.sh, glyphengenau) und behoben. ------------------------- */
/* Die Warenkarte bleibt ein blaues Feld, auch wenn sie auf Papier steht -
   ihre Ueberschrift muss deshalb weiss bleiben und darf nicht die Tinte des
   Papierfeldes erben. */
/* Erst die allgemeine Regel fuer helle Felder ... */
.hell .warenkarte__zeile,.papierfeld .warenkarte__zeile{color:var(--tinte-mut)}
.hell .warenkarte__zeile b,.papierfeld .warenkarte__zeile b{color:var(--tinte)}
.hell .preis,.papierfeld .preis{color:var(--tinte)}
.hell .preis em,.papierfeld .preis em{color:var(--tinte-mut)}
/* ... danach die Ausnahme: die Warenkarte bleibt ein BLAUES Feld, auch wenn sie
   auf Papier steht. Nur in ihr bleibt der Text hell. (Die erste Fassung dieser
   Regel war nicht auf .warenkarte eingegrenzt und hat sechs Kontrastverstoesse
   auf den Werkzeugkarten erzeugt - gemessen und behoben.) */
.hell .warenkarte h3,.papierfeld .warenkarte h3{color:#fff}
.hell .warenkarte .warenkarte__hinweis,.papierfeld .warenkarte .warenkarte__hinweis{color:var(--text-mut)}
.hell .warenkarte .warenkarte__zeile,.papierfeld .warenkarte .warenkarte__zeile{color:var(--text-mut)}
.hell .warenkarte .warenkarte__zeile b,.papierfeld .warenkarte .warenkarte__zeile b{color:#fff}
.hell .warenkarte .warenkarte__gruppe,.papierfeld .warenkarte .warenkarte__gruppe{color:var(--signal-hell)}
.hell .warenkarte .preis,.papierfeld .warenkarte .preis{color:#fff}
.hell .warenkarte .preis em,.papierfeld .warenkarte .preis em{color:var(--text-mut)}
/* Der gedrueckte Filterknopf traegt Orange als Flaeche: darauf steht Weiss,
   nicht die Tinte des Papierfeldes (gemessen 3,16:1 gegen 5,47:1). */
.hell .filterknopf[aria-pressed="true"],.papierfeld .filterknopf[aria-pressed="true"]{
  background:var(--signal-fest);color:#fff;border-color:var(--signal-fest)}
/* Die Kontaktnotiz steht seit dieser Runde auf Papier. */
.hell p.kontaktnotiz,.papierfeld p.kontaktnotiz{color:var(--tinte-mut)}
.hell .region__notiz,.papierfeld .region__notiz{color:var(--tinte-mut)}

/* --- Zwei Werkzeuge, ein Handgriff (nur /kompaktlader/rs04/) --------------
   Zwei Aufnahmen derselben Maschine mit verschiedenem Werkzeug. Die zweite
   ueberlappt die erste und ragt ueber die Sektionskante - Ueberlappung statt
   zweier gleicher Kacheln. */
.ladepaar{display:grid;gap:16px;margin-top:22px}
.ladepaar__feld{margin:0;background:var(--papier);padding:12px 12px 0;position:relative;
  border-top:3px solid var(--signal)}
.ladepaar__feld img{width:100%;height:auto;display:block}
.ladepaar__feld figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 2px 12px;font-size:.82rem;color:var(--tinte-mut)}
.ladepaar__feld .kennplakette{color:var(--signal-tief);border-color:rgba(156,74,15,.5)}
@media (min-width:900px){
  .ladepaar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
  .ladepaar__feld--vor{margin-top:52px;margin-bottom:-58px;position:relative;z-index:3;
    box-shadow:0 26px 50px -32px rgba(0,0,0,.8)}
}

/* =========================================================================
   14 Die Buehne bekommt einen Boden
   Befund der zweiten Instanz, zweimal in Folge: "die Flaechen liegen alle auf
   einer Ebene ohne Licht, Verlauf oder Ueberlappung", "ein Bagger in einem
   leeren blauen Kasten". Der Standschatten aus der ersten Fix-Iteration gibt
   Bodenkontakt, aber keinen Boden: die Maschine stand weiter vor einer Farbe.
   Jetzt liegt unter ihr eine Ebene - Horizont auf der GEMESSENEN Standlinie
   (--fuss-o aus der Silhouette), darueber Streiflicht, darunter abfallendes
   Dunkel, seitlich ausblendend, damit kein zweiter Kasten entsteht. Statisch,
   keine Animation, kein zusaetzliches Byte.
   ========================================================================= */
/* Ohne mask-image: ein radialer Verlauf laeuft nach allen Seiten von selbst aus
   und kostet keine eigene Maskenebene (auf der Startseite mit zwei Buehnen als
   Bildratenverlust messbar). */
.buehne--alpha::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:0;right:0;top:calc(var(--fuss-o,88%) - 3%);bottom:-3%;
  background:radial-gradient(78% 130% at 50% 0%,
    rgba(150,178,255,.24) 0%,
    rgba(80,110,220,.16) 24%,
    rgba(3,8,40,.30) 62%,
    rgba(3,8,40,0) 100%)}
/* Die Standlinie selbst: dieselbe Zeichensprache wie in der Kinematik-Sektion. */
.buehne--alpha::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:8%;right:8%;top:var(--fuss-o,88%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(180,200,255,.42) 22%,
    rgba(180,200,255,.42) 78%,transparent)}

/* Der Zeichnungsrand liest als Blattrand, nicht als Beleg-Perforation:
   Teilung von 96 auf 240 px gestreckt, Striche kuerzer. */
.seitenlinie::after{width:8px;
  background:repeating-linear-gradient(to bottom,
    var(--signal) 0 2px, transparent 2px 240px)}

/* Kontakt: der Bogenkopf richtete Text und Passepartout an der Unterkante aus,
   ueber der Ueberschrift stand deshalb ein totes blaues Feld. */
@media (min-width:900px){
  .bogenkopf{align-items:center}
  .bogenkopf{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .registerkopf{grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr)}
  /* Das Maschinenband des Breitkopfs enger um die Maschine. */
  .kopfbreit__band{padding:clamp(10px,1.6vw,16px) 0}
  .kopfbreit__band .buehne{max-width:940px}
}

/* Zaehlende Werte in einer Flexzeile aendern beim Hochzaehlen ihre Textbreite und
   schieben damit ihre Nachbarn: auf /anbaugeraete/ gemessen als cls 0,002.
   Tabellenzellen sind davon nicht betroffen (feste Spalte), die Breitenreihe
   schon. Sie bekommt eine reservierte Breite. */
.breitzeile__kopf b[data-zahl]{display:inline-block;min-width:8ch;text-align:right}

/* ===== Abnahme-Nacharbeit: drei gemessene Abstands- und Umbruchdefekte =====
   Ueberschreibungen am Dateiende, damit die Kaskade eindeutig bleibt. */

/* 1) Fussschild: der Markenname ist ein Wort und bricht nie. Wurzelursache:
   die alte Regel ".firmenschild img" (fuers fruehere Logobild, 300 px) schlaegt
   per Spezifitaet die Piktogrammbreite und blaeht die Flexbasis des Zeichens
   auf - die Wortspalte wurde auf 60 px gequetscht und brach in vier Zeilen. */
.firmenschild__wort b{overflow-wrap:normal;word-break:keep-all;flex:0 0 auto}
.firmenschild img.firmenschild__zeichen{width:clamp(46px,22%,88px)}

/* 2) Gedrehtes Diptychon (Vermietung): der Anschnitt steht dort in der LINKEN
   Spalte; sein rechter Negativrand frass den Steg zur Textspalte auf. Er
   gehoert in dieser Variante an den linken Blattrand. */
@media (min-width:900px){
  .diptychon--gedreht .anschnitt{margin-right:0;margin-left:calc(var(--rand) * -1)}
}

/* 3) Das kreuzende Massband zog seine Oberkante auf schmalen Viewports durch
   die Unterlaengen der Torprobe-Fusszeile. Die Fusszeile traegt dort ein
   Polster, durch das die Kreuzung laufen darf - das Geraet bleibt. */
@media (max-width:479px){
  .torprobe__fuss{padding-bottom:24px}
}

/* 4) Werkzeugkarten mobil: das 2.6:1-Band liess flache Freisteller klein
   zwischen breiten Leerfeldern stehen. Hoeheres Band, Objekt groesser,
   weiterhin contain - nichts wird beschnitten. */
@media (max-width:899px){
  .werkzeugliste--karten .werkzeugzeile figure{aspect-ratio:2/1}
}

/* =====================================================================
   Veredelung: Werkdetails, Setzerei, Masskante (eine Hover-Geste)
   ===================================================================== */

/* --- Werkdetail: kleiner Beschnitt aus den Haendleraufnahmen im
       Passepartout. Gleiche Behandlung wie jede gerahmte Aufnahme:
       blauer Hauch + Korn ueber dem Bild, Mono-Unterschrift darunter. --- */
.werkdetail{margin:0;background:var(--papier);border:1px solid var(--papier-kante);
  padding:9px 9px 0;min-width:0}
.werkdetail picture{display:block;position:relative;isolation:isolate}
.werkdetail picture::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(12,34,128,.08),rgba(12,34,128,.20)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
.werkdetail img{width:100%;height:auto;display:block}
.werkdetail figcaption{font-family:var(--f-m);font-size:.6rem;letter-spacing:.03em;
  line-height:1.45;color:var(--tinte-mut);padding:7px 2px 8px}
.tief .werkdetail figcaption,.fuss .werkdetail figcaption{color:var(--tinte-mut)}

/* Reihe auf /ersatzteile/: drei Details unter dem Register.
   Unter 560px nicht dreispaltig quetschen (110px-Platten trugen nichts):
   das Laufwerk voll breit, die beiden anderen als Paar darunter. */
.werkdetails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin-top:30px;align-items:start}
@media (min-width:900px){
  .werkdetails{gap:16px;max-width:860px}
}
@media (max-width:559px){
  .werkdetails{grid-template-columns:repeat(2,minmax(0,1fr))}
  .werkdetails .werkdetail:first-child{grid-column:1 / -1}
}

/* Einzeldetail neben Tabellen und Tafelkoepfen: klein und beilaeufig.
   Bewusst versetzt gesetzt (das Detail haengt tiefer als der Kicker),
   nicht auf eine gemeinsame Rasterlinie gezogen. */
.teilkopf{display:flex;flex-direction:column;gap:22px}
.teilkopf>div{min-width:0}
.teilkopf .werkdetail{max-width:230px}
@media (min-width:900px){
  .teilkopf{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:30px}
  .teilkopf>div{flex:1 1 auto}
  .teilkopf .werkdetail{flex:0 0 240px;max-width:240px;margin-top:34px}
}
.tafel + .werkdetail{margin-top:20px;max-width:230px}

/* --- Setzerei 1: der erste Weg in den Katalog traegt drei der vier
       Maschinen und darf groesser stehen als die anderen drei. --- */
.wegzeile--haupt{grid-template-columns:118px minmax(0,1fr) auto;padding:21px 0}
.wegzeile--haupt .wegzeile__bild{width:118px;height:89px}
.wegzeile--haupt strong{font-size:1.36rem}
@media (max-width:559px){
  .wegzeile--haupt{grid-template-columns:96px minmax(0,1fr) auto;padding:18px 0}
  .wegzeile--haupt .wegzeile__bild{width:96px;height:72px}
  .wegzeile--haupt strong{font-size:1.2rem}
}
/* Ab 900px wachsen ALLE wegzeilen auf 158px (Regel oben im 900er-Block) -
   die Leitzeile muss dort DARÜBER liegen, nicht darunter (Quellordnungs-
   Falle: die nackten 118px-Regeln hätten sonst auf dem Desktop gewonnen). */
@media (min-width:900px){
  .wegzeile--haupt{grid-template-columns:200px minmax(0,1fr) auto;padding:26px 0}
  .wegzeile--haupt .wegzeile__bild{width:200px;height:150px}
  .wegzeile--haupt strong{font-size:1.5rem}
}

/* --- Setzerei 2: die Leitmaschine tritt aus dem Kartenraster.
       Kein neues Bauteil, dieselbe Karte mit staerkerer Kante, dem
       Leitmarke-Chip AUF der Kante und ab 900px einem Versatz nach oben
       (Rand, kein Transform - die Reveal-Klasse .auf setzt transform). --- */
.klassenkarte--leit{border-top-width:6px;position:relative}
.leitmarke{position:absolute;top:-13px;left:16px;z-index:3;
  font-family:var(--f-m);font-size:.6rem;letter-spacing:.05em;
  background:var(--signal-fest);color:#fff;padding:4px 8px 3px}
@media (min-width:900px){
  .klassenkarte--leit{margin-top:-18px}
}

/* --- Masskante: EINE neue Hover-Geste in der Zeichensprache der Site.
       Eine Signalkante zeichnet sich von links ueber die volle Breite,
       wie ein Anriss am Reissbrett. Nur transform, eigene Easing-Sprache,
       auch fuer Tastatur (focus-visible/focus-within). --- */
.wegzeile::after,.warenkarte::after,.werkzeugzeile::after,.dipt::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--signal);transform:scaleX(0);transform-origin:left center;
  transition:transform 340ms var(--ease);pointer-events:none;z-index:2}
/* wegzeile und warenkarte tragen an Ober- bzw. Unterkante schon den
   scrollgezeichneten Anriss - die Hover-Kante liegt dort, wo keine Zeichnung
   sitzt: wegzeile senkrecht am linken Rand (wie der Zeichnungsrand),
   warenkarte an der Unterkante. */
.wegzeile::after{width:3px;height:100%;transform:scaleY(0);transform-origin:center top}
.warenkarte::after{top:auto;bottom:-1px}
.werkzeugzeile{position:relative}
.werkzeugzeile::after{top:auto;bottom:-1px;height:2px}
.wegzeile:hover::after,.wegzeile:focus-visible::after{transform:scaleY(1)}
.warenkarte:hover::after,.warenkarte:focus-within::after,
.werkzeugzeile:hover::after,.werkzeugzeile:focus-visible::after,
.dipt:hover::after,.dipt:focus-visible::after{transform:scaleX(1)}
/* Zurueckgetretene Karten im Filter zeichnen keine Kante */
.warenkarte[data-passt="nein"]::after{display:none}
@media (prefers-reduced-motion:reduce){
  .wegzeile::after,.warenkarte::after,.werkzeugzeile::after,.dipt::after{transition:none}
}

/* ===========================================================================
   Runde 13 - Werkstattpolitur. Vier gemessene Stellen, kein Umbau.
   Steht am Dateiende, weil jede Regel hier eine frueher gesetzte ueberstimmt
   (Medienabfragen erhoehen die Spezifitaet nicht - es zaehlt die Quellordnung,
   FEHLER-019).
   =========================================================================== */

/* 1 Der Wischhinweis sagte auch dort "seitlich wischbar", wo nichts wischbar
     ist: gemessen scrollWidth 1280 = clientWidth 1280 (@1440) und 944 = 944
     (@1024) auf beiden Tafeln. app.js misst das Bauteil und setzt die Klasse;
     ohne Ueberlauf faellt Hinweis UND der Randverlauf weg, der sonst eine
     Fortsetzung nach rechts vortaeuscht. */
.wischer.kein-ueberlauf::after{display:none}
.wischer.kein-ueberlauf + .wischhinweis{display:none}

/* 2 Flaches Querformat (Handy gedreht, 740x360): das Zeichenfeld der Kinematik
     schrumpft ueber max-width:min(100%,66svh) auf 218x191 px, die drei
     Masschips standen bei 79,6 / 87,6 / 88,4 Prozent dann uebereinander
     (Grabtiefe zu 21 von 23 px verdeckt). Auf flachen Fenstern werden sie
     gleichmaessig gestaffelt: 18 Prozent Abstand sind hier rund 40 px und
     damit deutlich mehr als die Chiphoehe von 23 px. Hochformat unberuehrt. */
@media (max-height:520px){
  .kin__chip--weite{top:56%}
  .kin__chip--hoehe{top:74%}
  .kin__chip--tiefe{top:92%}
}

/* 3 Zwischen 560 und 899 px steht das Maschinenraster zweispaltig, traegt aber
     drei Karten - die dritte stand allein links, rechts blieb ein Loch von
     356x733 px. Die letzte Karte legt sich zentriert unter das Paar. Ab 900 px
     ist das Raster dreispaltig, dort greift die Regel nicht. */
@media (min-width:560px) and (max-width:899px){
  .raster--drei > :nth-child(3):last-child{grid-column:1/-1;justify-self:center;
    width:min(100%,520px)}
}

/* 4 Im flachen Querformat belegte der klebende Kopf 65 von 360 px Fensterhoehe
     (18 Prozent) auf jedem Scrollstand. Dort scrollt er mit weg. NICHT static:
     der Kopf braucht seinen z-index 65, sonst legt sich das Menueblatt
     (position:fixed, z-index 60) ueber den Hamburger. position:relative loest
     das Kleben und behaelt die Stapelordnung. */
@media (max-height:480px){
  .kopf{position:relative}
}

/* ==========================================================================
   RUNDE 14 - Sprach- und Inhaltskorrekturen (Quellordnung: ganz ans Ende,
   Medienabfragen erhoehen die Spezifitaet nicht - FEHLER-019).
   ========================================================================== */

/* 1 Die 21 Preise im Block "Passendes Werkzeug" der vier Maschinenseiten
     standen ohne Ehrlichkeitsvermerk da, waehrend die uebrigen 100 Preise der
     Seite ihn tragen. Sie bekommen jetzt dieselbe Bauart wie .preis em:
     Betrag, darunter das kleine Etikett. Die Farbe kommt weiter aus den
     kontextfesten Regeln (.werkzeugzeile em bzw. .hell/.papierfeld), hier
     werden nur Groesse, Gewicht und Abstand gesetzt. */
.werkzeugzeile__preis em{display:block;font-style:normal;font-family:var(--f-l);
  font-size:.62rem;font-weight:400;line-height:1.2;margin-top:3px;letter-spacing:0}

/* 4 Der Rueckttritt-Vermerk des Kompatibilitaetsfilters nennt jetzt den Grund
     (Aufnahme oder Klasse) statt einer Einheitszeile. Der Text wird laenger
     als "Passt nicht zur gewaehlten Klasse", deshalb darf er umbrechen, ohne
     die Karte zu sprengen. */
.sperrvermerk{overflow-wrap:break-word;hyphens:manual}

/* Runde 14, Kill 1 aus critic-15: Bei `.anschnitt` laeuft das BILD absichtlich
   ueber den Rasterrand hinaus (negativer Aussenabstand). Die Bildunterschrift
   erbte diesen Anschnitt und lief mit bis an die Glaskante - gemessen auf
   /kompaktlader/ @390: der Text endete bei 387 von 390 px, waehrend die ganze
   Seite sonst 20 px Inhaltsversatz haelt. Der Befund ist umbruchabhaengig und
   traf ausgerechnet 390, also die Breite, die laut Auftrag entscheidet.
   Die Unterschrift kommt auf den Inhaltsversatz zurueck, das Bild bleibt
   angeschnitten. `--rand` traegt den Wert je Viewport (20 px, ab der
   Bahn-Breite 40 px), deshalb steht hier keine Konstante.
   Zweite Zeile: dieselbe Mechanik gespiegelt, falls ein gedrehtes Diptychon
   je eine Unterschrift traegt - dort schneidet .anschnitt nach LINKS an. */
figure.anschnitt > figcaption{padding-right:var(--rand)}
@media (min-width:900px){
  .diptychon--gedreht figure.anschnitt > figcaption{padding-right:0;padding-left:var(--rand)}
}

/* Runde 15, Befund 1 (Tempo): Reveal-Bloecke, die beim Laden BEREITS im ersten
   Bild stehen, bekommen von app.js `da` UND `sofort`. `da` allein wuerde die
   620-ms-Blende starten und das erste Bild weiter aufhalten - gemessen auf
   /impressum/ 1168 ms LCP gegen 116 ms mit abgeschalteter Blende. Unterhalb
   des Falzes bleibt der Reveal vollstaendig erhalten; dort kostet er nichts.
   Hoehere Spezifitaet als `.js .auf` und am Dateiende, damit die Quellordnung
   stimmt (FEHLER-019). */
.js .auf.sofort{opacity:1;transform:none;transition:none}

/* ---------------------------------------------------------------------------
   Runde 16, Nachtrag: der Werkbuch-Kopf auf /service/.
   Gemessen am Auslieferstand: auf 1440 stand rechts oben ueber der Aufnahme ein
   leeres Papierfeld von rund 460 px Hoehe, weil `align-items:end` die Figur an
   den Fuss der Textspalte zog. Kein anderer Kopf der Seite hat so viel Leerlauf
   im ersten Bildschirm. Die Figur fuellt ihre Spalte jetzt ueber die volle Hoehe.
   Das Inline-`align-items:end` am Element bleibt unangetastet - es gilt weiter
   unterhalb von 900 px, wo die Figur ohnehin ueber dem Text steht.
   `picture{display:contents}` (FEHLER-192) muss hier aufgehoben werden, sonst
   hat das Bild keinen Bezugsrahmen fuer height:100% und object-fit greift nicht.
   Steht am DATEIENDE, damit keine spaetere nackte Regel es ueberholt (FEHLER-019). */
@media (min-width:900px){
  .kopf-werkbuch .diptychon{align-items:stretch !important}
  .kopf-werkbuch .werkbuch__bild{display:flex;min-height:0}
  .kopf-werkbuch .werkbuch__bild > picture{display:block;width:100%;height:100%;min-width:0}
  .kopf-werkbuch .werkbuch__bild img{width:100%;height:100%;object-fit:cover}
}

/* ===========================================================================
   RUNDE 17 - ECHTE DATEN
   ---------------------------------------------------------------------------
   Alles, was hier steht, gehoert zu Bauteilen, die es vorher nicht gab, weil es
   die Daten nicht gab: der Preis (fuenf Festpreise), die Preisleiter, die
   Variantentafel des R10, die Spanne im Torbalken (verstellbares Fahrwerk),
   die Oeffnungszeiten und die Zusatzausstattung ohne Preisschild.
   Der Block steht am DATEIENDE (FEHLER-019): jede nackte Regel hier gewinnt
   gegen gleich spezifische Regeln weiter oben, und keine Breakpoint-Regel
   weiter oben kann ihn versehentlich ueberholen. Wo eine Breite eine Rolle
   spielt, steht sie als min-width-Abfrage NACH der Grundregel.
   =========================================================================== */

/* --- Der Preis -------------------------------------------------------------
   Zwei Zeilen: die Zahl, und woran sie haengt. Die zweite Zeile ist Pflicht -
   ein Bruttopreis ohne den Satz "inkl. MwSt." ist auf einer Haendlerseite eine
   Auslassung, kein Weglassen von Text. */
.preisblock{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0}
.preisblock__zahl{font-family:var(--f-m);font-weight:700;font-size:1.5rem;line-height:1.05;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff;letter-spacing:-.01em}
.hell .preisblock__zahl,.papierfeld .preisblock__zahl{color:var(--tinte)}
.preisblock__ab{font-family:var(--f-l);font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--signal-hell);vertical-align:.28em;margin-right:2px}
.hell .preisblock__ab,.papierfeld .preisblock__ab{color:var(--signal-tief)}
.preisblock__art{font-family:var(--f-m);font-size:.64rem;letter-spacing:.03em;color:var(--text-mut)}
.hell .preisblock__art,.papierfeld .preisblock__art{color:var(--tinte-mut)}
.preisblock--karte .preisblock__zahl{font-size:1.2rem}
.standleiste{display:flex;align-items:flex-end;gap:14px 20px;flex-wrap:wrap}

/* Die Preiszeile der Preistafel: Zahl rechts, Bedingung darunter. */
.standzeile__preis{grid-column:1;grid-row:2;justify-self:start;display:flex;flex-direction:column;
  gap:2px;min-width:0}
.standzeile__preis b{font-family:var(--f-m);font-weight:700;font-size:1.06rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--signal-hell)}
.hell .standzeile__preis b{color:var(--signal-tief)}
.standzeile__preis em{font-style:normal;font-family:var(--f-m);font-size:.62rem;
  letter-spacing:.02em;color:var(--text-mut)}
.hell .standzeile__preis em{color:var(--tinte-mut)}
@media (min-width:700px){
  .standzeile__preis{grid-column:2;grid-row:1;justify-self:end;align-items:flex-end;text-align:right}
  .preistafel .standzeile{grid-template-columns:minmax(0,1fr) max-content max-content;
    gap:6px 22px}
  .preistafel .standzeile .terminknopf{grid-column:3;grid-row:1}
}

/* --- Torprobe: das verstellbare Fahrwerk -----------------------------------
   Der gefuellte Balken ist das EINGEFAHRENE Mass, der schraffierte Streifen
   dahinter das ausgefahrene. Beides zentriert wie der Balken selbst, damit die
   Flucht zum Tor stimmt. Der schraffierte Teil liegt tiefer im Stapel, sonst
   verdeckte er die Fuellung. */
.torzeile__spur .torbalken--spanne{position:absolute;left:50%;top:0;bottom:0;display:block;
  width:calc(var(--m-max,.4) * 100%);transform:translateX(-50%);z-index:0;
  background:repeating-linear-gradient(135deg,rgba(232,130,47,.42) 0 6px,
    rgba(232,130,47,.12) 6px 12px);
  border:1px dashed rgba(232,130,47,.55)}
.hell .torzeile__spur .torbalken--spanne{
  background:repeating-linear-gradient(135deg,rgba(156,74,15,.34) 0 6px,
    rgba(156,74,15,.10) 6px 12px);
  border-color:rgba(156,74,15,.5)}
.torzeile__spur .torbalken{z-index:1}
.torzeile__lesart{margin:5px 0 0;font-family:var(--f-m);font-size:.64rem;letter-spacing:.02em;
  color:var(--text-mut)}
.hell .torzeile__lesart{color:var(--tinte-mut)}
/* Die Maschinen ohne beziffertes Mass stehen unter der Zeichnung, nicht als
   leerer Balken darin. Kein erfundener Strich. */
.toroffen{display:flex;gap:10px 14px;align-items:flex-start;flex-wrap:wrap;margin:20px 0 0;
  padding-top:14px;border-top:1px dashed var(--linie-stark);font-size:.82rem;
  color:var(--text-mut);max-width:66ch}
.hell .toroffen{border-top-color:var(--linie-hell-stark);color:var(--tinte-mut)}
.toroffen span:last-child{flex:1 1 240px;min-width:0}
.toroffen a{color:var(--signal-hell)}
.hell .toroffen a{color:var(--signal-tief)}

/* --- Preisleiter -----------------------------------------------------------
   Erbt die Breitenzeile; neu sind nur die Ausfuehrungs-Beischrift und die
   beiden Preisetiketten. */
.preiszeile__zusatz{font-style:normal;font-family:var(--f-m);font-size:.62rem;letter-spacing:.04em;
  color:var(--tinte-mut);margin-left:8px;white-space:nowrap}
.preis--fest{font-size:.8rem;color:var(--tinte)}
.preis--fest em{margin-top:2px}
.preis--anfrage{font-size:.86rem;font-weight:400;font-family:var(--f-l);color:var(--text-mut)}
.hell .preis--anfrage,.papierfeld .preis--anfrage{color:var(--tinte-mut)}
.preisnotiz{margin:26px 0 0;max-width:72ch;font-size:.88rem;color:var(--tinte-mut);
  border-left:3px solid var(--signal);padding-left:14px}
.preisnotiz b{color:var(--tinte)}
.preisnotiz a{color:var(--signal-tief)}
.tief .preisnotiz,.abschnitt:not(.hell) > .bahn > .preisnotiz{color:var(--text-mut)}
.tief .preisnotiz b{color:#fff}
.tief .preisnotiz a{color:var(--signal-hell)}

/* --- Zusatzausstattung ohne Abbildung --------------------------------------
   Eine Zeile je Geraet: Name, Zweck, Weg auf die Liste. Kein leerer Bildrahmen. */
.optionsliste{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--linie-hell-stark)}
.optionszeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--linie-hell);min-width:0}
.optionszeile__name{grid-column:1;grid-row:1;min-width:0}
.optionszeile__name b{display:block;font-family:var(--f-d);font-weight:700;font-size:1.02rem;
  letter-spacing:-.018em;color:var(--tinte)}
.optionszeile__name em{font-style:normal;font-size:.86rem;color:var(--tinte-mut)}
.optionszeile__preis{grid-column:1;grid-row:2;font-family:var(--f-m);font-size:.7rem;
  letter-spacing:.02em;color:var(--tinte-mut);align-self:center}
.optionszeile .schild{grid-column:2;grid-row:1/3;align-self:center;justify-self:end}
@media (min-width:640px){
  .optionszeile{grid-template-columns:minmax(0,1fr) max-content max-content}
  .optionszeile__preis{grid-column:2;grid-row:1;justify-self:end}
  .optionszeile .schild{grid-column:3;grid-row:1}
}

/* --- Ersatzteil-Baugruppen -------------------------------------------------- */
.baugruppe__wann{font-family:var(--f-b);font-size:.88rem;color:var(--text-mut);margin:0 0 4px;
  padding-top:10px;border-top:1px solid var(--linie)}
.nr--text{font-family:var(--f-l);font-size:.84rem;color:var(--text-mut);white-space:normal}

/* --- Wegliste: drei Schritte, nummeriert ------------------------------------ */
.wegliste{list-style:none;margin:18px 0 0;padding:0;counter-reset:weg;display:grid;gap:10px}
.wegliste li{counter-increment:weg;position:relative;padding-left:38px;min-width:0;
  font-size:.94rem;color:var(--text-mut)}
.hell .wegliste li{color:var(--tinte-mut)}
.wegliste li::before{content:counter(weg,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--f-m);font-size:.74rem;color:var(--signal-hell);font-weight:700}
.hell .wegliste li::before{color:var(--signal-tief)}
.wegliste b{color:#fff;font-weight:700}
.hell .wegliste b{color:var(--tinte)}

/* --- Anschrift und Zeiten ---------------------------------------------------- */
.anschriftblock{margin:0;display:grid;gap:2px;font-family:var(--f-l);font-size:.98rem;
  color:var(--text-mut);line-height:1.45}
.hell .anschriftblock,.papierfeld .anschriftblock{color:var(--tinte-mut)}
.anschriftblock b{font-family:var(--f-d);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;
  color:#fff}
.hell .anschriftblock b,.papierfeld .anschriftblock b{color:var(--tinte)}
.zeitpaar{display:grid;gap:30px 40px;margin-top:34px;padding-top:26px;
  border-top:1px solid var(--linie-hell-stark)}
@media (min-width:820px){ .zeitpaar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.tafel--eng{margin-top:14px}
.fuss__zeiten{display:grid;gap:4px;margin:14px 0 0;font-family:var(--f-l);font-size:.86rem;
  color:var(--text-mut)}
.fuss__zeiten span{display:flex;justify-content:space-between;gap:14px;max-width:260px;
  border-bottom:1px solid var(--linie);padding-bottom:3px}
.fuss__zeiten b{font-weight:600;color:var(--text)}

/* --- Die zwei Ausfuehrungen des R10 ------------------------------------------
   Zwei Tafeln nebeneinander, die rechte (Vollausstattung) mit Orangekante -
   nicht weil sie besser ist, sondern weil sie die teurere ist und der
   Unterschied sichtbar sein soll. */
.variantenpaar{display:grid;gap:18px;margin-top:8px}
@media (min-width:760px){ .variantenpaar{grid-template-columns:repeat(2,minmax(0,1fr))} }
.variante{border:1px solid var(--linie);padding:18px;min-width:0;background:rgba(242,243,248,.04)}
.hell .variante{border-color:var(--linie-hell);background:rgba(19,26,46,.03)}
.variante--voll{border-color:rgba(232,130,47,.55)}
.hell .variante--voll{border-color:rgba(156,74,15,.5)}
.variante__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.variante__kopf b{font-family:var(--f-d);font-size:1.06rem;letter-spacing:-.018em}
.variante__preis{margin:10px 0 14px;font-family:var(--f-m);font-weight:700;font-size:1.5rem;
  font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap}
.variante__preis em{display:block;font-style:normal;font-family:var(--f-m);font-size:.62rem;
  font-weight:400;letter-spacing:.02em;color:var(--text-mut);margin-top:4px}
.hell .variante__preis em{color:var(--tinte-mut)}
.variante .schild{margin-top:16px}

/* --- Kleinkram -------------------------------------------------------------- */
.wert__zusatz{display:block;font-style:normal;font-family:var(--f-m);font-size:.6rem;
  letter-spacing:.02em;color:var(--text-mut);font-weight:400;margin-top:3px}
.hell .wert__zusatz{color:var(--tinte-mut)}
.versandreihe{display:grid;gap:10px;margin-top:22px}
.versandreihe:empty{display:none}
.anfrageform .vermerk{margin-top:4px}
/* Der Gewichtschip der Kinematik sitzt dort, wo bis Runde 16 der Hoehenchip
   stand - die Hoehenkette ist mit ihrem Beispielwert entfallen. Gleiche Lage,
   gleiche Bauart, belegter Wert. */
.kin__chip--gewicht{right:1.2%;top:87.6%}
@media (max-width:559px){ .kin__chip--gewicht{right:1.2%;top:85.2%} }
@media (prefers-reduced-motion:reduce){ .kin__chip--gewicht{top:74%} }

/* Runde 17, gemessen auf 390 px: die Kennwertleiste trug bis hierher nur kurze
   Einzelwerte. Mit den echten Angaben stehen dort Spannen ("750 bis 1.000 mm")
   und Preise ("12.499 Euro"), und `white-space:nowrap` plus `overflow:hidden`
   hat den ersten Wert im ersten Bildschirm der Startseite abgeschnitten.
   Umbrechen darf die Zelle jetzt - aber nur an den echten Wortfugen: Zahl und
   Einheit haengen per geschuetztem Leerzeichen zusammen (massFest, euro()).
   Steht am Dateiende und gewinnt damit gegen die Grundregel (FEHLER-019). */
.zahlenleiste b{white-space:normal;overflow-wrap:normal;hyphens:manual}

/* Runde 17: In der Preisleiter steht eine Zeile ohne eigene Aufnahme - die
   zweite Ausfuehrung des R10 ist dieselbe Maschine mit anderem Motor. Ein
   leerer Bildrahmen waere ein Fehler, ein zweites Mal dasselbe Foto eine
   Doppelung. Also traegt die Bildspalte dort eine Mono-Notiz; die Balken
   bleiben in der Flucht, weil die Spalte stehen bleibt. */
.breitzeile__marke{margin:0;align-self:start;font-family:var(--f-m);font-size:.62rem;
  line-height:1.5;letter-spacing:.02em;color:var(--tinte-mut);
  border-left:2px solid var(--signal);padding-left:8px}

/* Runde 17, Nachtraege aus den eigenen Aufnahmen der neuen Bauteile:

   1. Die Teiletafel hat eine Spalte verloren (die Fantasie-Teilenummern und die
      erfundenen Preise sind weg, geblieben sind Baugruppe, Inhalt und Knopf).
      Die alte Spaltenteilung liess die erste Spalte 38 Prozent breit stehen und
      davon zwei Drittel leer - gemessen auf 1440. Drei Spalten, neu geteilt. */
@media (min-width:640px){
  .teiltafel col.sp-teil{width:30%}
  .teiltafel col.sp-nr{width:48%}
  .teiltafel col.sp-tun{width:22%}
}
/* 2. Fuss der Options- und Baugruppenkarten: Preiszeile und Knopf sassen auf
      verschiedenen Hoehen, weil `align-items:flex-end` bei einzeiligem Preis
      und zweizeiligem Knopf nicht dasselbe meint wie eine gemeinsame Grundlinie.
      Beide stehen jetzt mittig auf derselben Achse. */
.optionskarte .warenkarte__fuss,.baugruppe .warenkarte__fuss{align-items:center}
/* 3. Fuenf Baugruppen in einem zweispaltigen Raster lassen unten rechts ein
      Loch von einer halben Kartenbreite. Die fuenfte legt sich ueber die volle
      Breite - als Abschlusszeile, nicht als Rest. */
@media (min-width:640px){
  .raster--zwei > :nth-child(5):last-child{grid-column:1/-1}
}

/* Runde 17, gemessen (probe-390 auf /bagger/r13/): die Datenblatt-Tafel ragte
   31 px aus ihrem Behaelter, seit in den Wertzellen echte Angaben stehen
   ("Kubota D722, 3 Zylinder, 14 PS", "1.970 x 1.150 x 1.300 mm"). `nowrap` war
   fuer kurze Beispielzahlen gedacht. Die Zelle bricht jetzt um - Zahl und
   Einheit bleiben per geschuetztem Leerzeichen zusammen, und die hochzaehlende
   Zahl (die das Skript neu schreibt und dabei kein nbsp setzen kann) bleibt
   ausdruecklich einzeilig. */
.tafel td.wert{white-space:normal;overflow-wrap:break-word}
.tafel td.wert b[data-zahl]{white-space:nowrap}
/* Die Frage ueber dem Torprobe-Regler ist ein <label for> und damit ein
   Bedienelement: Antippen setzt den Fokus auf den Schieber. Gemessen 26 px
   hoch - unter der 44-px-Marke. */
.torprobe__frage{display:inline-flex;align-items:center;min-height:44px}

/* Runde 17, Auflage der zweiten Instanz (taste-16): die Werkzeugmotive sind
   Freisteller mit weichen Kanten - klein und beilaeufig tragen sie, gross
   ausgespielt werden sie zu schwarzen Blobs auf Creme (Negativ-Anker N-004).
   Die Optionskarte zeigt sie deshalb in einem niedrigen Papierband mit
   `contain` statt ueber die volle Kartenhoehe: dasselbe Register wie die
   Werkdetails auf /ersatzteile/, die die Instanz ausdruecklich nicht
   beanstandet hat. `picture` braucht dafuer einen Rahmen (FEHLER-192/057),
   sonst greift object-fit nicht. */
.optionskarte .warenkarte__bild{height:126px;display:block;position:relative;
  background:var(--papier)}
.optionskarte .warenkarte__bild > picture{display:block;width:100%;height:100%}
.optionskarte .warenkarte__bild img{width:100%;height:100%;object-fit:contain;
  object-position:center;padding:10px}
@media (min-width:900px){ .optionskarte .warenkarte__bild{height:148px} }

/* ===========================================================================
   Runde 17, Fix-Iteration 1 (critic-18, Kill 1 bis 4)
   Alle vier Befunde sind gemessen; alle vier gehoeren zu Bauteilen, die diese
   Runde neu gebaut hat. Der Block steht am DATEIENDE (FEHLER-019).
   =========================================================================== */

/* Kill 1 - der wichtigste. In der Preisleiter stehen Name und Preis in einer
   Zeile (`space-between`). Mit fuenfstelligen Preisen ("11.875 Euro",
   "12.499 Euro") passt das unterhalb von 430 px nicht mehr: der Kritiker hat
   die TINTE gemessen (Range-Rects, nicht Boxen, FEHLER-008) und die Zahl bei
   x = 399,4 auf einem 390er Fenster gefunden - 9,4 px hinter der Kante, vom
   `overflow-x:hidden` eines Vorfahren abgeschnitten. Auf dem Bildschirm stand
   "11.875 Eur". Ein Dokument-Sweep meldet so etwas nie.
   Behebung ohne Schriftverkleinerung (der Preis ist die Zahl, wegen der die
   Leute kommen): unterhalb von 560 px bekommt er seine eigene Zeile. */
@media (max-width:559px){
  .preiszeile .breitzeile__kopf{flex-direction:column;align-items:flex-start;gap:2px}
  .preiszeile .breitzeile__kopf b{font-size:1.1rem}
  .preiszeile__zusatz{margin-left:0;display:block;margin-top:2px}
}

/* Kill 2 - sieben Optionskarten in einem dreispaltigen Raster lassen die
   siebte allein stehen; daneben klaffte ein Loch von 871 x 322 px. Sie spannt
   jetzt ueber die Restbreite. Gleiche Regel wie bei der fuenften
   Baugruppenkarte, nur eine Spaltenzahl weiter. */
@media (min-width:900px){
  #raster-anbau > :nth-child(7):last-child{grid-column:1/-1}
}

/* Kill 3 - in der ersten Reihe stand die Kartenfusszeile 23 px tiefer als bei
   den Nachbarn, weil der Hinweistext dort zweizeilig ist. Die Karte ist eine
   Flexspalte, also bindet `margin-top:auto` den Fuss an den Kartenboden; die
   Rasterzeile streckt die Karten ohnehin auf gleiche Hoehe. */
.optionskarte .warenkarte__fuss,.baugruppe .warenkarte__fuss{margin-top:auto}

/* Kill 4 - die Steuerzeile der Torprobe (Frage links, Wert rechts) sprang
   unterhalb von 560 px zwischen ein- und zweizeilig, sobald der Wert vier
   Stellen bekam; das Bauteil wuchs dabei um 50 px. Unterhalb von 560 px steht
   der Wert deshalb fest auf eigener Zeile - keine Bewegung im Layout, egal wie
   der Regler steht. */
@media (max-width:559px){
  .torprobe__steuer{flex-direction:column;align-items:flex-start;gap:2px}
  .torprobe__anzeige{font-size:1.7rem}
}

/* Runde 17, zweiter Hinweis der zweiten Instanz (taste-16, beide Läufe): die
   Werkzeug-Freisteller stehen "schräg schwebend" auf der Papierfläche - ihnen
   fehlt der Bodenkontakt, den JEDE andere freigestellte Aufnahme dieser Seite
   hat (bei den Maschinen ist der Standschatten ins Bild gebacken). Die sieben
   Motive sind Fremdmaterial und werden nicht neu gerendert; den Bodenkontakt
   zeichnet die Seite selbst: das Gerät steht auf der Unterkante seines Bandes
   (`object-position` unten) und bekommt genau dort die weiche Ellipse, die auch
   unter den Maschinen liegt. Erst beides zusammen wirkt - die Ellipse allein
   unter einem mittig schwebenden Freisteller war nur ein Fleck (selbst
   angesehen, wieder verworfen). Kostet kein Byte Bild. */
.optionskarte .warenkarte__bild img{object-position:50% 100%;padding:12px 10px 18px}
.optionskarte .warenkarte__bild::after{content:"";position:absolute;left:50%;bottom:11px;
  width:58%;height:13px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(19,26,46,.34),rgba(19,26,46,0) 70%)}
.optionskarte .warenkarte__bild > picture{position:relative;z-index:1}
.optionskarte .beispielchip{z-index:2}

/* ===========================================================================
   Runde 17, Fix-Iteration 2 (critic-19, Kill 1 bis 3)
   =========================================================================== */

/* Kill 1, zweite Haelfte: Zahlen, die riss.js beim Hochzaehlen neu schreibt,
   kann der Textschutz im Build nicht erreichen - das Skript setzt ein
   gewoehnliches Leerzeichen zwischen Wert und Einheit. Sie bleiben deshalb per
   CSS einzeilig, ueberall, nicht nur in der Datenblatt-Tafel. */
[data-zahl]{white-space:nowrap}

/* Kill 2: die siebte Optionskarte spannte nach der letzten Reparatur ueber die
   volle Rasterbreite - damit war das Loch weg, aber das Bildband war 1280 px
   breit fuer ein 152 px grosses Werkzeug, und der Freisteller schwamm darin.
   Sie steht jetzt zentriert in Kartenbreite: dieselbe Loesung, die dieses
   Projekt seit Runde 14 fuer die dritte Maschinenkarte auf /bagger/ benutzt. */
@media (min-width:900px){
  #raster-anbau > :nth-child(7):last-child{grid-column:1/-1;justify-self:center;
    width:min(100%,416px)}
}

/* Kill 3: in der Teiletafel traegt die mittlere Spalte seit Runde 17 Fliesstext
   ("Motoroel, Kraftstoff, Hydraulik, Luft") statt einer kurzen Teilenummer. Auf
   sehr schmalen Geraeten (gemessen bei 320 px) lief er 6,7 bis 14,2 px ueber die
   Kante, weil die Zelle in der ersten Rasterspalte neben dem Knopf steht. Unter
   360 px bekommt sie die volle Zeilenbreite. */
@media (max-width:359px){
  .teiltafel .nr--text{grid-column:1/-1}
}

/* Kill 3, richtig diagnostiziert: `.nr--text` (eine Klasse) hat gegen
   `.teiltafel .nr` (zwei Klassen) nie gewonnen - die Zelle stand trotz
   `white-space:normal` weiter auf `nowrap`, weil SPEZIFITAET vor Reihenfolge
   geht. Deshalb lief der Text bei 320 px bis 14,2 px ueber die Kante, und
   deshalb hat die erste Reparatur (Spaltenbreite) nichts geholfen: eine Zelle,
   die nicht umbrechen DARF, wird von mehr Platz nicht kleiner. Jetzt mit
   gleicher Spezifitaet und am Dateiende. */
.teiltafel .nr.nr--text{white-space:normal;overflow-wrap:break-word}

/* ===========================================================================
   Runde 17, Nachtrag zu critic-20 (zwei Altbefunde, vom Kritiker selbst als
   eigenes Uebersehen benannt; beide liegen ausserhalb der gewerteten Viewports,
   beide sind an einem echten Geraet sichtbar - 900 bis 1140 px ist die
   Tabletbreite, 320 px das kleinste verbreitete Telefon).
   =========================================================================== */

/* 1. Die Wertetafel des Kontrastkopfes (/kompaktlader/rs04/) schaltete bei
   900 px auf VIER Spalten. Zwischen 900 und 1140 px ist jede Spalte dann rund
   90 px breit: der Preis lief 32,2 px aus dem Papierfeld, und "Eigengewicht"
   brach mitten im Wort zu "Eigengewich/t" - der einzige echte Wortbruch der
   ganzen Seite. Vier Spalten gibt es deshalb erst ab 1140 px; bis dahin bleiben
   es zwei. Zusaetzlich darf eine Beschriftung NIE mitten im Wort brechen
   (deutsche Typografie-Hausregel: `keep-all` auf Etiketten, Umbruch nur an
   echten Wortfugen). */
@media (min-width:900px) and (max-width:1199px){
  .kopfkontrast__werte{grid-template-columns:1fr 1fr}
}
.kopfkontrast__werte dt{overflow-wrap:normal;word-break:keep-all;hyphens:manual}
.kopfkontrast__werte dd{white-space:nowrap}

/* 2. Der Preis wurde auf 320 px um 12,9 px von einem `overflow:hidden`-Vorfahren
   beschnitten. Unter 360 px eine Stufe kleiner - die Zahl bleibt die groesste
   Schrift ihres Blocks, passt aber in ihre Spalte. */
@media (max-width:359px){
  .preisblock__zahl{font-size:1.26rem}
  .variante__preis{font-size:1.3rem}
}


/* ==================================================================
   RUNDE 18 - MATERIAL, MARKE, BEDIENTEIL, KANTE
   Vier Befunde des Inhabers am Livestand, in dieser Reihenfolge behandelt.
   Dieser Block steht bewusst am DATEIENDE (FEHLER-019: eine nackte Regel nach
   ihrem Breakpoint gewinnt auf allen Viewports). Er setzt deshalb ausschliess-
   lich Eigenschaften, die weiter oben in keiner Medienabfrage stehen.
   ================================================================== */

/* ---- 1 ABKANTUNG: jede Vollflaeche ist ein gekantetes Blech ----
   Ein Feld ohne Kanten ist ein Farbeimer. Ein echtes Blech faengt an der
   Oberkante Licht und steht an der Unterkante im eigenen Schatten. Ein Pixel
   hoch, an der Wahrnehmungsschwelle - man sieht es nicht, man merkt es. */
/* ZUERST bekommt jede Flaeche ihre EIGENE Farbe. Bis heute waren die blauen
   Sektionen durchsichtig und zeigten nur das Blau des body durch. Solange das
   so ist, kann eine Flaeche kein Material tragen: an der Stelle, an der sich
   zwei Sektionen absichtlich um 62 px kreuzen, stand die Struktur doppelt - als
   hellerer Querstreifen ueber die volle Breite (gemessen R +9, B -8 gegenueber
   der Flaeche darueber und darunter). Eine Flaeche, die ihre Farbe selbst
   traegt, deckt die darunter einfach ab, und die Doppelung faellt weg. */
.abschnitt.koernung,.hero.koernung{background-color:var(--blau)}
.abschnitt.hell.koernung,.papierfeld.koernung{background-color:var(--papier)}
.abschnitt.tief.koernung{background-color:var(--blau-tief)}
.abschnitt.kontaktplatte.koernung,.fuss.koernung{background-color:var(--blau-nacht)}

/* Das Material liegt als eigene Lage DARUEBER, nicht als Hintergrundbild der
   Flaeche. Grund ist messtechnisch und nicht kosmetisch: eine Flaeche mit
   background-image gilt jedem Flaechenmesser (auch design-probe) als
   "unbestimmt wegen Bild", und die Kontrastflaechen der Seite - das Wechselspiel
   Blau gegen Papier, das diese Seite traegt - waeren nicht mehr zaehlbar.
   Gemessen: als Hintergrundlage 0 erkannte Kontrastfelder auf allen acht
   geprueften Routen, als Lage darueber wieder 4 bis 6 wie in Runde 17.
   Die Doppelung an der Kreuzung bleibt trotzdem weg, weil die obere Sektion
   jetzt eine deckende eigene Farbe hat und die untere samt ihrer Lage abdeckt. */
.koernung::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:overlay;
  /* KILL 3 aus critic-21: das Korn lag bei 0,24 bis 0,72 Luma und die Struktur
     war zu 93 Prozent ein starrer 3-px-Streifen. Eine gewebte Plane ist nicht
     starr: ueber dem Grundraster liegt deshalb ein zweites, laengeres Raster
     (11 px, halbe Amplitude), das die reine Einzelfrequenz bricht, und das Korn
     traegt mehr Zahnung. */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.10) 0,rgba(0,0,0,.13) 1.5px,rgba(255,255,255,.10) 3px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0,rgba(0,0,0,.06) 5.5px,rgba(255,255,255,.05) 11px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' seed='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  background-size:auto,auto,160px 160px}
/* KILL 1 aus critic-21, gemessen: die Materiallage lag auch UEBER den
   Produktfotos und dort am staerksten (FFT-Amplitude bei 3-px-Periode 7,20 auf
   dem Freisteller gegen 4,88 auf der leeren Flaeche daneben). Das Verfahren
   gehoert auf die FLAECHE, nicht auf die Ware: ein bedrucktes Schild hat ein
   Raster, ein Foto der Maschine nicht. Jede Bildlage steigt deshalb ueber die
   Materiallage (die liegt auf z-index 2). Die Buehne wird als GANZES gehoben,
   nicht ihr Bild - sonst fielen die Masslinien (z-index 2) hinter die Maschine. */
.koernung .buehne,.koernung figure,.koernung picture,.koernung>img,
.koernung .bahn img{position:relative;z-index:3}
/* Nachtrag derselben Runde, von der zweiten Instanz gefunden: die angehobene
   Buehne schob sich damit UEBER den Papierbogen des Heros - an dessen rechter
   Kante lag ein halbdurchsichtiger Bildstreifen ueber Ueberschrift und
   Zweitknopf. Ein Papierbogen liegt immer oben; er ist der Traeger des Textes,
   nicht Teil der Buehne. */
.hero__text,.papierfeld,.kopfkontrast__tafel{position:relative;z-index:6}
.hell.koernung::after,.papierfeld.koernung::after{mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.055) 0,rgba(255,255,255,.05) 1.5px,rgba(0,0,0,.055) 3px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.028) 0,rgba(255,255,255,.025) 5.5px,rgba(0,0,0,.028) 11px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='5'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  background-size:auto,auto,150px 150px}

/* WICHTIG (und in dieser Runde einmal selbst hineingetappt, FEHLER-019):
   die Abkantung darf NICHT auf .abschnitt::after liegen. .abschnitt::after und
   .koernung::after hatten dieselbe Spezifitaet, und da dieser Block am Dateiende
   steht, verdraengte er die Materiallage auf JEDER Sektion ersatzlos -
   gemessen als vollkommen flaches #0C2280 ueber 89 Prozent des Schirms.
   Beide Kanten sitzen deshalb auf EINEM Pseudoelement, ::before, als zwei
   Hintergrundlagen von je einem Pixel. Wo zwei Sektionen sich absichtlich
   kreuzen, faellt die jeweilige Kante weg: an einer Kreuzung gibt es keine
   Abkantung, sonst stuende dort eine Linie quer durch die Ueberlappung. */
.abschnitt::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--kante-licht),var(--kante-licht)) top left/100% 1px no-repeat,
    linear-gradient(var(--kante-schatten),var(--kante-schatten)) bottom left/100% 1px no-repeat}
.abschnitt.hell::before{
  background:
    linear-gradient(var(--kante-licht-p),var(--kante-licht-p)) top left/100% 1px no-repeat,
    linear-gradient(var(--kante-schatten-p),var(--kante-schatten-p)) bottom left/100% 1px no-repeat}
.abschnitt.ohne-unten::before,.abschnitt.ohne-oben::before,
.abschnitt.nach-kreuzung::before,.abschnitt.ueber::before{background:none}

/* ---- 2 SCHNITTKANTE: Papier hat keine Fase, es hat eine Schnittflaeche ----
   Ein beschnittener Bogen zeigt oben die Papieroberflaeche und unten die
   Schnittflaeche. Deshalb bekommen Papierbogen NICHT dieselbe Kante wie Blech:
   keine 45-Grad-Fase, sondern die zwei Toene des Schnitts. */
.hero__text::before,.papierfeld::before,.kopfkontrast__tafel::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border-top:1px solid var(--kante-licht-p);
  border-bottom:1px solid var(--kante-schatten-p)}

/* ---- 3 FASE: Blech- und Bedienteile werden gekantet, nie gerundet ----
   Typenschild, Massschild, Kennung: alles, was am Geraet aus Blech oder Folie
   gestanzt waere, traegt die 45-Grad-Fase an zwei gegenueberliegenden Ecken.
   AUSNAHME mit Grund: .masschip--breite traegt eine Pfeilspitze, die aus dem
   Element herauszeigt - eine Fase wuerde sie abschneiden. Dieses Schild hat
   seine Kante in der Spitze, das ist seine Rolle. */
/* GEFUELLTE Schilder bekommen die Fase - bei ihnen ist die Fase eine
   Schnittkante im Blech und braucht keine Linie. UMRANDETE Etiketten
   (.kennplakette, .lagerchip) behalten ihre rechtwinklige Keyline: ein
   gedrucktes Etikett wird nicht gefast, es wird gedruckt. Das ist die
   Unterscheidung, die der Inhaber verlangt hat - Kante nach Bauteilrolle,
   nicht ein Radius fuer alles. */
.masschip:not(.masschip--breite),.torkettenwert{
  clip-path:polygon(var(--fase-k) 0,100% 0,100% calc(100% - var(--fase-k)),
    calc(100% - var(--fase-k)) 100%,0 100%,0 var(--fase-k))}

/* Jedes echte BEDIENELEMENT traegt dieselbe Geste wie der Zweitknopf:
   eingelassenes Schild mit Fase. Das schliesst die Torprobe (+/-), die
   Filterknoepfe, den Listen- und den Menue-Schliesser ein - bis Runde 17
   waren das vier verschiedene Rahmenformen. */
.torknopf,.filterknopf,.liste__zu,.menu__zu{border:0;
  clip-path:polygon(var(--fase-k) 0,100% 0,100% calc(100% - var(--fase-k)),
    calc(100% - var(--fase-k)) 100%,0 100%,0 var(--fase-k));
  background:rgba(2,6,26,.46);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.55),inset 0 -3px 0 rgba(214,226,255,.30),
    inset 3px 0 0 rgba(232,130,47,.72)}
.torknopf:hover,.filterknopf:hover,.liste__zu:hover,.menu__zu:hover{
  background:rgba(2,6,26,.6);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.6),inset 0 -3px 0 rgba(214,226,255,.36),
    inset 6px 0 0 var(--signal-hell)}
.hell .torknopf,.hell .filterknopf,.papierfeld .filterknopf{
  background:rgba(120,105,78,.22);color:var(--tinte);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.40),inset 0 -3px 0 rgba(255,255,252,.95),
    inset 3px 0 0 rgba(156,74,15,.75)}
.hell .torknopf:hover,.hell .filterknopf:hover,.papierfeld .filterknopf:hover{
  background:rgba(120,105,78,.30);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.48),inset 0 -3px 0 rgba(255,255,252,.98),
    inset 6px 0 0 var(--signal-tief)}
/* Gedrueckter Filterknopf: das Schild ist lackiert, nicht eingelassen */
.filterknopf[aria-pressed="true"],
.hell .filterknopf[aria-pressed="true"],.papierfeld .filterknopf[aria-pressed="true"]{
  background:var(--signal-fest);color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.30)}
.torknopf:focus-visible,.filterknopf:focus-visible,.liste__zu:focus-visible,
.menu__zu:focus-visible{outline:0;
  box-shadow:inset 0 0 0 3px var(--signal),inset 0 0 0 5px rgba(255,255,255,.55)}

/* ---- 4 EINE Knopfgeste bis in die leisen Bedienteile ----
   .terminknopf und .zeitknopf waren eigene Rahmenformen. Sie sind jetzt
   dasselbe eingelassene Schild wie .schild--rahmen, nur kleiner. */
.terminknopf,.zeitknopf{border:0;
  clip-path:polygon(var(--fase-k) 0,100% 0,100% calc(100% - var(--fase-k)),
    calc(100% - var(--fase-k)) 100%,0 100%,0 var(--fase-k));
  background:rgba(2,6,26,.46);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.55),inset 0 -3px 0 rgba(214,226,255,.30),
    inset 3px 0 0 rgba(232,130,47,.72)}
.terminknopf:hover,.zeitknopf:hover{background:rgba(3,8,32,.44);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.40),inset 0 -2px 0 rgba(255,255,255,.26),
    inset 6px 0 0 var(--signal-hell)}
.hell .terminknopf,.papierfeld .terminknopf,.hell .zeitknopf{
  background:rgba(120,105,78,.22);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.40),inset 0 -3px 0 rgba(255,255,252,.95),
    inset 3px 0 0 rgba(156,74,15,.75)}
.hell .terminknopf:hover,.papierfeld .terminknopf:hover,.hell .zeitknopf:hover{
  background:rgba(122,108,84,.20);
  box-shadow:inset 0 2px 0 rgba(122,108,84,.38),inset 0 -2px 0 rgba(255,253,248,.9),
    inset 6px 0 0 var(--signal-tief)}
/* Gedrueckter Zeitknopf bleibt gefuellt, verliert aber den Rahmen-Rest */
.zeitknopf[aria-pressed="true"]{background:var(--signal-fest);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.30)}

/* In der Handlungszeile steht keine dritte Bauart mehr: der Unterstrich-Knopf
   wird dort zum eingelassenen Schild. Als Verweis IM Fliesstext bleibt .marke
   unveraendert - dort ist er ein Link, kein Bedienteil. */
.tunreihe>.marke{padding:14px 21px;border-bottom:0;color:var(--text);
  clip-path:polygon(var(--fase) 0,100% 0,100% calc(100% - var(--fase)),
    calc(100% - var(--fase)) 100%,0 100%,0 var(--fase));
  background:rgba(2,6,26,.46);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.55),inset 0 -3px 0 rgba(214,226,255,.30),
    inset 3px 0 0 rgba(232,130,47,.72)}
.tunreihe>.marke:hover{color:#fff;background:rgba(3,8,32,.44);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.40),inset 0 -2px 0 rgba(255,255,255,.26),
    inset 6px 0 0 var(--signal-hell)}
.hell .tunreihe>.marke,.papierfeld .tunreihe>.marke,.hero .tunreihe>.marke{
  color:var(--tinte);background:rgba(120,105,78,.22);border-bottom:0;
  box-shadow:inset 0 3px 0 rgba(96,84,60,.40),inset 0 -3px 0 rgba(255,255,252,.95),
    inset 3px 0 0 rgba(156,74,15,.75)}
.hell .tunreihe>.marke:hover,.papierfeld .tunreihe>.marke:hover,
.hero .tunreihe>.marke:hover{color:var(--tinte);background:rgba(122,108,84,.20);
  box-shadow:inset 0 2px 0 rgba(122,108,84,.38),inset 0 -2px 0 rgba(255,253,248,.9),
    inset 6px 0 0 var(--signal-tief)}

/* Sichtbarer Fokus trotz Fase: der Ring liegt INNEN, weil clip-path alles
   ausserhalb der Form wegschneidet - ein aeusserer outline-Ring waere
   unsichtbar. Drei Pixel, in der Gegenfarbe der Flaeche. */
.schild:focus-visible,.terminknopf:focus-visible,.zeitknopf:focus-visible,
.tunreihe>.marke:focus-visible{outline:0;
  box-shadow:inset 0 0 0 3px var(--signal),inset 0 0 0 5px rgba(255,255,255,.55)}
.hell .schild:focus-visible,.papierfeld .schild:focus-visible,
.hero .schild:focus-visible{
  box-shadow:inset 0 0 0 3px var(--signal-hell),inset 0 0 0 5px rgba(7,16,67,.6)}

/* ---- 5 Zwei gemessene Altschaeden aus critic-20, je eine gescopte Regel ----
   (a) 900 bis 1139 px lief "6.299 Euro" 32,2 px aus seinem Papierfeld und
       "Eigengewicht" brach zu "Eigengewich/t". Ursache war nicht die Spalten-
       zahl, sondern das nowrap auf der Wertzeile: eine Zelle mit nowrap wird
       von mehr Platz nicht schmaler. In diesem Band darf der Wert umbrechen. */
@media (min-width:900px) and (max-width:1199px){
  .kopfkontrast__werte dd{white-space:normal}
}
/*  (a3) Nachtrag aus critic-22: die Freigabe des Umbruchs allein hat den Defekt
       nur verschoben - zwischen 1140 und 1147 px standen VIER Spalten und der
       Preis brach mitten im Wort zu "6.299 Eur/o". Die Ursache war nie das
       nowrap, sondern die Spaltenzahl: das Zweispaltenband endet jetzt ebenfalls
       erst bei 1199 px, also genau dort, wo auch der Umbruch wieder gesperrt
       wird. Zusaetzlich darf eine Wertzeile NIE mitten im Wort brechen -
       dieselbe deutsche Hausregel, die schon fuer die Beschriftung gilt. */
.kopfkontrast__werte dd{overflow-wrap:normal;word-break:keep-all;hyphens:manual}

/*  (a2) Die Handlungszeile des Heros lief im Zwischenband 900 bis 1023 px aus
       ihrer Spalte: gemessen ALT 449 px Inhalt in 346 px Spalte (103 px ueber),
       bei 1024 px 449 in 409. Die schmalere Anzeigeschrift dieser Runde nimmt
       davon schon 47 px weg (NEU 402 in 346; bei 1024 passt es exakt). Den Rest
       erledigt der Umbruch: eine Handlungszeile darf umbrechen, statt die
       Schaltflaechen aus dem Papierbogen zu schieben. Gilt auf allen Breiten -
       unterhalb 560 px steht die Zeile ohnehin als Spalte. */
.hero__tun{flex-wrap:wrap}

/* ---- 5b DIE BUEHNENRUECKWAND ----
   Zweite Instanz, Lauf 17: "dieselbe Vollflaechen-Farbe ... auf Home, Bagger,
   R13, Kompaktlader, Anbaugeraete, Ersatzteile und Kontakt ... dahinter eine
   flache blaue Wand statt der geschichteten Tiefe". Der Befund stimmt: bis hier
   stand auf JEDER Buehne dasselbe Blau mit ausgetauschtem Freisteller.
   Die Buehne bekommt deshalb eine Rueckwand aus einer ECHTEN Haendleraufnahme -
   und zwar je Seite eine andere: die Halle mit den Maschinen hinter dem R13, der
   Anhaengerplatz hinter dem R10 und dem Kompaktlader, das Teilelager hinter dem
   RS04. Das ist kein eingeklebtes Foto: die Aufnahme ist mit dem Guss-Verfahren
   "Werkhalle 6500 K", Stufe 2, vollstaendig in die Blauwelt gegossen (Luminanz
   auf eine Rampe zwischen #050C36 und #2E4AAA abgebildet, Kontrast gedaempft),
   also EIN Farbton, kein zweiter. Eine weiche Maske laesst sie zu den Raendern
   auslaufen, damit es keine Collage-Kante gibt: die Wand endet in Licht, nicht
   an einem Rechteck. Drei Ebenen statt einer - Rueckwand, Lichtinsel,
   Freisteller mit eingebackenem Standschatten. */
.buehne__rueck{position:absolute;inset:0;z-index:0;display:block;
  /* inset:0 und nicht ueberstehend: ein Ueberstand haette die Buehne um drei
     Prozent breiter gemessen als ihre Box (gemessen 968 gegen 940 px bei 1024).
     Die weiche Maske erledigt den Rand ohnehin, ein Ueberstand braucht es nicht. */
  pointer-events:none;background-image:var(--rw-s);
  background-size:cover;background-position:50% 58%;opacity:.58;
  -webkit-mask-image:radial-gradient(72% 66% at 50% 52%,#000 34%,rgba(0,0,0,.55) 68%,transparent 100%);
  mask-image:radial-gradient(72% 66% at 50% 52%,#000 34%,rgba(0,0,0,.55) 68%,transparent 100%)}
@media (min-width:700px){
  .buehne__rueck{background-image:var(--rw)}
}
/* Auf Papierbuehnen (helle Sektionen) hat die Rueckwand nichts zu suchen. */
.hell .buehne__rueck{display:none}

/* ---- 6 Gewicht als Gestaltungsmittel, am Schild abgelesen ----
   Auf dem Firmenschild ist die GROSSE Zeile relativ duenner gestrichen als die
   kleinen: die Wortmarke misst Stamm/Versalhoehe 0,1439 - das ist ein Mittel-
   gewicht, kein Fettschnitt. (Die kleine Claimzeile laesst sich am Foto bei
   97 px Versalhoehe nicht zuverlaessig ausmessen; sie ist sichtbar fetter, aber
   ich fuehre dafuer keine Zahl.) Bis Runde 17 lief jede Ueberschrift auf 700.
   Grosse Ueberschriften stehen deshalb jetzt auf 500 - gemessen 0,1795 gegen
   0,1439 des Schildes, also 25 Prozent darueber statt 46 Prozent bei 700 und
   29 Prozent bei der Vorgaengerschrift auf 700. Kleine Anzeigerollen
   (Navigation, Knopf, Etikett, Tabellenkopf) bleiben auf 600/700: gross leichter,
   klein fetter - dieselbe Staffelung wie auf dem Schild. */
h1,h2{font-weight:500;letter-spacing:-.018em}

/*  (b) Unter 340 px wurde der Preis der Zahlenleiste vom overflow:hidden des
       Elternfeldes um 12,9 px beschnitten. Eine Stufe kleiner, und er steht. */
@media (max-width:339px){
  .zahlenleiste .preisblock__zahl{font-size:1.12rem}
}

/* ==================================================================
   11 DIE DRUCKWENDE (Runde 19)
   ------------------------------------------------------------------
   Befund des Inhabers zu Runde 18: "im Prinzip hast du eigentlich nur den
   Hintergrund schraffiert, das geht noch wesentlich besser." Er hat recht -
   Runde 18 hat ein Skelettproblem mit einem Oberflaechenmittel behandelt.

   Gemessen am echten Firmenschild (assets/eingang/boerde/bagger-01.jpg,
   Mittelfeld ohne Rand, Zuordnung jedes Bildpunkts zum naechsten Markenanker
   in CIE-Lab, work/r19/farbanteil.py):
       Papier 77,3 %   Blau 14,4 %   Orange 6,1 %
   Dieselbe Messung am Livestand vor dieser Runde (Startseite, 1440, ganze Seite):
       Papier 40,9 %   Blau 53,9 %   Orange 1,2 %
   Wir hatten seine Markenlogik umgedreht: Blau war der Traeger, Papier die
   aufgeklebte Karte. Auf seinem Schild ist Blau SCHRIFT, Orange ZEICHEN UND
   LINIE, und der helle bedruckte Traeger haelt beides.

   Die Umkehr ist deshalb keine Umfaerbung, sondern eine andere Anlage:
     - Der Bogen laeuft DURCH. Sektionen haben keine eigene Flaeche mehr;
       es gibt nicht mehr einen Stapel farbiger Baender, sondern ein Blatt.
     - Blau ist ein OBJEKT MIT KANTEN: Schrift, Balken oder gesetzte Tafel.
       Je Route steht hoechstens eine grosse Tafel. Eine Tafel hat eine
       Plattenkante, wirft einen Schatten auf das Papier und traegt das
       Linienraster der bedruckten Plane - sie liegt AUF dem Bogen.
     - Farbdichte statt Farbleiter: statt blau / blau-tief / blau-nacht gibt
       es eine Druckfarbe in drei Dichten - Vollton, 11 % Raster, 5,5 % Raster.
     - Papierfaser statt Schraffur: das senkrechte Linienraster ist die
       Oberflaeche der bedruckten PLANE und steht deshalb nur noch auf den
       Druckflaechen. Der Traeger bekommt, was ein Bogen hat: Faser und eine
       leichte Wolkigkeit, richtungslos.
   ================================================================== */

/* ---- 11.1 Toene, die an der FLAECHE haengen ---- */
:root{
  --ton-mut:var(--text-mut);        /* leiser Text, Vorgabe = auf Druckfarbe */
  --papier-hoch:#F7F5F0;            /* erhabenes Papier: Felder, Karten */
  --raster-1:rgba(12,34,128,.055);  /* 5,5 % Druckraster */
  --raster-2:rgba(12,34,128,.11);   /* 11 % Druckraster */
  --plattenkante:rgba(7,16,67,.44);
}
.hell,.papierfeld{--ton-mut:var(--tinte-mut)}
.druck{--ton-mut:var(--text-mut)}

/* ---- 11.2 Der Traeger: ein Bogen, kein Stapel ---- */
html{background-color:var(--papier)}
body{
  background-color:var(--papier);color:var(--tinte);
  /* Lage 1: Faser, fein und richtungslos. Lage 2: die Wolkigkeit eines
     ungestrichenen Bogens, lange Welle, damit die Kachelung nicht auffaellt.
     Beide zusammen bleiben unter drei Tonwertstufen - man sieht sie nicht,
     man merkt sie. Ein Streifenraster waere hier falsch: das ist die
     Oberflaeche der bedruckten Plane, nicht die des Traegers. */
  background-image:none}

/* Sektionen verlieren ihre Flaeche. Was bleibt, ist ihre Lage auf dem Bogen. */
.abschnitt.koernung,.hero.koernung,.papierfeld.koernung,
.abschnitt.hell.koernung,.abschnitt.tief.koernung,
.abschnitt.kontaktplatte.koernung,.fuss.koernung{background-color:transparent}
.hell,.tief,.kontaktplatte{background-color:transparent}
.hero{background-color:transparent;color:var(--tinte)}
.fuss{background-color:transparent;color:var(--tinte-mut)}
/* Das Linienraster ist ab jetzt Druckflaeche, nicht Seitenflaeche. */
.koernung::after{content:none}
/* Die Abkantung des Blechs gilt nur noch fuer Druckflaechen: Papier hat keine
   Lichtkante, es hat eine Schnittflaeche (siehe 2 Schnittkante). */
.abschnitt::before{background:none}

/* ---- 11.3 Die Druckformen ----
   TAFEL   gesetzte Flaeche mit sichtbarem Papierrand links und rechts
   BALKEN  laufende Flaeche ueber die ganze Bogenbreite
   Beide tragen oben den Orangeriegel des Schilds, eine Plattenkante und
   einen Schatten auf dem Papier. */
.abschnitt.druck,.druck.koernung{background-color:var(--blau)}
.druck{position:relative;color:var(--text);
  border-top:3px solid var(--signal);
  box-shadow:0 0 0 1px var(--plattenkante),0 26px 44px -30px rgba(7,16,67,.62)}
.druck h1,.druck h2,.druck h3{color:#fff}
.druck::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.10) 0,rgba(0,0,0,.13) 1.5px,rgba(255,255,255,.10) 3px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0,rgba(0,0,0,.06) 5.5px,rgba(255,255,255,.05) 11px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' seed='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  background-size:auto,auto,160px 160px}
/* Bilder und Buehnen steigen ueber das Raster - ein bedrucktes Schild hat ein
   Raster, ein Foto der Maschine nicht (Kill 1 aus critic-21). */
.druck .buehne,.druck figure,.druck picture,.druck>img,.druck .bahn img{position:relative;z-index:3}
/* Die Tafel steht mit Papierrand. Mobil schmal, damit der Satzspiegel bleibt. */
.druck--tafel{margin-left:14px;margin-right:14px}
.druck--balken{margin-left:0;margin-right:0}
/* Zwischen zwei Druckformen liegt immer Papier: eine Tafel stoesst nie an den
   Kopf, den Fuss oder die naechste Tafel. */
.druck--tafel{margin-top:34px;margin-bottom:34px}
.druck--kopf{margin-top:0}

/* ---- 11.4 Blau ist Schrift ----
   Auf dem Schild traegt Blau die Wortmarke, den Claim und die Rufnummer; es ist
   dort keine Flaeche, sondern Schriftfarbe. Grosse Anzeigeschrift auf Papier
   steht deshalb in der Druckfarbe, nicht in Tinte. Gemessen 11,45:1. */
.hell h1,.hell h2,.hero h1,.hero h2,.fuss h2{color:var(--blau)}
.hell h3{color:var(--tinte)}

/* ---- 11.5 Farbdichte: das Raster als dritte Stufe ----
   Wo bisher ein zweiter warmer Papierton die Abstufung machte, steht jetzt
   ein Rasterfeld derselben Druckfarbe. Das bindet jede Stufe an die Marke. */
.hell .zahlenleiste>div{background-color:rgba(12,34,128,.075)}
.hell .zahlenleiste{background-color:var(--linie-hell)}
.hell .wegzeile:hover{background-color:var(--raster-1)}
.hell .wischer::after{background:linear-gradient(to left,var(--papier),rgba(240,236,227,0))}
.feld{background-color:var(--papier-hoch);border-color:rgba(12,34,128,.30)}
.wegzeile__bild,.dipt figure{background-color:var(--raster-1)}

/* ---- 11.6 Der Briefkopf ----
   Der Kopf ist ab jetzt der Kopf des Bogens und nicht mehr ein blaues Band:
   die Wortmarke steht gesetzt wie auf dem Schild - Piktogramm, zwei Zeilen
   Versalschrift in Druckblau, darunter der Orangeriegel und die Claimzeile.
   Die Orangelinie des Schilds laeuft als Unterkante des ganzen Kopfes weiter. */
.kopf{background-color:var(--papier);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' seed='11'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23f)' opacity='.085'/%3E%3C/svg%3E");
  background-size:170px 170px;
  border-bottom:3px solid var(--signal);
  box-shadow:0 12px 22px -20px rgba(7,16,67,.55)}
.wortmarke{background-color:transparent;color:var(--blau);margin-bottom:0;
  border-bottom:0;box-shadow:none;padding-left:0;padding-right:16px;align-items:center}
.wortmarke b{color:var(--blau);line-height:.94}
.wortmarke__text>span{color:var(--signal-tief)}
.kopf-liste,.zug{color:var(--blau);border-left-color:var(--linie-hell)}
.kopf-liste .anz{background-color:var(--raster-2);color:var(--blau)}
.kopf-liste.hat .anz{background-color:var(--signal-fest);color:#fff}
.zug i::before,.zug i::after{background-color:var(--blau)}
.kopf__index a{color:var(--blau);border-left-color:var(--linie-hell)}
.kopf__index a:first-child{border-left-color:var(--linie-hell)}
.kopf__index a:hover{background-color:var(--raster-1);color:var(--signal-tief)}
.kopf__index a[aria-current="page"]{background-color:var(--raster-2)}
.kopf-tel b{color:var(--blau)}
.kopf-tel span{color:var(--tinte-mut)}
.kopf-tel:hover b{color:var(--signal-tief)}
.kopf :focus-visible{outline-color:var(--signal-tief)}

/* ---- 11.7 Der Fuss ----
   Das gesetzte Firmenschild steht jetzt ohne eigene Karte auf dem Bogen: es
   IST der Bogen. Darueber ein Orangeriegel als Abschluss des Satzes. */
.fuss{border-top:3px solid var(--signal)}
.fuss a{color:var(--tinte);border-bottom-color:var(--linie-hell)}
.fuss a:hover{color:var(--signal-tief);border-bottom-color:var(--signal-tief)}
.fuss__ort,.fuss__ort span,.fuss__klein{color:var(--tinte-mut)}
.fuss__zeiten b{color:var(--tinte)}
.firmenschild{background-color:transparent;padding:0}
.firmenschild__wort b{color:var(--blau)}
.firmenschild__inh{color:var(--signal-tief)}
.firmenschild__claim{color:var(--blau)}

/* ---- 11.8 Der Hero als Bogen ----
   Der Papierriegel als eigene Karte auf Blau faellt weg: es gibt kein Blau
   mehr, auf dem er liegen koennte. Der Satz steht direkt auf dem Bogen, die
   Maschine daneben im ANSCHNITT - sie laeuft ueber die rechte Bogenkante
   hinaus, statt in einem Rechteck zu sitzen. */
.hero::before{background:none}
.hero__text{background-color:transparent;box-shadow:none;padding-left:0;padding-right:0;
  margin-top:8px}
.hero__text::before{border-top:0;border-bottom:0}
.hero__text h1{color:var(--blau)}
.hero__text .marke-z{color:var(--tinte-mut)}
.hero .buehne__fuss{color:var(--tinte-mut)}
.hero .kennplakette{color:var(--signal-tief);border-color:rgba(156,74,15,.5)}
/* Der Anschnitt: das Bild laeuft rechts aus dem Bogen. Mobil bleibt es voll
   sichtbar - dort ist der Bogen selbst nur 390 px breit. */
.hero__buehne{margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1)}

/* ---- 11.9 Papierbogen auf Papier: die Schnittkante bleibt, aber leise ----
   Ein Papierfeld auf dem Bogen ist eine zweite Lage, kein Farbwechsel. Es
   bekommt deshalb einen Tonwert hoeher und die Schnittkante, sonst nichts. */
.papierfeld{background-color:var(--papier-hoch)}
.hell .papierfeld{background-color:var(--papier-hoch)}
.kopfkontrast__tafel.papierfeld{background-color:var(--papier)}

/* ---- 11.10 Der Kopf bekommt den Satzspiegel des Bogens ----
   Bisher klebte die Wortmarke als Plakette am linken Rand des Fensters. Auf
   einem Bogen steht der Briefkopf im Satzspiegel, also in derselben Bahn wie
   alles darunter. */
.kopf__reihe{padding-left:var(--rand);padding-right:var(--rand);
  max-width:1360px;margin-left:auto;margin-right:auto}
/* Das Piktogramm des Schilds steht links vor der Wortmarke, nicht rechts
   daneben - so wie auf dem gedruckten Schild die Marke zuerst kommt. */
.wortmarke__zeichen{order:0}

@media (min-width:760px){
  /* Zwei Zeilen Versalschrift wie auf dem Schild. Erst ab hier: darunter
     wuerde der zweizeilige Block den Kopf zu hoch machen. */
  :root{--kopf-h:78px}
  .wortmarke b i{display:block}
  .wortmarke b i::before{content:none}
  .wortmarke b{font-size:1.16rem;letter-spacing:-.03em}
  .wortmarke__text>span{margin-top:5px;padding-top:5px;
    border-top:3px solid var(--signal);display:inline-block}
  .wortmarke{padding-top:10px;padding-bottom:11px}
}
@media (min-width:1100px){
  :root{--kopf-h:86px}
  .wortmarke b{font-size:1.34rem}
  .wortmarke__zeichen{width:56px;height:42px}
}

/* ---- 11.11 Der Hero auf dem Bogen, breite Fassung ----
   Ohne die blaue Flaeche gibt es keinen Grund mehr fuer die Papierkarte, die
   in die Buehne hineinragt. Stattdessen steht der Satz im Satzspiegel und die
   Maschine laeuft nach rechts aus dem Bogen: ANSCHNITT statt Rechteck. */
@media (min-width:900px){
  .hero__text{margin-right:0;padding:0 30px 0 0}
  .hero__buehne{margin-left:0;margin-right:calc(var(--rand) * -1)}
  .hero__raster{grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr);
    column-gap:clamp(20px,3vw,48px)}
}
@media (min-width:1400px){
  /* Der Anschnitt wird auf grossen Schirmen echt: die Buehne laeuft ueber die
     rechte Kante des Satzspiegels hinaus bis an den Bogenrand. */
  .hero__buehne{margin-right:calc((100vw - 1360px) / -2 - var(--rand))}
}

/* ---- 11.12 Satzlinien: Gliederung auf dem Bogen ohne Farbwechsel ----
   Zwei Papiersektionen hintereinander duerfen nicht ineinanderlaufen. Auf
   einem gedruckten Bogen trennt das keine Farbe, sondern eine Satzlinie in
   Tinte - haarfein, im Satzspiegel, nicht ueber die ganze Breite. */
.hell + .hell > .bahn::before{content:"";display:block;height:1px;
  background:var(--linie-hell);margin-bottom:34px}
.hell + .hell.nach-kreuzung > .bahn::before,
.hell + .hell.ohne-oben > .bahn::before,
.hell + .hell.ueber-hero > .bahn::before,
.hero + .hell > .bahn::before{content:none}

/* ---- 11.13 Die Anfrageliste und das Terminfenster stehen auf Papier ---- */
.liste__blatt,.menu__blatt,.termin__blatt{background-color:var(--papier)}
.menu__blatt{border-top:3px solid var(--signal)}
.menu a{border-bottom-color:var(--linie-hell)}
.menu a b{color:var(--blau)}
.menu a[aria-current="page"] b{color:var(--signal-tief)}
.menu__grund{background-color:rgba(19,26,46,.55)}

/* ---- 11.14 Die Faser liegt AUF dem Bogen, nicht unter ihm ----
   Erster Bau dieser Runde, gemessen und verworfen: die Faser lag als
   Hintergrund des Bogens, also UNTER den Bildern. Die Maschinenfreisteller
   tragen ihre Papierflaeche eingebacken (240,236,228) - wo ein Bild lag, fehlte
   die Faser, und es stand ein glattes helles Rechteck mitten im Bogen. An der
   Kante des Heros bei 390 px war das als gerader Absatz ueber 280 px Hoehe zu
   sehen (work/r19/n1/home-390.png, x=305).
   Auf einem gedruckten Blatt liegt die Faser ueber ALLEM, was darauf gedruckt
   ist - auch ueber der Abbildung. Die Lage sitzt deshalb als eine einzige
   feste Lage ueber dem Satz: FEIN, richtungslos, Amplitude rund zwei
   Tonwertstufen. Das ist NICHT das Linienraster aus Runde 18 (das bleibt auf
   den Druckflaechen, wo die bedruckte Plane ist) und nicht dessen Staerke.
   position:fixed statt absolute: eine Lage in Fenstergroesse statt eine ueber
   12.000 px, also eine Komposition statt einer riesigen Textur. */
.bogenfaser{position:fixed;inset:0;z-index:8;pointer-events:none;display:block;
  mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='11'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23w)' opacity='.055'/%3E%3C/svg%3E");
  background-size:180px 180px,560px 560px}
@media print{ .bogenfaser{display:none} }

/* ---- 11.15 Die Kennwertleiste ist ein gedruckter BALKEN ----
   Sie traegt die vier Zahlen, die eine Maschine ausmachen, und ist damit die
   Stelle, an der die Druckfarbe im ersten Bildschirm steht - schmal, satt,
   mit Plattenkante und Schatten auf dem Papier. Kein Rasterfeld: ein Raster
   ist eine leise Stufe, diese Zahlen sind laut. */
.hell .zahlenleiste{background-color:var(--plattenkante);
  border-top:3px solid var(--signal);
  box-shadow:0 0 0 1px var(--plattenkante),0 20px 34px -26px rgba(7,16,67,.62)}
.hell .zahlenleiste>div{background-color:var(--blau)}
.hell .zahlenleiste b{color:#fff}
.hell .zahlenleiste span{color:var(--text-mut)}
.hell .zahlenleiste[data-riss]>div::after{background:var(--signal)}

/* ---- 11.16 Der Hero: Satz breiter, Anschnitt ohne Ueberstand ---- */
@media (min-width:900px){
  .hero__raster{grid-template-columns:minmax(0,1.16fr) minmax(0,1fr)}
  .hero h1{font-size:clamp(2.4rem,3.45vw,3.02rem)}
}
@media (min-width:1400px){
  /* Der Anschnitt laeuft nach rechts aus dem Bogen; die Bildunterschrift bleibt
     im Satzspiegel stehen, sonst haengt sie ueber der Kante. */
  .hero .buehne__fuss{padding-right:calc((100vw - 1360px) / 2 + var(--rand))}
}

/* ---- 11.17 Die dritte Druckform: das RASTERFELD ----
   Zwischen weissem Bogen und Vollton fehlte eine Stufe. Im Druck ist das kein
   dritter Farbton, sondern dieselbe Farbe in geringerer Dichte. Das Rasterfeld
   traegt Koepfe, die kein eigenes Fotomaterial haben - es gibt der Seite ein
   Gewicht, ohne eine Aussage zu behaupten, die das Material nicht deckt. */
.abschnitt.hell.rasterfeld.koernung,.abschnitt.rasterfeld.koernung{
  background-color:var(--raster-2)}
.rasterfeld{position:relative;box-shadow:0 0 0 1px rgba(12,34,128,.16)}
.rasterfeld--kopf{border-top:3px solid var(--signal)}

/* ---- 11.18 Die Vollbreiten-Kopfzeile ----
   Auf der Kategorieseite laeuft der Satz ueber die ganze Bogenbreite, statt in
   einer Spalte neben der Maschine zu stehen. Damit hat /bagger/ einen eigenen
   Kopfbau und nicht denselben wie die Startseite. */
.vollzeile{margin-top:10px}
@media (min-width:900px){
  .vollzeile{font-size:clamp(2.2rem,4.2vw,3.5rem);max-width:22ch}
  .vollzeile + .diptychon{margin-top:26px}
}

/* ---- 11.19 Zwischen Kopf und Tafel bleibt Papier ---- */
.druck--kopf{margin-top:14px}

/* ---- 11.20 Orange ist die zweite Druckfarbe, nicht ein Rest ----
   Am Firmenschild steht die zweite Zeile ("Inh. Christian Obst") in Orange,
   unter einem Orangeriegel. Die Sektionsmarke der Seite ist genau diese Rolle -
   sie steht deshalb ab jetzt in derselben Farbe statt in Grau. Gemessen auf
   Papier 5,24:1. */
.hell .marke-z,.papierfeld .marke-z,.hero .marke-z,.rasterfeld .marke-z{color:var(--signal-tief)}
.hero__text .marke-z{color:var(--signal-tief)}

/* ---- 11.21 Der Registerkopf der Kategorieseite ----
   Satz oben ueber die volle Breite, darunter Erlaeuterung und Maschine
   nebeneinander - beide oben angeschlagen. Zentriert stand der Text sonst in
   der Mitte einer 660 px hohen Bildspalte und riss ein Loch unter die
   Ueberschrift (gemessen an work/r19/n5/bagger-1440.png). */
.kopfregister{align-items:start}
@media (min-width:900px){
  .kopfregister{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:clamp(24px,4vw,64px)}
}

/* ---- 11.22 Die Drucktafel gewinnt gegen jede Flaechenregel ----
   Gemessen im ersten Bau dieser Runde: die Kontaktplatte stand mit weisser
   Schrift auf Papier, weil `.abschnitt.kontaktplatte.koernung` (drei Klassen)
   die Tafelregel (zwei Klassen) geschlagen hat. Eine Druckform ist kein
   Sonderfall einer Sektion, sie ist die Flaechenentscheidung selbst. */
.abschnitt.druck.koernung,.abschnitt.kontaktplatte.druck.koernung,
.abschnitt.hell.druck.koernung,.hero.druck.koernung{background-color:var(--blau)}

/* ---- 11.23 Die Warenkarte wird ein KATALOGEINTRAG auf Papier ----
   Bis Runde 18 war jede Warenkarte ein blaues Feld - auf /ersatzteile/ ergaben
   fuenf davon plus der Tafelkopf 42,0 Prozent Blau auf der ganzen Route,
   gemessen gegen 14,4 Prozent am Firmenschild. Dreizehn blaue Kaertchen sind
   die Tapete in klein. Ein Katalog loest das anders: der Eintrag steht auf
   Papier, oben ein Orangeriegel, darunter Gruppe, Name, Werte, Preis. Die
   Druckfarbe traegt dort, wo sie zaehlt - in der Schrift und im Preis. */
.hell .warenkarte,.papierfeld .warenkarte,.rasterfeld .warenkarte{
  background-color:var(--papier-hoch);border:0;
  border-top:3px solid var(--signal);
  box-shadow:0 0 0 1px rgba(12,34,128,.20),0 14px 26px -22px rgba(7,16,67,.45)}
.hell .warenkarte:hover,.papierfeld .warenkarte:hover,.rasterfeld .warenkarte:hover{
  box-shadow:0 0 0 1px rgba(12,34,128,.42),0 16px 28px -20px rgba(7,16,67,.5)}
.hell .warenkarte h3,.papierfeld .warenkarte h3,.rasterfeld .warenkarte h3{color:var(--blau)}
.hell .warenkarte .warenkarte__gruppe,.papierfeld .warenkarte .warenkarte__gruppe,
.rasterfeld .warenkarte .warenkarte__gruppe{color:var(--signal-tief)}
.hell .warenkarte .warenkarte__hinweis,.papierfeld .warenkarte .warenkarte__hinweis,
.rasterfeld .warenkarte .warenkarte__hinweis{color:var(--tinte-mut)}
.hell .warenkarte .warenkarte__zeile,.papierfeld .warenkarte .warenkarte__zeile,
.rasterfeld .warenkarte .warenkarte__zeile{color:var(--tinte-mut);border-top-color:var(--linie-hell)}
.hell .warenkarte .warenkarte__zeile b,.papierfeld .warenkarte .warenkarte__zeile b,
.rasterfeld .warenkarte .warenkarte__zeile b{color:var(--tinte)}
.hell .warenkarte .preis,.papierfeld .warenkarte .preis,.rasterfeld .warenkarte .preis{
  color:var(--blau)}
.hell .warenkarte .preis em,.papierfeld .warenkarte .preis em,
.rasterfeld .warenkarte .preis em{color:var(--tinte-mut)}
.hell .warenkarte .sperrvermerk,.papierfeld .warenkarte .sperrvermerk,
.rasterfeld .warenkarte .sperrvermerk{color:var(--signal-tief);border-color:rgba(156,74,15,.5)}
.hell .warenkarte__bild,.papierfeld .warenkarte__bild,.rasterfeld .warenkarte__bild{
  background-color:var(--papier)}

/* ---- 11.24 Orange bekommt seine Flaeche dort zurueck, wo sie belegt ist ----
   Am Schild ist Orange das Piktogramm und der Riegel, nicht ein Rest. Das
   Piktogramm im Kopf und das gesetzte Schild im Fuss sind genau diese beiden
   Rollen - sie stehen deshalb in der Groesse, die sie auf dem Schild haben. */
.marke-z::before{width:56px}

/* ---- 11.25 Die Klassenkarte wird ebenfalls Katalogeintrag ----
   Dieselbe Begruendung wie 11.23: drei blaue Karten nebeneinander sind die
   Flaeche in Portionen. Der Eintrag steht auf Papier, die Klassenzahl und die
   Ueberschrift tragen die Druckfarbe. */
.hell .klassenkarte,.papierfeld .klassenkarte,.rasterfeld .klassenkarte{
  background-color:var(--papier-hoch);border:0;border-top:3px solid var(--signal);
  box-shadow:0 0 0 1px rgba(12,34,128,.20),0 16px 30px -24px rgba(7,16,67,.45)}
.hell .klassenkarte:hover,.papierfeld .klassenkarte:hover,.rasterfeld .klassenkarte:hover{
  box-shadow:0 0 0 1px rgba(12,34,128,.46),0 22px 40px -26px rgba(7,16,67,.5)}
.hell .klassenkarte__klasse,.hell .klassenkarte h3,
.rasterfeld .klassenkarte__klasse,.rasterfeld .klassenkarte h3{color:var(--blau)}
.hell .klassenkarte h3 a:hover,.rasterfeld .klassenkarte h3 a:hover{color:var(--signal-tief)}
.hell .klassenkarte>p,.rasterfeld .klassenkarte>p{color:var(--tinte-mut)}
.hell .klassenkarte .massbalken__name,.rasterfeld .klassenkarte .massbalken__name{
  color:var(--tinte-mut)}
.hell .klassenkarte .massbalken__zeile b,.rasterfeld .klassenkarte .massbalken__zeile b{
  color:var(--tinte)}
.hell .klassenkarte .massbalken__spur,.rasterfeld .klassenkarte .massbalken__spur{
  background-color:rgba(12,34,128,.14)}
.hell .klassenkarte__daten,.rasterfeld .klassenkarte__daten{
  background-color:var(--linie-hell);border-top-color:var(--linie-hell)}
.hell .klassenkarte__daten div,.rasterfeld .klassenkarte__daten div{
  background-color:rgba(12,34,128,.065)}
.hell .klassenkarte__daten b,.rasterfeld .klassenkarte__daten b{color:var(--tinte)}
.hell .klassenkarte__daten span,.rasterfeld .klassenkarte__daten span{color:var(--tinte-mut)}
.hell .klassenkarte__fuss,.rasterfeld .klassenkarte__fuss{border-top-color:var(--linie-hell)}
.hell .klassenkarte__bild,.rasterfeld .klassenkarte__bild{background-color:var(--papier)}

/* ---- 11.26 Das breite Kopfband ist ein gesetztes BAND, kein Farbfeld ----
   Bisher stand die Maschine des R13 auf einem blauen Verlauf - ein Verlauf ist
   auf dieser Seite ohnehin ausgeschlossen, und der Freisteller trug sein
   eingebackenes Papier als helles Rechteck darin. Ein Band im Druck wird von
   zwei Linien begrenzt, nicht von einer Farbe. Damit verschmilzt das Blatt des
   Freistellers mit dem Bogen und die Maschine steht wieder auf Papier. */
.hell .kopfbreit__band{background:none;
  border-top:3px solid var(--signal);border-bottom:1px solid var(--linie-hell)}
.hell .kopfbreit__band::before{background:none}
.hell .kopfbreit__lead{color:var(--tinte)}

/* ---- 11.27 Anfrageliste und Terminfenster: Papierbogen, blauer Kopf ----
   Die beiden Fenster sind kleine Bogen, die sich ueber die Seite legen: Papier
   mit einem gedruckten Kopfbalken. */
.liste__blatt{background-color:var(--papier);border-left:1px solid var(--linie-hell)}
.liste__kopf{background-color:var(--blau)}
.liste__fuss{background-color:rgba(12,34,128,.075);border-top-color:var(--linie-hell)}
.liste__blatt .liste__zu{border-color:var(--linie-hell-stark);color:var(--tinte)}
.liste__blatt .liste__zu:hover{border-color:var(--signal-tief);color:var(--signal-tief)}
.liste__kopf .liste__zu{border-color:var(--linie-stark);color:var(--text)}
.liste__kopf .liste__zu:hover{border-color:var(--signal-hell);color:var(--signal-hell)}
.liste__leer{color:var(--tinte-mut)}
.listenposten{border-bottom-color:var(--linie-hell)}
.listenposten strong{color:var(--blau)}
.listenposten .art{color:var(--signal-tief)}
.listenposten .zeile{color:var(--tinte-mut)}
.raus{border-color:var(--linie-hell-stark);color:var(--tinte-mut)}
.raus:hover{border-color:var(--signal-tief);color:var(--signal-tief)}
.liste__summe{color:var(--tinte-mut)}
.liste__summe b{color:var(--blau)}

/* ---- 11.28 Der Schluss des Bogens ----
   Orangeriegel oben wie unter der Wortmarke des Schilds, die Rufnummer als
   grosse Druckfarbe, darunter die Wege. Kein Farbfeld mehr. */
.kontaktschluss{border-top:3px solid var(--signal)}
.kontaktschluss .telzeile b{color:var(--blau)}
.kontaktschluss .kontaktplatte__ort{color:var(--tinte-mut)}
@media (min-width:760px){
  .kontaktschluss .telzeile b{font-size:clamp(2.1rem,4.4vw,3.1rem)}
}

/* ---- 11.29 Nachzug: Rollen, die ihre Farbe vom alten blauen Feld hatten ----
   Gemessen an work/r19/n10/r13-1440.png: "Leitmaschine / am haeufigsten
   gefragt" stand in Lichtgrau auf Papier und war praktisch unsichtbar. */
.hell .kopfbreit__rolle b{color:var(--tinte)}
.hell .kopfbreit__rolle span{color:var(--tinte-mut)}
.hell .kopfbreit__rolle{border-left-color:var(--signal-tief)}
/* Das Kopfband traegt die Maschine auf Papier - dort braucht sie nicht die
   Breite, die sie auf einer dunklen Flaeche brauchte, um zu bestehen. */
@media (min-width:900px){
  .hell .kopfbreit__band .buehne{max-width:min(620px,64%)}
}

/* ---- 11.30 Kontrast-Nachzug der Druckwende (glyphengenau gemessen) ----
   Zwoelf Rollen hatten ihre Farbe von der alten blauen Flaeche geerbt. Gemessen
   ueber alle 14 Routen, beide Viewports, mit geoeffnetem Menue, geoeffneter
   Anfrageliste und geoeffnetem Terminfenster, jeweils gegen den zusammen-
   gerechneten Hintergrundstapel (work/r19 Messlauf "kk"). */
/* 1 Bildunterschrift im angeschnittenen Rahmen: `.anschnitt` traegt selbst
      Papier als Grund, die Unterschrift stand darauf in Weiss (1,06:1) - und
      zwar unabhaengig davon, ob die Sektion Papier oder Drucktafel ist. Sie
      bekommt deshalb Tinte, und der EINE ueberlagerte Fall (Werkbuch-Bild mit
      dunklem Streifen IM Bild) behaelt seine helle Schrift. */
figure.anschnitt > figcaption{color:var(--tinte-mut)}
figure.werkbuch__bild > figcaption,figure.anschnitt.werkbuch__bild > figcaption{color:#F2EFE8}
/* 2+3 Terminfenster: die Tageszeitknoepfe standen hell auf hellem Feld */
.hell .zeitknopf,.papierfeld .zeitknopf{color:var(--tinte)}
.hell .zeitknopf em,.papierfeld .zeitknopf em{color:var(--tinte-mut)}
.hell .zeitknopf:hover,.hell .zeitknopf:hover em{color:var(--signal-tief)}
.hell .zeitknopf[aria-pressed="true"]{color:#fff}
.zeitknopf[aria-pressed="true"] em{color:rgba(255,255,255,.94)}
/* 4 Oeffnungszeiten im Fuss */
.fuss__zeiten span{color:var(--tinte-mut)}
/* 5 Beschriftung der Formularfelder im Terminfenster */
.hell .termin__feld legend{color:var(--tinte-mut)}
/* 6 Wartungsintervall auf der Baugruppenkarte */
.hell .baugruppe__wann,.papierfeld .baugruppe__wann,.rasterfeld .baugruppe__wann{
  color:var(--tinte-mut)}
/* 7 Preisspalte der Werkzeugzeile steht auf der Drucktafel, nicht auf Papier */
.druck .werkzeugzeile__preis{color:var(--signal-hell)}
/* 8 Schliessen-Knopf im Menue: Weiss auf halbdurchsichtigem Feld ueber Papier */
.hell .menu__zu,.hell .liste__blatt .liste__zu{color:var(--tinte)}
.hell .menu__zu:hover,.hell .menu__zu:focus-visible{color:var(--signal-tief)}
/* 10 Sektionsmarke im Rasterfeld: Orange auf 11-Prozent-Raster misst 4,26:1.
      Die Druckfarbe selbst traegt dort - der Riegel bleibt orange. */
.rasterfeld .marke-z{color:var(--blau)}
/* 11 Kennwertzellen der Klassenkarte: zwei durchsichtige Lagen uebereinander
      ergaben ein dunkleres Feld als gerechnet. Die Zelle wird deckend. */
.hell .klassenkarte__daten div,.rasterfeld .klassenkarte__daten div{
  background-color:#E5E5E8}
.hell .klassenkarte__daten span,.rasterfeld .klassenkarte__daten span{color:#3F4560}
/* 12 Kennung im eingelassenen Schild */
.hell .schild--rahmen .kenn,.papierfeld .schild--rahmen .kenn,.hero .schild--rahmen .kenn,
.rasterfeld .schild--rahmen .kenn{color:var(--tinte)}
/* 13 Anschrift in der Menuekopfzeile und Kennung am Unterstrich-Knopf */
.hell .menu__kopfzeile span{color:var(--tinte-mut)}
.rasterfeld .marke .kenn,.rasterfeld .marke:hover .kenn{color:var(--tinte)}

/* ---- 11.31 Die Bildunterschrift des Heros bleibt im Satzspiegel ----
   Zwischen 560 und 899 px laeuft die Buehne randlos ueber die ganze Bogenbreite.
   Die Unterschrift lief mit - und damit unter den Zeichnungsrand, der bei 9 px
   steht: die Kennplakette "R13" stand mit ihrem R unter der Orangelinie
   (gemessen an pruef-shots-v21/nachher/home-768.png). Das Bild darf angeschnitten
   sein, der Satz nicht. Reihenfolge beachtet (FEHLER-019): erst der nackte Wert,
   danach die Breitenabfragen, die ihn zuruecknehmen. */
.hero .buehne__fuss{padding-left:var(--rand);padding-right:var(--rand)}
@media (min-width:900px){
  .hero .buehne__fuss{padding-left:0;padding-right:0}
}
@media (min-width:1400px){
  .hero .buehne__fuss{padding-right:calc((100vw - 1360px) / 2 + var(--rand))}
}

/* ==================================================================
   12 DIE BUEHNE IM HERO (Runde 19, Fix-Iteration 1)
   ------------------------------------------------------------------
   Befund der zweiten Instanz (taste-19, NEIN, Anker N-001 "Kassenbon"):
   "cremefarbene Papierflaeche ... die freigestellten Maschinen schweben so
   kontextlos ueber der Flaeche ... auf der Startseite nach zwei Sekunden ins
   Leere: riesige tote Beigeflaeche unten links, kein Licht, keine Ebenen, keine
   Tiefe". Und woertlich, was das Urteil kippen wuerde: "wenn der Home-Hero die
   Maschine nicht freigestellt auf Papier legt, sondern sie in der eigenen Halle
   mit echtem Gegenlicht als Buehne inszeniert - eine Aufnahme mit Raumtiefe
   statt Katalog-Freisteller."

   Genau das ist gebaut, und zwar innerhalb der Drucklogik, nicht gegen sie:
   der Bogen bleibt der Traeger, aber die Maschine steht nicht mehr auf ihm,
   sondern auf einer TAFEL, die rechts in den Anschnitt laeuft. Auf der Tafel
   liegt die echte Halle des Haendlers (`rueck`, in die Blauwelt gegossen), davor
   die Maschine als Freisteller mit eingebackenem Standschatten - drei Ebenen
   statt einer. Die Maschine tritt dabei ueber die linke Plattenkante hinaus auf
   das Papier; ihr Standschatten ist neutral (gemessen 3,7,26 mit Alpha-Rampe)
   und traegt deshalb auf beiden Flaechen.
   Die Tafel ist keine Tapete: oben, unten und links steht Papier, sie hat eine
   Plattenkante, den Orangeriegel und einen Schatten auf dem Bogen.
   ================================================================== */
.hero--buehne .hero__buehne{position:relative;background-color:var(--blau);
  border-top:3px solid var(--signal);
  box-shadow:0 0 0 1px var(--plattenkante),0 26px 44px -30px rgba(7,16,67,.62);
  padding:16px 0 18px}
.hero--buehne .hero__buehne::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.10) 0,rgba(0,0,0,.13) 1.5px,rgba(255,255,255,.10) 3px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0,rgba(0,0,0,.06) 5.5px,rgba(255,255,255,.05) 11px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' seed='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  background-size:auto,auto,160px 160px}
.hero--buehne .hero__buehne .buehne{position:relative;z-index:2}
/* Die Beschriftung der Buehne steht auf der Tafel, also in ihren hellen Toenen */
.hero--buehne .buehne__fuss{color:var(--text-mut)}
.hero--buehne .kennplakette{color:var(--signal-hell);border-color:rgba(232,130,47,.5)}

/* ---- 12.2 Die Kopftafel der Kategorieseite ----
   Satz auf dem Bogen, darunter die gesetzte Tafel mit Maschine, Halle und
   Kennwerten. Zwischen Satz und Tafel steht Papier, die Tafel hat ihren
   Papierrand - ein Block, keine Tapete. */
.kopfsatz{padding-bottom:18px}
.druck--kopfband{margin-top:0}
.kopfsatz + .druck--kopfband{margin-top:6px}

/* ---- 12.3 Schluss-Zaesur: die Kontaktplatte ist wieder ein Tintenfeld ----
   critic-23 Kill 4, gemessen: `/kontakt/` hatte nach der Druckwende 0 statt 3
   Kontrastfelder, `/bestellung/` 0. Der Abschluss jeder Route braucht seine
   Zaesur. Sie kommt als gesetzte TAFEL mit Papierrand zurueck, nicht als die
   durchlaufende Wand von vorher: oben Orangeriegel, Plattenkante, Schatten auf
   dem Bogen, darunter wieder Papier bis zum Fuss. */
.kontaktschluss .telzeile b{color:#fff}
.kontaktschluss .telzeile:hover b{color:var(--signal-hell)}
.kontaktschluss .telzeile span{color:var(--signal-hell)}
.kontaktschluss .kontaktplatte__ort{color:var(--text-mut)}

/* ---- 12.4 Das Ortsband auf dem Handy ----
   critic-23 Kill 5, gemessen: Median 4,20:1, 31 Prozent der Textpixel unter
   3:1. Die Abdunkelung des Hallenfotos wird nur mobil tiefer gezogen; am
   Desktop stand sie bei 5,51:1 und bleibt, wie sie war. */
@media (max-width:899px){
  .band__flor{background:linear-gradient(to top,
    rgba(7,16,67,.985) 26%,rgba(7,16,67,.86) 62%,rgba(7,16,67,.42))}
}

/* ---- 12.5 Keine kalten Grauplatten ----
   critic-23 Kill 6, gemessen: die aktive Navigationszelle stand auf
   rgb(212,212,214), die Schaltflaeche "Schliessen" im Menue auf rgb(145,145,148)
   - kaltes Grau in einer Welt aus Ultramarin, Rost und Papier. Beides entsteht
   aus einem Tintenfilm ueber warmem Papier. Die Navigationszelle braucht gar
   keine Flaeche: sie ist am Orangeriegel erkennbar, so wie jede andere Marke
   dieser Seite. Der Schliessen-Knopf bekommt die Papierbauart des eingelassenen
   Schilds mit Rostflanke. */
.kopf__index a[aria-current="page"]{background-color:transparent;color:var(--blau)}
.kopf__index a:hover{background-color:transparent;color:var(--signal-tief)}
.hell .menu__zu,.hell .liste__blatt .liste__zu{
  background-color:rgba(120,105,78,.20);
  box-shadow:inset 0 3px 0 rgba(96,84,60,.38),inset 0 -3px 0 rgba(255,255,252,.95),
    inset 3px 0 0 rgba(156,74,15,.75)}
.hell .menu__zu:hover,.hell .liste__blatt .liste__zu:hover{
  background-color:rgba(120,105,78,.28)}

/* ---- 12.6 Die Fuge zwischen Ueberschrift und Absatz ----
   critic-23 Kill 7, am gerenderten Handybild gemessen: zwischen der letzten
   Zeile einer Ueberschrift und dem ersten Fliesstext lagen 3,3 px, waehrend der
   Fliesstext untereinander 10,0 px Luft hat - der Absatz klebte enger an der
   Ueberschrift als die Ueberschrift an sich selbst. Ursache ist die enge
   Zeilenhoehe der Anzeigeschrift (1,02): die Box endet fast auf der Grundlinie.
   Die Ueberschrift bekommt deshalb selbst den fehlenden Betrag als Fussmass. */
h1 + p,h2 + p,h1 + .hero__lead,h2 + .satz-mut,h1 + .satz-mut{margin-top:.42em}
h1,h2{padding-bottom:.07em}

/* ---- 12.7 Die Faser der tragenden Flaeche wird messbar ----
   critic-23 Kill 8: A(3 px) 0,01 auf Papier gegen 3,86 auf Blau. Der Messwert
   fragt nach der 3-px-Periode der bedruckten PLANE - die gehoert per Anlage
   dieser Runde nur auf die Druckflaechen. Was auf dem Bogen fehlte, war nicht
   das Streifenraster, sondern Amplitude: die Faser lag an der Messschwelle.
   Sie wird deshalb staerker (rund vier Tonwertstufen statt zwei), bleibt aber
   richtungslos - Papierfaser, keine Schraffur. */
.bogenfaser{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='11'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.15'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.38' numOctaves='2' seed='19'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23w)' opacity='.075'/%3E%3C/svg%3E");
  background-size:180px 180px,300px 300px,560px 560px}

/* ---- 12.8 Die Hero-Tafel wird eine Buehne, keine Karte ----
   Erste Fassung dieser Fix-Iteration, gemessen: die Tafel stand als Rechteck
   787-1440 x 174-744 in der Mitte der rechten Spalte, mit 74 px Papier oben und
   unten und 43 px Fuge zur Textspalte - ein Kaertchen, keine Buehne. Und die
   Hallenwand fehlte, weil `.hell .buehne__rueck{display:none}` auch fuer den
   Hero galt: der Hero traegt zwar den Bogen, seine Tafel aber nicht.
   Drei Korrekturen: die Wand kommt auf der Tafel zurueck (dritte Ebene), die
   Tafel spannt ueber die volle Hoehe der Zeile, und die Maschine tritt ueber die
   linke Plattenkante auf das Papier - die Ueberlappung, die die Seite hier
   verloren hatte. Der Standschatten des Freistellers ist neutral gebacken
   (gemessen 3,7,26 mit Alpha-Rampe) und traegt auf beiden Flaechen. */
.hero--buehne .buehne__rueck{display:block;opacity:.5}
@media (min-width:900px){
  .hero--buehne .hero__buehne{align-self:stretch;margin-top:22px;margin-bottom:22px;
    overflow:visible}
  .hero--buehne .hero__buehne .buehne{margin-left:-7%}
  .hero--buehne .hero__buehne .buehne__licht{left:7%}
}

/* ---- 12.9 Nachzug an der Hero-Tafel, gemessen ----
   (a) Die Hallenwand lief mit der um 7 Prozent nach links geschobenen Buehne
       aus der Tafel heraus und stand als graues Band auf dem Papier (gemessen
       bei x=760 rgb(181,181,184) gegen Papier rgb(226,226,214)). Sie gehoert
       auf die Tafel, also wird sie um denselben Betrag zurueckgesetzt.
   (b) Der Freisteller traegt links transparente Luft; die Verschiebung erzeugte
       deshalb keine sichtbare Ueberlappung, sondern nur den Wandueberstand. Die
       Verschiebung faellt weg. Die Ueberlappung, die dieser Erstbildschirm
       braucht, macht stattdessen der Kennwertbalken: die Tafel laeuft unter ihn
       hinein, er kreuzt ihre Unterkante - dasselbe Bauteil, das auf den
       Kategorieseiten schon ueber die Sektionsgrenze kreuzt. */
@media (min-width:900px){
  .hero--buehne .hero__buehne .buehne{margin-left:0}
  .hero--buehne .hero__buehne .buehne__licht{left:3%}
  .hero--buehne .buehne__rueck{left:0}
  .hero--buehne .hero__buehne{margin-bottom:-26px}
}

/* ---- 12.10 Das Kopfband des R13 bleibt ein Band ----
   Mit der Rueckkehr auf die Drucktafel fiel die Breitenbegrenzung aus 11.29
   weg (sie war auf `.hell` gescopt) und die Maschine stand wieder 860 px breit:
   die Route kam damit auf 35,0 Prozent Blau bei 62,0 Prozent Papier. Ein Band
   ist ein Band, kein Vollbild. */
@media (min-width:900px){
  .kopfbreit__band .buehne{max-width:min(660px,66%)}
}