/* Branchenlösung Base – Polish-Layer.
   Ergänzt theme.json um Effekte, die sich nicht sauber über Block-Attribute
   abbilden lassen (Schatten, Hover, Tabellen-Streifen, Abstandslinien). */

/* Design-Politur Runde 3: Animationen, Header/Footer, mehr Hover-Politur */

html {
	scroll-behavior: smooth;
}

/* create_or_update_navigation(): hebt den Kontakt-Menüpunkt als gefüllten Pill-
   Button hervor statt eines schlichten Textlinks - ohne eigene Terminbuchung
   ist "Kontakt" der wichtigste einzelne Klick im ganzen Menü. */
.bl-nav-cta .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	gap: 0.4rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	padding: 0.5rem 1.25rem !important;
	border-radius: 999px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

.bl-nav-cta .wp-block-navigation-item__content::after {
	content: "→";
	text-transform: none;
}

.bl-nav-cta .wp-block-navigation-item__content:hover {
	filter: brightness(0.94);
}

/* Tablet/kleiner Laptop: WordPress klappt das Menü erst unter 600px zu einem
   Hamburger zusammen - dazwischen passen 6 Menüpunkte samt Logo aber erst ab ca.
   1000px in eine Zeile; darunter wurde der Header 2-3 Zeilen hoch (113-161px) und
   blieb wegen position:sticky so beim Scrollen im Bild. Hamburger deshalb bis
   1023px, und knapp darüber (1024-1279px, z.B. iPad quer) etwas engere Abstände,
   damit das Menü dort noch sicher in eine Zeile passt. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.wp-block-template-part > header .wp-block-navigation__container {
		gap: 1rem !important;
	}

	.wp-block-template-part > header .wp-block-navigation-item__content {
		font-size: 0.95rem;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* Overlay-Menü: WordPress-Standard sind ~23px hohe Menüpunkte - zu klein zum
   sicheren Antippen (empfohlen: mind. 44px). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.7rem 0 !important;
	font-size: 1.15rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .bl-nav-cta .wp-block-navigation-item__content {
	padding: 0.7rem 1.5rem !important;
	font-size: 0.95rem;
}

/* Mobiles Menü (Hamburger-Overlay): WordPress-Kernblock rendert das
   Responsive-Container-Modal standardmäßig weiß/schwarz statt in den
   Theme-Farben - fällt auf dunklen Varianten als unpassender weißer
   Vollbild-Screen auf (vom Nutzer am Handy gemeldet). */
.wp-block-navigation__responsive-container.is-menu-open {
	/* !important nötig: WordPress' eigenes Block-Library-CSS setzt für dieses
	   Modal ebenfalls eine feste Hintergrundfarbe, gleiche Spezifität, lädt
	   aber nach diesem Theme-CSS - ohne !important gewinnt sonst weiterhin Weiß. */
	background-color: var(--wp--preset--color--background) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--foreground);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Sanftes Einblenden der Sektionen beim Scrollen (siehe assets/reveal.js) */
.bl-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.bl-reveal.bl-visible,
.bl-visible {
	opacity: 1;
	transform: none;
}

/* Header: bleibt beim Scrollen sichtbar, mit dezentem Schatten.
   Bewusst OHNE backdrop-filter: das erzeugt einen neuen CSS-Containing-Block für
   position:fixed-Nachfahren und quetscht dadurch das mobile Überlagerungsmenü
   (das selbst position:fixed nutzt) auf die Header-Höhe statt Vollbild zu zeigen. */
.wp-block-template-part > header.wp-block-group {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--wp--preset--color--background) 96%, transparent);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Der volle Hero-Banner ("bl-hero", Cover-Block) soll direkt am Header anliegen, nicht
   mit dem normalen Block-Zwischenraum (--wp--style--block-gap) davor - der ist für
   normalen Seiteninhalt gedacht (z.B. vor einer Seiten-Überschrift passend), wirkt vor
   einem Vollbild-Banner aber wie eine unmotivierte Lücke, besonders auffällig am Handy.
   Nur wenn der Hero das allererste Element der Seite ist - Innenseiten ohne Hero
   behalten den normalen Abstand vor ihrem Inhalt. */
.bl-main:has(> .entry-content > .bl-hero:first-child) {
	margin-top: calc(-1 * var(--wp--style--block-gap, 1.5rem));
}

/* Gleiche Logik am Seitenende: ein voller CTA-Banner direkt vor dem Footer
   soll ohne Lücke an ihn anschließen (siehe cta-banner-geteilt.php), nicht
   mit dem normalen Block-Zwischenraum davor - der wirkt zwischen zwei
   randlosen Flächen wie ein unmotivierter heller Spalt. */
.bl-main:has(> .entry-content > .bl-cta-banner-geteilt:last-child) {
	margin-bottom: calc(-1 * var(--wp--style--block-gap, 1.5rem));
}

/* Der Cover-Block zentriert seinen Inner-Container zwar per Flexbox
   (justify-content:center via contentPosition), aber ohne eigene Breiten-
   begrenzung ist dieser Container fast so breit wie der ganze Vollbild-Hero
   selbst - "zentriert" hatte dadurch keine sichtbare Wirkung, der Text
   klebte am linken Rand (vom Nutzer per Screenshot gemeldet: "Text nicht
   mittig vom Bildschirm"). Gleiche Spaltenbreite wie der uebrige
   Seiteninhalt (settings.layout.contentSize in theme.json). */
.bl-hero .wp-block-cover__inner-container {
	max-width: 720px;
	width: 100%;
}

/* adjust_hero_layout()'s hero_text_links: linksbündiger Text muss an derselben
   1200px-Linie beginnen wie jede andere Sektion (siehe .bl-content-boxed) -
   die schmalere 720px-Box (siehe Kommentar oben, für zentrierten Text gedacht)
   würde sonst einen sichtbar eingerückten linken Rand nur im Hero erzeugen. */
.bl-hero-boxed .wp-block-cover__inner-container {
	max-width: 1200px;
}

