/* ========================================================================== WICHTIG – warum vor jeder Regel ".rlx-page" steht: Elementors Kit-Stylesheet (uploads/elementor/css/post-19.css) benutzt Selektoren wie ".elementor-kit-19 button" und ".elementor-kit-19 h2" – das sind zwei Stufen. Eine eigene Klasse allein (".rlx-sel__nav") hat nur eine und verliert, obwohl unser Blatt später lädt. Bei GLEICHSTAND gewinnt ebenfalls Elementor, nicht wir. ".rlx-page " davor macht daraus zwei Stufen – ohne ein einziges !important. Dieselbe Regel gilt in rolex-uhren.css (dort gemessen und behoben am 15.08.2026). Das äußere Element dieses Blocks trägt deshalb "rlx-page". ========================================================================== */ /* -------------------------------------------------------------------------- Block "Unsere Rolex Auswahl" · Shortcode [rolex_auswahl] Ergänzt rolex-uhren.css, ersetzt sie nicht: Uhrenkarte (.rlx-card), grüner Knopf (.rlx-cta) und die Rolex-Grundregeln kommen von dort. Hier steht nur, was den Block ausmacht – Reihe, Pfeile, Punkte, Knopfzeile. Farben, Abstände und Schriftgrößen ausschließlich aus dem --r-*-System der Webseite (Elementor Custom Code 336268 "Rolex CSS"). Eigene Werte tragen das Präfix --rlx- und stehen bereits in rolex-uhren.css. Alle Pixelmaße sind an der offiziellen Vorlage "rolex-watches-with-grid-mockup-desktop.jpg" abgenommen (1920 px, 1:1): Karten 403 px breit, Abstand 8 px, vier je Ansicht Überschrift → Karten 21 px Karten → Punkte 30 px Punkte → Knopf 33 px Pfeil: Kreis 40 px, 40 px rechts neben der letzten Karte -------------------------------------------------------------------------- */ /* Der Block sitzt INNERHALB einer Elementor-Sektion, die ihre Seitenränder selbst mitbringt. Deshalb bewusst ohne .r-rolex-wrapper – dessen 8 % links und rechts kämen zu den Rändern der Sektion hinzu und der Block stünde schmaler als seine Nachbarn. Die Schriftvorgaben daraus werden hier gesetzt, die Ränder nicht. */ .rlx-page.rlx-sel { font-family: var(--r-body-family); font-weight: var(--r-body-weight); line-height: var(--r-line-height); color: var(--r-body-color); } .rlx-page .rlx-sel__title { margin: 0 0 var(--r-space20-V); color: var(--r-brown); } .rlx-page .rlx-sel__viewport { position: relative; } /* Vier Karten je Ansicht, Abstand 8 px – dieselbe Rechnung wie bei "Weiter entdecken". grid-auto-flow:column hält alle Karten in EINER Zeile, auch wenn es mehr als vier sind; gescrollt wird seitlich. */ .rlx-page .rlx-sel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--r-space8-H)) / 4); gap: var(--r-space8-H); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .rlx-page .rlx-sel__track::-webkit-scrollbar { display: none; } /* Die Karten liefert BRU_Ausgabe::karte() – dieselben
  • wie auf der Uhrenübersicht. Sie brauchen hier nur den Rastpunkt. */ .rlx-page .rlx-sel__track > .rlx-grid__cell { scroll-snap-align: start; } /* Pfeile. Aussehen wie bei "Weiter entdecken". In der Vorlage sitzt der Kreis auf halber Kartenhöhe (gemessen: Kartenmitte 1261 px, Kreismitte 1287 px). padding und font-* ausdrücklich: Elementor setzt beides direkt auf button. */ .rlx-page .rlx-sel__nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: var(--r-width44); height: var(--r-height44); padding: 0; border: 0; border-radius: var(--r-radius-full); background-color: var(--r-grey30); color: var(--r-brown); font-family: var(--r-body-family); cursor: pointer; transition: background-color .25s ease-in-out; } .rlx-page .rlx-sel__nav[hidden] { display: none; } /* Der Überfahr-Zustand muss ALLES wiederholen, was Elementor für button:hover setzt – sonst gewinnt Elementor. Gemessen am 15.08.2026 an .rlx-sel__nav: .elementor-kit-19 button:hover border-radius: 0 Gewicht 201 .elementor-kit-19 button:hover color: Gewicht 201 gegen unsere .rlx-page .rlx-sel__nav mit Gewicht 200 – die gilt aber nur im RUHEZUSTAND und tritt gar nicht an. Aus dem runden Pfeil wäre beim Überfahren ein Rechteck geworden. Merksatz: Der Ruhezustand allein reicht bei Elementor nie. :focus MUSS mit dabei sein, nicht nur :focus-visible. Das Kit spricht button:focus an – wer nur :focus-visible abdeckt, lässt die Hälfte offen. Gemessen am 15.08.2026: Bei Tastaturbedienung wäre aus dem runden Pfeil ein dunkles Rechteck geworden. */ .rlx-page .rlx-sel__nav:hover, .rlx-page .rlx-sel__nav:focus, .rlx-page .rlx-sel__nav:focus-visible { border-radius: var(--r-radius-full); border-style: none; color: var(--r-brown); background-color: var(--r-dark-grey30); } /* Der Pfeil liegt INNERHALB der Reihe auf, nicht daneben. In der Vorlage steht er 40 px rechts neben der letzten Karte. Das setzt einen freien Seitenrand voraus, den es hier nicht gibt: Der Block sitzt in einem Elementor-Container, dessen Breite die Redaktion bestimmt – gemessen am 15.08.2026 volle 1280 px ohne Rand. Draußen platziert erzeugte der Pfeil waagerechtes Scrollen der ganzen Seite. Eine bewusste Abweichung von der Vorlage zugunsten der Bedienbarkeit. */ .rlx-page .rlx-sel__nav--prev { left: var(--r-space8-H); } .rlx-page .rlx-sel__nav--next { right: var(--r-space8-H); } /* Punkte – Strichform, identisch zu "Weiter entdecken" */ .rlx-page .rlx-sel__dots { display: flex; justify-content: center; gap: var(--r-space8-H); margin-top: var(--r-space20-V); } .rlx-page .rlx-sel__dots:empty { display: none; } /* Der Strich wirkt 20 px breit, die Schaltfläche ist aber 24x24 px groß – WCAG 2.2 SC 2.5.8 (Zielgröße). */ .rlx-page .rlx-sel__dot { width: var(--r-height24); min-width: var(--r-height24); height: var(--r-height24); border: 0; padding: 0; background-color: transparent; background-image: linear-gradient(var(--rlx-grey-aa), var(--rlx-grey-aa)); background-repeat: no-repeat; background-size: var(--r-width20) var(--r-height4); background-position: center; cursor: pointer; transition: all .25s ease-in-out; } /* Gleiche Falle wie beim Pfeil, hier schlimmer: Elementors button:hover setzt eine dunkle Hintergrundfarbe. Der Punkt ist eine unsichtbare 24x24-Fläche mit einem Strich darin – beim Überfahren wäre daraus ein dunkles Kästchen geworden. Gemessen: .elementor-kit-19 button:hover background-color var(--e-global-color-text), Gewicht 201 gegen unsere 200 im Ruhezustand. */ .rlx-page .rlx-sel__dot:hover, .rlx-page .rlx-sel__dot:focus, .rlx-page .rlx-sel__dot:focus-visible { background-color: transparent; border-radius: 0; border-style: none; color: inherit; } .rlx-page .rlx-sel__dot--active { width: var(--r-width50); background-size: var(--r-width50) var(--r-height4); background-image: linear-gradient(var(--r-green), var(--r-green)); } /* Muss nach der Überfahr-Regel stehen: sonst nähme diese dem aktiven Punkt beim Überfahren seinen grünen Strich. Gleiche Gewichtung, spätere Regel gewinnt – deshalb ausdrücklich nochmal beides. */ .rlx-page .rlx-sel__dot--active:hover, .rlx-page .rlx-sel__dot--active:focus, .rlx-page .rlx-sel__dot--active:focus-visible { background-image: linear-gradient(var(--r-green), var(--r-green)); background-color: transparent; } .rlx-page .rlx-sel__cta { display: flex; justify-content: center; margin: var(--r-space30-V) 0 0; } /* Der grüne Knopf ist ein VERWEIS, kein