/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Leichte Sprache: hidden-Attribut gegen Bricks' display:flex durchsetzen –
   ohne diese Regel bleiben ls-alltag und ls-leicht beide sichtbar */
.ls-wrapper [hidden] {
	display: none !important;
}

/* Umschalter Leichte Sprache */
.ls-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1em;
	border: 2px solid currentColor;
	border-radius: 999px; /* Pill-Form signalisiert „Schalter" */
	font-size: 1rem;
	cursor: pointer;
}

/* Bewusst kein abweichender „aktiv"-Zustand: Der Button ist ein
   Aktions-Button (Label nennt die Fassung, zu der gewechselt wird).
   Eine gefüllte Optik würde die falsche Ansicht als „an" markieren. */

/* Offizielles Leichte-Sprache-Symbol (© Inclusion Europe) vor dem Text.
   Aktuell deaktiviert, bis eine SVG-Fassung vorliegt. Zum Aktivieren:
   Original-Logo unter assets/img/leichte-sprache-logo.svg ablegen und
   den Block einkommentieren. Herkunftsvermerk fürs Impressum nicht
   vergessen (Bedingung von Inclusion Europe).
   Bewusst als CSS-Hintergrund statt Inline-SVG: Das Script tauscht beim
   Umschalten den textContent des Buttons – ein Kindelement ginge verloren.
.ls-toggle::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	background: url("assets/img/leichte-sprache-logo.svg") center / contain no-repeat;
}
*/

/* Tastatur-Fokus deutlich sichtbar */
.ls-toggle:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* Nur für Screenreader: visuell versteckt, aber im Accessibility-Tree
   vorhanden (kein display:none!). .ls-status (Statusregion für
   Screenreader-Ansagen) nutzt dieselbe Regel. */
.sr-only,
.ls-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Text in Leichter Sprache: kürzere Zeilen, größere Schrift, mehr Luft.
   Zeilenlänge macht das CSS – im Feld bitte keine manuellen Umbrüche,
   sondern jeden Satz als eigenen Absatz schreiben. */
.ls-leicht {
	max-width: 45ch;
	font-size: 1.125em;
	line-height: 1.7;
	text-align: left;
	hyphens: none;
}

/* Absätze als Satz-Einheiten: kompakter Abstand statt großer Lücken */
.ls-leicht p {
	margin-block: 0 0.4em;
}
/* Fokuspunkt aus der Mediathek (inc/fokuspunkt.php): vorerst nur im Hero.
   Weitere Bereiche bei Bedarf als Selektor ergänzen – Karten
   (.post-card__media) bleiben bewusst mittig. */
.hero img {
	object-position: var(--msa-fokus, 50% 50%);
}

/* ------------------------------------------------------------------
   Karte (assets/js/karte.js)
   Das komplette Aussehen steht hier. In Bricks tragen die Elemente nur
   die Klassen (keine Stile an den Klassen, sonst gewinnt Bricks, weil
   dessen CSS nach style.css geladen wird). Die Höhe gibt die Section
   drumherum vor (position: relative + Höhe, z. B. 50vh).

   Gesperrt: Vorschau aus lokalen Kacheln, grau und blass.
   .karte--aktiv: Live-Karte von OSM, leicht entsättigt, damit der
   orange Pin heraussticht und sie zur Palette passt.
   ------------------------------------------------------------------ */
.karte {
	/* Linke Kante der Inhaltsspalte (entspricht .brxe-container:
	   zentrierte --container-width plus Innenabstand --space-s) */
	--karte-inhalt: calc(max(0px, (100% - var(--container-width)) / 2) + var(--space-s));
	/* Platz unter dem Hinweis für die Aktionsleiste */
	--karte-leiste: calc(3rem + 2 * var(--space-s));

	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding-block: var(--space-s) var(--karte-leiste);
	overflow: hidden;
	background-color: var(--light-bg); /* solange die Kacheln laden */
}