/* Footer: etwas mehr Struktur/Luft als der WordPress-Standard */
footer.wp-block-group {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* footer_builder.py mit akzent_hintergrund=True: der globale Link-Textfarbe-
   Slot ("accent", siehe theme.json elements.link) ist bewusst so gewählt, dass
   er gegen die STANDARD-Seiten-Hintergrundfarbe kontrastiert (siehe Kommentar
   zu .bl-chip-akzent) - nicht gegen eine Sektion, deren EIGENER Hintergrund
   selbst "accent" ist. Ohne diese Regel sind Footer-Links unsichtbar (Akzent-
   Text auf Akzent-Fläche), entdeckt am echten Snezana-Footer. */
footer.has-accent-background-color a {
	color: var(--wp--preset--color--background) !important;
}

/* footer_builder.py: Firmenname im Footer bekommt dieselbe Wortmarken-Anmutung
   wie das Site-Logo im Header (siehe styles/achtsam-teal.json's core/site-
   title-Override) - sonst wirkt der Footer wie eine andere Marke als der
   Header. Bewusst hart hinterlegt statt vom Site-Title-Block geerbt, weil der
   Footer eigenen, handgebauten Markup nutzt (kein core/site-title-Block). */
footer .bl-footer-wortmarke {
	font-family: var(--wp--preset--font-family--antic-didone, serif);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0 !important;
}

footer.wp-block-group a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

footer.wp-block-group a:hover {
	border-bottom-color: currentColor;
}

/* Design-Politur Runde 2: mehr visuelle Reife statt generischem Standard-Look */

/* Kleiner Akzentstrich über jeder Sektions-Überschrift statt nacktem Fließtext-Look */
main h2.wp-block-heading {
	position: relative;
	padding-top: 1.25rem;
}

main h2.wp-block-heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
}

main h2.wp-block-heading.has-text-align-center::before {
	left: 50%;
	transform: translateX(-50%);
}

/* Alle Bilder bekommen eine sanfte Hover-Regung statt starr zu wirken */
main img {
	transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.bl-card {
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: 2rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.05);
}

/* Content-Boxen-Konsistenz: eine Sektion, die als "wp:columns/wp:group
   {'align':'wide'}" VERSCHACHTELT innerhalb eines vollflächigen (align:full)
   Farb-Wrappers liegt (z.B. intro.php, warum-wir-flaeche.php, methoden-
   checkliste.php, cta-banner-geteilt.php), berechnet ihre eigene Breite
   NICHT wie ein normaler Top-Level-"wide"-Block (1200px, sauber zentriert),
   sondern real gemessen ~105px breiter - eine reale Eigenart, wie WordPress
   verschachtelte Layout-Berechnungen aus theme.json auflöst, kein Einzelfall.
   Ergebnis: der linke/rechte Inhalts-"Rand" sprang sichtbar zwischen
   Sektionen hin und her, obwohl optisch "eine Linie" erwartet wird. Diese
   Klasse erzwingt exakt dieselbe feste Breite wie ein normaler Top-Level-
   wide-Block, unabhängig von WordPress' eigener Berechnung. */
.bl-content-boxed {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}

.bl-hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Eyebrow-Label als umrandete Pille statt reinem Fließtext (z.B.
   leistungen-bildkarten.php) - kombiniert mit .bl-hero-kicker. */
.bl-kicker-pill {
	display: table;
	margin: 0 auto !important;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	padding: 0.3rem 1.1rem !important;
}

/* Kicker-Pille in linksbündiger Textspalte statt mittig (Standard oben). */
.bl-kicker-pill.bl-kicker-links {
	margin: 0 0 1rem !important;
}

/* Eigene, NICHT-fluide Zusatzklasse statt block-eigenem style.typography.fontSize:
   Letzteres wird von WordPress (theme.json settings.typography.fluid=true) automatisch
   in ein clamp() umgewandelt, dessen UNTERGRENZE wieder bei der alten kleinen
   Preset-Größe (0.875rem) lag - bei schmalem Viewport blieb der Kicker dadurch trotz
   Änderung praktisch gleich klein wie vorher. Fixe Größe statt Fluid-Bereich, weil ein
   kurzes Eyebrow-Label (anders als eine Überschrift) nicht viewport-abhängig skalieren
   muss. */
.bl-hero-kicker-lg {
	font-size: 1.15rem;
}

/* warum-wir-liste.php: volle Zeilen statt Karten-Raster, Zahl fix-breit linksbündig,
   damit Überschrift/Text in allen drei Zeilen exakt auf derselben Spalte beginnen. */
.bl-warum-liste-zeile {
	align-items: flex-start;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.bl-warum-liste-zeile:last-child {
	border-bottom: none;
}

.bl-warum-liste-zahl {
	flex: 0 0 3.5rem;
	margin: 0 !important;
	line-height: 1;
}

/* leistungen-bildkarten.php / methoden-checkliste.php: kompakter Rund-Chip INLINE
   neben einem Titel (statt zentriert ÜBER dem Titel wie .bl-warum-badge) - eigene
   Klasse statt .bl-warum-badge wiederzuverwenden, weil dessen "margin: 0 auto"
   in einer Flex-Zeile den Chip vom Titel wegschieben würde statt ihn direkt
   davorzusetzen. */
.bl-nummer-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 0.9rem 0 0 !important;
	/* WordPress' .has-background gibt dem Absatz ein Standard-Padding (1.25em 2.375em),
	   das aus dem 2.25rem-Kreis ein breites Oval machte - Padding 0 + border-box. */
	padding: 0 !important;
	box-sizing: border-box;
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 700;
}

/* leistungen-bildkarten.php: einheitlicher Bildausschnitt im 2x2-Raster, egal
   wie das Quellfoto zugeschnitten ist (gleiche Logik wie .bl-gallery). */
.bl-leistung-bild img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* leistungen-bildkarten.php: die ganze Karte hebt sich leicht (wie .bl-card),
   das Foto zoomt dezent, der Pfeil rutscht nach rechts - macht die Karte als
   Ganzes klickbar/interaktiv wirkend, auch ohne echten Link auf dem Bild. */
.bl-leistung-karte {
	transition: transform 0.3s ease;
}

