@charset "UTF-8";
/* ==========================================================================
   WICHTIG – warum vor fast jeder Regel ".rlx-page" steht:

   Elementors Kit-Stylesheet (uploads/elementor/css/post-19.css) verwendet
   Selektoren wie ".elementor-kit-19 button" – das sind zwei Stufen. Unsere
   Klassen allein (".rlx-cta--primary") haben nur eine und verlieren, obwohl
   unser Stylesheet später lädt. Folge war: Rolex-Pillen wurden zu schwarzen
   Elementor-Knöpfen, die Überschrift zu Playfair Display, die Filterzeilen zu
   12px-Versalien und Karten bekamen beim Überfahren eine Unterstreichung.

   ".rlx-page " davor macht daraus zwei Stufen – ohne ein einziges !important.
   Gemessen und behoben am 15.08.2026.

   FÜR WEITERE BLÖCKE: Das äußere Element eines Blocks braucht die Klasse
   "rlx-page", sonst greifen Karten- und Knopfstile nicht.
   ========================================================================== */
/* ==========================================================================
   Rolex Uhren – Übersichtsseite (Plugin "Böhnlein Rolex Uhren")
   Nutzt die --r-*-Variablen der Webseite (Elementor Custom Code 336268,
   "Rolex CSS", Bedingung include/general – gilt also auf allen Seiten).
   Hier werden KEINE --r-Variablen definiert, nur benutzt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Abgeleitete Töne – KEINE Rolex-Vorgabe. Deshalb Präfix --rlx- statt --r-,
   damit sie nicht mit echten Rolex-Tokens verwechselt werden. Hergeleitet, weil
   die Originalwerte als Textfarbe bzw. Bedienelement durchfallen.
   Gerechnet am 15.08.2026, WCAG-2.x-Formel:
     --r-dark-grey  #767676 auf #F4EFEA = 3,98:1  → durchgefallen (4,5 nötig)
                            auf #F9F7F4 = 4,25:1  → durchgefallen
     --rlx-dark-grey-aa #6B6B6B auf #F4EFEA = 4,66:1 · auf #F9F7F4 = 4,98:1 → besteht
     --r-grey       #D4D4D4 auf #FFFFFF = 1,48:1  → durchgefallen (3:1 nötig)
     --rlx-grey-aa    #949494 auf #FFFFFF = 3,03:1  → besteht
   Die Rolex-Originaltöne bleiben unangetastet und weiter für Flächen nutzbar.
   -------------------------------------------------------------------------- */
:root {
	--rlx-dark-grey-aa: #6B6B6B;
	--rlx-grey-aa: #949494;

	/* Eigener Wert dieser Seite – bewusst OHNE --r-Präfix, damit er nicht mit
	   echten Rolex-Tokens verwechselt wird. 84px steht so im Layoutentwurf der
	   Filter-Handyansicht; ein passendes Rolex-Token gibt es nicht
	   (vorhanden sind nur --r-height80, -100, -110, -160). */
	--rlx-leiste-hoehe: 84px;

	/* Zeilenhöhen der Filterliste, aus dem Vorlagen-Mockup ausgemessen (15.08.2026): Kästchen-Filter 36px, Kollektion (reine Textliste) 32px. */
	--rlx-filterzeile: 36px;
	--rlx-filterzeile-schlicht: 32px;
}

/* --------------------------------------------------------------------------
   Elementor zurücksetzen

   Elementors Kit setzt Schriftart und Versalien direkt auf Elementen
   (.elementor-kit-19 h1 / button / label). Unsere Komponentenregeln stehen mit
   ".rlx-page " davor bei zwei Klassen und gewinnen – sie mussten die Schriftart
   nur ausdrücklich nennen, Vererbung reicht dagegen nicht.
   Gemessen und behoben am 15.08.2026.
   -------------------------------------------------------------------------- */
