.hover-visible {
	display: none;
}


/* =========================
   KONTAKTFORMULAR – CLEAN
   ========================= */

/* ---- Layout / Reset (ohne Checkbox/Radio) ---- */
:where(input:not([type="checkbox"], [type="radio"]), textarea, select, button) {
	border: none;
	outline: none;
	box-shadow: none;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 1rem;
	color: #333;
	padding-left: 1em;
}

textarea {
	height: 100px;
}

/* Autofill neutralisieren */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
	box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: #000 !important;
	transition: background-color 5000s ease-in-out 0s;
}

/* Browser-UI entfernen: Zahl / Suche / IE-Select */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

select::-ms-expand {
	display: none;
}

/* ---- Standard-Input (Text, Mail, etc.) ---- */
.form-control {
	width: 100%;
	padding: 10px 20px;
	border: 1px solid var(--clr-orange);
	border-radius: 18px;
	background: #ffffff;
	color: #333333;
	transition: border-color .3s ease, box-shadow .3s ease;
	position: relative;
	z-index: 1;
	font-family: var(--thm-b-font);
}

.form-control:focus {
	border: 2px solid var(--clr-orange);
}

/* ---- Floating Labels ---- */
.form-group {
	position: relative;
	margin-bottom: 20px;
}

.form-label {
	position: absolute;
	top: 14px;
	left: 12px;
	color: #333333;
	background: #ffffff;
	padding: 0 5px;
	font-size: 16px;
	line-height: normal;
	pointer-events: none;
	transition: all .3s ease;
	z-index: 2;
}

.form-group.active .form-label {
	top: -8px;
	font-size: 12px;
	color: var(--clr-orange);
}

/* ---- Buttons ---- */
button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	background: #fff;
	border: .2em solid var(--clr-orange);
	border-radius: 8px;
	padding: 5px 10px;
	transition: background-color .3s, color .3s;
	font-size: var(--step-0);
	font-weight: 600;
	color: var(--clr-orange);
	text-decoration: none;
	font-family: var(--thm-text);
}

button:hover {
	background: var(--clr-orange);
	color: #fff;
}

/* ---- Helper ---- */
.clearfix {
	position: relative;
	margin-bottom: 2em;
}

.clearfix p {
	font-size: 1rem;
	color: #666;
	float: right;
}

/* ---- Selects ---- */
select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	border: 1px solid var(--clr-orange);
	border-radius: 18px;
	padding: 1.14rem 2rem 0.6rem 1em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath fill='%23f97316' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: .65rem;
	color: #333;
	cursor: pointer;
}

/* =========================
   OPTION-GRUPPEN (Radio/Checkbox)
   ========================= */

/* Rahmen + Padding für beide Gruppenarten */
.form-group.is-options {
	position: relative;
	padding: .9rem .9rem .6rem;
	border: 1px solid var(--clr-orange);
	border-radius: 18px;
	background: #fff;
}

/* Label IMMER hochgezogen – unabhängig von Verschachtelung */
.form-group.is-options .form-label,
.form-group .form-label[for="kontaktformularBasic-634-singleselect-1"]{
	position: absolute;
	top: -0.6rem;
	left: .5rem;
	font-size: .75rem;
	color: var(--clr-orange);
	background: #fff;
	padding: 0 .3rem;
	z-index: 2;
}

/* Abstand zwischen Label und Liste */
.form-group.is-options .inputs-list {
	margin-top: .2rem;
}

/* Falls TYPO3 in der Liste nochmals .form-group erzeugt → neutralisieren */
.form-group.is-options .inputs-list .form-group {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Zeilenlayout der Optionen */
.inputs-list .form-check {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: .4rem 0;
}

/* =========================
   RADIOS – custom (Kreis + Punkt)
   ========================= */

.inputs-list input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	inline-size: 1.2rem;
	block-size: 1.2rem;
	border: 2px solid var(--clr-orange);
	border-radius: 50%;
	background: #fff;
	margin: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.inputs-list input[type="radio"]::before {
	content: "";
	inline-size: .6rem;
	block-size: .6rem;
	border-radius: 50%;
	background: var(--clr-orange);
	transform: scale(0);
	transition: transform .2s ease-in-out;
}

.inputs-list input[type="radio"]:checked::before {
	transform: scale(1);
}

.inputs-list input[type="radio"]:focus {
	box-shadow: 0 0 0 3px rgba(249, 115, 22, .25);
}

.inputs-list .form-check-label span {
	font-size: 1rem;
	color: #333;
	cursor: pointer;
}

/* =========================
   CHECKBOXEN – custom (für später)
   ========================= */

.checkbox-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: .6rem 0;
}

