/*
 * Fotobox (knizz.ai) – Styles der WPBakery-Elemente
 * author: Nikolai Selders | www.th3design.de
 * Farben und Schrift kommen aus css/variables.css (--fb-*)
 */

:root{
	/* Produktbild im Hero: ragt in die Ablauf-Sektion hinein */
	--fb-box-w: min(34vw, 660px);
	--fb-box-ratio: 1.897;             /* Höhe / Breite des freigestellten Bildes */
	--fb-box-top: clamp(110px, 7.7vw, 150px);
	--fb-hero-h: clamp(560px, 48vw, 925px);
	--fb-wrap: 1400px;
	--fb-gutter: clamp(20px, 3vw, 40px);
}

.th3-fb-wrap{
	width: 100%;
	max-width: var(--fb-wrap);
	margin: 0 auto;
	padding: 0 var(--fb-gutter);
	box-sizing: border-box;
}

.main [class*="th3-fb-"] *,
.main [class*="th3-fb-"]{
	box-sizing: border-box;
}

/* Die Elemente bringen ihre eigenen Abstände mit */
.main .th3-fb-hero p,
.main .th3-fb-steps p,
.main .th3-fb-styles p,
.main .th3-fb-prices p,
.main .th3-fb-request p{
	margin: 0;
	font-family: var(--fb-font), sans-serif;
}




/* ####################### Button (Pille, ohne Rahmen, ohne Icon) ####################### */

.main a.th3-fb-btn,
.th3-fb-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .45em 1.6em;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	background-color: var(--fb-sand);
	color: var(--fb-dark);
	font-family: var(--fb-font), sans-serif;
	font-size: clamp(1.15rem, 1.45vw, 1.75rem);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s, transform .3s;
}

.main a.th3-fb-btn:hover,
.th3-fb-btn:hover{
	color: var(--fb-dark);
	background-color: var(--fb-sand-dark);
	transform: translateY(-2px);
}

.th3-fb-btn:focus-visible{
	outline: 3px solid var(--fb-teal);
	outline-offset: 3px;
}