.rlx-page button,
.rlx-page select,
.rlx-page label,
.rlx-page summary {
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   Grundgerüst – entspricht .r-rolex-wrapper der Webseite
   -------------------------------------------------------------------------- */
*{ box-sizing: border-box; }

/* nur für Screenreader */
.rlx-page .rlx-nur-sr{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


.rlx-page .rlx-demo__note{
	background: var(--r-beige);
	color: var(--r-brown);
	font: bold 12px/1 var(--r-body-family);
	padding: 10px 8%;
	letter-spacing: .02em;
}

.rlx-page .r-rolex-wrapper{
	font-family: var(--r-body-family);
	font-weight: var(--r-body-weight);
	line-height: var(--r-line-height);
	color: var(--r-body-color);
	padding-left: 8%;
	padding-right: 8%;
}

.rlx-page .r-white-bg{ background-color: var(--r-white); }
.rlx-page .r-lightbeige-bg{ background-color: var(--r-light-beige); }

/* Typografie-Klassen – wortgleich zur Webseite */
.rlx-page .r-headline50{
	font-family: var(--r-body-family);
	font-size: var(--r-headline50);
	font-weight: var(--r-headline50-weight-bold);
	line-height: var(--r-headline50-line-height);
	color: var(--r-brown);
}
.rlx-page .r-headline36{
	font-family: var(--r-body-family);
	font-size: var(--r-headline36);
	font-weight: var(--r-headline36-weight-bold);
	line-height: var(--r-headline36-line-height);
	color: var(--r-brown);
}
.rlx-page .r-body24-bold,
.rlx-page .r-body24-light{
	font-family: var(--r-body-family);
	font-size: var(--r-body24);
	font-weight: var(--r-body24-weight-bold);
	line-height: var(--r-body24-line-height);
}
.rlx-page .r-body24-light{ font-weight: var(--r-body24-weight-light); }
.rlx-page .r-body20-bold,
.rlx-page .r-body20-light{
	font-family: var(--r-body-family);
	font-size: var(--r-body20);
	font-weight: var(--r-body20-weight-bold);
	line-height: var(--r-body20-line-height);
}
.rlx-page .r-body20-light{ font-weight: var(--r-body20-weight-light); }
.rlx-page .r-body20-light strong{ font-weight: bold; }
.rlx-page .r-legend16-bold,
.rlx-page .r-legend16-light{
	font-family: var(--r-body-family);
	font-size: var(--r-legend16);
	font-weight: var(--r-legend16-weight-bold);
	line-height: var(--r-legend16-line-height);
	color: var(--r-body-color);
}
.rlx-page .r-legend16-light{ font-weight: var(--r-legend16-weight-light); }
.rlx-page .r-fixed16{
	font-family: var(--r-body-family);
	font-size: var(--r-fixed16);
	font-weight: var(--r-fixed16-weight-bold);
	line-height: var(--r-fixed16-line-height);
}
.rlx-page .r-aspect-ratio-3-2{ aspect-ratio: 3 / 2; }

/* Verweise wie auf den übrigen Rolex-Seiten */
.rlx-page a:not(.rlx-card):not(.rlx-keep__link):not(.rlx-cta){
	color: var(--r-rolex-green);
	transition: color .3s ease-in-out;
}
.rlx-page a:not(.rlx-card):not(.rlx-keep__link):not(.rlx-cta):hover,
.rlx-page a:not(.rlx-card):not(.rlx-keep__link):not(.rlx-cta):focus{ color: var(--r-black); }

/* Fokusrahmen – identisch zur Webseite (2px, #127749, 6px Radius) */
.rlx-page :focus-visible{ outline: none; }
/* Das versteckte Kontrollkästchen muss absolut bleiben, sonst wirkt clip nicht. */
.rlx-page a,
.rlx-page button,
.rlx-page summary,
.rlx-page select,
.rlx-page input:not(.rlx-filter__input){ position: relative; }
.rlx-page a:focus-visible::after,
.rlx-page button:focus-visible::after,
.rlx-page summary:focus-visible::after,
.rlx-page select:focus-visible::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid var(--r-green);
	border-radius: 6px;
	pointer-events: none;
	z-index: 999;
}
/* Filterzeilen bekommen einen echten outline statt ::after – sonst würde der Fokusrahmen das Häkchen überschreiben (beide nutzen ::after). */
.rlx-page .rlx-filter__input:focus-visible + .rlx-filter__label{
	outline: 2px solid var(--r-green);
	outline-offset: 2px;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Raster – 12 Spalten und 24 Spalten,
   Spaltenabstand 8px (wie Webseite)
   -------------------------------------------------------------------------- */
.rlx-page .r-grid{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--r-space8-H);
}
.rlx-page .r-grid24{
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	column-gap: var(--r-space8-H);
	row-gap: var(--r-space8-V);
}

/* --------------------------------------------------------------------------
   XL image
   -------------------------------------------------------------------------- */
.rlx-page .rlx-hero{
	margin-left: -8%;
	margin-right: -8%;
	line-height: 0;
}
.rlx-page .rlx-hero__img{
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   Auswahlbereich
   -------------------------------------------------------------------------- */
.rlx-page .rlx-browse{
	margin-left: -8%;
	margin-right: -8%;
	padding: var(--r-space10vh-V) 8%;
}

/* Einleitung: Überschrift Spalte 1–5, Text Spalte 7–11 (12er-Raster) */
.rlx-page .rlx-intro{ margin-bottom: var(--r-space10vh-V); }
.rlx-page .rlx-intro__title{
	grid-column: var(--r-grid-span5);
	margin: 0;
	text-wrap: balance;
}
.rlx-page .rlx-intro__text{
	grid-column: var(--r-grid-start7) / var(--r-grid-span5);
	color: var(--r-body-color);
}
.rlx-page .rlx-intro__text p{ margin: 0; }

/* Leiste über dem Raster */
.rlx-page .rlx-toolbar{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: var(--r-space20-H);
	row-gap: var(--r-space20-V);
}
.rlx-page .rlx-toolbar__left{
	display: flex;
	align-items: center;
	gap: var(--r-space20-H);
}
.rlx-page .rlx-toolbar__title{ color: var(--r-brown); }
.rlx-page .rlx-toolbar__right{ justify-self: end; }

/* Schaltfläche „Zurücksetzen" – helle Variante */
.rlx-page .rlx-reset{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
	display: inline-flex;
	align-items: center;
	gap: var(--r-space8-H);
	min-height: var(--r-height44);
	padding: 0 var(--r-space20-H);
	border: 0;
	border-radius: var(--r-radius-full);
	background-color: var(--r-beige);
	color: var(--r-brown);
	font-family: inherit;
	cursor: pointer;
	transition: background-color .25s ease-in-out, color .25s ease-in-out;
}
.rlx-page .rlx-reset:hover,
.rlx-page .rlx-reset:focus-visible{
	background-color: var(--r-brown);
	color: var(--r-white);
}
.rlx-page .rlx-reset__icon{ flex: none; }

/* Sortierung */
.rlx-page .rlx-sort{ display: inline-flex; align-items: center; gap: var(--r-space8-H); }
.rlx-page .rlx-sort__select{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
	appearance: none;
	border: 0;
	background: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' fill='none' stroke='%23452C1E' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: var(--r-width12) var(--r-height12);
	padding: 0 var(--r-space20-H) 0 0;
	min-height: var(--r-height44);
	color: var(--r-brown);
	font-family: inherit;
	cursor: pointer;
}

/* Aufteilung: Filterspalte Spalte 1–4,
   Uhrenraster ab Spalte 7 bis zum Ende.
   ACHTUNG,
   ehrlich gesagt: Diese Position ist AUS DEM SCREENSHOT der Vorlage
   abgemessen (Rasterbeginn bei 29,
   2% der Fensterbreite),
   nicht aus dem
   Rolex-Stylesheet übernommen. Dort stehen die Karten auf 4/10/16 – das gilt
   aber für Kollektionsseiten OHNE Filterspalte. Kartenbreite ist in beiden
   Fällen identisch (296,
   4px),
   nur die Position unterscheidet sich. */
.rlx-page .rlx-layout{ margin-top: var(--r-space4vh-V); }
.rlx-page .rlx-filters{ grid-column: var(--r-grid-span4); }
.rlx-page .rlx-results{ grid-column: var(--r-grid-start7) / -1; }

/* --------------------------------------------------------------------------
   Filter – Kopf und Fussleiste gibt es nur in der Handy-Ansicht.
   Auf dem Rechner sind sie ausgeblendet,
   die Liste steht offen in der Spalte.
   -------------------------------------------------------------------------- */
.rlx-page .rlx-filters__kopf,
.rlx-page .rlx-filters__leiste,
.rlx-page .rlx-toolbar__oeffnen{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal; display: none; }

/* Ohne JavaScript filtert nur ein echtes Absenden – dieser Knopf ist der einzige Weg dorthin. Mit JavaScript filtert es sofort, dann stört er nur. */
.rlx-page .rlx-filters__ohne-js{ margin-top: var(--r-space20-V); }
.js-ready .rlx-page .rlx-filters__ohne-js{ display: none; }

/* --------------------------------------------------------------------------
   Filter – native <details>,
   damit sie ohne JavaScript funktionieren
   -------------------------------------------------------------------------- */
/* Vorlage: vor jeder Zeile eine graue Linie, darüber und darunter je 20px. Die letzte Gruppe schliesst mit einer Linie ab. */
.rlx-filter{ border-top: 1px solid var(--r-grey); }
.rlx-page .rlx-filter:last-of-type{ border-bottom: 1px solid var(--r-grey); }
.rlx-page .rlx-filter__summary{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r-space10-H);
	padding: var(--r-space20-V) 0;
	color: var(--r-brown);
	cursor: pointer;
	list-style: none;
}
.rlx-page .rlx-filter__summary::-webkit-details-marker{ display: none; }

.rlx-page .rlx-filter__icon{
	position: relative;
	flex: none;
	width: var(--r-width12);
	height: var(--r-height12);
}
.rlx-page .rlx-filter__icon::before,
.rlx-page .rlx-filter__icon::after{
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--r-brown);
	transform: translateY(-50%);
	transition: transform .25s ease-in-out, opacity .25s ease-in-out;
}
.rlx-page .rlx-filter__icon::after{ transform: translateY(-50%) rotate(90deg); }
.rlx-page .rlx-filter[open] .rlx-filter__icon::after{ transform: translateY(-50%) rotate(0deg); opacity: 0; }

