/* ========================================================================== Startseite 2 — eigenes Stilblatt ========================================================================== Geladen ausschliesslich auf der Seite mit dem Slug `startseite-neu`, über `HS_Startseite_Neu::stil()`. Auf jeder anderen Seite ist diese Datei nicht im Dokument. Vorbild für den Hero ist oddritualgolf.com, vom Kunden benannt und am 2026-08-17 vermessen. Übernommen ist die Anordnung, nicht die Gestaltung: Bild über die volle Fläche, Logo oben links, knappes Menü unten links. ========================================================================== */ /* -------------------------------------------------------------------------- Die Schrift — zurück zum ursprünglichen CD Der Kunde: «Die Schriftarten wählen wir wieder anhand des ursprünglichen Corporate Designs.» Das ist Archivo für Titel und Inter für Text (80_CD-UMSETZUNG.md, Typometrie-Tabelle) — NICHT Quicksand. Quicksand kam am selben Tag als Beschluss für die bisherige Startseite dazu und setzt in `hs-fonts.php` die globalen Werte; hier werden sie für diese eine Seite zurückgestellt. Beide Schriften sind ohnehin geladen — `hs-fonts.php` meldet alle drei an und der Browser holt je Zeichenbereich nur, was gebraucht wird. Es entsteht also kein zusätzlicher Ladevorgang, nur eine andere Wahl. -------------------------------------------------------------------------- */ body.hs-neu2 { --hs-font-titel: "Archivo", "Helvetica Neue", Arial, sans-serif; --hs-font-text: "Inter", system-ui, "Segoe UI", Arial, sans-serif; /* * ⚠ DER SEITENRAND GEHÖRT HIERHER, NICHT IN DEN HERO. * * Bis zum 2026-08-19 stand diese Zeile in `.hs-n2-hero`. Zwei andere * Abschnitte benutzen sie aber auch — `.hs-n2-weg` (Zeitleiste) und * `.hs-n2-kaufen__kopf` (Kachelkopf). Ausserhalb des Heros war die * Variable dort UNDEFINIERT, das `padding-inline` damit ungültig und * der Rand null: auf schmalen Fenstern klebte die Zeitleiste am * Bildschirmrand. * * Kein Fehler, den man sieht, wenn man nur den Hero prüft. Deshalb * steht die Deklaration jetzt am Rumpf, wo alle Abschnitte sie finden. */ --hs-n2-rand: clamp(24px, 4.2vw, 72px); } /* ========================================================================== Die Kopfleiste des Shops — einzeilig, und erst ab dem zweiten Abschnitt ========================================================================== Kundenvorgabe vom 2026-08-18: «Wenn ich auf den zweiten Bereich wechsle, muss sich das Menu ändern. […] Das bedeutet, das Logo wird kleiner (bleibt aber weiss). Die Menupunkte müssten alle nebeneinander platz finden inklusive Konto, suche und Warenkorb. […] Der Hoover Effekt, die Schriftart und alles andere muss übernommen werden.» Damit ist der Punkt erledigt, der hier bis eben als offen vermerkt war: der Shop war von dieser Seite aus nicht erreichbar, weil die Leiste ganz ausgeblendet wurde. Sie ist jetzt nicht mehr ausgeblendet, sondern verlegt. Über dem Hero steht sie weg — dort trägt das Bild das Logo —, ab dem Abschnitt «Erleben» fährt sie ein. ES IST DIESELBE LEISTE, keine zweite. Sie kommt unverändert aus `header.php` und trägt dieselben Bauteile unter denselben Namen: `.hs-kopf__logo`, `.hs-kopfknopf`, `.hs-hauptnav`, `#hs-suchbereich`, `#hs-mobilmenue`. Suche, Schiebemenü und Warenkorbzähler laufen deshalb hier ohne eine einzige Zeile eigenes Skript — sie hängen an `hs.js` wie auf jeder anderen Seite. Was in diesem Abschnitt steht, ist ausschliesslich Anordnung und Farbe. Zwei Dinge kommen aus `header.php` und nicht von hier, weil CSS sie nicht entscheiden kann: die weisse Logofassung (eine Bilddatei, kein Farbwert) und nichts sonst. ========================================================================== */ /* Die Servicezeile bleibt weg. Öffnungszeiten und Telefonnummer stehen im Fuss; in einer Leiste, die über dem Bild schwebt, wären sie eine dritte Zeile Kleingedrucktes. */ body.hs-neu2 .hs-servicezeile { display: none; } /* -------------------------------------------------------------------------- Die Masse — nachgerechnet, nicht geschätzt Elf Sortimentspunkte plus Logo, Suche, Konto und Warenkorb auf EINER Zeile ist eine enge Sache. Vor dem Bau habe ich die Wortbreiten aus der ausgelieferten Archivo-Datei ausgemessen (Gewicht 600, Sperrung 0.01 em) und jede Fensterbreite von 1280 bis 2560 px durchgerechnet. Die Ergebnisse stehen als Kommentar an den Werten, die sie bestimmt haben. Die drei Zahlen, auf die es ankommt: · Die elf Wörter zusammen messen 760 px bei 12.5 px Schrift und 851 px bei 14 px. Das ist der Brocken, alles andere ist Beiwerk. · Unter 1223 px Fenster geht die Zeile nicht mehr auf — das ist Geometrie, keine Einstellung. Deshalb liegt die Faltung bei 1280 px. · Die engste Stelle im ganzen Bereich ist 1600 px mit 21 px Reserve: dort schalten sich die Wörter neben den Sinnbildern zu. -------------------------------------------------------------------------- */ body.hs-neu2 { /* Aussenrand der Leiste. Schmaler als der Hero-Rand (24–72 px) — die Leiste braucht jeden Bildpunkt für die elf Punkte. */ --hs-n2-kopf-rand: clamp(16px, 1.7vw, 32px); /* Abstand Logo → Navigation → Bedienknöpfe. */ --hs-n2-kopf-luft: clamp(16px, 1.8vw, 32px); /* Das Logo. Die bestehende Leiste führt 150 px, hier sind es 92–108 px: «das Logo wird kleiner». 108 px sind 28 % weniger als 150. ⚠ Das unterschreitet das Digital-Minimum des CD-Manuals (150 px, S. 11) deutlicher als die bestehende Leiste, die schon dort auf dem Minimum steht. Es ist die Folge der Kundenvorgabe, alles auf eine Zeile zu bringen — mit 150 px Logo bräuchte die Zeile 1265 px statt 1223 px und fiele auf gängigen 1280er-Schirmen aus. */ --hs-n2-kopf-logo: clamp(92px, 7.2vw, 108px); } /* -------------------------------------------------------------------------- Die Leiste `position: fixed` und nicht `sticky`: der zweite Abschnitt ist selbst klebend und 500 svh hoch. Eine klebende Leiste würde in ihm nach oben aus dem Bild laufen. -------------------------------------------------------------------------- */ body.hs-neu2 .hs-kopf { position: fixed; top: 0; left: 0; right: 0; /* Über dem klebenden Lauf, aber UNTER Schiebemenü (150) und Schleier (140) — sonst läge die Leiste über dem eigenen Menü. */ z-index: 120; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--hs-n2-kopf-luft); padding-inline: var(--hs-n2-kopf-rand); padding-block: 10px; /* Reines Schwarz, nicht durchscheinend. Der Lauf darunter wechselt tafelweise zwischen Schwarz und Weiss; eine durchscheinende Leiste wechselte mit und wäre über der weissen Tafel grau und flau. So verschwindet sie über den schwarzen Tafeln in der Fläche und steht über den weissen klar da. */ background: var(--hs-schwarz); border-bottom: 1px solid rgba(255, 255, 255, .14); color: var(--hs-weiss); } /* -------------------------------------------------------------------------- Drei Reihen werden eine `header.php` liefert drei Blöcke untereinander: die Leiste mit Logo und Bedienknöpfen, den Suchbereich, die Navigation. Verlangt ist EINE Zeile in der Folge Logo · Navigation · Bedienknöpfe. `display: contents` löst den Rahmen um Logo und Bedienknöpfe auf, ohne die beiden anzufassen: sie werden damit unmittelbare Kinder der Leiste und lassen sich einzeln mit `order` sortieren. Ohne diesen Kniff müsste die Reihenfolge im PHP geändert werden — und dann stünde sie auf der bestehenden Startseite auch anders. Der Suchbereich bekommt `flex: 1 0 100%` und rutscht damit auf eine eigene Zeile unter die Leiste. Genau dort gehört er hin; er klappt ja auf. -------------------------------------------------------------------------- */ body.hs-neu2 .hs-kopf__leiste { display: contents; } body.hs-neu2 .hs-kopf__logo { order: 1; flex: 0 0 auto; } body.hs-neu2 .hs-hauptnav { order: 2; flex: 1 1 auto; min-width: 0; } body.hs-neu2 .hs-kopf__aktionen { order: 3; flex: 0 0 auto; gap: 2px; } body.hs-neu2 .hs-suchbereich { order: 4; flex: 1 0 100%; } /* `display: contents` und `flex` setzen beide `display` — das `hidden` des Suchbereichs darf davon nicht überfahren werden, sonst stünde die Suche dauernd offen. */ body.hs-neu2 .hs-suchbereich[hidden] { display: none; } /* Das Logo, weiss. Welche Datei geladen wird, entscheidet `header.php`. */ body.hs-neu2 .hs-kopf__logo img { width: var(--hs-n2-kopf-logo); } /* -------------------------------------------------------------------------- Die elf Sortimentspunkte -------------------------------------------------------------------------- */ /* Die Navigation trägt in `header.php` einen `.hs-inhalt`-Rahmen mit 1280 px Höchstbreite. In der Leiste ist sie nur noch ein Feld zwischen zweien — die Breite bestimmt der Flex-Verteiler, nicht der Rahmen. */ body.hs-neu2 .hs-hauptnav { border-top: 0; } body.hs-neu2 .hs-hauptnav .hs-inhalt { max-width: none; margin-inline: 0; padding-inline: 0; } body.hs-neu2 .hs-hauptnav__liste { /* `center` statt `space-between`: auf breiten Schirmen bleiben die Punkte als Gruppe beieinander, statt sich über 1800 px zu verteilen. Die überschüssige Breite legt sich links und rechts der Gruppe ab. */ justify-content: center; gap: 0 clamp(8px, 1.15vw, 22px); } body.hs-neu2 .hs-hauptnav__liste a { color: var(--hs-weiss); /* 12.5 px bei 1280, 14 px ab 1600. Die untere Grenze ist gemessen: bei 12.5 px messen die elf Wörter zusammen 760 px, und mehr ist bei 1280 px Fenster nicht zu haben. */ font-size: clamp(0.78125rem, 0.46875vw + 0.40625rem, 0.875rem); letter-spacing: .01em; } /* Der Hover ist derselbe wie auf der bestehenden Startseite — eine Linie, die unter dem Wort erscheint. Nur die Farbe ist die dieser Seite: Orange, wie im Hero unten links. #FF6000 auf Schwarz misst 6.93 : 1. */ body.hs-neu2 .hs-hauptnav__liste a:hover, body.hs-neu2 .hs-hauptnav__liste a:focus-visible { color: var(--hs-orange); border-bottom-color: var(--hs-orange); } body.hs-neu2 .hs-hauptnav__liste .current-menu-item > a, body.hs-neu2 .hs-hauptnav__liste .current-menu-parent > a { border-bottom-color: var(--hs-orange); } /* Zweite Ebene: dunkel wie die Leiste, nicht weiss wie im Shop. */ body.hs-neu2 .hs-hauptnav__liste .sub-menu { background: #0A0A0A; border-color: rgba(255, 255, 255, .18); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); } body.hs-neu2 .hs-hauptnav__liste .sub-menu a { color: rgba(255, 255, 255, .82); } body.hs-neu2 .hs-hauptnav__liste .sub-menu a:hover { background: rgba(255, 255, 255, .08); color: var(--hs-orange); } /* -------------------------------------------------------------------------- Suche, Konto, Warenkorb In der bestehenden Leiste steht das Wort UNTER dem Sinnbild — dort ist Platz in der Höhe. Hier steht es DANEBEN, weil die Leiste nur eine Zeile hoch ist. -------------------------------------------------------------------------- */ body.hs-neu2 .hs-kopfknopf { flex-direction: row; gap: 6px; min-width: 0; padding-inline: 9px; color: var(--hs-weiss); font-size: 0.8125rem; } body.hs-neu2 .hs-kopfknopf:hover, body.hs-neu2 .hs-kopfknopf:focus-visible { color: var(--hs-orange); } body.hs-neu2 .hs-kopfknopf svg { width: 22px; height: 22px; flex: 0 0 auto; } /* UNTER 1600 px tragen die Knöpfe nur ihr Sinnbild. Gerechnet: mit Wörtern brauchen die drei zusammen 309 px statt 124 — bei 1536 px Fenster bliebe dann nichts mehr für die elf Punkte. Das Wort wird NICHT auf `display: none` gesetzt, sondern weggeklippt. Der Unterschied ist kein Feinschliff: `display: none` nimmt den Text auch der Sprachausgabe weg, und der Knopf «Suche» hätte dann überhaupt keinen Namen mehr — ein Knopf, der nur aus einer Lupe besteht, heisst für einen Screenreader «Schaltfläche». Geklippt bleibt er lesbar und ist unsichtbar. */ @media (max-width: 1599.98px) { body.hs-neu2 .hs-kopfknopf__wort { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Der Warenkorbzähler. Ohne Wort sitzt er auf der Ecke des Sinnbilds, mit Wort als eigene Pille dahinter — auf der Ecke läge er sonst über dem W. */ body.hs-neu2 .hs-warenkorb__zahl { top: 2px; right: 2px; min-width: 17px; padding: 0 4px; font-size: 0.625rem; line-height: 17px; } @media (min-width: 1600px) { body.hs-neu2 .hs-warenkorb__zahl { position: static; min-width: 18px; line-height: 18px; font-size: 0.6875rem; } } /* -------------------------------------------------------------------------- Der Suchbereich, dunkel -------------------------------------------------------------------------- */ body.hs-neu2 .hs-suchbereich { background: var(--hs-schwarz); border-top: 1px solid rgba(255, 255, 255, .14); } body.hs-neu2 .hs-suchbereich .hs-inhalt { max-width: none; padding-inline: 0; } /* ⚠ DER HELLE RAHMEN WAR DER FEHLER, NICHT DAS FELD. `.hs-suche` (style.css) ist hell gebaut: weisser Grund, heller Rand, dunkle Schrift. Hier wurde nur das FELD auf weisse Schrift gestellt — weiss auf weissem Rahmen, unlesbar (Kundenbefund 2026-10-06). Also den RAHMEN dunkel setzen wie den Suchbereich ringsum; dann trägt die weisse Schrift. `border-color` am Feld hatte nie gewirkt: das Feld hat `border: 0`, der Rahmen sitzt an `.hs-suche`. */ body.hs-neu2 .hs-suche { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); } body.hs-neu2 .hs-suche__feld { background: transparent; color: var(--hs-weiss); } body.hs-neu2 .hs-suche__feld::placeholder { color: rgba(255, 255, 255, .45); } body.hs-neu2 .hs-suche__knopf, body.hs-neu2 .hs-suche__zu { color: var(--hs-weiss); } body.hs-neu2 .hs-suche__knopf:hover, body.hs-neu2 .hs-suche__zu:hover { color: var(--hs-orange); } /* -------------------------------------------------------------------------- Unter 1280 px: das Schiebemenü «Es muss jedoch sichergestellt werden, dass das ganze bis runter auf die Tabletgrösse Responsiv ist und danach ein Mobiles Menu erscheint.» Hier ist die Grenze gerechnet und nicht gewählt: unter 1223 px Fenster passen die elf Punkte nicht mehr auf eine Zeile, selbst mit der kleinsten vertretbaren Schrift. 1280 px ist der nächste runde Wert darüber und lässt 52 px Reserve. Ein Tablet quer (1024–1180 px) bekommt damit das Schiebemenü — was der Vorgabe entspricht. Die bestehende Startseite faltet erst bei 1024 px. Sie darf das: dort steht die Navigation in einer EIGENEN Zeile unter dem Logo und hat die volle Breite für sich. -------------------------------------------------------------------------- */ @media (max-width: 1279.98px) { body.hs-neu2 .hs-hauptnav { display: none; } body.hs-neu2 .hs-burger { display: inline-flex; } /* Ohne Navigation in der Mitte muss etwas anderes den Platz füllen, sonst klebten Logo und Knöpfe links zusammen. */ body.hs-neu2 .hs-kopf__aktionen { margin-left: auto; } } /* Das Schiebemenü selbst — dunkel, damit es zur Seite passt und nicht als weisse Fläche über das schwarze Bild fährt. */ body.hs-neu2 .hs-mobilmenue { background: #0A0A0A; border-left-color: rgba(255, 255, 255, .18); color: var(--hs-weiss); } body.hs-neu2 .hs-mobilmenue__kopf { border-bottom-color: rgba(255, 255, 255, .18); } body.hs-neu2 .hs-mobilmenue__liste a { color: var(--hs-weiss); border-bottom-color: rgba(255, 255, 255, .12); } body.hs-neu2 .hs-mobilmenue__liste a:hover, body.hs-neu2 .hs-mobilmenue__liste a:focus-visible { color: var(--hs-orange); } body.hs-neu2 .hs-mobilmenue__liste .sub-menu a, body.hs-neu2 .hs-mobilmenue__liste .sub-menu .sub-menu a { color: rgba(255, 255, 255, .68); } body.hs-neu2 .hs-mobilmenue__fuss a { color: var(--hs-orange); } body.hs-neu2 .hs-mobilmenue .hs-kopfknopf { color: var(--hs-weiss); } /* Drill-down-Menü (siehe style.css + hs.js) in der dunklen Fassung. */ body.hs-neu2 .hs-mm-knopf { color: var(--hs-weiss); border-bottom-color: rgba(255, 255, 255, .12); } body.hs-neu2 .hs-mm-knopf:hover, body.hs-neu2 .hs-mm-knopf:focus-visible { color: var(--hs-orange); } body.hs-neu2 .hs-mm-pos--zurueck .hs-mm-knopf { color: rgba(255, 255, 255, .68); } body.hs-neu2 .hs-mm-pos--alle .hs-mm-knopf { color: var(--hs-orange); } /* -------------------------------------------------------------------------- Ein- und ausfahren AUSGANGSLAGE IST SICHTBAR, nicht versteckt. Wer ohne Skript liest, sieht die Leiste — und kommt in den Shop. Erst das Skript setzt die Klasse `hs-n2-kopf-gesteuert` an den Rumpf und übernimmt damit die Führung. Das ist dieselbe Bauweise wie beim Vorspann: der sichere Zustand ist der, der ohne Skript entsteht. Bewegt wird im Bildtakt aus `neu.js` und nicht mit einer CSS-Überblendung — stehende Vorgabe des Kunden nach dem Ruckeln des Markenbands. Deshalb steht hier auch kein `transition`. -------------------------------------------------------------------------- */ body.hs-neu2.hs-n2-kopf-gesteuert .hs-kopf { opacity: 0; transform: translateY(-100%); /* Unsichtbar reicht nicht: eine Leiste mit `opacity: 0` nimmt die Tabulatortaste trotzdem an, und der Blätternde landete in einem Menü, das er nicht sieht. */ visibility: hidden; } body.hs-neu2.hs-n2-kopf-gesteuert .hs-kopf.ist-da { visibility: visible; } /* Wer Bewegung abbestellt hat, bekommt sie geschaltet statt gefahren. Das Skript erkennt das und schreibt nur noch 0 oder 1 — hier steht nichts, was dem widerspräche. */ /* Divi und das Theme setzen am Hauptbereich eigene Polster. Der Hero muss randlos sein, sonst ist er kein Vollbild. */ body.hs-neu2 #et-main-area, body.hs-neu2 #page-container { padding: 0; margin: 0; } .hs-n2 { position: relative; isolation: isolate; font-family: var(--hs-font-text); font-size: var(--hs-text); line-height: 1.6; color: var(--hs-anthrazit); background: var(--hs-weiss); } /* ========================================================================== Der Hero ========================================================================== */ /* `100svh` und nicht `100vh` — das ist die eine Zeile, an der solche Heroes auf dem Handy scheitern. `vh` rechnet mit dem GRÖSSTEN Fenster, also ohne Browserleiste. Beim Rollen fährt die Leiste ein, das Fenster wird höher, und der Hero springt. `svh` rechnet mit dem kleinsten Zustand: der Hero steht still. Auch das Vorbild macht es so (`.hero-slider { height: 100svh }`). */ .hs-n2-hero { position: relative; min-height: 100svh; overflow: clip; background: var(--hs-schwarz); color: var(--hs-weiss); /* Der Abstand von Logo und Menü zum Rand. EIN Wert für beide, damit sie auf derselben Fluchtlinie stehen — genau das macht den Eindruck von Ruhe. Zwei getrennte Werte gehen beim ersten Nachbessern auseinander. */ } /* Ältere Browser ohne `svh` fallen auf `vh` zurück. */ @supports not (height: 100svh) { .hs-n2-hero { min-height: 100vh; } } /* -------------------------------------------------------------------------- Die Bühne: zwei Bildschichten übereinander Das Bewegungsmodul fährt langsam den Ausschnitt (Ken Burns) und blendet zwischen beiden über. Hier steht nur, was ohne Skript gelten muss: Schicht 1 sichtbar, Schicht 2 unsichtbar, beide formatfüllend. `will-change: transform, opacity` meldet dem Browser vorab, welche zwei Eigenschaften sich ändern werden. Er legt die Schichten dann auf eigene Grafikebenen, und das Verschieben kostet danach kein Neuzeichnen der Seite. Ohne diese Zeile entsteht die Ebene erst beim ersten Bild der Bewegung — und genau dort sieht man dann einen Ruckler. -------------------------------------------------------------------------- */ .hs-n2-hero__buehne { position: absolute; inset: 0; z-index: 0; /* Der Ken-Burns-Effekt vergrössert das Bild über den Rahmen hinaus. Ohne diese Zeile schöbe es sich unter Kopf- und Fusszeile. */ overflow: hidden; } .hs-n2-hero__schicht { position: absolute; inset: 0; will-change: transform, opacity; /* Die Vorgabe ist der vollständige Zustand ohne Skript: die erste Schicht steht, die zweite wartet unsichtbar. */ opacity: 0; } .hs-n2-hero__schicht[data-hs-n2-schicht="0"] { opacity: 1; } .hs-n2-hero__schicht picture, .hs-n2-hero__schicht img { display: block; width: 100%; height: 100%; object-fit: cover; /* Etwas über der Mitte verankert: bei einem hohen, schmalen Fenster wird dann unten der Waldboden beschnitten und nicht oben die Gesichter. */ object-position: 50% 30%; } /* Wer keine Bewegung will, bekommt ein ruhiges Bild — das Modul hält sich ebenfalls daran, diese Regel ist das Netz darunter. */ @media (prefers-reduced-motion: reduce) { .hs-n2-hero__schicht { transform: none !important; } } /* -------------------------------------------------------------------------- Der Schleier Weisse Schrift auf einem Foto ist ohne Abdunklung Glückssache: Der Bildausschnitt ändert sich mit jeder Fensterbreite, und was auf dem Schreibtisch trägt, liegt auf dem Handy über einer hellen Stelle. Der Schleier ist deshalb nicht Stimmung, sondern die Zusicherung des Kontrasts. Gerichtet und nicht flächig: unten links kräftig, wo Logo und Menü stehen, nach rechts oben auslaufend, wo das Motiv sichtbar bleiben soll. Zwei Verläufe übereinander — einer von unten, einer von links —, weil ein einzelner diagonaler Verlauf an den Ecken entweder zu viel oder zu wenig abdunkelt. -------------------------------------------------------------------------- */ .hs-n2-hero__schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 26%, transparent 58%), linear-gradient(to right, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .20) 34%, transparent 62%); } /* -------------------------------------------------------------------------- Logo oben links -------------------------------------------------------------------------- */ /* Der Abstand nach oben ist NICHT `--hs-n2-rand`, seit dem Kundenhinweis vom 2026-08-17: höchstens 3 % vom oberen Rand. Links bleibt der gemeinsame Wert — die Fluchtlinie mit dem Menü ist die senkrechte, und genau die trägt die Ruhe. Der obere Abstand hat damit nichts zu tun. `svh` und nicht `%`: Eine Prozentangabe bezieht sich auf die Höhe des Elternteils, und der Hero hat `min-height` — wächst er später über die Fensterhöhe hinaus, wüchse der Abstand mit. `3svh` sind unter allen Umständen 3 % der Bildschirmhöhe: 21.6 px bei 720, 24.4 px auf dem Handy, 32.4 px auf einem 1080er Schirm. */ .hs-n2-hero__logo { position: absolute; z-index: 2; top: 3svh; left: var(--hs-n2-rand); display: block; line-height: 0; } @supports not (height: 100svh) { .hs-n2-hero__logo { top: 3vh; } } /* Am 2026-08-17 auf Kundenwunsch um 35 % verkleinert: aus 150/15vw/220 wurde 98/9.75vw/143 — bei 1280 px Fensterbreite also 125 px statt 192 px. Damit liegt es jetzt UNTER dem Mass des Vorbilds (144 px) und deutlich unter der CD-Vorgabe für die Kopfleiste (220–260 px, S. 27). Das ist vertretbar, weil es hier nicht in einer Leiste steht, sondern frei über einem Bild — und es ist bewusst so entschieden, nicht übersehen. Die Untergrenze von 98 px ist die Stelle, an der die Unterzeile «SPORT AG» auf dem Handy gerade noch lesbar bleibt; darunter sollte nicht verkleinert werden. */ .hs-n2-hero__logo img { display: block; width: clamp(98px, 9.75vw, 143px); height: auto; } /* Kein Farbwechsel beim Überfahren — das Logo ist keine Schaltfläche unter anderen, sondern der Weg nach Hause. Ein leichtes Aufhellen genügt als Rückmeldung, und Orange bleibt dem Menü vorbehalten. */ .hs-n2-hero__logo img { transition: opacity .18s ease-out; } .hs-n2-hero__logo:hover img, .hs-n2-hero__logo:focus-visible img { opacity: .82; } .hs-n2-hero__logo:focus-visible { outline: 2px solid var(--hs-orange); outline-offset: 8px; } /* -------------------------------------------------------------------------- Das Menü unten links Drei Wörter untereinander, sonst nichts. Reihenfolge und Wortlaut vom Kunden: Erleben, Erfahren, Einkaufen. -------------------------------------------------------------------------- */ .hs-n2-hero__menue { position: absolute; z-index: 2; left: var(--hs-n2-rand); bottom: var(--hs-n2-rand); } .hs-n2-wege { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; /* Eng gesetzt. Der Abstand ist kleiner als die Schrift hoch ist — dadurch liest sich die Gruppe als ein Block und nicht als drei einzelne Punkte. */ gap: clamp(2px, .4vw, 8px); } .hs-n2-wege__punkt { margin: 0; /* Die Zeile ist nur so breit wie ihr Wort. Ohne das läge die Schaltfläche über die ganze Menübreite und man löste sie auch neben dem Wort aus. */ display: flex; } /* -------------------------------------------------------------------------- Die Abstufung Wie in der Vorlage: das erste Wort steht voll, die folgenden treten zurück. Das gibt der Gruppe eine Leserichtung, statt drei gleichwertige Punkte nebeneinanderzustellen. GEMESSEN, NICHT GESCHÄTZT. Am 2026-08-17 am ausgelieferten Bild nachgerechnet: Foto, darüber der Schleier, im Feld der drei Wörter (244 × 177 px). Der Grund ist dort sehr dunkel — 95. Perzentil der Leuchtdichte 0.008. Daraus: Deckkraft Kontrast an der hellsten Stelle 100 % 18.1 : 1 72 % 9.7 : 1 52 % 5.7 : 1 42 % 4.0 : 1 ← ab hier nur noch für grosse Schrift zulässig 52 px fett gilt als grosse Schrift, dort verlangt die Richtlinie 3 : 1. Die gewählte schwächste Stufe hält mit 5.7 : 1 sogar die 4.5 : 1 für Fliesstext ein. Es ist also Luft nach unten, falls die Abstufung noch deutlicher werden soll — bis etwa 42 % ohne Bedenken. ANMERKUNG, damit sie nicht untergeht: «Einkaufen» ist damit das leiseste der drei Wörter, obwohl es das kommerziell wichtigste ist. Die Vorlage macht es genauso, und der Kunde hat die Vorlage verlangt. Wenn das Wort Vorrang bekommen soll, ist die Reihenfolge der Stufen zu drehen — eine Zeile. */ .hs-n2-wege__punkt:nth-child(1) { --hs-n2-deckung: 1; } .hs-n2-wege__punkt:nth-child(2) { --hs-n2-deckung: .72; } .hs-n2-wege__punkt:nth-child(n+3) { --hs-n2-deckung: .52; } .hs-n2-wege__link { display: inline-block; /* Nicht über `opacity`, sondern über die Farbe: `opacity` legte sich auch über den Textschatten und machte ihn wirkungslos, gerade dort, wo er gebraucht wird. */ color: rgba(255, 255, 255, var(--hs-n2-deckung, 1)); text-decoration: none; font-family: var(--hs-font-titel); font-size: clamp(1.75rem, 4.4vw, 3.25rem); font-weight: 700; line-height: 1.06; /* Laufweite: von −0.01em auf +0.03em, auf Kundenhinweis vom 2026-08-17 («beim Wort Erfahren hängt das f auf dem r»). Der Befund stimmt und ist nachgemessen — Archivo auf Gewicht 700 festgelegt und «Erfahren» bei 52 px gerastert, dann die freien Bildpunktspalten zwischen f und r gezählt: −0.020em → 2 px +0.010em → 4 px −0.010em → 2 px +0.020em → 4 px (bisher) 0.000em → 3 px +0.030em → 5 px (jetzt) Ab 0 berühren sie sich nicht mehr; +0.03em ist die Erweiterung, die verlangt war, und macht die Gruppe hörbar offener. Der Grund für den alten negativen Wert war eine gedrängte Anmutung bei grossen Titeln — die trägt hier nicht, weil die Wörter untereinanderstehen und die Enge dadurch doppelt wirkt. */ letter-spacing: .03em; /* KEINE Versalien. Das Vorbild setzt seine Navigation in Versalien — dort sind es aber kurze Wörter in kleiner Schrift am oberen Rand. Hier tragen drei lange Wörter in grosser Schrift den unteren Bildrand; in Versalien würden sie zur Schlagzeile und nähmen dem Bild den Rang. */ text-transform: none; /* Grosse weisse Schrift auf einem Foto braucht eine eigene Absicherung, auch mit Schleier: ein sehr weicher Schatten, der auf hellen Stellen trägt und auf dunklen unsichtbar bleibt. */ text-shadow: 0 1px 24px rgba(0, 0, 0, .55); /* Die Farbe ist das Einzige, was sich beim Überfahren ändert. Kein Verschieben, kein Unterstrich, keine Grössenänderung — Bewegung an drei Wörtern über einem ruhigen Bild wirkt unruhig, nicht lebendig. */ transition: color .18s ease-out; } .hs-n2-wege__link:hover, .hs-n2-wege__link:focus-visible { color: var(--hs-orange); } /* Der Tastaturfokus muss sichtbar sein — CD ausdrücklich. Auf dem Foto braucht er einen eigenen Versatz, sonst verschwindet die Umrandung im Motiv. */ .hs-n2-wege__link:focus-visible { outline: 2px solid var(--hs-orange); outline-offset: 6px; } /* Auf sehr niedrigen Fenstern (Handy quer) stossen Logo und Menü zusammen. Dann rückt das Menü enger und wird kleiner, statt das Logo zu verdrängen. */ @media (max-height: 520px) { .hs-n2-hero { --hs-n2-rand: clamp(16px, 3vw, 32px); } .hs-n2-wege__link { font-size: clamp(1.25rem, 3.4vw, 2rem); } } /* -------------------------------------------------------------------------- Oben rechts: «Zum Shop» und «Warenkorb» mit Abroll-Effekt Vorbild ist die Beispielseite. Dort läuft der Effekt über JavaScript (Attribut `h-flip`), das die zweite Fassung des Wortes zur Laufzeit erzeugt. Hier steht sie im Markup — dann gibt es beim Laden keinen Moment, in dem das Wort fehlt, und der Effekt funktioniert auch ohne Skript. WARUM HIER EIN CSS-ÜBERGANG UND KEIN JAVASCRIPT — abweichend von der Projektvorgabe, und deshalb ausgeschrieben: Die Vorgabe «JavaScript statt CSS» entstand an einem Laufband, also an einer DAUERNDEN Bewegung über eine lange Strecke. Das hier ist etwas anderes: ein Wechsel zwischen zwei festen Zuständen, ausgelöst durch Überfahren, über `transform` — die eine Eigenschaft, die der Browser auf der Grafikebene erledigt, ohne das Seitenlayout anzufassen. Sie kann nicht auf die Art ruckeln, auf die das Laufband ruckelte. Der zweite Grund wiegt schwerer: `:hover` und `:focus-visible` sind dieselbe Regel. In JavaScript wären das vier Ereignisse (mouseenter, mouseleave, focus, blur), und die Tastaturbedienung fiele beim ersten vergessenen Ereignis aus. Wenn du es trotzdem in JavaScript willst, ist es ein überschaubarer Umbau — sag Bescheid. -------------------------------------------------------------------------- */ .hs-n2-oben { position: absolute; z-index: 2; top: 3svh; right: var(--hs-n2-rand); display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); } @supports not (height: 100svh) { .hs-n2-oben { top: 3vh; } } .hs-n2-oben__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; /* Dieselbe leichte Transparenz wie im Hauptmenü — eine Seite, ein Ton. */ color: rgba(255, 255, 255, .84); font-family: var(--hs-font-titel); font-size: clamp(.75rem, 1vw, .875rem); font-weight: 700; line-height: 1; letter-spacing: .1em; /* Versalien: hier passen sie. Es sind kurze Wörter in kleiner Schrift am oberen Rand — genau der Fall, für den die Vorlage sie einsetzt, und genau nicht der Fall der drei grossen Wörter unten links. */ text-transform: uppercase; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .55)); transition: color .18s ease-out; } .hs-n2-oben__link:hover, .hs-n2-oben__link:focus-visible { color: var(--hs-orange); } .hs-n2-oben__link:focus-visible { outline: 2px solid var(--hs-orange); outline-offset: 6px; } /* Die Hülle des Abroll-Effekts. `overflow: hidden` schneidet alles ausserhalb einer Zeilenhöhe weg — die zweite Fassung des Wortes wartet also unsichtbar direkt darunter. */ .hs-n2-flip { display: block; overflow: hidden; /* Genau eine Zeile hoch. Steht hier ein anderer Wert als die Zeilenhöhe der Wörter, blitzt beim Abrollen ein Streifen des zweiten Wortes vor. */ height: 1em; line-height: 1; } /* Der Stapel aus beiden Wörtern. Verschoben wird DIESER Kasten, nicht die Wörter einzeln — eine Verschiebung, nicht zwei. */ .hs-n2-flip__wort { display: block; height: 1em; line-height: 1; transition: transform .34s cubic-bezier(.32, .72, 0, 1); } /* Beide Wörter wandern um genau eine Zeilenhöhe nach oben: das erste hinaus, das zweite herein. */ .hs-n2-oben__link:hover .hs-n2-flip__wort, .hs-n2-oben__link:focus-visible .hs-n2-flip__wort { transform: translateY(-100%); } /* Wer keine Bewegung will, bekommt den Farbwechsel — aber kein Abrollen. */ @media (prefers-reduced-motion: reduce) { .hs-n2-flip__wort { transition: none; } .hs-n2-oben__link:hover .hs-n2-flip__wort, .hs-n2-oben__link:focus-visible .hs-n2-flip__wort { transform: none; } } /* Die Zahl im Warenkorb. Sie bleibt stehen, wenn das Wort abrollt — sie ist eine Angabe und kein Teil des Effekts. */ .hs-n2-oben__zahl { font-variant-numeric: tabular-nums; font-size: .9em; opacity: .8; } .hs-n2-oben__zahl--leer { /* Leerer Warenkorb: die Null steht da, aber leise. Ganz wegzulassen wäre auch vertretbar — dann springt die Zeile aber, sobald der erste Artikel hineinkommt. */ opacity: .45; } /* Auf dem Handy hat der Hero unten links schon das Menü. Zwei Wortgruppen über demselben Bild sind eine zu viel; ausserdem sind Versalien in .75rem auf einem Foto an der Grenze des Lesbaren. */ @media (max-width: 640px) { .hs-n2-oben { gap: 14px; } .hs-n2-oben__link { letter-spacing: .06em; } } /* -------------------------------------------------------------------------- Der Weiterlese-Hinweis — unten rechts Gegenstück zum Menü unten links, auf derselben Grundlinie. Er sagt nur eins: hier geht es weiter. NUR AUF DEM SCHREIBTISCH, so verlangt. Auf dem Handy ist Rollen die selbstverständlichste Geste der Welt und der Hinweis wäre Belehrung; ausserdem nähme er dort dem Menü den Platz. Die Grenze liegt bei 900 px — dieselbe, an der auch sonst im Theme von Nebeneinander auf Untereinander umgestellt wird. VOLL SICHTBAR IM RUHEZUSTAND. Das Auf- und Abblenden macht `assets/neu.js`, und es senkt die Deckkraft nur ab. Bleibt das Skript aus, steht der Winkel ruhig da. Der umgekehrte Weg — hier auf 0, im Skript hochblenden — ist der häufigere und der schlechtere: ein Fehler machte ihn dann dauerhaft unsichtbar. -------------------------------------------------------------------------- */ .hs-n2-hero__weiter { display: none; } @media (min-width: 900px) { .hs-n2-hero__weiter { position: absolute; z-index: 2; right: var(--hs-n2-rand); bottom: var(--hs-n2-rand); /* Wort oben, Winkel darunter — die Leserichtung führt zur Bewegung hin, die sie ankündigt. */ display: flex; flex-direction: column; align-items: center; gap: 12px; /* 44 px ist die kleinste Bedienfläche, die das CD zulässt (`--hs-touch-min`). In der Breite bleibt sie gesetzt; in der Höhe wächst das Element mit dem Wort — der untere Rand bleibt dabei fest, weil `bottom` verankert ist. Genau deshalb steht der Winkel weiterhin auf derselben Grundlinie wie das Menü unten links. */ min-width: var(--hs-touch-min); /* ORANGE, auf Kundenwunsch vom 2026-08-17: Wort und Winkel blinken in der Signalfarbe. Das macht den Hinweis zum einzigen dauerhaft orangen Punkt der Seite, und das ist stimmig — er ist die einzige Stelle, die von sich aus etwas verlangt. Das CD deckelt Orange auf ein Zehntel der Fläche (S. 15); ein 44 × 105 px grosses Element auf 1440 × 900 sind 0.36 Prozent, also weit darunter. Kontrast: Orange #FF6000 über dem Grund an dieser Stelle (Foto plus Schleier, unten rechts) liegt bei 6.9 : 1 — über den 4.5 : 1 für Fliesstext, also erst recht über den 3 : 1 für grosse Schrift. Auf dem hellsten Bildpunkt des Feldes sind es noch 4.7 : 1. */ color: var(--hs-orange); text-decoration: none; /* Derselbe weiche Schatten wie an den Menüwörtern: er trägt auf hellen Stellen des Fotos und bleibt auf dunklen unsichtbar. */ filter: drop-shadow(0 1px 14px rgba(0, 0, 0, .6)); /* Nur die Farbe wechselt beim Überfahren — wie im Menü. Die Deckkraft wird hier NICHT angefasst: sie gehört dem Skript, und zwei Stellen, die dieselbe Eigenschaft schreiben, gewinnen abwechselnd. */ transition: color .18s ease-out; } .hs-n2-hero__weiter:hover, .hs-n2-hero__weiter:focus-visible { color: var(--hs-orange); } .hs-n2-hero__weiter:focus-visible { outline: 2px solid var(--hs-orange); outline-offset: 4px; } .hs-n2-hero__weiter .hs-icon { display: block; } /* Das Wort im Hochformat. `writing-mode: vertical-rl` und NICHT `transform: rotate(90deg)`. Der Unterschied ist nicht Geschmack: Bei `rotate` bleibt der Kasten so breit, wie das Wort waagrecht wäre — hier also rund 46 px hoch und 6 px breit falsch herum. Das Nachbarelement rückt dann an der falschen Stelle, und man flickt es mit negativen Rändern. `writing-mode` dreht den KASTEN mit; das Element ist danach wirklich schmal und hoch, und die Ausrichtung im Flexkasten stimmt von selbst. Zweiter Grund: Bei `rotate` bleibt der Text für die Textauswahl und die Suchfunktion des Browsers waagrecht liegen und überlappt Nachbarn. Ohne `text-orientation: upright` — das stellt jeden Buchstaben einzeln aufrecht übereinander wie an einem Totempfahl. Für ein lateinisches Wort ist die gedrehte Fassung die lesbarere und die übliche. */ .hs-n2-hero__weiter-wort { writing-mode: vertical-rl; font-family: var(--hs-font-titel); font-size: clamp(.6875rem, .8vw, .8125rem); font-weight: 700; line-height: 1; text-transform: uppercase; /* Gesperrt wie die Wörter oben rechts — im Hochformat trägt die Sperrung zusätzlich, weil die Buchstaben sonst zu einer Säule verschmelzen. */ letter-spacing: .22em; /* Die Sperrung setzt auch NACH dem letzten Buchstaben einen Abstand. Im Hochformat ist das unten sichtbarer Leerraum, und das Wort stünde nicht mittig über dem Winkel. */ padding-block-end: .22em; } } /* Das Sprungziel hinter dem Hero. Ohne Höhe — es markiert nur die Stelle. `scroll-margin-block-start` sorgt dafür, dass der Sprung nicht bündig an der Kante endet, sondern ein Stück Luft darüber lässt. */ .hs-n2-weiter { height: 0; scroll-margin-block-start: var(--hs-s6); } /* * Sanftes Springen — aber NUR als Rückfallebene ohne Skript. * * ⚠ WARUM DAS MIT SKRIPT FALSCH IST, UND ZWAR SICHTBAR. * * Kundenmeldung vom 2026-08-19: «wenn ich nämlich in der Herosection bin und * dann auf Einkaufen klicke, ist der scroll extreeeem krass nervös». * * Der Grund steht in dieser Datei: Abschnitt 2 ist klebend und 500 svh hoch * (siehe Zeile 127). Ein Sanftlauf vom Hero nach `#einkaufen` fährt also durch * rund fünf Bildschirmhöhen — und in jedem Bild davon rechnen die * scrollgesteuerten Module ihren Stand neu: der waagrechte Lauf schiebt die * Tafeln durch, die Zeitleiste zieht, die Kacheln decken auf, die Kopfleiste * fährt ein. Alles zugleich, in einer halben Sekunde. Das ist nicht zu schnell * animiert, sondern zu viel Weg. * * Ein Sanftlauf ist die richtige Antwort, wenn zwischen Anfang und Ziel nichts * passiert. Hier passiert dazwischen die halbe Seite. * * Deshalb übernimmt `assets/neu.js` das Springen, sobald es läuft: abblenden, * hart springen, aufblenden. Der Weg dazwischen wird nicht schnell gezeigt, * sondern gar nicht. `body.hs-n2-sprung-gesteuert` schaltet den Sanftlauf * dann ab — sonst kämen sich zwei Rollvorgänge in die Quere. * * OHNE Skript bleibt der Sanftlauf stehen. Er ist dann zwar unruhig, aber die * Module, die ihn unruhig machen, laufen ohne Skript ohnehin nicht. */ @media (prefers-reduced-motion: no-preference) { html:has(.hs-n2) { scroll-behavior: smooth; } html:has(body.hs-n2-sprung-gesteuert) { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- Die Blende Ein schwarzes Tuch über der ganzen Seite. Es gehört keinem Abschnitt, es deckt sie alle zu — deshalb `position: fixed` und ein Stapelwert über der Kopfleiste (die liegt auf 120). ⚠ `visibility` UND `opacity`, NICHT NUR `opacity`. Ein Element mit `opacity: 0` ist unsichtbar, aber es liegt trotzdem da und fängt jeden Klick ab. Die ganze Seite wäre tot. `visibility: hidden` nimmt es aus dem Weg; `pointer-events: none` ist der Gürtel zum Hosenträger. Die Farbe ist `--hs-schwarz` und nicht der Grund des Ziels: eine Blende, die je nach Ziel die Farbe wechselt, wäre kein Übergang mehr, sondern ein zweiter Effekt. Schwarz passt zum Hero, zum waagrechten Lauf und zum Kachelgitter — und gegen den einen weissen Abschnitt liest es sich als bewusster Schnitt. Kein `transition`: die Zahl schreibt das Skript, Bild für Bild. -------------------------------------------------------------------------- */ .hs-n2-blende { /* * Kantenlänge einer Zelle. * * `clamp` statt fester Zahl: auf einem grossen Schirm wären 80 px ein * feines Netz, auf einem Telefon ein Gitter aus vier Zellen. * * ⚠ DIE UNTERGRENZE IST EINE LEISTUNGSFRAGE, KEINE GESTALTUNGSFRAGE. * Die Zahl der Zellen wächst quadratisch, wenn sie kleiner werden. * Gemessen bei 1200 px Fensterbreite: 90-px-Zellen ergeben 238 Stück, und * jede trägt einen `clip-path` plus ein ebenso beschnittenes Innenteil — * also fast 500 beschnittene Formen. Mit 56 px wären es auf einem Telefon * rund 180, auf einem Mittelklassegerät zu viel für 60 Bilder je Sekunde. * * 72 px als Untergrenze kostet auf dem Desktop nichts (dort greift * ohnehin 7.5vw) und drittelt die Last auf schmalen Schirmen. */ --hs-n2-wabe-b: clamp(72px, 7.5vw, 116px); position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; } .hs-n2-blende.ist-da { visibility: visible; } /* * ⚠ DER SICHERHEITSGRUND. Er sieht nach Doppelung aus und ist keine. * * Die Zellen decken bei `--blende: 1` rechnerisch lückenlos — sechseckige * Kacheln mit Schrittweite Breite und 0.75 × Höhe gehen restlos auf. Aber * genau in dem Bild, in dem gesprungen wird, darf nicht ein einziger * Bildpunkt der Seite durchscheinen, und Rundungen auf halbe Bildpunkte gibt * es bei jeder Zoomstufe. * * Deshalb ein schwarzer Grund, der ERST im letzten Fünftel der Welle * aufzieht: solange die Waben fliegen, ist er unsichtbar und stört das Motiv * nicht; im Moment der vollen Deckung liegt er satt darunter. */ .hs-n2-blende__grund { position: absolute; inset: 0; background: var(--hs-schwarz); opacity: clamp(0, calc( ( var(--blende, 0) - .82 ) / .18 ), 1); } /* * Ohne Waben — bei reduzierter Bewegung. * * Das Kippen und Wachsen der Zellen IST Bewegung, anders als eine reine * Deckungsänderung. Wer sie abbestellt hat, bekommt denselben Vorhang als * schlichtes Schwarz: gleicher Zweck, gleiche Dauer, keine Fahrt. */ .hs-n2-blende--schlicht .hs-n2-blende__grund { opacity: var(--blende, 0); } .hs-n2-blende__wabe { position: absolute; inset: 0; perspective: 900px; } /* * Die Zelle. Wörtlich die Rechnung der Kachelwabe (`.hs-n2-kachel__wabe`), * nur dass die Breite hier eine Länge ist und kein Prozentsatz des Elternteils * — der Vorhang hat keine Kachel, an der er sich messen könnte. * * `--v` ist die Lage auf der Diagonalen von links oben nach rechts unten, * `--welle` sagt, wie weit die Welle auseinandergezogen ist. Jede Zelle * rechnet daraus ihren eigenen Stand `--eigen` selbst; das Skript schreibt * weiterhin nur EINE Zahl für alle. * * ⚠ Die Zelle ist ORANGE, ihr Innenteil schwarz — siehe `::before`. Der * sichtbare Rand entsteht also aus der Differenz und nicht aus `border`: * ein Rahmen würde vom `clip-path` mitgeschnitten und verschwände. */ .hs-n2-blende__wabe > span { --welle: .55; --v: calc( ( var(--sp) + var(--re) + 3 ) / var(--n, 20) ); --eigen: clamp(0, calc( ( var(--blende, 0) - var(--v) * var(--welle) ) / ( 1 - var(--welle) ) ), 1); position: absolute; top: 0; left: 0; width: var(--hs-n2-wabe-b); aspect-ratio: .8660254 / 1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hs-orange); transform: translate( calc( ( var(--sp) - var(--vs) ) * 100% ), calc( var(--re) * 75% ) ) rotate3d( 1, 1, 0, calc( ( 1 - var(--eigen) ) * 90deg ) ) scale( calc( .55 + .462 * var(--eigen) ) ); opacity: var(--eigen); } /* Das schwarze Innere. `inset` und nicht `scale`: so ist der orange Rand überall gleich dick, unabhängig von der Zellgrösse. */ .hs-n2-blende__wabe > span::before { content: ""; position: absolute; inset: 2px; background: var(--hs-schwarz); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } /* Wer den orangen Rand nicht will: diese eine Regel genügt. `.hs-n2-blende--ohne-rand` am Element, und die Zelle ist durchgehend schwarz. */ .hs-n2-blende--ohne-rand .hs-n2-blende__wabe > span { background: var(--hs-schwarz); } /* -------------------------------------------------------------------------- Die Fahrtanzeige — ein Lineal am rechten Rand Kundenwunsch vom 2026-08-19: «Braucht es den Scrollbalken eigentlich? Es wäre geil wenn wir eine Linie hätten die einfach mitfährt.» Eine kurze senkrechte Skala aus Strichen, senkrecht mittig am rechten Rand, und eine waagrechte Marke, die daran entlangwandert. Sie zeigt dasselbe wie eine Bildlaufleiste — wo man ist —, nimmt aber keinen Platz weg und unterbricht die Fläche nicht. ⚠ DIE NATIVE LEISTE VERSCHWINDET NUR, WENN DIE ANZEIGE DA IST. Der Riegel hängt an `body.hs-n2-fahrt-gesteuert`, und diese Klasse setzt das Skript erst, NACHDEM es die Anzeige gebaut hat. Fällt das Skript aus, bleibt die gewöhnliche Bildlaufleiste stehen. Eine Seite ohne Leiste UND ohne Ersatz wäre der eine Zustand, den es nicht geben darf. ⚠ WAS DAMIT VERLOREN GEHT, UND ZWAR WIRKLICH. Eine Bildlaufleiste kann man greifen und ziehen. Diese Anzeige kann man das nicht (`pointer-events: none`), und das ist Absicht: Ziehen hiesse, in Sekundenbruchteilen durch den 500 svh hohen klebenden Abschnitt zu fahren — genau die Unruhe, gegen die es am selben Tag die Sprung-Blende gab. Wer die Seite bedienen will, hat Rad, Tastatur, Finger und die drei Wege im Hero. Die Anzeige sagt, wo man ist; sie ist kein Bedienelement. ⚠ WARUM GRAU UND ORANGE, UND NICHT WEISS. Die Vorlage (atmara.productions) ist durchgehend dunkel und kann weisse Striche nehmen. Diese Seite wechselt: Hero, Erleben, Einkaufen und die Neuheiten sind schwarz, Erfahren und der Newsletter weiss. Eine einfarbige Linie verschwände also auf jeder zweiten Fläche. Gerechnet, Schwelle 3 : 1 für eine Grafik: --hs-grau-45 #8C8C8C auf Schwarz 6.25 : 1 auf Weiss 3.36 : 1 --hs-orange #FF6000 auf Schwarz 6.93 : 1 auf Weiss 3.03 : 1 Beide tragen auf beiden Gründen. `--hs-grau-70` fiele auf Schwarz durch (2.48), `--hs-grau-20` auf Weiss (1.46) — deshalb keines von beiden. Und deshalb steht hier auch KEIN `opacity` auf der Schiene: es senkte die gerechneten Werte, und dann stimmten die Zahlen oben nicht mehr. Kein `transition`: die Zahl schreibt das Skript, Bild für Bild. -------------------------------------------------------------------------- */ html:has(body.hs-n2-fahrt-gesteuert) { scrollbar-width: none; } html:has(body.hs-n2-fahrt-gesteuert)::-webkit-scrollbar { width: 0; height: 0; } .hs-n2-fahrt { --hs-n2-fahrt-hoehe: clamp(140px, 22vh, 240px); position: fixed; right: clamp(12px, 1.6vw, 24px); top: 50%; z-index: 110; width: 14px; height: var(--hs-n2-fahrt-hoehe); transform: translateY(-50%); pointer-events: none; } /* Die Skala: ein Strich von 1 px alle 6 px. `to bottom` steht ausdrücklich da — ohne Richtungsangabe zeichnet der Verlauf ebenfalls nach unten, aber die Absicht soll lesbar sein und nicht von einer Vorgabe abhängen. */ .hs-n2-fahrt__schiene { position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, var(--hs-grau-45) 0, var(--hs-grau-45) 1px, transparent 1px, transparent 6px ); } /* Die Marke überragt die Skala beidseitig um 4 px — dadurch liest sie sich als Zeiger auf einem Lineal und nicht als weiterer Strich der Skala. */ .hs-n2-fahrt__marke { position: absolute; left: -4px; right: -4px; top: 0; height: 2px; background: var(--hs-orange); transform: translate3d(0, calc(var(--fahrt, 0) * (var(--hs-n2-fahrt-hoehe) - 2px)), 0); } /* Unter 700 px ist der rechte Rand zu kostbar, und ein Telefon zeigt ohnehin nie eine dauerhafte Leiste. Dort bleibt die Anzeige weg — die native Überlagerung des Betriebssystems macht die Arbeit. */ @media (max-width: 700px) { .hs-n2-fahrt { display: none; } /* * ⚠ UND DIE NATIVE LEISTE MUSS ZURÜCK. OHNE DIESE ZEILE GIBT ES BEIDES NICHT. * * Am 2026-08-19 eingebaut und am selben Tag gefunden: oben versteckt * `html:has(body.hs-n2-fahrt-gesteuert)` die Bildlaufleiste, weil die * Anzeige sie ersetzt. Verschwindet die Anzeige hier unten, bleibt das * Verstecken trotzdem stehen — und ein 690 px schmales Fenster am Rechner * hat dann weder Lineal noch Leiste. * * Auf dem Telefon fällt es nicht auf: dort zeichnet das Betriebssystem * ohnehin eine Überlagerung, die von `scrollbar-width` unberührt bleibt. * Genau deshalb war der Fehler unsichtbar — er trifft nur den Fall, den * niemand testet. */ html:has(body.hs-n2-fahrt-gesteuert) { scrollbar-width: auto; } html:has(body.hs-n2-fahrt-gesteuert)::-webkit-scrollbar { width: 12px; height: 12px; } } /* -------------------------------------------------------------------------- Der Werkzeug-Hinweis (nur für angemeldete Bearbeiter) Eigenes, nüchternes Aussehen: er soll nach Werkzeug aussehen und nicht nach Entwurf, damit ihn niemand beim Ansehen für einen Gestaltungsvorschlag hält. -------------------------------------------------------------------------- */ .hs-n2-leer { padding-block: var(--hs-s16); padding-inline: var(--hs-s6); } .hs-n2-leer__inhalt { max-width: 62ch; margin-inline: auto; border-inline-start: 3px solid var(--hs-orange); padding-inline-start: var(--hs-s6); } .hs-n2-leer__marke { margin: 0 0 var(--hs-s2); font-family: var(--hs-font-titel); font-size: var(--hs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hs-orange-tief); } .hs-n2-leer__titel { margin: 0 0 var(--hs-s4); font-family: var(--hs-font-titel); font-size: var(--hs-h3); font-weight: 700; line-height: 1.15; color: var(--hs-schwarz); } .hs-n2-leer__text { margin: 0 0 var(--hs-s4); max-width: 62ch; color: var(--hs-grau-70); } @media print { .hs-n2-leer, .hs-n2-hero__schleier { display: none; } } /* ========================================================================== Abschnitt 4 — EINKAUFEN: die Kategoriekacheln ========================================================================== Kundenvorgabe vom 2026-08-18: «schwarzer Hintergrund und dann flächenfüllend […] eine spannende Flipanimation wie im Menu dass sich die Kachel dreht beim Mouse Over. Die Rückseite könnte dann weiss sein mit schwarzer Schrift und einem kurzen Beschrieb.» Nachgebessert am 2026-08-19, nach zwei Beanstandungen desselben Tages: «müssten aber beim non hoover besser ersichtlich sein. Aktuell sind sie mit einem Overlay überlegt. Die Animation dürfte irgendwie auch spezieller sein.» Der erste Punkt hat die Vorderseite verändert (volle Bilddeckkraft, Abdunklung nur noch am Namen), der zweite den Effekt: aus dem Karten-Flip wurde DER PAPIERZUG. --------------------------------------------------------------------------- WAS DER PAPIERZUG IST --------------------------------------------------------------------------- Ein Blatt legt sich von oben über das Foto und schiebt den Abzug dabei nach unten aus dem Bild. Der Name bleibt dabei auf den Pixel genau stehen, wo er war — er wechselt nur die Farbe, in dem Augenblick, in dem die Papierkante an ihm vorbeigeht. Vor der Kante läuft ein dünner oranger Strich mit, dieselbe Farbe und dieselbe Rolle wie die Linie in der Zeitleiste im Abschnitt darüber. --------------------------------------------------------------------------- WARUM DIE BEWEGUNG JETZT WIEDER IM SKRIPT SITZT --------------------------------------------------------------------------- Der Flip lief per CSS-Übergang, begründet mit «wie im Menü gebaut». Das war vertretbar, solange der Effekt so einfach war wie eine Drehung. Der Papierzug ist es nicht: er hat ZWEI Kurven statt einer (Zug 620 ms, Lösen 380 ms — ein Blatt wird losgelassen, nicht zurückgezogen), eine Dauer, die mit der Reststrecke schrumpft, wenn man ihn unterwegs unterbricht, und eine Verweilschwelle von 80 ms, damit ein Zeiger, der quer über das Gitter fährt, nicht zwölf Kacheln auslöst. Nichts davon lässt sich in einer `transition` ausdrücken. Damit ist dieser Abschnitt zurück auf der Projektregel: Bewegung kommt aus `requestAnimationFrame`. Im ganzen Block steht ab jetzt keine einzige `transition` und keine `animation` mehr. --------------------------------------------------------------------------- ⚠ DIE RÜCKSEITE IST EINE ZUGABE, KEIN INHALT --------------------------------------------------------------------------- Es gibt sie nur, wo es eine Maus oder eine Tastatur gibt. Auf dem Handy und auf dem Tablet sieht sie niemand — ein Fingertipp folgt dem Verweis, und das ist Absicht. Deshalb steht auf der VORDERSEITE alles, was man braucht: der Name der Kategorie und der Weg dorthin. Wer den Beschrieb für notwendig hält, muss ihn auf die Vorderseite holen — nicht den Papierzug auf Berührung nachbauen. ========================================================================== */ .hs-n2-kaufen { background: var(--hs-schwarz); color: var(--hs-weiss); padding-block: clamp(72px, 12vh, 160px) 0; /* Die Kopfzeile bekommt Rand, das Gitter nicht — «flächenfüllend». */ scroll-margin-block-start: 80px; } /* --- Der Kopf ------------------------------------------------------------ */ /* Links oben. Das Gitter darunter läuft randlos, eine Inhaltskante gibt es hier also nicht — der Kopf hält sich an den Seitenrand. Nur der Lesetext bleibt bei 62 Zeichen. Schrift und Grösse des Titels: Block «Die drei Abschnittstitel». */ .hs-n2-kaufen__kopf { margin: 0 0 clamp(40px, 7vh, 80px); padding-inline: var(--hs-n2-rand); text-align: left; } .hs-n2-kaufen__auge { margin: 0 0 var(--hs-s4); } .hs-n2-kaufen__titel { margin: 0 0 var(--hs-s4); font-family: var(--hs-font-titel); /* Eine Stufe unter dem Abschnittstitel — siehe «Die drei Abschnittstitel». */ font-size: var(--hs-h2); font-weight: 700; line-height: 1.06; letter-spacing: .03em; color: var(--hs-weiss); } .hs-n2-kaufen__lead { max-width: 62ch; margin: 0; font-size: var(--hs-lead); line-height: 1.6; color: rgba(255, 255, 255, .72); } /* -------------------------------------------------------------------------- Das Gitter Randlos und mit 2 px Fuge. Die Fuge ist der schwarze Grund, der zwischen den Kacheln durchscheint — sie trennt zwölf Bilder voneinander, ohne dass eine Linie gezogen werden müsste. Die Spaltenzahl teilt zwölf ohne Rest: 4 · 3 · 2 · 1. Bei fünf Spalten stünde in der letzten Reihe eine Lücke, und «flächenfüllend» wäre dahin. -------------------------------------------------------------------------- */ .hs-n2-kaufen__gitter { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; } @media (min-width: 620px) { .hs-n2-kaufen__gitter { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .hs-n2-kaufen__gitter { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1400px) { .hs-n2-kaufen__gitter { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- Der Aufbau einer Kachel __flaeche trägt den Verweis und die eine Zahl (`--zug`) __vorn Foto + weisser Name — liegt still, wird nur mitgeschoben __zug DAS BLATT, fährt von oben herein __schnitt die orange Kante, klebt an seiner Unterkante __hinten das Papier, schneidet alles ab, was noch nicht da ist __block Beschrieb + «Ansehen» + unsichtbarer Platzhalter __gegenzug der schwarze Name, der stehen bleibt ⚠ HIER STAND BIS ZUM 2026-08-19 DAS GEGENTEIL: «Auf `__flaeche` darf KEIN `overflow: hidden` stehen.» Das galt für den Karten-Flip, dessen `preserve-3d` von einem `overflow` auf `flat` zurückgestellt worden wäre. Den Flip gibt es nicht mehr. Jetzt ist `overflow: hidden` dort PFLICHT — es klemmt die Schneide, das driftende Foto und das ein- und ausfahrende Blatt auf die Kachel. Ohne es läuft die orange Kante über die Nachbarn und der Scrollbalken geht beim Überfahren an und aus. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1. Die Kachel und ihre vier Stellschrauben -------------------------------------------------------------------------- */ .hs-n2-kachel { /* ⚠ DAS MASS, AN DEM DER FIXPUNKT HAENGT. Vorder- und Rückseite setzen ihren Namen mit demselben LINKEN und UNTEREN Innenmass. Weil beide Namenskästen unten ausgerichtet sind, entscheidet allein dieses Mass über die Lage der Zeile — das obere Innenmass der Vorderseite (`--blende`, das die Abdunklung trägt) darf davon abweichen. Der Wert ist identisch mit dem, der vorher als clamp() an drei Stellen stand; hier steht er einmal. */ --hs-kachel-luft: clamp(12px, 1.8vw, 20px); /* Der Grund des Blattes. EINE Zahl, falls der vollflächig weisse Block im schwarzen Gitter als zu harter Helligkeitssprung beurteilt wird — `var(--hs-grau-20)` hält die Tonalität des Abschnitts besser. Weiss ist Kundenvorgabe («die Rückseite könnte dann weiss sein mit schwarzer Schrift»), deshalb bleibt es der Ausgangswert. */ --hs-kachel-papier: var(--hs-weiss); /* Wie weit das Foto vorkommt, während sich die Wabe darüber schliesst. ⚠ HIER STAND `--hs-kachel-drift: 9%` — eine Verschiebung NACH UNTEN. Sie gehörte zum Papierzug: das Blatt schob das Foto vor sich her. Ohne Blatt wäre sie ein unerklärtes Wackeln. Ein Maßstab über 1 sagt dasselbe in der Sprache der Wabe — das Foto kommt entgegen, während sich die Zellen davorlegen — und kann anders als eine Verschiebung NIE einen leeren Rand freilegen. */ --hs-kachel-naeher: .04; /* * HALBE HOEHE — Kundenvorgabe vom 2026-08-19: «diese Karten hier würde * ich auch gerne jeweils um 50% weniger hoch machen». * * Wörtlich umgesetzt: 3:2 wird 3:1, 1:1 wird 2:1. Beide Verhältnisse * sind genau doppelt so breit wie vorher, also ist die Kachel bei * gleicher Breite genau halb so hoch. * * ⚠ DREI MASSE MUSSTEN MIT: `--hs-kachel-luft` (28 → 20 px), * `--blende` (88 → 52 px) und der Zeilenschnitt des Beschriebs * (5 → 2 Zeilen). Sonst passt der Satz auf der Rückseite nicht mehr * hinein — gerechnet auf der engsten Kachel (4 Spalten ab 1400 px, * 348 × 174 px): 20 oben + 20 unten lässt 134 px, und Name (24) + * «Ansehen» (20) + Abstand (13) + zwei Textzeilen (42) sind 99 px. */ aspect-ratio: 3 / 1; } @media (min-width: 620px) { .hs-n2-kachel { aspect-ratio: 2 / 1; } } /* -------------------------------------------------------------------------- 2. Die Fläche — trägt den Verweis und die eine Zahl -------------------------------------------------------------------------- */ .hs-n2-kachel__flaeche { /* 0 = Foto, 1 = Blatt. Alles andere rechnet daraus. Absichtlich KEIN `@property`: die Zahl wird nirgends übergeblendet, also braucht der Browser sie nicht zu interpolieren. Damit entfällt die Sonderbehandlung für ältere Safari und Firefox ersatzlos. */ --zug: 0; --satz: 0; /* dasselbe, aber erst ab 0.52 — für den Beschrieb */ position: relative; display: block; width: 100%; height: 100%; /* PFLICHT, siehe Warnung im Kopf: klemmt die Schneide, das driftende Foto und das ein- und ausfahrende Blatt auf die Kachel. Damit kann dieser Abschnitt — anders als ein 3D-Entwurf — keinen waagrechten Dokument-Overflow erzeugen. Das Gitter ist randlos und hat oberhalb KEINEN klemmenden Vorfahren (`.hs-n2` trägt `isolation`, aber kein `overflow`); jede Kachel, die über ihre Fläche hinauswüchse, liesse den Scrollbalken beim Ueberfahren an- und ausgehen. */ overflow: hidden; text-decoration: none; color: inherit; background: var(--hs-schwarz); -webkit-tap-highlight-color: transparent; } /* Bis zum Katalogimport ist die Kachel ein `div` mit `tabindex="0"` (siehe Markup-Aenderung). `outline-offset: -3px` hält den Rahmen innerhalb der Kachel, deshalb braucht es hier kein `z-index` gegen die 2-px-Fuge. */ .hs-n2-kachel__flaeche:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: -3px; } /* -------------------------------------------------------------------------- 3. Vorderseite — Foto, Abdunklung, weisser Name -------------------------------------------------------------------------- */ .hs-n2-kachel__vorn { position: absolute; inset: 0; display: flex; align-items: flex-end; /* hält das driftende Foto im Rahmen */ overflow: hidden; background: var(--hs-schwarz); } /* Die Verschiebung sitzt auf der HUELLE, nicht auf dem `img`. Die Deckkraft des Bildes gehört der Kundenentscheidung vom 2026-08-18 (volle Helligkeit); die beiden dürfen sich nicht in die Quere kommen. */ .hs-n2-kachel__bild { position: absolute; inset: 0; transform: scale( calc( 1 + var(--zug) * var(--hs-kachel-naeher) ) ); } .hs-n2-kachel__bild picture, .hs-n2-kachel__bild img { display: block; width: 100%; height: 100%; object-fit: cover; /* VOLLE HELLIGKEIT — Kundenentscheidung 2026-08-18, unverändert übernommen. Wer wieder dämpfen will: EIN Wert, hier. NICHT die Abdunklung unter dem Namen — die trägt die Lesbarkeit. */ opacity: 1; } /* -------------------------------------------------------------------------- Die Abdunklung unter dem Namen — UNVERAENDERT UEBERNOMMEN ⚠ DIESE REGEL IST DAS ERGEBNIS DES OVERLAY-FIX VOM 2026-08-18 UND DARF NICHT ERSETZT WERDEN. Sie ist genau die Antwort auf «Aktuell sind sie mit einem Overlay überlegt»: der ganzflächige `__vorn::after`-Verlauf ist damals verschwunden, weil er auf den schlimmsten Fall (dreizeiliger Name, Oberkante bei 29 % Kachelhöhe) ausgelegt sein musste und deshalb die halbe Kachel mit abdeckte. Jetzt hängt die Abdunklung am Namenskasten und wächst mit der Zeilenzahl mit — rund 70 % des Fotos bleiben unberührt. `--blende` ist gleichzeitig oberer Innenabstand UND Ausblendhöhe; wer eines ändert, muss das andere mitziehen, sonst rutscht die erste Textzeile in die Ausblendung. Gerechneter schlimmster Fall: 15.6 : 1. GEAENDERT IST HIER GENAU EINE SACHE, UND SIE AENDERT KEINEN PIXEL: die beiden `clamp(16px, 2.4vw, 28px)` heissen jetzt `var(--hs-kachel-luft)` und haben denselben Wert. Nur so können Vorder- und Rückseite garantiert nicht auseinanderdriften. -------------------------------------------------------------------------- */ .hs-n2-kachel__vorn .hs-n2-kachel__name { /* Halbiert mit der Kachelhöhe, 2026-08-19. Bei 88 px auf einer 174 px hohen Kachel hätte die Abdunklung zusammen mit dem unteren Innenmaß fast zwei Drittel des Fotos verdeckt. */ --blende: clamp(28px, 5vw, 52px); position: relative; /* über dem Bild */ flex: 1 1 auto; min-width: 0; padding: var(--blende) var(--hs-kachel-luft) var(--hs-kachel-luft); background: linear-gradient( to top, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .86) calc(100% - var(--blende)), rgba(0, 0, 0, 0) 100% ); } .hs-n2-kachel__name { font-family: var(--hs-font-titel); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 700; line-height: 1.15; letter-spacing: .02em; color: var(--hs-weiss); } /* -------------------------------------------------------------------------- 4. DIE BIENENWABE — die Fläche, die sich selbst zusammensetzt Kundenvorgabe vom 2026-08-19: «viele kleine hexagonale Bienenwaben, die sich jeweils von oben links nach unten rechts drehen». ⚠ HIER STAND BIS ZUM 2026-08-19 DER PAPIERZUG: ein einzelnes Blatt, das von oben hereinfuhr, mit oranger Schneide an der Unterkante und einem Gegenzug, der den Namen stillstellte. Der ist ersatzlos weg — samt `__zug`, `__schnitt` und `__gegenzug`. Wer im Vault (56_STARTSEITE…) noch Begründungen dazu findet: sie gelten für einen Mechanismus, den es nicht mehr gibt. WAS JETZT PASSIERT Über dem Foto liegt ein Feld regelmässiger Sechsecke. In Ruhe steht jedes davon auf der Kante — um 90° um die Achse oben-links→unten-rechts gekippt, also unsichtbar. `--zug` legt sie flach, aber nicht alle gleichzeitig: jede Zelle kennt ihre Diagonale (`--v`) und fängt später an, je weiter unten rechts sie sitzt. Am Ende stehen alle flach, stossen lückenlos aneinander und sind zusammen die weisse Fläche, auf der der Satz steht. ZWEI DINGE, DIE MAN NICHT SIEHT UND TROTZDEM WISSEN MUSS 1. DIE ZELLEN STEHEN NICHT IM DOKUMENT. Das Skript baut sie beim Einrichten. Ohne Skript gibt es keine einzige — dann trägt `__hinten` sein Weiss selbst (siehe Rückfall, Abschnitt 8), und die Rückseite ist sofort da statt gebaut. Das ist kein Notbetrieb: die Wabe ist reine Zier, sie trägt keinen Inhalt und keinen Verweis, und Zier gehört nicht ins Dokument. Bei zwölf Kacheln zu je fünfundvierzig Zellen spart das rund zwanzig Kilobyte Auslieferung. 2. DIE GEOMETRIE IST MESSUNGSFREI. Zellbreite ist ein Achtel der Kachelbreite, die Höhe folgt über `aspect-ratio`, und gestellt wird mit `translate()` in Prozent der EIGENEN Kästchengrösse. Damit stimmt das Feld bei jedem Spaltenwechsel (620/1000/1400 px), bei beiden Seitenverhältnissen (3:1 und 2:1), bei Browser-Zoom und auf einem 1.5×-Bildschirm — ohne eine einzige gelesene Zahl. Genau wie beim Papierzug gibt es keinen `resize`-Zuhörer und keinen ResizeObserver. -------------------------------------------------------------------------- */ .hs-n2-kachel__wabe { position: absolute; inset: 0; /* Ohne Fluchtpunkt ist ein `rotate3d` nur eine Stauchung. 700 px ist flach genug, dass die Zellen am Rand nicht auseinanderfallen, und tief genug, dass die Drehung nach Kippen aussieht und nicht nach Zusammenklappen. */ perspective: 700px; pointer-events: none; } /* * EINE ZELLE. * * Kein Klassenname, absichtlich: es sind bis zu fünfundvierzig Stück je * Kachel, und `> span` trifft sie alle. Das Skript setzt drei blanke Zahlen * — `--sp` (Spalte 0…8), `--re` (Reihe 0…4) und `--vs` (0 oder .5, der * halbe Versatz der ungeraden Reihen). Alles andere — Lage, Diagonale, * Drehwinkel, Massstab — rechnet das Stilblatt. Wer die Bewegung ändern * will, fasst diese Regel an und nicht das Skript. */ .hs-n2-kachel__wabe > span { /* Wie stark die Welle gespreizt ist: 0 = alle Zellen gleichzeitig, 1 = die letzte fängt erst an, wenn die erste fertig ist. Bei .55 überlappen sich Anfang und Ende deutlich — das Feld schliesst sich als EINE Bewegung, nicht als Reihe von Einzelklappen. */ --welle: .55; /* * Die Diagonale dieser Zelle, 0 (oben links) bis 1 (unten rechts). * * 8 Spaltenschritte + 5 Reihenschritte = 13. Ein Spaltenschritt ist * eine Zellbreite weit, ein Reihenschritt 0.866 Zellbreiten hoch — nah * genug beieinander, dass die blanke Summe eine echte Diagonale ergibt * und keine schiefe. * * ⚠ DAS `+ 1` IST KEIN SCHOENHEITSFEHLER. Die oberste Reihe hat * `--re: -1` — sie steht ÜBER dem Rand (siehe Skript). Ohne die * Verschiebung wäre ihre Diagonale negativ und `--eigen` startete für * sie vor dem Anfang. */ --v: calc( ( var(--sp) + var(--re) + 1 ) / 13 ); /* Der eigene Stand: erst bei `--v * --welle` fängt diese Zelle an, und sie ist fertig, wenn `--zug` ankommt. */ --eigen: clamp( 0, calc( ( var(--zug) - var(--v) * var(--welle) ) / ( 1 - var(--welle) ) ), 1 ); position: absolute; top: 0; left: 0; /* Ein Achtel der Kachelbreite: acht Zellen decken die Breite, die neunte fängt den halben Versatz der ungeraden Reihen ab. */ width: 12.5%; /* * ⚠ DER OBERE RAND BRAUCHT EINE REIHE UEBER SICH. Ein Spitzhut-Sechseck * berührt seinen Nachbarn nur auf dem mittleren Drittel der Flanke; * darüber und darunter bleibt je ein Dreieck offen. Nach unten füllt es * die versetzte Folgereihe — nach oben füllt es niemand, und der * Kachelrand ist gezähnt. Deshalb beginnt das Skript bei `--re: -1`. * (Gesehen am 2026-08-19 in der Wegwerf-Vorschau, nicht gerechnet.) */ /* Spitzhut-Sechseck: Breite zu Höhe wie √3 zu 2. */ aspect-ratio: .8660254 / 1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hs-kachel-papier); /* * ⚠ PROZENTE IN `translate()` BEZIEHEN SICH AUFS EIGENE KAESTCHEN — * x auf die eigene Breite, y auf die eigene Höhe. Genau deshalb steht * die Stellung hier und nicht in `top`/`left`: dort bezöge sich x auf * die Kachelbreite und y auf die KachelHOEHE, und die beiden stehen je * nach Seitenverhältnis anders zueinander. So bleibt das Sechseck bei * 3:1 genauso regelmässig wie bei 2:1. * * 75 % Reihenabstand, nicht 100: nur so greifen die Spitzen ineinander. * Das ist die Wabe. * * Der Schlussmassstab ist 1.012 und nicht 1. Sechsecke stossen * rechnerisch lückenlos aneinander, in Pixeln aber nicht — ein Prozent * Ueberlappung schluckt die Haarlinien an den Nähten. */ transform: translate( calc( ( var(--sp) - var(--vs) ) * 100% ), calc( var(--re) * 75% ) ) rotate3d( 1, 1, 0, calc( ( 1 - var(--eigen) ) * 90deg ) ) scale( calc( .55 + .462 * var(--eigen) ) ); opacity: var(--eigen); } /* Das Papier trägt jetzt keinen Grund mehr — den bilden die Zellen. Es ist nur noch der Kasten, in dem der Satz sitzt. Seinen Grund bekommt es zurück, sobald es keine Zellen gibt (Abschnitt 8). */ .hs-n2-kachel__hinten { position: absolute; inset: 0; overflow: hidden; color: var(--hs-schwarz); pointer-events: none; } /* -------------------------------------------------------------------------- 5. Der Satz auf dem Papier -------------------------------------------------------------------------- */ .hs-n2-kachel__block { position: absolute; inset: 0; display: flex; flex-direction: column; /* Alles an den Fuss. Zusammen mit `margin-bottom: auto` am Kicker trägt das ALLE vier Fälle: mit und ohne Kicker (Kategorie ohne Verweis), mit und ohne Beschrieb (fehlender Eintrag in `$beschriebe`). */ justify-content: flex-end; padding: var(--hs-kachel-luft); } .hs-n2-kachel__weiter { margin-bottom: auto; /* schiebt sich selbst nach oben */ display: inline-flex; align-items: center; gap: 6px; font-family: var(--hs-font-titel); font-size: var(--hs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; /* Kleine Schrift auf Weiss — hier gilt 4.5 : 1, und das schafft nur das tiefe Orange (5.07 : 1). Das helle käme auf 3.03. */ color: var(--hs-orange-tief); opacity: var(--satz); transform: translate3d(0, calc((1 - var(--satz)) * -7px), 0); } .hs-n2-kachel__weiter svg { /* Das Sinnbild zeigt nach unten; hier soll es nach rechts zeigen. */ transform: rotate(-90deg); } .hs-n2-kachel__text { margin: 0 0 .9em; /* NOTBREMSE, keine Gestaltung — und seit der Halbierung vom 2026-08-19 eine schaerfere: statt fünf Zeilen bleiben ZWEI. Gerechnet auf der engsten Kachel (4 Spalten ab 1400 px, 348 × 174 px): 134 px innen minus Name (24) minus «Ansehen» (20) minus Abstand (13) = 77 px, und zwei Zeilen sind 42 px. Der längste bestehende Eintrag («bogen», 148 Zeichen) wird damit SICHTBAR beschnitten — siehe (a) unten. Wer die Beschriebe schreibt (F-KA1), zielt jetzt auf rund 70 Zeichen. ⚠ ZWEI DINGE ZUM WEITERGEBEN: (a) `-webkit-line-clamp` setzt ein Auslassungszeichen, der Schnitt ist also SICHTBAR und nicht still. (b) Beschnitten wird nur die Darstellung — der volle Text bleibt im Barrierebaum und wird von Vorlesegeräten komplett gelesen. Bei stark vergrösserter Schrift (WCAG 1.4.4, 200 %) fällt der Text hier weg: die Kachel ist per `aspect-ratio` höhenstarr. Bewusst in Kauf genommen, siehe «zu lösende Probleme». */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: clamp(.8125rem, 1.05vw, .9375rem); line-height: 1.5; /* grau-70 auf weiss: 8.45 : 1 */ color: var(--hs-grau-70); opacity: var(--satz); transform: translate3d(0, calc((1 - var(--satz)) * 10px), 0); } /* ⚠ NICHT LOESCHEN, WEIL UNSICHTBAR. Diese Kopie des Namens steht im Fluss und hält dem Beschrieb die Zeile frei, in der gleich der schwarze Name steht — und misst dabei mit, ob der Name ein- oder zweizeilig läuft. Eine feste Zahl könnte das nicht. Ohne sie steht der Beschrieb im Namen. Sie trägt `aria-hidden` im Markup und wird deshalb nicht mitgelesen. */ .hs-n2-kachel__platz { padding: 0; visibility: hidden; } /* -------------------------------------------------------------------------- 6. Der Name auf dem Papier Er bewegt sich nicht mehr. Beim Papierzug musste er gegen das fahrende Blatt zurückgerechnet werden, damit er stillstand; die Wabe fährt nicht, sie klappt auf der Stelle auf. Also steht er einfach da — an derselben Stelle wie der weisse Name auf der Vorderseite, mit denselben zwei Massen — und blendet ein, sobald sich die Wabe geschlossen hat. ⚠ SEIN EINBLENDEN HAENGT NICHT AN `--satz`, UND DAS IST ABSICHT. Der Beschrieb darf kommen, während sich die letzten Zellen noch legen — bei ihm fällt das nicht auf. Der Name aber steht auf der Vorderseite in Weiss an genau derselben Stelle; käme er zu früh, läge dieselbe Zeile in zwei Farben übereinander. Deshalb die eigene, spätere Rampe ab 0.74. -------------------------------------------------------------------------- */ .hs-n2-kachel__ruecktitel { position: absolute; inset: 0; display: flex; align-items: flex-end; /* wie die Vorderseite — das ist der Fixpunkt */ pointer-events: none; opacity: clamp( 0, calc( ( var(--zug) - .74 ) / .26 ), 1 ); } .hs-n2-kachel__ruecktitel .hs-n2-kachel__name { /* Dieselben zwei Masse wie vorn. Oben KEIN `--blende` — der Name sitzt unten, das obere Innenmass spielt für seine Lage keine Rolle. */ flex: 1 1 auto; min-width: 0; padding: 0 var(--hs-kachel-luft) var(--hs-kachel-luft); color: var(--hs-schwarz); } /* -------------------------------------------------------------------------- 7. Grafikebene nur während der Fahrt `will-change` dauerhaft auf zwölf Kacheln wären sechsunddreissig vorgehaltene Ebenen, auch wenn nichts passiert. Das Skript setzt die Klasse beim Anfahren und nimmt sie beim Ankommen wieder weg. Bei fünf gleichzeitig fahrenden Kacheln sind das fünfzehn Ebenen — eine Grössenordnung unter jedem Entwurf mit Bildklonen. -------------------------------------------------------------------------- */ /* * ⚠ DIE ZELLEN BEKOMMEN BEWUSST KEIN `will-change`. * * Beim Papierzug waren es drei Ebenen je fahrender Kachel. Mit der Wabe * wären es fünfundvierzig — bei fünf gleichzeitig fahrenden Kacheln * zweihundertfünfundzwanzig vorgehaltene Ebenen, und das ist die * Grössenordnung, in der ein Browser anfängt, Speicher zu tauschen statt zu * zeichnen. Ein `rotate3d` promoviert die Zelle ohnehin von selbst, und zwar * nur solange sie sich dreht. Wer hier `will-change` ergänzt, macht es * messbar langsamer und wird es auf seinem Entwicklungsrechner nicht merken. */ .hs-n2-kachel__flaeche.ist-in-bewegung .hs-n2-kachel__bild { will-change: transform; } /* ========================================================================== 8. Der Rückfall — ohne Skript, und pro Kachel Zwei Bedingungen, ein Ergebnis: `--zug` und `--satz` springen auf 1. Das Blatt ist dann sofort da, ohne Fahrt. KEINE `transition` — im ganzen Abschnitt steht keine mehr, und ein sofortiger Wechsel ist hier kein Notbehelf, sondern ein vollständiger Zustand: Bild, Name und Verweis stehen ohnehin unabhängig vom Skript im Dokument. `body:not(.hs-n2-kachel-gesteuert)` — kein Skript, Ladefehler, Tippfehler, oder Bewegung abbestellt. `.hs-n2-kachel.ohne-papier` — PRO-KACHEL-RUECKFALL (übernommen aus Entwurf 4). Eine einzelne Kachel, an der dem Skript ein Teil fehlt, fällt allein zurück, während die übrigen elf den Papierzug fahren. Das ist der einzige Mechanismus in allen vier Entwürfen, der einen TEILausfall überlebt — und dieser Abschnitt braucht ihn, weil sein Inhalt aus WooCommerce kommt und Bild, Verweis und Anzahl nicht garantiert sind. ========================================================================== */ /* * OHNE ZELLEN TRÄGT DAS PAPIER SEIN WEISS SELBST. * * ⚠ DIESE VIER ZEILEN SIND DER GANZE RÜCKFALL DER WABE. Die Zellen baut * das Skript; gibt es keins, gibt es keine — und `__hinten` wäre ein * unsichtbarer Kasten mit schwarzer Schrift auf dem Foto. Das `opacity` MUSS * mit: ohne es stünde die weisse Fläche dauerhaft über allen zwölf Fotos, * denn in Ruhe blenden nur die KINDER aus, nicht der Kasten. * * Gilt auch für `prefers-reduced-motion`: dort gibt das Skript die Führung * ab, die Rumpfklasse fällt weg, und diese Regel greift. Dass daneben die * (bereits gebauten) Zellen bei `--zug: 1` ebenfalls flach und weiss stehen, * stört nicht — zweimal dasselbe Weiss ist immer noch dieses Weiss. */ body:not(.hs-n2-kachel-gesteuert) .hs-n2-kachel__hinten, .hs-n2-kachel.ohne-papier .hs-n2-kachel__hinten { background: var(--hs-kachel-papier); opacity: var(--zug); } /* `:hover` nur, wo es Ueberfahren gibt. Sonst lässt ein mobiler Browser das `:hover` nach einem Fingertipp kleben und die Rückseite bleibt stehen. */ @media (hover: hover) { body:not(.hs-n2-kachel-gesteuert) .hs-n2-kachel__flaeche:hover, .hs-n2-kachel.ohne-papier .hs-n2-kachel__flaeche:hover { --zug: 1; --satz: 1; } } /* Die Tastatur gilt auf JEDEM Gerät — auch auf einem Tablet mit angesteckter Tastatur. Diese Regeln stehen deshalb bewusst AUSSERHALB der hover-Abfrage. `:focus-within` bleibt als Gürtel zum Hosenträger für Browser ohne `:focus-visible`. */ body:not(.hs-n2-kachel-gesteuert) .hs-n2-kachel__flaeche:focus-visible, body:not(.hs-n2-kachel-gesteuert) .hs-n2-kachel__flaeche:focus-within, .hs-n2-kachel.ohne-papier .hs-n2-kachel__flaeche:focus-visible, .hs-n2-kachel.ohne-papier .hs-n2-kachel__flaeche:focus-within { --zug: 1; --satz: 1; } /* ========================================================================== 9. Wer Bewegung abbestellt hat Das Skript steigt aus, BEVOR es die Rumpfklasse setzt, und räumt sie ab, wenn die Einstellung mitten in der Sitzung umgelegt wird. Damit greift Abschnitt 8: das Blatt ist da, es fährt nur nicht. ⚠ DIE RUECKSEITE BLEIBT ERREICHBAR. Wäre hier nur die Bewegung abgeschaltet, wäre der Beschrieb für diese Besucher für immer weg. `!important` ist hier kein Schmutz, sondern die Absicherung gegen genau den Fehler, an dem Entwurf 4 gescheitert ist: hätte das Skript vor dem Umschalten einen Inline-Wert geschrieben und käme nicht mehr zum Aufräumen, schlüge dieser Inline-Wert jede Regel im Stilblatt — und die Rückseite wäre dauerhaft gesperrt. Das Skript räumt sauber ab; diese Zeilen sind der zweite Riegel. ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* Nichts fährt: das Foto steht still, statt entgegenzukommen. Die Zellen brauchen hier keine eigene Regel — bei `--zug: 1` stehen sie ohnehin alle flach, und flach ist ihr Ruhezustand ohne Bewegung. */ .hs-n2-kachel { --hs-kachel-naeher: 0; } .hs-n2-kachel__flaeche:focus-visible, .hs-n2-kachel__flaeche:focus-within { --zug: 1 !important; --satz: 1 !important; } } @media (prefers-reduced-motion: reduce) and (hover: hover) { .hs-n2-kachel__flaeche:hover { --zug: 1 !important; --satz: 1 !important; } } /* ========================================================================== */ @media print { /* Auf Papier braucht es kein zweites Papier. */ .hs-n2-kachel__wabe, .hs-n2-kachel__hinten { display: none; } } /* ========================================================================== Abschnitt 5 — NEU EINGETROFFEN: was zuletzt ins Regal kam ========================================================================== Kundenvorgabe vom 2026-08-19: vor den Kacheln, schwarzer Grund. --------------------------------------------------------------------------- ⚠ WARUM DIE KARTE WEISS IST — DAS IST GERECHNET, NICHT GEWÄHLT --------------------------------------------------------------------------- `hs_lieferstatus_html()` gibt zwei Zustandsfarben aus: Erfolg #17804A und Orange-tief #BF4800. Auf schwarzem Grund ergeben sie 4.22 : 1 und 4.14 : 1 — beide unter den 4.5 : 1, die WCAG für Fliesstext verlangt. Auf `--hs-papier` kommt Grün auf 4.49 : 1, also um einen Hundertstel daneben. Erst auf reinem Weiss tragen sie: 4.97 : 1 und 5.07 : 1. Der weisse Korpus ist damit die Bedingung dafür, den Lieferstatus-Helfer UNVERÄNDERT zu benutzen. Wer die Karte dunkel macht, muss den Helfer umbauen — siehe den vorbereiteten Block ganz unten. --------------------------------------------------------------------------- WARUM DAS RASTER ANDERS IST ALS BEI DEN KACHELN --------------------------------------------------------------------------- Zwei schwarze Abschnitte direkt untereinander verschmelzen zu einem. Drei Griffe halten sie auseinander, und alle drei sind Absicht: 1. Der Streifen ist eingerückt, der Kachelblock läuft randlos über die volle Breite. 2. Dort ein starres Gitter mit 2-px-Fugen, hier eine LAUFENDE Reihe, die man greifen kann. Das ist der deutlichste Unterschied und der Grund, warum die beiden schwarzen Abschnitte nicht verschmelzen. 3. Eine Haarlinie am Fuss. --------------------------------------------------------------------------- BEWEGUNG --------------------------------------------------------------------------- Das Einlaufen beim Scrollen läuft über `requestAnimationFrame` (`--an` in neu.js) — es ist scrollgebunden, und dafür gilt die Projektregel. Das Überfahren einer Karte läuft über `transition`. Das ist eine bewusste Ausnahme und die Begründung steht hier, damit sie niemand für Nachlässigkeit hält: die Regel stammt vom ruckelnden Markenband und meint scrollgebundene und dauerhaft laufende Bewegung. Ein Zustandswechsel beim Überfahren ist weder das eine noch das andere; über rAF gebaut wäre er mehr Code für dasselbe Bild. Sollte der Kunde das anders sehen, ist es EIN Block hier. ========================================================================== */ .hs-n2-neu { background: var(--hs-schwarz); color: var(--hs-weiss); padding-block: clamp(48px, 7vh, 96px); padding-inline: var(--hs-n2-rand); /* Wie bei den anderen Abschnitten: Platz für die schwebende Kopfleiste, damit die Überschrift beim Sprung aus dem Menü nicht darunter landet. */ scroll-margin-block-start: 80px; } /* --- Der Kopf ------------------------------------------------------------ */ /* * EINE ZEILE, UND SIE IST DIE UEBERSCHRIFT. * * ⚠ HIER STANDEN DREI REGELN: `__kopf` (der zentrierende Kasten), `__titel` * («Was zuletzt ins Regal kam») und `__lead` (der Fliesstext). Alle drei sind * am 2026-08-19 auf Kundenwunsch weg — «kann weg um Platz zu sparen». Das * Auge hat ihre Aufgabe übernommen. * * Der zentrierende Flex-Kasten wird nicht mehr gebraucht: er war die Antwort * darauf, dass `letter-spacing` hinter dem letzten Buchstaben eine Lücke * hängt, die zur Zeilenbreite zählt und die Zeile nach links zog. Bei EINEM * Element genügt dafür das Polster unten. */ .hs-n2-neu__auge { margin: 0 auto clamp(20px, 3.2vh, 36px); font-family: var(--hs-font-text); /* Eine Stufe über dem alten Auge (12 px), eine unter dem alten Titel: sie führt den Abschnitt jetzt allein und muss ihn tragen. */ font-size: clamp(.9375rem, 1.5vw, 1.1875rem); font-weight: 700; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; text-align: center; /* Der Ausgleich für die Schlusslücke: `letter-spacing` hängt sie auch hinter den letzten Buchstaben. */ padding-inline-start: .18em; /* #FF6000 auf Schwarz ergibt 6.93 : 1. */ color: var(--hs-orange); } /* --- Das Gitter ---------------------------------------------------------- */ .hs-n2-neu__lauf { position: relative; /* * VOLLE BREITE — Kundenvorgabe vom 2026-08-19. * * ⚠ HIER STAND `max-width: min(var(--hs-inhalt-max), 1080px)`. Der * Streifen war damit so breit wie der Fliesstext und endete mitten im * schwarzen Grund; jetzt läuft er wie das Kachelgitter von Rand zu Rand. * Das Innenmass wandert dafür an die Spur — es muss INNEN sitzen, damit * die erste Karte am Seitenrand beginnt und die letzte trotzdem aus dem * Bild laufen darf. */ max-width: none; /* * ⚠ AUSBRUCH AUS DEM ABSCHNITTSRAND — NICHT dessen Entfernung. * * Der `
` trägt `padding-inline: var(--hs-n2-rand)` (rund 54 px * auf dem Schirm). Die Überschrift BRAUCHT dieses Mass; der Streifen soll * ohne. Beim ersten Versuch am 2026-08-19 wurde deshalb das Innenmass der * SPUR auf null gesetzt — wirkungslos, weil das Mass eine Ebene höher * sitzt. Gemessen am Livesystem: Spur-Padding 0, erste Karte trotzdem bei * 53.8 px. * * Ein negatives Aussenmass in genau der Höhe des Innenmasses zieht den * Streifen wieder an die Kante, ohne den Abschnitt anzufassen. Wer * `--hs-n2-rand` ändert, ändert damit beides zugleich — das ist der * Grund, hier die Variable zu nehmen und keine Zahl. */ margin-inline: calc(var(--hs-n2-rand) * -1); margin-block: 0; } /* * ⚠ EIN SCROLLBEREICH, KEIN NACHGEBAUTES KARUSSELL. * * Der Streifen ist ein gewöhnlicher waagrechter Scrollbereich mit Rastpunkten. * Das Skript legt nur das Ziehen mit der Maus obendrauf. Der Unterschied ist * keine Kleinigkeit: Wischen, Trackpad, Tastatur und Vorlesegeräte * funktionieren damit von selbst. Ein Nachbau mit `transform` müsste jede * dieser vier Bedienarten einzeln nachbilden — und drei davon würden vergessen. * * `proximity` statt `mandatory`: beim Ziehen über mehrere Karten hinweg reisst * `mandatory` die Bewegung an jedem Rastpunkt an sich. `proximity` rastet nur * ein, wenn man ohnehin in der Nähe zum Stehen kommt. */ .hs-n2-neu__spur { display: flex; gap: var(--hs-s4); margin: 0; padding: 0; list-style: none; /* * ⚠ NULL, UND ZWAR AUSDRUECKLICH. * * Hier stand `padding-inline: var(--hs-n2-rand)` — ein Seitenrand, damit * die erste Karte auf der Fluchtlinie des Abschnitts beginnt. Der Kunde * hat ihn am 2026-08-19 verworfen: «hat es links und rechts noch einen * Rand in schwarz den ich nicht sauber finde. Der Abschluss sollte links * und rechts jeweils 0px padding respektive margin sein.» * * Der Streifen läuft damit an beiden Kanten aus dem Bild — wie das * Kachelgitter darüber, und aus demselben Grund: der schwarze Rest neben * einer angeschnittenen Karte liest sich als Fehler, nicht als Absicht. */ padding-inline: 0; overflow-x: auto; overscroll-behavior-x: contain; /* * ⚠ KEINE RASTPUNKTE MEHR, SOLANGE DAS SKRIPT FÜHRT. * * Hier stand `scroll-snap-type: x proximity`. Mit dem Dauerlauf ist das * Gift: der Browser zöge bei jedem Bild zum nächsten Rastpunkt, während * das Skript weiterschiebt — sichtbar als Zittern, und beim Umbruch am * Schleifenende als Sprung. Ohne Skript kommen die Rastpunkte zurück * (siehe Rückfall am Ende des Abschnitts), denn dort scrollt die Hand. */ scroll-snap-type: none; scroll-padding-inline: 0; /* Der Balken darunter zeigt den Stand — eine zweite Bildlaufleiste wäre doppelt. Firefox, WebKit und Chromium brauchen je eine eigene Zeile. */ scrollbar-width: none; -ms-overflow-style: none; } .hs-n2-neu__spur::-webkit-scrollbar { display: none; } /* Der Greifzeiger erscheint erst, wenn das Skript übernommen hat — ohne Ziehmöglichkeit wäre er ein Versprechen, das niemand einlöst. */ body.hs-n2-neu-gesteuert .hs-n2-neu__spur { cursor: grab; } body.hs-n2-neu-gesteuert .hs-n2-neu__spur.ist-gegriffen { cursor: grabbing; /* Während des Ziehens keine Rastpunkte: sonst zerrt der Browser gegen die Hand. Sie kommen beim Loslassen zurück. */ scroll-snap-type: none; /* Kein Textmarkieren beim Ziehen — sonst hebt man die halbe Reihe blau hervor, statt sie zu verschieben. */ user-select: none; } /* --- Die Karte ----------------------------------------------------------- */ .hs-n2-ware { display: flex; flex-direction: column; min-width: 0; /* sonst sprengen lange Produktnamen die Karte */ /* Feste Breite: im Streifen darf die Karte nicht mitwachsen, sonst verschiebt sich die Rasterung bei jedem Fensterwechsel. */ flex: 0 0 clamp(180px, 23vw, 240px); /* Wirkt nur im Rückfall — bei gesetzter Rumpfklasse ist `scroll-snap-type` auf `none`, und ohne Typ tut die Ausrichtung nichts. */ scroll-snap-align: start; } /* --- Die Steuerung ------------------------------------------------------- */ .hs-n2-neu__steuer { display: flex; align-items: center; gap: var(--hs-s4); /* Auf dieselbe Fluchtlinie wie die erste Karte — also derselbe Ausbruch wie beim Streifen, sonst stünden die Pfeile eingerückt darunter. */ margin: var(--hs-s4) calc(var(--hs-n2-rand) * -1) 0; } .hs-n2-neu__pfeil { flex: 0 0 auto; display: grid; place-items: center; width: var(--hs-touch-min); height: var(--hs-touch-min); padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--hs-radius); background: transparent; color: var(--hs-weiss); cursor: pointer; } /* Das Sinnbild zeigt nach unten. Gedreht zeigt es zur Seite — ein eigenes Sinnbild dafür wäre eine Datei mehr für einen Vierteldreh. */ .hs-n2-neu__pfeil svg { transform: rotate(90deg); } .hs-n2-neu__pfeil--vor svg { transform: rotate(-90deg); } .hs-n2-neu__pfeil[disabled] { opacity: .28; cursor: default; } .hs-n2-neu__balken { flex: 1 1 auto; height: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; } /* * Der Füllstand. * * Breite über `transform: scaleX`, nicht über `width`: eine Breitenänderung * bei jedem Scrollbild wäre ein Layoutdurchlauf pro Bild. `transform` läuft * auf der Grafikebene und kostet nichts. */ .hs-n2-neu__fuellung { display: block; width: 100%; height: 100%; background: var(--hs-orange); transform: scaleX(var(--stand, 0)); transform-origin: left center; } /* Ohne Skript sagt der Balken nichts Falsches: er bleibt leer, und die Pfeile verschwinden — gescrollt wird dann mit der Bildlaufleiste. */ body:not(.hs-n2-neu-gesteuert) .hs-n2-neu__steuer { display: none; } body:not(.hs-n2-neu-gesteuert) .hs-n2-neu__spur { scrollbar-width: auto; /* Ohne Skript läuft nichts von selbst, also scrollt die Hand — und dann sind Rastpunkte richtig. */ scroll-snap-type: x proximity; } body:not(.hs-n2-neu-gesteuert) .hs-n2-neu__spur::-webkit-scrollbar { display: block; } /* * Der Strich an der Oberkante. * * Dieselbe Farbe und dieselbe Rolle wie die Schneide des Papierzugs auf den * Kacheln und wie die Linie der Zeitleiste: eine Kante, die etwas ankündigt. * Er wächst von links, wenn die Karte ins Bild kommt. */ .hs-n2-ware__schnitt { display: block; height: 3px; background: var(--hs-orange); transform: scaleX(var(--an, 1)); transform-origin: left center; } .hs-n2-ware__karte { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; background: var(--hs-weiss); color: var(--hs-anthrazit); /* Nur transform und opacity — kein Layout, kein filter, kein clip-path. Die Deckkraft fällt nie unter .35, damit der Preis in jedem Zwischenzustand lesbar bleibt. */ transform: translate3d(0, calc((1 - var(--an, 1)) * 18px), 0); opacity: calc(.35 + var(--an, 1) * .65); } .hs-n2-ware.ist-in-bewegung .hs-n2-ware__karte { /* Nur WÄHREND der Fahrt. Acht Karten dauerhaft auf der Grafikebene wären acht vorgehaltene Ebenen für nichts — dieselbe Überlegung wie beim Papierzug. */ will-change: transform, opacity; } /* --- Das Bild ------------------------------------------------------------ */ .hs-n2-ware__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hs-grau-20); } .hs-n2-ware__bild img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- Der Textblock ------------------------------------------------------- */ .hs-n2-ware__block { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: var(--hs-s3); min-width: 0; } .hs-n2-ware__marke { margin: 0; font-size: var(--hs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hs-grau-70); /* #4D4D4D auf Weiss: 8.45 : 1 */ } /* * Das Abzeichen «Neu». * * Orange FLÄCHE mit schwarzer Schrift — 6.93 : 1, und damit die einzige * Stelle im Abschnitt, an der das leuchtende Orange grossflächig auftritt. * Radius erlaubt: das CD lässt Pillen für Badges ausdrücklich zu. */ .hs-n2-ware__frisch { align-self: flex-start; padding: 2px var(--hs-s2); border-radius: var(--hs-radius-pill); background: var(--hs-orange); color: var(--hs-schwarz); font-size: var(--hs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .hs-n2-ware__name { margin: 0; font-family: var(--hs-font-titel); font-size: var(--hs-text); /* 17 px, wird auf schmalen Schirmen NICHT kleiner */ font-weight: 600; line-height: 1.3; } .hs-n2-ware__link { color: inherit; text-decoration: none; /* Zwei Zeilen, dann Auslassungspunkte. Drei Zeilen sprengen die Karte, eine schneidet zu viele Namen mitten im Wort. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hs-n2-ware__link:hover, .hs-n2-ware__link:focus-visible { text-decoration: underline; } .hs-n2-ware__preis { margin: 0; font-size: var(--hs-text); font-weight: 700; color: var(--hs-schwarz); } .hs-n2-ware__preis del { opacity: .55; font-weight: 400; } .hs-n2-ware__preis ins { text-decoration: none; } .hs-n2-ware__lage { font-size: var(--hs-klein); } .hs-n2-ware__mehrere { color: var(--hs-grau-70); } /* Der Warenkorbknopf sitzt unten, egal wie lang der Name war. */ .hs-n2-ware__tun { margin-top: auto; padding-top: var(--hs-s3); } /* * ⚠ GEMESSEN, NICHT GESCHÄTZT (2026-08-19, am Livesystem): * * «Ausführung wählen» 49.6 px hoch (Beschriftung brach auf zwei Zeilen) * «In den Warenkorb» 44.0 px hoch (eine Zeile, dann `min-height`) * * Zwei Fehler in einem. Erstens sind die Knöpfe verschieden hoch, und weil * sie am FUSS der Karte verankert sind (`margin-top: auto`), stehen ihre * Oberkanten dadurch 5.6 px versetzt — das ist die Unruhe, die man in der * Reihe sieht. Zweitens sass im 44er die Schrift OBEN: `display: block` plus * `min-height` legt die überzähligen 11 px unter den Text statt um ihn. * * Beides ist hier durch die Bauart erledigt und nicht durch Glück: * * - FESTE Höhe statt `min-height` → alle Knöpfe sind gleich hoch, immer. * - `line-height` GLEICH der Höhe → die Zeile sitzt exakt mittig, ohne * Flexbox. Das ist hier der bessere Weg, weil `text-overflow` in einem * Flex-Container nicht greift (der Text wäre ein anonymes Flex-Kind). * - `nowrap` + Auslassungspunkte → eine zu lange Beschriftung wird * SICHTBAR gekürzt statt die Karte zu sprengen. * * ⚠ VOR DER ABNAHME IN FR UND IT NACHMESSEN. «Ausführung wählen» braucht bei * 12 px rund 105 px; die schmalste Karte (180 px) gibt dem Knopf 132 px * Innenraum. «Choisir une variante» liegt darüber und würde gekürzt. */ .hs-n2-ware__tun .button { display: block; box-sizing: border-box; width: 100%; /* 48 statt 44: über der Fingerkuppen-Mindestgrösse, und die 12-px-Zeile bekommt Luft. Höhe und Zeilenhöhe MÜSSEN gleich bleiben. */ height: 48px; line-height: 48px; padding: 0 var(--hs-s2); margin: 0; border: 0; border-radius: var(--hs-radius); background: var(--hs-schwarz); color: var(--hs-weiss); font-family: var(--hs-font-text); font-size: var(--hs-label); font-weight: 700; letter-spacing: .03em; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* WooCommerce liefert je nach Produktart `` ODER `