.bl-leistung-karte:hover {
	transform: translateY(-4px);
}

.bl-leistung-karte:hover .bl-leistung-bild img {
	transform: scale(1.04);
}

.bl-leistung-pfeil {
	display: inline-block;
	transition: transform 0.25s ease;
}

.bl-leistung-karte:hover .bl-leistung-pfeil {
	transform: translateX(5px);
}

/* warum-wir-flaeche.php: Rahmen hellt beim Hover auf + leichtes Anheben -
   gleiche Sprache wie .bl-card:hover, nur für die umrandeten (statt gefüllten)
   Karten auf der Akzentfläche. */
.bl-kernangebot-karte {
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.bl-kernangebot-karte:hover {
	transform: translateY(-4px);
	background-color: rgba(255, 255, 255, 0.08);
}

/* methoden-checkliste.php (nutzt bl-warum-split-punkt von warum-wir-split.php
   mit): dezente Einrückung beim Hover statt der reinen Trennlinie - gilt
   generisch für beide Patterns. */
.bl-warum-split-punkt {
	transition: padding-left 0.25s ease;
}

.bl-warum-split-punkt:hover {
	padding-left: 0.6rem;
}

/* warum-wir-flaeche.php: weißes Icon-Bild in einer runden, halbtransparenten
   "Box" statt freistehend - passende Box laut Design, nicht nur das nackte
   Icon auf der Akzentfläche. */
.bl-flaeche-icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0 0 1.1rem !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.bl-flaeche-icon-box img {
	width: 32px !important;
	height: 32px !important;
}

/* warum-wir-badges.php: runder, farbig gefüllter Kreis statt bloßer Zahl. */
.bl-warum-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem !important;
	border-radius: 50%;
	color: #141414;
	font-weight: 700;
}

/* warum-wir-grossformat.php: plakative, sehr große Zahl als grafisches Element -
   negativer Zeilenabstand darunter, damit die Überschrift nah dranrückt statt mit
   viel Leerraum zu wirken. */
.bl-warum-gross-zahl {
	font-size: clamp(3.5rem, 8vw, 6rem) !important;
	font-weight: 800;
	line-height: 0.85;
	margin: 0 0 0.25rem !important;
	opacity: 0.9;
}

.bl-warum-gross-spalte {
	padding-right: 1.5rem;
}

.bl-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid #ffffff;
	color: #ffffff;
}

.bl-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
}

.bl-btn-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.bl-btn-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.bl-team-photo-sm img {
	width: 88px;
	height: 88px;
	object-fit: cover;
}

.wp-block-table.is-style-stripes {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wp-block-table.is-style-stripes table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-stripes td {
	padding: 0.9rem 1.5rem;
}

/* Erzwingt eine sinnvolle Mindestgröße + Zuschnitt, egal wie das Quellfoto
   tatsächlich zugeschnitten/groß ist (schützt vor schiefen/kleinen Kundenfotos). */
.bl-team-photo img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* .bl-team-photo-sm überschreibt bewusst die 200px-Größe von .bl-team-photo,
   wenn beide Klassen zusammen vorkommen (team-horizontal, bewertungen-einzeln) -
   höhere Spezifität statt auf Regel-Reihenfolge im Stylesheet zu vertrauen. */
.bl-team-photo.bl-team-photo-sm img {
	width: 88px;
	height: 88px;
}

.bl-hero-split-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 16px;
}

.bl-hero-split-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

/* Ausgewogeneres Format für die Intro-Sektion (kein hohes Hero-Portrait, sonst
   entsteht neben kurzem Text viel Leerraum). */
.bl-intro-image {
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 16px;
}

/* Optionaler Hochformat-Zuschnitt (siehe adjust_intro_image() in
   field_maps.py) für ein Personen-Portraitfoto statt eines Querformat-
   Ladenfotos. */
.bl-intro-bild-hochformat {
	aspect-ratio: 4 / 5;
	max-width: 420px;
}

.bl-intro-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.bl-team-photo img:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.bl-testimonial {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bl-testimonial:hover {
	transform: translateY(-4px);
}

.bl-stars {
	letter-spacing: 0.1em;
}

/* bewertungen-zitat-grafisch.php: kurze vertikale Akzentlinie statt Sternen/Foto. */
.bl-zitat-linie {
	width: 1px;
	height: 2.5rem;
	margin: 0 !important;
	background: var(--wp--preset--color--accent);
}

.bl-zitat-glyph {
	line-height: 1;
	margin: 0.75rem 0 0 !important;
}

/* Unterseiten (technik-abschnitte.php, ueber-mich-detail.php, leistung-detail.php):
   Bild neben Text, einheitliches Seitenverhältnis. */
.bl-technik-bild img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* leistungen-bildkarten.php: Karten, die auf eine Detailseite verlinken -
   Titel/Pfeil/Bild sollen wie vorher aussehen, nicht wie blaue Textlinks. */
.bl-leistung-karte a {
	color: inherit;
	text-decoration: none;
}

.bl-leistung-pfeil a {
	color: var(--wp--preset--color--accent);
}

/* kontakt-info-formular.php: Kontaktangaben links neben dem Formular. */
.bl-info-zeile {
	margin-top: 1.5rem;
}

.bl-info-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.15rem !important;
}

.bl-info-wert {
	margin-top: 0 !important;
}

.bl-info-wert a {
	color: inherit;
	text-decoration: none;
}

.bl-info-wert a:hover {
	color: var(--wp--preset--color--accent);
}

/* leistung-detail.php: Aufzählung mit Häkchen statt Punkten. */
.bl-check-liste {
	list-style: none;
	padding-left: 0;
}

.bl-check-liste li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.9rem;
}

.bl-check-liste li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-size: 0.8rem;
	line-height: 1.4rem;
	text-align: center;
}

/* blog-teaser.php (echter Query Loop gegen "post"): Kategorie-Pille unter dem
   Beitragsbild statt als Overlay (core/post-terms/-featured-image lassen sich
   nicht ohne Weiteres absolut übereinanderlegen, ohne pro WP-Version fragile
   Positionierungs-Attribute zu riskieren - schlichte, verlässlich
   funktionierende Stapel-Anordnung stattdessen) + dezenter Zoom/Anheben beim
   Hover. */
