/*!
Theme Name: AIR-lebnisse
Theme URI: https://www.air-lebnisse.de
Description: Astra child theme. Landing page + shop styling for the AIR-lebnisse balloon flight voucher shop. Self-contained: fonts, images and all layout ship inside the theme, no Customizer or database state required. Activate and it configures itself (menu location, logo).
Author: AIR-lebnisse
Author URI: https://www.air-lebnisse.de
Template: astra
Version: 1.50.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: air-lebnisse
GitHub Theme URI: air-lebnisse/air-lebnisse-theme
Primary Branch: main
*/

/* ------------------------------------------------------------------
   Design tokens (single source of truth for the whole theme)
   Accent is locked to the brand sky blue, see plan "Color Lock".
------------------------------------------------------------------ */
:root {
	--al-blue: #0067ff;
	--al-blue-dark: #005ee9;
	--al-ink: #0f172a;
	--al-slate: #364151;
	--al-mist: #e7f6ff;
	--al-line: #d1dae5;
	--al-paper: #fafcfe;
	--al-white: #ffffff;

	--al-font-display: Georgia, "Times New Roman", serif;
	--al-font-body: "Noto Sans", sans-serif;

	--al-radius-card: 16px; /* cards + media */
	--al-radius-input: 8px; /* form fields */
	--al-radius-pill: 999px; /* buttons */

	--al-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------
   Self-hosted fonts (GDPR-safe, no external requests)
------------------------------------------------------------------ */
@font-face {
	font-family: "Noto Sans";
	src: url("assets/fonts/noto-sans-v42-latin_latin-ext-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("assets/fonts/noto-sans-v42-latin_latin-ext-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("assets/fonts/noto-sans-v42-latin_latin-ext-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("assets/fonts/noto-sans-v42-latin_latin-ext-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------
   Base typography (overrides Astra's Google-Fonts stacks; the
   matching webfonts are dequeued in functions.php)
------------------------------------------------------------------ */
body,
button,
input,
select,
textarea {
	font-family: var(--al-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.site-title a,
.main-header-menu .menu-link {
	font-family: var(--al-font-display);
}

body {
	background: var(--al-white);
	color: var(--al-slate);
}

/* Anchor targets clear the fixed header */
html {
	scroll-padding-top: 96px;
}

/* ------------------------------------------------------------------
   Header: solid by default; transparent over the landing hero only
   when JS is available (html.js + body.al-landing-top).
------------------------------------------------------------------ */
.site-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	transition: background 0.35s var(--al-ease), border-color 0.35s var(--al-ease);
	padding-top: env(safe-area-inset-top);
}

.ast-primary-header-bar {
	max-width: 80vw;
	margin: 0 auto;
}

.admin-bar .site-header {
	top: 32px;
}

/* Inhalt beginnt unter der fixierten Navigation.
   --al-header-h wird per JS auf die echte Headerhoehe gesetzt (header-offset.js);
   88px bleibt nur der Rueckfall, falls das Script nicht laeuft. */
body:not(.al-landing) .site-content,
body:not(.al-landing) #content {
	padding-top: var(--al-header-h, 88px);
}

/* Das Blocks-Plugin markiert jede Seite mit AIR-lebnisse-Bloecken als
   `al-landing`, damit der Inhalt full-bleed laeuft (`padding:0 !important`).
   Auf Seiten ohne grossen Hero (z. B. /wohnbau/) fehlte dadurch der Abstand
   unter der fixierten Navigation -- dort blieb eine Luecke von 19px
   (#primary margin 100px minus Headerhoehe). Seiten MIT Hero bleiben
   unberuehrt: dort soll das Bild unter dem Header durchlaufen. */
body.al-landing:not(.home) #content.site-content:not( :has( .al-page-hero ) ) {
	padding-top: var(--al-header-h, 88px) !important;
}

body.al-landing:not(.home) #content.site-content:not( :has( .al-page-hero ) ) #primary {
	margin-top: 0 !important;
}

.main-header-menu .menu-link,
.ast-header-navigation .menu-link {
	font-weight: 600;
	font-size: 15px;
	color: var(--al-ink);
	transition: color 0.2s var(--al-ease);
}

.main-header-menu .menu-link:hover,
.ast-header-navigation .menu-link:hover {
	color: var(--al-blue);
}

/* Transparent state over the hero (JS-gated, landing only, desktop nav
   only: below Astra's 922px breakpoint the header stays solid so the
   mobile flyout keeps dark links on its light panel) */
@media (min-width: 922px) {
	html.js body.al-landing-top .site-header {
		background: transparent;
		border-bottom-color: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Astra's inner header bar has its own opaque white background */
	html.js body.al-landing-top .ast-primary-header-bar {
		background: transparent !important;
	}

	html.js body.al-landing-top .main-header-menu .menu-link,
	html.js body.al-landing-top .ast-header-navigation .menu-link,
	html.js body.al-landing-top .site-title,
	html.js body.al-landing-top .site-title a {
		color: #ffffff;
	}

	html.js body.al-landing-top .main-header-menu .menu-link:hover,
	html.js body.al-landing-top .ast-header-navigation .menu-link:hover {
		color: var(--al-mist);
	}
}

/* Logo sizing */
.site-logo-img img,
.custom-logo {
	max-height: 48px;
	width: auto;
}

/* ------------------------------------------------------------------
   Landing: break out of Astra's clamped container so hero and
   full-width sections span the viewport (documented Astra gotcha).
   Most of this is handled structurally in front-page.php / landing.php,
   but these CSS overrides prevent any edge-case width clamping.
------------------------------------------------------------------ */
body.al-landing .ast-container {
	max-width: none !important;
	padding: 0 !important;
	width: 100vw !important;
	display: block !important;
}

body.al-landing #content.site-content,
body.al-landing .site-content {
	padding: 0 !important;
	margin: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
}

body.al-landing #page.hfeed.site {
	width: 100vw !important;
	max-width: 100vw !important;
	overflow-x: hidden;
}

body.al-landing #primary,
body.al-landing #main {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
}

body.al-landing .ast-main-header-wrap {
	border-bottom: none;
}

/* ------------------------------------------------------------------
   Astra-Titel-Banner auf der Landing Page robust verstecken
   (Sicherheit zu landing.css / frontend.css; mit !important gegen
   Astras gleich spezifische dynamic-CSS-Regeln).
------------------------------------------------------------------ */
body.al-landing .entry-header,
body.al-landing .ast-single-entry-banner,
body.al-landing .ast-archive-entry-banner {
	display: none !important;
}

body.al-landing .ast-article-single {
	padding: 0 !important;
	margin: 0 !important;
}

body.al-landing .entry-content {
	margin: 0 !important;
	padding: 0 !important;
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.site-footer {
	background: var(--al-ink);
	color: rgba(255, 255, 255, 0.75);
	padding-bottom: env(safe-area-inset-bottom);
}

/* ------------------------------------------------------------------
   Footer (Markup: footer.php) — der Landing-Footer, jetzt auf allen Seiten.
   Ersetzt Astras eigenen Footer; die Tokens kommen aus diesem Theme.
------------------------------------------------------------------ */
.al-footer {
	background: var(--al-ink);
	color: rgba(255, 255, 255, 0.7);
	padding: clamp(48px, 6vw, 80px) 0;
	width: 100%;
}

.al-footer-inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
}

.al-footer h4 {
	margin: 0 0 16px;
	font-family: var(--al-font-display);
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.al-footer p,
.al-footer a {
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
}

.al-footer a:hover {
	color: #ffffff;
}

.al-footer-contact p {
	margin: 0 0 8px;
}

.al-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.al-footer-links li {
	margin-bottom: 8px;
}

.al-footer-bottom {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 921px) {
	.al-footer-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* WhatsApp-Button */
.al-whatsapp-fab {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999;
	width: 56px;
	height: 56px;
	border-radius: 999px; /* Pille, nicht Ellipse */
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
	transition: transform 0.25s var(--al-ease), box-shadow 0.25s var(--al-ease);
	text-decoration: none;
}

/* Hover: kein Blau (das Icon nutzt fill:currentColor und haette sonst
   den Akzentfarbton der Seite bekommen -- gemessen color: rgb(0,94,233)),
   stattdessen BREITEN-Animation plus eingeblendeter Text (Jan). */
.al-whatsapp-fab {
	/* color explizit: sonst gewinnt eine fremde a:hover-Regel */
	color: #fff !important;
	/* 50% waere beim Oeffnen (254x56) eine Ellipse -- Pille statt
	   Ellipse (Jan): fester groesserer Radius, der bei 56x56 rund
	   bleibt und bei 254x56 als Pillen-Ende wirkt. */
	border-radius: 999px;
	overflow: hidden;
	white-space: nowrap;
	width: 56px;
	transition: width 0.36s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
	            color 0.2s linear;
}

.al-whatsapp-fab__text {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	font-family: var(--al-font-body, "Noto Sans", sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: max-width 0.36s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.24s ease 0.06s,
	            margin-left 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.al-whatsapp-fab:hover,
.al-whatsapp-fab:focus-visible {
	transform: none;            /* keine Skalierung, nur Breite */
	/* Platz: Icon 28 + Abstand 10 + Text 204 + 2*14 Innenabstand = 270 */
	width: 272px;
	background: #1eb855;
	color: #fff !important;
	box-shadow: 0 8px 26px rgba(37, 211, 102, 0.5);
}

.al-whatsapp-fab:hover .al-whatsapp-fab__text,
.al-whatsapp-fab:focus-visible .al-whatsapp-fab__text {
	/* gemessene Textbreite 204px -- vorher 190px, dadurch wurde
	   "WhatsApp" am Ende abgeschnitten (Vision: "Schreibe uns auf WhatsA"). */
	max-width: 212px;
	opacity: 1;
	margin-left: 10px;
}

.al-whatsapp-fab svg {
	width: 28px;
	height: 28px;
}

/* ------------------------------------------------------------------
   Kurze Seiten: Fußzeile bis zur Unterkante ziehen
   Ohne das endet eine Seite, die kürzer ist als das Fenster (z. B.
   /kontakt/ oder ein leerer Warenkorb), in weißem Nichts unter dem
   Footer. Flex-Column auf #page schiebt ihn an den unteren Rand,
   ohne die Höhe langer Seiten (Landing, Shop) zu verändern.
------------------------------------------------------------------ */
#page.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#page.site > #content.site-content {
	flex: 1 0 auto;
}

#page.site > .al-footer {
	flex: 0 0 auto;
}


/* ------------------------------------------------------------------
   Formulare in Inhalten (WPForms)
   Felder ohne sichtbare Border mit Radius; im Fokus eine dezente,
   durchgezogene schwarze Kante. Alle Felder laufen auf dieselbe Breite.
------------------------------------------------------------------ */
.entry-content .wpforms-container {
	margin: 0;
	max-width: 100%;
}

.entry-content .wpforms-field {
	padding: 0 0 18px;
}

.entry-content .wpforms-field-label {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var(--al-slate);
	margin-bottom: 6px;
}

.entry-content .wpforms-field-sublabel {
	font-size: 12px;
	color: var(--al-slate);
	opacity: 0.75;
	margin-bottom: 4px;
}

/* Namens-Unterfelder: Beschriftung steht über dem Feld (WPForms setzt sie sonst darunter) */
.entry-content .wpforms-field-row-block {
	display: flex;
	flex-direction: column;
}

.entry-content .wpforms-field-row-block .wpforms-field-sublabel {
	order: -1;
}

.entry-content .wpforms-field input[type="text"],
.entry-content .wpforms-field input[type="email"],
.entry-content .wpforms-field input[type="tel"],
.entry-content .wpforms-field input[type="number"],
.entry-content .wpforms-field textarea,
.entry-content .wpforms-field select {
	width: 100%;
	max-width: 100%;
	background: rgba(15, 23, 42, 0.05);
	border: 1px solid transparent;
	border-radius: var(--al-radius-input);
	padding: 12px 14px;
	font-size: 15px;
	color: var(--al-ink);
	box-shadow: none;
	transition: border-color 0.2s var(--al-ease), background-color 0.2s var(--al-ease);
}

.entry-content .wpforms-field textarea {
	min-height: 140px;
	resize: vertical;
}

.entry-content .wpforms-container .wpforms-field input:focus,
.entry-content .wpforms-container .wpforms-field textarea:focus,
.entry-content .wpforms-container .wpforms-field select:focus {
	outline: none;
	background: var(--al-white);
	border-color: var(--al-ink);
	box-shadow: none;
}

/* Namensfeld: Vorname/Nachname je halbe Breite, zusammen volle Breite */
.entry-content .wpforms-field-row-block {
	padding: 0;
}

.entry-content .wpforms-field-row {
	gap: 12px;
}

.entry-content .wpforms-submit-container {
	padding: 6px 0 0;
}

.entry-content .wpforms-submit {
	border: 0;
	border-radius: var(--al-radius-pill);
	background: var(--al-ink);
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: 14px 30px;
	cursor: pointer;
	transition: background-color 0.2s var(--al-ease), transform 0.2s var(--al-ease);
}

.entry-content .wpforms-submit:hover {
	background: var(--al-blue);
	color: #ffffff;
}

.entry-content .wpforms-submit:active {
	transform: translateY(1px);
}

/* Fehlermeldungen in der Sprache des Themes, nicht in WPForms-Rot */
.entry-content .wpforms-error {
	border-color: #b00020 !important;
}


/* ------------------------------------------------------------------
   Inhaltsseiten (Beiträge/Seiten mit Blöcken)
   Ein kleines Bausteinsystem: Typografie, Karten, Lead, CTA-Band,
   Bildreihe. Gilt nur in .entry-content und arbeitet mit den
   Block-Stilen "Karte", "Lead" und "CTA-Band" (functions.php).
   Lesebreite: --al-lese = 920 px bei 17,5 px Schrift (~107 Zeichen, per
   Canvas-Messung bestaetigt). Jan empfand 680 px UND 760 px als "zu schmal"
   und die migrierten Seiten schmaler als die Produktionsseiten.
   Produktions-Referenz: Elementor-Container dort 1140 px
   (`.e-con { --container-max-width: 1140px }`), Astra-Container 1240 px.
   96 px mehr Containerbreite (1104 -> 1200) plus 100 px mehr Textbreite
   holen die Seiten auf dieses Niveau. Ueber 960 px waeren es 111 Zeichen,
   das ist die Obergrenze fuer eine ruhige Zeile.
   Karten/Grids und Ballon-Reihe duerfen breiter laufen.
------------------------------------------------------------------ */
.entry-content {
	--al-flow: 24px;
	--al-lese: 70vw;
}

.entry-content > * + * {
	margin-top: var(--al-flow);
}

/* Der Objekt-Container beginnt direkt unter der Navigation. Das
   vorangestellte QR-Tracking-Markup (verstecktes div + script) macht ihn zum
   "* + *" und schob ihn bisher um --al-flow nach unten. */
.entry-content > .al-obj-steckbrief {
	margin-top: 0;
}

/* constrained-Group setzt margin-inline:auto auf ihre Kinder
   (.wp-block-group.is-layout-constrained > :where(...)) - damit wanderte
   der Fliesstext in die Seitenmitte statt linksbuendig zu stehen.
   Eigene Klasse statt nur .entry-content, um die Spezifitaet zu schlagen. */
.entry-content p {
	font-size: 17.5px;
	line-height: 1.72;
	color: var(--al-slate);
	max-width: var(--al-lese);
}

/* WPs Layout-Regel setzt margin-inline:auto (nicht margin-left) -
   margin-left: 0 allein ueberschreiben das nicht. Beide setzen. */
.entry-content .wp-block-group.is-layout-constrained > p,
.entry-content .wp-block-group.is-layout-constrained > h2,
.entry-content .wp-block-group.is-layout-constrained > h3,
.entry-content .wp-block-group.is-layout-constrained > ul,
.entry-content .wp-block-group.is-layout-constrained > .wp-block-group > p,
.entry-content .wp-block-group.is-layout-constrained > .wp-block-group > h2 {
	margin-left: 0;
	margin-right: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

.entry-content h2.wp-block-heading,
.entry-content h3.wp-block-heading {
	font-family: var(--al-font-display);
	color: var(--al-ink);
	line-height: 1.25;
	margin: 0;
	max-width: var(--al-lese);
}

.entry-content h2.wp-block-heading {
	font-size: clamp(24px, 2.2vw, 31px);
	margin-top: 52px;
	margin-left: 0;
	margin-right: 0;
}

.entry-content h3.wp-block-heading {
	font-size: clamp(19px, 1.6vw, 23px);
	margin-top: 24px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 22px;
	max-width: var(--al-lese);
}

.entry-content li {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--al-slate);
	margin-bottom: 6px;
}

/* Absatz-Dopplungen des Originals (fortlaufend schlicht) */
.entry-content p strong {
	color: var(--al-ink);
	font-weight: 650;
}

/* ------------------------------------------------------------------
   Abschnitts-Optik: Trennlinie + Eyebrow vor jedem H2-Abschnitt,
   damit die fuenf Textbloecke nicht als eine Wand liest.
   Der Eyebrow ist ein reines CSS-Element (::before) - kein Text
   im Block, damit Jan die Texte weiter in der DB pflegt.
------------------------------------------------------------------ */
.entry-content h2.wp-block-heading:not(:first-child) {
	position: relative;
	padding-top: 26px;
	padding-left: 0;
}

.entry-content h2.wp-block-heading:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 3px;
	content: "";
}

/* ------------------------------------------------------------------
   Karten im Stil der Landing Page
   Die Startseite nutzt keine geschlossenen Boxen, sondern Listen mit
   Haarlinien und runden Icon-Kreisen (.al-benefits-list). Diese
   Karten folgen dem: keine Box, keine Akzentbalken, kein Schatten -
   nur eine feine Trennlinie, Nummer und Serifentitel. Das nimmt den
   " generischen KI-Kachel"-Look und passt zur Startseite.
------------------------------------------------------------------ */
.entry-content .is-style-card {
	background: none;
	border: 0;
	border-top: 1px solid var(--al-line);
	border-radius: 0;
	padding: 26px 0 28px;
	box-shadow: none;
	transition: none;
}

.entry-content .is-style-card:hover {
	box-shadow: none;
	transform: none;
	background: none;
	border-color: var(--al-ink);
}

.entry-content .is-style-card > * + * {
	margin: 0;
}

.entry-content .is-style-card p {
	margin: 0;
	max-width: none;
	font-size: 16px;
	line-height: 1.6;
}

/* Nummer links, wie eine Liste - erzeugt CSS, kein Text im Block */
.entry-content .al-list-item {
	position: relative;
	padding-left: 62px;
}

/* Kreis am Titel ausrichten statt mit festem top-Wert: bei zwei- und
   dreizeiligen Eintraegen saß der Kreis 5-7 px neben der Titelmitte
   (gemessen, 9 Eintraege auf /sponsoring/). `top: 0` + translateY(-50%)
   setzt ihn auf die Mitte der ersten Zeile, unabhaengig vom Zeilenumfang. */
.entry-content .al-list-item::before {
	content: counter(al-item);
	counter-increment: al-item;
	position: absolute;
	left: 0;
	/* Titelmitte gemessen (Probe kreis_exakt.js, 18.5px-Titel mit
	   24 px Zeilenhoehe): strong.beginnt 27 px unter der Listenoberkante,
	   ist 24 px hoch -> Mitte bei 39 px. Feste 26 px ergab 7 px
	   daneben, top:0 ergab -19 px. Der Wert wandert mit der Schriftgroesse,
	   darum steht er hier ausgeschrieben statt gerechnet zu werden. */
	top: 39px;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--al-mist);
	color: var(--al-blue);
	font-family: var(--al-font-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s var(--al-ease), color 0.25s var(--al-ease);
}

.entry-content .al-list-item:hover::before {
	background: var(--al-blue);
	color: #fff;
}

/* Zaehler je Liste zuruecksetzen, damit 1-5 und 1-4 getrennt laufen */
.entry-content .al-list {
	counter-reset: al-item;
}

/* Titel im Serifen-Face wie die Landing-Ueberschriften, kein Blaue-Stress */
.entry-content .is-style-card strong {
	display: block;
	margin: 0 0 6px;
	color: var(--al-ink);
	font-family: var(--al-font-display);
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color 0.25s var(--al-ease);
}

.entry-content .is-style-card:hover strong {
	color: var(--al-blue);
}

.entry-content .is-style-card a {
	color: var(--al-blue);
}

/* ------------------------------------------------------------------
   Liste im Grid: eine Spalte, damit die Haarlinien eine Linie
   ergeben. Auf breiten Schirmen zwei Spalten mit gemeinsamen
   Linien - daher keine Karten-Boxen, sondern ein Raster aus Linien.
------------------------------------------------------------------ */
.entry-content .al-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 clamp(32px, 5vw, 72px);
}

@media (min-width: 921px) {
	.entry-content .al-list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 5 Karten auf 2 Spalten -> 3+2. Die letzte Karte nimmt die linke
	   Spalte der zweiten Reihe (nicht zentriert): das liest sich als
	   fortlaufende Liste, ein einzelner zentrierter Eintrag wirkt
	   dagegen wie ein Versehen. */
	.entry-content .al-list-5 > .al-list-item:nth-child(5) {
		grid-column: 1;
	}
}

@media (max-width: 640px) {
	.entry-content .al-list-item {
		padding-left: 52px;
	}

	.entry-content .al-list-item::before {
		width: 34px;
		height: 34px;
		font-size: 14px;
		top: 26px;
	}

	.entry-content .al-list-5 > .al-list-item:last-child {
		max-width: none;
	}
}

/* ------------------------------------------------------------------
   Karten-Embed (Google Maps ohne API-Key)
   Elementor lud dafür die Maps-JS-API (eigenes Script, Teil der
   Elementor-Kosten). Hier ein reiner iframe-Embed: kein API-Key,
   kein separates Script. Der core/embed-Block taugt dafür nicht -
   er rendert die URL mit escapedem & als Text statt als iframe,
   deshalb hier bewusst core/html mit direktem <iframe>.
------------------------------------------------------------------ */
.entry-content .al-map {
	margin: 22px 0 0;
	max-width: none;
	width: 100%;
	border-radius: var(--al-radius-card);
	overflow: hidden;
	background: var(--al-mist);
	line-height: 0;
}

.entry-content .al-map iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.entry-content .al-map-link {
	margin: 12px 0 0;
	font-size: 14.5px;
}

.entry-content .al-map-link a {
	color: var(--al-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 640px) {
	.entry-content .al-map iframe {
		aspect-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------------
   Raster fuer Seiten mit Hero (al-page-hero)
   Der Cover ist alignfull und zieht damit .entry-content auf die volle
   Breite (1440 px statt der 1200 px Content-Route, gemessen). Damit
   bekommen auch alle folgenden Bloecke die volle Breite - was bei
   Fliessstext per --al-lese ok ist, bei Karten, Galerie und Karte aber
   nicht. Deshalb bekommen diese Bausteine ihre Breite explizit.
------------------------------------------------------------------ */
.entry-content > .wp-block-group.al-gallery-3,
.entry-content > .wp-block-group.al-split,
.entry-content > .wp-block-group.al-post-list,
.entry-content > .wp-block-query.al-post-list,
.entry-content > .wp-block-group:not([class*="al-"]),
.entry-content > .wp-block-group.is-style-cta,
.entry-content > .wp-block-group.is-style-card {
	/* Content-Width: vorher 70vw, jetzt die Landing-Referenz 1008px
	   (gemessen .al-wrap auf /, /sponsoring/, /posts/, /startplatz/
	   und /kontakt/ jeweils 216..1224). */
	max-width: 70vw;
	margin-left: auto;
	margin-right: auto;
}

.entry-content > ul,
.entry-content > .wp-block-list {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
   Zwei-Spalten-Zeile (al-split): Karte links, Text rechts
   Entspricht der urspruenglichen Elementor-Anordnung der Startplatz-Seite
   (eine Zeile mit Karte links und Titel/Text rechts). Kein Hero, keine
   Full-bleed-Elemente - dadurch bleibt .entry-content auf der normalen
   Content-Route (1200 px) statt auf 1440 px zu springen.
------------------------------------------------------------------ */
.entry-content .al-split {
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(24px, 3.5vw, 56px);
	margin-top: 0;
}

.entry-content .al-split .al-map {
	flex: 1 1 560px;
	min-width: 0;
	margin: 0;
}

.entry-content .al-split .al-map iframe {
	aspect-ratio: 4 / 3;
}

.entry-content .al-split-text {
	flex: 1 1 340px;
	min-width: 0;
	max-width: 420px;
	margin: 0;
}

.entry-content .al-split-text > * + * {
	margin-top: 16px;
}

.entry-content .al-split-text h1.wp-block-heading {
	font-family: var(--al-font-display);
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.15;
	margin: 0;
	max-width: none;
	color: var(--al-ink);
}

.entry-content .al-split-text p {
	max-width: none;
	font-size: 16.5px;
	line-height: 1.7;
}

.entry-content .al-split-text .is-style-lead {
	font-size: 18px;
	color: var(--al-ink);
}

.entry-content .al-split-text .al-map-link {
	font-size: 15px;
}

@media (max-width: 782px) {
	.entry-content .al-split {
		flex-direction: column;
	}

	.entry-content .al-split-text {
		max-width: none;
	}
}

.entry-content .al-page-head h1.wp-block-heading {
	font-family: var(--al-font-display);
	font-size: clamp(32px, 3.4vw, 46px);
	line-height: 1.15;
	margin: 0 0 10px;
	color: var(--al-ink);
	max-width: none;
}

.entry-content .al-page-head .is-style-lead {
	font-size: 20px;
	line-height: 1.5;
	color: var(--al-slate);
	margin: 0;
}

/* Content-Width SEITENUEBERGREIFEND: gemessen ist .al-wrap auf
   /, /sponsoring/ und /posts/ jeweils 216..1224 (1008px), waehrend
   diese Liste vorher auf max-width 70vw stand (120..1320) und damit
   breiter war als alles andere auf der Seite.
   WICHTIG: die Selektoren muessen genauso spezifisch sein wie die
   Regel oben (Z839ff, Spezifitaet 0,3,1) -- eine schwächere Fassung
   (.entry-content .al-post-list, 0,2,0) wurde dort konsequent
   ueberschrieben, die Liste blieb also auf 70vw. */
.entry-content > .wp-block-query.al-post-list,
.entry-content > .wp-block-group.al-post-list {
	max-width: 70vw;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .al-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .al-post-grid > li {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.entry-content .al-post-grid .wp-block-post-featured-image {
	margin: 0 0 16px;
	border-radius: var(--al-radius-card);
	overflow: hidden;
	background: var(--al-mist);
	aspect-ratio: 4 / 3;
}

.entry-content .al-post-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--al-ease);
}

.entry-content .al-post-grid li:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.entry-content .al-post-grid .wp-block-post-title {
	font-family: var(--al-font-display);
	font-size: 19px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--al-ink);
	transition: color 0.25s var(--al-ease);
}

.entry-content .al-post-grid .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.entry-content .al-post-grid li:hover .wp-block-post-title {
	color: var(--al-blue);
}

.entry-content .al-post-grid .wp-block-post-date {
	font-size: 13px;
	color: var(--al-slate);
	opacity: 0.75;
	margin: 0 0 10px;
}

.entry-content .al-post-grid .wp-block-post-date time {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.entry-content .al-post-grid .wp-block-post-excerpt {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--al-slate);
	margin: 0;
}

.entry-content .al-post-grid .wp-block-post-more-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--al-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Ab 900 px zwei Spalten, auf dem Telefon eine Spalte. */
@media (max-width: 1024px) {
	.entry-content .al-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Auf dem Telefon haelt das Raster den Innenabstand der Seite ein, damit Bild
   und Text nicht am Viewport-Rand kleben. Ohne diese Korrektur reichen Bild und
   Kachel bis auf 0 px nach aussen, waehrend die Ueberschrift 23 px Luft hat. */
@media (max-width: 640px) {
	.entry-content .al-post-list,
	.entry-content .al-post-grid {
		padding-left: 20px;
		padding-right: 20px;
	}

	.entry-content .al-post-grid {
		grid-template-columns: 1fr;
	}

	.entry-content .al-post-grid .wp-block-post-title {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------------
   Fussnote (kleingedruckter Hinweis mit *) und Hochformat-Bild
------------------------------------------------------------------ */
.entry-content .al-fussnote {
	font-size: 14px;
	line-height: 1.65;
	color: var(--al-slate);
	opacity: 0.8;
	padding-left: 14px;
	border-left: 2px solid var(--al-line);
}

/* Hochkant-Bild als Nebenvogel zur Sache, nicht in der Fliesstextbreite */
.entry-content .is-style-al-portrait {
	max-width: 420px;
	float: right;
	margin: 0 0 24px clamp(24px, 4vw, 48px);
}

/* Wenn der Text neben dem Hochformatbild endet, loest der folgende Abschnitt
   den Float sonst nicht auf: dessen oberer Rand rutscht an die Float-Oberkante
   und der 52-px-Ausloeser der Ueberschrift geht dabei verloren. Auf der Seite
   Ballon am Kran liess sich das messen (24 px statt 52 px). Bewusst nur auf
   Ueberschriften beschraenkt — ein `~ *` wuerde jeden folgenden Absatz
   clearing machen und damit die Liste neben dem Bild zerlegen. */
.entry-content figure.is-style-al-portrait ~ h2,
.entry-content figure.is-style-al-portrait ~ h3,
.entry-content figure.is-style-al-portrait ~ .wp-block-heading {
	clear: both;
}

@media (max-width: 782px) {
	.entry-content .is-style-al-portrait {
		float: none;
		max-width: none;
		margin: 0 0 24px;
	}
}

/* Listen mit Nummern-Kreisen (al-list als ul) */
.entry-content ul.al-list {
	counter-reset: al-item;
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

.entry-content ul.al-list > li.al-list-item {
	position: relative;
	padding: 18px 0 18px 62px;
	border-top: 1px solid var(--al-line);
	color: var(--al-slate);
	font-size: 16.5px;
	margin: 0;
}

.entry-content ul.al-list > li.al-list-item:last-child {
	border-bottom: 1px solid var(--al-line);
}

.entry-content ul.al-list > li.al-list-item::before {
	content: counter(al-item);
	counter-increment: al-item;
	position: absolute;
	left: 0;
	/* Titelmitte gemessen (16.5px-Text, strong inline, 23 px hoch,
	   beginnt 21 px unter der Listenoberkante) -> Mitte 33 px. */
	top: 33px;
	transform: translateY(-50%);
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--al-mist);
	color: var(--al-blue);
	font-family: var(--al-font-display);
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s var(--al-ease), color 0.25s var(--al-ease);
}

.entry-content ul.al-list > li.al-list-item:hover::before {
	background: var(--al-blue);
	color: #fff;
}

.entry-content ul.al-list > li.al-list-item strong {
	color: var(--al-ink);
	font-weight: 650;
}

.entry-content ul.al-list > li.al-list-item:hover strong {
	color: var(--al-blue);
}

@media (min-width: 921px) {
	.entry-content ul.al-list {
		columns: 2;
		column-gap: clamp(32px, 5vw, 72px);
	}

	.entry-content ul.al-list > li.al-list-item {
		break-inside: avoid;
	}
}

@media (max-width: 640px) {
	.entry-content ul.al-list > li.al-list-item {
		padding-left: 52px;
	}

	.entry-content ul.al-list > li.al-list-item::before {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
}

/* ------------------------------------------------------------------
   Bilderreihe (al-gallery-3): drei Fotos als gleich grosse Kacheln
------------------------------------------------------------------ */
.entry-content .al-gallery-3 {
	gap: clamp(12px, 1.5vw, 20px);
	max-width: 70vw;
	margin-left: 0;
	margin-right: 0;
}

.entry-content .al-gallery-3 figure {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--al-radius-card);
	background: var(--al-mist);
}

.entry-content .al-gallery-3 img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	margin: 0;
	transition: transform 0.5s var(--al-ease);
}

.entry-content .al-gallery-3 figure:hover img {
	transform: scale(1.03);
}

.entry-content .al-gallery-3 figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 40px 18px 16px;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.75) 100%);
	color: #fff;
	font-size: 13.5px;
	line-height: 1.4;
}

@media (max-width: 640px) {
	.entry-content .al-gallery-3 img {
		height: 260px;
	}
}

/* Ballon-Reihe bleibt wie sie ist (Bildkarten) */
/* ------------------------------------------------------------------
   CTA-Kachel fuer Ballon am Kran und Sponsoring (Jan):

   Bild NICHT ueber die volle Breite, sondern im linken Drittel mit
   1:1-Seitenverhaeltnis; rechts daneben Header, Subheader und das
   E-Mail-Feld mit Button. Der bisherige Vollflaechen-Hintergrund
   (position:absolute, inset:0) war abgeschafft -- das Bild liegt
   jetzt als normales Gitterkind in Spalte 1.

   Colorscheme und Fonts bleiben die der Seite:
   --al-ink #0f172a als Grund, --al-blue #0067ff als Akzent,
   --al-font-display Georgia fuer den Titel, --al-font-body
   "Noto Sans" fuer den Fliesstext.
------------------------------------------------------------------ */
/* CTA-Kachel: Bild links vollhoehe, Text rechts.
   Padding nur fuer den Text. Container SELBST hat NUR eine
   min-height und kein padding -- sonst bricht das calc-style mit
   absoluten Offsets. */
/* CTA-Kachel: Bild links, vollhoehe der Kachel; Text rechts. */
/* Whole flipped layout: flex row, Bildspalte + Textspalte. */
/* gap=inner space; image spans full kachel height (no container padding). */
/* Kachel: Padding, surface, image spans full height via min-h 100%. */
/* CTA-Kachel: Bild links (30%, volle Hoehe), rechts EINE Textsaeule.
   Wichtig: die Textkinder (H2, P, Formular) sind in .al-cta-body
   gebuendelt -- sonst wuerde jedes einzeln zu einer eigenen Flex-Spalte
   und alles stuende nebeneinander in einer Reihe (gemessener Fehler). */
/* Kachel: Werte kommen aus dem Block airlebnisse/cta-card (CSS-Variablen),
   die Fallbacks entsprechen dem Stand vor der Block-Umstellung. */
.entry-content .is-style-cta {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: var(--al-cta-gap, 46px);
	align-items: stretch;
	min-height: 340px;
	padding: var(--al-cta-pad, 36px);
	background: var(--al-cta-bg, rgba(8, 18, 36, 0.92));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--al-cta-radius, 12px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
	overflow: hidden;
}

.entry-content .is-style-cta .al-cta-media {
	flex: 0 0 var(--al-cta-imgw, 30%);
	min-height: var(--al-cta-img-minh, 100%);
	aspect-ratio: var(--al-cta-img-ar, auto);
	margin: 0;
	border-radius: var(--al-cta-imgr, 6px);
	overflow: hidden;
	background: #060d1a;
	align-self: var(--al-cta-img-align, stretch);
}

.entry-content .is-style-cta .al-cta-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	aspect-ratio: auto !important;
}

/* Rechte Textsaeule: Header -> Subheader -> (Eingabe + Button). */
.entry-content .is-style-cta .al-cta-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

/* Formular: Eingabefeld + Button nebeneinander. */
.entry-content .is-style-cta form.al-cta-form {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0;
	align-items: stretch;
}

.entry-content .is-style-cta h2.wp-block-heading {
	font-family: var(--al-font-display, Georgia, "Times New Roman", serif);
	font-weight: 700;
	font-size: clamp(26px, 2.9vw, 40px);
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: #fff;
	text-shadow: 0 2px 9px rgba(2, 6, 23, 0.55);
	margin: 0;
	max-width: 22ch;
	padding: 0;
}

.entry-content .is-style-cta h2.wp-block-heading::before {
	display: none;
}

.entry-content .is-style-cta p {
	font-family: var(--al-font-body, "Noto Sans", sans-serif);
	max-width: 48ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
}

/* Die allgemeine strong-Regel setzt --al-ink (dunkel) -- auf der
   dunklen Kachel war "individuelles Angebot" dadurch optisch weg und
   der Satz wirkte unvoellig (Vision-Befund). Hier weiss. */
.entry-content .is-style-cta strong,
.entry-content .is-style-cta b {
	color: #fff;
	font-weight: 700;
}

/* Abstaende zwischen den Zeilen der Textspalte. */
.entry-content .is-style-cta h2.wp-block-heading + p { margin-top: 14px; }
.entry-content .is-style-cta p + .wp-block-buttons,
.entry-content .is-style-cta h2.wp-block-heading + .wp-block-buttons { margin-top: 26px; }

/* E-Mail-Feld + Button in einer Zeile (form kommt aus dem Post). */
.entry-content .is-style-cta form.al-cta-form {
	display: flex;
	flex-direction: row;      /* horizontal */
	flex-wrap: nowrap;        /* no wrap */
	gap: 12px;
	margin: 0;
	align-items: stretch;
}
.entry-content .is-style-cta .al-cta-form input[type="email"] {
	flex: 1 1 0;            /* grow to fill */
	min-width: 0;
	font-family: var(--al-font-body, "Noto Sans", sans-serif);
	font-size: 16px;
	color: #fff;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: var(--al-cta-input-r, 999px);
	padding: 14px 22px;
	outline: none;
	transition: border-color 0.2s var(--al-ease, ease),
	            background-color 0.2s var(--al-ease, ease);
}
.entry-content .is-style-cta .al-cta-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.62);
}
.entry-content .is-style-cta .al-cta-form input[type="email"]:focus {
	border-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.16);
}
/* Button: fixed width, stays next to input. */
.entry-content .is-style-cta .al-cta-form .wp-block-button__link {
	margin: 0;
	flex: 0 0 auto;
	/* Ohne diese Deklaration waehlt kein Stylesheet der Seite den Knopf:
	   das Formular hat KEIN .wp-block-buttons-Element, also trifft die
	   generische Regel .entry-content .wp-block-buttons ... gar nicht, und
	   der Wert kommt aus dem UA-Stylesheet des Browsers (ButtonFace) --
	   gemessen rgb(50, 55, 60) statt --al-blue. Selektor muss die Form
	   enthalten, sonst gibt es kein Setzung überhaupt. */
	background: var(--al-blue, #0067ff);
	color: #fff;
	border: 0;
	box-shadow: 0 10px 26px -10px rgba(0, 103, 255, 0.75);
}
.entry-content .is-style-cta .al-cta-form .wp-block-button__link:hover {
	background: #0057d6;
	/* Kein translateY beim Hover (AGENTS.md). */
	transform: none;
}

/* Statuszeile des Formulars: Erfolg in der Seiten-Akzentfarbe,
   Fehler drauflassen. */
.entry-content .is-style-cta .al-cta-status {
	font-family: var(--al-font-body, "Noto Sans", sans-serif);
	font-size: 15px;
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.86);
}
.entry-content .is-style-cta .al-cta-status.is-ok {
	color: #8ff0b6;
}
.entry-content .is-style-cta .al-cta-status.is-fehler {
	color: #ffb4b4;
}
.entry-content .is-style-cta .al-cta-form .wp-block-button__link.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

