/* ========================================================================= Vergleichs-Lightbox (.cmp-lb) Freigegebener Entwurf vom 29.07. — Owner-Korrekturen eingearbeitet: Bilder randfüllend 16:9, Label-Spalte hell statt schwarz, Mobile-Sheet. Vokabular: übernommen aus der bestehenden Vergleichstabelle .cat-cmp (index_category.css) — schwarzbündige Kopfkante, 16:9-Bildrahmen, Modellname in Roboto 900 kursiv versal, orange umrandete CTA. Farben und Maße ausschließlich aus den --rok-*-Tokens. Neu deklariert ist nur der Lightbox-Rahmen selbst, den es im System noch nicht gab. ========================================================================= */ .cmp-lb { position: fixed; inset: 0; /* Overlay-Ebene des Systems: Suche, PDF-Overlay und Mobil-Menü liegen alle auf 1100, die klebende Navigation auf 1000. Ein niedrigerer Wert schiebt die Kopfzeile der Lightbox unter die Navigationsleiste — beim ersten Rendern genau so passiert. */ z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--rok-space-7) var(--rok-space-5); background: var(--rok-scrim); animation: rokFadeIn .15s ease; } .cmp-lb-panel { position: relative; width: 100%; max-width: var(--rok-container-max); max-height: calc(100vh - 2 * var(--rok-space-7)); background: var(--rok-white); border-radius: var(--rok-radius-0); box-shadow: var(--rok-shadow-lg); display: flex; flex-direction: column; overflow: hidden; } /* Der Dialog bekommt den Fokus programmatisch, damit Escape und Tab darin greifen. Ein Fokusring um die gesamte Fläche wäre dabei nur Lärm — die Lightbox selbst ist der sichtbare Fokus. Bedienelemente darin behalten ihren Ring. */ .cmp-lb-panel:focus { outline: none; } /* ---------- Kopf ---------- */ .cmp-lb-head { padding: var(--rok-space-6) var(--rok-space-6) var(--rok-space-5); border-bottom: 1px solid var(--rok-gray-200-warm); flex: 0 0 auto; } .cmp-lb-eyebrow { font-size: 11px; font-weight: var(--rok-fw-bold); letter-spacing: .22em; text-transform: uppercase; color: var(--rok-orange-text); display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--rok-space-3); } .cmp-lb-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--rok-orange); } .cmp-lb-head h2 { font-family: var(--rok-font-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--rok-fs-2xl); line-height: 1; letter-spacing: -.01em; margin: 0; /* Lange Komposita ("Putzbearbeitungsmaschinen") dürfen trennen. hyphens:auto zieht das Trennmuster aus dem lang-Attribut am — greift also in jeder der 17 Sprachen mit deren eigenen Trennregeln, nicht nur Deutsch. */ hyphens: auto; } .cmp-lb-head h2 .thin { font-weight: var(--rok-fw-light); font-style: normal; text-transform: none; color: var(--rok-text-muted-accessible); display: block; font-size: var(--rok-fs-lg); margin-top: var(--rok-space-2); letter-spacing: 0; hyphens: none; } .cmp-lb-close { position: absolute; top: var(--rok-space-5); right: var(--rok-space-5); width: 40px; height: 40px; display: grid; place-items: center; background: var(--rok-white); border: 1px solid var(--rok-gray-200); color: var(--rok-ink); font-size: 20px; line-height: 1; cursor: pointer; transition: all var(--rok-dur-fast) var(--rok-ease); z-index: 5; } .cmp-lb-close:hover, .cmp-lb-close:focus-visible { background: var(--rok-orange); border-color: var(--rok-orange); color: var(--rok-text-on-orange); } .cmp-lb-body { overflow: auto; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: var(--rok-gray-300) var(--rok-white); } /* ---------- Tabelle ---------- */ .cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--rok-white); min-width: 880px; table-layout: fixed; } .cmp thead th { background: var(--rok-white); border-bottom: 1px solid var(--rok-night); /* Kein Zellen-Padding: das Bild soll die 16:9-Fläche randlos füllen. Der Text darunter bringt seinen eigenen Innenabstand mit. */ padding: 0 0 var(--rok-space-4); vertical-align: top; text-align: left; border-left: 1px solid var(--rok-gray-200-warm); } .cmp-h .img { width: 100%; aspect-ratio: 16 / 9; background: var(--rok-surface-warm); overflow: hidden; display: block; margin-bottom: var(--rok-space-3); } .cmp-h .img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmp-h .meta { padding: 0 var(--rok-space-4); display: flex; flex-direction: column; gap: 2px; } .cmp-h .kicker { font-size: 10px; font-weight: var(--rok-fw-bold); letter-spacing: .18em; text-transform: uppercase; color: var(--rok-orange-text); } .cmp-h .name { font-family: var(--rok-font-display); font-weight: 900; font-style: italic; font-size: var(--rok-fs-lg); color: var(--rok-night); text-transform: uppercase; line-height: 1.05; } .cmp-h .sku { font-size: 11px; color: var(--rok-text-muted-accessible); letter-spacing: .04em; } /* Label-Spalte: helle Fläche, keine schwarze Wand. */ .cmp thead th.lbl { background: var(--rok-gray-50); border-left: 0; border-bottom: 1px solid var(--rok-night); position: sticky; left: 0; z-index: 3; width: 212px; } .cmp tbody th { text-align: left; background: var(--rok-gray-50); color: var(--rok-text-muted-accessible); padding: var(--rok-space-3) var(--rok-space-4); font-weight: var(--rok-fw-medium); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--rok-gray-200-warm); border-right: 1px solid var(--rok-gray-200-warm); position: sticky; left: 0; z-index: 2; width: 212px; } .cmp tbody td { padding: var(--rok-space-3) var(--rok-space-4); border-bottom: 1px solid var(--rok-gray-200-warm); border-left: 1px solid var(--rok-gray-50); color: var(--rok-night); font-weight: var(--rok-fw-medium); text-align: left; } .cmp tbody tr:hover td { background: var(--rok-gray-50); } /* Abschnitts-Bänder */ .cmp .sec th { background: var(--rok-gray-100); color: var(--rok-orange-text); font-weight: var(--rok-fw-bold); letter-spacing: .14em; font-size: 11px; border-bottom: 1px solid var(--rok-gray-200-warm); } .cmp .sec td { background: var(--rok-gray-100); border-bottom: 1px solid var(--rok-gray-200-warm); border-left: 0; padding: var(--rok-space-2) var(--rok-space-4); } /* Sterne — identisch zu .pdp-incl.pdp-areas .rating auf der Produktseite */ .cmp .rating { letter-spacing: 2px; color: var(--rok-orange); white-space: nowrap; font-size: 15px; } .cmp .rating .muted { color: var(--rok-gray-300); } .cmp .na { color: var(--rok-text-muted-accessible); font-weight: var(--rok-fw-regular); } /* CTA-Zeile */ .cmp .cta-row td { padding: var(--rok-space-4); border-bottom: 0; } .cmp .cta-row th { background: var(--rok-gray-50); border-bottom: 0; } .cmp .cta-row a { display: inline-block; font-size: 12px; letter-spacing: .06em; font-weight: var(--rok-fw-bold); color: var(--rok-orange-text); text-decoration: none; padding: var(--rok-space-2) var(--rok-space-3); border: 1px solid var(--rok-orange); text-transform: uppercase; transition: all var(--rok-dur-fast) var(--rok-ease); } .cmp .cta-row a:hover, .cmp .cta-row a:focus-visible { background: var(--rok-orange); color: var(--rok-text-on-orange); } /* Fuß / Legende */ .cmp-lb-foot { flex: 0 0 auto; border-top: 1px solid var(--rok-gray-200-warm); padding: var(--rok-space-4) var(--rok-space-6); display: flex; gap: var(--rok-space-5); align-items: center; flex-wrap: wrap; background: var(--rok-gray-50); } .cmp-lb-foot .lg { font-size: 12px; color: var(--rok-text-muted-accessible); letter-spacing: .03em; } .cmp-lb-foot .lg b { color: var(--rok-night); font-weight: var(--rok-fw-medium); } .cmp-lb-foot .rating { font-size: 13px; color: var(--rok-orange); letter-spacing: 2px; } .cmp-lb-foot .rating .muted { color: var(--rok-gray-300); } .cmp-swipe { display: none; } /* ========================================================================= MOBIL — Vollbild-Sheet. Die Tabelle bleibt eine Tabelle; nur so bleibt der Vergleich ein Vergleich. Label-Spalte schmal und fixiert, Produktspalten mit Scroll-Snap: eine Maschine je Wisch. ========================================================================= */ @media (max-width: 760px) { .cmp-lb { padding: 0; } .cmp-lb-panel { max-width: 100%; max-height: 100dvh; height: 100dvh; } .cmp-lb-head { padding: var(--rok-space-5) var(--rok-space-5) var(--rok-space-4); } .cmp-lb-head h2 { font-size: var(--rok-fs-lg); overflow-wrap: anywhere; padding-right: 44px; } .cmp-lb-head h2 .thin { font-size: var(--rok-fs-sm); margin-top: var(--rok-space-1); overflow-wrap: normal; padding-right: 0; } .cmp-lb-close { top: var(--rok-space-3); right: var(--rok-space-3); width: 36px; height: 36px; } /* EINE Quelle für die Spaltenmaße: Label-Breite und Spaltenbreite stehen hier, alles andere rechnet daraus. Vorher stand die Label-Breite an drei Stellen und das scroll-padding als eigene Zahl daneben — in Ungarisch wuchs die Spalte auf 165px, während das Padding bei 134px blieb, und die erste Maschine wurde beim Öffnen angeschnitten. */ .cmp-lb { --cmp-lbl-w: 118px; --cmp-col-w: 62vw; } /* scroll-padding = Breite der fixierten Label-Spalte. Ohne das schnappt der Browser beim Öffnen auf die ZWEITE Maschine, weil die erste zur Hälfte hinter der Label-Spalte liegt und damit als "nicht die beste Kandidatin" gilt. Gemessen: ohne scroll-padding startet die Lightbox bei scrollLeft 267. */ .cmp-lb-body { scroll-snap-type: x mandatory; overscroll-behavior: contain; scroll-padding-left: var(--cmp-lbl-w); } /* Explizite Gesamtbreite statt `width:auto`: mit `table-layout:fixed` und automatischer Breite verteilt der Browser den Platz selbst — gemessen 1450px je Spalte statt der gewünschten 62vw. `--cmp-cols` liefert die Komponente. */ .cmp { min-width: 0; width: calc(var(--cmp-lbl-w) + var(--cmp-cols, 3) * var(--cmp-col-w)); font-size: 13px; } .cmp thead th.lbl, .cmp tbody th { width: var(--cmp-lbl-w); min-width: var(--cmp-lbl-w); max-width: var(--cmp-lbl-w); padding: var(--rok-space-2) var(--rok-space-3); font-size: 10px; letter-spacing: .06em; line-height: 1.3; /* Lange Beschriftungen (hu: „Akkumulátor teljesítmény/kapacitás") müssen in der schmalen Spalte umbrechen dürfen, statt sie aufzudrücken. */ overflow-wrap: anywhere; hyphens: auto; } .cmp thead th:not(.lbl), .cmp tbody td { width: var(--cmp-col-w); min-width: var(--cmp-col-w); max-width: var(--cmp-col-w); scroll-snap-align: start; } .cmp tbody td { padding: var(--rok-space-2) var(--rok-space-3); } .cmp-h .name { font-size: var(--rok-fs-md); } .cmp-h .meta { padding: 0 var(--rok-space-3); } /* Wisch-Hinweis, damit die Abschneidekante nicht stumm bleibt */ .cmp-swipe { display: flex; align-items: center; gap: var(--rok-space-2); padding: var(--rok-space-2) var(--rok-space-5); background: var(--rok-gray-50); border-bottom: 1px solid var(--rok-gray-200-warm); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rok-text-muted-accessible); } .cmp-swipe .arrow { color: var(--rok-orange); } .cmp-lb-foot { padding: var(--rok-space-3) var(--rok-space-5); gap: var(--rok-space-3); } } @media (prefers-reduced-motion: reduce) { .cmp-lb-body { scroll-behavior: auto; } }