/*
 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-start: max(var(--space-xs), var(--karte-inhalt) - var(--karte-polster));
	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);
	}
}

.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);
	}
}