/*
 * STB – Törnmatcher, Einstiege (N300) · STB Bauplan 25, 07.10.2026
 * Kopf-Knopf (Menüpunkt mit Klasse stb-tm-kopf), Karte im Mega-Menü (stb-mega-cta stb-tm-karte),
 * Hinweis im Törnfinder (.stb-tm-tf-hinweis). Theme: 1rem = 10px, Menü-Umbruch bei 1200 px.
 * Rückbau: Datei löschen (siehe stb-toernmatcher.php, Abschnitt „Einstiege“).
 */

/* ---------- Kopf-Knopf neben „Törnfinder“ ---------- */
@media (min-width: 1200px) {
	/* Nur den Link gestalten: Das Theme setzt die Punkte als float-Blöcke (50 px hoch), ein anderes display
	   am Listenpunkt bricht die Menüzeile um (gemessen 07.10., Kopf wurde 106 px hoch). */
	header .navbar-nav > li.stb-tm-kopf {
		margin: 0 0 0 2rem !important; /* Theme gibt Punkten ohne Untermenü 36 px Abstand unten, Kopf wurde 82 px hoch */
	}
	header .navbar-nav > li.stb-tm-kopf > a {
		display: block;
		margin-top: 3px;
		padding: 9px 18px !important;
		border: 2px solid var(--stb-petrol, #0a4b64);
		border-radius: 999px;
		background: transparent;
		font-family: 'Montserrat', sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.3px;
		color: var(--stb-petrol, #0a4b64);
		white-space: nowrap;
		transition: background-color 0.2s ease, color 0.2s ease;
	}
	header .navbar-nav > li.stb-tm-kopf > a:hover,
	header .navbar-nav > li.stb-tm-kopf > a:focus-visible {
		background: var(--stb-petrol, #0a4b64);
		color: #fff;
	}
	/* Das Parent-Theme setzt *:focus { outline: none !important } (style.css), daher hier !important (T-P12-E W1) */
	header .navbar-nav > li.stb-tm-kopf > a:focus-visible {
		outline: 2px solid var(--stb-lagune, #1fa3a0) !important;
		outline-offset: 3px !important;
	}
	/* Der Theme-Abstand vor „Törnfinder“ (60 px) würde die beiden Knöpfe auseinanderreißen. */
	header .menuHelper:has(li.stb-tm-kopf) > a.ctaBtn {
		margin-left: 1.2rem;
	}
}
@media (max-width: 1199px) {
	/* Handy-Menü: als Umriss-Knopf über „Törnfinder“ */
	/* linksbündig wie „Törnfinder“ darunter; das Theme nimmt Handy-Links den unteren Rahmen (daher !important) */
	header .navbar-nav > li.stb-tm-kopf {
		margin: 2.4rem 0 0 !important;
		border: 0 !important;
		text-align: left !important;
	}
	header .navbar-nav > li.stb-tm-kopf > a {
		display: inline-flex !important;
		width: auto !important;
		padding: 8px 18px !important;
		border: 2px solid var(--stb-petrol, #0a4b64) !important;
		border-radius: 999px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		color: var(--stb-petrol, #0a4b64) !important;
	}
	header .navbar-nav > li.stb-tm-kopf > a:focus-visible {
		outline: 2px solid var(--stb-lagune, #1fa3a0) !important;
		outline-offset: 3px !important;
	}
}

/* ---------- Karte im Mega-Menü (neben der Törnfinder-Karte) ---------- */
@media (min-width: 1200px) {
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte {
		flex: 0 0 18rem;
	}
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a {
		min-height: 17.1rem; /* gleiche Höhe wie die Törnfinder-Karte (gemessen 171 px) */
		padding: 2rem 2.2rem;
		border: 2px solid var(--stb-lagune-hell, #7fd8d3);
		background: transparent;
		font-size: 1.7rem;
		color: #fff;
	}
	/* Pfeil näher am Text, damit die Karte so hoch bleibt wie die Törnfinder-Karte daneben */
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a::after {
		margin-top: 1.2rem;
	}
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a::before {
		content: 'Törnmatcher';
		display: block;
		margin-bottom: 0.6rem;
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--stb-lagune-hell, #7fd8d3);
	}
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a:hover,
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a:focus-visible {
		border-color: #fff;
		background: #fff;
		color: var(--stb-petrol, #0a4b64);
	}
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a:hover::before,
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a:focus-visible::before {
		color: var(--stb-lagune-dunkel, #137f7c);
	}
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a:focus-visible {
		outline: 3px solid var(--stb-lagune-hell, #7fd8d3) !important;
		outline-offset: 3px !important;
	}
}
@media (min-width: 1200px) and (max-width: 1399px) {
	/* Zwei Karten nehmen den Länderspalten Platz: schmalere Karte, engere Fugen (T-P12-E K2, „Griechenland →“ brach um) */
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu:has(> li.stb-tm-karte) {
		column-gap: 1.6rem;
	}
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte {
		flex: 0 0 15rem;
	}
	/* kleinere Schrift, damit die Karte bei 171 px Höhe bleibt wie die orange */
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a {
		padding: 1.6rem 1.8rem;
		font-size: 1.5rem;
	}
}
@media (max-width: 1199px) {
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a {
		color: var(--stb-petrol, #0a4b64) !important;
	}
	header .navbar-nav > li.stb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.stb-mega-cta.stb-tm-karte > a::after {
		content: ' \2192';
	}
}

/* ---------- Hinweis im Törnfinder ---------- */
.stb-tm-tf-hinweis {
	/* Eltern-Element des Törnfinders ist ein Flex-Container mit Umbruch: eigene volle Zeile */
	flex: 0 0 100%;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid rgba(10, 75, 100, 0.16);
	border-left: 4px solid var(--stb-lagune, #1fa3a0);
	border-radius: 12px;
	background: #f5f2ec;
	font-size: 17px;
	line-height: 1.45;
	color: var(--textColor, #1d2a33);
}
.stb-tm-tf-hinweis .stb-tm-symbol {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: var(--stb-lagune-dunkel, #137f7c);
}
.stb-tm-tf-hinweis a {
	font-weight: 700;
	color: var(--stb-petrol, #0a4b64);
	text-decoration: underline;
	text-decoration-color: var(--stb-lagune, #1fa3a0);
	text-underline-offset: 3px;
}
.stb-tm-tf-hinweis a::after { content: ' \2192'; }
.stb-tm-tf-hinweis a:hover,
.stb-tm-tf-hinweis a:focus-visible { color: var(--stb-lagune-dunkel, #137f7c); }
.stb-tm-tf-hinweis a:focus-visible {
	outline: 2px solid var(--stb-lagune, #1fa3a0) !important;
	outline-offset: 2px !important;
	border-radius: 3px;
}
@media (max-width: 767px) {
	.stb-tm-tf-hinweis { font-size: 16px; padding: 12px 14px; }
}