/* fieldset gruppiert die Kontrollkästchen für Screenreader, soll aber optisch nichts tun. legend nur hörbar. */
.rlx-page .rlx-filter__gruppe{
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}
.rlx-page .rlx-filter__legende{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rlx-page .rlx-filter__list{
	margin: 0;
	padding: 0 0 var(--r-space20-V);
	list-style: none;
}
.rlx-page .rlx-filter__option{ margin: 0; }

.rlx-page .rlx-filter__input{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.rlx-page .rlx-filter__label{
	display: flex;
	align-items: center;
	gap: var(--r-space10-H);
	/* Zeilenabstand aus der Vorlage ausgemessen (Mockup 1920px, 1:1 – belegt
	   durch die Versalhöhe 17px der 24px-Überschrift). Von Zeilenanfang zu
	   Zeilenanfang: 36px bei den Kästchen-Filtern, 32px in der Kollektionsliste.
	   Vorher standen hier 44px – das war deutlich zu locker.
	   36px bleibt über der Mindestgröße für Klickziele (24px, WCAG 2.2 AA). */
	min-height: var(--rlx-filterzeile);
	padding: 0 0 0 calc(var(--r-space16-V) + var(--r-space12-H));
	position: relative;
	/* Größe aus fixed14, aber NICHT fett. In der Vorlage nachgemessen
	   (15.08.2026, Ausschnitt "Material"): die Einträge sind normal gesetzt,
	   nur die Gruppenüberschrift ist fett. Das Gewicht wird deshalb geerbt,
	   genau wie beim übrigen Fließtext der Seite. */
	font-size: var(--r-fixed14);
	line-height: var(--r-fixed14-line-height);
	color: var(--r-black);
	cursor: pointer;
}
/* Kästchen: in der Vorlage fast schwarz umrandet und leicht abgerundet. Gemessene Rahmenfarbe rgb(34, 34, 34) → --r-black. Kontrast 14, 09:1. */
.rlx-page .rlx-filter__label::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--r-space16-V);
	height: var(--r-space16-V);
	margin-top: calc(-1 * var(--r-space16-V) / 2);
	border: 1px solid var(--r-black);
	border-radius: 3px;
	background: var(--r-white);
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}
.rlx-page .rlx-filter__input:checked + .rlx-filter__label::before{
	background: var(--r-rolex-green);
	border-color: var(--r-rolex-green);
	border-radius: 3px;
}
.rlx-page .rlx-filter__input:checked + .rlx-filter__label::after{
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	width: var(--r-space8-H);
	height: var(--r-height4);
	margin-top: calc(-1 * var(--r-height4));
	border-left: 2px solid var(--r-white);
	border-bottom: 2px solid var(--r-white);
	transform: rotate(-45deg);
}
.rlx-page .rlx-filter__text{ flex: 1 1 auto; }

