/* 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;
}

/* 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));
}

/* 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%;
}

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

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

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

/* 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;
}

/* 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;
}

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

.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 {
	/* Für diese Installation auf Kundenwunsch zentriert statt linksbündig -
	   bewusst NUR hier angepasst (nicht in branchenlsung-1/2), da "links" dort
	   weiterhin als eigenständige Bannervariante angeboten wird. */
	position: relative;
	text-align: center;
}

.bl-banner-links h1 {
	text-align: center !important;
	margin: 0 auto !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; }
}