.bl-blog-kategorie {
	display: table;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border-radius: 999px;
	padding: 0.3rem 0.9rem !important;
	margin: 0.9rem 0 0.5rem !important;
}

.bl-blog-karte {
	transition: transform 0.3s ease;
}

.bl-blog-karte:hover {
	transform: translateY(-4px);
}

.bl-blog-karte img {
	width: 100%;
	object-fit: cover;
}

.bl-blog-karte h3 {
	margin-top: 0 !important;
}

/* core/post-terms und core/post-title rendern ihren Text als <a> - ohne diese
   Regeln erbt die Pille die Link-Farbe/Unterstreichung, der Titel die Akzentfarbe. */
.bl-blog-kategorie a {
	color: inherit;
	text-decoration: none;
}

.bl-blog-karte h3 a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.bl-blog-karte h3 a:hover {
	text-decoration: underline;
}

.bl-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	transition: transform 0.3s ease;
}

.bl-gallery img:hover {
	transform: scale(1.03);
}

.bl-leistung-row {
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.bl-leistung-row:last-child {
	border-bottom: none;
}

.bl-preis {
	font-weight: 700;
}

.bl-dauer {
	white-space: nowrap;
}

/* Kontaktformular */
.bl-kontaktformular .bl-form-field {
	margin-bottom: 1.25rem;
}

.bl-kontaktformular label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.bl-kontaktformular input[type="text"],
.bl-kontaktformular input[type="email"],
.bl-kontaktformular textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	box-sizing: border-box;
}

.bl-kontaktformular input:focus,
.bl-kontaktformular textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.bl-kontaktformular .bl-form-submit {
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	border: none;
	padding: 0.85rem 2rem;
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
}

.bl-kontaktformular .bl-form-submit:hover {
	filter: brightness(0.92);
}

.bl-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bl-form-success {
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--accent);
	padding: 1rem 1.25rem;
	border-radius: 6px;
}

.bl-form-error {
	background: #fdecea;
	border-left: 4px solid #c0392b;
	color: #7a2018;
	padding: 1rem 1.25rem;
	border-radius: 6px;
	margin-bottom: 1rem;
}

@media (max-width: 599px) {
	.bl-leistung-row > .wp-block-group {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
}

/* Mehr Hover-Politur für die neuen Bausteine (Warum-wir, Ablauf, FAQ, CTA, Karten) */

.bl-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bl-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.08);
}

main .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--surface);
	padding: 1rem 0;
	transition: background-color 0.2s ease;
}

main .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	transition: color 0.2s ease;
}

main .wp-block-details summary:hover {
	color: var(--wp--preset--color--accent);
}

main .wp-block-buttons .wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

main .wp-block-buttons .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Randlose (alignfull) Elemente dürfen nie abgerundete Ecken haben - die Rundung
   wäre an der echten Bildschirmkante unsichtbar/sähe wie ein Rendering-Fehler aus.
   Manche Stil-Varianten (z.B. Warm Elegant) setzen einen Cover-Radius, der eigentlich
   nur für eingerahmte, nicht randlose Cover gedacht ist - hier hart zurücksetzen. */
.alignfull {
	border-radius: 0 !important;
}

/* Der Header hat Logo-Block UND Site-Title-Block nebeneinander, damit Kunden
   ohne eigenes Logo trotzdem einen Firmennamen im Header sehen (site-logo
   bleibt sonst leer). Sobald ein echtes Logo mit Bild vorhanden ist, wäre der
   zusätzliche Textname daneben nur eine redundante Dopplung - dann ausblenden. */
.wp-block-site-logo:has(img) + .wp-block-site-title {
	display: none;
}

/* WordPress-Core-Tabellenstil "Streifen" (oeffnungszeiten.php) hat einen fest
   einprogrammierten hellgrauen Streifen (#f0f0f0), unabhängig vom Theme - in einer
   dunklen Stilrichtung (z.B. bold-dark) sitzt dann fast-weißer Text auf fast-weißem
   Streifen und ist praktisch unlesbar. Ersetzt durch die Theme-eigene "surface"-Farbe,
   die sich automatisch an jede Stilrichtung anpasst statt fest codiert zu sein. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
	color: var(--wp--preset--color--foreground);
}

/* ablauf-zeitstrahl.php: verbundene Punkte auf einer durchgehenden Linie statt
   einzelner Karten - die Linie liegt hinter den Spalten, die Punkte sitzen exakt
   mittig darauf. */
.bl-ablauf-zeitstrahl {
	position: relative;
}

.bl-ablauf-zeitstrahl::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 8%;
	right: 8%;
	height: 2px;
	background: var(--wp--preset--color--surface);
	z-index: 0;
}

.bl-ablauf-zeitstrahl-schritt {
	text-align: center;
}

.bl-ablauf-zeitstrahl-punkt {
	position: relative;
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 1rem !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-weight: 700;
}

