/*
 * STB Facelift (Spur Design, D2) · STB Design 2, 06.10.2026
 * Bauvorlage: docs/design/D-konzept-facelift.html (Fassung 3, Tor D erteilt).
 * Wird nur geladen, wenn der Look „neu“ ist (stb-facelift.php). Alle Regeln zusätzlich unter .stb-facelift.
 * Motive als SVG-Masken aus ./motive/ (gleiche Herkunft, eine Datei je Motiv, Farbe kommt aus background-color).
 * Nummern D1–D10 = Elemente aus dem Konzept.
 */

/* ---------- D7 · Montserrat 800 lokal (Google Fonts, OFL; Daniel 06.10.2026 freigegeben, keine Auslieferung über Google) ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/montserrat-v31-latin-ext-800.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/montserrat-v31-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- D7 · Farben und Maße ---------- */
.stb-facelift {
	--stb-lagune: #1fa3a0;
	--stb-lagune-dunkel: #137f7c;   /* Lagune als Textfarbe auf Hell (Kontrast) */
	--stb-lagune-hell: #7fd8d3;     /* Lagune auf dunklen Flächen */
	--stb-petrol: #0a4b64;
	--stb-tiefsee: #062f40;
	--stb-gold: #e09900;
	--stb-gold-h: #c98700;
	--stb-r: 14px;
	--stb-kurve: cubic-bezier(.2, .7, .2, 1);
	--stb-wellen-h: clamp(52px, 6vw, 96px);
	--stb-kamm-h: 48px;
	--stb-kueste-h: clamp(72px, 8vw, 110px);
	--stb-luft: clamp(80px, 7.5vw, 120px); /* Innenabstand oben und unten je Stockwerk (Daniel 06.10.: mehr Luft, einheitlich) */
}

/* ---------- D7 · Typografie ---------- */
.stb-facelift main h1,
.stb-facelift main h2 {
	font-weight: 800; /* Datei liegt in fonts/ */
	letter-spacing: -.015em;
}
.stb-facelift .stb-hero h1 em,
.stb-facelift main h2 em {
	font-style: normal;
	color: var(--stb-gold);
}

/* ---------- D6 · Kicker (Versalzeile mit Segelzeichen) ---------- */
.stb-facelift .stb-hero .textWrap > p.small:first-child,
.stb-facelift .stb-bildcta .textWrap > p.small:first-child,
.stb-facelift .stb-kicker,
.stb-facelift p.stb-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: Montserrat, sans-serif;
	font-size: 13px !important;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--stb-lagune-dunkel);
	margin-bottom: 14px;
}
.stb-facelift .stb-hero .textWrap > p.small:first-child strong,
.stb-facelift .stb-bildcta .textWrap > p.small:first-child strong,
.stb-facelift .stb-kicker strong { font-weight: 700; }
.stb-facelift .stb-hero .textWrap > p.small:first-child::before,
.stb-facelift .stb-bildcta .textWrap > p.small:first-child::before,
.stb-facelift .stb-kicker::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url(motive/segel-zeichen.svg) center / contain no-repeat;
	mask: url(motive/segel-zeichen.svg) center / contain no-repeat;
}
.stb-facelift .stb-hero .textWrap > p.small:first-child,
.stb-facelift .stb-bildcta .textWrap > p.small:first-child,
.stb-facelift .stb-dunkel .stb-kicker,
.stb-facelift .stb-bildcta .stb-kicker {
	color: var(--stb-lagune-hell);
}

/* ---------- D8 · Knöpfe: Pille mit Pfeil ---------- */
.stb-facelift .ctaBtn {
	display: inline-flex !important; /* Block 3 und Child-CSS setzen display:block und Radius 10 */
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px !important;
	padding: 14px 24px;
	font-weight: 700;
	transition: background-color .2s, transform .2s var(--stb-kurve), box-shadow .2s;
}
.stb-facelift .ctaBtn::after {
	content: "\2192";
	display: inline-block;
	transition: transform .2s var(--stb-kurve);
}
.stb-facelift .ctaBtn:hover::after { transform: translateX(4px); }
.stb-facelift .ctaBtn.ctaBtnStandard:hover { box-shadow: 0 10px 24px -12px rgba(6, 47, 64, .55); }
/* Zweitknopf in Lagune (Gold bleibt den Hauptknöpfen) */
.stb-facelift .ctaBtn.ctaBtnInverse {
	background-color: var(--stb-lagune);
	border-color: var(--stb-lagune);
	color: #fff;
}
.stb-facelift .ctaBtn.ctaBtnInverse:hover { background-color: var(--stb-lagune-dunkel); }