/* Kollektion steht in der Vorlage als reine Textliste ohne Kästchen.
   Ausgewählte Einträge werden über Farbe und Fettung kenntlich gemacht –
   Farbe allein wäre kein ausreichender Bedeutungsträger. */
.rlx-page .rlx-filter__list--schlicht .rlx-filter__label{
	padding-left: 0;
	min-height: var(--rlx-filterzeile-schlicht);
}
.rlx-page .rlx-filter__list--schlicht .rlx-filter__label::before,
.rlx-page .rlx-filter__list--schlicht .rlx-filter__input:checked + .rlx-filter__label::after{
	content: none;
}
.rlx-page .rlx-filter__list--schlicht .rlx-filter__input:checked + .rlx-filter__label{
	color: var(--r-rolex-green);
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Trefferzahlen hinter den Einträgen gibt es nicht – die Vorlage zeigt keine. */

/* --------------------------------------------------------------------------
   Uhrenraster – 3 Karten je Zeile,
   Abstand 8px (24er-Raster der Webseite)
   -------------------------------------------------------------------------- */
.rlx-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;        /* alle Karten gleich hoch, wie in der Vorlage */
	gap: var(--r-space8-V) var(--r-space8-H);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rlx-page .rlx-grid__cell{ display: flex; }
.rlx-page .rlx-grid__cell[hidden]{ display: none; }

/* Progressive Enhancement:
   Ohne JavaScript stehen alle 100 Uhren im HTML und sind sichtbar.
   Erst wenn JavaScript da ist (.js-ready),
   wird auf 18 vorgeblendet –
   und die Schaltfläche „Weitere Ergebnisse" wird überhaupt erst gezeigt,
   denn ohne JavaScript hätte sie keine Wirkung. */
.rlx-page .js-ready .rlx-grid--vorschau .rlx-grid__cell:nth-child(n + 19){ display: none; }

.rlx-page .rlx-card{
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	background-color: var(--r-beige);
	text-decoration: none;
	color: inherit;
	transition: background-color .25s ease-in-out;
}
/* Raster statt Block: nur so bekommt das hochformatige Uhrenbild eine feste Bezugshöhe. Mit display:block sprengt es das Seitenverhältnis. */
/* Die Uhrenbilder sind hochformatig (800x1180). Damit sie vollständig zu sehen
   sind,
   braucht das Rasterfeld eine BESTIMMTE Zeilenhöhe (grid-template-rows: 1fr).
   Ohne sie löst height/max-height:100% am Bild nicht auf,
   das Bild wird auf volle
   Breite skaliert und oben und unten abgeschnitten. */
.rlx-card__media{
	display: grid;
	grid-template-rows: 1fr;
	place-items: center;
	flex: none;                 /* darf nicht mitwachsen */
	/* 9/8 = 1,125. Am Mockup ausgemessen (15.08.2026): Karte 402px breit,
	   Oberkante bis Textbeginn 377px, davon 20px Polster des Textblocks
	   → Bildkasten 357px → 402/357 = 1,126.
	   Vorher stand hier 5/4 (= 1,25). Das war aus einem verkleinerten Screenshot
	   geschätzt, nicht gemessen: Das Bildfeld war rund 11% zu kurz. Weil das
	   Uhrenbild mit object-fit:contain eingepasst wird, schrumpfte die Uhr genau
	   um diesen Betrag mit – das war der Unterschied, den man im direkten
	   Vergleich mit der Vorlage sah. */
	aspect-ratio: 9 / 8;
	padding: var(--r-space20-V) var(--r-space20-H) 0;
	overflow: hidden;
}
.rlx-page .rlx-card__media img{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;        /* vollständig einpassen, nichts anschneiden */
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* Die Uhr hebt sich beim Überfahren leicht an und wächst minimal.
   Bewusst zurückhaltend: 4px und 2% – mehr wirkt bei einem Uhrenbild unruhig.
   Wird bei "Bewegung reduzieren" automatisch abgeschaltet (Regel am Dateiende). */
.rlx-page .rlx-card:hover .rlx-card__media img,
.rlx-page .rlx-card:focus-visible .rlx-card__media img{
	transform: translateY(-4px) scale(1.02);
}
.rlx-page .rlx-card__text{
	display: flex;
	flex-direction: column;
	gap: 0;
	/* 20px seitlich: erst dadurch passt der längste Modellname
	   ("Cosmograph Daytona", gemessen 250px bei Body24) einzeilig in die
	   256px breite Textspalte – wie in der Vorlage. */
	/* KEIN margin-top:auto: sonst schwankt der Abstand zwischen Bild und Text
	   je nach Zeilenzahl der Beschreibung (gemessen 0 bis 35px). Der Text
	   sitzt direkt unter dem Bild, die Resthoehe faellt nach unten. */
	padding: var(--r-space20-V) var(--r-space20-H) var(--r-space30-V);
}
.rlx-page .rlx-card__brand{ color: var(--r-brown); }
.rlx-page .rlx-card__model{ color: var(--r-brown); }
.rlx-page .rlx-card__spec,
.rlx-page .rlx-card__price{
	color: var(--rlx-dark-grey-aa);
	transition: color .25s ease-in-out;
}
/* Kein reservierter Platz mehr: Die gleiche Kartenhöhe kommt vom Raster
   (grid-auto-rows: 1fr),
   nicht von einer Mindesthöhe. Sonst entsteht bei
   einzeiliger Beschreibung ein Loch über dem Preis. */
.rlx-page .rlx-card__price{ margin-top: var(--r-space5-V); }
.rlx-page .rlx-card:hover .rlx-card__spec,
.rlx-page .rlx-card:hover .rlx-card__price,
.rlx-page .rlx-card:focus-visible .rlx-card__spec,
.rlx-page .rlx-card:focus-visible .rlx-card__price{ color: var(--r-body-color); }

.rlx-page .rlx-empty{ margin: var(--r-space40-V) 0 0; color: var(--r-brown); }

/* Schaltfläche „Weitere Ergebnisse" */
/* Ohne JavaScript stehen ohnehin alle Uhren da – dann wäre dieser Knopf wirkungslos und darf gar nicht erst erscheinen. */
.rlx-more{
	display: none;
	justify-content: center;
	margin-top: var(--r-space40-V);
}
.js-ready .rlx-page .rlx-more{ display: flex; }
/* muss die Zeile darüber schlagen, sonst bleiben die 40px Abstand stehen */
.rlx-page .js-ready .rlx-more[hidden]{ display: none; }
.rlx-page .rlx-cta{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
	display: inline-flex;
	align-items: center;
	gap: var(--r-space8-H);
	min-height: var(--r-height44);
	padding: 0 var(--r-space30-H);
	border: 0;
	border-radius: var(--r-radius-full);
	font-family: inherit;
	cursor: pointer;
	transition: background-color .25s ease-in-out;
}
.rlx-page .rlx-cta--primary{
	background-color: var(--r-rolex-green);
	color: var(--r-white);
}
.rlx-page .rlx-cta--primary:hover,
.rlx-page .rlx-cta--primary:focus-visible{ background-color: var(--r-black); }
/* Gefüllte Knöpfe brauchen einen zweifarbigen Ring. Auf der Füllung hätte Grün
   nur 1,
   38:1 (grüner Knopf) bzw. 2,
   31:1 (brauner Zurücksetzen-Knopf).
   Innen weiß gegen die Füllung: 7,
   69:1 (Grün),
   12,
   87:1 (Braun),
   16,
   10:1 (Schwarz).
   Außen grün gegen den Seitengrund: 5,
   22:1. Beide Nachbarflächen erfüllt.
   .rlx-page davor ist nötig: die Grundregel .rlx-page button:focus-visible::after
   hat ein Element mehr und würde sonst gewinnen (gemessen: Ring blieb grün). */
.rlx-page .rlx-cta--primary:focus-visible::after,
.rlx-page .rlx-reset:focus-visible::after,
.rlx-page .rlx-filters__reset:focus-visible::after{
	border-color: var(--r-white);
	box-shadow: 0 0 0 2px var(--r-green);
}
.rlx-page .rlx-cta__icon{ flex: none; }
.rlx-page .rlx-cta[hidden]{ display: none; }

/* --------------------------------------------------------------------------
   Weiter entdecken
   -------------------------------------------------------------------------- */
.rlx-page .rlx-keep{
	margin-left: -8%;
	margin-right: -8%;
	padding: var(--r-space10vh-V) 8%;
}
.rlx-page .rlx-keep__title{ margin: 0 0 var(--r-space40-V); }
.rlx-page .rlx-keep__viewport{ position: relative; }
.rlx-page .rlx-keep__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-keep__track::-webkit-scrollbar{ display: none; }
.rlx-page .rlx-keep__slide{ scroll-snap-align: start; }
.rlx-page .rlx-keep__link{ display: block; text-decoration: none; color: inherit; }
.rlx-page .rlx-keep__media{ display: block; overflow: hidden; }
.rlx-page .rlx-keep__media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease-in-out;
}
.rlx-page .rlx-keep__link:hover .rlx-keep__media img{ transform: scale(1.03); }
.rlx-page .rlx-keep__caption{
	display: block;
	margin-top: var(--r-space16-V);
	color: var(--r-brown);
}
.rlx-page .rlx-keep__link--current .rlx-keep__caption{ color: var(--r-rolex-green); }

.rlx-page .rlx-keep__nav{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
	position: absolute;
	top: calc(50% - var(--r-height44));
	width: var(--r-width44);
	height: var(--r-height44);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--r-radius-full);
	background-color: var(--r-grey30);
	color: var(--r-brown);
	cursor: pointer;
	transition: background-color .25s ease-in-out;
}
.rlx-page .rlx-keep__nav:hover{ background-color: var(--r-dark-grey30); }
.rlx-page .rlx-keep__nav[hidden]{ display: none; }
.rlx-page .rlx-keep__nav--prev{ left: calc(-1 * var(--r-width44) - (4% - var(--r-width44) / 2)); }
.rlx-page .rlx-keep__nav--next{ right: calc(-1 * var(--r-width44) - (4% - var(--r-width44) / 2)); }