/* Auf dunklem Grund (Hero) heller Fokusrahmen */
.th3-fb-hero .th3-fb-btn:focus-visible{ outline-color: #fff; }

.th3-fb-btn[disabled]{
	opacity: .6;
	cursor: wait;
	transform: none;
}




/* ####################### Hero ####################### */

/* WPBakery-Row schneidet sonst das überstehende Produktbild ab */
.main .vc_row:has(.th3-fb-hero){ overflow: visible; }

.th3-fb-hero{
	position: relative;
	z-index: 3;
	min-height: var(--fb-hero-h);
	background-color: var(--fb-black);
	display: flex;
	align-items: center;
}

.th3-fb-hero__inner{
	padding-top: calc(var(--headerHeight) + 20px);
	padding-bottom: 80px;
}

.th3-fb-hero__text{
	max-width: 56%;
}

/* Zeilenumbrüche aus dem Backend nur auf großen Screens */
@media (max-width: 1250px){
	.th3-fb-br{ display: none; }
}

.main .th3-fb-hero .th3-fb-eyebrow{
	color: var(--fb-muted);
	font-size: clamp(1.1rem, 1.5vw, 1.85rem);
	line-height: 1.3;
	margin-bottom: .7em;
}

.main .th3-fb-hero__title{
	font-family: var(--fb-font), sans-serif;
	color: #fff;
	font-size: clamp(2rem, 3.05vw, 3.65rem);
	line-height: 1.22;
	letter-spacing: 0;
	margin-bottom: 1.35em;
}

.th3-fb-hero__media{
	position: absolute;
	top: var(--fb-box-top);
	right: 7vw;
	width: var(--fb-box-w);
	pointer-events: none;
}

/* multiply: der helle Schattenrest unter den Füßen verschmilzt mit dem Pfirsich-Hintergrund.
   Nicht im Hero – auf Schwarz würde das Bild komplett schwarz. */
.main .th3-fb-prices__img{
	mix-blend-mode: multiply;
}

.main .th3-fb-hero__img{
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}




/* ####################### Seitenkopf (Unterseiten) ####################### */

.th3-fb-pagehead{
	position: relative;
	background-color: var(--fb-light);
	margin-bottom: clamp(40px, 5vw, 90px);
}

.th3-fb-pagehead__inner{
	/* bündig mit dem Inhaltsbereich des Themes (.row = 1300px, darunter 25px Rand) */
	max-width: calc(1300px + 2 * var(--fb-gutter));
	/* Platz für die dunkle Logo-Ecke im Header */
	padding-top: 320px;
	padding-bottom: clamp(50px, 5vw, 90px);
}

@media screen and (max-width: 860px){
	.th3-fb-pagehead__inner{ padding-top: 185px; }
}

@media screen and (max-width: 1350px){
	.th3-fb-pagehead__inner{ padding-left: 25px; padding-right: 25px; }
}

.main .th3-fb-pagehead .th3-fb-eyebrow{
	margin: 0 0 .5em;
	color: var(--fb-wine);
	font-family: var(--fb-font), sans-serif;
	font-size: clamp(1.1rem, 1.5vw, 1.85rem);
	line-height: 1.3;
}

.main .th3-fb-pagehead__title{
	margin: 0;
	font-family: var(--fb-font), sans-serif;
	color: var(--fb-teal);
	font-size: clamp(2.3rem, 3.8vw, 4.6rem);
	line-height: 1.1;
	letter-spacing: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.main .th3-fb-pagehead .th3-fb-pagehead__text{
	max-width: 760px;
	margin: .8em 0 0;
	color: var(--fb-text);
	font-family: var(--fb-font), sans-serif;
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	line-height: 1.5;
}




/* ####################### Ablauf ####################### */

.th3-fb-steps{
	position: relative;
	z-index: 2;
	/* Platz lassen, bis das Produktbild aus dem Hero endet */
	min-height: calc(var(--fb-box-w) * var(--fb-box-ratio) + var(--fb-box-top) - var(--fb-hero-h) + 40px);
	padding: clamp(60px, 10vw, 195px) 0 60px;
}

.th3-fb-steps__inner{
	display: flex;
	align-items: flex-start;
	gap: clamp(30px, 4vw, 75px);
}

/* Links etwas über den Satzspiegel hinaus, wie in der Vorlage */
@media (min-width: 1500px){
	.th3-fb-steps__inner{ margin-left: calc((100vw - var(--fb-wrap)) / 2 - 110px); max-width: none; }
}

.th3-fb-steps__media{
	flex: 0 0 auto;
	width: clamp(170px, 14.2vw, 272px);
	border: 5px solid var(--fb-dark);
	border-radius: 22px;
	overflow: hidden;
	background: var(--fb-dark);
}

.main .th3-fb-steps__img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 200 / 262;
	object-fit: cover;
}

.th3-fb-steps__content{
	padding-top: clamp(10px, 2.2vw, 40px);
}

.main ul.th3-fb-steps__list{
	list-style: none;
	margin: 0 0 clamp(30px, 3.5vw, 55px);
	padding: 0;
}

.th3-fb-steps__list li{
	display: flex;
	align-items: center;
	gap: .65em;
	font-family: var(--fb-font), sans-serif;
	color: var(--fb-text);
	font-size: clamp(1.25rem, 1.95vw, 2.35rem);
	line-height: 1.6;
}

.th3-fb-check{
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	color: var(--fb-dark);
}




/* ####################### Features ####################### */

.th3-fb-features{
	position: relative;
	z-index: 1;
	overflow: hidden;
	/* Schräge oben einplanen */
	padding-top: 40px;
	margin-top: -40px;
}

.th3-fb-features__panel{
	position: relative;
	margin-left: 52%;
	padding: clamp(40px, 4.2vw, 80px) var(--fb-gutter) clamp(60px, 5.5vw, 110px) clamp(40px, 9vw, 175px);
}

/* Die dunkle, leicht gekippte Fläche */
.th3-fb-features__panel::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 140%;
	background: var(--fb-dark);
	border-radius: 34px 0 0 0;
	transform: rotate(3deg);
	transform-origin: 0 0;
	z-index: -1;
}

.main ul.th3-fb-features__list{
	list-style: none;
	margin: 0;
	padding: 0;
}

.th3-fb-features__list li{
	font-family: var(--fb-font), sans-serif;
	color: #fff;
	font-size: clamp(1.25rem, 1.95vw, 2.35rem);
	line-height: 1.62;
}




/* ####################### Vollbild-Foto (vc_single_image mit Klasse th3-fb-fullimg) ####################### */

.th3-fb-fullimg,
.th3-fb-fullimg .vc_single_image-wrapper,
.th3-fb-fullimg figure{
	display: block;
	width: 100%;
	margin: 0;
}

