/**
 * gw-places Board-Styles ([gw_places_board] + [gw_places_hub]).
 *
 * Durchsuchbares Lokal-Board (server-gerendert, JS = Progressive Enhancement).
 * Marken-Werte als `var(--awb-…, #hex)` (Avada-nativ, Fallback = MeinSeenland.de-CI).
 * Baut auf gw-places.css auf (Chips/Status/Preis/Features/Werbe-Label erben von dort).
 *
 * Designprinzip (wie gw-events): eckige Bilder/Cards (radius 0), Pills/Buttons 2px,
 * Formfelder 6px, fast schattenlos, großzügiges Padding, Trennung über 1px-Linien.
 * Adaptiert auf das Lokal-Modell: KEIN Datum-Overlay, stattdessen Kategorie-Badge +
 * Status/Preis/Ort-Meta.
 */

.gw-board {
	--gw-brand: var(--primary_color, #17415f);
	--gw-cta: var(--awb-color5, #01708e);
	--gw-cta-hover: #015f78;
	--gw-ink: var(--awb-color8, #141617);
	--gw-ink-soft: var(--awb-color6, #434549);
	--gw-card: var(--awb-color1, #fff);
	--gw-panel: var(--awb-color2, #f9f9fb);
	--gw-badge: var(--awb-color3, #f2f3f5);
	--gw-border: #e0e2e6;
	--gw-form-radius: var(--form_border_radius, 6px);
	--gw-board-max-width: 1248px;

	box-sizing: border-box;
	max-width: var(--gw-board-max-width, 1248px);
	margin: 1.5em auto;
	padding-inline: 1rem;
	color: var(--gw-ink);
}

.gw-board *,
.gw-board *::before,
.gw-board *::after {
	box-sizing: border-box;
}

.gw-board img,
.gw-board iframe {
	max-width: 100%;
}

/* Hub-Seiten-H1 zähmen + Board an eine zentrierte Spalte binden (Avada Full-Width). */
.post-content:has(.gw-board) > h1 {
	overflow-wrap: break-word;
	line-height: 1.15;
}

.post-content:has(.gw-board-filter) {
	max-width: 1248px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.post-content:has(.gw-board-filter) > .gw-board {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* Lange Titel/Teaser umbrechen statt rechts abschneiden (Mobile-Fix). */
.gw-board-row-title,
.gw-board-highlight-title,
.gw-board-row-location,
.gw-place-teaser {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* --- Highlights-Slot: prächtige Hochkant-Cards ganz oben ------------------ */
.gw-board-highlights {
	margin: 0 0 2.25rem;
}

.gw-board-highlights-heading {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gw-brand);
}

.gw-board-highlights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
}

.gw-board-highlight {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--gw-card);
	border: 1px solid var(--gw-border);
	border-radius: 0;
	box-shadow: 0 5px 0 -4px rgba(0, 0, 0, 0.1);
}

.gw-board-highlight-media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--gw-badge);
}

.gw-board-highlight-media .gw-place-image {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* Bildrechte abgelehnt / kein Foto: Petrol-Block als textlicher Fallback-Header
   (Card bleibt sichtbar — gesponserte Platzierung wurde bezahlt). */
.gw-board-highlight-media--noimage {
	aspect-ratio: 16 / 7;
	background: var(--gw-brand);
}

.gw-board-highlight-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.1rem 1.25rem 1.35rem;
	min-width: 0;
}

.gw-board-highlight-promo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gw-board-highlight-promo .gw-place-ad-label,
.gw-board-highlight-promo .gw-place-featured-badge {
	margin: 0;
}

.gw-board-highlight-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	align-items: center;
}

.gw-board-highlight-location {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--gw-cta);
}

.gw-board-highlight-title {
	margin: 0.1rem 0 0;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
}

.gw-board-highlight-title a {
	color: var(--gw-ink);
	text-decoration: none;
}

.gw-board-highlight-title a:hover,
.gw-board-highlight-title a:focus {
	color: var(--gw-cta);
}

.gw-board-highlight .gw-place-teaser {
	margin: 0;
}

/* Ghost/Outline-Button „Mehr dazu". */
.gw-board-highlight-cta {
	align-self: flex-start;
	margin-top: auto;
	padding: 0.5rem 1.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gw-cta);
	background: transparent;
	border: 1px solid var(--gw-cta);
	border-radius: 2px;
}

/* Ganze Card klickbar: der Titel-Link spannt sich per Overlay über die Card. */
.gw-board-highlight-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gw-board-highlight:hover .gw-board-highlight-cta {
	color: #fff;
	background: var(--gw-cta);
}

/* --- Filterleiste --------------------------------------------------------- */
.gw-board-filter {
	margin: 0 0 1.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--gw-panel);
	border: 1px solid var(--gw-border);
	border-radius: 0;
}

.gw-board-filter-details {
	margin: 0;
}

.gw-board-filter-toggle {
	display: none;
}

@media (min-width: 641px) {
	.gw-board-filter-details > .gw-board-filter-inner {
		display: block !important;
	}

	.gw-board-filter-details::details-content {
		content-visibility: visible !important;
	}
}

.gw-board-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	align-items: flex-start;
}