/* ablauf-vertikal.php: dünne Trennlinie zwischen den gestapelten Zeilen. */
.bl-ablauf-vertikal-zeile {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.bl-ablauf-vertikal-zeile:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* ablauf-ghost-zahlen.php: sehr große, blasse Zahl im Hintergrund statt Zierde. */
.bl-ablauf-ghost {
	position: relative;
}

.bl-ablauf-ghost-zahl {
	font-size: 5rem !important;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 -1.5rem !important;
	opacity: 0.12;
	color: var(--wp--preset--color--primary);
}

/* ablauf-pfeile.php: umrandeter (nicht gefüllter) Kreis + zentrierter Pfeil als
   Trenner zwischen den Schritten - liest sich als aktiver Fluss statt Aufzählung. */
.bl-ablauf-pfeil-schritt {
	flex: 1 1 200px;
	max-width: 220px;
}

.bl-ablauf-pfeil-kreis {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 0.75rem !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.bl-ablauf-pfeil-trenner {
	align-self: center;
	margin: 0 !important;
	opacity: 0.5;
}

@media (max-width: 782px) {
	.bl-ablauf-pfeil-trenner {
		display: none;
	}
}

/* Design-Politur Runde 4: editoriale Variante (Hero-Farbring, Editorial-Raster,
   Schnittlinien-Banner) - orchestrierte Einstiegs-Animation statt eines
   einzelnen Fade-ins, echte Kollektions-Optik statt generischer Cards.
   WICHTIG: diese Klassen sind bewusst NICHT auf einer aktuell veröffentlichten
   Seite eingebaut - die neuen Patterns/die Stilvorlage "Editorial Copper" liegen
   bereit (im Block-Editor als Pattern bzw. unter Design > Stile wählbar), sind
   aber NICHT aktiviert. Erst wer sie im Editor tatsächlich einfügt/auswählt,
   sieht sie live. */

/* ---------- Hero-Farbring ---------- */

.bl-hero-farbring {
	padding-top: 3rem;
	padding-bottom: 4rem;
	align-items: center;
}

.bl-hf-eyebrow {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	margin-bottom: 1rem !important;
	opacity: 0;
	animation: bl-hoch-ein 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.05s;
}

.bl-hf-titel {
	opacity: 0;
	animation: bl-hoch-ein 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.18s;
}

.bl-hf-lead {
	color: var(--wp--preset--color--secondary);
	max-width: 34rem;
	opacity: 0;
	animation: bl-hoch-ein 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.34s;
}

.bl-hf-aktionen {
	opacity: 0;
	animation: bl-hoch-ein 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.46s;
}

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

.bl-farbring-wrap {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bl-farbring-glut {
	position: absolute;
	inset: -20%;
	background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent), transparent 65%);
	animation: bl-glut-drift 9s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes bl-glut-drift {
	from { transform: translate(-4%, -3%) scale(1); }
	to { transform: translate(4%, 3%) scale(1.08); }
}

.bl-farbring {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	transform: rotate(-3deg);
}

.bl-chip {
	width: 220px;
	max-width: 100%;
	height: 34px;
	border-radius: 3px;
	opacity: 0;
	transform: translateX(24px);
	animation: bl-chip-ein 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	display: flex;
	align-items: center;
	padding: 0 0.85rem;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
}

@keyframes bl-chip-ein {
	to { opacity: 1; transform: translateX(0); }
}

.bl-chip:nth-child(1) { animation-delay: 0.55s; }
.bl-chip:nth-child(2) { animation-delay: 0.65s; }
.bl-chip:nth-child(3) { animation-delay: 0.75s; }
.bl-chip:nth-child(4) { animation-delay: 0.85s; }
.bl-chip:nth-child(5) { animation-delay: 0.95s; }
.bl-chip:nth-child(6) { animation-delay: 1.05s; }

/* "background" statt eines festen "weiß" als Text: "primär"/"akzent" sind in JEDER
   Stilvorlage bewusst so gewählt, dass sie gegen die EIGENE "background"-Farbe
   kontrastieren (helles Thema: dunkles Primär/Akzent auf hellem Hintergrund;
   dunkles Thema wie "Bold Dark": helles Primär/Akzent auf dunklem Hintergrund) -
   "weiß" bricht das bei einer Stilvorlage, deren "primär" selbst weiß ist (genau
   das ist bei Hair Hubers Bold-Dark-Test passiert: weißer Text auf weißer
   "Bordeaux"-Kachel, unsichtbar). */
.bl-chip-akzent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	width: 250px;
}

.bl-chip-tief {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	width: 190px;
}

.bl-chip-tiefst {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.bl-farbring-label {
	position: absolute;
	bottom: -2rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
	margin: 0 !important;
}

@media (max-width: 782px) {
	.bl-hero-farbring { flex-wrap: wrap; }
	.bl-farbring-wrap { margin-top: 2.5rem; min-height: 260px; }
}

/* ---------- Editorial-Raster (Warum wir) ---------- */

.bl-editorial-abschnitt {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.bl-editorial-raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	/* Hintergrund/Rahmen bewusst gleich der Karten-Fläche (surface), nicht ein
	   Kontrastton (secondary) wie ursprünglich: während der Reveal-Transition
	   (siehe .bl-editorial-karte, startet bei opacity:0) scheint dieser
	   Grid-Hintergrund kurz durch jede noch nicht sichtbare Karte hindurch -
	   mit "secondary" wirkte das wie ein grell-beiger Blitz/Fehldarstellung
	   (vom Nutzer per Screenshot gemeldet), mit "surface" bleibt der Übergang
	   unauffällig in derselben Farbfamilie. Die 1px-Trennlinien-Optik zwischen
	   den fertig sichtbaren Karten geht dadurch verloren - vertretbarer Trade-off. */
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface);
	margin-top: 2rem;
}

@media (max-width: 782px) {
	.bl-editorial-raster { grid-template-columns: 1fr; }
}

.bl-editorial-karte {
	/* Explizite Höhe statt uns auf Grid-Stretch zu verlassen: bei ungleich langem
	   Kartentext (z.B. Freilassing-Text 1 Zeile länger als die anderen beiden)
	   blieben die kürzeren Karten sonst auf ihrer eigenen Inhaltshöhe stehen statt
	   die Zeilenhöhe der Reihe zu füllen - sichtbar als graue Lücke unterhalb der
	   kürzeren Karten (das durchscheinende Grid-Hintergrundgrau der 1px-Trennlinien-
	   Technik, siehe .bl-editorial-raster), gemeldet vom Nutzer per Screenshot. */
	height: 100%;
	background: var(--wp--preset--color--surface);
	padding: 2.2rem 1.9rem !important;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bl-editorial-karte.bl-sichtbar {
	opacity: 1;
	transform: translateY(0);
}

.bl-editorial-karte::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--wp--preset--color--accent);
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bl-editorial-karte:hover::after {
	width: 100%;
}

.bl-editorial-karte h3 {
	margin-top: 0 !important;
}

/* ---------- CTA-Banner mit Schnittlinie ---------- */

.bl-schnittlinie-band {
	position: relative;
	overflow: hidden;
}

/* Reines CSS statt eingebettetem SVG (siehe Kommentar in cta-banner-schnittlinie.php:
   rohe <svg>-Tags in Beitragsinhalten werden von WordPress' KSES-Filter entfernt,
   sobald ohne "unfiltered_html"-Capability gespeichert wird). Zwei schräge Linien,
   die beim Sichtbarwerden von der Mitte nach außen "aufgezogen" werden. */
.bl-schnittlinie-band::before,
.bl-schnittlinie-band::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 130%;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--background) 22%, transparent);
	transform-origin: center;
	transform: translate(-50%, -50%) rotate(12deg) scaleX(0);
	transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}