.main .th3-fb-fullimg img{
	display: block;
	width: 100%;
	height: auto;
	max-height: 900px;
	object-fit: cover;
}




/* ####################### Stile ####################### */

.th3-fb-styles{
	padding: clamp(60px, 6.2vw, 120px) 0 clamp(80px, 8.4vw, 160px);
}

.th3-fb-styles > .th3-fb-wrap{
	max-width: none;
	padding: 0 clamp(16px, 3.2vw, 62px);
}

.th3-fb-styles__box{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(30px, 4vw, 70px);
	max-width: 1790px;
	margin: 0 auto;
	padding: clamp(40px, 4.3vw, 82px) clamp(24px, 5.5vw, 105px) clamp(36px, 3.4vw, 60px) clamp(24px, 4.7vw, 90px);
	border-radius: clamp(28px, 3.3vw, 64px);
	background: var(--fb-dark);
	color: #fff;
}

.main .th3-fb-styles__title{
	font-family: var(--fb-font), sans-serif;
	color: #fff;
	font-size: clamp(1.8rem, 2.85vw, 3.45rem);
	line-height: 1.2;
	margin-bottom: .45em;
}

.main .th3-fb-styles .th3-fb-styles__subtitle{
	color: var(--fb-peach);
	font-size: clamp(1.9rem, 2.95vw, 3.55rem);
	line-height: 1.2;
	margin-bottom: .6em;
}

.main .th3-fb-styles .th3-fb-styles__copy{
	color: #fff;
	font-size: clamp(1rem, 1.4vw, 1.7rem);
	line-height: 1.62;
}


/* Slider */
.th3-fb-slider{
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.main ul.th3-fb-slider__track{
	--slides: 3;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--slides) - 1) * var(--slide-gap)) / var(--slides));
	--slide-gap: clamp(16px, 2vw, 38px);
	column-gap: var(--slide-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	border-radius: 20px;
}

.th3-fb-slider__track::-webkit-scrollbar{ display: none; }

.th3-fb-slider__track:focus-visible{
	outline: 3px solid var(--fb-peach);
	outline-offset: 4px;
}

.th3-fb-slider__slide{
	scroll-snap-align: start;
	border-radius: 20px;
	overflow: hidden;
}

.main .th3-fb-slider__img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 193 / 263;
	object-fit: cover;
}

.th3-fb-slider__nav{
	display: flex;
	justify-content: flex-end;
	gap: clamp(20px, 2.1vw, 40px);
	margin-top: clamp(40px, 6vw, 115px);
	padding-right: 12px;
}

.th3-fb-slider__btn{
	display: grid;
	place-items: center;
	width: clamp(46px, 3.3vw, 63px);
	height: clamp(46px, 3.3vw, 63px);
	border: 2px solid var(--fb-peach);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .3s, color .3s, opacity .3s;
}

.th3-fb-slider__btn svg{ width: 45%; height: 45%; }
.th3-fb-slider__btn--prev svg{ transform: rotate(180deg); }

.th3-fb-slider__btn:hover:not([disabled]){
	background: var(--fb-peach);
	color: var(--fb-dark);
}