/* echtes Input verstecken, aber bedienbar */
.checkbox-row input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	inline-size: 0;
	block-size: 0;
	margin: 0;
}

/* visuelle Box */
.checkbox-row .checkmark {
	inline-size: 1.2rem;
	block-size: 1.2rem;
	border: 2px solid var(--clr-orange);
	border-radius: .35rem;
	background: #fff;
	display: inline-grid;
	place-items: center;
	transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.checkbox-row .checkmark::after {
	content: "";
	inline-size: .7rem;
	block-size: .7rem;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath fill='%23000' d='M5 7.3L1.8 4.1 0 5.9 5 10l9-9L12.2 0z'/%3E%3C/svg%3E") center/contain no-repeat;
	background: #fff;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .15s, transform .15s;
}

.checkbox-row input[type="checkbox"]:checked+.checkmark {
	background: var(--clr-orange);
	border-color: var(--clr-orange);
}

.checkbox-row input[type="checkbox"]:checked+.checkmark::after {
	opacity: 1;
	transform: scale(1);
}

.checkbox-row input[type="checkbox"]:focus+.checkmark {
	box-shadow: 0 0 0 3px rgba(249, 115, 22, .25);
}

.checkbox-row label {
	font-size: 1rem;
	color: #333;
	cursor: pointer;
}

/* ---- Focus-Ring global neutralisieren ---- */
:where(input, textarea, select, button):focus,
:where(input, textarea, select, button):focus-visible {
	outline: none;
}

.form-control:focus,
select.form-control:focus {
	outline: none;
	box-shadow: none;
	border: 2px solid var(--clr-orange);
}

.inputs-list input[type="radio"]:focus,
.checkbox-row input[type="checkbox"]:focus {
	outline: none;
}






/* COOKIE BANNER */

/* Klickbar & ganz oben */
#cookie-consent {
	position: relative;
	z-index: 99999;
}

#cookie-consent,
#cookie-consent * {
	pointer-events: auto;
}

/* Glücksbeute-Theme */
#cookie-consent {
	--gb-text: var(--thm-text, #74727a);
	--gb-accent: var(--clr-orange, #ffaa81);
	--gb-ghost: color-mix(in srgb, var(--clr-orange) 20%, transparent);
	--gb-radius: 10px;
	--gb-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

#cookie-consent .consent-modal,
#cookie-consent .cookie-wrapper {
	background: #fff;
	color: var(--gb-text);
	border-radius: var(--gb-radius);
	box-shadow: var(--gb-shadow);
	border: 1px solid color-mix(in srgb, var(--gb-accent) 20%, #eee);
}

/* Buttons (Klassen können je nach Template abweichen) */
#cookie-consent .btn-primary,
#cookie-consent .accept,
#cookie-consent button[type="submit"] {
	position: relative;
	background: var(--gb-accent);
	border: 2px solid var(--gb-accent);
	color: #fff;
	border-radius: 6px;
	font-family: var(--thm-b-font, inherit);
	text-transform: uppercase;
	letter-spacing: .08em;
	transition: all .25s ease;
}

#cookie-consent .btn-primary:hover,
#cookie-consent .accept:hover,
#cookie-consent button[type="submit"]:hover {
	background: #fff;
	color: var(--gb-accent);
}

#cookie-consent .btn-secondary,
#cookie-consent .deny,
#cookie-consent .show-details {
	background: #fff;
	color: var(--gb-accent);
	border: 2px solid var(--gb-accent);
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: .08em;
	transition: all .25s ease;
}

#cookie-consent .btn-secondary:hover,
#cookie-consent .deny:hover,
#cookie-consent .show-details:hover {
	background: var(--gb-ghost);
}

/* Footer-Links */
#cookie-consent .footer-links a {
	color: var(--gb-accent);
	text-decoration: underline;
}

#cookie-consent .footer-links a:hover {
	opacity: .9;
}






/* 1) Box soll mit Inhalt mitwachsen */
.services-section-three .service-block-two .inner-box {
	height: auto !important;
	min-height: 0 !important;
	display: flex;
	/* optional, für sauberes Layout */
	flex-direction: column;
	/* optional */
}

/* 2) Kurve/Overlay verursacht oft die „zu kurze“ Box – erstmal ausschalten */
.services-section-three .service-block-two .bottom-curve {
	display: none !important;
}

/* 3) Bilder responsiv halten */
.services-section-three .service-block-two .icon-box img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 4) (Optional) keine „Lücken“ im Fließtext durch Block-Justify */
.services-section-three .service-block-two .text {
	text-align: left;
	/* statt justify */
	/* overflow-wrap: anywhere;  // bei sehr langen Wörtern hilfreich */
}



/* NUMMERIERUNG */

