/* ==========================================================================
   Chollenti Manager – Frontend
   Mobile first. Schriften und Grundfarben werden bewusst vom Theme geerbt,
   damit sich Galerie und Formular nahtlos einfügen.
   ========================================================================== */

.choll-galerie,
.choll-konfig {
	--choll-linie: rgba(0, 0, 0, .12);
	--choll-flaeche: rgba(0, 0, 0, .03);
	--choll-akzent: currentColor;
	--choll-gold: #eabf00; /* Akzentfarbe des Themes */
	--choll-tinte: #181818;
	--choll-radius: 2px;

	font: inherit;
	color: inherit;
}

/* --------------------------------------------------------------------------
   Farbgalerie
   Standard: ruhiges Raster. Ist der Theme-Slider da, wird daraus eine
   durchlaufende Reihe mit hervorgehobenem Bild in der Mitte.
   -------------------------------------------------------------------------- */

.choll-galerie__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.choll-galerie__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) {
	.choll-galerie__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;
	}
}

@media (min-width: 1100px) {
	.choll-galerie__grid {
		grid-template-columns: repeat(7, 1fr);
	}
}

/* Slider-Modus: das Raster wird von Slick aufgelöst.
   Skalierung 0.9 / 1.1 – dieselben Werte wie im bisherigen Bold-Slider. */

.choll-galerie.is-slider {
	position: relative;
}

.choll-galerie.is-slider .choll-galerie__grid {
	display: block;
	grid-template-columns: none;
	gap: 0;
}

.choll-galerie.is-slider .slick-slide {
	height: auto;
	transition: opacity .5s ease;
	opacity: .72;
}

/* Skaliert wird nur das Foto, nicht die ganze Kachel. Sonst wandert die
   Bildunterschrift mit nach unten aus dem Sichtfenster und wird abgeschnitten. */

.choll-galerie.is-slider .choll-galerie__bild {
	display: block;
	transform-origin: center center;
	transition: transform .5s ease;
}

/* Nur die Nachbarn werden kleiner. Dadurch gibt es keine zweite Regel, die
   das mittlere Bild überschreiben könnte. */

.choll-galerie.is-slider .slick-slide:not(.slick-center) .choll-galerie__bild {
	transform: scale(.92);
}

.choll-galerie.is-slider .slick-center {
	opacity: 1;
	position: relative;
	z-index: 2;
}

.choll-galerie.is-slider .slick-slide.slick-center .choll-galerie__bild {
	transform: scale(1.1);
}

.choll-galerie.is-slider .slick-list {
	overflow: hidden;
	/* Slick setzt centerPadding als Inline-Padding (0 60px) und würde vertikales
	   Padding überschreiben – darum oben/unten per !important, damit der
	   vergrößerte Mittel-Rahmen Platz hat und nicht abgeschnitten wird. */
	padding-top: 48px !important;
	padding-bottom: 48px !important;
	cursor: grab;
}

/* Schmale Displays: die Namen brechen früher um und das vergrößerte Bild
   braucht mehr Raum nach unten. Deshalb hier mehr Luft und weniger Zoom. */