/* Punkte – Strichform wie auf der Webseite */
.rlx-page .rlx-keep__dots{
	display: flex;
	justify-content: center;
	gap: var(--r-space8-H);
	margin-top: var(--r-space30-V);
}
/* Strich bleibt optisch 20px (wie im Original), die Schaltfläche ist aber 24x24px gross – WCAG 2.2 SC 2.5.8. */
.rlx-page .rlx-keep__dot{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
	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;
}
.rlx-page .rlx-keep__dot--active{
	width: var(--r-width50);
	background-size: var(--r-width50) var(--r-height4);
	background-image: linear-gradient(var(--r-green), var(--r-green));
}

/* --------------------------------------------------------------------------
   Unterstreichung beim Überfahren abwehren

   Elementor setzt ".elementor-kit-19 a:hover { text-decoration: underline }".
   Das ist wegen der Pseudoklasse EINE Stufe mehr als unsere Ruhezustandsregel
   ".rlx-page .rlx-card { text-decoration: none }" – und gewinnt deshalb, obwohl
   der Ruhezustand korrekt aussieht.

   MERKSATZ: Der Ruhezustand allein reicht bei Elementor nie. Jede Eigenschaft,
   die Elementor auch für :hover setzt, braucht bei uns eine eigene :hover-Regel.
   Gemeldet und nachgemessen am 15.08.2026.
   -------------------------------------------------------------------------- */
