/* Regionen-Seiten und Verwechslungshilfe. Wird auf den Seitenvorlagen
   tpl-regionen.php, tpl-bundesland.php, tpl-ort.php sowie
   tpl-verwechslungen.php und tpl-verwechslung.php geladen — die
   Verwechslungsseiten teilen sich Hero, Layout und Sidebar-Boxen mit
   den Ortsseiten. */
/* ================= Regionen-Karte ================= */
.region-layout {
	display: grid; grid-template-columns: minmax(300px, 440px) 1fr;
	gap: 40px; align-items: start; margin: 26px 0 40px;
}
.region-karte-spalte { position: sticky; top: 116px; }
.region-karte-box {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 22px;
	position: relative;   /* Anker für den Karten-Tooltip */
}
.karte-svg { display: block; width: 100%; height: auto; }
.karte-svg .karte-land path {
	fill: var(--leaf-soft); stroke: #fff; stroke-width: 1.2;
	transition: fill .2s ease;
	cursor: pointer;
}
.karte-svg .karte-land:hover path,
.karte-svg .karte-land:focus-visible path { fill: var(--leaf); }
.karte-svg .karte-land:focus-visible { outline: none; }
.karte-svg .karte-land.aktiv path { fill: var(--green-700); }
.region-attribution { margin: 10px 4px 0; font-size: .74rem; color: var(--muted); }
.region-attribution a { color: var(--muted); text-decoration: underline; }
.region-attribution a:hover { color: var(--green-700); }
#region-select {
	margin-top: 14px; width: 100%; padding: 11px 14px;
	font: inherit; font-size: .95rem; color: var(--ink);
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
}

.region-hinweis,
.region-land {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 32px 34px 34px;
}
.region-land { margin-bottom: 18px; }
.region-land:last-child { margin-bottom: 0; }
.region-hinweis h2, .region-land h2 { margin: 0 0 14px; }
.region-land > p,
.region-hinweis > p { color: var(--ink-soft); line-height: 1.65; }
/* Zwischenüberschriften brauchen deutlich Luft nach oben, sonst kleben
   die Abschnitte im Panel aneinander. */