/* Buttons */
.entry-content .wp-block-buttons .wp-block-button__link {
	border-radius: var(--al-radius-pill);
	background: var(--al-ink);
	color: var(--al-white);
	font-family: var(--al-font-display);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: 14px 30px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
	transition: background-color 0.2s var(--al-ease), transform 0.2s var(--al-ease);
}

.entry-content .wp-block-buttons .wp-block-button__link:hover {
	background: var(--al-blue);
	color: var(--al-white);
	transform: translateY(-1px);
}

.entry-content .is-style-card a {
	color: var(--al-blue);
}

/* ------------------------------------------------------------------
   Bildreihe (Ballon-Grafiken): weisse Rahmen-Karten. Die Bilder
   haben unterschiedliche Seitenverhaeltnisse (0,80 bis 0,85),
   darum fester Kasten mit object-fit, damit die Reihe eine Linie bildet.
------------------------------------------------------------------ */








/* ------------------------------------------------------------------
   Hero-Band (Cover): Ballon sitzt im Foto links oben, der Text steht
   links unten. Also: Text linksbuendig, Foto-Fokus nach links
   (object-position), damit der Ballon nicht angeschnitten wird.
------------------------------------------------------------------ */
.entry-content .wp-block-cover.al-page-hero {
	min-height: 420px;
	border-radius: 0;
	align-items: flex-end;
	display: flex;
}