/* === Counter-Logik wie bei .process-one === */
.frame--steps {
	counter-reset: processCount;
}

/* TYPO3 setzt "frame-" Präfix -> beide Varianten abdecken */
.frame--steps .frame-frame--process-badge,
.frame--steps .frame--process-badge {
	counter-increment: processCount;
}

/* === An TYPO3 Bild-Wrapper andocken & Überstand erlauben === */
.frame--steps .frame-frame--process-badge figure,
.frame--steps .frame--process-badge figure,
.frame--steps .frame-frame--process-badge .ce-gallery,
.frame--steps .frame--process-badge .ce-gallery,
.frame--steps .frame-frame--process-badge .image,
.frame--steps .frame--process-badge .image {
	position: relative;
	display: inline-block;
	margin-bottom: 50px;
	/* mobile wie im Original */
	border-radius: 8px;
	background: var(--thm-black, #000);
	overflow: visible !important;
	z-index: 1;
}

@media (min-width: 992px) {

	.frame--steps .frame-frame--process-badge figure,
	.frame--steps .frame--process-badge figure,
	.frame--steps .frame-frame--process-badge .ce-gallery,
	.frame--steps .frame--process-badge .ce-gallery,
	.frame--steps .frame-frame--process-badge .image,
	.frame--steps .frame--process-badge .image {
		margin-bottom: 0;
	}
}

/* Bild selbst wie im Original */
.frame--steps .frame-frame--process-badge img,
.frame--steps .frame--process-badge img {
	max-width: 100%;
	border-radius: 8px;
	position: relative;
	/* optional – nur wenn du den entsättigten Look willst: */
	mix-blend-mode: luminosity;
}

/* === Größen/Farben aus deinem CSS als Variablen === */
:root {
	--proc-disk-m: 200px;
	/* mobile große Scheibe */
	--proc-disk-d: 387px;
	/* desktop große Scheibe */
	--proc-badge-m: 60px;
	/* mobile Nummer-Badge */
	--proc-badge-d: 128px;
	/* desktop Nummer-Badge */
	--proc-bg: #f4f5f8;
	/* große helle Scheibe */
	--proc-badge: var(--clr-orange, #FFB33E);
	/* Badgefarbe */
	--proc-text: var(--thm-black, #111);
	/* Text in Badge */
}

/* === Große Scheibe (entspricht .process-one__image::before) === */
.frame--steps .frame-frame--process-badge figure::before,
.frame--steps .frame--process-badge figure::before,
.frame--steps .frame-frame--process-badge .ce-gallery::before,
.frame--steps .frame--process-badge .ce-gallery::before,
.frame--steps .frame-frame--process-badge .image::before,
.frame--steps .frame--process-badge .image::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: var(--proc-bg);
	width: var(--proc-disk-m);
	height: var(--proc-disk-m);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (min-width: 992px) {

	.frame--steps .frame-frame--process-badge figure::before,
	.frame--steps .frame--process-badge figure::before,
	.frame--steps .frame-frame--process-badge .ce-gallery::before,
	.frame--steps .frame--process-badge .ce-gallery::before,
	.frame--steps .frame-frame--process-badge .image::before,
	.frame--steps .frame--process-badge .image::before {
		width: var(--proc-disk-d);
		height: var(--proc-disk-d);
		top: 50%;
	}
}

/* === Nummer-Badge (entspricht .process-one__image::after) === */
.frame--steps .frame-frame--process-badge figure::after,
.frame--steps .frame--process-badge figure::after,
.frame--steps .frame-frame--process-badge .ce-gallery::after,
.frame--steps .frame--process-badge .ce-gallery::after,
.frame--steps .frame-frame--process-badge .image::after,
.frame--steps .frame--process-badge .image::after {
	content: counters(processCount, "", decimal-leading-zero);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 50%;
	background: var(--proc-badge);
	color: var(--proc-text);
	font-family: var(--thm-font, inherit);
	font-weight: 700;
	width: var(--proc-badge-m);
	height: var(--proc-badge-m);
	top: 20%;
	left: 20%;
	transform: translate(-50%, -50%);
	font-size: 30px;
	padding-top: 5px;
	/* wie im Original */
}

@media (min-width: 992px) {

	.frame--steps .frame-frame--process-badge figure::after,
	.frame--steps .frame--process-badge figure::after,
	.frame--steps .frame-frame--process-badge .ce-gallery::after,
	.frame--steps .frame--process-badge .ce-gallery::after,
	.frame--steps .frame-frame--process-badge .image::after,
	.frame--steps .frame--process-badge .image::after {
		width: var(--proc-badge-d);
		height: var(--proc-badge-d);
		top: 50%;
		font-size: 50px;
		padding-top: 12px;
	}
}

/* === Desktop-Ausrichtung wie bei .row:nth-child(even) … ===
   Wir orientieren uns an deiner Spaltenstruktur:
   .left-content  -> Kreise nach links raus
   .right-content -> Kreise nach rechts raus
*/
@media (min-width: 992px) {

	/* links */
	.frame--steps .left-content .frame-frame--process-badge figure::before,
	.frame--steps .left-content .frame--process-badge figure::before,
	.frame--steps .left-content .frame-frame--process-badge .ce-gallery::before,
	.frame--steps .left-content .frame--process-badge .ce-gallery::before,
	.frame--steps .left-content .frame-frame--process-badge .image::before,
	.frame--steps .left-content .frame--process-badge .image::before {
		left: 0;
		transform: translate(-50%, -50%);
	}

	.frame--steps .left-content .frame-frame--process-badge figure::after,
	.frame--steps .left-content .frame--process-badge figure::after,
	.frame--steps .left-content .frame-frame--process-badge .ce-gallery::after,
	.frame--steps .left-content .frame--process-badge .ce-gallery::after,
	.frame--steps .left-content .frame-frame--process-badge .image::after,
	.frame--steps .left-content .frame--process-badge .image::after {
		left: 0;
		transform: translate(-50%, -50%);
	}

	/* rechts */
	.frame--steps .right-content .frame-frame--process-badge figure::before,
	.frame--steps .right-content .frame--process-badge figure::before,
	.frame--steps .right-content .frame-frame--process-badge .ce-gallery::before,
	.frame--steps .right-content .frame--process-badge .ce-gallery::before,
	.frame--steps .right-content .frame-frame--process-badge .image::before,
	.frame--steps .right-content .frame--process-badge .image::before {
		right: 0;
		left: auto;
		transform: translate(50%, -50%);
	}

	.frame--steps .right-content .frame-frame--process-badge figure::after,
	.frame--steps .right-content .frame--process-badge figure::after,
	.frame--steps .right-content .frame-frame--process-badge .ce-gallery::after,
	.frame--steps .right-content .frame--process-badge .ce-gallery::after,
	.frame--steps .right-content .frame-frame--process-badge .image::after {
		right: 0;
		left: auto;
		transform: translate(50%, -50%);
	}
}


/* SHOP */
.cart_form {
	display: none;
}


.tx-cart-products ul {
	padding-left: 20px;
}




/* --- Product Detail Layout (beuteseite) --- */

.cartproducts-detail .product-title {
	margin-bottom: 1rem;
}

.cartproducts-detail .product-hero {
	display: grid;
	grid-template-columns: 30% 70%;
	gap: 2rem;
	align-items: start;
	margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
	.cartproducts-detail .product-hero__media {
		max-width: 520px;
		/* nach Geschmack 420–560px */
	}
}

@media (max-width: 900px) {
	.cartproducts-detail .product-hero {
		grid-template-columns: 50% 50%;
	}
}

@media (max-width: 450px) {
	.cartproducts-detail .product-hero {
		grid-template-columns: 1fr;
		gap: initial;
	}
}

.cartproducts-detail .product-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

.cartproducts-detail .media-thumbs {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cartproducts-detail .media-thumbs img {
	display: block;
	max-width: 120px;
	height: auto;
}

.cartproducts-detail .product-hero__teaser .teaser {
	/* Optional etwas typografische Absetzung */
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Tags */
.cartproducts-detail .product-tags {
	margin: 1rem 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cartproducts-detail .product-tag {
	background: #f2f3f5;
	border-radius: 3px;
	padding: 0.25rem 0.5rem;
}

.cartproducts-detail .related-products {
	margin-top: 2rem;
}

/* überschreibt .tx-cart-products img aus der Extension */
.tx-cart-products .cartproducts-card__image img {
	width: 100%;
	height: auto;
	max-width: none;
	border-radius: 8px;
}

.tx-cart-products .tx-cart-products {
	margin-bottom: 20px;
}

.tx-cart-products .tx-cart-products .price {
	font-size: 60px;
	color: #000000;
	font-family: var(--thm-font);
}

.tx-cart-products .cartproducts-card {
	margin-bottom: 2rem;
}

.tx-cart-products .cartproducts-card__title {
	color: #000000;
}

/* Schlichter Zurück-Link, orange + unterstrichen */
.tx-cart-products .cartproducts-back {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	color: #000000;
	text-decoration: underline;
	font-weight: normal;
	display: inline-block;
	font-size: 18px;
}

.tx-cart-products .cartproducts-back:hover,
.tx-cart-products .cartproducts-back:focus {
	color: var(--clr-orange);
}