.region-sub {
	margin: 32px 0 14px; font-size: .82rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--green-600);
}
.region-ratgeber { list-style: none; margin: 0; padding: 0; }
.region-ratgeber li + li { margin-top: 8px; }
.region-ratgeber a {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: var(--radius-sm);
	border: 1px solid var(--line); background: var(--card);
	font-size: .93rem;
}
.region-ratgeber a:hover { border-color: var(--leaf); box-shadow: var(--shadow); }
.region-ratgeber .rr-titel { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.region-ratgeber a:hover .rr-titel { color: var(--green-800); }
.region-ratgeber .rr-zeit { flex-shrink: 0; font-size: .78rem; color: var(--muted); }
.region-ratgeber .icon { color: var(--green-600); flex-shrink: 0; }

/* Mit JavaScript wird je Bundesland genau eine Karte gezeigt; ohne JS
   bleiben alle 16 sichtbar und die Kartenflächen springen per Anker. */
.js-region .region-land { display: none; }
.js-region .region-land.aktiv { display: block; }

/* ============ Regionen-Hero (Bundesland- und Ortsseiten) ============ */
/* Wie der Startseiten-Hero, nur schlanker: Flächenfarbe und Bildhintergrund
   sind identisch (#fbebd1), die linke Bildkante wird per Maske ausgeblendet —
   die Illustration geht dadurch übergangslos in die Creme-Fläche über. */
.region-hero {
	--hero-cream: #fbebd1;
	background-color: var(--hero-cream);
	border-bottom: 1px solid #ecdfc4;
	position: relative; overflow: hidden;
}
/* Die Illustration steht IM Inhaltscontainer (nicht am Viewport-Rand):
   der .wrap ist Positionsanker, right = Containerinnenkante. */
.region-hero .wrap { position: relative; }
.region-hero .breadcrumb,
.region-hero-text { position: relative; z-index: 1; }
.region-hero .breadcrumb { margin: 0; padding: 30px 0 0; }
/* Auf der Creme-Fläche wirkt das kühle Grau der Brotkrume fehl am Platz —
   hier übernimmt ein warmer Braunton (Kontrast auf #fbebd1 ≥ 4,5:1). */
.region-hero .breadcrumb,
.region-hero .breadcrumb a { color: #6f5a39; }
.region-hero .breadcrumb .sep { color: #b3a37e; }
.region-hero .breadcrumb a:hover { color: var(--green-700); }
.region-hero-text { padding: 18px 0 48px; max-width: 720px; }
.region-hero-text .kicker {
	font-size: .82rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--green-600);
}
.region-hero-text h1 { margin: 8px 0 0; }
.region-hero-text .sub { margin: 14px 0 0; color: var(--ink-soft); font-size: 1.02rem; }
.region-hero-illu {
	position: absolute; right: 20px; bottom: 0; z-index: 0;
	height: 92%; width: auto; max-width: none;
	object-fit: contain; object-position: right bottom;
	/* Beidseitiger Verlauf: links in die Fläche eingebettet wie auf der
	   Startseite, rechts weich auslaufend statt harter Bildkante. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 30%, #000 78%, rgba(0, 0, 0, .55) 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 30%, #000 78%, rgba(0, 0, 0, .55) 91%, transparent 100%);
	pointer-events: none;
}
@media (max-width: 900px) {
	.region-hero-illu { display: none; }
	.region-hero-text { padding-bottom: 32px; }
}

/* Orts-Schnellsuche und Kennzahlen im Hero der Kartenseite */
.ort-suche { display: flex; gap: 10px; margin-top: 22px; max-width: 540px; }
.ort-suche .search-field { flex: 1; min-width: 0; background: #fff; }
.region-hero .hero-stats { margin-top: 26px; }
.region-hero .hero-stats .stat span { color: #6f5a39; }

/* Karten-Tooltip: folgt dem Zeiger über den Bundesland-Flächen */
.karte-tooltip {
	position: absolute; z-index: 3; pointer-events: none;
	background: var(--green-900); color: #fff;
	font-size: .82rem; font-weight: 600; line-height: 1;
	padding: 7px 11px; border-radius: 8px; white-space: nowrap;
	opacity: 0; transform: translateY(4px);
	transition: opacity .12s ease, transform .12s ease;
}
.karte-tooltip.sichtbar { opacity: 1; transform: none; }

/* "Alle Städte & Kreise …"-Zeile unter den Chips */
.region-alle { margin: 16px 0 0; font-size: .93rem; }
.region-alle a { font-weight: 700; color: var(--green-700); }
.region-alle a:hover { color: var(--green-600); text-decoration: underline; }
.region-zurueck { margin: 26px 0 40px; }

/* ============ Bundesland-Seite: Ortsliste ============ */
.land-typisch { margin: 36px 0 6px; }
.ort-liste { margin: 30px 0 10px; }
.ort-liste h2 { margin: 0 0 8px; }
.ort-liste-hinweis { margin: 0 0 18px; color: var(--ink-soft); max-width: 70ch; }
.ort-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}
.ort-card {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 12px 14px; border-radius: var(--radius-sm);
	border: 1px solid var(--line); background: var(--card);
}
.ort-card:hover { border-color: var(--leaf); box-shadow: var(--shadow); }
.ort-card .ort-name { font-weight: 600; color: var(--ink); min-width: 0; }
.ort-card:hover .ort-name { color: var(--green-800); }
.ort-card .ort-typ { flex-shrink: 0; font-size: .74rem; color: var(--muted); }
.land-ratgeber { margin: 26px 0 10px; max-width: 640px; }

/* ============ Orts-Landingpage ============ */
.ort-layout { padding-top: 36px; }
.ort-intro { margin: 0 0 26px; color: var(--muted); font-size: 1.05rem; max-width: 70ch; }
.ort-abschnitt { margin: 0 0 30px; }
.ort-abschnitt:last-child { margin-bottom: 0; }
.ort-fakten dl { margin: 0; }
.of-row {
	display: grid; grid-template-columns: 118px 1fr; gap: 10px;
	padding: 8px 0; border-bottom: 1px dashed var(--line);
}
.of-row:last-child { border-bottom: 0; }
.of-row dt { font-weight: 700; font-size: .85rem; color: var(--green-800); }
.of-row dd { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.of-stand { font-size: .78rem; color: var(--muted); }

/* Gemeindeliste auf Kreis-Seiten */
.gemeinde-hinweis { margin: 0 0 12px; font-size: .92rem; color: var(--ink-soft); }
.gemeinde-liste {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.gemeinde-liste li { display: inline; }
.gemeinde-liste a,
.gemeinde-liste span {
	display: inline-block; padding: 4px 10px; border-radius: 99px;
	font-size: .85rem; line-height: 1.35;
}
.gemeinde-liste a {
	background: var(--leaf-soft); color: var(--green-800); font-weight: 600;
	border: 1px solid transparent;
}
.gemeinde-liste a:hover { border-color: var(--leaf); background: #fff; }
.gemeinde-liste span { background: #f4f5f1; color: var(--ink-soft); }

/* Saison-Badges in der Artenliste */
.saison-liste .sl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.saison-liste .sl-saison {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .76rem; font-weight: 600; color: var(--muted);
}
.schritte-box {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 26px 28px;
}
.schritte-box > h2 { margin: 0 0 14px; }
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li {
	position: relative; padding: 0 0 18px 52px; counter-increment: schritt;
}
.schritte li:last-child { padding-bottom: 0; }
.schritte li::before {
	content: counter(schritt);
	position: absolute; left: 0; top: 0;
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--leaf-soft); color: var(--green-800);
	font-weight: 700; font-size: 1rem;
}
.schritte h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.schritte p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

@media (max-width: 900px) {
	.region-layout { grid-template-columns: 1fr; gap: 20px; }
	/* Rasterzellen haben von Haus aus min-width:auto. Die langen Optionen
	   („Mecklenburg-Vorpommern") gaben dem Auswahlfeld eine breite
	   Mindestgröße, die auf 320-px-Geräten die Spalte aufschob. */
	.region-layout > * { min-width: 0; }
	.region-karte-spalte { position: static; }
	.region-karte-box { max-width: 420px; margin: 0 auto; padding: 16px; }
	#region-select { width: 100%; max-width: 420px; display: block; margin-left: auto; margin-right: auto; }
	.region-attribution { text-align: center; }
	.region-land { padding: 20px; }
	.schritte-box { padding: 20px; }
}

/* Startzustand der Kartenseite: regionale Schwerpunkte als Einstieg */
.schwerpunkt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.schwerpunkt-liste a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 14px 16px; border-radius: var(--radius-sm);
	border: 1px solid var(--line); background: var(--card);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.schwerpunkt-liste a:hover { border-color: var(--leaf); box-shadow: var(--shadow); }
.sp-thema { font-weight: 600; color: var(--ink); }
.schwerpunkt-liste a:hover .sp-thema { color: var(--green-800); }
/* schrumpfbar halten: in schmalen Spalten schob der Text sonst die Seite auf */
.sp-wo { font-size: .84rem; color: var(--muted); text-align: right; min-width: 0; }
/* In der Randspalte ist nebeneinander zu eng — dort untereinander */
.single-aside .schwerpunkt-liste a { flex-direction: column; gap: 3px; }
.single-aside .sp-wo { text-align: left; }
@media (max-width: 560px) {
	.schwerpunkt-liste a { flex-direction: column; gap: 2px; }
	.sp-wo { text-align: left; }
}

/* ============ Verwechslungshilfe ============ */

/* Anlass-Etikett: färbt Karte und Hinweisbox nach dem, was auf dem Spiel steht */
.vgl-marke {
	display: inline-flex; align-items: center; align-self: flex-start;
	padding: 4px 11px; border-radius: 99px;
	font-size: .74rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase;
}
.vgl-recht      { --vgl-farbe: var(--green-700); --vgl-flaeche: var(--leaf-soft); }
.vgl-gesundheit { --vgl-farbe: #b4472e;          --vgl-flaeche: var(--red-soft); }
.vgl-schaden    { --vgl-farbe: #a8761a;          --vgl-flaeche: var(--amber-soft); }
.vgl-methode    { --vgl-farbe: var(--ink-soft);  --vgl-flaeche: #eef1ea; }
.vgl-marke { background: var(--vgl-flaeche); color: var(--vgl-farbe); }

/* Übersicht: Karten mit Foto-gegen-Foto */
.vgl-grid {
	/* min(300px, 100%): Auf 320-px-Geräten ist die Spalte schmaler als das
	   Mindestmaß — ohne die Klammer schöbe das Raster die Seite auf. */
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 16px; margin: 26px 0 34px;
}
.vgl-karte {
	display: flex; flex-direction: column; gap: 10px;
	padding: 18px 20px 20px; border-radius: var(--radius);
	border: 1px solid var(--line); background: var(--card);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vgl-karte:hover {
	border-color: var(--leaf); box-shadow: var(--shadow-lift); transform: translateY(-2px);
}
/* wrap: Bei Dreiervergleichen passen drei 74-px-Bilder plus „vs" auf
   320-px-Geräten nicht in eine Zeile. */
.vgl-bilder { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vgl-bild, .vgl-bilder .thumb-fallback {
	width: 74px; height: 74px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.vgl-vs { font-size: .78rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.vgl-titel { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.vgl-karte:hover .vgl-titel { color: var(--green-800); }
.vgl-warum { font-size: .89rem; line-height: 1.5; color: var(--ink-soft); }

/* Einzelvergleich: Hinweisbox, Gegenüberstellung, Tabelle */
.vgl-warum-box {
	border-left: 4px solid var(--vgl-farbe, var(--green-700));
	background: var(--vgl-flaeche, var(--leaf-soft));
	border-radius: var(--radius-sm);
	padding: 18px 22px; margin: 0 0 28px;
}
.vgl-warum-box h2 { margin: 0 0 6px; font-size: 1.05rem; color: var(--vgl-farbe, var(--green-800)); }
.vgl-warum-box p { margin: 0; color: var(--ink); }

.vgl-spalten { display: grid; gap: 16px; }
.vgl-spalten-2 { grid-template-columns: 1fr 1fr; }
.vgl-spalten-3 { grid-template-columns: repeat(3, 1fr); }
.vgl-spalte {
	display: flex; flex-direction: column; gap: 8px; text-align: center;
	padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
}
.vgl-foto, .vgl-spalte .thumb-fallback {
	width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
}
.vgl-name { display: block; margin-top: 8px; font-weight: 700; color: var(--ink); }
.vgl-spalte a:hover .vgl-name { color: var(--green-800); }
.vgl-rolle { font-size: .82rem; color: var(--muted); line-height: 1.4; }

/* Scrollrahmen um die Vergleichstabelle. Der Schatten am rechten Rand
   verschwindet, sobald ganz nach rechts gescrollt ist — so ist erkennbar,
   dass noch etwas kommt. */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle-scroll:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }
.vgl-tabelle { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .93rem; }
.vgl-tabelle th, .vgl-tabelle td {
	padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top;
}
.vgl-tabelle thead th { background: var(--leaf-soft); color: var(--green-800); font-size: .88rem; }
.vgl-tabelle tbody th { font-weight: 700; color: var(--green-800); width: 24%; }
.vgl-tabelle tbody tr:nth-child(even) td,
.vgl-tabelle tbody tr:nth-child(even) th { background: #fafbf8; }

@media (max-width: 700px) {
	.vgl-spalten-2, .vgl-spalten-3 { grid-template-columns: 1fr; }
	.vgl-tabelle { font-size: .86rem; }
	.vgl-tabelle th, .vgl-tabelle td { padding: 9px 10px; }
}