/* Hausschrift Barlow und Barlow Condensed, SELBST ausgeliefert aus /static/fonts, der Browser fragt NIE bei Google an (DSGVO). font-display:swap: der Text steht sofort da und wird nachtraeglich in Barlow gesetzt. HERKUNFT (Schnitt 1 Nr. 4, 11.09.2026): Repository github.com/google/fonts, Ordner ofl/barlow (Commit 6cdf01867df0, 26.02.2026) und ofl/barlowcondensed (Commit 60824dce48f7, 26.02.2026), Schriftversion 1.408, Lizenz SIL OFL 1.1 in /static/fonts/OFL.txt. Aus den TTF mit fontTools 4.65.0 gewandelt: pyftsubset --unicodes= --layout-features='*' --flavor=woff2. Laufweiten und Zeilenmasse identisch mit den Dateien vom 09.09. (A5673, Version ebenfalls 1.408). SCHNITTE: nur die, deren Gewicht in dieser Datei vorkommt (Regel Marcel 11.09. 21:09): Barlow 400 (12 Regeln), 500 (4), 600 (53), 700 (76); Barlow Condensed 700 (h1-h3 und 7 Regeln), 800 (9), 900 (2). Barlow Condensed 600 hatte 0 Regeln und ist geloescht. Gewichte 800 und 900 auf Barlow (kein eigener Schnitt) nimmt der Browser aus 700, wie bisher. Kein local(): die Datei aus dem Haus gewinnt immer, damit jeder Kunde dieselbe Version sieht. Dateinamen tragen die Schriftversion (.v1408), weil /static/fonts ein Jahr immutable gecacht wird (Marcel 12.09.2026 07:55): neue Schrift = neuer Name, nie derselbe Pfad. */ @font-face{font-family:'Barlow';src:url('/static/fonts/Barlow-400.v1408.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Barlow';src:url('/static/fonts/Barlow-500.v1408.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Barlow';src:url('/static/fonts/Barlow-600.v1408.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Barlow';src:url('/static/fonts/Barlow-700.v1408.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Barlow Condensed';src:url('/static/fonts/BarlowCondensed-700.v1408.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Barlow Condensed';src:url('/static/fonts/BarlowCondensed-800.v1408.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Barlow Condensed';src:url('/static/fonts/BarlowCondensed-900.v1408.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap} /* Go-Live-Pruefung 12.09.2026 Punkt 15 (CLS 0,23 auf Kategorie, Artikel, Suche; Ursache: Schrifttausch bei ~2 s auf gedrosseltem Netz liess Kopf und Fahrzeugzeile 4 px springen). Ersatzschriften mit angeglichenen Metriken: solange Barlow noch laedt, zeichnet der Browser Arial/Helvetica (Windows, macOS, iOS) bzw. Roboto (Android) in Barlow-Breite und -Zeilenhoehe, der Tausch verschiebt dann nichts mehr. Werte gemessen 12.09. 21:0x mit fontTools: Barlow upm 1000, Ascent 1000, Descent 200, mittlere Zeichenbreite 0,4745 em (Condensed 700: 0,3935 em); Arial 0,5093 em, Roboto 0,4997 em. size-adjust = Barlow-Breite / Ersatz-Breite, Overrides = Metrik / size-adjust. */ @font-face{font-family:'Barlow Ersatz';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:93.16%;ascent-override:107.34%;descent-override:21.47%;line-gap-override:0%} @font-face{font-family:'Barlow Ersatz Roboto';src:local('Roboto');size-adjust:94.95%;ascent-override:105.31%;descent-override:21.06%;line-gap-override:0%} @font-face{font-family:'Barlow Condensed Ersatz';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:77.27%;ascent-override:129.41%;descent-override:25.88%;line-gap-override:0%} @font-face{font-family:'Barlow Condensed Ersatz Roboto';src:local('Roboto');size-adjust:78.75%;ascent-override:126.99%;descent-override:25.40%;line-gap-override:0%} :root{ /* ===== FARBEN: 12 Grundwerte, jeder mit genau EINER Bedeutung (Schnitt 1 Nr. 6, Marcel 11.09.2026 21:09). Werte unveraendert seit A5674/A5720 - kein Ton wurde verschoben, nur benannt und gruppiert. Ausserhalb dieses Blocks steht kein Hex-Wert (Riegel: staffel_literale in abnahme-golive.sh). ============================== */ --paper:#f4f3f0; /* Papier: Seitenhintergrund */ --card:#ffffff; /* Weiss: Karten, Felder, Text auf dunklem Grund */ --asphalt:#15181e; /* Asphalt: Kopf, Fuss, dunkle Knoepfe */ --signal:#ffb400; /* Signalgelb: Kaufknoepfe, Marke, Fokusring */ --ok:#188a52; /* Gruen: Punkte, Symbole, Rahmen fuer lieferbar/Passung. Als TEXT nur --ok-ink: 188a52 hat auf Weiss 4,37:1 (axe, A10620 29.09.2026) */ --danger:#c2362b; /* Rot: nicht lieferbar, Fehler */ --signal-ink:#7a6000; /* Bernstein: Hinweis-Auszeichnung (Abzeichen, Warnwort); A10620 28.09.2026: dunkler (vorher 8a6d00), Kontrast auf Papier 4,43 -> 5,41, auf Weiss 4,92 -> 6,00, auf Hinweisband 4,41 -> 5,38 */ --ink:#1a1d23; /* Grau 1: Fliesstext */ --ink-soft:#5a6170; /* Grau 2: Nebentext */ --ink-mute:#8b93a3; /* Grau 3: gedaempfter Text auf Asphalt (Kopf, Fuss, Menue), Symbole, Platzhalter. Auf Papier/Weiss nur 3,08:1 - Text dort --ink-soft (A10620 29.09.2026) */ --line-2:#c4cad4; /* Grau 4: starker Rahmen (Hover, aktiv) */ --line:#e3e1db; /* Grau 5: Rahmen und Trennlinien */ /* --- abgeleitete Toene: feste Werte, jeder aus genau einem Grundwert ------------- */ --asphalt-2:#1e222b; /* aufgehellte Flaeche auf Asphalt (Topbar, Hover im Kopf); abgeleitet aus --asphalt */ --ink-2:#3f4552; /* Zweittext in Bildzaehlern und Symbolen; abgeleitet aus --ink (Grau 1) */ --ink-3:#a4abb8; /* Symbole, Punkte, gesperrte Felder, hellstes Grau (2,3:1 - seit A10620 29.09.2026 kein Text mehr); abgeleitet aus --ink-mute (Grau 3) */ --signal-bg:#fdf2d4; /* Hintergrund Hinweisband; abgeleitet aus --signal */ --signal-line:#f0d79a; /* Rahmen Hinweisband; abgeleitet aus --signal */ --signal-ink-2:#634f10; /* Fliesstext im Hinweisband; abgeleitet aus --signal-ink */ --ok-bg:#e7f6ee; /* Hintergrund Passungsmeldung; abgeleitet aus --ok */ --ok-line:#bfe0cc; /* Rahmen Passungsmeldung; abgeleitet aus --ok */ --ok-ink:#1a6440; /* gruener Text: lieferbar, Lieferdatum, Passung (7,1:1 auf Weiss, A10620 29.09.2026); abgeleitet aus --ok */ --danger-bg:#fdecea; /* Hintergrund Fehlermeldung; abgeleitet aus --danger */ /* ===== SCHRIFT: Staffel 11/12/13/14/16/20/26/34 (A5674, Stufe 10 gestrichen in Schnitt 1 Nr. 5). Zuordnung alter Werte: bis 12.5 -> t-12, 13/13.5 -> t-13, 14/14.5 -> t-14, 15 bis 17.5 -> t-16, 18 bis 22 -> t-20, 25/27 -> t-26, 30 bis 54 -> t-34. t-fluid-1/2 und t-hero wachsen mit dem Fenster (Ueberschriften je Seitenebene). ===== */ --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-20:20px; --t-26:26px; --t-34:34px; --t-fluid-1:clamp(21px,3vw,30px); --t-fluid-2:clamp(24px,3.4vw,38px); --t-hero:clamp(42px,5.4vw,72px); /* ===== ABSTAENDE in ZWEI Gruppen (Schnitt 1 Nr. 2, Marcel 11.09.2026 21:09 und 21:39). Gruppe 1, Staffel fuer Abschnitts- und Layoutabstaende (zwischen Bloecken, Karten, Spalten, Abschnitten; Innenabstand von Kaesten und Leisten): NUR diese sechs. Gruppe 2, Feinstufen NUR fuer Bedienelemente, Zellen und Felder (Knoepfe, Links, Eingabe- und Auswahlfelder, Beschriftungen, Tabellenzellen, Listenzeilen, Abzeichen). Jede Ausnahme steht mit Begruendung im Kommentar an der Regel. Kein px-Wert in margin/padding/gap ausserhalb dieses Blocks (A5776). ================ */ --s-8:8px; --s-16:16px; --s-24:24px; --s-32:32px; --s-48:48px; /* --- Gruppe 2, Feinstufen --- */ --f-4:4px; --f-12:12px; /* ===== RADIEN: zwei Werte (Marcel 11.09.2026 09:50). --radius-bedien tragen Knoepfe, Eingabe- und Auswahlfelder; --radius-raster alles im Raster (Tabellen, Karten, Kacheln, Bildboxen, Hinweisflaechen). Zugeordnet nach dem Subjekt des Selektors. Pillen behalten --radius-pille, echte Kreise 50 %: eine Form, kein Radius. ========= */ --radius-bedien:6px; --radius-raster:0; --radius-pille:999px; /* ===== SCHATTEN: genau zwei, nur fuer Dinge, die wirklich schweben (Schnitt 1 Nr. 2c, Audit 09.09. Abschnitt 5). Karten, Kaesten, Tabellen tragen einen 1-px-Rahmen und keinen Schatten; Hover = Rahmen in Grau 4 (--line-2), kein Anheben. Ein Ring (0 0 0 Npx) ist keine Erhebung, sondern eine Form. ================================ */ --shadow-kopf:0 2px 4px rgba(21,24,30,.08),0 24px 48px -12px rgba(21,24,30,.22); /* klebender Kopf, klebende Kaufleiste */ --shadow-menue:0 1px 2px rgba(21,24,30,.06),0 8px 24px -8px rgba(21,24,30,.14); /* offene Menues, Panels, Knoepfe ueber Bildern */ --ring:0 0 0 1px var(--signal); --ring-innen:0 0 0 2px var(--signal) inset; /* ===== BREITEN nach Rolle (Schnitt 1 Nr. 3): eng = Fliesstext und Rechtstexte, std = Shopseiten, std-xl = Shopseiten ab 1700 px Bildschirm (wie bisher), breit = Listen mit Baum links. Kein Seitenbreiten-Wert steht als Zahl ausserhalb. == */ --w-eng:880px; --w-std:1240px; --w-std-xl:1520px; --w-breit:1560px; /* ===== BEWEGUNG: ein Token fuer Hover und Zustandswechsel (Schnitt 1 Nr. 2c). ======== */ --t:120ms ease-out; /* ===== OVERLAYS (Schnitt 2): halbdurchsichtige Flaechen ueber Bildern (Galerie-Pfeile, Bildzaehler, 360-Grad-Hinweis, Silhouetten-Kasten im Fahrzeugkopf). Nur hier steht rgba(), sonst nirgends (Schnitt 3, Marcel 12.09.2026 19:52 C2: die letzten 3 rgba ausserhalb sind weg). == */ --overlay-hell:rgba(255,255,255,.9); --overlay-dunkel:rgba(21,24,30,.75); --overlay-signal:rgba(255,180,0,.12); /* Signalgelb-Hauch auf Asphalt: Kasten der Fahrzeug-Silhouette */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Barlow','Barlow Ersatz','Barlow Ersatz Roboto',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--paper);color:var(--ink);font-size:var(--t-16);line-height:1.55} /* A5673 (09.09.2026): Versalien NUR noch dort, wo sie gewollt sind. Vorher stand text-transform:uppercase global auf h1, h2 und h3. Folge: auf der Trefferliste standen die Produktnamen in Grossbuchstaben, und an zwei Stellen (.prod h3 und .pdp-info h1) hatte jemand das lokal mit text-transform:none wieder herausgenommen - ein Zeichen dafuer, dass die Regel zu weit ging. Die Schriftart bleibt fuer alle Ueberschriften, die Versalien bleiben der Auszeichnungsklasse .disp und der Navigation. Die beiden lokalen Reparaturen sind damit wirkungslos, aber harmlos - ich lasse sie stehen, statt an zwei weiteren Stellen etwas zu aendern, das niemand geprueft hat. */ h1,h2,h3{font-family:'Barlow Condensed','Barlow Condensed Ersatz','Barlow Condensed Ersatz Roboto','Barlow','Arial Narrow',system-ui,sans-serif;letter-spacing:.01em} .disp{font-family:'Barlow Condensed','Barlow Condensed Ersatz','Barlow Condensed Ersatz Roboto','Barlow','Arial Narrow',system-ui,sans-serif;letter-spacing:.01em} /* Versalien gibt es nur noch hier (Schnitt 1 Nr. 8, Marcel 11.09.2026): fuer Abschnitts- ueberschriften und Preisschilder, die Vorlagen setzen die Klasse ab Schnitt 2. Beschriftungen, Tabellenkoepfe und Markenzeilen behalten ihr eigenes uppercase. */ .versal{text-transform:uppercase;letter-spacing:.06em} /* Schnitt 3 (Marcel 12.09.2026 19:52 C2, Audit I2): Haken im Fliesstext kommt aus dem Tabler-Satz statt als Textzeichen; 1em gross, sitzt wie ein Buchstabe auf der Zeile, aendert keine Zeilenhoehe (gemessen: .such-passt 20.14 px vorher und nachher). */ .ico-text{width:1em;height:1em;vertical-align:-.125em} /* Zahlenspalten (OE-Nummern, Artikelnummern, HSN/TSN, Preise): gleich breite Ziffern, die Vorlagen setzen die Klasse ab Schnitt 2 (Schnitt 1 Nr. 8). */ .nr{font-variant-numeric:tabular-nums} /* Schnitt 1 Nr. 8 (Marcel 11.09.2026): EIN Fokusring fuer alles Bedienbare, 2 px Signalgelb mit 2 px Abstand, kein outline:none mehr in dieser Datei (11 Feldregeln bereinigt). A5673: Tastaturbedienung sichtbar machen. Gemessen 09.09.: 0 von 507 Regeln hatten :focus-visible - wer mit der Tabulatortaste durch den Shop geht, sieht nicht, wo er steht. Das ist auch fuer das Barrierefreiheitsstaerkungsgesetz relevant. :focus-visible statt :focus, damit ein Mausklick keinen Ring malt. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{ outline:2px solid var(--signal);outline-offset:2px} button{font-family:inherit;cursor:pointer} /* 11.09.2026 (Marcel 07:17): Mengenfelder haben eigene Minus/Plus-Knoepfe (Artikelseite, Warenkorb). Der Browser malte daneben noch seine eigenen Pfeile - doppelte Bedienung. Standard-Fix, gilt fuer jedes type="number" im Shop (gezaehlt 11.09.: 3 Vorlagen). */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input[type="number"]{-moz-appearance:textfield;appearance:textfield} a{color:inherit} .wrap{max-width:var(--w-std);margin:0 auto;padding:0 var(--s-24)} @media(min-width:1700px){.wrap{max-width:var(--w-std-xl)}} /* ===== Warnstreifen-Deko ===== */ .hazard{height:6px;background:repeating-linear-gradient(-45deg,var(--signal) 0 14px,var(--asphalt) 14px 28px)} /* ===== Topbar ===== */ .topbar{background:var(--asphalt-2);color:var(--ink-mute);font-size:var(--t-13)} .topbar .wrap{display:flex;justify-content:space-between;padding-top:var(--s-8);padding-bottom:var(--s-8)} .topbar span b{color:var(--card);font-weight:600} .topbar .right{display:flex;gap:var(--s-24)} .topbar a{text-decoration:none;transition:var(--t)} .topbar a:hover{color:var(--card)} @media(max-width:760px){.topbar .right{display:none}} /* 30.09.2026: Telefon-Regeln (.topbar .tel, .hdr-tel) entfernt, Marcel veroeffentlicht keine Telefonnummer. */ /* ===== Header ===== */ /* A5674: der Kopf trug einen eigenen, viel harten Schatten (0 4px 20px schwarz .35), waehrend jede Karte darunter einen Schatten nahm (seit Schnitt 1 Nr. 2c nur Rahmen). Jetzt beide aus derselben Quelle: der Kopf bekommt den grossen Schatten, weil er ueber allem klebt. Der dunkle Kopf selbst bleibt unberuehrt - so steht es in der Aufgabe. */ header.site{background:var(--asphalt);color:var(--card);position:sticky;top:0;z-index:50;box-shadow:var(--shadow-kopf)} .header-in{display:flex;align-items:center;gap:var(--s-24);padding:var(--s-16) var(--s-24)} .logo{display:flex;align-items:baseline;gap:var(--s-8);text-decoration:none;flex-shrink:0} /* A10686 (29.09.2026): das Logo nimmt bis zum Laden der Schrift die angepasste Ersatzschrift (gleiche Breite). Vorher stand es in der breiten Ersatzschrift (188 statt 125 px bei 412 px Fensterbreite), mit dem vierten Knopf (Merkzettel) brach die Knopfreihe um, der Kopf war 175 statt 129 px hoch und die ganze Seite sprang nach dem Laden der Schrift um 46 px (Sprungwert 0,094 auf jeder Seite, vorher 0,003). */ .logo .mark{font-family:'Barlow Condensed','Barlow Condensed Ersatz','Barlow Condensed Ersatz Roboto','Arial Narrow',system-ui,sans-serif;font-weight:900;font-size:var(--t-34);letter-spacing:.04em;color:var(--card)} .logo .mark em{font-style:normal;color:var(--signal)} .logo .sub{font-size:var(--t-12);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute)} /* 23.08.2026 (Marcel 21:02: "das suchfeld soll mehr nach rechts gezogen werden mit einer lupe als button den gelben box"): margin-left:auto schiebt das Feld vom Logo weg nach rechts, margin-right haelt Abstand zu Garage/Warenkorb. Breiter darf es auch werden (560 -> 660). Die Mobilregel weiter unten setzt beides zurueck. */ /* A5674 (09.09.2026, arbeiter13): die Ecken sitzen jetzt am RAHMEN, nicht an den zwei Kindern. Vorher trug das Feld "6px 0 0 6px" und der Knopf "0 6px 6px 0" - zwei eigene Radien fuer EIN Bauteil, und beide waren von der Staffel abgeschnitten. Der Rahmen rundet und schneidet ab (overflow:hidden), die Kinder brauchen gar keinen Radius mehr. Das sieht identisch aus und nimmt zwei Werte aus der Zaehlung. */ /* A10620 Punkt 12 (28.09.2026): overflow:hidden am Formular hat die Vorschlagsbox (position:absolute unter dem Feld) komplett abgeschnitten - gemessen 28.09. 22:4x am Live-Shop mit Playwright: 3 Vorschlaege im DOM, Box 240 x 106 px unter dem Feld, elementFromPoint in der Box trifft den Kopf, Screenshot ohne Box. Die Rundung tragen jetzt Feld (links) und Knopf (rechts) mit demselben Token; das Formular ist nur noch der Bezug fuer die Box. */ .search{flex:1;display:flex;max-width:660px;margin-left:auto;margin-right:var(--s-16);position:relative} .search input{flex:1;border:none;background:var(--card);padding:var(--f-12) var(--s-16);font:inherit;font-size:var(--t-16);min-width:0;border-top-left-radius:var(--radius-bedien);border-bottom-left-radius:var(--radius-bedien);border-top-right-radius:0;border-bottom-right-radius:0} .search button{background:var(--signal);border:none;padding:0 var(--s-24);font-size:var(--t-13);display:flex;align-items:center;color:var(--asphalt);transition:background var(--t);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--radius-bedien);border-bottom-right-radius:var(--radius-bedien)} .search button:hover{filter:brightness(1.08)} /* Die Lupe war unsichtbar: das SVG im Knopf traegt nur ein viewBox, keine Groesse — in einem Flex-Container faellt es damit auf 0 x 0 zusammen, der gelbe Knopf sah leer aus (Marcels Screenshot 21:02). Feste Groesse macht sie sichtbar. */ .search button svg{width:21px;height:21px;display:block;flex-shrink:0} /* A10620 Punkt 12: Vorschlagsbox der Kopfsuche (shop.js haengt sie ans Formular). Lage wie vorher: 2 px unter dem Feld, linksbuendig. Farben, Radius und Schatten aus dem Token-System, Hervorhebung (Tastatur, Hover) im Hinweisband-Ton. */ .suchvorschlaege{position:absolute;left:0;top:calc(100% + 2px);z-index:60;min-width:240px;max-height:320px;overflow:auto;padding:var(--f-4) 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-bedien);box-shadow:var(--shadow-menue)} .suchvorschlaege button{display:block;width:100%;text-align:left;border:0;background:var(--card);padding:var(--s-8) var(--f-12);font:inherit;font-size:var(--t-16);color:var(--ink);cursor:pointer} .suchvorschlaege button:hover,.suchvorschlaege button.akt{background:var(--signal-bg)} .hdr-actions{display:flex;gap:var(--s-8);margin-left:auto} .hdr-btn{display:flex;flex-direction:column;align-items:center;gap:var(--f-4);background:none;border:none;color:var(--ink-mute);font-size:var(--t-12);padding:var(--f-4) var(--f-12);border-radius:var(--radius-bedien);transition:var(--t);position:relative;text-transform:uppercase;letter-spacing:.05em;text-decoration:none} .hdr-btn:hover{background:var(--asphalt-2);color:var(--card)} .hdr-btn svg{width:23px;height:23px} .cart-n:empty{display:none} .cart-n{position:absolute;top:0;right:4px;background:var(--signal);color:var(--asphalt);font-weight:700;font-size:var(--t-12);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center} @media(max-width:900px){ /* Header wie autoteiledirekt: ☰ links · Logo MITTE · Korb rechts */ .header-in{flex-wrap:wrap;gap:var(--f-12);padding:var(--s-8) var(--s-16)} .logo .sub{display:none} .burger{display:flex;order:0} .logo{order:1;flex:1;justify-content:center} .hdr-actions{order:2} /* A5674: statt die Schriftgroesse auf null zu setzen wird das Wort selbst versteckt. Die Null war eine achte Stufe in der Staffel und stand fuer "gar keine Schrift" - eine Groesse, die nichts groesst. Jetzt tragen die zwei Woerter im Kopf eine eigene Huelle (.hdr-lab in base.html) und die wird hier ausgeblendet. Gleiches Bild, ein Wert weniger. WICHTIG: display:none nimmt das Wort auch dem Vorlese- programm weg, deshalb tragen beide Knoepfe im Kopf ein aria-label - der Garage- Knopf hatte schon eines, dem Warenkorb-Verweis habe ich in base.html eines gegeben. Ohne das waere aus einer Design-Aufgabe ein Barrierefehler geworden. */ /* Go-Live-Pruefung 12.09. Punkt 20: Fingerflaeche 44x44 (vorher 34x34). Polster 9 px plus Gegenrand -5 px: die Trefferflaeche waechst, der Platz im Kopf bleibt 34 px, keine Hoehenaenderung. */ .hdr-btn{padding:9px;margin:-5px;min-width:44px;min-height:44px;justify-content:center} .hdr-btn .hdr-lab{display:none} .hdr-btn svg{width:26px;height:26px} .cart-n{font-size:var(--t-12)} .search{order:3;flex-basis:100%;max-width:none;margin-left:0;margin-right:0} /* A10686 (29.09.2026): mit dem vierten Knopf (Merkzettel) brauchte die erste Kopfzeile 358 px. Bei 390 px Fensterbreite sind genau 358 px Platz, bei 360 px nur 328: die Knopfreihe brach um, der Kopf war 175 statt 129 px hoch. Gemessen mit kopf_breiten.py. Jetzt: engere Spalten (Zeilenabstand bleibt), unter 381 px ein kleineres Logo, unter 341 px war der Anruf-Knopf weg; seit 30.09. gibt es keinen Anruf-Knopf mehr. */ .header-in{column-gap:var(--s-8)} .hdr-actions{gap:var(--f-4)} } @media(max-width:380px){.logo .mark{font-size:var(--t-26)}} /* Kategorienav */ /* Mobile-first: auf kleinen Screens den (hohen) Header NICHT festkleben — er würde sonst ~⅓ der Höhe fressen. Header scrollt weg, nur die Filterleiste bleibt oben. */ @media(max-width:900px){header.site{position:static}} /* Burger + Mobile-Menü (nur ≤900px sichtbar) */ .search.kba{max-width:280px;flex:0 1 auto} /* A5976: Bedienteil, darum die Bedienstaffel. Der Knopf ist heute durch- sichtig, der Radius wird erst bei einem Hintergrund oder Fokusring sichtbar - er steht trotzdem hier, damit die Staffel keine Luecke hat. */ .burger{display:none;flex-direction:column;justify-content:center;gap:var(--f-4);width:44px;height:44px;padding:0;background:none;border:none;border-radius:var(--radius-bedien);cursor:pointer;flex-shrink:0;font-size:var(--t-13)} .burger span{display:block;width:24px;height:2.5px;background:var(--card);border-radius:var(--radius-raster);transition:var(--t)} .burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger.on span:nth-child(2){opacity:0} .burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .mmenu{display:none;background:var(--asphalt-2);border-top:1px solid var(--asphalt-2);max-height:75vh;overflow-y:auto} .mmenu.open{display:block} .mmenu a{display:block;color:var(--ink-mute);text-decoration:none;padding:var(--f-12) var(--s-24);border-bottom:1px solid var(--asphalt-2);font-size:var(--t-16)} .mmenu a:hover{background:var(--asphalt-2);color:var(--card)} .mm-h{color:var(--ink-mute);font-size:var(--t-12);text-transform:uppercase;letter-spacing:.12em;padding:var(--f-12) var(--s-24) var(--f-4)} @media(min-width:901px){.mmenu{display:none !important}} @media(max-width:900px){.burger{display:flex}} /* A10620 Punkt 6 (28.09.2026): .kicker steht auf Papier (DHL-Zeile index.html, fw-head auf /fahrzeugwahl und /td) - Signalgelb auf Papier war 1,61:1 (Design-Katalog N1). Text jetzt Bernstein (5,41:1), der Strich davor bleibt Signalgelb (kein Text). */ .kicker{display:inline-flex;align-items:center;gap:var(--s-8);color:var(--signal-ink);font-weight:600;font-size:var(--t-13);letter-spacing:.02em;margin-bottom:var(--s-16)} .kicker::before{content:"";width:26px;height:2px;background:var(--signal)} /* Fahrzeugsuche-Panel */ .vrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--f-12);margin-bottom:var(--f-12)} /* A5674 (09.09.2026, arbeiter13): ZWEI KNOEPFE, NICHT VIER. Der Shop hatte zwei Hauptknoepfe mit vertauschten Farben: .btn-y und .addcart sind GELB mit dunkler Schrift (Warenkorb, Kasse, "in den Warenkorb", Kaufen aus der Trefferliste - der ganze Geldweg), .vgo ist DUNKEL. Wer von der Artikelseite in den Warenkorb und weiter zur Fahrzeugwahl geht, sah den wichtigsten Knopf zweimal umklappen. ENTSCHEIDUNG: gelb ist der Hauptknopf, dunkel der Nebenknopf. Gelb gewinnt, weil es den Geldweg besitzt (7 Verwendungen von .btn-y/.addcart in cart, checkout, product, search, withdrawal) und weil --signal die Hausfarbe ist. .vgo bleibt also der dunkle Nebenknopf. Die Schriftfarbe von .vgo stand hier auf weiss, in den fuenf Vorlagen, in denen .vgo ueberhaupt vorkommt (_fzwahl, baugruppe, fahrzeugwahl, tdkategorie, tdwahl), aber auf gelb - diese Zeile war also toter Code, der etwas anderes behauptete als der Kunde sieht. Jetzt steht hier, was wirklich gerendert wird. NICHT ERLEDIGT und bewusst nicht heute: dieselben fuenf Vorlagen setzen .vgo auch noch auf 9px Radius und 15.5px Schrift und ueberschreiben damit die Staffel auf ihren Seiten. Das sind fuenf Vorlagen, in denen heute Abend andere Fenster arbeiten - der Umbau gehoert in eine eigene Runde, sonst raeume ich in fremden Baustellen auf. */ .vgo{width:100%;background:var(--asphalt);color:var(--signal);border:none;padding:var(--s-16);font-size:var(--t-16);font-weight:700;border-radius:var(--radius-bedien);display:flex;justify-content:center;align-items:center;gap:var(--s-8);transition:var(--t);text-transform:uppercase;letter-spacing:.06em;font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif} .vgo:hover{background:var(--asphalt-2)} .vgo svg{width:18px;height:18px;color:var(--signal)} .vmsg{display:none;margin-top:var(--f-12);font-size:var(--t-13);color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-bg);border-radius:var(--radius-raster);padding:var(--s-8) var(--s-8)} @media(max-width:980px){} /* ===== Trust ===== */ /* ===== Sections ===== */ /* Hauptkategorien */ .maincats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16)} .maincat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-raster);padding:var(--s-24) var(--s-24);transition:var(--t);position:relative;overflow:hidden} .maincat::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--signal);transform:scaleX(0);transition:var(--t);transform-origin:left} .maincat:hover{border-color:var(--line-2)} .maincat:hover::before{transform:scaleX(1)} .maincat .mc-head{display:flex;align-items:center;gap:var(--f-12);margin-bottom:var(--s-16)} .maincat h3{font-size:var(--t-20);font-weight:800;letter-spacing:.02em} .maincat ul{list-style:none} .maincat li{border-bottom:1px dashed var(--line)} .maincat li:last-child{border-bottom:none} .maincat li a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:var(--t-14);padding:var(--s-8) var(--f-4);color:var(--ink);transition:var(--t)} .maincat li a:hover{color:var(--ink);padding-left:var(--s-8)} .maincat li a::after{content:"→";color:var(--signal);font-weight:700;opacity:0;transition:var(--t)} .maincat li a:hover::after{opacity:1} .maincat .all{margin-top:var(--f-12);display:inline-block;font-size:var(--t-13);font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--signal)} @media(max-width:980px){.maincats{grid-template-columns:1fr}} /* Produktkarten */ .prod{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-raster);overflow:hidden;display:flex;flex-direction:column;transition:var(--t);cursor:pointer;text-decoration:none;color:inherit} .prod:hover{border-color:var(--line-2)} .prod .brand{font-size:var(--t-12);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} .prod h3{font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--t-16);font-weight:600;line-height:1.35;margin:var(--f-4) 0 var(--s-8);letter-spacing:0} .prod .oe{font-size:var(--t-12);color:var(--ink-soft);font-feature-settings:"tnum"} .price{font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif;font-size:var(--t-26);font-weight:800} .price small{display:block;font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--t-12);font-weight:400;color:var(--ink-soft);letter-spacing:0} .noprice{font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif;font-size:var(--t-20);font-weight:700;color:var(--ink-soft)} .stock{font-size:var(--t-12);font-weight:600;color:var(--ok-ink);display:flex;align-items:center;gap:var(--f-4)} .stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)} .stock.out{color:var(--ink-soft)} .stock.out::before{background:var(--ink-mute)} /* ===== Footer ===== */ footer.site{background:var(--asphalt);color:var(--ink-mute);margin-top:var(--s-48)} .foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-32);padding:var(--s-48) var(--s-24) var(--s-32)} .foot-in h4{font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif;color:var(--card);font-size:var(--t-16);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--f-12)} .foot-in ul{list-style:none} .foot-in li{margin-bottom:var(--s-8)} .foot-in a{text-decoration:none;font-size:var(--t-14);transition:var(--t)} .foot-in a:hover{color:var(--signal)} .foot-in p{font-size:var(--t-14);line-height:1.7;max-width:34ch;margin-top:var(--f-12)} .foot-mark{font-size:var(--t-26);font-weight:900;color:var(--card)} .foot-mark em{font-style:normal;color:var(--signal)} .paychips{display:flex;gap:var(--s-8);flex-wrap:wrap;margin-top:var(--f-12)} .paychips span{background:var(--card);color:var(--asphalt);font-size:var(--t-12);font-weight:700;padding:var(--f-4) var(--f-12);border-radius:var(--radius-raster);letter-spacing:.02em} .withdraw-btn{display:inline-block;margin-top:var(--f-12);border:1.5px solid var(--signal);color:var(--signal) !important;font-weight:700;font-size:var(--t-14);padding:var(--s-8) var(--s-16);border-radius:var(--radius-bedien);text-decoration:none;transition:var(--t)} .withdraw-btn:hover{background:var(--signal);color:var(--asphalt) !important} .legal{border-top:1px solid var(--asphalt-2);font-size:var(--t-12)} .legal .wrap{display:flex;justify-content:space-between;gap:var(--s-16);padding-top:var(--s-16);padding-bottom:var(--s-16);flex-wrap:wrap} @media(max-width:860px){.foot-in{grid-template-columns:1fr 1fr}} /* ===== Produktdetail ===== */ .crumbs{font-size:var(--t-13);color:var(--ink-soft);padding:var(--s-24) 0 0} .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)} .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-48);padding:var(--s-24) 0 0;align-items:start} .pdp-gallery{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-raster);overflow:hidden} .pdp-main{background:linear-gradient(160deg,var(--line),var(--paper));aspect-ratio:4/3;display:flex;align-items:center;justify-content:center} .pdp-main svg{width:54%;height:auto;color:var(--ink)} .pdp-info .brand{font-size:var(--t-12);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .pdp-info h1{font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--t-26);font-weight:700;line-height:1.25;margin:var(--s-8) 0 var(--s-8);letter-spacing:0} .pdp-meta{font-size:var(--t-13);color:var(--ink-soft);display:flex;gap:var(--s-16);flex-wrap:wrap} .pdp-meta b{color:var(--ink);font-weight:600} .buybox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-raster);padding:var(--s-24);margin-top:var(--s-16)} .buybox .ptag{font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif;font-size:var(--t-34);font-weight:800;line-height:1} .buybox .ptag small{display:block;font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--t-12);font-weight:400;color:var(--ink-soft);margin-top:var(--f-4);text-transform:none;letter-spacing:0} .buyrow{display:flex;gap:var(--f-12);margin-top:var(--s-16)} /* A5976: die Mengen-Staffel der Artikelseite ist ein BEDIENteil, kein Raster- kasten - sie stand auf der Rasterstaffel und damit auf 0, direkt neben dem Kaufknopf .addcart, der 6 px traegt. Wie bei .search rundet der Rahmen und schneidet ab (overflow:hidden), die Kinder brauchen keinen eigenen Radius. */ .qty{display:flex;border:1.5px solid var(--line);border-radius:var(--radius-bedien);overflow:hidden} .qty button{width:44px;min-height:44px;background:var(--paper);border:none;font-size:var(--t-16);color:var(--ink-soft)} .qty input{width:44px;border:none;text-align:center;font:inherit;font-weight:600} .addcart{flex:1;background:var(--signal);border:none;border-radius:var(--radius-bedien);font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif;font-size:var(--t-20);font-weight:800;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;gap:var(--s-8);transition:var(--t);padding:var(--f-12);color:var(--ink)} .addcart:hover{filter:brightness(1.08)} /* A10704 (30.09.2026): Kaufknopf eines nicht lieferbaren Artikels. Grau aus den vorhandenen Token, kein Zeiger. */ .addcart[disabled]{background:var(--line-2);color:var(--ink-2);cursor:not-allowed;filter:none} .addcart svg{width:20px;height:20px} .buymeta{margin-top:var(--s-16);font-size:var(--t-13);color:var(--ink-soft);display:grid;gap:var(--s-8)} .buymeta div{display:flex;gap:var(--s-8);align-items:center} .buymeta svg{width:16px;height:16px;color:var(--ok);flex-shrink:0} .buymeta div.out svg{color:var(--ink-mute)} .pdp-pay{display:flex;gap:var(--s-8);margin-top:var(--s-16);flex-wrap:wrap} .pdp-pay span{border:1px solid var(--line);background:var(--card);font-size:var(--t-12);font-weight:700;padding:var(--f-4) var(--s-8);border-radius:var(--radius-raster);color:var(--ink-soft)} @media(max-width:980px){.pdp{grid-template-columns:1fr}} /* A10620 sichtbar Nachtrag (29.09.2026): bis 980 px lag die Beschreibung ZWISCHEN Galerie und Preis, weil sie im DOM in der linken Huelle unter der Galerie steht (gemessen 390, Teststand 8934: Galerie 360, Beschreibung 641, Titel 924, Kaufbox 1070 - der Preis 710 px unter dem Bild). Die Huelle loest sich auch hier auf (display:contents, wie ab 981 px in der Artikel-Regel unten), die Reihenfolge kommt aus order: Galerie, dann Titel/Nummer/Preis/Kaufbox/Zusagen (.pdp-info), dann Beschreibung; danach folgen wie bisher OE-Nummern, Fahrzeuge, Hersteller & Sicherheit ausserhalb des Rasters. min-width 0, weil die drei jetzt Rasterkinder sind (die 760-px-Regel unten trifft nur .pdp>*). Die Beschreibung behaelt ihren oberen Rand --s-24 aus der Artikel-Regel unten (gleiche Spezifitaet, spaetere Regel gewinnt): mit der Rasterluecke 24 px stehen 48 px zwischen den Zusagen-Kacheln und der Ueberschrift "Beschreibung" (gemessen 390: Kacheln unten 1218, Beschreibung 1266), Seitenhoehe 390 dadurch +24 px (3435 -> 3459). Ab 981 px unveraendert. Keine Vorlagenaenderung, Sticky-Kaufleiste (scrollIntoView auf .buybox) unberuehrt. */ @media(max-width:980px){ body.seite-artikel .pdp>div:first-child{display:contents} body.seite-artikel .pdp-gallery,body.seite-artikel .pdp-info,body.seite-artikel .psec-under{min-width:0} body.seite-artikel .pdp-gallery{order:1} body.seite-artikel .pdp-info{order:2} body.seite-artikel .psec-under{order:3} } /* ===== Seiten-Bausteine (Suche, Warenkorb, Kasse, Widerruf, Recht) ===== */ .page-head{display:flex;align-items:baseline;gap:var(--s-16);margin:var(--s-32) 0 var(--s-24)} /* Kopf mit Unterzeile: der optische Abstand blieb 12 px (vorher 24 minus Negativrand 12), jetzt ohne Negativrand (Schnitt 1 Nr. 8). */ .page-head:has(+.page-sub),.reihe-motoren-titel:has(+.page-sub){margin-bottom:var(--f-12)} /* Feinstufe erlaubt: Kopf und Unterzeile sind EIN Element, Abstand gemessen 12 px vorher und nachher */ .page-head h1{font-size:var(--t-34);font-weight:800} .page-head .rule{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)} .page-sub{margin:0 0 var(--s-24);color:var(--ink-soft);font-size:var(--t-14)} .muted{color:var(--ink-soft)} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-raster);padding:var(--s-24)} .empty{padding:var(--s-48) var(--s-24);text-align:center;color:var(--ink-soft)} .btn-y{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);background:var(--signal);color:var(--ink);border:none;border-radius:var(--radius-bedien);font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif;font-size:var(--t-20);font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:var(--f-12) var(--s-24);text-decoration:none;transition:var(--t);cursor:pointer} .btn-y:hover{filter:brightness(1.08)} .btn-ghost{display:inline-flex;align-items:center;gap:var(--s-8);background:none;border:1.5px solid var(--line);color:var(--ink-soft);border-radius:var(--radius-bedien);padding:var(--s-8) var(--s-16);font-size:var(--t-14);font-weight:600;text-decoration:none;transition:var(--t);cursor:pointer} .btn-ghost:hover{border-color:var(--asphalt);color:var(--ink)} /* Formulare */ /* A10620 (29.09.2026, Kasse): Feldbeschriftungen ohne Versalien und Sperrung, t-14 statt t-12 - Versalien bleiben den Abschnittsueberschriften (.versal). Gilt fuer beide .fform-Formulare (Kasse, Widerruf). */ .fform label{display:block;font-size:var(--t-14);font-weight:600;color:var(--ink-soft);margin:0 0 var(--f-4) var(--f-4)} .fform input[type="text"],.fform input[type="email"],.fform textarea{width:100%;padding:var(--f-12) var(--f-12);font:inherit;font-size:var(--t-16);border:1.5px solid var(--line);border-radius:var(--radius-bedien);background:var(--card);color:var(--ink);transition:border var(--t)} .fform input:focus,.fform textarea:focus{border-color:var(--signal)} .ffield{margin-bottom:var(--f-12)} .frow{display:grid;grid-template-columns:1fr 2fr;gap:var(--f-12)} @media(max-width:640px){.frow{grid-template-columns:1fr}} /* Warenkorb */ .cart-scroll{overflow-x:auto} .cart-table{width:100%;border-collapse:collapse;font-size:var(--t-14);min-width:660px} .cart-table th{text-align:left;font-size:var(--t-12);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);padding:var(--f-12) var(--f-12);border-bottom:1px solid var(--line);background:var(--paper)} .cart-table td{padding:var(--f-12);border-bottom:1px solid var(--line);vertical-align:middle} .cart-table tbody tr:last-child td{border-bottom:none} .cart-table .num{text-align:right;white-space:nowrap;font-feature-settings:"tnum"} .cart-item-name{font-weight:600} .cart-item-name a{text-decoration:none} .cart-item-name a:hover{text-decoration:underline} .cart-mpn{font-size:var(--t-12);color:var(--ink-soft)} .qty-form{display:flex;gap:var(--s-8);align-items:center} .qty-form input{width:62px;padding:var(--s-8);border:1.5px solid var(--line);border-radius:var(--radius-bedien);text-align:center;font:inherit} .qty-form input:focus{border-color:var(--signal)} .qty-form button{background:none;border:1.5px solid var(--line);border-radius:var(--radius-bedien);padding:var(--s-8) var(--f-12);font-size:var(--t-13);font-weight:600;color:var(--ink-soft);transition:var(--t)} .qty-form button:hover{border-color:var(--asphalt);color:var(--ink)} .rm-btn{background:none;border:none;color:var(--danger);font-size:var(--t-13);font-weight:600;text-decoration:underline;padding:var(--f-4) var(--f-4)} .totals{max-width:400px;margin-left:auto;margin-top:var(--s-16)} .trow{display:flex;justify-content:space-between;gap:var(--s-16);padding:var(--s-8) 0;font-size:var(--t-14)} .trow span:last-child{font-feature-settings:"tnum";white-space:nowrap} .trow-mwst{font-size:var(--t-12);margin-top:var(--f-4)} /* "inkl. 19 % MwSt." unter der Summe, Warenkorb und Kasse (Paket 1, 10.09.) */ .trow.grand{border-top:2px solid var(--line);margin-top:var(--s-8);padding-top:var(--f-12);font-family:'Barlow Condensed','Barlow','Arial Narrow',system-ui,sans-serif;font-size:var(--t-26);font-weight:800} /* Kasse */ .co-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-24);align-items:start;margin-bottom:var(--s-16)} @media(max-width:900px){.co-grid{grid-template-columns:1fr}} .co-h{font-size:var(--t-20);font-weight:800;margin-bottom:var(--s-16)} .co-sum{list-style:none} .co-sum li{display:flex;justify-content:space-between;gap:var(--f-12);padding:var(--s-8) 0;border-bottom:1px dashed var(--line);font-size:var(--t-14)} .co-sum li span:last-child{white-space:nowrap;font-feature-settings:"tnum"} .payopt{display:flex;gap:var(--f-12);align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--radius-bedien);padding:var(--f-12) var(--s-16);margin-bottom:var(--s-8);cursor:pointer;background:var(--card);transition:var(--t)} .payopt input{margin-top:var(--f-4);accent-color:var(--asphalt)} /* A5674: der Ring um die gewaehlte Zahlungsart war als box-shadow gebaut und damit ein dritter Schatten in der Zaehlung, obwohl er kein Schatten IST - er wirft kein Licht, er markiert eine Auswahl. Als outline sieht er gleich aus, folgt der Ecke von selbst und braucht keinen eigenen Wert in der Staffel. */ .payopt:has(input:checked){border-color:var(--signal);outline:2px solid var(--signal);outline-offset:-2px} .payopt.off{opacity:.55;cursor:not-allowed} .payopt b{display:block;font-size:var(--t-16)} .payopt .pdesc{font-size:var(--t-13);color:var(--ink-soft)} .agbcheck{display:flex;gap:var(--s-8);align-items:flex-start;font-size:var(--t-14);margin:var(--s-16) 0;cursor:pointer} .agbcheck input{margin-top:var(--f-4);width:17px;height:17px;accent-color:var(--asphalt);flex-shrink:0} /* A10620 sichtbar Punkt 5 (29.09.2026): .payopt und .agbcheck sind