/* Das Foto zeigt den Ballon links oben; mit der zentrierten Voreinstellung
   schnitten ihn 1440x420 aus dem Bild. Fokus auf 30% / 25% haelt ihn ganz. */
.entry-content .wp-block-cover.al-page-hero .wp-block-cover__image-background {
	object-position: 30% 25%;
}

/* Abstand Navbar <-> Hero entfernen.
   Gemessen: .content-area.primary hat margin-top: 100px, der Hero beginnt
   dadurch 107 px unter dem Header (81 px hoch). Das ist Astra-Standard und
   auf Seiten mit Hero-Band falsch - dort soll das Hero-Band direkt unter
   der Navigation sitzen. Erkennung ueber die Klasse, die die Seite selbst
   traegt (.al-page-hero), damit keine anderen Seiten betroffen sind. */
/* Luecke Navbar -> Hero auf 0.
   Der Hero muss auf derselben Y-Position starten wie die Header-Unterkante
   (81 px). Der Inhalt beginnt je nach Seite unterschiedlich:
     .site-content  padding-top  88px   (unser Theme, immer)
     #primary       margin-top  100px   (Astra, Inline-Stylesheet, NUR bei
                                             .ast-plain-container.ast-single-post)
   Gemessen (Oberkante des Inhalts vor dem Fix) und Body-Klasse:
     Sponsoring  188 px = 88 + 100 -> Ausgleich -107
     Startplatz   88 px = 88 +   0 -> Ausgleich  -7
   Die Differenz zur Headerkante (81 px) ist also 107 bzw. 7 - NICHT die
   volle Padding-Hoehe, weil das Theme-Padding den Container bereits um
   88 px nach unten schiebt und man es nicht vollstaendig zuruecknehmen
   darf (sonst rueckt der Inhalt unter die Navigation).
   Astra wendet die 100 px genau bei `ast-plain-container` an; die Klasse
   `ast-single-post` allein reicht nicht (Startplatz traegt sie auch). */
.entry-content > .wp-block-cover.al-page-hero:first-child {
	margin-top: 0;
}

body.ast-plain-container .entry-content > .wp-block-cover.al-page-hero:first-child {
	margin-top: -100px;
}

/* Der Hero-Inhalt muss unter der fixierten Navigation beginnen. Das
   Hintergrundbild bleibt randlos (es deckt den Innenabstand mit ab), nur der
   Inhalt rueckt um die Headerhoehe nach unten -- sonst liegt die Ueberschrift
   im Band der transparenten Navigation. Elementor-Container (e-con) und die
   klassischen Sections werden beide abgedeckt. */
body.al-landing .entry-content > .elementor > .e-con:first-child,
body.al-landing .entry-content > .elementor > .elementor-section:first-child {
	padding-top: calc(var(--al-header-h, 88px) + 10px) !important;
}

/* Rasterkante: Der Hero-Text muss auf derselben linken Kante liegen wie der
   Inhalt darunter. Der H1 sitzt bei inner.left + padding-left, mit
   inner.left = 48 (konstant, Cover traegt eigenes 48-px-Padding).

   Fruehere Formel (Zeile 1450, jetzt ersetzt):
     padding-left: max(20px, (100vw - 70vw) / 2)
   zielte auf die Astra-Artikelkante entry.left + 48. Der Bezugsrahmen ist
   jedoch nicht mehr dieselbe Box: .al-reveal-section laeuft alignfull über
   den ganzen Viewport mit padding-inline: 48px, und .al-wrap (920px) ist
   darin zentriert -- nicht am Artikel-Rand. Ergebnis bei 1440px: Hero bei
   168, Inhalt bei 260, zwei sichtbare Kanten.

   Neue Formel folgt der tatsaechlichen .al-wrap-Kante:
     al-wrap = 48 + max(0, (100vw - 920 - 96) / 2)
              = 48 + max(0, (100vw - 1016px) / 2)
   H1 = inner.left + padding-left = 48 + padding-left, also
     padding-left: max(0px, calc((100vw - 1016px) / 2))
   Gegenprobe dieselben Viewports wie oben (siehe Messung im Commit).

   Nur auf Seiten mit .al-reveal-section -- sonst genau der umgekehrte
   Fehler: /sponsoring/ hat ebenfalls al-page-hero, aber keine
   .al-reveal-section, dort liegt das h2 weiterhin auf der Astra-
   Artikelkante. Mit der neuen Formel waere der Hero dort nach 260
   gewandert, bei 1440px waeren das drei Kanten (Hero 260, h2 168,
   .al-wrap 216) statt der bisher zwei uebereinstimmenden bei 168. */
.entry-content:has(.al-reveal-section)
	.wp-block-cover.al-page-hero .wp-block-cover__inner-container {
	max-width: none;
	width: 100%;
	padding: 0 48px 56px;
	padding-left: max(0px, calc((100vw - 1016px) / 2));
}

/* Alle uebrigen Seiten behalten die Astra-Artikelkante. */
.entry-content .wp-block-cover.al-page-hero .wp-block-cover__inner-container {
	max-width: none;
	width: 100%;
	padding: 0 48px 56px;
	padding-left: max(20px, calc((100vw - 70vw) / 2));
}

@media (max-width: 640px) {
	.entry-content .wp-block-cover.al-page-hero .wp-block-cover__inner-container {
		padding: 0 24px 40px 43px;
	}
}

.entry-content .wp-block-cover.al-page-hero h1.wp-block-heading {
	font-family: var(--al-font-display);
	font-size: clamp(32px, 3.8vw, 50px);
	line-height: 1.12;
	margin: 0 0 14px;
	color: var(--al-white);
	max-width: 760px;
}

.entry-content .wp-block-cover.al-page-hero .is-style-lead {
	color: rgba(255, 255, 255, 0.88);
	font-size: 20px;
	line-height: 1.5;
	margin: 0;
	max-width: 620px;
}

