/*
 * STB – Törnmatcher (Block acf/stb-toernmatcher) · STB Bauplan 20, P12, 07.10.2026
 * Farben aus dem Facelift (Variablen mit Ersatzwert, damit der Block auch im heutigen Look steht).
 * Werte in px, weil das Theme 1rem = 10px setzt. Rückbau: Datei löschen (siehe stb-toernmatcher.php).
 */
.stb-tm {
	position: relative;
	padding-top: var(--stb-luft, 80px);
	padding-bottom: var(--stb-luft, 80px);
	background: #fff;
	color: var(--textColor, #1d2a33);
	--stb-tm-flaeche: #f5f2ec;
	--stb-tm-rand: rgba(10, 75, 100, .16);
	--stb-tm-akzent: var(--stb-lagune-dunkel, #137f7c);
}
.stb-tm--sand { background: #f5f2ec; --stb-tm-flaeche: #fff; }
.stb-tm--dunkel {
	background: var(--stb-tiefsee, #062f40);
	color: #fff;
	--stb-tm-flaeche: rgba(255, 255, 255, .07);
	--stb-tm-rand: rgba(255, 255, 255, .18);
	--stb-tm-akzent: var(--stb-lagune-hell, #7fd8d3);
}

.stb-tm-wrap { position: relative; z-index: 1; }
.stb-tm-kopf { max-width: 900px; margin: 0 auto 36px; text-align: center; }
.stb-tm .stb-tm-kicker { margin: 0 0 14px; font: 700 13px/1.3 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--stb-tm-akzent); }
.stb-tm .stb-tm-titel { margin: 0 0 14px; color: var(--stb-petrol, #0a4b64); }
.stb-tm--dunkel .stb-tm-titel { color: #fff; }
.stb-tm .stb-tm-intro { margin: 0; font-size: 18px; line-height: 1.6; }
.stb-tm--dunkel .stb-tm-intro { color: rgba(255, 255, 255, .86); }
.stb-tm .stb-tm-ohne-js { text-align: center; }
.stb-tm--dunkel a:not(.ctaBtn) { color: var(--stb-lagune-hell, #7fd8d3); }

/* Bühne: Leiste, Balken, Fragen */
.stb-tm-buehne { max-width: 920px; margin: 0 auto; }
.stb-tm-leiste { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 10px; }
.stb-tm .stb-tm-stand { margin: 0; font: 700 14px/1.4 Montserrat, sans-serif; color: var(--stb-tm-akzent); }
.stb-tm-balken { height: 6px; border-radius: 999px; background: var(--stb-tm-rand); overflow: hidden; margin: 0 0 32px; }
.stb-tm-balken-fuellung { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--stb-lagune, #1fa3a0); transition: width .35s var(--stb-kurve, ease); }

.stb-tm-frage[hidden] { display: none; }
.stb-tm .stb-tm-frage-titel { margin: 0 0 8px; text-align: center; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: inherit; outline: none; }
.stb-tm .stb-tm-hinweis { margin: 0 0 4px; text-align: center; font-size: 15px; opacity: .8; }
.stb-tm-antworten { display: grid; gap: 14px; margin: 24px 0 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stb-tm-antworten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-left: auto; margin-right: auto; }
.stb-tm-antworten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stb-tm-antworten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stb-tm-antworten--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.stb-tm .stb-tm-antwort {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 140px;
	padding: 20px 14px;
	border: 2px solid var(--stb-tm-rand);
	border-radius: var(--stb-r, 14px);
	background: var(--stb-tm-flaeche);
	color: inherit;
	font: 600 16px/1.35 Montserrat, sans-serif;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, transform .2s var(--stb-kurve, ease);
}
.stb-tm .stb-tm-antwort:hover { border-color: var(--stb-lagune, #1fa3a0); transform: translateY(-2px); }
/* Das Parent setzt :focus { outline: none !important } – deshalb hier mit !important und Schatten (T-P12 W1). */
.stb-tm button:focus-visible,
.stb-tm a:focus-visible { outline: 3px solid var(--stb-gold, #e09900) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(224, 153, 0, .28) !important; }
.stb-tm .stb-tm-antwort[aria-pressed="true"] { border-color: var(--stb-lagune, #1fa3a0); background: rgba(31, 163, 160, .16); }
.stb-tm .stb-tm-antwort[disabled] { cursor: default; opacity: .6; }
.stb-tm-symbol { width: 40px; height: 40px; flex: 0 0 auto; color: var(--stb-tm-akzent); }
.stb-tm-antwort--mehr { position: relative; }
.stb-tm-antwort--mehr::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	border: 2px solid var(--stb-tm-rand);
	border-radius: 6px;
}
.stb-tm-antwort--mehr[aria-pressed="true"]::after {
	border-color: var(--stb-lagune, #1fa3a0);
	background: var(--stb-lagune, #1fa3a0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.stb-tm-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 24px 0 0; min-height: 44px; }
.stb-tm .stb-tm-textknopf {
	padding: 8px 2px;
	border: 0;
	background: none;
	color: inherit;
	font: 600 15px/1.4 Montserrat, sans-serif;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
}
.stb-tm .stb-tm-textknopf[hidden] { display: none; }
.stb-tm .stb-tm-weiter { margin-left: auto; }
.stb-tm .stb-tm-weiter[disabled] { opacity: .45; cursor: default; }

.stb-tm-rein { animation: stb-tm-rein .35s var(--stb-kurve, ease) both; }
@keyframes stb-tm-rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Ergebnis */
.stb-tm-ergebnis[hidden], .stb-tm-mehr[hidden] { display: none; }
.stb-tm-ergebnis-kopf { text-align: center; margin: 0 0 28px; }
.stb-tm .stb-tm-ergebnis-titel { margin: 0 0 8px; color: inherit; outline: none; }
.stb-tm .stb-tm-ergebnis-sub { margin: 0; opacity: .85; }

.stb-tm-top .category-main-wrap { display: flex; flex-direction: column; gap: 28px; }
.stb-tm-treffer { border-radius: calc(var(--stb-r, 14px) + 4px); }
.stb-tm .stb-tm-weil {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.5;
}
.stb-tm-platz {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--stb-lagune-dunkel, #137f7c);
	color: #fff;
	font: 800 14px/1 Montserrat, sans-serif;
}
.stb-tm .stb-tm-weil strong { color: var(--stb-tm-akzent); }
/* Die Törnfinder-Karte steht auf Weiß, auch im dunklen Stockwerk */
.stb-tm .stb-tm-treffer .category-trips-single { margin: 0; color: var(--textColor, #1d2a33); background: #fff; border-radius: var(--stb-r, 14px); overflow: hidden; }
.stb-tm--dunkel .stb-tm-treffer .category-trips-single a:not(.wpte-button) { color: var(--stb-petrol, #0a4b64); }
.stb-tm .stb-tm-splide-ruhig { visibility: visible; }
/* Nur das erste echte Bild, ohne Verschiebung, Klone und Pfeile (T-P12-N W1) */
.stb-tm .stb-tm-splide-ruhig .splide__list { transform: none !important; }
.stb-tm .stb-tm-splide-ruhig .splide__slide { display: none !important; }
.stb-tm .stb-tm-splide-ruhig .splide__slide.stb-tm-erstes { display: block !important; width: 100% !important; margin: 0 !important; }
.stb-tm .stb-tm-splide-ruhig .splide__arrows,
.stb-tm .stb-tm-splide-ruhig .splide__arrow,
.stb-tm .stb-tm-splide-ruhig .splide__pagination { display: none !important; }

.stb-tm-mehr { margin: 48px 0 0; }
.stb-tm .stb-tm-mehr-titel { margin: 0 0 18px; color: inherit; font-size: 22px; }
.stb-tm-weitere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stb-tm .stb-tm-klein {
	display: flex;
	flex-direction: column;
	border-radius: var(--stb-r, 14px);
	overflow: hidden;
	background: #fff;
	color: var(--textColor, #1d2a33);
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(6, 47, 64, .12);
	transition: transform .2s var(--stb-kurve, ease), box-shadow .2s;
}
.stb-tm .stb-tm-klein:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(6, 47, 64, .2); }
.stb-tm .stb-tm-klein-bild { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #e8eef0; }
.stb-tm-klein-text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.stb-tm-art { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font: 700 12px/1.5 Montserrat, sans-serif; background: rgba(31, 163, 160, .14); color: #0f6b68; }
.stb-tm-art--privat { background: rgba(224, 153, 0, .16); color: #8a5d00; }
.stb-tm-klein-titel { font: 700 16px/1.35 Montserrat, sans-serif; color: var(--stb-petrol, #0a4b64); }
.stb-tm-klein-preis { font-size: 15px; }
/* Im dunklen Stockwerk erbt die Karte sonst die helle Linkfarbe (Kontrast) */
.stb-tm .stb-tm-weitere a.stb-tm-klein,
.stb-tm .stb-tm-weitere a.stb-tm-klein .stb-tm-klein-preis,
.stb-tm .stb-tm-weitere a.stb-tm-klein .stb-tm-klein-preis * { color: var(--textColor, #1d2a33); }
.stb-tm .stb-tm-weitere a.stb-tm-klein .stb-tm-klein-titel { color: var(--stb-petrol, #0a4b64); }

.stb-tm-aktionen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin: 44px 0 0; }
.stb-tm .stb-tm-alle { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.stb-tm button.ctaBtn:focus-visible { outline-color: var(--stb-gold, #e09900) !important; }
.stb-tm .stb-tm-fuss { margin: 18px 0 0; text-align: center; font-size: 15px; opacity: .85; }

/* Tablet und Handy */
@media (max-width: 991px) {
	.stb-tm-antworten--4, .stb-tm-antworten--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stb-tm-weitere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.stb-tm-antworten--3, .stb-tm-antworten--4, .stb-tm-antworten--5 { grid-template-columns: minmax(0, 1fr); }
	.stb-tm-antworten--2 { grid-template-columns: minmax(0, 1fr); }
	.stb-tm .stb-tm-antwort { flex-direction: row; justify-content: flex-start; min-height: 64px; padding: 14px 16px; text-align: left; }
	.stb-tm-antwort--mehr { padding-right: 46px !important; }
	.stb-tm-antwort--mehr::after { top: 50%; transform: translateY(-50%); }
	.stb-tm-symbol { width: 32px; height: 32px; }
	.stb-tm-weitere { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.stb-tm .stb-tm-klein { flex-direction: row; align-items: flex-start; }
	.stb-tm .stb-tm-klein-bild { width: 112px !important; height: 112px !important; max-width: 112px; flex: 0 0 112px; aspect-ratio: 1 / 1; object-fit: cover; }
	.stb-tm-klein-text { padding: 10px 12px 12px; gap: 4px; }
	.stb-tm-klein-titel { font-size: 15px; }
	.stb-tm-klein-preis { font-size: 14px; }
	.stb-tm .stb-tm-weil { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.stb-tm-rein { animation: none; }
	.stb-tm .stb-tm-antwort, .stb-tm-balken-fuellung, .stb-tm .stb-tm-klein { transition: none; }
}

/* STB Bauplan 23 (07.10.2026), T-P12 W4/K6 */
.stb-tm-ergebnis-hinweis[hidden] { display: none; }
.stb-tm .stb-tm-ergebnis-hinweis { max-width: 680px; margin: 16px auto 0; padding: 14px 18px; border-left: 4px solid var(--stb-lagune, #1fa3a0); border-radius: 10px; background: var(--stb-tm-flaeche); text-align: left; font-size: 16px; line-height: 1.55; }
.stb-tm .stb-tm-ergebnis-hinweis a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.stb-tm .category-trip-aval-time { display: none !important; }
.stb-tm .wpte-trip-duration-value { white-space: nowrap; }

/* Portolan-Wasserzeichen im dunklen Törnmatcher wie bei „Wo du mitsegeln kannst“ (Daniel, 08.10.2026).
   Nur die rechte, halb angeschnittene Kompassrose (portolan-rechts.svg), die linke lief zu stark in den Text (Daniel, 08.10.2026).
   Rückbau: diesen Abschnitt löschen (Sicherung toernmatcher.css.bak-vor-wasser-20261008). */
.stb-facelift .stb-tm.stb-tm--dunkel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: rgba(255, 255, 255, .11);
	-webkit-mask: url(../facelift/motive/portolan-rechts.svg) right -240px top -120px / 1100px auto no-repeat;
	mask: url(../facelift/motive/portolan-rechts.svg) right -240px top -120px / 1100px auto no-repeat;
}
@media (max-width: 767px) {
	.stb-facelift .stb-tm.stb-tm--dunkel::before { -webkit-mask-size: 900px auto; mask-size: 900px auto; -webkit-mask-position: right -200px top -120px; mask-position: right -200px top -120px; }
}