.gw-board-field {
	min-width: 12rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.gw-board-field--topics,
.gw-board-field--features {
	flex: 1 1 22rem;
}

.gw-board-label {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gw-brand);
}

.gw-board-field select,
.gw-board-search input[type="search"] {
	padding: 0.55rem 0.7rem;
	font: inherit;
	color: var(--gw-ink);
	background: var(--gw-card);
	border: 1px solid var(--gw-border);
	border-radius: var(--gw-form-radius);
}

.gw-board-field--region select {
	min-width: 12rem;
}

.gw-board-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
}

.gw-board-check {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	font-size: 0.9rem;
	color: var(--gw-ink);
	cursor: pointer;
}

.gw-board-check input[type="checkbox"] {
	width: auto;
	margin: 0;
	accent-color: var(--gw-cta);
}

.gw-board-searchrow {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.gw-board-search {
	flex: 1 1 auto;
}

.gw-board-search input[type="search"] {
	width: 100%;
}

.gw-board-search input::placeholder {
	color: var(--gw-ink-soft);
	opacity: 0.8;
}

.gw-board-submit {
	flex: 0 0 auto;
	padding: 0.6rem 1.6rem;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--gw-cta);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.16s ease;
}

.gw-board-submit:hover,
.gw-board-submit:focus {
	background: var(--gw-cta-hover);
}

/* --- Meta-Zeile: Sortierung + Ansichtswechsel + Trefferzähler -------------- */
.gw-board-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--gw-border);
}

.gw-board-sortform {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

.gw-board-sortlabel {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gw-brand);
}

.gw-board-sortform select {
	padding: 0.45rem 0.6rem;
	font: inherit;
	color: var(--gw-ink);
	background: var(--gw-card);
	border: 1px solid var(--gw-border);
	border-radius: var(--gw-form-radius);
}

.gw-board-sortgo {
	padding: 0.45rem 1rem;
	font: inherit;
	border: 1px solid var(--gw-border);
	border-radius: 2px;
	background: var(--gw-card);
	cursor: pointer;
}

.gw-board-count {
	margin: 0;
	font-size: 0.9rem;
	color: var(--gw-ink-soft);
}

/* --- Ansicht-Umschalter: Liste | Karte (echte <a>-Links) ------------------ */
.gw-board-viewtoggle {
	display: inline-flex;
	border: 1px solid var(--gw-border);
	border-radius: 2px;
	overflow: hidden;
}

.gw-board-viewtoggle-link {
	padding: 0.45rem 1rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gw-cta);
	text-decoration: none;
	background: var(--gw-card);
	transition: background 0.16s ease, color 0.16s ease;
}

.gw-board-viewtoggle-link + .gw-board-viewtoggle-link {
	border-left: 1px solid var(--gw-border);
}