.bl-schnittlinie-band::after {
	top: 65%;
	transform: translate(-50%, -50%) rotate(-8deg) scaleX(0);
	transition-delay: 0.15s;
}

.bl-schnittlinie-band.bl-sichtbar::before {
	transform: translate(-50%, -50%) rotate(12deg) scaleX(1);
}

.bl-schnittlinie-band.bl-sichtbar::after {
	transform: translate(-50%, -50%) rotate(-8deg) scaleX(1);
}

.bl-schnittlinie-titel,
.bl-schnittlinie-text {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bl-hf-eyebrow,
	.bl-hf-titel,
	.bl-hf-lead,
	.bl-hf-aktionen,
	.bl-chip {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.bl-farbring-glut {
		animation: none;
	}

	.bl-editorial-karte {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.bl-schnittlinie-band::before,
	.bl-schnittlinie-band::after {
		transition: none;
		transform: translate(-50%, -50%) rotate(12deg) scaleX(1);
	}

	.bl-schnittlinie-band::after {
		transform: translate(-50%, -50%) rotate(-8deg) scaleX(1);
	}
}

/* Design-Politur Runde 5: weitere Bausteinvarianten (Seiten-Banner, Intro,
   Über-uns-Text, Kontaktformular, Leistungen-Teaser, FAQ) - Ziel: genug
   Kombinationen, dass bei vielen generierten Seiten keine zwei gleich wirken. */

/* seiten-banner-links.php: Titel linksbündig statt zentriert, mit kurzer
   Akzentlinie darüber statt der salonweiten ::before-Linie auf h2 (die ist für
   Abschnitts-Überschriften gedacht, hier soll der Titel selbst der Blickfang sein). */
.bl-banner-links {
	position: relative;
	padding-left: 1.25rem;
	border-left: 3px solid var(--wp--preset--color--accent);
}

.bl-banner-links h1 {
	text-align: left !important;
	margin: 0 !important;
}

/* intro-versetzt.php: Akzentfläche liegt versetzt HINTER dem Bild statt eines
   einfachen Rahmens - kleine, eigenständige "Baustein"-Optik. */
.bl-intro-versetzt-wrap {
	position: relative;
}

.bl-intro-versetzt-wrap::before {
	content: "";
	position: absolute;
	top: -1rem;
	right: -1rem;
	bottom: 1rem;
	left: 1rem;
	background: var(--wp--preset--color--accent);
	border-radius: 4px;
	z-index: 0;
}

.bl-intro-versetzt-bild {
	position: relative;
	z-index: 1;
	margin: 0 !important;
}

/* intro-gestapelt.php: Bild oben, Text zentriert darunter - eigenständige,
   einspaltige Struktur statt Bild+Text nebeneinander. */
.bl-intro-gestapelt-bild {
	max-width: 100%;
}

/* ueber-uns-text-zitat.php: großes Anführungszeichen als grafisches Element vor
   dem Zitat-Text statt schlichtem zentriertem Fließtext. */
.bl-ueberuns-zitat {
	position: relative;
	padding-left: 2.5rem;
}

.bl-ueberuns-zitat-text {
	margin: 0 0 1rem !important;
}

.bl-ueberuns-zitat-text::before {
	content: "\201C";
	position: absolute;
	left: -0.5rem;
	top: -1.5rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5rem;
	color: var(--wp--preset--color--accent);
	line-height: 1;
	opacity: 0.5;
}

/* Design-Politur Runde 6: weitere Bausteinvarianten (Hero, Seiten-Banner, FAQ,
   Galerie) - gleiches Ziel wie Runde 5, diesmal die verbliebenen "dünnen"
   Kategorien mit nur 3 Varianten aufgefüllt. */

/* hero-minimal.php: einzige Hero-Variante ganz ohne Bild - großzügiger Weißraum
   und breiter Buchstabenabstand beim Kicker sollen die fehlende Bildfläche
   optisch ausgleichen statt einfach "leer" zu wirken. */
.bl-hero-minimal-kicker {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bl-hero-minimal-titel {
	font-size: clamp(2.2rem, 4vw, 3.2rem);
}

/* seiten-banner-bild.php: schmalere Cover-Höhe als hero.php (das ist ein
   Vollbild-Einstieg, das hier nur ein Unterseiten-Kopf) - eigene Klasse statt
   bl-hero, damit ein Anpassen von hero.php nie versehentlich den Banner mitändert. */
.bl-banner-bild .wp-block-cover__inner-container {
	width: 100%;
}

/* faq-nummeriert.php: große, blasse Ziffer neben jeder Frage statt reinem
   Akkordeon-Text - auf der Flächenfarbe (surface) hebt sich jeder Eintrag
   zusätzlich durch eine eigene, weiße Karte ab. */
.bl-faq-nummeriert-eintrag {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	background: var(--wp--preset--color--background);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}

.bl-faq-nummeriert-eintrag:last-child {
	margin-bottom: 0;
}

.bl-faq-nummeriert-eintrag > .wp-block-details {
	flex: 1 1 auto;
	min-width: 0;
}

.bl-faq-nummeriert-ziffer {
	flex: 0 0 auto;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	opacity: 0.45;
	line-height: 1;
}

@media (max-width: 600px) {
	.bl-faq-nummeriert-eintrag {
		flex-direction: column;
		gap: 0.4rem;
	}
}

/* galerie-vorher-nachher.php: jedes Paar bekommt einen dezenten Rahmen, damit
   optisch klar ist, dass Vorher+Nachher zusammengehören, auch wenn mehrere
   Paare nebeneinanderstehen. */
.bl-vorher-nachher-paar {
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 10px;
	padding: 1rem;
}

@media (max-width: 782px) {
	.bl-vorher-nachher-reihe.wp-block-columns {
		flex-wrap: wrap;
	}
	.bl-vorher-nachher-paar {
		flex-basis: 100% !important;
	}
}

/* Design-Politur Runde 7: "Preistafel"-Bausteine fuer die Bold-Dark-Variante
   (styles/bold-dark.json) - passend zur Branchen-eigenen Formensprache eines
   Friseur-/Barbershop-Preisschilds (Name -- Punktlinie -- Preis) statt
   generischer Karten. Nutzt durchgehend WP-Preset-Farbvariablen statt
   Literal-Hex, damit jede Website mit aktiver Bold-Dark-Variante (nicht nur
   ein einzelner Kunde) automatisch dieselbe stimmige Optik bekommt. */
.bl-preistafel-zeile {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 24px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 13%, transparent);
}

.bl-preistafel-zeile:last-child { border-bottom: none; }

.bl-preistafel-name {
	font-size: 1.15rem;
	font-weight: 600;
	white-space: nowrap;
}

.bl-preistafel-punkte {
	flex: 1 1 auto;
	border-bottom: 2px dotted color-mix(in srgb, var(--wp--preset--color--foreground) 30%, transparent);
	transform: translateY(-6px);
	min-width: 24px;
}

.bl-preistafel-dauer {
	font-family: var(--wp--preset--font-family--space-mono, monospace);
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
}

.bl-preistafel-preis {
	font-family: var(--wp--preset--font-family--space-mono, monospace);
	font-variant-numeric: tabular-nums;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

/* Seitliches Label + nummerierte Zeilen (warum-wir, ueber Zahlen) - Gegenstueck
   zu den zentrierten Karten-Rastern der anderen Stilvarianten, editorialer. */
.bl-nummeriert-zeile {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 22px;
	padding: 26px 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 13%, transparent);
}

.bl-nummeriert-zeile:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 13%, transparent);
}