@media (max-width: 700px) {
	/* Volle Breite: die Galerie bricht aus den Seitenrändern aus und läuft
	   von Kante zu Kante. Dadurch sind mehr Farben gleichzeitig zu sehen. */
	.choll-galerie {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	/* Am Handy trägt das mittlere Bild die Ansicht: es ist deutlich größer und
	   voll deckend, die Nachbarn treten zurück. Beim Durchwischen rückt so
	   immer die eine Farbe in den Fokus, die gerade dran ist.
	   Das Foto wächst nach oben (transform-origin unten), deshalb oben Luft. */

	.choll-galerie.is-slider .slick-list {
		padding: 52px 0 34px;
	}

	/* Bei 1.42-facher Vergrößerung wächst das Foto um gut ein Fünftel seiner
	   Höhe nach unten. Genau so viel Abstand braucht die Unterschrift –
	   sonst legt sich das Bild darüber. */
	.choll-galerie.is-slider .choll-galerie__caption {
		margin-top: 44px;
	}

	.choll-galerie.is-slider .slick-slide.slick-center .choll-galerie__bild {
		transform: scale(1.42);
	}

	.choll-galerie.is-slider .slick-slide:not(.slick-center) .choll-galerie__bild {
		transform: scale(.76);
	}

	.choll-galerie.is-slider .slick-slide {
		opacity: .45;
	}

	.choll-galerie.is-slider .slick-center {
		opacity: 1;
	}

	/* Der Name der mittleren Farbe steht im Vordergrund. */

	.choll-galerie.is-slider .choll-galerie__name {
		transition: opacity .4s ease, font-size .4s ease;
		opacity: .5;
	}

	.choll-galerie.is-slider .slick-center .choll-galerie__name {
		opacity: 1;
		font-size: 12px;
		font-weight: 500;
	}

	/* Die Lupe nur auf dem mittleren Bild – sonst wird es unruhig. */

	.choll-galerie.is-slider .choll-galerie__lupe {
		opacity: 0;
	}

	.choll-galerie.is-slider .slick-center .choll-galerie__lupe {
		opacity: 1;
	}

	.choll-galerie__caption {
		min-height: 4em;
	}

	.choll-galerie__name {
		font-size: 10px;
		letter-spacing: .08em;
	}
}

.choll-galerie.is-slider .slick-list:active {
	cursor: grabbing;
}

/* Bilder nicht vom Browser wegziehen lassen – sonst greift das Schieben nicht. */

.choll-galerie.is-slider img {
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.choll-galerie.is-slider .choll-galerie__item {
	padding: 0 6px;
}

/* Pfeile: schlanke, in die Länge gezogene Winkel in SCHWARZ.
   Kein Kreis, kein Gold – nur die Linie. Gestreckt wirkt sie ruhiger und
   teurer als ein gleichseitiger Haken. Ein zarter heller Schein hält sie auf
   dunklen Fotos lesbar. */

.choll-galerie.is-slider .slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 0;
	color: transparent;
	background: rgba(255, 255, 255, .85);
	border: 1px solid rgba(234, 191, 0, .5);
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.choll-galerie.is-slider .slick-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	border-top: 2px solid var(--choll-gold, #c9a227);
	border-right: 2px solid var(--choll-gold, #c9a227);
}

.choll-galerie.is-slider .slick-prev {
	left: 0;
}

.choll-galerie.is-slider .slick-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.choll-galerie.is-slider .slick-next {
	right: 0;
}

.choll-galerie.is-slider .slick-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.choll-galerie.is-slider .slick-arrow:hover {
	background: #fff;
	border-color: var(--choll-gold);
	box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
}

.choll-galerie.is-slider .slick-prev:hover {
	transform: translateY(-50%) translateX(-2px);
}

.choll-galerie.is-slider .slick-next:hover {
	transform: translateY(-50%) translateX(2px);
}

.choll-galerie.is-slider .slick-arrow:focus-visible {
	outline: 2px solid var(--choll-gold);
	outline-offset: 2px;
}

.choll-galerie__item {
	margin: 0;
}

.choll-galerie__figure {
	margin: 0;
	position: relative;
}

.choll-galerie__bild {
	position: relative;
	display: block;
}

.choll-galerie__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 4px solid #fff;
	box-sizing: border-box;
	border-radius: var(--choll-radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}

.choll-galerie__caption {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 16px;
	min-height: 3.4em; /* Platz für bis zu drei Zeilen – schmale Spalten brechen früher um */
}

.choll-galerie__name {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
	text-align: center;
}

/* Ausverkauft: Foto entfärbt und abgedunkelt, darüber SOLD OUT in Weiß. */

.choll-galerie__item.is-sold .choll-galerie__img {
	filter: grayscale(1) brightness(.72);
}

.choll-galerie__sold {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	font-size: clamp(12px, 1.4vw, 18px);
	font-weight: 500;
	letter-spacing: .2em;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
	pointer-events: none;
}

.choll-galerie__item.is-sold .choll-galerie__name {
	opacity: .55;
}

/* --------------------------------------------------------------------------
   Konfigurator
   -------------------------------------------------------------------------- */

.choll-konfig {
	max-width: 900px;
}

.choll-konfig__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 12px;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--choll-linie);
	font-size: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.choll-konfig__preis,
.choll-preis {
	white-space: nowrap;
}

.choll-preis--anfrage {
	font-style: italic;
}

.choll-feld {
	border: 0;
	padding: 0;
	margin: 0 0 28px;
}

.choll-feld__legend {
	display: block;
	width: 100%;
	padding: 0 0 10px;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Taschenauswahl ---------------------------------------------------------- */

.choll-modelle {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 640px) {
	.choll-modelle {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

.choll-modell__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.choll-modell__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--choll-linie);
	border-radius: var(--choll-radius);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.choll-modell__label:hover {
	background: var(--choll-flaeche);
}

.choll-modell__input:checked + .choll-modell__label {
	border-color: var(--choll-gold);
	border-width: 2px;
	padding: 13px 15px;
}

.choll-modell__input:focus-visible + .choll-modell__label {
	outline: 2px solid var(--choll-akzent);
	outline-offset: 2px;
}

.choll-modell__name {
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.choll-modell__preis {
	font-size: 13px;
	opacity: .7;
}

/* Farbauswahl: Dropdown mit kleiner Bildvorschau --------------------------- */

.choll-auswahl {
	display: flex;
	align-items: center;
	gap: 12px;
}

.choll-auswahl__vorschau {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--choll-linie);
	border-radius: var(--choll-radius);
	background-color: var(--choll-flaeche);
	background-size: cover;
	background-position: center;
}

.choll-auswahl__vorschau {
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.choll-auswahl__vorschau.is-gefuellt {
	border-color: var(--choll-gold);
	border-width: 2px;
}

.choll-auswahl__select {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 40px 0 14px;
	font: inherit;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: inherit;
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--choll-linie);
	border-radius: var(--choll-radius);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.choll-auswahl__select:focus,
.choll-auswahl__select.is-gewaehlt {
	outline: none;
	border-color: var(--choll-gold);
}

/* Eingabefelder ----------------------------------------------------------- */

.choll-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 20px;
}

@media (min-width: 640px) {
	.choll-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.choll-input {
	margin: 0 0 18px;
}

.choll-input label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.choll-optional {
	text-transform: none;
	letter-spacing: 0;
	opacity: .6;
}

.choll-input input,
.choll-input textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: inherit;
	background: transparent;
	border: 1px solid var(--choll-linie);
	border-radius: var(--choll-radius);
	box-sizing: border-box;
}

.choll-input input:focus,
.choll-input textarea:focus {
	outline: none;
	border-color: var(--choll-gold);
}

.choll-check {
	display: flex;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
}

.choll-check input {
	margin-top: 3px;
	flex: 0 0 auto;
}

/* Absenden ---------------------------------------------------------------- */

.choll-submit {
	margin: 8px 0 12px;
}

.choll-btn {
	display: inline-block;
	padding: 15px 40px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--choll-radius);
	cursor: pointer;
	transition: opacity .18s ease, transform .18s ease;
}

.choll-btn:hover {
	opacity: .7;
	transform: translateY(-1px);
}

.choll-hinweis {
	font-size: 12px;
	line-height: 1.6;
	opacity: .65;
	margin: 0;
}

/* Meldungen --------------------------------------------------------------- */

.choll-meldung {
	padding: 16px 18px;
	margin: 0 0 24px;
	border-left: 3px solid currentColor;
	background: var(--choll-flaeche);
	font-size: 14px;
	line-height: 1.5;
}

.choll-meldung--ok {
	color: #1d6b46;
}

.choll-meldung--fehler {
	color: #9b2c2c;
}

/* Spamfalle – für Menschen unsichtbar ------------------------------------- */

.choll-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Panels: ohne JavaScript bleiben alle sichtbar (Formular bleibt nutzbar) -- */

.choll-js .choll-panel[hidden] {
	display: none;
}

/* Schrittüberschrift im Konfigurator --------------------------------------- */

.choll-schritt {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--choll-linie);
}

/* --------------------------------------------------------------------------
   Farb-Dropdown mit Bildern
   Das echte Auswahlfeld bleibt im Formular und trägt den Wert. Sichtbar ist
   es nur, wenn kein JavaScript läuft – dann ist es ein ganz normales Feld.
   -------------------------------------------------------------------------- */

.choll-auswahl.is-erweitert .choll-auswahl__select,
.choll-auswahl.is-erweitert .choll-auswahl__vorschau {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.choll-drop {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.choll-drop__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 58px;
	padding: 6px 40px 6px 6px;
	font: inherit;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	color: inherit;
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--choll-linie);
	border-radius: var(--choll-radius);
	cursor: pointer;
	transition: border-color .18s ease;
}

.choll-drop__toggle:hover {
	border-color: var(--choll-gold);
}

.choll-drop.is-gewaehlt .choll-drop__toggle {
	border-color: var(--choll-gold);
	border-width: 2px;
	padding: 5px 39px 5px 5px;
}

.choll-drop__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 1px;
	background-color: var(--choll-flaeche);
	background-size: cover;
	background-position: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.choll-drop__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Die Liste ------------------------------------------------------------- */

.choll-drop__liste {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 320px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: #fff;
	border: 1px solid var(--choll-linie);
	border-radius: var(--choll-radius);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
	display: none;
}

.choll-drop.is-offen .choll-drop__liste {
	display: block;
}

.choll-drop__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 8px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: var(--choll-radius);
	transition: background-color .15s ease;
}

/* --------------------------------------------------------------------------
   Auswahlrad – nur am Handy (Klasse wird vom Skript gesetzt).
   Flach, ohne Kippen: gedrehte Bilder verdecken einander sonst gegenseitig.
   Man dreht mit dem Finger, die Mitte ist die Auswahl.
   -------------------------------------------------------------------------- */

.choll-drop.is-rad .choll-drop__liste {
	height: 260px;
	max-height: none;
	padding: 104px 6px;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.choll-drop.is-rad .choll-drop__liste::-webkit-scrollbar {
	display: none;
}

.choll-drop.is-rad .choll-drop__option {
	height: 52px;
	padding: 0 10px;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	opacity: .45;
	transition: opacity .2s ease, background-color .2s ease;
}

.choll-drop.is-rad .choll-drop__option.is-fokus {
	opacity: 1;
}

/* Die Mittelzone: hier passiert die Auswahl. */

.choll-drop.is-rad.is-offen::after {
	content: "";
	position: absolute;
	top: calc(100% + 4px + 104px);
	left: 8px;
	right: 8px;
	height: 52px;
	z-index: 21;
	pointer-events: none;
	border-top: 1px solid rgba(234, 191, 0, .55);
	border-bottom: 1px solid rgba(234, 191, 0, .55);
	background: rgba(234, 191, 0, .07);
}

/* Am Handy wächst das Bild nur leicht und bleibt in seiner Zeile –
   es soll die Nachbarn nicht überdecken. */

.choll-drop.is-rad .choll-drop__bild {
	width: 42px;
	height: 42px;
	transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}

.choll-drop.is-rad .choll-drop__option.is-fokus .choll-drop__bild {
	transform: scale(1.12);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

.choll-drop.is-rad .choll-drop__option.is-fokus .choll-drop__name {
	transform: none;
	font-weight: 500;
}

.choll-drop__bild {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 1px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
	transition: transform .22s ease, box-shadow .22s ease;
	transform-origin: left center;
}

/* Drüberfahren: das Bild wird deutlich größer, der Name rückt zur Seite,
   damit die Schrift nicht unter dem Foto verschwindet. */

.choll-drop__name {
	transition: transform .22s ease;
}

.choll-drop__option:hover .choll-drop__bild,
.choll-drop__option:focus-visible .choll-drop__bild,
.choll-drop__option.is-fokus .choll-drop__bild {
	transform: scale(1.75);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
	position: relative;
	z-index: 2;
}

.choll-drop__option:hover .choll-drop__name,
.choll-drop__option:focus-visible .choll-drop__name,
.choll-drop__option.is-fokus .choll-drop__name {
	transform: translateX(38px);
}

/* Fehlende Pflichtauswahl ------------------------------------------------- */

.choll-auswahl.is-fehler .choll-drop__toggle {
	border-color: #9b2c2c;
}

/* --------------------------------------------------------------------------
   Der Absende-Knopf: Aufforderung, Preis und Absenden in einem Element.
   Beim Drüberfahren schiebt sich „Anfrage senden“ von unten herein.
   -------------------------------------------------------------------------- */

.choll-cta {
	display: inline-flex;
	align-items: stretch;
	margin: 10px 0 18px;
	padding: 0;
	font: inherit;
	color: #fff;
	background: none;
	border: 0;
	border-radius: var(--choll-radius);
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(234, 191, 0, .3);
	transition: box-shadow .25s ease, transform .25s ease;
}

.choll-cta:hover,
.choll-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(234, 191, 0, .45);
}

.choll-cta:focus-visible {
	outline: 2px solid var(--ink, #181818);
	outline-offset: 3px;
}

.choll-cta:active {
	transform: translateY(0);
}

/* Die beiden Zeilen liegen übereinander; sichtbar ist immer nur eine. */

.choll-cta__texte {
	position: relative;
	display: block;
	height: 52px;
	padding: 0 26px;
	overflow: hidden;
	background: var(--choll-gold);
}

.choll-cta__zeile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .38s cubic-bezier(.16, .84, .3, 1);
}

.choll-cta__zeile--zwei {
	position: absolute;
	inset: 0;
	transform: translateY(100%);
}

.choll-cta:hover .choll-cta__zeile,
.choll-cta:focus-visible .choll-cta__zeile {
	transform: translateY(-100%);
}

.choll-cta:hover .choll-cta__zeile--zwei,
.choll-cta:focus-visible .choll-cta__zeile--zwei {
	transform: translateY(0);
}

.choll-cta__preis {
	display: flex;
	align-items: center;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .06em;
	white-space: nowrap;
	background: #b8940b;
}

.choll-cta__preis:empty {
	display: none;
}

@media (max-width: 520px) {
	.choll-cta {
		display: flex;
		width: 100%;
	}

	.choll-cta__texte {
		flex: 1 1 auto;
	}

	.choll-cta__zeile {
		font-size: 12px;
		letter-spacing: .08em;
	}
}


/* --------------------------------------------------------------------------
   Kettenfarbe: Knöpfe mit Foto
   -------------------------------------------------------------------------- */

.choll-kette {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.choll-kette__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.choll-kette__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--choll-linie);
	border-radius: var(--choll-radius);
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease;
}

.choll-kette__label:hover {
	transform: translateY(-2px);
}

.choll-kette__input:checked + .choll-kette__label {
	border-color: var(--choll-gold);
	border-width: 2px;
	padding: 9px;
}

.choll-kette__input:focus-visible + .choll-kette__label {
	outline: 2px solid var(--choll-gold);
	outline-offset: 2px;
}

.choll-kette__bild {
	display: block;
	width: 108px;
	height: 108px;
	border-radius: 1px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}

.choll-kette__name {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Ohne Foto bleibt ein schlichter Textknopf. */

.choll-kette__item:not(.has-bild) .choll-kette__label {
	padding: 12px 24px;
}

/* --------------------------------------------------------------------------
   Bild neben dem Formular: wächst sanft, sobald es die Bildschirmmitte erreicht
   -------------------------------------------------------------------------- */

/* !important ist hier nötig: das Theme setzt auf Bildern in seinen
   Bild-Elementen transform: scale3d(1,1,1) – mit höherer Spezifität als jede
   sinnvolle eigene Regel. Ohne Vorrang wird der Effekt still überschrieben. */

img.choll-zoombild {
	transition: transform 1.1s cubic-bezier(.16, .84, .3, 1) !important;
	transform: scale(1) !important;
	will-change: transform;
}

img.choll-zoombild.is-zentriert {
	transform: scale(1.07) !important;
}

@media (prefers-reduced-motion: reduce) {
	img.choll-zoombild,
	img.choll-zoombild.is-zentriert {
		transition: none !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.choll-galerie__item {
	cursor: zoom-in;
}

.choll-galerie__lupe {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	opacity: 0;
	transition: opacity .2s ease;
}

.choll-galerie__lupe::before,
.choll-galerie__lupe::after {
	content: "";
	position: absolute;
	background: var(--ink, #181818);
}

.choll-galerie__lupe::before {
	top: 12px;
	left: 7px;
	width: 12px;
	height: 2px;
}

.choll-galerie__lupe::after {
	top: 7px;
	left: 12px;
	width: 2px;
	height: 12px;
}

.choll-galerie__item:hover .choll-galerie__lupe,
.choll-galerie .slick-center .choll-galerie__lupe {
	opacity: 1;
}

.choll-lightbox {
	/* Die Lightbox wird per JS an <body> gehängt – also außerhalb von
	   .choll-galerie/.choll-konfig, wo die Farb-Tokens definiert sind.
	   Ohne diese Zeile ist --choll-gold hier unbekannt, die border-Spitzen
	   der Pfeile fallen als ungültige Deklaration weg und die Kreise wirken
	   leer. Darum das Gold-Token hier erneut. */
	--choll-gold: #eabf00;

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 5vh 24px;
	background: rgba(10, 10, 10, .94);
	backdrop-filter: blur(6px);
	touch-action: pan-y pinch-zoom;
}

.choll-lightbox.is-offen {
	display: flex;
}

.choll-lightbox__inhalt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	max-width: 100%;
}

.choll-lightbox__bild {
	display: block;
	max-width: min(520px, 76vw);
	max-height: 74vh;
	width: auto;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
	transition: opacity .12s ease;
	-webkit-user-drag: none;
	user-select: none;
}

.choll-lightbox__bild.is-wechsel {
	opacity: 0;
}

.choll-lightbox__unten {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-top: 20px;
}

.choll-lightbox__name {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
}

.choll-lightbox__zaehler {
	font-size: 11px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .5);
}

/* Schließen: Kreis oben rechts, Kreuz aus zwei Strichen. */

.choll-lightbox__zu {
	position: absolute;
	top: 22px;
	right: 24px;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.choll-lightbox__zu::before,
.choll-lightbox__zu::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 1.5px;
	background: #fff;
}

.choll-lightbox__zu::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.choll-lightbox__zu::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.choll-lightbox__zu:hover {
	background: rgba(234, 191, 0, .9);
	transform: rotate(90deg);
}

/* Pfeile: goldene Kreise, immer erreichbar. */

.choll-lightbox__pfeil {
	position: relative;
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(234, 191, 0, .5);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.choll-lightbox__pfeil::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	border-top: 2px solid var(--choll-gold, #eabf00);
	border-right: 2px solid var(--choll-gold, #eabf00);
}

.choll-lightbox__pfeil--zurueck::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.choll-lightbox__pfeil--vor::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.choll-lightbox__pfeil:hover {
	background: rgba(234, 191, 0, .18);
	border-color: var(--choll-gold, #eabf00);
	transform: scale(1.08);
}

@media (max-width: 760px) {
	.choll-lightbox {
		padding: 4vh 10px;
		gap: 2px;
	}

	.choll-lightbox__pfeil {
		width: 44px;
		height: 44px;
	}

	.choll-lightbox__bild {
		max-width: 74vw;
		max-height: 66vh;
	}

	.choll-lightbox__zu {
		top: 14px;
		right: 14px;
		width: 42px;
		height: 42px;
	}
}

/* --------------------------------------------------------------------------
   Hinweis am Handy: dass es mehr Farben gibt
   -------------------------------------------------------------------------- */

.choll-galerie__wisch {
	display: none;
	margin: 10px 0 0;
	padding: 0 18px;
	font-size: 10px;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	opacity: .6;
}

@media (max-width: 700px) {
	.choll-galerie__wisch {
		display: block;
	}

	/* Sanfte Verlaufskanten: nur auf der Bilderreihe, nicht auf dem Text darunter. */
	.choll-galerie.is-slider .slick-list {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
	}

	.choll-galerie__lupe {
		opacity: 1;
	}

	.choll-lightbox__pfeil {
		width: 42px;
	}
}

/* Lightbox: Ziehen ------------------------------------------------------- */

.choll-lightbox__inhalt {
	cursor: grab;
}

.choll-lightbox__inhalt:active {
	cursor: grabbing;
}

/* Turnstile ---------------------------------------------------------------- */

.choll-turnstile {
	margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
   Touch-Geräte (Handy/Tablet): kein Hover vorhanden. Damit der Knopf nicht
   leer wirkt, steht „Anfrage senden" dort dauerhaft – ohne Hover-Animation.
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.choll-cta__zeile        { transform: translateY(-100%); }
	.choll-cta__zeile--zwei  { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Rückmeldung nach dem Absenden: liegt über dem Kontaktblock, in den Farben
   der Marke – Papierton, Goldkante, ruhige Schrift. Nach einigen Sekunden
   blendet sie von selbst aus. Bei „Bewegung reduzieren" bleibt sie stehen.
   -------------------------------------------------------------------------- */
.choll-feld--daten { position: relative; }

.choll-meldung--schwebt {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 6;
	width: min(440px, calc(100% - 24px));
	margin: 0;
	padding: 20px 24px;
	border-radius: 14px;
	border: 1px solid var(--choll-linie, rgba(35, 32, 25, .14));
	border-left: 3px solid var(--choll-gold, #eabf00);
	background: #fffdf8;
	color: var(--choll-tinte, #181818);
	font-size: 15px;
	line-height: 1.65;
	text-align: center;
	box-shadow: 0 18px 44px rgba(35, 32, 25, .20);
	transform: translate(-50%, -46%);
	opacity: 0;
	animation: choll-meldung 7s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* Ein feiner Goldstrich über dem Text – dieselbe Sprache wie im Kopfbereich. */
.choll-meldung--schwebt::before {
	content: "";
	display: block;
	width: 38px;
	height: 2px;
	margin: 0 auto 12px;
	background: var(--choll-gold, #eabf00);
	opacity: .9;
}

.choll-meldung--schwebt.choll-meldung--fehler {
	border-left-color: #b3402f;
}

.choll-meldung--schwebt.choll-meldung--fehler::before {
	background: #b3402f;
}

@keyframes choll-meldung {
	0%   { opacity: 0; transform: translate(-50%, -46%); }
	6%   { opacity: 1; transform: translate(-50%, -50%); }
	78%  { opacity: 1; transform: translate(-50%, -50%); }
	100% { opacity: 0; transform: translate(-50%, -54%); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.choll-meldung--schwebt {
		position: static;
		transform: none;
		opacity: 1;
		animation: none;
		width: auto;
		margin-bottom: 18px;
	}
}

/* --------------------------------------------------------------------------
   Farbgalerie mit wenigen Farben: Statt Karussell eine mittige Reihe. Slick
   würde bei weniger Bildern als Anzeigeplätzen nach links ausreißen.
   -------------------------------------------------------------------------- */
.choll-galerie.is-reihe .choll-galerie__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 26px;
	padding: 10px 0;
}

.choll-galerie.is-reihe .choll-galerie__item {
	width: clamp(140px, 16vw, 190px);
	flex: 0 0 auto;
}

.choll-galerie.is-reihe .choll-galerie__img {
	transform: none;
}

/* Ohne Karussell braucht es weder Pfeile noch Punkte. */
.choll-galerie.is-reihe .slick-arrow,
.choll-galerie.is-reihe .slick-dots {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Größenauswahl im Bestellformular (z. B. Malta Mini und Midi).
   -------------------------------------------------------------------------- */
.choll-groessen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

.choll-groesse { position: relative; }

.choll-groesse__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.choll-groesse__label {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--choll-linie);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.choll-groesse__label:hover { transform: translateY(-2px); }

.choll-groesse__input:checked + .choll-groesse__label {
	border-color: var(--choll-gold);
	background: rgba(234, 191, 0, .08);
	box-shadow: 0 0 0 2px rgba(234, 191, 0, .22);
}

.choll-groesse__input:focus-visible + .choll-groesse__label {
	outline: 2px solid var(--choll-gold);
	outline-offset: 3px;
}

.choll-groesse__name { display: block; font-weight: 500; }

.choll-groesse__masse {
	display: block;
	margin-top: 3px;
	font-size: .86em;
	opacity: .72;
}

.choll-groesse__preis {
	display: block;
	margin-top: 6px;
	font-size: .92em;
	color: var(--choll-gold);
}

.choll-konfig__masse {
	display: block;
	margin-top: 2px;
	font-size: .88em;
	opacity: .72;
}