/* Nur Fallback ohne JavaScript – das Script blendet es aus */
.karte__platzhalter {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Leaflet füllt die ganze Fläche; z-index: 0 hält seine Ebenen
   (Panes bis 700, Controls 800) unter Hinweis und Aktionen */
.karte__leaflet {
	position: absolute;
	inset: 0;
	z-index: 0;
	font: inherit; /* Leaflet setzt sonst Helvetica */
	background-color: var(--light-bg);
}

.karte__leaflet:focus {
	outline: none;
}

.karte__leaflet:focus-visible {
	outline: 3px solid var(--black);
	outline-offset: -3px;
}

.karte .leaflet-tile-pane {
	filter: grayscale(1);
	opacity: 0.5;
	transition: filter 0.3s, opacity 0.3s;
}

.karte--aktiv .leaflet-tile-pane {
	filter: grayscale(0.5);
	opacity: 1;
}

/* Hinweis-Karte: Text fluchtet mit der Inhaltsspalte darüber
   (Box um ihr Innenabstand nach links gezogen) */
.karte__overlay {
	--karte-polster: var(--space-m);

	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(30rem, 100% - 2 * var(--space-xs));
	margin-inline: var(--gutter);
	padding: var(--karte-polster);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s);
	background-color: hsla(0, 0%, 100%, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: calc(var(--radius) / 2);
	box-shadow: 0 0.25rem 1.5rem hsla(0, 0%, 0%, 0.12);
}

@media (min-width: 768px) {
	.karte__overlay {
		--karte-polster: var(--space-l);
		margin-inline-start: max(var(--space-xs), var(--karte-inhalt) - var(--karte-polster));
	}
}

.karte__hinweis {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.karte__hinweis a {
	color: inherit;
	text-decoration: underline;
}

/* Buttons: Pill-Form wie beim Leichte-Sprache-Umschalter */
.karte__button,
.karte__route,
.karte__ausblenden {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 1.2em;
	border: 2px solid var(--gray);
	border-radius: 999px;
	font: inherit;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

/* Hauptaktion: gefüllt */
.karte__button,
.karte__route {
	background-color: var(--gray);
	color: var(--white);
}

.karte__button:hover,
.karte__route:hover {
	background-color: var(--black);
	border-color: var(--black);
}

/* Nebenaktion: hell mit feinem Rand (1px weniger Rand = 1px mehr
   Innenabstand, damit beide Buttons gleich hoch sind) */
.karte__ausblenden {
	padding: calc(0.6em + 1px) calc(1.2em + 1px);
	border-width: 1px;
	background-color: var(--white);
	color: var(--gray);
}

.karte__ausblenden:hover {
	background-color: var(--light-bg);
}

.karte__button:focus-visible,
.karte__route:focus-visible,
.karte__ausblenden:focus-visible {
	outline: 3px solid var(--black);
	outline-offset: 2px;
}

/* Pfeil kennzeichnet den externen Link (Text dazu steht als sr-only im Script) */
.karte__route::after {
	content: "↗" / "";
}

/* Pin im MSA-Orange; Form kommt als SVG aus karte.js.
   Leaflet gibt divIcons sonst weißen Hintergrund und Rahmen. */
.karte__pin {
	background: none;
	border: 0;
	color: hsl(24, 100%, 50%);
	filter: drop-shadow(0 2px 3px hsla(0, 0%, 0%, 0.35));
}

.karte__pin svg {
	display: block;
	fill: currentColor;
}

/* Zoom-Buttons und Quellenangabe dezent an die Buttons angleichen */
.karte .leaflet-bar {
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 0.125rem 0.75rem hsla(0, 0%, 0%, 0.2);
}

.karte .leaflet-bar a {
	color: var(--gray);
}

.karte .leaflet-bar a:focus-visible {
	outline: 3px solid var(--black);
	outline-offset: -3px;
}

.karte .leaflet-container a.leaflet-control-zoom-in,
.karte .leaflet-container a.leaflet-control-zoom-out {
	font: 600 1.25rem/30px system-ui, sans-serif;
}

.karte .leaflet-control-attribution {
	font-size: 0.7rem;
}

/* Aktionen an der linken Kante der Inhaltsspalte – in beiden Zuständen
   an derselben Stelle. Rechts oben sitzt der Zoom, rechts unten die
   OSM-Quellenangabe. */
.karte__aktionen {
	position: absolute;
	z-index: 2;
	left: var(--karte-inhalt);
	right: var(--space-s);
	bottom: var(--space-s);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	pointer-events: none; /* Leiste selbst lässt Klicks zur Karte durch */
}

.karte__aktionen > * {
	pointer-events: auto;
	box-shadow: 0 0.125rem 0.75rem hsla(0, 0%, 0%, 0.2);
}

@media (max-width: 767px) {
	/* Hinweis braucht mehr Platz als 50vh hergeben – der Pin rückt
	   darüber (karte.js) */
	.brxe-section:has(> .karte) {
		min-height: 36rem;
	}

	.karte {
		/* Leiste über der Quellenangabe, die unten rechts sonst kollidiert */
		--karte-leiste: calc(4.5rem + 2 * var(--space-s));

		align-items: flex-end;
	}

	.karte__aktionen {
		bottom: calc(var(--space-s) + 1.25rem);
	}
}

/* ------------------------------------------------------------------
   Lightbox (assets/js/lightbox.js) – aktiv in Elementen mit
   data-lightbox="1". Dialog füllt den Viewport, Bild wird eingepasst.
   ------------------------------------------------------------------ */

.lightbox-ausloeser {
	cursor: zoom-in;
}

.lightbox-ausloeser:focus-visible {
	outline: 3px solid hsl(24, 100%, 50%);
	outline-offset: 3px;
}

/* Hinweis-Symbol „Vergrößern" (Lupe mit Plus) oben rechts im Bild.
   Hängt an jeder <figure>, die ein vom Script markiertes Bild enthält
   (Einzelbild: figure.content-image, Galerie: je Bild die figure im <li>).
   Die Klasse setzt erst das Script – ohne JS also kein Symbol ohne Funktion.
   Rein dekorativ: Screenreader bekommen „Bild vergrößern" über das
   aria-label am Bild. Dunkler Kreis mit weißem
   Symbol, damit es auf hellen wie dunklen Bildern sichtbar bleibt (3:1). */
figure:has(> .lightbox-ausloeser) {
	position: relative;
}

figure:has(> .lightbox-ausloeser)::after {
	content: "";
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: hsla(0, 0%, 0%, 0.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 1.375rem no-repeat;
	pointer-events: none; /* Klick geht ans Bild darunter */
	transition: background-color 0.15s;
}

/* Beim Überfahren bzw. Tastaturfokus in MSA-Orange */
figure:has(> .lightbox-ausloeser:hover, > .lightbox-ausloeser:focus-visible)::after {
	background-color: hsl(24, 100%, 40%);
}

/* In mehrspaltigen Galerien etwas kleiner und näher an der Ecke */
.brxe-image-gallery figure:has(> .lightbox-ausloeser)::after {
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	background-size: 1.125rem;
}

/* Seite dahinter nicht scrollen, solange die Lightbox offen ist */
html:has(.lightbox[open]) {
	overflow: hidden;
}

.lightbox {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 4rem var(--space-s, 1rem) 3.5rem;
	border: 0;
	background: hsla(0, 0%, 0%, 0.92);
	color: #fff;
}

.lightbox[open] {
	display: grid;
	place-items: center;
}

.lightbox::backdrop {
	background: transparent;
}

.lightbox__figur {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	margin: 0;
	justify-content: center;
}

.lightbox__bild {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 10rem);
	max-height: calc(100dvh - 10rem);
	object-fit: contain;
	touch-action: pan-y pinch-zoom;
}

.lightbox__text {
	max-width: 60ch;
	text-align: center;
	line-height: 1.5;
}

.lightbox__zaehler {
	position: absolute;
	top: 1.25rem;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	font-variant-numeric: tabular-nums;
}

.lightbox__knopf {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: hsla(0, 0%, 100%, 0.15);
	color: #fff;
	cursor: pointer;
}

.lightbox__knopf:hover {
	background: hsla(0, 0%, 100%, 0.3);
}

.lightbox__knopf:focus-visible {
	outline: 3px solid hsl(24, 100%, 50%);
	outline-offset: 2px;
}

.lightbox__knopf svg {
	width: 1.5rem;
	height: 1.5rem;
}

.lightbox__knopf[hidden] {
	display: none;
}

.lightbox__schliessen {
	top: 0.5rem;
	right: 0.5rem;
}

.lightbox__zurueck,
.lightbox__weiter {
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__zurueck {
	left: 0.5rem;
}

.lightbox__weiter {
	right: 0.5rem;
}

/* Schmale Bildschirme: Blätter-Knöpfe unten statt übers Bild */
@media (max-width: 767px) {
	.lightbox__zurueck,
	.lightbox__weiter {
		top: auto;
		bottom: 0.5rem;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.lightbox[open] {
		animation: lightbox-ein 0.2s ease-out;
	}
}

@keyframes lightbox-ein {
	from {
		opacity: 0;
	}
}

/* Instagram-Feed (Spotlight): Hinweis auf Videos im Popup.
   Videos zeigt der Feed nur als Standbild (inc/instagram.php),
   assets/js/instagram.js setzt diesen Link darüber. */
.MediaPopupBoxImage__container:has(.msa-insta-video) {
	position: relative;
}

.msa-insta-video {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	max-width: calc(100% - 2rem);
	padding: 1rem 1.5rem;
	border-radius: 0.75rem;
	background-color: hsl(0 0% 0% / 0.7);
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.msa-insta-video svg {
	width: 3.5rem;
	height: 3.5rem;
}

.msa-insta-video:hover,
.msa-insta-video:focus-visible {
	background-color: hsl(0 0% 0% / 0.85);
	color: #fff;
	text-decoration: underline;
}

.msa-insta-video:focus-visible {
	outline: 3px solid hsl(24, 100%, 50%);
	outline-offset: 3px;
}

/* Externe Text- und Footer-Links: ↗ hinter dem Text – hier wird die Seite
   verlassen. data-external setzt inc/helpers.php automatisch; interne Links
   (Impressum, Newsletter, „mehr …") bleiben ohne. Navigation: nav__link, nicht betroffen. */
:is(.text-link, .footer__text-link)[data-external="1"]::after {
	content: "";
	display: inline-block;
	inline-size: 0.8em;
	block-size: 0.8em;
	margin-inline-start: 0.1em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}