.bl-nummeriert-ziffer {
	font-family: var(--wp--preset--font-family--space-mono, monospace);
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent);
	padding-top: 3px;
}

/* Ueberschrift der Zeile explizit groesser als der Fliesstext darunter -
   beide nutzten bisher dieselbe "medium"-Preset-Groesse (1.05rem), wodurch
   die Ueberschrift optisch nicht als Ueberschrift erkennbar war ("kleine
   schrift" vom Nutzer gemeldet). !important noetig, weil WordPress seine
   "has-medium-font-size"-Preset-Klasse selbst mit !important ausliefert
   (Kern-Verhalten fuer Preset-Utility-Klassen) - eine normale Regel, egal
   wie spezifisch, wird sonst stillschweigend ignoriert. */
.bl-nummeriert-zeile h3 {
	font-size: 1.35rem !important;
}

/* Ablauf als drei Spalten mit echtem Weißraum getrennt (statt der 4px-Luecke
   mit Linienfarbe als Hintergrund - die duenne, unregelmaessig lange Trennlinie
   wirkte wie ein Rendering-Fehler, vom Nutzer per Screenshot als "komische
   graue Striche" gemeldet und markiert). */
.bl-schritte-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.bl-schritte-raster > div {
	/* height:100% wie bei .bl-editorial-karte (siehe dort) - ohne das blieb bei
	   ungleich langem Text (z.B. Schritt 1 laenger als 2/3) eine graue Luecke in
	   Hoehe des Unterschieds sichtbar (das durchscheinende Grid-Hintergrundgrau der
	   1px-Trennlinien-Technik), vom Nutzer per Screenshot gemeldet. */
	height: 100%;
	padding: 8px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* WordPress fuegt Block-Gap-Abstand automatisch als margin-top auf alle
	   Geschwister-Bloecke AUSSER dem ersten ein (".is-layout-flow > * + *"),
	   unabhaengig vom eigenen "display:grid" hier - dadurch stand Spalte 2/3
	   im Raster 24px tiefer als Spalte 1, obwohl alle drei Boxen gleich hoch
	   waren (per getBoundingClientRect gemessen). */
	margin-top: 0;
}

.bl-schritte-zahl {
	font-family: var(--wp--preset--font-family--bebas-neue, sans-serif);
	font-size: 4rem;
	line-height: 1;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--accent);
	color: transparent;
}