.gw-board-viewtoggle-link:hover,
.gw-board-viewtoggle-link:focus {
	color: #fff;
	background: var(--gw-cta-hover);
}

.gw-board-viewtoggle-link.is-active,
.gw-board-viewtoggle-link[aria-current="true"] {
	color: #fff;
	background: var(--gw-cta);
}

/* --- Karten-Ansicht (Leaflet, lazy) --------------------------------------- */
.gw-board-map {
	margin: 0 0 1.5rem;
	border: 1px solid var(--gw-border);
	border-radius: 0;
	background: var(--gw-panel);
}

.gw-board-map-canvas {
	width: 100%;
	height: 420px;
}

.gw-board-map-notice {
	margin: 0;
	padding: 1.1rem 1.25rem;
	font-size: 0.9rem;
	color: var(--gw-ink-soft);
}

.gw-board-map-popup-cat {
	margin: 0 0 0.2rem;
	font-size: 0.8rem;
	color: var(--gw-ink-soft);
}

.gw-board-map-popup-title {
	font-weight: 600;
	color: var(--gw-cta);
	text-decoration: none;
}

.gw-board-map-popup-title:hover,
.gw-board-map-popup-title:focus {
	color: var(--gw-cta-hover);
	text-decoration: underline;
}

.gw-board-results[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.12s ease;
}

/* --- Ergebnisliste (Full-Width-Zeilen) ------------------------------------ */
.gw-board-list {
	margin: 0;
	padding: 0;
}

.gw-board-row {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 2rem 0;
	background: var(--gw-card);
	border: 0;
	border-bottom: 1px solid var(--gw-border);
	border-radius: 0;
	box-shadow: none;
}

.gw-board-row:first-child {
	padding-top: 1.25rem;
}

.gw-board-row-media {
	position: relative;
	flex: 0 0 auto;
	width: 200px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--gw-badge);
	border-radius: 0;
}

.gw-board-row-media .gw-place-image {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.gw-board-row-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.gw-board-row-promo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gw-board-row-promo .gw-place-ad-label,
.gw-board-row-promo .gw-place-featured-badge {
	margin: 0;
}

.gw-board-row-body .gw-place-category {
	align-self: flex-start;
}

.gw-board-row-title {
	margin: 0.1rem 0 0;
	font-size: 1.4rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
}

.gw-board-row-title a {
	color: var(--gw-ink);
	text-decoration: none;
}

.gw-board-row-title a:hover,
.gw-board-row-title a:focus {
	color: var(--gw-cta);
}

.gw-board-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.7rem;
	align-items: center;
}

.gw-board-row-location {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gw-cta);
}

/* Features im Board kompakter (erben Grundstil aus gw-places.css). */
.gw-board-row .gw-place-features {
	margin: 0.1rem 0 0;
}

.gw-board-row .gw-place-teaser {
	margin: 0.2rem 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--gw-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gw-board-row-more {
	margin-top: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gw-cta);
}

/* --- Load-more (crawlbar, echter Link) ------------------------------------ */
.gw-board-loadmore {
	display: inline-block;
	margin: 1.75rem 0 0;
	padding: 0.7rem 1.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gw-cta);
	text-decoration: none;
	background: var(--gw-badge);
	border: 1px solid var(--gw-border);
	border-radius: 2px;
	transition: background 0.16s ease, color 0.16s ease;
}

.gw-board-loadmore:hover,
.gw-board-loadmore:focus {
	color: #fff;
	background: var(--gw-cta);
}

.gw-board-empty {
	margin: 2rem 0;
	font-style: italic;
	color: var(--gw-ink-soft);
}

/* --- See-Hub ([gw_places_hub]) -------------------------------------------- */
.gw-hub-intro {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--gw-ink-soft);
}

.gw-hub-section {
	margin: 2.5rem 0;
}