.rlx-page .rlx-card:hover,
.rlx-page .rlx-card:focus-visible,
.rlx-page .rlx-keep__link:hover,
.rlx-page .rlx-keep__link:focus-visible,
.rlx-page a.rlx-cta:hover,
.rlx-page a.rlx-cta:focus-visible {
	text-decoration: none;
}

/* Der Kartengrund gehört auch im Überfahren-Zustand ausdrücklich hierher.
   Bisher stand er nur im Ruhezustand – genau die Konstellation, die bei
   text-decoration zum Fehler geführt hat. Trägt jemand später im Elementor-Kit
   einen Hover-Hintergrund ein, kippte der Kartengrund sonst beim Überfahren.
   Derzeit gibt es im Kit keine solche Regel (geprüft 15.08.2026) – das hier ist
   die Absicherung, damit es auch dann so bleibt. */
.rlx-page .rlx-card:hover,
.rlx-page .rlx-card:focus-visible {
	background-color: var(--r-beige);
	border-color: transparent;
}


/* ==========================================================================
   Elementor-Kit im Überfahr- und Fokuszustand zurücknehmen

   Ausgelesen aus uploads/elementor/css/post-19.css am 15.08.2026. Das Kit setzt
   für  button:hover, button:focus, input[type=button]:hover/:focus  vier Dinge:
       color            var(--e-global-color-c2f7f86)
       background-color var(--e-global-color-text)      (dunkel!)
       border-style     none
       border-radius    0px 0px 0px 0px
   und für  a:hover:  color #E4A576, text-decoration underline.

   Regeln, die eine dieser Eigenschaften nur im RUHEZUSTAND setzen, treten gar
   nicht an – deshalb wurde aus jeder Pille beim Überfahren ein dunkles Rechteck.
   Jede Knopf-Komponente wiederholt sie hier deshalb selbst.

   ACHTUNG :focus, nicht nur :focus-visible – das Kit spricht beide an.
   ========================================================================== */