.th3-fb-slider__btn:focus-visible{
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.th3-fb-slider__btn[disabled]{
	opacity: .35;
	cursor: default;
}




/* ####################### Preise ####################### */

.th3-fb-prices{
	display: grid;
	grid-template-columns: 35.7% 1fr;
	background: var(--fb-dark);
}

.th3-fb-prices__media{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 100px 20px 0;
	background: var(--fb-peach);
	overflow: hidden;
}

.main .th3-fb-prices__img{
	display: block;
	width: min(80%, 470px);
	height: auto;
	margin-bottom: clamp(60px, 7vw, 125px);
}

.th3-fb-prices__content{
	padding-top: clamp(50px, 6vw, 110px);
}

.th3-fb-prices__head,
.th3-fb-price{
	padding-left: clamp(24px, 6.8vw, 130px);
	padding-right: clamp(24px, 6.5vw, 125px);
}

.main .th3-fb-prices__title{
	font-family: var(--fb-font), sans-serif;
	color: var(--fb-teal-light);
	font-size: clamp(2.3rem, 3.8vw, 4.6rem);
	line-height: 1.05;
}

.main .th3-fb-prices .th3-fb-prices__subtitle{
	color: var(--fb-peach);
	font-size: clamp(1.3rem, 2.1vw, 2.5rem);
	line-height: 1.2;
}

.main ul.th3-fb-prices__list{
	list-style: none;
	margin: clamp(30px, 3.2vw, 60px) 0 0;
	padding: 0;
}

.th3-fb-price{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-top: clamp(30px, 3.3vw, 62px);
	padding-bottom: clamp(30px, 3.3vw, 62px);
}

.th3-fb-price:nth-child(even){ background: var(--fb-dark-2); }

.main .th3-fb-price__name{
	font-family: var(--fb-font), sans-serif;
	color: #fff;
	font-size: clamp(1.5rem, 2.5vw, 3rem);
	line-height: 1.2;
	margin-bottom: .45em;
	letter-spacing: 0;
}

.th3-fb-price__name small{
	font-size: .5em;
	vertical-align: middle;
}

.main .th3-fb-prices .th3-fb-price__desc{
	color: #fff;
	font-size: clamp(.95rem, 1.3vw, 1.55rem);
	line-height: 1.6;
}

.th3-fb-price__amount{
	display: flex;
	align-items: center;
	gap: clamp(20px, 3.3vw, 64px);
	flex: 0 0 auto;
}

.th3-fb-price__plus{
	color: #555;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: clamp(2.5rem, 4.2vw, 5rem);
	line-height: 1;
}

.main .th3-fb-prices .th3-fb-price__amount p{
	min-width: 5.2em;
	text-align: center;
	color: #fff;
	font-size: clamp(1rem, 1.7vw, 2rem);
	line-height: 1.2;
}

.th3-fb-price__amount strong{
	display: block;
	font-weight: normal;
	font-family: var(--fb-font), sans-serif;
	font-size: 2.1em;
	line-height: 1.1;
}




/* ####################### Anfrage ####################### */

.th3-fb-request{
	background: var(--fb-light);
	padding: clamp(60px, 5.5vw, 105px) 0 clamp(60px, 4.3vw, 82px);
}

.th3-fb-request > .th3-fb-request__inner{
	display: grid;
	grid-template-columns: 1fr minmax(0, 590px);
	gap: 40px;
	max-width: 1920px;
	padding-left: 9vw;
	padding-right: 15.7vw;
}

.main .th3-fb-request__title{
	font-family: var(--fb-font), sans-serif;
	color: var(--fb-teal);
	font-size: clamp(2.3rem, 3.8vw, 4.6rem);
	line-height: 1.05;
	letter-spacing: 0;
}

.main .th3-fb-request .th3-fb-request__subtitle{
	color: var(--fb-text);
	font-size: clamp(1rem, 1.45vw, 1.75rem);
	line-height: 1.3;
	margin-top: .3em;
}

/* Formular */
.th3-fb-form__hp{
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.th3-fb-form__grid{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
}

.th3-fb-field{ position: relative; grid-column: span 12; }
.th3-fb-field--s{ grid-column: span 4; }
.th3-fb-field--l{ grid-column: span 8; }
/* Straße breit, Nummer schmal */
.th3-fb-field--l:has(+ .th3-fb-field--s){ grid-column: span 9; }
.th3-fb-field--l + .th3-fb-field--s{ grid-column: span 3; }

/* Labels nur für Screenreader, sichtbar ist der Platzhalter */
.th3-fb-field > label{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.th3-fb-field input,
.th3-fb-field select{
	display: block;
	width: 100%;
	height: clamp(54px, 4.2vw, 80px);
	margin: 0;
	padding: 0 clamp(16px, 1.5vw, 28px);
	border: 2px solid transparent;
	border-radius: 14px;
	background: var(--fb-field);
	color: #fff;
	font-family: var(--fb-font), sans-serif;
	font-size: clamp(1.15rem, 1.85vw, 2.2rem);
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .3s;
}

.th3-fb-field input::placeholder{ color: #fff; opacity: 1; }

.th3-fb-field input:focus,
.th3-fb-field select:focus{
	outline: none;
	border-color: var(--fb-sand);
}

.th3-fb-field.has-error input,
.th3-fb-field.has-error select{
	border-color: #d9534f;
}

/* Datum: leeres Feld zeigt den Platzhalter "Datum" */
.th3-fb-field input[type="date"]{
	color-scheme: dark;
}

.th3-fb-field input[type="date"]:not(:focus):invalid{
	color: transparent;
}

.th3-fb-field:has(input[type="date"]:not(:focus):invalid)::after{
	content: 'Datum';
	position: absolute;
	top: 50%;
	left: clamp(18px, 1.6vw, 30px);
	transform: translateY(-50%);
	color: #fff;
	font-family: var(--fb-font), sans-serif;
	font-size: clamp(1.15rem, 1.85vw, 2.2rem);
	pointer-events: none;
}

/* Select mit Kreis-Pfeil */
.th3-fb-field--select::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	width: 1.6em;
	height: 1.6em;
	transform: translateY(-50%);
	border: 2px solid #fff;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 10l4 4 4-4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
	font-size: clamp(1.15rem, 1.85vw, 2.2rem);
	pointer-events: none;
}

.th3-fb-field select{ padding-right: 3.5em; cursor: pointer; }
.th3-fb-field select:invalid{ color: #fff; }
.th3-fb-field select option{ color: #000; background: #fff; }

/* Checkbox Datenschutz */
.th3-fb-field--check{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 4px;
}

.th3-fb-field--check > label{
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	font-family: var(--fb-font), sans-serif;
	font-size: .95rem;
	line-height: 1.45;
	color: var(--fb-text);
}

.main .th3-fb-field--check a{
	color: var(--fb-teal);
	text-decoration: underline;
}

.th3-fb-field--check input{
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-top: 1px;
	border-radius: 5px;
	background: #fff;
	border: 2px solid var(--fb-field);
	appearance: auto;
	-webkit-appearance: checkbox;
	accent-color: var(--fb-dark);
	cursor: pointer;
}

.th3-fb-field--check.has-error > label{ color: #b52b27; }

.th3-fb-form__footer{
	margin-top: 22px;
}

.th3-fb-form__footer .th3-fb-btn{
	min-width: min(260px, 100%);
}

.main .th3-fb-form__msg{
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 1rem;
	line-height: 1.4;
}

.th3-fb-form__msg.is-success{ background: #dcefe0; color: #1d5b2b; }
.th3-fb-form__msg.is-error{ background: #f7dedd; color: #8a1f1b; }




/* ####################### Responsive ####################### */

@media screen and (max-width: 1100px){
	:root{
		--fb-box-w: min(36vw, 420px);
	}
	.th3-fb-hero__media{ right: 4vw; }
	.th3-fb-styles__box{ grid-template-columns: 1fr; }
	.th3-fb-slider__nav{ margin-top: 30px; }
	.th3-fb-request > .th3-fb-request__inner{ grid-template-columns: 1fr; padding-left: var(--fb-gutter); padding-right: var(--fb-gutter); max-width: 720px; }
	.th3-fb-price{ flex-wrap: wrap; }
}

@media screen and (max-width: 860px){
	/* Hero: Bild in den Fluss holen */
	.th3-fb-hero{ display: block; min-height: 0; }
	.th3-fb-hero__inner{ padding-top: 175px; padding-bottom: 0; }
	.th3-fb-hero__text{ max-width: none; padding-left: 0; }
	.main .th3-fb-hero__title{ margin-bottom: 1em; }
	.th3-fb-hero__media{
		position: relative;
		top: auto;
		right: auto;
		width: min(50vw, 300px);
		margin: 40px auto -100px;
	}

	.th3-fb-steps{ min-height: 0; padding-top: 160px; }
	.th3-fb-steps__inner{ flex-direction: column; margin-left: 0; }
	.th3-fb-steps__media{ width: min(60vw, 260px); }

	.th3-fb-features{ margin-top: 0; padding-top: 20px; }
	.th3-fb-features__panel{ margin-left: var(--fb-gutter); padding-left: 40px; }
	.th3-fb-features__panel::before{ transform: rotate(2deg); }

	.th3-fb-prices{ grid-template-columns: 1fr; }
	.th3-fb-prices__media{ padding-top: 50px; }
	.main .th3-fb-prices__img{ width: min(55%, 300px); margin-bottom: 40px; }
	.th3-fb-prices__content{ padding-bottom: 20px; }
}

@media screen and (max-width: 560px){
	.main ul.th3-fb-slider__track{ --slides: 1.4; }
	.th3-fb-price{ display: block; }
	.th3-fb-price__amount{ margin-top: 20px; justify-content: flex-start; }
	.main .th3-fb-prices .th3-fb-price__amount p{ text-align: left; min-width: 0; }
	.th3-fb-field--s,
	.th3-fb-field--l,
	.th3-fb-field--l:has(+ .th3-fb-field--s),
	.th3-fb-field--l + .th3-fb-field--s{ grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce){
	.main ul.th3-fb-slider__track{ scroll-behavior: auto; }
	.th3-fb-btn{ transition: none; }
}