@media (max-width: 782px) {
	.bl-nummeriert-zeile { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
	.bl-schritte-raster { grid-template-columns: minmax(0, 1fr); gap: 1px; }
	.bl-schritte-raster > div { padding: 28px 0 !important; }
}

/* Responsive-Feinschliff (Handy/Tablet) */

/* leistungen-bildkarten.php: Titel + Pfeil einer Karte bleiben in EINER Zeile -
   bei langem Titel ("Entspannung durch Bewegung") rutschte der Pfeil sonst am
   Handy in eine eigene Zeile darunter; der Titel darf stattdessen umbrechen. */
.bl-leistung-karte > .wp-block-group {
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 1rem;
}

.bl-leistung-karte > .wp-block-group > .wp-block-group {
	min-width: 0;
	flex: 1 1 auto;
}

.bl-leistung-pfeil {
	flex: none;
}

/* methoden-checkliste.php / warum-wir-split.php: Nummern-Chip bündig zur
   Titelzeile statt vertikal mittig neben mehrzeiligem Text (fiel am Handy auf,
   wo Titel + Beschreibung 4-5 Zeilen hoch sind). */
.bl-warum-split-punkt {
	align-items: flex-start !important;
}

.bl-warum-split-punkt .bl-nummer-chip {
	margin-top: 0.1rem !important;
}

/* Seiten-Banner-Überschrift: am Handy war sie mit ~25px kleiner als der
   Fließtext-Charakter der Seite vermuten lässt. */
.bl-banner-bild h1 {
	font-size: clamp(2rem, 1.2rem + 3vw, 2.75rem) !important;
	line-height: 1.15;
}

/* Tablet-Hochformat (600-781px): WordPress stapelt Spalten schon unter 782px
   einspaltig - die 2x2-Leistungskarten wurden dadurch ~700px breite Einzelbilder
   untereinander. Zwei Karten nebeneinander wirken auf dem Tablet deutlich
   passender; das Porträt (4:5-Hochformat) wird nicht mehr bildschirmbreit. */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns:has(> .bl-leistung-karte) {
		flex-wrap: nowrap !important;
		gap: 1.25rem;
	}

	.wp-block-columns:has(> .bl-leistung-karte) > .bl-leistung-karte {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
		min-width: 0;
	}

	.bl-intro-image {
		max-width: 440px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Hero/Banner: solange das Hintergrundfoto noch lädt (langsame Mobilverbindung),
   stand dort nur eine graue Fläche - jetzt die dunkle Markenfarbe, auf der der
   weiße Text von Anfang an lesbar ist. */
.bl-hero,
.bl-banner-bild {
	background-color: var(--wp--preset--color--primary);
}

/* Vollbreite Gruppen mit Hintergrundfarbe (Intro, Kernangebote, Techniken, CTA ...):
   WordPress' .has-background gibt ihnen ein Standard-Polster von 2.375em (~40px)
   links/rechts, der übrige Seiteninhalt sitzt aber am Seitenrand-Polster des Themes
   (2rem = 32px). Ergebnis: deren Inhalt begann bei Breiten unter ~1300px um ~7px
   versetzt zum Rest und war am Handy 16px schmaler. Gleicher Wert wie überall sonst. */
.wp-block-group.alignfull.has-background {
	padding-left: var(--wp--style--root--padding-left, 2rem);
	padding-right: var(--wp--style--root--padding-right, 2rem);
}

/* === Ergänzung 2026-10: Bausteine aus Projekt feuerwehrplan-erstellen.de ===
   Nur neue Klassen (bl-kurzantwort, bl-fakten, bl-breadcrumbs, bl-anfrage).
   Bestehende Seiten verwenden sie nicht, daher keine Auswirkung auf deren Darstellung. */

/* Kurzantwort: Das Wichtigste in Kürze */
.bl-kurzantwort { background: var(--wp--preset--color--surface, #f4f4f4); border-left: 4px solid var(--wp--preset--color--accent); border-radius: 0 10px 10px 0; padding: 1.4rem 1.6rem; }
.bl-kurzantwort > * { margin-block: 0; }
.bl-kurzantwort > * + * { margin-top: .65rem !important; }
.bl-kurzantwort__titel { font-weight: 700; font-size: .85rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.bl-kurzantwort ul { padding-left: 1.2rem; }
.bl-kurzantwort li { margin-bottom: .3rem; }
.bl-kurzantwort li::marker { color: var(--wp--preset--color--accent); }

/* Faktenleiste */
.bl-fakten { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.bl-fakten .wp-block-columns { gap: 1.5rem 2rem; margin: 0; }
.bl-fakt { border-left: 3px solid var(--wp--preset--color--accent); padding-left: 1rem; }
.bl-fakt p { margin: 0; }
.bl-fakt__wert { font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.bl-fakt__text { font-size: .9rem; opacity: .8; line-height: 1.45; margin-top: .2rem !important; }
@media (max-width: 781px) { .bl-fakten .wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bl-fakten .wp-block-columns { grid-template-columns: 1fr; } }

/* Breadcrumbs ([bl_breadcrumbs], Modul SEO Plus) */
.bl-breadcrumbs { font-size: .85rem; }
.bl-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.bl-breadcrumbs li { display: flex; align-items: center; gap: .5rem; opacity: .85; }
.bl-breadcrumbs li + li::before { content: "/"; opacity: .6; }
.bl-breadcrumbs a { color: inherit; text-decoration: none; }
.bl-breadcrumbs a:hover { text-decoration: underline; }

/* Anfrageformular ([bl_anfrage], Modul Anfrage) */
.bl-anfrage fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.bl-anfrage legend { font-weight: 700; font-size: 1.15rem; margin-bottom: .75rem; padding: 0; }
.bl-anfrage__auswahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.bl-anfrage__auswahl label { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; border: 1px solid rgba(0, 0, 0, .2); border-radius: 10px; cursor: pointer; }
.bl-anfrage__auswahl label:has(input:checked) { border-color: var(--wp--preset--color--accent); }
.bl-anfrage__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.bl-anfrage__feld { display: flex; flex-direction: column; gap: .35rem; }
.bl-anfrage__feld--voll { grid-column: 1 / -1; }
.bl-anfrage__feld label { font-weight: 600; font-size: .9rem; }
.bl-anfrage input[type=text], .bl-anfrage input[type=email], .bl-anfrage input[type=tel], .bl-anfrage select, .bl-anfrage textarea { font: inherit; width: 100%; box-sizing: border-box; padding: .7rem .85rem; border: 1px solid rgba(0, 0, 0, .25); border-radius: 10px; background: #fff; color: inherit; }
.bl-anfrage input:focus, .bl-anfrage select:focus, .bl-anfrage textarea:focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent); }
.bl-anfrage input[type=checkbox] { accent-color: var(--wp--preset--color--accent); }
.bl-anfrage__upload { border: 2px dashed rgba(0, 0, 0, .2); border-radius: 10px; padding: 1rem; display: grid; gap: .4rem; }
.bl-anfrage__upload small, .bl-anfrage small { opacity: .75; }
.bl-anfrage__pflicht { color: var(--wp--preset--color--accent); }
.bl-anfrage__einwilligung { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; margin-top: 1.25rem; }
.bl-anfrage__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bl-anfrage button[type=submit] { margin-top: 1.25rem; cursor: pointer; }
.bl-anfrage__meldung { padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem; }
.bl-anfrage__meldung--ok { background: #e8f5ee; border: 1px solid #9fd1b4; color: #0b5d2e; }
.bl-anfrage__meldung--fehler { background: #fdf0f0; border: 1px solid #f0b4b6; color: #8a0f14; }
@media (max-width: 700px) { .bl-anfrage__felder, .bl-anfrage__auswahl { grid-template-columns: 1fr; } }
/* === Ende Ergänzung 2026-10 === */