.rlx-page .rlx-cta--primary:hover,
.rlx-page .rlx-cta--primary:focus {
	background-color: var(--r-black);
	color: var(--r-white);
	border-radius: var(--r-radius-full);
	border-style: none;
}

.rlx-page .rlx-reset:hover,
.rlx-page .rlx-reset:focus {
	background-color: var(--r-brown);
	color: var(--r-white);
	border-radius: var(--r-radius-full);
	border-style: none;
}

.rlx-page .rlx-filters__reset:hover,
.rlx-page .rlx-filters__reset:focus {
	background-color: var(--r-beige);
	color: var(--r-brown);
	border-radius: var(--r-radius-full);
	border-style: none;
}

.rlx-page .rlx-filters__schliessen:hover,
.rlx-page .rlx-filters__schliessen:focus {
	background-color: transparent;
	color: var(--r-brown);
	border-radius: 0;
	border-style: none;
}

/* Der einzige Knopf mit sichtbarem Rand – border-style:none des Kits würde ihn
   verschlucken, deshalb hier die ganze border-Angabe. */
.rlx-page .rlx-toolbar__oeffnen:hover,
.rlx-page .rlx-toolbar__oeffnen:focus {
	background-color: transparent;
	color: var(--r-brown);
	border: 1px solid var(--r-brown);
	border-radius: var(--r-radius-full);
}

.rlx-page .rlx-keep__nav:hover,
.rlx-page .rlx-keep__nav:focus {
	background-color: var(--r-dark-grey30);
	color: var(--r-brown);
	border-radius: var(--r-radius-full);
	border-style: none;
}

/* Punkte: durchsichtig lassen, sonst malt das Kit ein dunkles Kästchen hinter
   den Strich. background-image fasst das Kit nicht an, der Strich bleibt also. */
.rlx-page .rlx-keep__dot:hover,
.rlx-page .rlx-keep__dot:focus {
	background-color: transparent;
	border-radius: 0;
	border-style: none;
}
/* MUSS nach der Regel darüber stehen: sonst verliert der aktive Punkt beim
   Überfahren seinen grünen Strich. */
.rlx-page .rlx-keep__dot--active:hover,
.rlx-page .rlx-keep__dot--active:focus {
	background-image: linear-gradient(var(--r-green), var(--r-green));
	background-size: var(--r-width50) var(--r-height4);
}

/* --------------------------------------------------------------------------
   Breakpoints – exakt die der Webseite
   -------------------------------------------------------------------------- */

/* Tablet und kleiner Desktop: 768–1024px */
@media (min-width: 768px) and (max-width: 1024px){
	.rlx-intro__title { grid-column: span 12; }
	.rlx-page .rlx-intro__text{ grid-column: span 12; margin-top: var(--r-space30-V); }
	.rlx-page .rlx-filters{ grid-column: 1 / span 24; }
	.rlx-page .rlx-results{ grid-column: 1 / span 24; margin-top: var(--r-space40-V); }
	.rlx-page .rlx-keep__track{ grid-auto-columns: calc((100% - 2 * var(--r-space8-H)) / 3); }
.rlx-page }

