/* --------------------------------------------------------------------------- kabelei.css - die einzige Stilvorlage des Shops. Es gibt keinen zweiten Stilverweis, nirgends. Keine Webschrift, keine Symbolschrift, kein fremder Server. Symbole kommen als Inline-SVG. Haltung ------- Klassisch, handwerklich, wappenhaft, seriös. Die Kundschaft baut Strom in ihr Fahrzeug ein und haftet selbst dafür. Sie braucht Genauigkeit und Vertrauen, keine Begeisterung. Also: klare Kanten, kaum Rundung, keine Verläufe, keine Schatten, keine Bewegung ausser dem Farbwechsel bei Bedienelementen. Wer Aufmerksamkeit braucht, nimmt Abstand und Schriftschnitt, nicht Farbe. Woher die Farben kommen ----------------------- Aus dem Signet, ausgemessen und nicht geschätzt. Das Wappen zeigt zwei Kabel, eines schwarz, eines rot, mit Ringkabelschuhen - darunter ein Schild, links cremefarben, rechts rot, mit sichtbarer Kupferlitze. Daraus die Gestaltungssprache des Ladens: ROT IST PLUS, SCHWARZ IST MINUS. Das versteht jeder, der schon einmal eine Batterie angeklemmt hat. Rot trägt deshalb die Hauptaktion und die aktive Marke, Anthrazit trägt Kopf, Fuss und Tabellenköpfe. Die schmale zweifarbige Leiste (.polleiste) zieht diese Sprache als wiederkehrendes Zeichen durch die Seite. Kontrast, nachgerechnet nach WCAG 2.1 (Ziel AA, 4,5:1 im Fliesstext) ------------------------------------------------------------------- Weiss auf Rot #A62822 7,1:1 Creme auf Rot #A62822 5,4:1 Creme auf Anthrazit #222 12,1:1 Kupfer auf Anthrazit #222 5,3:1 Anthrazit auf Weiss 15,9:1 Anthrazit auf Creme #E8E0D0 12,1:1 Nicht erlaubt und deshalb nirgends verwendet: Rot #A62822 auf Anthrazit 2,2:1 - Rot ist auf Dunkel nie Text Kupfer auf Weiss 3,0:1 - Kupfer ist auf Hell nie Text Bilder, seit dem 13.08.2026 --------------------------- Bis dahin hatte der Laden kein einziges Bild. Das war der Hauptgrund, warum er unfertig wirkte - nicht die Farben und nicht die Schrift. Was dazugekommen ist, steht in Abschnitt 9 und gehorcht drei Regeln: 1. Jedes Bild traegt width und height im Auszeichnungscode UND aspect-ratio hier. Ohne beides springt die Seite beim Laden, das Ziel fuer CLS ist 0,05. 2. Bilder liegen als WebP in mehreren Breiten vor, erzeugt von gestaltung/werkzeuge/bilder-aufbereiten.php. Nie eine Rohdatei einbinden. 3. Steht Text AUF einem Bild, wird der Kontrast vorher nachgerechnet, mit gestaltung/werkzeuge/bildkontrast-messen.php. Nicht das Maximum zaehlt, sondern der Flaechenanteil unter 4,5:1. Nichts ueberdeckt etwas. Kein position: fixed, kein klebender Kopf, keine Einblendfenster - BAUVERTRAG Abschnitt 6, gilt ohne Ausnahme. Aufbau 1 Variablen 2 Grundlagen und Schrift 3 Aufbau, Flächen, Seitenleiste 4 Kopf 5 Fuss 6 Tabellen 7 Formulare und Bedienelemente 8 Meldungen und Kleinteile 9 Bilder, Bahnen und Kacheln 10 Startseite und Fehlerseiten 11 Konfigurator 12 Breite Ansichten 13 Sehhilfe --------------------------------------------------------------------------- */ /* == 1 Variablen ========================================================= */ :root { /* -- Marke. Die vier Werte stammen aus dem Signet und werden nicht variiert. Wer hier etwas ändert, ändert das Verhältnis zum Logo. -- */ --marke-schwarz: #222222; /* Hauptfarbe, das schwarze Kabel */ --marke-rot: #A62822; /* Zweitfarbe, gedecktes Ziegelrot */ --marke-creme: #E8E0D0; /* Fläche im Wappenschild */ --marke-kupfer: #B88C71; /* die Litze, nur Akzent */ /* -- Rollen. Vorlagen benutzen ausschliesslich diese Namen, nie die Markenwerte direkt. So bleibt ein späterer Wechsel eine Zeile. -- */ --farbe-text: var(--marke-schwarz); --farbe-text-leise: #5E5852; /* warmes Grau, 7,0:1 auf Weiss */ --farbe-grund: #ffffff; --farbe-flaeche: #F7F4EE; /* Creme, stark aufgehellt */ --farbe-flaeche-tief: #EFE9DC; --farbe-linie: #DED7C8; --farbe-linie-stark: #A89C86; --farbe-akzent: var(--marke-rot); --farbe-akzent-tief: #7E1E19; /* dieselbe Farbe dunkler, für Zeigerkontakt */ --farbe-akzent-blass: #F7EAE8; --farbe-gut: #2A6141; /* 7,3:1 */ --farbe-warnung: #8A5100; /* 6,4:1 */ --farbe-fehler: #8C1D18; /* 9,1:1, dunkler als das Markenrot */ --farbe-umriss: var(--marke-schwarz); /* Die beiden Symbolfarben am Konfigurator. Tanja am 13.08.2026: "Teilen lila bei Mouseover, Merken gelb bei Mouseover." Sie stehen hier und nicht am Bauteil, weil in diesem Laden keine feste Farbe im Regelsatz steht. Gelb ist auf Weiss nicht lesbar - deshalb zwei Werte: der Stern bekommt beim Zeigen die gelbe FLAECHE und behaelt den dunklen Umriss, und der Umriss ist es, der den Kontrast traegt. */ --farbe-teilen: #5B2D8E; /* Lila, 8,7:1 auf Weiss */ --farbe-merken: #8A5100; /* dunkles Gold, 6,4:1 - der Umriss */ --farbe-merken-flaeche: #F5C518; /* das Gelb, nur Flaeche innerhalb des Umrisses */ /* Dunkle Zonen: Kopf und Fuss. Text darauf immer Creme, niemals Rot. */ --farbe-dunkel: var(--marke-schwarz); --farbe-dunkel-hoch: #332F2C; --farbe-auf-dunkel: var(--marke-creme); --farbe-auf-dunkel-leise: var(--marke-kupfer); /* Abstaende. Vielfache von 4, damit nichts krumm sitzt. */ --abstand-1: 0.25rem; /* 4px */ --abstand-2: 0.5rem; /* 8px */ --abstand-3: 1rem; /* 16px */ --abstand-4: 1.5rem; /* 24px */ --abstand-5: 2.5rem; /* 40px */ --abstand-6: 4rem; /* 64px */ /* Schrift. Systemschriften, nichts wird geladen. Überschriften und Wortmarke laufen in einer Serifenschrift - das ist der billigste Weg zu klassischem Charakter, er kostet kein einziges Byte. Georgia steht hinten, weil es Mediävalziffern setzt (die 3 hängt unter die Grundlinie). In einer Überschrift wie "Batteriekabel 25 mm²" sieht das nach Fehler aus, deshalb kommen zuerst Schriften mit Versalziffern. */ --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-titel: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; --schrift-fest: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Die Ueberschriften sind am 13.08.2026 eine Stufe groesser geworden. Vorher war h1 auf dem Handy 30 px und am Schirm 36 px - das ist die Groesse, in der andere Laeden ihre ZWISCHENueberschriften setzen. */ --schrift-winzig: 0.75rem; /* 12px, nur Fussnoten */ --schrift-klein: 0.875rem; /* 14px */ --schrift-grund: 1rem; /* 16px, nie kleiner im Fliesstext */ --schrift-gross: 1.125rem; /* 18px */ --schrift-h3: 1.25rem; --schrift-h2: 1.625rem; --schrift-h1: 2rem; --zeilenhoehe: 1.6; --zeilenhoehe-eng: 1.25; /* Masse */ --breite-inhalt: 72rem; --breite-text: 38rem; /* Lesebreite, rund 75 Zeichen */ --breite-leiste: 16rem; /* klebende Seitenleiste */ --bedienhoehe: 2.75rem; /* 44px, Mindestgroesse fuer Finger */ --radius: 2px; /* gerade so viel, dass Kanten nicht schneiden */ --linie: 1px solid var(--farbe-linie); --polleiste-hoehe: 4px; } /* == 2 Grundlagen und Schrift ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--farbe-grund); color: var(--farbe-text); font-family: var(--schrift); font-size: var(--schrift-grund); line-height: var(--zeilenhoehe); } h1, h2, h3, h4 { margin: 0 0 var(--abstand-3); font-family: var(--schrift-titel); line-height: var(--zeilenhoehe-eng); font-weight: 600; /* Versalziffern erzwingen, wo die Schrift beides kann. */ font-variant-numeric: lining-nums; text-wrap: balance; } h1 { font-size: var(--schrift-h1); } h2 { font-size: var(--schrift-h2); margin-top: var(--abstand-5); } h3 { font-size: var(--schrift-h3); margin-top: var(--abstand-4); } h2:first-child, h3:first-child { margin-top: 0; } /* Ein kurzer roter Strich über jeder Hauptüberschrift im Inhalt. Klassisches Buchsatzmotiv, ein Zeichen statt einer Farbfläche. Nur im Inhalt, damit es in Formularen und Beiblättern nicht auftaucht. */ .inhalt h1::before, .inhalt h2::before, .fehlerseite h1::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: var(--abstand-2); background: var(--marke-rot); } p, ul, ol, dl { margin: 0 0 var(--abstand-3); } p { max-width: var(--breite-text); } a { color: var(--farbe-akzent); text-underline-offset: 0.15em; } a:hover { color: var(--farbe-akzent-tief); } /* Sichtbarer Fokus ist Pflicht. Nie wegnehmen, ohne Ersatz zu setzen. Der Ring sitzt mit Abstand ausserhalb, damit er auf dem roten Knopf nicht auf Rot liegt (Anthrazit auf Rot wären nur 2,2:1). */ :focus-visible { outline: 2px solid var(--farbe-umriss); outline-offset: 2px; } img, svg { max-width: 100%; height: auto; } code, kbd, samp { font-family: var(--schrift-fest); font-size: 0.9em; } hr { border: 0; border-top: var(--linie); margin: var(--abstand-5) 0; } /* Das wiederkehrende Markenzeichen: links Rot, rechts Schwarz - Plus und Minus. Zwei Farbflächen, kein Verlauf, kein zusätzliches Auszeichnungselement. */ .polleiste { position: relative; height: var(--polleiste-hoehe); background: var(--marke-schwarz); } .polleiste::before { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--marke-rot); } /* == 3 Aufbau, Flächen, Seitenleiste ===================================== */ .inhalt { max-width: var(--breite-inhalt); margin: 0 auto; padding: var(--abstand-4) var(--abstand-3) var(--abstand-6); } /* Fliesstext auf Lesebreite halten, ohne den Rahmen zu verengen. */ .lesetext { max-width: var(--breite-text); } .flaeche { background: var(--farbe-flaeche); border: var(--linie); border-radius: var(--radius); padding: var(--abstand-4); /* ⭐ Abstand nach unten seit dem 26.08.2026. Tanja mit Bildschirmfoto vom Warenkorb: "Abstand zwischen den Boxen hier." Die Summenbox (.flaeche) und der Kontohinweis (.hinweis) darunter klebten aneinander - beide creme, beide mit Rahmen, dazwischen nur die Haarlinie der beiden Kanten. Sie sahen aus wie EIN Kasten mit einem Strich in der Mitte. .hinweis fuehrte seinen margin-bottom von Anfang an, .flaeche nicht - und ein margin-bottom wirkt nach unten, nicht nach oben. Zwischen den beiden stand deshalb nichts. Derselbe Wert wie der Innenabstand: aussen so viel Luft wie innen. */ margin-bottom: var(--abstand-4); } .flaeche > :last-child { margin-bottom: 0; } /* Seit dem 13.09.2026 tragen die Kassenkaesten die Lesebreite INNEN (div.lesetext in der vollbreiten Flaeche), Tanja: "die Box genauso breit machen wie der Strich". Dann ist das letzte Kind der Flaeche der Textumschlag, und dessen letzter Absatz braucht dieselbe Regel - sonst bleibt unten der Absatzabstand als zweites Polster stehen. */ .flaeche .lesetext > :last-child { margin-bottom: 0; } /* Rahmen um Inhalt und Seitenleiste. Ohne Seitenleiste bleibt er wirkungslos - dann trägt .inhalt weiterhin Breite und Innenabstand selbst. Das ist Absicht: templates/betrieb benutzt .inhalt ohne diesen Rahmen und darf davon nichts merken. */ .rahmen--leiste { max-width: var(--breite-inhalt); margin: 0 auto; padding-inline: var(--abstand-3); } .rahmen--leiste > .inhalt { max-width: none; margin: 0; padding-inline: 0; } /* Die Seitenleiste steht im Quelltext HINTER dem Inhalt. Auf dem Handy liest man sie damit nach der Ware, nicht davor - so steht es im Gestaltungsauftrag. Erst ab der breiten Ansicht rückt sie per Raster daneben und klebt beim Scrollen. */ .seitenleiste { margin-bottom: var(--abstand-6); font-size: var(--schrift-klein); } .seitenleiste__block { border: var(--linie); border-top: 3px solid var(--marke-rot); background: var(--farbe-flaeche); padding: var(--abstand-3); } .seitenleiste__block + .seitenleiste__block { margin-top: var(--abstand-3); } .seitenleiste__titel { margin: 0 0 var(--abstand-2); font-family: var(--schrift-titel); font-size: var(--schrift-gross); font-weight: 600; } /* Die vier Zusagen des Betriebs. Der Punkt davor ist ein Kabelschuh im Kleinen: ein Quadrat, abwechselnd Rot und Schwarz. Farbe ist hier Schmuck, nie Träger einer Aussage - die steht vollständig im Text daneben. */ .argumente { list-style: none; margin: 0; padding: 0; } .argumente li { position: relative; padding-left: var(--abstand-4); margin-bottom: var(--abstand-2); } .argumente li:last-child { margin-bottom: 0; } .argumente li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; background: var(--marke-rot); } .argumente li:nth-child(even)::before { background: var(--marke-schwarz); } /* * ⭐ Die vier Zusagen, ab 26.08.2026 die gestaltete Fassung. Tanja: "Jeder Punkt * braucht ein Icon, einen Zweizeiler, horizontale Linie zwischen den einzelnen * Punkten." Im Fokus stehen Qualitaet, Schnelligkeit und Zuverlaessigkeit. * * .argumente bleibt daneben stehen und wird NICHT geloescht - die Entwuerfe unter * gestaltung/muster/ benutzen sie noch. Wer sie dort ablegt, kann sie hier entfernen. * * Das Symbol traegt keine Aussage. Es steht als Wiedererkennung daneben, der Satz * daneben ist vollstaendig ohne es lesbar - dieselbe Regel wie beim roten Quadrat * der alten Liste. */ .zusagen { list-style: none; margin: 0; padding: 0; } .zusage { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: var(--abstand-2); padding: var(--abstand-3) 0; } .zusage:first-child { padding-top: var(--abstand-1); } .zusage:last-child { padding-bottom: 0; } /* Die Linie steht ZWISCHEN den Punkten, nicht ueber dem ersten und nicht unter dem letzten. Deshalb der Geschwisterwaehler und keine Rahmenlinie je Element. */ .zusage + .zusage { border-top: var(--linie); } .zusage__symbol { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; margin-top: 0.15em; color: var(--marke-rot); } .zusage__titel { margin: 0; font-family: var(--schrift-titel); font-weight: 600; line-height: 1.25; } .zusage__text { margin: 0.2em 0 0; color: var(--farbe-text-leise); line-height: 1.4; } /* Sprungmarke fuer Tastatur und Vorlesesoftware. */ .sprung { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--marke-rot); color: #fff; padding: var(--abstand-2) var(--abstand-3); text-decoration: none; } .sprung:focus { left: 0; color: #fff; } /* == 4 Kopf ============================================================== Minimalistisch, so steht es im Gestaltungsauftrag: Signet mit Wortmarke, Hauptmenü, rechtsbündig Warenkorb und Kundenkonto. Sonst nichts. Die vier Vertrauensaussagen standen früher hier über die volle Breite und sind in die Seitenleiste gewandert. ========================================================================= */ /* Keine Trennlinie mehr seit dem 13.08.2026: Unter dem Kopf steht entweder der dunkle Aufmacher oder die Polleiste. Beide trennen deutlicher, als eine Haarlinie es koennte, und zwei Trenner uebereinander sind einer zu viel. */ .kopf { background: var(--farbe-grund); border-bottom: 0; } .kopf__innen { max-width: var(--breite-inhalt); margin: 0 auto; padding: var(--abstand-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); } .wortmarke { display: flex; align-items: center; gap: var(--abstand-2); color: var(--farbe-text); text-decoration: none; } /* Feste Breite und Höhe stehen zusätzlich im Auszeichnungscode. Ein Bild ohne Masse verschiebt beim Nachladen die halbe Seite, und das Ziel für CLS ist 0,05. */ /* 3 statt 2,75 rem seit dem 13.08.2026. Bei 44 px war vom Wappen nichts mehr zu erkennen - die Ranken, das Schild und die beiden Kabelschuhe sind zu fein. */ .wortmarke__signet { flex: 0 0 auto; width: 3rem; height: 3rem; } .wortmarke__text { display: flex; flex-direction: column; line-height: 1.1; } .wortmarke__name { font-family: var(--schrift-titel); font-size: var(--schrift-h2); font-weight: 600; letter-spacing: 0.02em; } .wortmarke__zusatz { font-size: var(--schrift-winzig); color: var(--farbe-text-leise); text-transform: uppercase; letter-spacing: 0.1em; } .menue { width: 100%; order: 3; } .menue__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-1); } .menue__verweis { display: flex; align-items: center; min-height: var(--bedienhoehe); padding: 0 var(--abstand-3); color: var(--farbe-text); text-decoration: none; font-weight: 600; } /* Beim Ueberfahren: cremefarbene Flaeche, die Schrift bleibt schwarz. color steht hier ausdruecklich, weil sonst a:hover aus den Grundregeln (ein Element und eine Pseudoklasse) die Klasse schluege und den Punkt dunkelrot faerbte. */ .menue__verweis:hover { background: var(--farbe-flaeche); color: var(--farbe-text); } /* ⭐ DER AKTIVE PUNKT TRAEGT ROTE SCHRIFT, seit dem 18.09.2026. Tanja: "Hauptmenü :active müssen wir anders machen. Der Unterstrich gefällt mir nicht. Machen wir Textfarbe rot. Dafür darf dann halt das :hover nicht mehr rot sein." Bis dahin stand unter dem aktiven Punkt ein roter Strich von 3 px (und an jedem anderen ein durchsichtiger gleicher Hoehe, damit nichts springt) - beides ist weg. ROT HEISST JETZT NUR NOCH EINES: "hier sind Sie". Deshalb ist ausser dem aktiven Punkt nichts im Hauptmenue rot - nicht das Ueberfahren (Flaeche, schwarze Schrift) und auch nicht der aufgeklappte Punkt in Abschnitt 4.3, der bis zu diesem Tag rot wurde und den Tanja beim Ueberfahren als "rotes Hover" gesehen hat. Der aktive Punkt bleibt auch beim Ueberfahren rot, deshalb steht :hover hier mit. */ .menue__verweis--aktiv, .menue__verweis--aktiv:hover { color: var(--farbe-akzent); } .kopf__werkzeuge { margin-left: auto; display: flex; align-items: center; gap: var(--abstand-1); } /* Seit dem 17.08.2026 steht in diesen Verweisen nur noch das Symbol - Tanja: "Hier nur die Icons, keine Texte." Die Wörter sind nicht gelöscht, sie liegen als span.nur-vorlesen darin und kommen bei Mouseover als Sprechblase. Daraus folgen drei Angaben, die vorher unnötig waren: min-width hält die Trefferfläche quadratisch bei 44 px. Ohne sie wäre der Verweis nur so breit wie das Symbol plus Polster, also ~30 px - zu schmal für einen Finger. justify-content zentriert das Symbol darin. gap wirkt nur noch beim Warenkorb, denn nur der hat ein zweites sichtbares Kind: den Zähler. Bei den anderen dreien ist es wirkungslos, weil span.nur-vorlesen mit position:absolute gar nicht im Flusslayout liegt. Eine Stufe kleiner als vorher (abstand-1 statt abstand-2), weil der Zähler seinen eigenen margin-left mitbringt und beides sich addiert. */ .kopf__verweis { display: flex; align-items: center; justify-content: center; gap: var(--abstand-1); min-height: var(--bedienhoehe); min-width: var(--bedienhoehe); padding: 0 var(--abstand-1); color: var(--farbe-text); text-decoration: none; font-size: var(--schrift-klein); } .kopf__verweis:hover { color: var(--farbe-akzent); } /* Der Warenkorbverweis ist der Anker für den Pfeil, der nach dem Zurücklegen zwei Sekunden lang auf den Zähler zeigt. position: relative gehört zu dieser Aufgabe und zu keiner anderen - ohne es sucht sich der Pfeil den nächsten positionierten Vorfahren und landet irgendwo auf der Seite. Genau dieser Fehler steckte bis zum 13.08.2026 in der Preisleiste des Konfigurators. */ .kopf__verweis--korb { position: relative; } /* Symbole sind Inline-SVG und erben ihre Farbe vom Text. Keine Symbolschrift. ⭐ UM DIE HAELFTE GROESSER seit dem 06.09.2026. Tanja: "Die Icons oben rechts ruhig um 50% größer." 1,375rem waren 22 px, jetzt sind es genau das Anderthalbfache. Seit im Kopf nur noch Symbole stehen und kein Wort mehr danebensteht (26.08.), tragen sie die Aussage allein - dann duerfen sie auch die Groesse dafuer haben. ⚠️ DIE ZEILE WIRD DAVON NICHT HOEHER. .kopf__verweis haelt min-height: var(--bedienhoehe), also 44 px, und 33 px passen darunter. Wer die Symbole weiter vergroessert, schiebt ab 44 px den ganzen Kopf auseinander. */ .kopf__symbol { flex: 0 0 auto; width: 2.0625rem; height: 2.0625rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ⭐ HOCHGESTELLT UND AM SYMBOL ANGEDOCKT, seit dem 13.09.2026. Tanja: "Die Warenkorb-Zahl (hier 4) muss hochgestellt und an das Warenkorb-Icon angedockt sein. Gerne auch rund." Bis dahin stand der Zaehler als 33-px-Kasten NEBEN dem Symbol, seit dem 06.09. so gross wie das Symbol selbst - er sah aus wie ein fuenftes Symbol und nicht wie eine Angabe zum vierten. Der aeltere Satz an dieser Stelle ("rechteckig, nicht rund, runde Blasen gehoeren zu einer anderen Sorte Laden") war meine Annahme, keine Vorgabe, und ist mit Tanjas Satz erledigt. Absolut im Verweis, der seit dem Pfeil position: relative traegt. Der Verweis ist 44 px hoch und 52 px breit, das Symbol 33 px liegt mittig, seine rechte obere Ecke bei etwa x 42 / y 6. Die Blase misst 20 px und sitzt mit right: 0 und top: 0 mit ihrer Mitte bei x 42 / y 10, also auf dieser Ecke - hochgestellt, angedockt. Sie ueberlagert dort nur den Umriss des Korbs, keine Angabe, die lesbar sein muss; das ist kein Verstoss gegen "nichts ueberdeckt etwas" (BAUVERTRAG 6), denn sie gehoert zum Symbol. Rund, wie freigegeben. Zwei Ziffern passen durch min-width plus Polster, drei kommen im Laden nicht vor. 12 px fett, weiss auf Ziegelrot 7,1:1, im Kontrastmodus 11,5:1. Kein margin-left und keine Flussbreite mehr: Der Verweis bleibt 44 px breit, das Symbol bleibt mittig, das gap in .kopf__verweis wirkt seither auf nichts mehr. Der Pfeil (.kopf__pfeil, right 0.25rem) zeigt weiter genau unter die Blase. */ .kopf__zaehler { position: absolute; top: 0; right: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--marke-rot); color: #fff; font-size: 0.75rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; } /* 🔴 OHNE DIESE ZEILE STEHT BEI LEEREM KORB EINE ROTE NULL IM KOPF. Der Zähler steht seit dem 21.08.2026 immer im Dokument und trägt bei Anzahl 0 das HTML-Attribut hidden (warum, steht in templates/teile/_kopf.html.twig). Das display der Klasse darüber ist eine Angabe des Autors, das display:none hinter hidden nur eine des Browsers - und Autorenangaben schlagen die des Browsers. Also hier noch einmal, ausdrücklich. Dasselbe gilt für das vorgelesene Wort daneben, das seine Regel aus .nur-vorlesen bezieht. */ .kopf__zaehler[hidden], .nur-vorlesen[hidden] { display: none; } /* ⭐ DASSELBE FUER JEDEN KNOPF, seit dem 06.09.2026. .knopf traegt display: inline-flex und schlaegt damit aus demselben Grund das [hidden] des Browsers - ein verborgener Knopf waere sichtbar, und zwar lautlos. Gebraucht vom Verweis "Zum Warenkorb" in der Preisleiste des Konfigurators, der erst auftaucht, wenn wirklich etwas im Korb liegt. Die Regel gilt bewusst fuer ALLE Knoepfe: Wer den naechsten mit hidden versieht, soll nicht dieselbe Stunde suchen. ⚠️ Sie ist der Grund, warum templates/konfigurator/anschlusskabel.html.twig seinen Rechenknopf im UMSCHLAG verbirgt und nicht am Knopf selbst. Beides geht jetzt. */ .knopf[hidden] { display: none; } /* Der Pfeil auf den Zähler, zwei Sekunden nach dem Zurücklegen. Tanjas Vorgabe vom 20.08.2026. 🔴 ER ÜBERDECKT NICHTS, und das ist keine Geschmacksfrage: BAUVERTRAG Abschnitt 6 verbietet position: fixed und alles, was etwas verdeckt. Er sitzt absolut INNERHALB von .kopf__verweis--korb und ragt gut 8 px nach unten - in den Zeilenabstand, den .kopf__innen mit gap: var(--abstand-3) ohnehin freilässt (16 px). Darunter beginnt erst das Hauptmenü. Kein z-index, kein Einblendfenster. KEINE BEWEGUNG. Der Laden kennt "keine Bewegung ausser dem Farbwechsel bei Bedienelementen" - ein hüpfender oder eingeblendeter Pfeil wäre der erste Bruch. Damit erübrigt sich auch eine Ausnahme für prefers-reduced-motion: Was steht, stört niemanden, der Bewegung abgeschaltet hat. Kein display hier, und das ist Absicht: Ohne Autorenangabe wirkt das hidden aus dem Auszeichnungscode von allein, und der Pfeil braucht keine zweite Regel, die ihn wieder wegnimmt. Ein Dreieck aus Rändern, kein Zeichen und kein Bild: Ein Textpfeil hinge an der Schriftart, ein Bild wäre eine zusätzliche Anfrage. Rot wie der Zähler, auf den er zeigt - beides ist dieselbe Meldung. pointer-events: none, damit er nicht heimlich die Trefferfläche des Verweises nach unten zieht. Anklickbar ist der Warenkorb, nicht seine Zier. */ .kopf__pfeil { position: absolute; top: 100%; right: 0.25rem; margin-top: 2px; width: 0; height: 0; border-left: 0.35rem solid transparent; border-right: 0.35rem solid transparent; border-bottom: 0.4rem solid var(--marke-rot); pointer-events: none; } /* -- 4.1 Der Kopf am Handy ---------------------------------------------- ⭐ SEIT DEM 14.09.2026 ZWEI ZEILEN. Tanja mit Bildschirmfoto vom iPhone 13 mini: "Da ist das Auge für die Behindertenansicht um eine Zeile verrutscht. Das sieht doof aus. Vorschlag: 1. Zeile Logo mittig, ggf. etwas größer. 2. Zeile Hauptmenü (Toggle / Akkordeon), Icons für Kundenkonto, Warenkorb, Auge. Gleichmäßig verteilt." Bis dahin standen Wortmarke und Werkzeuge in einer Zeile, und bei 375 px war fuer das Auge kein Platz mehr - es brach allein in eine zweite Zeile, das Menue in eine dritte. Jetzt, unter 48 rem: Zeile 1 die Wortmarke allein, mittig, Signet 56 statt 48 px Zeile 2 Menueknopf, [Stern], Konto, Warenkorb, Auge - gleichmaessig verteilt Zeile 3 das Hauptmenue, nur wenn der Menueknopf es aufgeklappt hat (order 3, width 100 % hat es ohnehin) - eine Liste untereinander, im Fluss, die Seite waechst nach unten. Kein Einblendfenster, nichts ueberdeckt etwas. display: contents an .kopf__werkzeuge macht seine Kinder zu Kindern des Kopfrasters, nur so verteilt space-evenly alle fuenf Symbole gleichmaessig - drei in einem Kasten und zwei daneben liessen sich nicht gemeinsam verteilen. Ein div ohne Rolle verliert dabei nichts. Den Knopf gibt es nur mit JavaScript (html.js): Ohne JavaScript bleibt das Menue offen, wie bisher, und ein Knopf, der nichts tut, faellt weg - dieselbe Regel wie bei der Sehhilfe. Auf- und Zuklappen: public/js/rahmen.js ueber hidden am