@media (max-width: 921px) {
	/* CTA-Kachel: Hard-Reset -- block flow mit ganzseitigem Bild
   und Text-Overlay per margin-left. */
::before {
		transition: transform 0.25s var(--al-ease, ease), background-color 0.25s var(--al-ease, ease);
	}

	.entry-content ul.al-list > li.al-list-item:hover::before {
		transform: scale(1.08);
	}

	/* Bilder: sehr zurueckhaltender Zoom. Kein Rahmen, kein Schatten. */
	.entry-content figure.wp-block-image img {
		transition: transform 0.6s var(--al-ease, ease);
	}

	.entry-content figure.wp-block-image:hover img {
		transform: scale(1.02);
	}

	/* CTA-Button */
	.entry-content .is-style-cta .wp-block-button__link {
		transition: background-color 0.25s var(--al-ease, ease), color 0.25s var(--al-ease, ease);
	}
}

/* Fokus muss immer sichtbar sein - auch ohne Maus. */
.entry-content :is(a, button, summary):focus-visible {
	outline: 2px solid #0f172a;
	outline-offset: 3px;
	outline-style: solid;
}

/* Auf Touch-Geraeten fehlt :hover, daher zeigt das Element dort
   direkt Sichtbarkeit statt Transform. */
@media (hover: none) {
	.entry-content ul.al-list > li.al-list-item:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Eine Textspalte: die Landing-Bausteine an die Fliesstextachse holen

   Gemessen am 2.10.2026 auf /ballon-am-kran-2/ bei 1440 px:
   Die Gruppe traegt padding: 48px, die Textbloecke stehen also ab
   48 px und sind 920 px breit (p, h2 und ul alle max-width:70vw).
   Die al-section beginnen ebenfalls bei 48 px, aber ihr inneres
   .al-wrap (max-width: 70vw, margin-inline: auto) laeuft ueber
   168 px Leerlauf nach rechts - sein Inhalt beginnt bei 259 px.

   Ergebnis: ein Sprung von 211 px inmitten derselben Seite. Links
   davon steht Fliesstext, rechts davon beginnt plötzlich eine
   eingezogene Spalte. Zwei Achsen, eine Seite.

   Die Regel setzt das .al-wrap ab 48 px und auf 920 px Breite -
   also exakt auf die Fliesstextachse. Gemessene Abweichung: 0 px.

   Gewaehlt wurde die LINKE Achse, nicht die Mitte. Der Commit e279a8c
   (v1.2.8, 30.09.2026) hat die Zentrierung fuer Inhaltsseiten aus-
   druecklich entfernt, mit der Begruendung: "constrained-Group
   entfernt: sie legt margin-inline:auto an und schob den Text in die
   Seitenmitte statt linksbuefig". Diese Regel fuehrt die damalige
   Entscheidung auf die seitdem neu eingefuegten Landing-Bausteine
   aus - sie dreht sie nicht um.

   Spezifitaet (0,3,0) schlaegt .al-wrap (0,1,0) aus
   air-lebnisse-blocks/assets/css/frontend.css, selbst wenn dieses
   CSS spaeter geladen wird.

   .al-reveal-section traegt nur diese eine Seite (geprueft: 1x hier,
   0x auf Landing, Startplatz, Sponsoring, Posts und Kontakt), deshalb
   bleibt die Wirkung auf sie beschraenkt.
------------------------------------------------------------------ */
.al-reveal-section .al-section .al-wrap {
	/*
	 * Zentrierung: identisch zur Landing (frontend.css, .al-wrap).
	 * margin-inline: 0 klebte den Block an die linke Kante -- bei 1440px
	 * Viewport lag .al-wrap dadurch bei l=48 statt bei 260 (=48+(1344-920)/2).
	 * padding-inline bleibt 0, damit die alte clamp-Einrueckung (die den
	 * Achsenbruch zwischen Wrap und Bild verursachte) nicht zurueckkommt.
	 */
	margin-inline: auto;
	padding-inline: 0;
	/* Content-Width Landing-Referenz (vorher 920px, die bewusste
	   Fliesstextachse von e279a8c -- Jan will jetzt alle Seiten auf
	   der Landing-Content-Width). */
	max-width: 70vw;
}

/*
 * Alle direkten Kinder der Reveal-Gruppe mittig ausrichten.
 *
 * Konkrete Gegner, gemessen bei 1440px Viewport (Mittellinie 720):
 *   .entry-content h2.wp-block-heading { margin: 0 }        (0,2,1)  Zeile 534
 *   .entry-content h2.wp-block-heading { margin-left: 0 }   (0,2,1)  Zeile 543
 *   .entry-content ul.al-list { margin-left: 0 }            (0,2,1)
 *   .al-reveal-section > *                                  (0,1,0)  schlaegt KEINEN
 *
 * Loesung wie in Zeile 509-512 dokumentiert: eigene Klasse plus
 * .entry-content-Praefix, damit die Spezifitaet stimmt -- und der Block
 * steht hier hinter den Gegnern, also gewinnt er bei gleicher Nummer.
 *
 * Wirkung: h2, p, ul, figure und die fussnote liegen danach wie .al-wrap
 * bei 260..1180 (Mitte 720) statt bei 48..968 (Mitte 508).
 */
.entry-content .al-reveal-section > h2,
.entry-content .al-reveal-section > h3,
.entry-content .al-reveal-section > p,
.entry-content .al-reveal-section > ul,
.entry-content .al-reveal-section > figure {
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   Zwei Reduzierungen auf derselben Seite: Bildbreite und Bento-Grid

   Beide greifen ueber .al-reveal-section wie der Achsen-Fix darueber -
   dieselbe Seite, dieselbe Spezifitaet 0,2,0 / 0,3,0, keine Wirkung
   auf Landing, Startplatz, Sponsoring, Posts, Kontakt, Highlights
   und Anmelden (alle 0 Treffer fuer diese Klasse).

   PUNKT 1 - Bildbreite.
   Das Querformat (Anhang 3026, 1440x1920) stand auf der vollen
   Gruppenbreite von 1344 px und kam damit auf 1792 px Hoehe. Es
   uebernahm damit rund 28 Prozent der gesamten Dokumenthohe von
   6307 px. Begrenzt auf 920 px, die Fliesstextachse, sinkt die
   Hoehe rechnerisch auf 1227 px. Kein object-fit, kein Beschnitt -
   das Bild bleibt in voller Aufloesung, nur die Anzeigebreite
   folgt der Spalte, wie Jan es gewaehlt hat.

   PUNKT 3 - Bento-Grid.
   Die vier Vorteile standen als Kopf links (388 px) und Liste
   rechts (446 px), also als zwei gleichwertige Spalten ohne
   Hierarchie. Jetzt: Kopf oben, danach vier Zellen mit
   unterschiedlicher Spannung 3/1 und 1/3 - erklaert die Rolle
   statt sie zu verschleiern.

   Keine Kacheln. Die Flaeche der li bleibt transparent, sodass der
   Sektions-Hintergrund rgb(250, 252, 254) durchscheint; Linien
   entstehen ausschliesslich ueber border mit der vorhandenen
   Farbe --al-line (#d1dae5), also derselben, die auch die
   bestehenden Listenzieren. Kein border-radius, kein Schatten,
   keine neue Farbe - das ist die geforderte Haarlinien-Optik
   ohne geschlossene Kacheln.
------------------------------------------------------------------ */
.al-reveal-section figure.wp-block-image {
	max-width: 70vw;
}

/* Der Bento-Head kommt aus benefits.php als nacktes <h2> und traegt
   keine wp-block-heading-Klasse -- ohne diese Regel steht er auf dem
   Astra-Default (gemessen: Montserrat, sans-serif, 700, 34px) statt auf
   --al-font-display wie alle uebrigen Ueberschriften der Seite. */
.al-reveal-section .al-benefits-head h2 {
	font-family: var(--al-font-display, Georgia, "Times New Roman", serif);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.al-reveal-section .al-benefits-grid {
	grid-template-columns: 1fr;
	gap: clamp(28px, 3vw, 44px);
}

.al-reveal-section .al-benefits-head,
.al-reveal-section .al-benefits-list {
	max-width: 70vw;
}

.al-reveal-section .al-benefits-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Zwei Reihen: Kachel 2 spannt zwei Spalten und zwei Zeilen, Kachel 3
	   laeuft als hohe Schmalspalte ueber beide -- kein Loch im Raster. */
	grid-auto-rows: minmax(186px, auto);
	gap: 12px;
	padding-left: 0;
	margin-bottom: 0;
	/* Haarlinien-Optik entfaellt hier: die Kacheln stehen jetzt frei. */
	border-top: 0;
}

/* Kachel: dunkle Flaeche, Bild dahinter, Text darauf.
   Radius 14 px folgt dem Vorbild (Apple-Bento); die bisherige
   Haarlinien-Regel sah bewusst radius 0 vor -- Jan hat das Vorbild
   ausdruecklich als "so oder so aehnlich" freigegeben. */
.al-reveal-section .al-benefits-list li,
.al-reveal-section .al-benefits-list li.al-benefit-card {
	position: relative;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background-color: var(--al-ink, #0f172a);
	isolation: isolate;
	min-width: 0;
}

.al-reveal-section .al-benefits-list .al-benefit-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Abdunklung fuer die Lesbarkeit des weissen Textes: oben leicht,
   unten stark -- der Titel sitzt unten links. */
.al-reveal-section .al-benefits-list .al-benefit-card__dim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(178deg,
		rgba(15, 23, 42, 0.40) 0%,
		rgba(15, 23, 42, 0.62) 45%,
		rgba(15, 23, 42, 0.90) 100%);
}

.al-reveal-section .al-benefits-list .al-benefit-card__text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: clamp(16px, 1.7vw, 24px);
	color: #fff;
}

.al-reveal-section .al-benefits-list .al-benefit-card__text > strong {
	/* Einwort-Titel wie "Refinanzierungsmoeglichkeit" messen 206 px bei nur
	   173 px Zellbreite (221 minus 2*24 px Padding) -- ohne diesen Wert
	   laeuft die Kachel horizontal ueber. */
	overflow-wrap: anywhere;
	display: block;
	font-family: var(--al-font-display, Georgia, "Times New Roman", serif);
	font-weight: 400;
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.22;
	margin: 0 0 6px;
	letter-spacing: -0.005em;
}

.al-reveal-section .al-benefits-list .al-benefit-card__text > span {
	overflow-wrap: anywhere;
	display: block;
	font-family: var(--al-font-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: clamp(13.5px, 1.05vw, 15px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
	max-width: 34ch;
}

/* Icon nur, wenn gesetzt -- steht oberhalb des Titels. */
.al-reveal-section .al-benefits-list .al-benefit-card__text .al-benefit-icon {
	display: block;
	margin-bottom: 10px;
}
.al-reveal-section .al-benefits-list .al-benefit-card__text .al-benefit-icon svg {
	display: block;
	stroke: rgba(255, 255, 255, 0.9);
}

/* Asymmetrische Zuordnung (Apple-Vorbild, gemessen bei 920 px):
   K1 230x186   K2 460x384 (Spalte 2-3, beide Zeilen)  K3 230x384
   K4 230x186
   Reihenfolge im Post: 1 Publikumsmagnet, 2 Individuelles Branding,
   3 Refinanzierungsmoeglichkeit, 4 Zertifizierte Sicherheit. */
.al-reveal-section .al-benefits-list li:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}
.al-reveal-section .al-benefits-list li:nth-child(2) {
	grid-column: 2 / span 2;
	grid-row: 1 / span 2;
}
.al-reveal-section .al-benefits-list li:nth-child(3) {
	grid-column: 4;
	grid-row: 1 / span 2;
}
.al-reveal-section .al-benefits-list li:nth-child(4) {
	grid-column: 1;
	grid-row: 2;
}

@media (max-width: 1024px) {
	.al-reveal-section .al-benefits-list {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(180px, auto);
	}
	.al-reveal-section .al-benefits-list li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}
	/* Die grosse Kachel bleibt auch hier die grosse Kachel. */
	.al-reveal-section .al-benefits-list li:nth-child(2) {
		grid-column: 1 / span 2;
	}
}

@media (max-width: 700px) {
	.al-reveal-section .al-benefits-list {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(200px, auto);
	}
	.al-reveal-section .al-benefits-list li:nth-child(n) {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------
   Icons statt Nummernkreisen -- nur dort, wo ein li.al-list-item--icon
   steht (Abschnitt "Sicherheit und Technik" der Ballon-am-Kran-Seite).

   Jan: "Illustrationen fuer die einzelnen Punkte wenn moglich" und
   "nehme dann icons wenn du keine bilder findest". Die Mediathek hat
   kein Motiv fuer "Wetter im Blick" oder "230V-Steckdose", drei Icons
   aus derselben Familie wie die vorhandenen (Phosphor, MIT,
   viewBox 0 0 256 256, fill currentColor): shield-check, cloud-sun,
   plug. Der Kreis bleibt wie er ist, nur traegt er jetzt das Icon
   statt der Zahl -- der Landing-Look aendert sich dadurch nicht.

   Die Unterdrueckung braucht die hoehere Spezifitaet: die Gegnerregel
   .entry-content ul.al-list > li.al-list-item::before steht mit
   (0,3,2) in der Datei, diese hier liegt mit einer vierten Klasse
   darueber und zusaetzlich spaeter.
------------------------------------------------------------------ */
.entry-content ul.al-list > li.al-list-item.al-list-item--icon::before {
	content: none;
	counter-increment: none;
}

.entry-content li.al-list-item--icon .al-list-icon {
	position: absolute;
	left: 0;
	/* Identisch mit dem Nummernkreis. Achtung: die Datei enthaelt drei
	   top-Werte fuer .al-list-item::before (39 px Z642, 26 px Z730,
	   33 px Z1085) -- geltend ist Z1085 mit 33 px, gemessen auch genau
	   die Titelmitte (strongTop 21 + Hoehe 23 / 2 = 32,5). Mit 39 px
	   sass das Icon 8 px zu tief. */
	top: 33px;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--al-mist);
	color: var(--al-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.entry-content li.al-list-item--icon .al-list-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* ------------------------------------------------------------------
   Zweispaltige Abschnitte -- "Text auf einer Seite, Bild auf der
   anderen" (Abschnitt 1) und "Bild rechts, Schrift links" (Abschnitt
   2). Die h2 bleiben direkte Kinder der Reveal-Gruppe und werden damit
   wie bisher zentriert; nur Absatz und Bild stecken in den Spalten.
------------------------------------------------------------------ */
.entry-content .al-reveal-section > .wp-block-columns.al-split-cols {
	max-width: 70vw;
	margin-inline: auto;
	gap: clamp(20px, 3vw, 48px);
	/* Beide Spalten starten auf einer Linie statt sich auf die hoechste
	   auszurichten -- das Bild soll nicht neben einer leeren Textspalte
	   schweben. */
	align-items: flex-start;
}

/* Die Bildspalte bekommt keine eigene Maximierung: 42 % der 920 px
   sind 386 px, das bestehende max-width:70vw der figure bleibt
   ohne Wirkung und das Bild folgt der Spalte. */
.entry-content .al-split-cols .wp-block-column {
	min-width: 0;
}

.entry-content .al-split-cols figure.wp-block-image {
	margin-block: 0;
}

/* Unter 782 px stapelt WordPress die Spalten ohnehin (flex-basis 100%);
   der Abstand zwischen den gestapelten Blöcken soll dann nicht
   doppelt greifen. */
@media (max-width: 782px) {
	.entry-content .al-reveal-section > .wp-block-columns.al-split-cols {
		gap: 24px;
	}
}

/* Der CTA ist eine Zeile mit Haarlinie oben (kein Kasten, s. Regel
   unter .is-style-cta). Die Haarlinie begann bei 48, waehrend alles
   andere auf der Seite bei 260 steht -- gemessen: h2 "Interesse
   geweckt?" 48..327, alle uebrigen h2 260..1180. Auf 920 px ziehen,
   dann liegen Linie, Text und Button auf derselben Kante. */
.entry-content .al-reveal-section > .wp-block-group.is-style-cta {
	max-width: 70vw;
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   Hero-Bewertung (Jan: "die Bewertung als zB 4,9 Sterne auch gern in
   dem hero oben"). Quelle der Zahl: die fünf sichtbaren Google-
   Rezensionen auf https://air-lebnisse.de/ -- alle 5/5, gerechnet
   5,0. Der Wert steht als Attribut im Block und ist im Editor
   aenderbar, falls die Google-Gesamtbewertung anders lautet.
------------------------------------------------------------------ */
.al-hero-sub,
.entry-content .al-hero-sub,
.entry-content .al-hero-rating {
	/* Die Gegnerregel .entry-content p (0,1,1) setzt color: --al-slate;
	   auf dem dunklen Hero-Bild war der Untertitel damit grau und kaum
	   lesbar (Vision: 'schlecht, zu geringer Kontrast'). Titel war schon
	   weiß, sub und rating sind es jetzt auch. */
	color: rgba(255, 255, 255, 0.94);
	text-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
}

.al-hero-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--al-font-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: 14.5px;
	letter-spacing: 0.01em;
}

.al-hero-stars {
	display: inline-flex;
	gap: 2px;
	color: #f5b301;
}
.al-hero-stars svg {
	display: block;
	width: 17px;
	height: 17px;
}

.al-hero-rating-text { white-space: nowrap; }
.al-hero-rating-count { opacity: 0.78; margin-left: 4px; }

@media (max-width: 640px) {
	.al-hero-rating { font-size: 13px; gap: 8px; }
	.al-hero-stars svg { width: 15px; height: 15px; }
}

/* Abschnitt "Das sagen unsere Passagiere" --------------------------------
   Der Trustindex-Shortcode rendert das Google-Widget in drei Spalten
   (klasse ti-col-3). Er bleibt unveraendert, damit die Anzeige exakt
   so aussieht wie auf der Live-Seite. */
.al-passagiere {
	max-width: 70vw;
	margin-inline: auto;
}
.al-passagiere h2 { margin-bottom: 10px; }
.al-passagiere .al-section-sub { margin-bottom: 26px; }

/* ------------------------------------------------------------------
   Karussell "Letzte Beitrge": 3 sichtbar, Mitte vorne und groesser,
   seitlich leicht dahinter und UEBERLAPPEND (Jan).

   Breiten in PROZENTEN des Tracks, nicht in px-Deckeln: vorher standen
   die Kacheln auf clamp(..., 300px) / clamp(..., 520px), waehrend die
   Positionen (left: 0% / 50% / 100%) vom Track abhingen. Bei breitem
   Fenster wuchs also nur der Track, die Kacheln blieben stehen -- Jan
   sah grosse Luecken dazwischen. Jetzt wachsen sie mit, und die
   Ueberlappung bleibt konstant, weil die linke Position aus der
   Mitte-Halbbreite gerechnet wird statt aus einem festen Versatz.
------------------------------------------------------------------ */
.al-posts .al-wrap {
	/* Breite wie die anderen Bloecke (gemessen 216..1224). */
	max-width: 70vw;
	padding-inline: 0;
}

.al-carousel {
	position: relative;
	margin-top: 48px; /* mehr Abstand zur Ueberschrift (Jan) */
}

.al-carousel-track {
	position: relative;
	display: block;
	/* Hoehe der Leiste aus der eigenen BREITE: die Mitte ist 44 %
	   breit mit 4:3 -> Hoehe = 0.44 * 3/4 * Breite = 0.33 * Breite.
	   height:100% wuerde sich auf die Elternhoehe beziehen, und die
	   war 0. */
	aspect-ratio: 100 / 33;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Verhältnisse als Variablen: eine Aenderung hier verschiebt das ganze
   Karussell konsistent. */
.al-carousel-track {
	--al-mitte: 44%;   /* Breite der Mitte relativ zum Track */
	--al-seite: 26%;   /* Breite der Seiten relativ zum Track */
	--al-ueber: 6%;    /* gewuenschte Ueberlappung (Jan: leicht) */
}

.entry-content ul.al-carousel-track {
	max-width: none;
	padding-left: 0;
	margin-left: 0;
	width: 100%;
}

.al-carousel-item {
	position: absolute;
	/* Vertikal zentrieren: vorher top:0 sassen die kleinen Seiten
	   bündig am oberen Rand waehrend die Mitte herausragte
	   (gemessen 89 px Hoehenversatz der Mittelpunkte). */
	top: 50%;
	left: var(--al-x, 50%);
	/* Die BREITE steht am Item, nicht an der Card: ein `width:26%`
	   an der Card waere ein Prozent der Item-Breite, und die Item-Breite
	   ergibt sich wiederum aus der Card -- ein Zirkel, der bei 0 landet
	   (gemessen cardWidth 0px). Als position:absolute-Kind bezieht sich
	   `width` der Item dagegen auf den Track. */
	width: var(--al-breite, var(--al-seite));
	/* translateY(-50%) zentriert gegenueber top:50%; transform-origin
	   Mittelpunkt, damit die Skalierung die Zentrierung nicht verschiebt. */
	transform: translate(var(--al-tx, -50%), -50%) scale(var(--al-s, 1));
	transform-origin: center center;
	transition: left 0.34s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
	            z-index 0s;
}

/* Positionen aus der Mitte-Halbbreite gerechnet, damit die
   Ueberlappung bei JEDE Fensterbreite gleich bleibt:
   links  = 50% - Mitte/2 + Ueberlappung - Seitenbreite
   rechts = 50% + Mitte/2 - Ueberlappung
   Beispielen bei 44/26/6: links 6%..32%, Mitte 28%..72%,
   rechts 68%..94% -> jeweils 4% Ueberlappung. */
.al-carousel-item.is-center {
	--al-x: 50%;
	--al-tx: -50%;
	--al-s: 1;
	--al-breite: var(--al-mitte);
	z-index: 3;
	opacity: 1;
}
.al-carousel-item.is-side.is-left {
	--al-x: calc(50% - var(--al-mitte) / 2 + var(--al-ueber) - var(--al-seite));
	--al-tx: 0%;
	--al-s: 0.94;
	z-index: 1;
	opacity: 0.94;
}
.al-carousel-item.is-side.is-right {
	--al-x: calc(50% + var(--al-mitte) / 2 - var(--al-ueber));
	--al-tx: 0%;
	--al-s: 0.94;
	z-index: 1;
	opacity: 0.94;
}
/* Ab 4 Beitraegen verschwinden die uebrigen unsichtbar. */
.al-carousel-item.is-hidden {
	--al-x: 50%;
	--al-tx: -50%;
	--al-s: 0.85;
	--al-breite: var(--al-seite);
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.al-carousel-card {
	display: block;
	position: relative;
	/* Volle Item-Breite -- die Breite selbst steht am Item (siehe dort). */
	width: 100%;
	aspect-ratio: 4 / 3;
	text-decoration: none;
	color: inherit;
	border-radius: 26px;             /* mehr Radius als vorher 18 px (Jan) */
	overflow: hidden;
	background: var(--al-ink, #0f172a);
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}
/* Die Mitte-Breite tragt das Item, die Card folgt mit width:100%. */

/* Klickbarkeit der MITTE andeuten (Jan): leichte Veroesserung und
   ein schimmernder Rahmen. KEIN translateY beim Hover -- das ist im
   ganzen Projekt untersagt (AGENTS.md), also nur scale + shadow. */
.al-carousel-item.is-center .al-carousel-card:hover,
.al-carousel-item.is-center .al-carousel-card:focus-visible {
	transform: scale(1.025);
	box-shadow: 0 18px 44px -18px rgba(15, 23, 42, 0.55),
	            0 0 0 2px rgba(255, 255, 255, 0.55);
}

.al-carousel-media {
	position: absolute;
	inset: 0;
	display: block;
}
.al-carousel-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.al-carousel-item.is-center .al-carousel-card:hover .al-carousel-media img {
	transform: scale(1.04);
}

/* Abdunklung fuer die Lesbarkeit des weissen Titels */
.al-carousel-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(15, 23, 42, 0.10) 0%,
		rgba(15, 23, 42, 0.30) 45%,
		rgba(15, 23, 42, 0.72) 100%);
	pointer-events: none;
}

.al-carousel-copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 12% 16% 18%;
	text-align: center;
}

/* Nur die MITTE traegt Text (Jan) -- die Seiten bleiben reines Bild,
   damit nichts an der Ueberdeckung hängenbleibt. */
.al-carousel-item.is-side .al-carousel-copy {
	opacity: 0;
	visibility: hidden;
}

.al-carousel-title {
	font-family: var(--al-font-display, Georgia, "Times New Roman", serif);
	font-weight: 700;
	font-size: clamp(15px, 1.5vw, 22px);
	line-height: 1.24;
	color: #fff;
	text-transform: capitalize;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	text-shadow: 0 2px 7px rgba(2, 6, 23, 0.92),
	             0 0 3px rgba(2, 6, 23, 0.85);
	/* Text von unten nach oben einblenden (Jan), sobald die Kachel
	   die Mitte erreicht -- die Animation startet mit der Klasse
	   is-center. */
	animation: al-titel-hoch 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes al-titel-hoch {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Pfeile: Chevrons, schmaler als die bisherigen Zeichen und groesser
   (Jan). Als SVG-Pfad, damit die Form gestaucht bleibt und nicht von
   der Schrift abhaengt. */
.al-carousel-arrow {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
	/* Blau kommt aus dem UA-Stylesheet (`button:hover {
	   background-color: AccentColor }`); ohne !important gewinnt die
	   Browserregel (0,1,1) gegen .al-carousel-arrow (0,1,0). */
	background: none !important;
	box-shadow: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.18s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}
.al-carousel-arrow-glyph {
	/* Chevron statt "<"/">": als maskiertes SVG, also unabhaengig von
	   der Schrift und in der Form gestaucht -- viewBox 24x40 heisst
	   hoeher als breit, waere das Zeichen "<" dagegen waere es breit
	   wie hoch. Die Groesse kommt aus width/height unten: vorher sass
	   das Zeichen als Schrift in ~40 px Kasten, jetzt bis 52 x 76 px
	   (Jan: groesser als die jetzigen Symbole). */
	display: block;
	width: clamp(30px, 3.4vw, 52px);
	height: clamp(46px, 5vw, 76px);
	/* background:currentColor ist notwendig: die mask deckelt nur ab,
	   was auf der Flaeche liegt. Mit `background:none` blieb die Flaeche
	   transparent und der Chevron war unsichtbar (Vision meldete "tiny,
	   dunkel, in der Ecke"). */
	background: currentColor;
	border: 0;
	box-shadow: none;
	color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2040%27%3E%3Cpath%20d%3D%27M7%205%20L19%2020%20L7%2035%27%20stroke%3D%27black%27%20stroke-width%3D%275.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2040%27%3E%3Cpath%20d%3D%27M7%205%20L19%2020%20L7%2035%27%20stroke%3D%27black%27%20stroke-width%3D%275.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	filter: drop-shadow(0 2px 7px rgba(2, 6, 23, 0.85));
}
.al-carousel-item.is-left .al-carousel-arrow-glyph {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2040%27%3E%3Cpath%20d%3D%27M17%205%20L5%2020%20L17%2035%27%20stroke%3D%27black%27%20stroke-width%3D%275.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2040%27%3E%3Cpath%20d%3D%27M17%205%20L5%2020%20L17%2035%27%20stroke%3D%27black%27%20stroke-width%3D%275.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}
.al-carousel-item.is-right .al-carousel-arrow-glyph {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2040%27%3E%3Cpath%20d%3D%27M7%205%20L19%2020%20L7%2035%27%20stroke%3D%27black%27%20stroke-width%3D%275.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2040%27%3E%3Cpath%20d%3D%27M7%205%20L19%2020%20L7%2035%27%20stroke%3D%27black%27%20stroke-width%3D%275.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}

.al-carousel-item.is-side:hover .al-carousel-arrow,
.al-carousel-item.is-side:focus-within .al-carousel-arrow {
	opacity: 1;
}
.al-carousel-item.is-center .al-carousel-arrow {
	display: none;
}

/* Blauen Hintergrund unterdruecken: Quelle ist das UA-Stylesheet des
   Browsers, kein Stylesheet der Seite matcht den Knopf. */
.al-carousel-track .al-carousel-arrow:hover,
.al-carousel-track .al-carousel-arrow:focus,
.al-carousel-track .al-carousel-arrow:active,
.al-carousel-item .al-carousel-arrow:hover,
.al-carousel-item .al-carousel-arrow:focus,
.al-carousel-item .al-carousel-arrow:active {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Weisser Rand nach Klick: :focus (Maus) ohne Outline, nur
   :focus-visible (Tastatur) bekommt den hellen Rahmen. */
.al-carousel-track .al-carousel-arrow:focus {
	outline: none;
}
.al-carousel-track .al-carousel-arrow:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: -4px;
}

@media (max-width: 782px) {
	.al-carousel { margin-top: 34px; }
	.al-carousel-track {
		--al-mitte: 56%;
		--al-seite: 32%;
		--al-ueber: 5%;
		aspect-ratio: 100 / 47;
	}
	.al-carousel-title { font-size: clamp(13px, 3vw, 17px); }
	.al-carousel-arrow-glyph {
		width: clamp(26px, 7vw, 38px);
		height: clamp(40px, 10vw, 58px);
	}
}

/* ------------------------------------------------------------------
   Horizontale Liste der Google-Bewertungen (Jan).
   Die Eintraege stehen in einer Reihe, jeweils Sterne, Name und
   Quelle untereinander.
------------------------------------------------------------------ */
.al-stimmen {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.al-stimme {
	flex: 1 1 168px;
	min-width: 150px;
	padding: 18px 16px 16px;
	border: 1px solid var(--al-line, #d1dae5);
	border-radius: 10px;
	background: var(--al-paper, #fff);
}
.al-stimme-sterne {
	display: flex;
	gap: 2px;
	color: #f5b301;
	margin-bottom: 10px;
}
.al-stimme-sterne svg { display: block; }
.al-stimme-name {
	display: block;
	font-family: var(--al-font-display, Georgia, "Times New Roman", serif);
	font-size: 15.5px;
	line-height: 1.35;
	color: var(--al-ink, #0f172a);
}
.al-stimme-quelle {
	display: block;
	margin-top: 4px;
	font-family: var(--al-font-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--al-slate, #364151);
	opacity: 0.72;
}
.al-stimme-fuss {
	font-family: var(--al-font-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: 12.5px;
	color: var(--al-slate, #364151);
	opacity: 0.72;
	margin: 0;
}

/* ------------------------------------------------------------------
   Karussell auf schmalen Viewports.

   Ohne diese Regeln skalieren die Anteile (26 % / 44 % / 26 %) mit dem
   Viewport mit: bei 480 px war die Mitte 153 px und die seitlichen
   120 px breit -- zu klein fuer den Titel (Vision: "sehr klein"). Hier
   werden die Kacheln groesser und die seitlichen duerfen bewusst
   angeschnitten stehen, wie in Jans Vorbild.
------------------------------------------------------------------ */
@media (max-width: 782px) {
	.al-carousel-track {
		gap: 10px;
		min-height: 0;
	}
	.al-carousel-item {
		flex: 0 0 32%;
		max-width: 32%;
	}
	.al-carousel-item.is-center {
		flex: 0 0 56%;
		max-width: 56%;
	}
	.al-carousel-item.is-hidden {
		flex: 0 0 0;
		max-width: 0;
	}
	.al-carousel-title {
		font-size: clamp(15px, 3.6vw, 19px);
	}
	.al-carousel-item.is-side .al-carousel-title {
		font-size: clamp(13px, 3.1vw, 16px);
	}
}

/* ------------------------------------------------------------------
   Abschnitt "Dein Traum ...": Bilder immer 1:1 mit Border-Radius,
   KEIN Hover-Effekt (Jan). Das Video wird nicht abgespielt -- es zeigt
   nur den Snapshot, also den ersten Frame ueber das Poster-Bild.
------------------------------------------------------------------ */

/* Rasterkante wie alle anderen Bloecke: die Gruppe kam mit
   max-width:70vw, padding:48px und margin:120px daher -- dadurch
   liefen die Reihen von 168..1272, waehrend Hero, Feed, Passagiere
   und Karussell alle auf 216..1224 (70vw) stehen. Jan vermisste die
   "komplette content width"; gemessen mit .al-wrap identisch. */
.entry-content .al-traum {
	max-width: 70vw;
	margin-inline: auto;
	padding-inline: 0;
}

/* Traum-Titel: die Schriftfamilie wie der Hero-Button "JETZT BUCHEN"
   (gemessen: Georgia, Times New Roman, serif / 15.5px / 600).
   Montserrat hatte Jan zurueckgewiesen ("Schrift wie vorher"), die
   GROESSE bleibt dagegen auf dem angepassten Wert (43.2px, vorher 31px),
   weil nur die Schrift korrigiert werden sollte. */
.al-traum > h2.wp-block-heading,
.al-traum .wp-block-heading:not(.wp-block-heading--wie-seite) {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(30px, 3vw, 43.2px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.al-traum-row figure.wp-block-image,
.al-traum-row figure.wp-block-video {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--al-mist, #eef2f7);
}

.al-traum-row figure.wp-block-image img,
.al-traum-row figure.wp-block-video video,
.al-traum-row figure.wp-block-video img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
	/* Ausdruecklich ohne Transition und ohne Transform beim Hover. */
	transition: none;
}
.al-traum-row figure.wp-block-image img:hover,
.al-traum-row figure.wp-block-video video:hover {
	transform: none;
	filter: none;
}

/* ------------------------------------------------------------------
   Tag/Nacht-Regler (Vorher/Nachher-Style, Jan, Idee 3)

   Zwei Aufnahmen desselben Motivs: ballon-am-kran-1 (Tag) und
   ballon-am-Kran-Nacht-Zoom (Nacht) -- laut Sichtung identische
   Kameraposition, nur Licht und Himmel unterscheiden sich. Der obere
   (Tag-)Ausschnitt wird ueber die Breite des Reglers freigegeben,
   ohne JavaScript-Auswertung auszukommen gibt es hier keine Moeglich-
   keit (ein <input type=range">-Wert laesst sich per CSS nicht lesen),
   deshalb ein sehr kleiner Handler in landing.js.

   Content-Width SEITENUEBERGREIFEND 1008px.
   Gemessen bei 1440px Viewport (alle .al-wrap):
     /                  216..1224 (1008)
     /sponsoring/       216..1224 (1008)
     /posts/  (News)    216..1224 (1008)
     /ballon-am-kran-2/ 260..1180 (920)   <- AUSREISSER
   Der Regler hatte sich vorher an diesen Ausreisser angepasst, Jans
   Rueckmeldung war aber: an die ANDEREN Seiten halten. Deshalb jetzt
   1008px seitenuebergreifend, unabhaengig davon, was .al-wrap auf der
   jeweiligen Seite tut. mobile Luft 28px je Seite.
------------------------------------------------------------------ */
.al-tag-nacht {
	position: relative;
	max-width: 70vw;
	margin: clamp(40px, 5vw, 72px) auto 0;
	padding-inline: 0;
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	border-radius: 26px;              /* derselbe Radius wie die Kacheln */
	overflow: hidden;
	background: var(--al-ink, #0f172a);
	isolation: isolate;
}

.al-tag-nacht__ebene {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Tag-Ebene: deckt die Nacht-Ebene ab und wird ueber die Breite
   freigegeben. WICHTIG: die fruhere Fassung rechnete
   width: calc(100% * (100 / var(--al-tn, 50))) -- das ist in CSS
   UNZULAESSIG (man kann nicht durch einen Prozentwert dividieren),
   der gesamte width-Wert wurde verworfen und das Bild lief auf
   Breite 0. Stattdessen: die Ebene bleibt IMMER voll breit und
   wird per clip-path auf --al-tn beschnitten. */
.al-tag-nacht__tag {
	inset: 0;
	width: 100%;
	overflow: hidden;
	z-index: 1;
	clip-path: inset(0 calc(100% - var(--al-tn, 50%)) 0 0);
}

.al-tag-nacht__tag img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* Trennlinie am Regler */
.al-tag-nacht__mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--al-tn, 50%);
	width: 2px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.9);
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 0 12px rgba(2, 6, 23, 0.55);
}

.al-tag-nacht__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.35);
	backdrop-filter: blur(2px);
}

/* Das eigentliche Bedienelement: liegt ueber allem, ist aber
   unsichtbar -- die Markierung darunter folgt per --al-tn. */
.al-tag-nacht__regler {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

.al-tag-nacht__regler:focus-visible ~ .al-tag-nacht__mark {
	outline: 2px solid var(--al-blue, #0067ff);
	outline-offset: 3px;
}

/* Beschriftung */
.al-tag-nacht__label {
	position: absolute;
	bottom: 16px;
	z-index: 4;
	font-family: var(--al-font-body, "Noto Sans", sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 6px rgba(2, 6, 23, 0.9);
	pointer-events: none;
}
.al-tag-nacht__label--tag { left: 18px; }
.al-tag-nacht__label--nacht { right: 18px; }

.al-tag-nacht__titel {
	max-width: 70vw;
	margin: clamp(28px, 3vw, 44px) auto 0;
	font-family: var(--al-font-display, Georgia, "Times New Roman", serif);
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: var(--al-ink, #0f172a);
}

@media (max-width: 782px) {
	.al-tag-nacht { aspect-ratio: 1 / 1; }
}

/* ------------------------------------------------------------------
   Content-Width SEITENUEBERGREIFEND (Jan: "alle Seiten mit der
   Landing-Content-Width").

   Referenz: die Landing. Dort liefert frontend.css .al-wrap
   max-width: 70vw, also bei 1440px Viewport exakt 216..1224 (1008px).
   Abweichungen, vorher gemessen:
     /ballon-am-kran-2/ .al-wrap/.al-faq-wrap/.is-style-cta 920px
     /sponsoring/       Kinder 120..1320 (70vw)
     /startplatz/       .al-gallery-3/.al-split 120..1320 (70vw)
     /kontakt/          wp-block-columns 120..1320 (70vw)
     /highlights/       feed-fetcher 108..1332 (1224px)
   Die 70vw der Kontakt-Seite kommen aus der Astra-Variable
   --wp--custom--ast-wide-width-size (im ausgelieferten HTML als
   var(--wp--custom--ast-wide-width-size) nachgewiesen), die 1224px
   der Highlights-Seite aus dem Feed-Fetcher-Plugin. Beides wird hier
   ueberschrieben, statt fremde Plugins zu aendern.
------------------------------------------------------------------ */
:root {
	--wp--custom--ast-wide-width-size: 70vw;
	/* ZUSATZ: .entry-content[data-ast-blocks-layout] > * (Astra, inline)
	   zieht --wp--custom--ast-content-width-size -- das war der letzte
	   70vw-Ausreisser (ein Fließtext-Absatz auf /sponsoring/).
	   .al-hero und .al-section auf der Landing bleiben unberuehrt,
	   weil sie max-width: none mit hoeherer Spezifitaet tragen. */
	--wp--custom--ast-content-width-size: 70vw;
	--al-content: 70vw;
}

.entry-content > feed-fetcher,
.feed-fetcher {
	max-width: 70vw;
	margin-inline: auto;
}
/* Ausreisser nach der ersten Welle (gemessen, 1440px):
   /sponsoring/  .wp-block-group.al-list-4        120..1320 (1200)
                 .wp-block-group.al-balloon-row   120..1320 (1200)
                 wp-block-paragraph               120..1320 (1200)
   /kontakt/     wp-block-columns                 120..1320 (1200)
   Die 1200er-Gruppe oben greift nicht: sie erfasst per
   :not([class*="al-"]) ausdruecklich KEINE al- Klassen, und die
   Astra-Variable --wp--custom--ast-wide-width-size wird auf der
   Kontakt-Seite nicht verwendet (dort steht kein inline max-width
   im HTML, die Breite kommt aus dem WP-Standard der Columns).
   Deshalb gezielte Selektoren. */
.entry-content > .wp-block-group[class*="al-list"],
.entry-content > .wp-block-group.al-balloon-row,
.entry-content > .wp-block-columns,
.entry-content > p {
	max-width: 70vw;
	margin-left: auto;
	margin-right: auto;
}
/* Letzte Ausreisser (gemessen auf /sponsoring/ bei 1440px):
     wp-block-heading   120..1040  (920px, linksbuefig bei 120)
     wp-block-paragraph 120..1320  (70vw, linksbuefig bei 120)
   Beides ist der bewusste "linke Achse"-Beschluss e279a8c (V1.2.8,
   30.09.2026: Zentrierung fuer Inhaltsseiten entfernt). Jan will
   jetzt "alle Seiten mit der Landing-Content-Width" -- die Landing
   selbst liegt aber bei 216..1224, also ZENTRIERT. Deshalb hier
   ebenfalls zentriert auf 1008px. Falls die linke Achse auf dieser
   Seite bewusst bleiben soll, Ruecksprache erforderlich. */
.entry-content > h1.wp-block-heading,
.entry-content > h2.wp-block-heading,
.entry-content > h3.wp-block-heading,
.entry-content > h4.wp-block-heading,
.entry-content > .is-style-lead {
	max-width: 70vw;
	margin-left: auto;
	margin-right: auto;
}

/* Uebergeordnete Gruppen zentrieren ebenfalls, sonst stehen die
   Kinder in einer anderen Box als die Gruppe darueber. */
.entry-content > .wp-block-group.is-layout-flow {
	max-width: 70vw;
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================================
   Feinschliff 20.10.2026 -- Kontakt, Startplatz, Sponsoring-Bento
   ===================================================================== */

/* --- Kontakt (2933): zu viel Luft zwischen Seitenkopf und Formular.
   Quellen gemessen: .content-area margin-top 100px, Astra-Default-Block-
   padding 48px, h2 margin-top 52px -> 176px Leerband vor dem Inhalt. --- */
/* Astra setzt hier ueber #primary (ID-Spezifitaet) 100px -- daher !important. */
.page-id-2933 #primary.content-area.primary { margin-top: 24px !important; }
.page-id-2933 .entry-content > .wp-block-columns { padding-top: 0; padding-bottom: 0; }
.page-id-2933 .entry-content .wp-block-column h2.wp-block-heading { margin-top: 0; padding-top: 0; }
.page-id-2933 .entry-content .wp-block-column h2.wp-block-heading + p { margin-top: 18px; }

/* --- Startplatz (1355): Abstand Kopf -> Karte und Karte -> Fotos straffen.
   Gemessen vorher: Leerband 54px ueber der Karte, 120px zwischen Karte und
   Fotoraster (split padding-bottom 48 + margin 24 + gallery padding-top 48). --- */
.page-id-1355 .entry-content > .al-split {
	padding-top: 0;
	padding-bottom: 0;
	align-items: stretch;   /* Karte und Textspalte gleich hoch */
}
/* Karte: Hoehe folgt der Textspalte (Jan: "16:9 bzw so hoch wie der Text").
   Vorher 4:3 = 536x402, jetzt 536x369 = genau die Texthoehe. */
.page-id-1355 .entry-content .al-split .al-map {
	align-self: stretch;
	height: auto;
}
.page-id-1355 .entry-content .al-split .al-map iframe {
	height: 100%;
	aspect-ratio: auto;
}
.page-id-1355 .entry-content > .al-gallery-3 { padding-top: 0; padding-bottom: 0; margin-top: 24px; }

/* --- Startplatz: Fotos im 1:1-Format (vorher 291x380 = 4:5). --- */
.page-id-1355 .entry-content .al-gallery-3 figure {
	aspect-ratio: 1 / 1;
}
.page-id-1355 .entry-content .al-gallery-3 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* Ballon-Karten: Styles liegen jetzt im Plugin (assets/css/frontend.css),
   weil sie zum Block airlebnisse/balloon-row gehoeren. */



/* ------------------------------------------------------------------
   Platzhalter und technische Daten (Ballon-Seite /wohnbau/)
   Rein additiv: nur neue Klassen, keine bestehende Regel geaendert.
   Zweck: die Seite zeigt ihre Struktur sofort, ohne dass Daten oder
   Bilder erfunden werden. Jede noch leere Stelle ist als
   "noch zu befuellen" sichtbar markiert -- Jan tauscht sie spaeter im
   Editor aus. Kein Tracking, keine Fremdanfragen.
------------------------------------------------------------------ */

/* Gruppen der Seite auf die Content-Width der Haus-Seiten (70vw). */
.entry-content > .wp-block-group.al-page-head,
.entry-content > .wp-block-group.al-platzhalter {
	max-width: 70vw;
	margin-left: auto;
	margin-right: auto;
}

/* Noch nicht befuellte Stelle: Haarlinien-Andeutung, keine Kachel.
   Auch im Editor-Canvas, damit die Bildplatte in der Vorschau wie auf der
   Seite aussieht (die Platte ist Inhalt, kein Debug-Rahmen). */
:is(.entry-content, .editor-styles-wrapper) .al-platzhalter {
	border: 1px dashed var(--al-line);
	border-radius: var(--al-radius-card);
	background: var(--al-paper);
	padding: clamp(24px, 4vw, 48px);
}

:is(.entry-content, .editor-styles-wrapper) .al-platzhalter p {
	max-width: none;
	font-size: 15.5px;
	line-height: 1.65;
	margin: 0;
	text-align: center;
}

:is(.entry-content, .editor-styles-wrapper) .al-platzhalter strong {
	font-family: var(--al-font-display);
	font-weight: 600;
	color: var(--al-ink);
}

/* Ballonbild oben: Flaeche im 16:9, damit die Seite ihre Hoehe zeigt,
   ohne ein Bild zu behaupten. */
:is(.entry-content, .editor-styles-wrapper) .al-platzhalter-bild {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Galerie unten: gleiche Markierung, Hoehe wie drei Kacheln andeuten. */
:is(.entry-content, .editor-styles-wrapper) .al-platzhalter-galerie {
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Technische Daten: Haarlinien-Tabelle ohne Box, im Stil der Haus-Seiten.
   Nur .al-spec -- andere Seiten mit Tabellen bleiben unberuehrt. */
:is(.entry-content, .editor-styles-wrapper) .al-spec table {
	width: 100%;
	max-width: 70vw;
	margin: 0 auto;
	border-collapse: collapse;
	border: 0;
	background: none;
}

:is(.entry-content, .editor-styles-wrapper) .al-spec table th,
:is(.entry-content, .editor-styles-wrapper) .al-spec table td {
	border: 0;
	border-top: 1px solid var(--al-line);
	background: none;
	padding: 15px 0;
	text-align: left;
	vertical-align: top;
}

:is(.entry-content, .editor-styles-wrapper) .al-spec table tr:last-child th,
:is(.entry-content, .editor-styles-wrapper) .al-spec table tr:last-child td {
	border-bottom: 1px solid var(--al-line);
}

:is(.entry-content, .editor-styles-wrapper) .al-spec table th {
	width: 42%;
	padding-right: 24px;
	font-family: var(--al-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.4;
	color: var(--al-ink);
}

:is(.entry-content, .editor-styles-wrapper) .al-spec table td {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--al-slate);
}

@media (max-width: 640px) {
	:is(.entry-content, .editor-styles-wrapper) .al-spec table {
		max-width: none;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-spec table th {
		width: 45%;
		padding-right: 16px;
		font-size: 16px;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-spec table td {
		font-size: 15.5px;
	}
}

/* ------------------------------------------------------------------
   Objekt-Steckbrief /wohnbau/ -- Vorbild: .hermes/reference/wohnbau-vorbild.html
   Rein additiv: ausschliesslich neue .al-obj-* Klassen und eigene
   Custom Properties, keine bestehende Regel geaendert. Nur
   Systemschriften, keine Fremd-Fonts, kein Tracking.
   Uebernommen aus dem Vorbild: Kopfzeile mit Breadcrumb (Mono-Versalien)
   und Objekt-Nr., zwei Reiter, zweispaltiges Raster, Steckbrief mit
   Faktenliste (Haarlinien), dunkler Knopf, Stand/Rev.-Stempel, Register
   mit vier Abschnitten, sticky Bild beim Reiter "Alle Daten",
   einspaltig unter 980px.
   Bewusst abweichend: statt der SVG-Zeichnung eine Bildbuehne 16:9 mit
   Text-Umschaltern (keine Masse erfunden), Kopfzeile nicht auf
   Vollbreite, sondern wie der Rest der Seite auf der Content-Width.
------------------------------------------------------------------ */

/* System-Mono und ruhige Grautone, nur fuer diese Seite. */
:is(.entry-content, .editor-styles-wrapper) {
	--al-obj-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
	--al-obj-muted: #63666c;
	--al-obj-faint: #8a8d93;
	--al-obj-rule: #dcdde0;
	--al-obj-rule-soft: #ebebee;
	--al-obj-stage: #ededef;
	--al-obj-stage-line: #e0e1e4;
}

/* ---------- Kopfzeile: Breadcrumb links, Objekt-Nr. rechts ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-topbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 24px;
	border-bottom: 1px solid var(--al-obj-rule);
	padding: 15px 0 14px;
	margin: 0 auto 26px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	max-width: none;
	font-family: var(--al-obj-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--al-obj-muted);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-crumbs .sep {
	color: #b3b6bb;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-crumbs b {
	font-weight: 400;
	color: var(--al-ink);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-objnum {
	margin: 0;
	max-width: none;
	font-family: var(--al-obj-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--al-obj-muted);
}

/* ---------- Zwei Reiter ("Ueberblick" / "Alle Daten") ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	border-bottom: 1px solid var(--al-obj-rule);
	margin: 0 auto 30px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-tabs .al-obj-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin: 0 0 -1px;
	padding: 0 0 11px;
	font-family: var(--al-font-body);
	font-size: 13.5px;
	/* Astra setzt fuer Buttons im Frontend 700/uppercase/1em/30px, im
	   Editor-Canvas dagegen einen Reset auf 400/none/normal/2px. Ohne diese
	   Zeilen sieht der Reiter im Editor anders aus als auf der Seite.
	   Radius bewusst 0: der Radius 30px aus Astra liess den Unterstrich-Reiter
	   wie eine Pille aussehen. Die Pillen-Variante setzt 999px selbst. */
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1em;
	border-radius: 0;
	box-shadow: none;
	letter-spacing: 0.02em;
	color: var(--al-obj-muted);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-tabs .al-obj-tab[aria-selected="true"] {
	color: var(--al-ink);
	border-bottom-color: var(--al-ink);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-tabs .al-obj-tab:hover {
	color: var(--al-ink);
	background: none;
}

/* ---------- Zweispaltiges Raster: Bildbuehne links, Steckbrief rechts ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 52px;
	margin: 0 auto;
}

/* Achtung: WP/Astra schreiben flex-basis/flex-grow per Inline-CSS mit
   gleicher Spezifitaet (0,3,0) -- diese Regeln brauchen deshalb die
   Blockklasse als zusaetzliche Klasse (0,4,0), sonst gewinnt still 50/50. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-columns.al-obj-grid {
	padding: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-grid > .wp-block-column {
	min-width: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-grid > .wp-block-column.al-obj-stage-col {
	flex: 1 1 0;
	min-width: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-grid > .wp-block-column.al-obj-data-col {
	flex: 0 0 clamp(300px, 34%, 396px);
	min-width: 0;
}

/* ---------- Bildbuehne mit Umschaltern ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-stage {
	background: var(--al-obj-stage);
	border: 1px solid var(--al-obj-stage-line);
	display: grid;
	place-items: center;
	padding: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 24px);
	min-height: clamp(320px, 34vw, 460px);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-plate {
	margin: 0;
	width: 100%;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-plate:not(.is-active) {
	display: none;
}

/* Sobald ein Bild in der Gruppe liegt: Platzhalter-Text aus, Flaeche randlos. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-plate:has(img) {
	border: 0;
	background: none;
	padding: 0;
	display: block;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-plate:has(img) p {
	display: none;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-plate img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Bildbuehne ohne Kasten: der Foto-Block entscheidet (Schalter "Rahmen").
   Ohne Rahmen verschwindet der graue Kasten samt Innenabstand und
   Mindesthoehe, das Bild steht randlos in der Spalte. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-stage:has(.al-obj-foto--plain),
:is(.entry-content, .editor-styles-wrapper) .al-obj-stage:has(.al-obj-masse) {
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	display: block;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-plate.al-obj-foto--plain {
	background: none;
	border: 0;
	padding: 0;
}

/* ---------- Bild mit Bemaßung (Block airlebnisse/objekt-bemassung) ----------
   Die Balken liegen prozentual über dem Bild; Strich und Schrift kommen als
   Pixel für die Originalbreite an und werden per cqw mit der Anzeigebreite
   skaliert (Rückfall: feste px, wenn der Browser keine Container-Queries kann). */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse {
	position: relative;
	display: block;
	/* Breite aus dem Sidebar-Regler (--al-masse-scale), Standard 100 %. */
	width: calc(var(--al-masse-scale, 100) * 1%);
	max-width: 100%;
	margin: 0 auto;
	container-type: inline-size;
	line-height: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse img {
	display: block;
	width: 100%;
	height: auto;
	/* Der Block darf in der Bildbühne sitzen (.al-obj-plate) -- dort gilt
	   sonst 16:9 mit object-fit:cover, was das Bild beschneiden und die
	   prozentualen Maßpositionen verschieben würde. */
	aspect-ratio: auto;
	object-fit: contain;
}

/* Eine Ansicht = Bild + eigener Maßsatz. Beim Umschalter (Foto/Zeichnung)
   wird nur die aktive Ansicht gezeigt. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht {
	position: relative;
	display: none;
	line-height: 0;
	overflow: hidden;
	/* Rückfall ohne Container-Queries: feste Pixel aus dem JSON */
	--al-masse-strich: var(--al-masse-strich-px, 2px);
	--al-masse-schrift: var(--al-masse-schrift-px, 20px);
}

/* Bildausschnitt: Zoom und Verschiebung aus dem Konfigurator. Die Balken
   sitzen prozentual im Rahmen und bleiben stehen, das Bild bewegt sich. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht img {
	transform: translate(var(--al-masse-dx, 0%), var(--al-masse-dy, 0%)) scale(var(--al-masse-zoom, 1));
	transform-origin: center;
}

/* Überlagerte Zeichnung: deckungsgleich über dem Foto, eigene Skalierung
   (--al-ov-*), damit beide Bilder zusammenpassen. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht .al-obj-masse__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: var(--al-ov-opacity, 1);
	transform: translate(var(--al-ov-dx, 0%), var(--al-ov-dy, 0%)) scale(var(--al-ov-zoom, 1));
	transform-origin: center;
	pointer-events: none;
}

/* Wechsel-Ansicht: zweites Bild liegt deckungsgleich dahinter, das Mini-Fenster
   unten rechts zeigt das jeweils andere Bild. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht .al-obj-masse__bild--alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transform: translate(var(--al-ov-dx, 0%), var(--al-ov-dy, 0%)) scale(var(--al-ov-zoom, 1));
	transform-origin: center;
	pointer-events: none;
	transition: opacity 0.18s ease;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht .al-obj-masse__bild--main {
	transition: opacity 0.18s ease;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht.is-alt .al-obj-masse__bild--main { opacity: 0; }
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht.is-alt .al-obj-masse__bild--alt { opacity: 1; }

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__swap {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 4;
	width: 88px;
	height: 88px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #fff;
	/* Weißer Rahmen liegt außerhalb des Bildes, damit der Ausschnitt
	   randlos bis zur Kante geht (kein Streifen bei verschobenem Bild). */
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0, 0, 0, 0.2), 0 3px 12px rgba(0, 0, 0, 0.26);
	cursor: pointer;
	line-height: 0;
	overflow: hidden;
	appearance: none;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__swap img {
	display: block;
	/* 2 px Überstand je Seite: schluckt Verschiebungen aus mini_x/mini_y,
	   damit am Rand kein Streifen sichtbar wird. */
	width: calc(100% + 6px);
	height: calc(100% + 6px);
	max-width: none;
	margin: -3px;
	object-fit: cover;
	object-position: center center;
	transform-origin: center center;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__swap:hover { box-shadow: 0 0 0 4px #fff, 0 0 0 5px #1b1c1e, 0 3px 12px rgba(0, 0, 0, 0.3); }

/* Wechsel-Ansicht: beide Bilder füllen exakt denselben Rahmen (Seitenverhältnis
   des ersten Bildes), damit weder Bild noch Mini-Fenster beim Umschalten
   wandern. Das zweite Bild wird dabei mittig beschnitten. */
:is(.entry-content, .editor-styles-wrapper) figure.al-obj-masse.al-obj-masse--swap {
	display: grid;
}
:is(.entry-content, .editor-styles-wrapper) figure.al-obj-masse.al-obj-plate.al-obj-masse--swap:not(.is-active) {
	display: none;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse--swap > .al-obj-masse__ansicht {
	grid-area: 1 / 1;
	display: block;
	height: 100%;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.18s ease;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse--swap > .al-obj-masse__ansicht.is-active {
	visibility: visible;
	opacity: 1;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse--swap > .al-obj-masse__ansicht img.al-obj-masse__bild--main {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	/* bild_transform wirkt hier nur als Beschnitt -- der Rahmen bleibt stehen. */
	transform: translate(var(--al-masse-dx, 0%), var(--al-masse-dy, 0%)) scale(var(--al-masse-zoom, 1));
	transform-origin: center;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht.is-active { display: block; }

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__switch {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	gap: 6px;
	line-height: 1;
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__switch button {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: #1b1c1e;
	font-family: var(--al-obj-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 12px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__switch button.is-active {
	background: #1b1c1e;
	border-color: #1b1c1e;
	color: #fff;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	line-height: 1;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar {
	position: absolute;
	line-height: 1;
	/* Saum aus dem JSON: "saum": true -> dunkler Rand um Linie und Schrift,
	   sonst einfarbig (kein Kontrastrand). */
	filter: var(--al-masse-saum, drop-shadow(0 0 1px rgba(0, 0, 0, 0.85)));
}

/* waagerechter Balken */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--h {
	border-top: var(--al-masse-strich) solid var(--al-masse-linie);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--h::before,
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--h::after {
	content: "";
	position: absolute;
	top: calc(var(--al-masse-strich) * -4);
	width: var(--al-masse-strich);
	height: calc(var(--al-masse-strich) * 8);
	background: var(--al-masse-linie);
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--h::before { left: 0; }
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--h::after { right: 0; }

/* senkrechter Balken */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--v {
	border-left: var(--al-masse-strich) solid var(--al-masse-linie);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--v::before,
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--v::after {
	content: "";
	position: absolute;
	left: calc(var(--al-masse-strich) * -4);
	height: var(--al-masse-strich);
	width: calc(var(--al-masse-strich) * 8);
	background: var(--al-masse-linie);
}
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--v::before { top: 0; }
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--v::after { bottom: 0; }

/* Beschriftung */
:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__label {
	position: absolute;
	color: var(--al-masse-text);
	font-family: var(--al-obj-mono);
	font-size: var(--al-masse-schrift);
	line-height: 1;
	white-space: nowrap;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--h .al-obj-masse__label {
	left: 50%;
	top: calc(var(--al-masse-strich) * 3);
	transform: translateX(-50%);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__bar--v .al-obj-masse__label {
	top: 50%;
	left: calc(var(--al-masse-schrift) * -0.9);
	transform: translate(-50%, -50%) rotate(-90deg);
	transform-origin: center;
}

@supports (container-type: inline-size) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-masse__ansicht {
		--al-masse-strich: calc(var(--al-masse-strich-pct) * 1cqw);
		--al-masse-schrift: calc(var(--al-masse-schrift-pct) * 1cqw);
	}
}

/* ---------- Bildergalerie (Block airlebnisse/objekt-galerie) ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery {
	display: grid;
	gap: 12px;
	/* Astra zentriert die Inhaltsbloecke per margin:auto; ein hartes
	   margin:0 haette die Galerie an den linken Rand gedrueckt. */
	margin: 0 auto;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery .al-obj-gallery-item {
	margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--1x1 img { aspect-ratio: 1 / 1; }
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--4x3 img { aspect-ratio: 4 / 3; }
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--16x9 img { aspect-ratio: 16 / 9; }

/* ---------- Masonry: versetzte Spalten, Bilder in Originalhoehe ----------
   Reines CSS (column-*), kein Skript. Die Spaltenzahl kommt aus den
   --2/--3/--4-Klassen; die Format-Regeln oben werden hier bewusst
   aufgehoben, weil Masonry von den unterschiedlichen Bildhoehen lebt. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry {
	display: block;
	column-gap: 12px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--2 { columns: 2; }
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--3 { columns: 3; }
:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--4 { columns: 4; }

:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry .al-obj-gallery-item {
	display: block;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 12px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
}

@media (max-width: 980px) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--3,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--3,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--4 {
		columns: 2;
	}
}

@media (max-width: 600px) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--2,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--3,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--4 {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Zweite Klasse nötig: die Basisregel .al-obj-gallery--masonry.al-obj-gallery--3
	   ist spezifischer und würde sonst weiter 3 Spalten setzen. */
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--2,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--3,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-gallery--masonry.al-obj-gallery--4 {
		columns: 1;
	}
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-views {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-view {
	appearance: none;
	background: var(--al-obj-stage);
	border: 1px solid var(--al-obj-stage-line);
	min-width: 84px;
	min-height: 44px;
	padding: 9px 12px;
	font-family: var(--al-obj-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* Wie beim Reiter: Astra-Buttonwerte auch im Editor halten. */
	font-weight: 700;
	line-height: 1em;
	border-radius: 30px;
	color: var(--al-obj-muted);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-view:hover {
	border-color: #b9bcc2;
	background: #f4f4f6;
	color: var(--al-ink);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-view[aria-pressed="true"] {
	border-color: var(--al-ink);
	background: var(--al-white);
	color: var(--al-ink);
}

:is(.entry-content, .editor-styles-wrapper) p.al-obj-caption {
	margin: 14px 0 0;
	max-width: none;
	font-family: var(--al-obj-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b6e74;
}

/* ---------- Panels: Überblick (Standard) und Register ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-panel--daten {
	display: none;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-panel[hidden] {
	display: none;
}

/* Register laenger als das Bild: Bild bleibt beim Scrollen stehen. */
@media (min-width: 981px) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data > .al-obj-stage-col {
		position: sticky;
		top: 22px;
	}
}

/*
 * Reiter "Alle Daten": die erste Datentabelle bleibt oben stehen, die
 * weiteren Register-Tabellen folgen darunter; in der Bühne stehen beide
 * Ansichten untereinander (kein leerer Raum links, kein Umschalter nötig).
 */
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-about .al-obj-kicker,
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-about .al-obj-title,
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-about .al-obj-byline,
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-about .al-obj-summary,
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-about .al-obj-more,
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-about .al-obj-stamp {
	display: none;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-about .al-obj-facts {
	margin-bottom: 34px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-views {
	display: none;
}

/* Die Umschalter stehen im Kopf, also außerhalb des Rasters. */
body.al-obj-data-mode .al-obj-views {
	display: none;
}

@media (min-width: 981px) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data > .al-obj-stage-col {
		position: static;
	}
}

/* "Alle Daten": beide Ansichten untereinander -- Größe bleibt wie eingestellt
   (Regler "Bildgröße"), damit sie nicht plötzlich volle Breite einnehmen. */

:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-stage .al-obj-plate:not(.is-active):not(.al-obj-masse--swap) {
	display: block;
}

/* Wechsel-Raster bleiben Raster (sonst lägen beide Bilder untereinander). */
:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-stage .al-obj-plate.al-obj-masse--swap {
	display: grid;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-grid.is-data .al-obj-stage .al-obj-plate + .al-obj-plate {
	margin-top: 22px;
}

/* ---------- Steckbrief ---------- */
:is(.entry-content, .editor-styles-wrapper) p.al-obj-kicker {
	margin: 0 0 12px;
	max-width: none;
	font-family: var(--al-obj-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-obj-muted);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-panel h1.wp-block-heading.al-obj-title {
	margin: 0;
	font-family: var(--al-font-display);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--al-ink);
}

:is(.entry-content, .editor-styles-wrapper) p.al-obj-byline {
	margin: 10px 0 0;
	max-width: none;
	font-size: 14px;
	color: var(--al-obj-muted);
}

:is(.entry-content, .editor-styles-wrapper) p.al-obj-summary {
	margin: 16px 0 0;
	max-width: none;
	font-size: 15px;
	line-height: 1.55;
	color: var(--al-slate);
	text-wrap: pretty;
}

/* Faktenliste (dt/dd-Optik): Haarlinien, Label links, Wert rechts. */
:is(.entry-content, .editor-styles-wrapper) .al-obj-facts {
	margin-top: 28px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table {
	max-width: none;
	margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table th,
:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table td,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table th,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table td {
	border-top-color: var(--al-obj-rule-soft);
	padding-top: 9px;
	padding-bottom: 9px;
	vertical-align: baseline;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table tr:first-child th,
:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table tr:first-child td,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table tr:first-child th,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table tr:first-child td {
	border-top-color: var(--al-obj-rule);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table tr:last-child th,
:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table tr:last-child td,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table tr:last-child th,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table tr:last-child td {
	border-bottom-color: var(--al-obj-rule);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table th,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table th {
	width: auto;
	padding-right: 18px;
	font-family: var(--al-font-body);
	font-weight: 400;
	font-size: 13.5px;
	color: var(--al-obj-muted);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table td,
:is(.entry-content, .editor-styles-wrapper) .al-obj-register table td {
	text-align: right;
	font-size: 13.5px;
	color: var(--al-ink);
	font-variant-numeric: tabular-nums;
}

/* Dunkler Knopf "Alle Daten anzeigen". */
:is(.entry-content, .editor-styles-wrapper) .al-obj-more .wp-block-button__link {
	background: #16181c;
	color: var(--al-white);
	border: 0;
	border-radius: 0;
	padding: 12px 18px;
	font-family: var(--al-font-body);
	font-size: 13px;
	/* Frontend erbt hier 600/none von Astra, der Editor-Reset setzt
	   700/uppercase -- ohne diese zwei Zeilen sieht der Knopf anders aus. */
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-decoration: none;
	white-space: normal;
	transition: opacity 0.15s;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-more .wp-block-button__link:hover {
	opacity: 0.82;
}

:is(.entry-content, .editor-styles-wrapper) p.al-obj-stamp {
	margin: 14px 0 0;
	max-width: none;
	font-family: var(--al-obj-mono);
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--al-obj-faint);
}

/* ---------- Register (Reiter "Alle Daten") ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-register h2.wp-block-heading {
	margin: 26px 0 2px;
	font-family: var(--al-obj-mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--al-obj-muted);
	line-height: 1.5;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-register h2.wp-block-heading:first-child {
	margin-top: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-register table {
	border-top: 0;
}

:is(.entry-content, .editor-styles-wrapper) p.al-obj-note {
	margin: 22px 0 0;
	max-width: 60ch;
	font-size: 12px;
	line-height: 1.6;
	color: #7a7d83;
}

/* ---------- Fokus und Bewegung ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-tabs .al-obj-tab:focus-visible,
:is(.entry-content, .editor-styles-wrapper) .al-obj-view:focus-visible,
:is(.entry-content, .editor-styles-wrapper) .al-obj-more .wp-block-button__link:focus-visible {
	outline: 2px solid var(--al-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-tabs .al-obj-tab,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-view,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-more .wp-block-button__link {
		transition: none;
	}
}

/* ---------- Responsiv: einspaltig unter 980px ---------- */
@media (max-width: 980px) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-grid {
		flex-wrap: wrap;
		gap: 32px;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-obj-grid > .wp-block-column.al-obj-stage-col,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-grid > .wp-block-column.al-obj-data-col {
		flex: 1 1 100%;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-obj-stage {
		min-height: 300px;
	}
}

@media (max-width: 620px) {
	:is(.entry-content, .editor-styles-wrapper) .al-obj-topbar {
		gap: 6px 16px;
		padding: 12px 0 11px;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-obj-tabs {
		gap: 20px;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table th,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-register table th {
		padding-right: 12px;
		font-size: 13px;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table td,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-register table td {
		font-size: 13px;
	}

	/* Mobil: 90 % der Bildschirmbreite. Astra begrenzt direkte Kinder des
	   Inhalts per --wp--custom--ast-content-width-size (hier 273 px!) --
	   für die Objektseite gilt stattdessen 90vw, damit Kopf, Bild, Tabelle
	   und Galerie auf derselben Kante sitzen. */
	:is(.entry-content, .editor-styles-wrapper):has(.al-obj-head) {
		--wp--custom--ast-content-width-size: 90vw;
	}

	/* Ältere Regel im Theme setzt .wp-block-columns und direkte Absätze auf
	   70vw — für die Objektseite gilt auch hier 90vw. */
	:is(.entry-content, .editor-styles-wrapper):has(.al-obj-head) > .wp-block-columns,
	:is(.entry-content, .editor-styles-wrapper):has(.al-obj-head) > p {
		max-width: 90vw;
	}

	:is(.entry-content, .editor-styles-wrapper) .al-obj-grid {
		gap: 22px;
	}

	/* Mobil zählt die volle Breite mehr als der Skalierungsregler. */
	:is(.entry-content, .editor-styles-wrapper) .al-obj-masse {
		width: 100%;
	}

	/* Datentabellen füllen die Spalte, ohne eigenen Außenrand. */
	:is(.entry-content, .editor-styles-wrapper) .al-obj-facts,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-register {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	:is(.entry-content, .editor-styles-wrapper) .al-obj-facts table,
	:is(.entry-content, .editor-styles-wrapper) .al-obj-register table {
		width: 100%;
	}
}


/* ==================================================================
   Objekt-Steckbrief -- Nachtrag 1.25.0 (rein additiv)
   1. Kopf-Varianten aus dem Block airlebnisse/objekt-kopf:
      .al-obj-head--crumbs-mono|plain, .al-obj-head--tabs-underline|pill,
      .al-obj-head--normal|compact. Ohne die Klassen (altes Markup) bleibt
      alles wie bisher -- die Varianten greifen nur additiv.
   2. Bildformate .al-obj-foto-16x9 / .al-obj-foto-4x3.
   3. Nur Editor-Canvas: Reihen-Layout + sichtbare Panels, damit die
      Vorschau dem Frontend entspricht und nichts unklickbar versteckt ist.
   Spezifitaet der Varianten-Regeln liegt bei (0,3,0)/(0,4,0) und schlaegt
   damit die Basisregeln aus 1.24.x, ohne sie umzuschreiben.
================================================================== */

/* ---------- 1a. Brotkrumen: normale Schrift statt Kapital-Mono ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-plain .al-obj-crumbs,
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-plain .al-obj-objnum {
	font-family: var(--al-font-body);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--al-obj-muted);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-plain .al-obj-crumbs b {
	font-weight: 600;
}

/* ---------- 1a2. Brotkrumen: unterstrichen ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-underline .al-obj-crumbs,
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-underline .al-obj-objnum {
	font-family: var(--al-font-body);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--al-obj-muted);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-underline .al-obj-crumbs span:not(.sep),
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-underline .al-obj-crumbs b {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-underline .al-obj-crumbs b {
	font-weight: 600;
}

/* ---------- 1a3. Brotkrumen: Pillen ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-pill .al-obj-crumbs,
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-pill .al-obj-objnum {
	font-family: var(--al-font-body);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--al-obj-muted);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-pill .al-obj-crumbs {
	gap: 6px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-pill .al-obj-crumbs span:not(.sep),
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-pill .al-obj-crumbs b {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid var(--al-obj-stage-line);
	border-radius: 999px;
	background: var(--al-obj-stage);
	color: var(--al-obj-muted);
	font-weight: 400;
	line-height: 1.3;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-pill .al-obj-crumbs b {
	border-color: var(--al-ink);
	background: var(--al-ink);
	color: var(--al-white);
	font-weight: 600;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--crumbs-pill .al-obj-crumbs .sep {
	display: none;
}

/* ---------- 1b. Reiter: gefuellte Pillen statt Unterstrich ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--tabs-pill .al-obj-tabs {
	border-bottom: 0;
	gap: 10px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--tabs-pill .al-obj-tabs .al-obj-tab {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--al-obj-stage-line);
	border-radius: 999px;
	background: var(--al-obj-stage);
	color: var(--al-obj-muted);
	line-height: 1.3;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--tabs-pill .al-obj-tabs .al-obj-tab[aria-selected="true"] {
	border-color: var(--al-ink);
	background: var(--al-ink);
	color: var(--al-white);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--tabs-pill .al-obj-tabs .al-obj-tab:hover {
	color: var(--al-ink);
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--tabs-pill .al-obj-tabs .al-obj-tab[aria-selected="true"]:hover {
	color: var(--al-white);
}

/* ---------- 1c. Dichte: kompakt ---------- */
:is(.entry-content, .editor-styles-wrapper) .al-obj-head--compact .al-obj-topbar {
	padding: 6px 0 6px;
	margin-bottom: 14px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--compact .al-obj-tabs {
	margin-bottom: 16px;
	gap: 18px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--compact .al-obj-tabs .al-obj-tab {
	padding-bottom: 7px;
	font-size: 13px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--compact .al-obj-views {
	margin-top: 8px;
	gap: 8px;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-head--compact .al-obj-view {
	min-width: 72px;
	min-height: 36px;
	padding: 6px 10px;
}

/* ---------- 2. Bildformate ---------- */
:is(.entry-content, .editor-styles-wrapper) .wp-block-image.al-obj-foto-16x9,
:is(.entry-content, .editor-styles-wrapper) .wp-block-image.al-obj-foto-4x3 {
	margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-foto-16x9 img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

:is(.entry-content, .editor-styles-wrapper) .al-obj-foto-4x3 img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- 3. Nur Editor-Canvas (.editor-styles-wrapper) ----------
   Im Frontend matcht keine dieser Zeilen -- dort ist der Selektor tot.

   3a. Gutenberg legt zwischen Container und Kind eigene Layout-divs
       (.block-editor-inner-blocks > .block-editor-block-list__layout).
       Diese divs sind display:block und zerlegen jede Flex-Reihe, deshalb
       hier dieselbe Reihe wie im Frontend.
   3b. Inaktive Panels/Platten sind im Frontend absichtlich versteckt
       (.al-obj-panel--daten, .al-obj-plate:not(.is-active)). Im Editor
       waeren sie damit unklickbar -- dort bleiben sie sichtbar. */
.editor-styles-wrapper .al-obj-crumbs .block-editor-inner-blocks,
.editor-styles-wrapper .al-obj-crumbs .block-editor-block-list__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.editor-styles-wrapper .al-obj-tabs .block-editor-inner-blocks,
.editor-styles-wrapper .al-obj-tabs .block-editor-block-list__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 26px;
}

.editor-styles-wrapper .al-obj-views .block-editor-inner-blocks,
.editor-styles-wrapper .al-obj-views .block-editor-block-list__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.editor-styles-wrapper .al-obj-crumbs .block-editor-block-list__block,
.editor-styles-wrapper .al-obj-tabs .block-editor-block-list__block,
.editor-styles-wrapper .al-obj-views .block-editor-block-list__block {
	margin: 0;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

.editor-styles-wrapper .al-obj-tabs .block-editor-inner-blocks,
.editor-styles-wrapper .al-obj-views .block-editor-inner-blocks {
	flex: 1 1 auto;
	min-width: 0;
}

.editor-styles-wrapper .al-obj-panel--daten,
.editor-styles-wrapper .al-obj-plate:not(.is-active) {
	display: block;
}

/* 3c. Der Kopf-Block hat drei InnerBlocks-Bereiche (Pfad / Reiter /
   Ansichten), WordPress rendert aber in JEDEN Bereich die gesamte
   Kinderliste -- die Bereiche wuerden also je 7 statt 3/2/2 zeigen.
   Deshalb hier pro Bereich nur die passenden Kind-Bloecke anzeigen.
   Im Frontend matcht keine dieser Zeilen (dort gibt es kein
   .block-editor-block-list__block). */
.editor-styles-wrapper .al-obj-crumbs .block-editor-block-list__block:not([data-type="airlebnisse/objekt-crumb"]),
.editor-styles-wrapper .al-obj-tabs .block-editor-block-list__block:not([data-type="airlebnisse/objekt-tab"]),
.editor-styles-wrapper .al-obj-views .block-editor-block-list__block:not([data-type="airlebnisse/objekt-view"]) {
	display: none;
}

.editor-styles-wrapper .al-obj-grid > .block-editor-inner-blocks {
	display: flex;
	width: 100%;
	min-width: 0;
}

.editor-styles-wrapper .al-obj-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 52px;
	width: 100%;
	min-width: 0;
}

.editor-styles-wrapper .al-obj-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.al-obj-stage-col {
	flex: 1 1 0;
	min-width: 0;
}

.editor-styles-wrapper .al-obj-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column.al-obj-data-col {
	flex: 0 0 clamp(300px, 34%, 396px);
	min-width: 0;
}