/* Mobil: bis 767px */
@media (max-width: 767px){
	.r-grid  { column-gap: var(--r-space6-H); }
	.rlx-page .r-grid24{ column-gap: var(--r-space6-H); }
	.rlx-page .rlx-intro__title{ grid-column: span 12; }
	.rlx-page .rlx-intro__text{ grid-column: span 12; margin-top: var(--r-space20-V); }
	.rlx-page .rlx-results{ grid-column: 1 / span 24; }

	.rlx-page /* ------------------------------------------------------------------
	   Filter als Vollbild-Überlagerung,
   Aufbau exakt nach Vorlage:
	   20px · Schliessen-Kreuz · 20px · Headline36 · 40px · Liste,
   unten eine weisse Leiste von 84px Höhe.
	   ------------------------------------------------------------------ */
	.rlx-toolbar__title{ display: none; }
	.rlx-page /* Ohne JavaScript kann der Knopf nichts aufklappen – dann bleibt er weg und die Filterspalte steht stattdessen ganz normal in der Seite. */
	.rlx-toolbar__oeffnen{ display: none; }
	.js-ready .rlx-page .rlx-toolbar__oeffnen{
		display: inline-flex;
		align-items: center;
		min-height: var(--r-height44);
		padding: 0 var(--r-space20-H);
		border: 1px solid var(--r-brown);
		border-radius: var(--r-radius-full);
		background: transparent;
		color: var(--r-brown);
		font-family: inherit;
		cursor: pointer;
	}

	.rlx-page /* Vollbild-Überlagerung gibt es nur mit JavaScript. Ohne JavaScript bleibt die Filterspalte an Ort und Stelle und ist bedienbar. */
	.js-ready .rlx-filters{
		position: fixed;
		inset: 0;
		z-index: 100;
		display: none;                 /* geschlossen wirklich weg – auch für Tastatur */
		grid-template-rows: auto 1fr auto;
		background-color: var(--r-light-beige);
		overflow: hidden;
	}
	.rlx-page /* muss .js-ready .rlx-filters schlagen – gleiche Anzahl Klassen reicht nicht */
	.js-ready .rlx-filters--offen{ display: grid; }

	.rlx-page /* Nur mit JavaScript: ohne JS ist das kein Dialog, dann wären ein Schließen-Kreuz und ein grüner Knopf "Ergebnisse anzeigen" tote Attrappen. */
	.js-ready .rlx-filters__kopf{
		display: block;
		position: relative;
		padding: var(--r-space20-V) 8% 0;
	}
	.rlx-page .rlx-filters__schliessen{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--r-width44);
		height: var(--r-height44);
		margin-left: auto;
		margin-right: calc(-1 * (var(--r-width44) - 16px) / 2);
		border: 0;
		background: transparent;
		color: var(--r-brown);
		cursor: pointer;
	}
	.rlx-page .rlx-filters__titel{
		margin: var(--r-space20-V) 0 var(--r-space40-V);
		color: var(--r-brown);
	}

	.rlx-page .rlx-filters__liste{
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 8%;
	}

	.js-ready .rlx-page .rlx-filters__leiste{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--r-space20-H);
		height: var(--rlx-leiste-hoehe);
		padding: 0 8%;
		background-color: var(--r-white);
	}
	.rlx-page .rlx-filters__reset{
	font-family: var(--r-body-family);
	text-transform: none;
	letter-spacing: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--r-width44);
		height: var(--r-height44);
		border: 0;
		border-radius: var(--r-radius-full);
		background-color: var(--r-beige);
		color: var(--r-brown);
		cursor: pointer;
	}
	.rlx-page /* Die Reset-Schaltfläche der oberen Leiste doppelt hier – dort ausblenden */
	.rlx-toolbar__left .rlx-reset{ display: none; }
	.rlx-page /* minmax(0,
   1fr) statt 1fr: sonst erzwingt das längste Wort ("Cosmograph",
   111px bei 18px Schrift) eine Mindestbreite und die Seite scrollt seitlich
	   (gemessen bei 320px: scrollWidth 335 statt 320). */
	.rlx-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rlx-page .rlx-card__text{ padding: var(--r-space16-V) var(--r-space20-H) var(--r-space20-V); }
	.rlx-page .rlx-toolbar{ grid-template-columns: 1fr; }
	.rlx-page .rlx-toolbar__right{ justify-self: start; }
	.rlx-page .rlx-keep__track{ grid-auto-columns: calc((100% - var(--r-space8-H)) / 2); }
	.rlx-page .rlx-keep__nav{ display: none !important; }
.rlx-page }

/* Sehr schmale Geräte: eine Karte je Zeile. Zwei Spalten würden hier entweder Wörter zerreißen oder die Seite seitlich scrollen lassen. */
@media (max-width: 359px){
	.rlx-grid { grid-template-columns: 1fr; }
.rlx-page }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
	.rlx-page *,
	.rlx-page *::before,
	.rlx-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.rlx-page /* Uhrenbewegung ganz abschalten, nicht nur beschleunigen */
	.rlx-card:hover .rlx-card__media img,
.rlx-page .rlx-card:focus-visible .rlx-card__media img,
.rlx-page .rlx-keep__link:hover .rlx-keep__media img{ transform: none !important; }
}