/* ---------- D8 · Karten: Radius 14, Foto 3:2, Zoom und Hebeschatten ---------- */
.stb-facelift .block-6a-teaser-einfach .cardWrap,
.stb-facelift .block-6-teaser .cardWrap {
	border-radius: var(--stb-r);
	transition: transform .3s var(--stb-kurve), box-shadow .3s var(--stb-kurve);
}
.stb-facelift .block-6a-teaser-einfach .cardWrap:hover,
.stb-facelift .block-6-teaser .cardWrap:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 40px -24px rgba(6, 47, 64, .45);
}
.stb-facelift .block-6a-teaser-einfach .cardImgWrap,
.stb-facelift .block-6-teaser .cardImgWrap { overflow: hidden; }
.stb-facelift .block-6a-teaser-einfach .cardImgWrap img,
.stb-facelift .block-6-teaser .cardImgWrap img {
	aspect-ratio: 3 / 2;
	height: auto;
	width: 100%;
	object-fit: cover;
	transition: transform .6s var(--stb-kurve);
}
.stb-facelift .block-6a-teaser-einfach .cardWrap:hover .cardImgWrap img,
.stb-facelift .block-6-teaser .cardWrap:hover .cardImgWrap img { transform: scale(1.06); }

/* ---------- D1/D2 · Trenner (Fläche in der Farbe des Stockwerks, ragt nach oben ins vorige) ---------- */
.stb-facelift section.stb-hat-trenner { position: relative; }
.stb-facelift .stb-trenner {
	position: absolute;
	left: 0;
	right: 0;
	top: 1px;
	transform: translateY(-100%);
	z-index: 3;
	pointer-events: none;
	background-color: var(--block-bg-color, var(--bodyBackgroundColor, #fff));
}
.stb-facelift .stb-trenner--wellen {
	height: var(--stb-wellen-h);
	-webkit-mask: url(motive/wellen-ohne.svg) 50% 100% / max(100%, 1200px) 100% no-repeat;
	mask: url(motive/wellen-ohne.svg) 50% 100% / max(100%, 1200px) 100% no-repeat;
}
.stb-facelift .stb-trenner--kamm {
	height: var(--stb-kamm-h);
	-webkit-mask: url(motive/segelkamm.svg) 0 100% / 160px 100% repeat-x;
	mask: url(motive/segelkamm.svg) 0 100% / 160px 100% repeat-x;
}
.stb-facelift .stb-trenner--kueste {
	height: var(--stb-kueste-h);
	-webkit-mask: url(motive/kueste-mole.svg) 50% 100% / auto 100% no-repeat, url(motive/boden.svg) 50% 100% / 100% 100% no-repeat;
	mask: url(motive/kueste-mole.svg) 50% 100% / auto 100% no-repeat, url(motive/boden.svg) 50% 100% / 100% 100% no-repeat;
}
/* ---------- Rhythmus: gleicher Innenabstand oben und unten je Stockwerk ----------
   Parent: 60 oben / 90 unten. Bewusst verbundene Stockwerke (Inline-Padding 0–2rem) bleiben verbunden;
   Inline 4rem/5rem gilt als „normales“ Stockwerk und bekommt die Luft. */
.stb-facelift main > section:not([style*="padding-top"]),
.stb-facelift main > section[style*="padding-top:4rem"],
.stb-facelift main > section[style*="padding-top:5rem"] { padding-top: var(--stb-luft) !important; }
.stb-facelift main > section:not([style*="padding-bottom"]),
.stb-facelift main > section[style*="padding-bottom:4rem"],
.stb-facelift main > section[style*="padding-bottom:5rem"] { padding-bottom: var(--stb-luft) !important; }
.stb-facelift main > section.stb-hero { padding-top: 60px !important; }
/* Verbundene Stockwerke („aus einem Guss“, Daniel 06.10.): Hat eine Seite der Fuge 0rem/2rem, übernimmt die andere Seite
   denselben Wert, statt die volle Luft zu bekommen (z. B. „Das sagen unsere Gäste“ + Bewertungs-Slider). */
.stb-facelift main > section[style*="padding-bottom:0rem"] + section:not([style*="padding-top"]) { padding-top: 0 !important; }
.stb-facelift main > section[style*="padding-bottom:2rem"] + section:not([style*="padding-top"]) { padding-top: 2rem !important; }
.stb-facelift main > section:not([style*="padding-bottom"]):has(+ section[style*="padding-top:0rem"]) { padding-bottom: 0 !important; }
.stb-facelift main > section:not([style*="padding-bottom"]):has(+ section[style*="padding-top:2rem"]) { padding-bottom: 2rem !important; }

/* Luft-Zugabe: Das Stockwerk über einem Trenner bekommt zusätzlich die Höhe der Form */
.stb-facelift main > section:has(+ section.stb-trenner-wellen) { padding-bottom: calc(var(--stb-wellen-h) * .6 + var(--stb-luft)) !important; }
.stb-facelift main > section.stb-hero:has(+ section.stb-trenner-wellen) { padding-bottom: calc(var(--stb-wellen-h) * .7) !important; }
.stb-facelift main > section:has(+ section.stb-trenner-kamm) { padding-bottom: calc(var(--stb-kamm-h) + var(--stb-luft)) !important; }
.stb-facelift main > section:has(+ section.stb-trenner-kueste) { padding-bottom: calc(var(--stb-kueste-h) + var(--stb-luft)) !important; }
.stb-facelift main > section.stb-hat-trenner:not(.stb-trenner-wellen) { padding-top: calc(var(--stb-luft) * .9) !important; }

/* ---------- D4 · Wasserzeichen Portolan-Linien (nur dunkle Flächen) ---------- */
.stb-facelift .stb-wasser {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	background-color: rgba(255, 255, 255, .11);
	-webkit-mask: url(motive/portolan.svg) right -240px top -120px / 1100px auto no-repeat;
	mask: url(motive/portolan.svg) right -240px top -120px / 1100px auto no-repeat;
}
.stb-facelift section.stb-dunkel,
.stb-facelift section.stb-bildcta { position: relative; }
.stb-facelift section.stb-dunkel > .container,
.stb-facelift section.stb-bildcta > .container { position: relative; z-index: 4; }

/* ---------- D1/D10 · Hero: groß, Lagunen-Schimmer, Wasserzeichen ---------- */
.stb-facelift .stb-hero .stb-wasser {
	z-index: 3; /* über dem Bild (bgImgWrap z 2), unter dem Text */
	background-color: rgba(255, 255, 255, .08);
	-webkit-mask-position: right -300px bottom -200px;
	mask-position: right -300px bottom -200px;
	-webkit-mask-size: 1300px auto;
	mask-size: 1300px auto;
}
.stb-facelift .stb-hero > .container { position: relative; z-index: 4; }
.stb-facelift .stb-hero .bgImgWrap .overlayWrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 47, 64, 0) 45%, rgba(6, 47, 64, .55) 100%), linear-gradient(90deg, rgba(31, 163, 160, .28), transparent 55%);
	pointer-events: none;
}
.stb-facelift .stb-hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }

/* ---------- D5 · Bild-CTA mit Kompassrose ---------- */
.stb-facelift .stb-bildcta .stb-wasser {
	z-index: 3; /* über bgImgWrap (z 2) */
	background-color: rgba(255, 255, 255, .13);
	-webkit-mask-position: left -320px center;
	mask-position: left -320px center;
}
.stb-facelift .stb-rose {
	position: absolute;
	z-index: 3; /* über bgImgWrap (z 2), unter dem Text */
	top: 0;
	bottom: 0;
	right: -60px;
	width: clamp(220px, 22vw, 320px);
	background: url(motive/kompassrose.svg) right center / contain no-repeat;
	pointer-events: none;
}
.stb-facelift section.stb-bildcta {
	overflow: hidden;
	min-height: 0 !important;
	padding-top: calc(var(--stb-luft) * 1.15) !important;
	padding-bottom: calc(var(--stb-luft) * 1.15) !important; /* oben = unten (Daniel 06.10.) */
}
@media (min-width: 768px) {
	.stb-facelift .stb-bildcta > .container .textWrap { max-width: calc(100vw - 2 * (clamp(220px, 22vw, 320px) - 60px) - 64px); margin-left: auto; margin-right: auto; }
}

/* ---------- D3 · Footer: Tiefsee, Küste je Revier, Wasserzeichen ---------- */
.stb-facelift footer.content-info {
	position: relative;
	background-color: var(--stb-tiefsee);
	isolation: isolate;
}
.stb-facelift footer.content-info::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 1px;
	transform: translateY(-100%);
	height: var(--stb-kueste-h);
	background-color: var(--stb-tiefsee);
	pointer-events: none;
	-webkit-mask: var(--stb-kueste, url(motive/kueste-mole.svg)) 50% 100% / auto 100% no-repeat, url(motive/boden.svg) 50% 100% / 100% 100% no-repeat;
	mask: var(--stb-kueste, url(motive/kueste-mole.svg)) 50% 100% / auto 100% no-repeat, url(motive/boden.svg) 50% 100% / 100% 100% no-repeat;
}
.stb-facelift footer.content-info::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: rgba(255, 255, 255, .09);
	-webkit-mask: url(motive/portolan.svg) right -380px top -240px / 1200px auto no-repeat;
	mask: url(motive/portolan.svg) right -380px top -240px / 1200px auto no-repeat;
}
.stb-facelift.stb-revier-kroatien { --stb-kueste: url(motive/kueste-kroatien.svg); }
.stb-facelift.stb-revier-griechenland { --stb-kueste: url(motive/kueste-griechenland.svg); }
.stb-facelift.stb-revier-mallorca { --stb-kueste: url(motive/kueste-mallorca.svg); }
.stb-facelift.stb-revier-sardinien { --stb-kueste: url(motive/kueste-sardinien.svg); }
.stb-facelift footer.content-info h4 { color: var(--stb-lagune-hell); letter-spacing: .06em; }
/* Luft über der Küste: letztes Stockwerk vor dem Footer */
.stb-facelift main > section:last-child { padding-bottom: calc(var(--stb-kueste-h) + var(--stb-luft)) !important; }