.gw-hub-section-heading {
	margin: 0 0 1rem;
	font-size: 1.4rem;
	color: var(--gw-brand);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
	.gw-board {
		padding-inline: 0.85rem;
	}

	.post-content:has(.gw-board) > h1 {
		font-size: 2rem !important;
		margin-bottom: 0.5rem;
	}

	.gw-board-row {
		flex-direction: column;
		gap: 0.85rem;
	}

	.gw-board-row-media {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.gw-board-filter {
		padding: 0.55rem 0.6rem;
		margin-bottom: 1.25rem;
	}

	.gw-board-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		list-style: none;
		cursor: pointer;
		padding: 0.8rem 0.95rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		color: #fff;
		background: var(--gw-cta);
		border-radius: 2px;
	}

	.gw-board-filter-toggle::-webkit-details-marker {
		display: none;
	}

	.gw-board-filter-toggle::after {
		content: "▾";
		font-size: 0.9em;
		transition: transform 0.15s ease;
	}

	.gw-board-filter-details[open] .gw-board-filter-toggle::after {
		transform: rotate(180deg);
	}

	.gw-board-filter-inner {
		padding-top: 1rem;
	}

	.gw-board-filter-row {
		gap: 1.1rem;
	}

	.gw-board-field,
	.gw-board-field--topics,
	.gw-board-field--features,
	.gw-board-field--region {
		flex: 1 1 100%;
		min-width: 0;
	}

	.gw-board-field select,
	.gw-board-field--region select {
		width: 100%;
		min-width: 0;
	}

	.gw-board-check {
		font-size: 1rem;
	}

	.gw-board-row-title {
		font-size: 1.2rem !important;
	}

	.gw-board-highlight-title {
		font-size: 1.2rem !important;
	}

	.gw-board-searchrow {
		flex-direction: column;
	}

	.gw-board-submit {
		width: 100%;
		padding-block: 0.8rem;
	}

	.gw-board-meta {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.75rem;
	}

	.gw-board-sortform {
		width: 100%;
	}

	.gw-board-sortform select {
		flex: 1 1 auto;
	}

	.gw-board-viewtoggle {
		width: 100%;
	}

	.gw-board-viewtoggle-link {
		flex: 1 1 0;
		text-align: center;
	}

	.gw-board-map-canvas {
		height: 320px;
	}

	.gw-board-loadmore {
		display: block;
		text-align: center;
	}
}

/* ===========================================================================
 *  Review-Nachbesserungen (Nachtlauf 2026-06-09)
 * ===========================================================================
 *  Hinweis CI-Tokens: Basis-CSS nutzt --gwp-* (gescoped auf .gw-place/.gw-places-*),
 *  Board-CSS nutzt --gw-* (gescoped auf .gw-board). Bewusst getrennt; werden NIE in
 *  derselben Regel gemischt. Beim Zusammenführen geteilter Komponenten vereinheitlichen.
 */

/* a11y: visuell verstecktes Label — Avada liefert .screen-reader-text nicht zuverlässig
   für beliebige Frontend-Inhalte; eigene Utility sichert das „Suchbegriff"-Label ab. */
.gw-board .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Leerer Karten-Container (keine Geo-Koordinaten) optisch vom „wird geladen"-Zustand trennen. */
.gw-board-map--empty {
	background: var(--gw-badge);
}

.gw-board-map--empty .gw-board-map-notice {
	font-style: italic;
}

/* Ganze Board-Zeile klickbar (Parität zur Highlight-Card): der Titel-Link spannt sich
   per Overlay über die Zeile. Medien-/Promo-Links bleiben per z-index klickbar. */
.gw-board-row {
	position: relative;
}

.gw-board-row-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gw-board-row-media,
.gw-board-row-promo a {
	position: relative;
	z-index: 1;
}

/* H2-Überschriften gegen Avadas aggressive h1..h6-Typo absichern (wie die h3-Titel mit
   !important). Sonst überschreibt das Theme Größe/Farbe → Marken-Inkonsistenz. */
.gw-board-highlights-heading {
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	color: var(--gw-brand) !important;
}