/* ---------- D10 · Bildkacheln (Text im Bild) für Karten-Blöcke, Klasse stb-bildkacheln ---------- */
.stb-facelift .stb-bildkacheln .cardWrap {
	position: relative;
	min-height: 340px;
	background: var(--stb-tiefsee) !important;
	color: #fff;
}
.stb-facelift .stb-bildkacheln .cardWrap > div { height: 100%; }
.stb-facelift .stb-bildkacheln .cardImgWrap {
	position: absolute;
	inset: 0;
	height: 100%;
}
.stb-facelift .stb-bildkacheln .cardImgWrap img {
	height: 100% !important;
	aspect-ratio: auto;
}
.stb-facelift .stb-bildkacheln .cardImgWrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 47, 64, 0) 15%, rgba(6, 47, 64, .55) 45%, rgba(6, 47, 64, .94) 100%);
}
.stb-facelift .stb-bildkacheln .textWrap { text-shadow: 0 1px 12px rgba(6, 47, 64, .6); }
.stb-facelift .stb-bildkacheln .textWrap h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; }
/* Linkzeile („Privates Segeln in …“) liegt außerhalb der textWrap und würde unter dem Bild verschwinden */
.stb-facelift .stb-bildkacheln .cardWrap > .ctaWrap {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: left !important;
	margin: 0;
	padding: 0 20px 18px;
}
.stb-facelift .stb-bildkacheln .cardWrap:has(> .ctaWrap) .textWrap { padding-bottom: 76px !important; }
.stb-facelift .stb-bildkacheln .cardWrap > .ctaWrap span { color: var(--stb-lagune-hell) !important; }
.stb-facelift .stb-bildkacheln .textWrap {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 340px;
	background: transparent !important;
	color: #fff;
}
.stb-facelift .stb-bildkacheln .textWrap h3,
.stb-facelift .stb-bildkacheln .textWrap p,
.stb-facelift .stb-bildkacheln .textWrap a { color: #fff; }

/* ---------- D10 · Bildband (Bild volle Breite), Klasse stb-bildband ---------- */
.stb-facelift .stb-bildband { padding-left: 0 !important; padding-right: 0 !important; }
.stb-facelift .stb-bildband img {
	width: 100%;
	height: clamp(320px, 62vh, 620px);
	object-fit: cover;
	border-radius: 0 !important;
}

/* ---------- D9 · Strichzeichnungen ohne Rundung und Schatten, Klasse stb-strich ---------- */
.stb-facelift .stb-strich img,
.stb-facelift img.stb-strich {
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* ---------- Absicherung: Parent setzt in manchen Blöcken alle direkten Kinder auf position:relative (gemessen Block 3) ---------- */
.stb-facelift section > .stb-trenner,
.stb-facelift section > .stb-wasser,
.stb-facelift section > .stb-rose { position: absolute !important; }
.stb-facelift section > .stb-trenner { z-index: 3 !important; }
.stb-facelift section.stb-dunkel > .stb-wasser { z-index: 1 !important; }
.stb-facelift section.stb-hero > .stb-wasser,
.stb-facelift section.stb-bildcta > .stb-wasser,
.stb-facelift section.stb-bildcta > .stb-rose { z-index: 3 !important; }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
	.stb-facelift .stb-rose { display: none; }
	.stb-facelift .stb-wasser { -webkit-mask-size: 900px auto; mask-size: 900px auto; }
	.stb-facelift .stb-trenner--wellen { height: 52px; }
	.stb-facelift { --stb-wellen-h: 52px; --stb-kueste-h: 76px; --stb-kamm-h: 36px; }
	.stb-facelift .stb-trenner--kamm { -webkit-mask-size: 120px 100%; mask-size: 120px 100%; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
	.stb-facelift .ctaBtn,
	.stb-facelift .ctaBtn::after,
	.stb-facelift .cardWrap,
	.stb-facelift .cardImgWrap img { transition: none !important; }
	.stb-facelift .cardWrap:hover { transform: none !important; }
	.stb-facelift .cardWrap:hover .cardImgWrap img { transform: none !important; }
}

/* ---------- Bilder: überall gleiche Rundung wie Karten (Daniel 06.10.: eckige Bilder wirken fremd) ---------- */
.stb-facelift main .imgWrap img,
.stb-facelift main .block-4-bild img,
.stb-facelift .stb-routen .stb-routen-karte,
.stb-facelift .stb-routen img { border-radius: var(--stb-r); }

/* ---------- Skipper- und andere Slider: Originalformat der Fotos, Gesichter nicht beschneiden ---------- */
.stb-facelift .slideWrap .cardImgWrap img {
	aspect-ratio: 4 / 5 !important; /* Porträt: Gesicht und Oberkörper, nicht beschnitten und nicht überlang */
	height: auto !important;
	width: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.stb-facelift .block-3a-text-einfach .textWrap img { border-radius: var(--stb-r); }

/* ---------- Routen-Baustein: Titel unter den Reitern als richtige Zwischenüberschrift ---------- */
.stb-facelift .stb-routen h2 { margin-bottom: .6em; }
.stb-facelift .stb-routen h3 {
	font-size: clamp(22px, 2vw, 28px) !important;
	font-weight: 800;
	color: var(--stb-petrol);
	margin: 28px 0 10px;
	letter-spacing: -.01em;
}

/* Kicker im Bild-CTA mittig wie der übrige CTA-Text */
.stb-facelift .stb-bildcta .textWrap > p.small:first-child { display: flex; justify-content: center; }

/* ---------- Marina-Vorlage (single-marina.php, STB Design 3, 06.10.2026) ----------
   Kopf im Markup des Yacht-Kopfs; darunter der Abschnitt „Die Marina“ mit Wellen-Trenner. */
.stb-facelift .stbMarinaHero { padding-bottom: calc(6rem + var(--stb-wellen-h) * .6); }
.stb-facelift .stbMarinaHero .heroImgWrap { border-radius: var(--stb-r); overflow: hidden; }
.stb-facelift .stbMarinaHero .stbMarina__kicker { margin-bottom: 1.2rem; }

/* ---------- E5-Fixes (STB Design 3, Prüfer A/B 06.10.2026) ---------- */
/* WS-Form-Absendeknopf wie die Hauptknöpfe: Pille in Theme-Orange (Variablen des Themes, folgen Farbwechseln) */
.stb-facelift .wsf-form .wsf-button-primary {
	border-radius: 999px !important;
	background-color: var(--ctaBtnStandardBg) !important;
	border-color: var(--ctaBtnStandardBg) !important;
	color: var(--ctaBtnStandardTextColor) !important;
	font-weight: 700;
}
.stb-facelift .wsf-form .wsf-button-primary:hover,
.stb-facelift .wsf-form .wsf-button-primary:focus {
	background-color: var(--ctaBtnStandardBgHover) !important;
	border-color: var(--ctaBtnStandardBgHover) !important;
}
/* Rundung überall 14 px: Parent-Bildstile (15 px) und Block 6 (8 px) stechen sonst die Variable */
.stb-facelift main .imgWrap img,
.stb-facelift .block-8a-karten-einfach .cardWrap,
.stb-facelift .stb-bildkacheln .cardWrap { border-radius: var(--stb-r) !important; }
.stb-facelift .stb-bildkacheln .cardWrap { overflow: hidden; }
/* WPTE-Seiten (Törnseite, Privatprodukt, Törnfinder): WPTE-Blau wird Petrol */
.stb-facelift {
	--primary-color: #0a4b64;
	--primary-color-rgb: 10, 75, 100;
	--wpte-primary-color: #0a4b64;
	--wpte-primary-color-rgb: 10, 75, 100;
}
/* Hauptknöpfe der WPTE-Seiten in Theme-Orange (Buchen, Anfragen, Absenden), Zweitelemente Petrol */
.stb-facelift .wpte-bf-btn,
.stb-facelift .wte-process-btn-next,
.stb-facelift .wpte-button.enquiry-submit,
.stb-facelift a.stb-anfrage-btn {
	background: var(--ctaBtnStandardBg) !important;
	border-color: var(--ctaBtnStandardBg) !important;
	color: var(--ctaBtnStandardTextColor) !important;
	border-radius: 999px !important;
}
.stb-facelift .wpte-bf-btn:hover,
.stb-facelift .wte-process-btn-next:hover,
.stb-facelift .wpte-button.enquiry-submit:hover,
.stb-facelift a.stb-anfrage-btn:hover { background: var(--ctaBtnStandardBgHover) !important; border-color: var(--ctaBtnStandardBgHover) !important; }
.stb-facelift .stb-privat-badge,
.stb-facelift .stb-reiseart-umschalter button[aria-pressed="true"] { background: var(--stb-petrol); border-color: var(--stb-petrol); }
.stb-facelift a.stb-mitsegeln-btn { color: var(--stb-petrol); border-color: var(--stb-petrol); }
.stb-facelift #stb-privat-anfrage input[type="radio"].wsf-field:checked { border-color: var(--stb-petrol) !important; background: var(--stb-petrol) !important; }
.stb-facelift #stb-privat-anfrage input[type="radio"].wsf-field:checked + label { color: var(--stb-petrol); }

/* ---------- E5-Fixes Runde 2 (STB Design 3, Prüfer T-D3/T-D4, 06.10.2026) ---------- */
/* Blocker: Küste über dem Footer verdeckte Inhalt, wo der letzte Inhalt kein main > section ist (Törnseite, Törnfinder, Ratgeber) */
.stb-facelift main:not(:has(> section:last-child)) { padding-bottom: calc(var(--stb-kueste-h) + 2rem) !important; }
/* H2 einheitlich Petrol (Daniel 06.10.2026): nur helle Stockwerke ohne eigene Überschriftenfarbe */
.stb-facelift main > section:not([style*="--block-headline-color"]):not(.stb-dunkel):not(.stb-bildcta):not(.stb-hero):not(.block-11-ansprechpartner):not(.block-3-text):not(.block-1-hero-full-screen) { --block-headline-color: var(--stb-petrol); }
.stb-facelift .unterkunftWeitere h2, .stb-facelift .unterkunftInfo h2 { color: var(--stb-petrol); }
/* H2-Größe: Yacht „Ausstattung an Bord“ und Bild-CTA wie alle H2 */
.stb-facelift .unterkunftWeitere h2,
.stb-facelift .stb-bildcta h2 { font-size: 4.6rem; }
@media (max-width: 767px) { .stb-facelift .unterkunftWeitere h2, .stb-facelift .stb-bildcta h2 { font-size: 32px; } } /* Theme setzt H2 mobil fest 32 px (3.2rem waeren bei 8 px Grundschrift nur 25,6 px; korrigiert STB Design 6) */
/* Rundung 14 px: Ratgeber- und Törnseiten-Textbilder, Yacht-/Marina-Kopf */
.stb-facelift main .textWrap p img,
.stb-facelift main .col-md-6 p img,
.stb-facelift .unterkunftHero .heroImgWrap { border-radius: var(--stb-r) !important; overflow: hidden; }
.stb-facelift .unterkunftHero .heroImgWrap img { border-radius: 0 !important; }
.stb-facelift .unterkunftHero .smallImgWrap { border-radius: 0 !important; }
/* Bildkacheln: Titel oben auf hellem Himmel brauchen Grund (Kontrast 2,1:1 gemessen) */
.stb-facelift .stb-bildkacheln .cardImgWrap::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 55%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(6, 47, 64, .72) 0%, rgba(6, 47, 64, .35) 55%, rgba(6, 47, 64, 0) 100%);
}
.stb-facelift .stb-bildkacheln .cardWrap h3,
.stb-facelift .stb-bildkacheln .cardWrap h4,
.stb-facelift .stb-bildkacheln .cardWrap .h4 { text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
/* Hero-Kicker direkt auf dem Foto: weiß mit Schatten statt Lagune-Hell (1,8–2,3:1 gemessen) */
.stb-facelift .stb-hero .stb-kicker,
.stb-facelift .stb-hero .textWrap > p.small:first-child { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
/* Häkchen-Listen (z. B. Yacht-Ausstattung) in Petrol statt Fast-Schwarz */
.stb-facelift { --listChecklistColor: var(--stb-petrol); }
/* Zweitknopf Lagune: dunkleres Türkis für Kontrast mit weißer Schrift (3,09 → 4,82:1) */
.stb-facelift .ctaBtn.ctaBtnInverse { background-color: var(--stb-lagune-dunkel); border-color: var(--stb-lagune-dunkel); }
.stb-facelift .ctaBtn.ctaBtnInverse:hover { background-color: #0f6664; border-color: #0f6664; }
/* H2 Petrol, Teil 2: Blöcke mit eigener Variable --block-h2 (Block 6, 9, 10, 11, 15) und Inhalte außerhalb der Blöcke */
.stb-facelift main > section:not([style*="--block-h2"]):not(.stb-dunkel):not(.stb-bildcta):not(.stb-hero):not(.block-3-text):not(.block-1-hero-full-screen) { --block-h2: var(--stb-petrol); }
.stb-facelift .stb-routen__kopf h2,
.stb-facelift .wissenContent h2,
.stb-facelift .wte-fsd__header h2,
.stb-facelift .wte-related-trips-wrapper h2,
.stb-facelift .wte-trip-facts h2,
.stb-facelift .post-data h2 { color: var(--stb-petrol); }
/* Dunkle Stockwerke ohne eigene H2-Farbe: weiß (Hub „Ablauf deines Segelurlaubs“ stand Petrol auf Petrol) */
.stb-facelift main > section.stb-dunkel:not([style*="--block-h2"]) { --block-h2: #fff; }

/* ---------- Design 6 · Törnseiten im neuen Look (Nacharbeiten N240–N243, STB Design 6, 06.10.2026) ---------- */
/* N240 · Abschnitts-H2 der WPTE-Seiten (Törnseite, Privatprodukt) wie auf allen Southvision-Seiten: 46 px / 800 / Petrol,
   mobil 32 px. Reiter-Beschriftungen (h2.wte-tab-title), Kastentitel der Seitenleiste und Kartentitel bleiben klein. */
.stb-facelift .post-data > h2,
.stb-facelift .wpte-itinerary-title,
.stb-facelift .wpte-faq-section-title,
.stb-facelift .wte_enquiry_contact_form .enquiry-form-title,
.stb-facelift .wte-related-trips__heading,
.stb-facelift .stb-privat-anfrage-titel {
	font-size: 4.6rem !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -.015em;
	color: var(--stb-petrol) !important;
}
@media (max-width: 767px) {
	.stb-facelift .post-data > h2,
	.stb-facelift .wpte-itinerary-title,
	.stb-facelift .wpte-faq-section-title,
	.stb-facelift .wte_enquiry_contact_form .enquiry-form-title,
	.stb-facelift .wte-related-trips__heading,
	.stb-facelift .stb-privat-anfrage-titel,
	.stb-facelift .wpte-fsd__title { font-size: 32px !important; } /* wie Theme-H2 mobil */
}
/* Zwischenüberschriften im Törntext in Petrol wie auf den übrigen Seiten */
.stb-facelift .post-data h3,
.stb-facelift .secondary-trip-info .widget-title { color: var(--stb-petrol); }
.stb-facelift .secondary-trip-info .widget-title { font-weight: 800; }
/* N6 · WPTE-Farben außerhalb der Palette: Werte und Metadaten in Theme-Textfarbe, Datums-Reiter Petrol */
.stb-facelift .trip-facts-text .value,
.stb-facelift .category-trip-meta-info-value,
.stb-facelift .nav-links a.page-numbers { color: var(--textColor, #111827) !important; }
.stb-facelift .wte-fsd__filter-buttons .wte-fsd__button:not(.is-active) { color: var(--stb-petrol); }
/* N241 · Bildrundung 14 px auch auf WPTE-Karten, Ratgeber-Karten, Routen- und Kartenbildern.
   Die Törn-Galerie oben bleibt eckig: Sie ist ein randloses Hero-Bild wie alle Heros. */
.stb-facelift .category-trip-fig,
.stb-facelift .category-trip-fig img,
.stb-facelift .category-trip-fig > a,
.stb-facelift .wissensCardWrap,
.stb-facelift .wissensCardWrap .cardImgWrap,
.stb-facelift .stb-routen__bild,
.stb-facelift .stb-karte,
.stb-facelift main .imgWrap { border-radius: var(--stb-r) !important; }
/* WPTE setzt das Kartenbild-Link-Element mit höherer Spezifität auf 8 px; Ansprechpartner-Kasten (Block 11) hat 10 px als Blockwert */
body.stb-facelift .wte-related-trips-wrapper .category-trip-fig > a,
body.stb-facelift .category-trips-single-inner-wrap .category-trip-fig > a,
.stb-facelift .block-11-ansprechpartner .textWrap,
body.stb-facelift .category-trips-single-inner-wrap { border-radius: var(--stb-r) !important; overflow: hidden; }
/* N242 · Filterknopf im Törnfinder (mobil) als Pille */
.stb-facelift .wte-filterbar-toggle-btn { border-radius: 999px !important; padding-left: 20px; padding-right: 20px; }
/* N243 · Hero mobil: Knopf berührte die Welle (Abstand unten kleiner als die Welle hoch) */
@media (max-width: 767px) {
	.stb-facelift main > section.stb-hero:has(+ section.stb-trenner-wellen) { padding-bottom: calc(var(--stb-wellen-h) + 20px) !important; }
}
/* N243 · Weniger Bewegung: Pfeil im Knopf springt beim Überfahren nicht */
@media (prefers-reduced-motion: reduce) {
	.stb-facelift .ctaBtn:hover::after { transform: none !important; }
}
/* Design 6, Nachtest T-D6 (9 kleine Befunde): Fremdfarben auf Palette, letzte Rundungen */
.stb-facelift h2.wte-tab-title > a,
.stb-facelift .stb-fsd-head,
.stb-facelift .stb-fsd-wert,
.stb-facelift p.stb-mitsegeln-hinweis { color: var(--textColor, #111827); }
.stb-facelift .stb-fsd-kategorien { color: var(--textColor, #111827); opacity: .7; }
.stb-facelift .nav-tab-active h2.wte-tab-title > a { color: var(--stb-petrol); }
.stb-facelift a.wte-trip-image-gal-popup-trigger { color: var(--stb-tiefsee); }
.stb-facelift ul.dropdown-menu .current-menu-item > a { color: var(--stb-petrol); }
/* Törnfinder-Karten: Bildrahmen (WPTE 12 px). Nur in Karten, die Galerie oben auf der Törnseite nutzt dieselbe Klasse und bleibt eckig (E251) */
body.stb-facelift .category-trips-single .wpte-gallery-wrapper,
body.stb-facelift .category-trips-single-inner-wrap .wpte-gallery-wrapper,
html body.stb-facelift .category-trips-single.wpte_new-layout .category-trip-fig > .wpte-gallery-wrapper.banner-layout-default { border-radius: var(--stb-r) !important; }
body.stb-facelift .stb-fsd-head,
body.stb-facelift .stb-fsd-wert { color: var(--textColor, #111827) !important; }
body.stb-facelift .stb-fsd-kategorien { color: var(--textColor, #111827) !important; opacity: .7; }
.stb-facelift button.show-more-btn,
.stb-facelift a.swipebox.galleryBtnWrap { border-radius: 999px !important; }

/* Formulartitel im grauen Anfrage-Kasten kleiner als die Abschnitts-H2 (Daniel, Klick-Frage 06.10.2026, STB Design 6) */
body.stb-facelift .wte_enquiry_contact_form .enquiry-form-title { font-size: 3.2rem !important; }
@media (max-width: 767px) { body.stb-facelift .wte_enquiry_contact_form .enquiry-form-title { font-size: 26px !important; } }

/* Startseite, Intro-Stockwerk: vier Fakten-Kacheln im Text-Bild-Block (Tor-D-Entwurf „Eine Woche Meer“, STB Design 6, 06.10.2026).
   Redaktion: Liste mit Klasse stb-fakten, je Punkt Icon-Bild + <strong>Kopf</strong> + Text. */
.stb-facelift ul.stb-fakten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem;
	margin: 2.4rem 0 2.8rem;
	padding: 0;
	list-style: none;
}
.stb-facelift ul.stb-fakten > li {
	display: grid;
	grid-template-columns: 4rem 1fr;
	column-gap: 1.2rem;
	align-items: start;
	margin: 0;
	padding: 1.6rem;
	background: #fff;
	border: 1px solid rgba(10, 75, 100, .14);
	border-radius: var(--stb-r);
	font-size: 1.5rem;
	line-height: 1.4;
}
.stb-facelift ul.stb-fakten > li::before { content: none !important; display: none !important; }
.stb-facelift ul.stb-fakten > li img {
	grid-row: 1 / span 2;
	width: 4rem !important;
	height: 4rem !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: contain;
}
.stb-facelift ul.stb-fakten > li strong {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--stb-petrol);
	margin-bottom: .2rem;
}
@media (max-width: 479px) {
	.stb-facelift ul.stb-fakten { grid-template-columns: 1fr; }
}

/* Kompass-Trenner (Klasse stb-kompass-trenner am Block, STB Design 6, 06.10.2026, Daniel: „Kompass rechts, Streifen nach links“):
   oben im Stockwerk rechts die Kompassrose in Petrol, nach links drei feine Kurslinien, die zum Rand hin ausblenden. */
.stb-facelift main > section.stb-kompass-trenner {
	position: relative;
	--stb-kompass: 12rem;
	--stb-kompass-rand: max(2.4rem, calc((100% - 124rem) / 2));
	padding-top: calc(var(--stb-kompass) + var(--stb-luft) * .6) !important;
}
.stb-facelift main > section.stb-kompass-trenner::before {
	content: "";
	position: absolute;
	left: 0;
	right: calc(var(--stb-kompass-rand) + var(--stb-kompass) - 1.2rem);
	top: calc(var(--stb-kompass) / 2 - 5px);
	height: 10px;
	background: linear-gradient(180deg, var(--stb-petrol) 0 2px, transparent 2px 4px, var(--stb-lagune) 4px 6px, transparent 6px 8px, rgba(10, 75, 100, .35) 8px 10px);
	-webkit-mask: linear-gradient(90deg, transparent 0, #000 45%);
	mask: linear-gradient(90deg, transparent 0, #000 45%);
	pointer-events: none;
}
.stb-facelift main > section.stb-kompass-trenner::after {
	content: "";
	position: absolute;
	top: 0;
	right: var(--stb-kompass-rand);
	width: var(--stb-kompass);
	height: var(--stb-kompass);
	background-color: var(--stb-petrol);
	-webkit-mask: url(motive/kompassrose-voll.svg) center / contain no-repeat;
	mask: url(motive/kompassrose-voll.svg) center / contain no-repeat;
	pointer-events: none;
}
@media (max-width: 767px) {
	.stb-facelift main > section.stb-kompass-trenner { --stb-kompass: 8rem; }
}
@media (prefers-reduced-motion: no-preference) {
	.stb-facelift main > section.stb-kompass-trenner::after { animation: stb-kompass-drehen 2.4s var(--stb-kurve) both; }
}
@keyframes stb-kompass-drehen { from { transform: rotate(-35deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }

/* ---------- P8c · Durchgang Daniel (STB Bauplan 18, 07.10.2026) ----------
   Rückbau: diesen Abschnitt löschen (Sicherung stb-facelift.css.bak-vor-p8c-20261007). */
/* N136 Fugen: Farbwechsel = Themenwechsel, volle Luft auf beiden Seiten, auch wenn die Redaktion 0/2rem gesetzt hat.
   Gleicher Grund, aber eigener H2-Abschnitt: ebenso nicht zusammenquetschen. Klassen setzt stb-facelift.php. */
.stb-facelift main > section.stb-farbwechsel:not(.stb-hat-trenner):not(.stb-kompass-trenner),
.stb-facelift main > section.stb-neues-thema:not(.stb-hat-trenner):not(.stb-kompass-trenner) { padding-top: var(--stb-luft) !important; }
.stb-facelift main > section:has(+ section.stb-farbwechsel:not(.stb-hat-trenner)),
.stb-facelift main > section:has(+ section.stb-neues-thema:not(.stb-hat-trenner)) { padding-bottom: var(--stb-luft) !important; }
/* Ein Sandton für alle Sand-Flächen („Eine Woche an Bord“ hatte #f5f2ec, die Blöcke #f2f0eb) */
.stb-facelift .stb-story--sand { background: #f2f0eb !important; }

/* N137 Kabinenfotos im Karussell: ganzes Bild 3:2, damit „Comfort“/„Master“ im Foto lesbar bleibt
   (die 4:5-Regel oben ist für Skipper-Porträts gedacht) */
.stb-facelift .slideWrap .cardImgWrap img[src*="Kabine"] {
	aspect-ratio: 3 / 2 !important;
	object-position: center !important;
}

/* N143 Bildkacheln: Kartentitel immer weiß, auch als h2/h4 (Segelreviere zeigten Petrol auf dunklem Foto) */
.stb-facelift .stb-bildkacheln .textWrap h2,
.stb-facelift .stb-bildkacheln .textWrap h4,
.stb-facelift .stb-bildkacheln .textWrap .h4 { color: #fff !important; }

/* N141 „In 3 Schritten an Bord“: Strichzeichnungen etwa so hoch wie der Text, Stockwerk deutlich flacher */
.stb-facelift .block-9-prozess .innerFlexRow { align-items: center; flex-wrap: nowrap; }
.stb-facelift .block-9-prozess .innerFlexRow > div:first-child { flex: 1 1 auto; max-width: none; }
.stb-facelift .block-9-prozess .innerFlexRow > div:last-child:has(img[src*="stb-zeichnung"]) { flex: 0 0 auto; max-width: none; width: auto; }
.stb-facelift .block-9-prozess .imgWrap:has(img[src*="stb-zeichnung"]) { border-radius: 0 !important; }
.stb-facelift .block-9-prozess img[src*="stb-zeichnung"] { height: 64px !important; width: auto !important; max-width: 120px; object-fit: contain; border-radius: 0 !important; }
@media (max-width: 767px) {
	.stb-facelift .block-9-prozess img[src*="stb-zeichnung"] { height: 48px !important; max-width: 84px; }
}