.gw-hub-section-heading {
	font-size: 1.4rem !important;
	font-weight: 600 !important;
	color: var(--gw-brand) !important;
}

/* ===========================================================================
 *  See-Hub im Allgäu-Look (Layout/Rhythmus von allgaeu.de, Farben = MeinSeenland-CI)
 *  Hero-Band + zentrierte Sektionen + großzügiger Weißraum + abgerundete Karten.
 * ===========================================================================
 */
.gw-hub-hero {
	position: relative;
	margin: 0 0 2.75rem;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3.5rem);
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--gw-brand) 0%, var(--gw-cta) 100%);
	color: #fff;
}

/* Mit rechtegeprüftem Hero-Bild (Scrim ist im inline-style gesetzt). */
.gw-hub-hero--image {
	background-size: cover;
	background-position: center;
}

.gw-hub-hero-inner {
	position: relative;
	max-width: 40rem;
}

.gw-hub-hero-kicker {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.gw-hub-hero-title {
	margin: 0 !important;
	font-size: clamp(2rem, 5vw, 3.4rem) !important;
	font-weight: 600 !important;
	line-height: 1.08 !important;
	color: #fff !important;
}

.gw-hub-hero-lead {
	margin: 1.1rem 0 0;
	max-width: 34rem;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

.gw-hub-hero-cta {
	display: inline-block;
	margin-top: 1.85rem;
	padding: 0.85rem 2.1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gw-brand);
	text-decoration: none;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.gw-hub-hero-cta:hover,
.gw-hub-hero-cta:focus {
	color: var(--gw-brand);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* Intro: zentriert + großzügig (Allgäu-Sektionsrhythmus). */
.gw-board--hub .gw-hub-intro {
	max-width: 46rem;
	margin: 0 auto 2.75rem;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--gw-ink-soft);
}

.gw-board--hub .gw-hub-section {
	margin: 2.75rem 0 1rem;
}

.gw-board--hub .gw-hub-section-heading {
	text-align: center;
	margin-bottom: 1.5rem;
}

/* CTA unter der Lokal-Liste zentrieren (Allgäu-Stil: mittiger Sektions-Abschluss). */
.gw-board--hub .gw-hub-section .gw-board-loadmore {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 2rem auto 0;
}

@media (max-width: 640px) {
	.gw-hub-hero {
		padding: 2.25rem 1.25rem;
		border-radius: 12px;
	}

	.gw-hub-hero-inner {
		max-width: none;
	}
}

/* ===========================================================================
 *  Ausflugsplaner-Embeds in den See-Hubs (gw-webcams „Live & Wetter",
 *  gw-events „Veranstaltungen"). Die Embeds bringen ihr eigenes, CI-gleiches
 *  CSS mit; hier nur Layout-Glue für den Allgäu-Sektionsrhythmus.
 * ===========================================================================
 */
.gw-board--hub .gw-hub-section--live .gw-webcams-dashboard--embed,
.gw-board--hub .gw-hub-section--events .gw-events-list {
	margin-top: 0;
	margin-inline: auto;
}

/* CI-Angleich: gw-webcams mappt --gw-cta auf --awb-color6 (live = Grau) und --gw-brand
 * auf --awb-color5 (live = Teal). Im Hub-Embed auf die Board-Konvention zwingen, damit
 * der Akzent Teal und die Marke Petrol ist (sonst grauer CTA mitten im Petrol/Teal-Hub).
 * Nur im Embed gescopet — die Standalone-Seite /seenland-live/ bleibt unberührt. */
.gw-board--hub .gw-webcams-dashboard--embed {
	--gw-brand: var(--primary_color, #17415f);
	--gw-cta: var(--awb-color5, #01708e);
	--gw-cta-hover: #015f78;
}

/* ===========================================================================
 *  See-Ausflugsplaner ([gw_lake_planner]) — Live-Band + Sprung-Chips + Sektionen
 *  In bestehende Avada-See-Seiten eingebettet: Band/Chips vor der Story, Sektionen
 *  danach. Tokens/Look = Marken-CI (Petrol/Teal). Allgäu-Rhythmus + responsiv.
 * ===========================================================================
 */
.gw-board--planner{margin-block:0}

/* Live-Band */
.gw-band{max-width:var(--gw-board-max-width,1248px);margin:1.25rem auto 0;padding-inline:1rem}
.gw-band-inner{background:var(--gw-card,#fff);border:1px solid var(--gw-border);border-radius:16px;
  box-shadow:0 22px 55px -30px rgba(12,35,52,.4);padding:1rem;display:flex;
  flex-wrap:wrap;justify-content:center;gap:.5rem}
.gw-band-card{display:flex;gap:.7rem;align-items:center;padding:.55rem .75rem;border-radius:12px;
  text-decoration:none;transition:background .15s;min-height:66px;flex:1 1 180px;max-width:260px}
.gw-band-card:hover{background:var(--gw-panel)}
.gw-band-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-size:1.25rem;background:color-mix(in srgb,var(--gw-cta,#01708e) 12%,#fff)}
.gw-band-txt{display:flex;flex-direction:column;min-width:0}
.gw-band-v{font-size:1.15rem;font-weight:700;color:var(--gw-brand);line-height:1.05}
.gw-band-l{font-size:.8rem;color:var(--gw-ink-soft)}
.gw-band-card--cam{position:relative;overflow:hidden;padding:0;display:flex;align-items:stretch;flex:1 1 220px;max-width:300px;min-height:76px}
.gw-band-card--cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gw-band-cam-cap{position:relative;z-index:1;margin-top:auto;width:100%;color:#fff;font-size:.8rem;
  font-weight:600;padding:.45rem .6rem;display:flex;align-items:center;gap:.35rem;
  background:linear-gradient(0deg,rgba(10,49,81,.85),transparent)}
.gw-band-pulse{width:8px;height:8px;border-radius:50%;background:#3ad17a;
  box-shadow:0 0 0 0 rgba(58,209,122,.6);animation:gw-pulse 1.8s infinite}
@keyframes gw-pulse{70%{box-shadow:0 0 0 7px rgba(58,209,122,0)}100%{box-shadow:0 0 0 0 rgba(58,209,122,0)}}

/* Sprung-Chips */
.gw-band-chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;
  max-width:var(--gw-board-max-width,1248px);margin:1.1rem auto .2rem;padding-inline:1rem}
.gw-band-chip{font-size:.9rem;font-weight:600;color:var(--gw-brand);background:var(--gw-panel);
  border:1px solid var(--gw-border);border-radius:999px;padding:.5rem 1.05rem;text-decoration:none}
.gw-band-chip:hover{background:#fff;border-color:var(--gw-cta);color:var(--gw-cta)}

/* Dynamik-Sektionen */
.gw-planner-sec{max-width:var(--gw-board-max-width,1248px);margin:3rem auto 0;padding-inline:1rem;scroll-margin-top:1rem}
.gw-planner-sec-head{text-align:center;margin-bottom:1.5rem}
.gw-planner-eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gw-cta);font-weight:600}
.gw-planner-h{font-size:1.7rem!important;font-weight:600!important;color:var(--gw-brand)!important;margin:.35rem 0 0!important}
.gw-planner-more{text-align:center;margin:1.6rem 0 0}

/* Eingebettete Schwester-Komponenten an die CI angleichen (Teal-Akzent, Petrol-Marke). */
.gw-board--planner .gw-webcams-dashboard--embed{
  --gw-brand:var(--primary_color,#17415f);
  --gw-cta:var(--awb-color5,#01708e);
  --gw-cta-hover:#015f78;
  margin-top:0;margin-inline:auto}
.gw-board--planner .gw-events-list{margin-top:0;margin-inline:auto}

@media (max-width:780px){
  .gw-band-inner{gap:.4rem;padding:.8rem;border-radius:14px}
  .gw-band-card{flex:1 1 140px;min-height:60px}
  .gw-band-card--cam{flex:1 1 100%;min-height:120px}
  .gw-planner-sec{margin-top:2.4rem}
}

/* Story-Fold: bestehende redaktionelle See-Story wird gekürzt + „Weiterlesen" (CSS-only). */
.gw-story-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gw-lake-story{position:relative;max-height:26rem;overflow:hidden;transition:max-height .35s ease}
.gw-lake-story::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7rem;
  background:linear-gradient(transparent,#fff);pointer-events:none}
.gw-story-toggle:checked ~ .gw-lake-story{max-height:1200rem}
.gw-story-toggle:checked ~ .gw-lake-story::after{opacity:0}
.gw-story-more{display:block;width:max-content;max-width:100%;margin:1.25rem auto 0;cursor:pointer;
  padding:.55rem 1.6rem;font-weight:600;letter-spacing:.02em;color:#01708e;background:#f6f8f9;
  border:1px solid #01708e;border-radius:999px}
.gw-story-more:hover{color:#fff;background:#01708e}
.gw-story-more::after{content:"Weiterlesen ▾"}
.gw-story-toggle:checked ~ .gw-story-more::after{content:"Weniger anzeigen ▴"}

/* Planner-Hero (See-Foto + Titel) — wie im Konzept; Band überlappt den Hero. */
.gw-board--planner .gw-planner-hero{position:relative;min-height:clamp(420px,54vh,600px);display:flex;align-items:flex-end;
  background-size:cover;background-position:center;color:#fff;border-radius:16px;overflow:hidden;margin:0 auto}
.gw-planner-hero-in{position:relative;max-width:var(--gw-board-max-width,1248px);width:100%;margin:0 auto;padding:2.25rem 1.5rem 4.25rem}
.gw-planner-hero-kick{margin:0 0 .55rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.gw-planner-hero-h1{margin:0 !important;font-size:clamp(2.1rem,5.5vw,3.6rem) !important;font-weight:600 !important;line-height:1.08 !important;color:#fff !important}
.gw-planner-hero-lead{margin:.9rem 0 0;max-width:34rem;font-size:clamp(1.02rem,2vw,1.28rem);line-height:1.5;color:rgba(255,255,255,.92)}
.gw-planner-hero + .gw-band{margin-top:-3.25rem}
.gw-planner-hero + .gw-band .gw-band-inner{position:relative;z-index:2}

/* Fold: genug Höhe, dass nach dem Story-Bild auch TEXT sichtbar ist (nicht nur das Foto). */
.gw-lake-story{max-height:52rem}
@media (max-width:780px){ .gw-board--planner .gw-planner-hero{min-height:40vh;border-radius:12px} .gw-lake-story{max-height:60rem} }

/* Konzept-treuer Story-Bereich: sauberer Text-Intro + „Mehr lesen" (natives <details>,
   wpautop-fest). Außerhalb von .gw-board → Marken-Hex statt Tokens. */
.gw-planner-intro{max-width:760px;margin:2.75rem auto .2rem;padding-inline:1.25rem}
.gw-planner-intro-h{font-size:1.85rem !important;font-weight:600 !important;color:#17415f !important;margin:0 0 1rem !important;line-height:1.15 !important;text-align:left !important}
.gw-planner-intro p{color:#2c2f33;line-height:1.7;margin:0 0 1rem;font-size:1.05rem}
.gw-story-details{max-width:760px;margin:0 auto;padding-inline:1.25rem}
.gw-story-details > summary{list-style:none;cursor:pointer;display:inline-block;color:#01708e;font-weight:600;font-size:1.02rem;border-bottom:2px solid rgba(1,112,142,.32);padding-bottom:2px}
.gw-story-details > summary::-webkit-details-marker{display:none}
.gw-story-details > summary::after{content:" →";transition:transform .2s}
.gw-story-details[open] > summary::after{content:" ↑"}
.gw-story-full{margin-top:1.75rem}