/*
 * Layout- und Komponenten-Klassen für die Blockmuster unter /patterns.
 * Farben, Schriften und Radien kommen wo möglich aus theme.json
 * (var(--wp--preset--...)); hier steht nur, was theme.json nicht
 * abdeckt: Flex-/Grid-Layout, Kartenformen, Badges, Platzhalter.
 *
 * Wichtig: Kartenklassen wie .bl-card/.bl-audience-card/.bl-testimonial/
 * .bl-partner-card setzen bewusst "margin: 0". WordPress fügt Kindern
 * eines Group-Blocks mit Standard-Layout sonst automatisch den globalen
 * blockGap (theme.json: styles.spacing.blockGap) als margin-block-start
 * hinzu – bei ALLEN Kindern außer dem ersten. In einem eigenen CSS-Grid
 * (gap wird schon über die Grid-Klasse gesetzt) sorgt das dafür, dass nur
 * die erste Karte einer Reihe "normal" hoch ist und alle folgenden Karten
 * oben zusätzlich nach unten verschoben (und dadurch kürzer) erscheinen.
 */

/* Hero */
.bl-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	max-width: 1200px;
	margin-inline: auto;
	padding: 64px 5vw;
}
.bl-hero__text {
	flex: 1 1 360px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.bl-hero__subline {
	color: var(--wp--preset--color--text-muted, #6B655F);
	font-size: 18px;
	max-width: 480px;
}
.bl-hero__image {
	flex: 1 1 360px;
	min-height: 340px;
	border-radius: 20px;
	overflow: hidden;
}

/* Echtes Hero-Foto NEBEN dem Text (Startseite, innerhalb von .bl-hero) –
   hier ist flex-basis als Breiten-Vorgabe für die Spalte gedacht. */
figure.bl-hero__image {
	margin: 0;
}
figure.bl-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Über-mich-Teaser auf der Startseite: gleiches Layout wie der Hero
   (Foto links, Text rechts), aber ohne den großen Abstand nach oben */
.bl-intro {
	padding-top: 0;
}

/* Eigenständiges Seiten-Foto UNTER dem Text (Angebots-/Über-mich-/B2B-Seiten,
   außerhalb von .bl-hero). Absichtlich eine eigene Klasse statt
   .bl-hero__image: dort ist "flex: 1 1 360px" als Breiten-Vorgabe für eine
   Spalte neben dem Text gedacht – in einer normalen Spalte (main.bl-section
   ist flex-direction:column) würde dieselbe Regel als Höhen-Vorgabe von nur
   ca. 360px wirken und das Foto stark beschneiden. Stattdessen feste
   Bildproportion + object-fit, damit die volle Bildbreite genutzt wird und
   die Höhe im richtigen Verhältnis dazu steht. */
.bl-page-photo {
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	/* Verhindert, dass das Foto auf breiten Bildschirmen (Desktop/Tablet)
	   den Viewport dominiert – aber über die BREITE, nicht über die Höhe:
	   eine Höhen-Obergrenze hätte zusätzlich vom eh schon 4:3
	   zugeschnittenen Foto abgeschnitten (Köpfe/Füße riskiert). Mit einer
	   schmaleren max-width bleibt der komplette Bildausschnitt erhalten,
	   das Foto wird nur insgesamt kleiner/kompakter dargestellt. Auf dem
	   Handy (Breite < 720px) greift die Grenze ohnehin nicht.
	   70vh nur als Sicherheitsnetz für sehr niedrige Fenster. */
	max-width: 720px;
	max-height: 70vh;
}
.bl-page-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bild-Platzhalter (bis echte Fotos eingesetzt sind) */
.bl-placeholder {
	background: var(--wp--preset--color--sand, #ECE2D0);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	border-radius: 16px;
	min-height: 140px;
}
.bl-placeholder__label {
	color: #9a8f7c;
	font-size: 13px;
	margin: 0;
}

/* Zielgruppen-Wegweiser */
.bl-audience-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 20px;
	padding: 0 5vw 56px;
}
.bl-audience-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 28px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--sand, #ECE2D0);
}
.bl-audience-card--privat {
	border-color: var(--wp--preset--color--accent, #C15C3B);
	background: #FBF1EC;
}
.bl-audience-card--b2b {
	border-color: var(--wp--preset--color--accent-b2b, #33616A);
	background: #EDF3F4;
}

/* Grids für Angebote / Testimonials */
.bl-offer-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 20px;
	padding: 0 5vw 56px;
}
.bl-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 20px;
}
@media (max-width: 900px) {
	.bl-offer-grid,
	.bl-testimonial-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bl-audience-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.bl-offer-grid,
	.bl-testimonial-grid {
		grid-template-columns: 1fr;
	}
}

/* Karten (Angebote) */
.bl-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	border-radius: 16px;
	overflow: hidden;
}
.bl-card__image.bl-placeholder {
	border-radius: 0;
	min-height: 140px;
}
.bl-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bl-card--compact {
	padding: 18px;
	gap: 6px;
}
.bl-card__meta {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--text, #211E1B);
	margin: 4px 0 0;
}
.bl-card--b2b {
	border-color: var(--wp--preset--color--accent-b2b, #33616A);
}
/* Kartenbild oben (Foto oder Icon-Kachel), einheitliches 3:2-Format */
.bl-card__image {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.bl-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bl-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--sand, #ECE2D0);
	color: var(--wp--preset--color--accent, #C15C3B);
}
.bl-card__text {
	font-size: 15px;
	color: var(--wp--preset--color--text-muted, #6B655F);
}
/* Kein automatisches Trennen ("Work-shop"), nur Notumbruch bei Überlänge */
.bl-card h3 {
	hyphens: manual;
	overflow-wrap: break-word;
}

/* Abstands-Fix mit höherer Spezifität (zwei Klassen): WordPress setzt den
   globalen blockGap über ":root :where(.is-layout-flow) > *" – das hat
   dieselbe Spezifität wie eine einzelne Klasse und gewinnt je nach
   Ladereihenfolge trotz "margin: 0" auf der Kartenklasse (Screenshots
   05.10.2026). Abstände innerhalb der Karten kommen deshalb nur über gap. */
.bl-audience-grid > .bl-audience-card,
.bl-offer-grid > .bl-card,
.bl-testimonial-grid > .bl-testimonial,
.bl-partner-grid > .bl-partner-card,
.bl-audience-grid .bl-audience-card > *,
.bl-offer-grid .bl-card > *,
.bl-offer-grid .bl-card__body > * {
	margin-block: 0;
}
.bl-audience-grid .bl-audience-card {
	gap: 12px;
}
.bl-offer-grid .bl-card__body {
	flex: 1 1 auto;
	gap: 10px;
}
/* Grid in einer Section oder im Seiteninhalt (page.html, post-content ist
   "constrained" = 720px Textbreite): Section liefert schon Breite und
   Seitenabstand, die Karten dürfen die volle Breite nutzen (Seite
   "Angebote", Screenshot 05.10.2026) */
.bl-section > .bl-offer-grid,
.wp-block-post-content > .bl-offer-grid,
.wp-block-post-content > .bl-audience-grid,
.wp-block-post-content > .bl-testimonial-grid {
	padding: 0;
	max-width: none;
	width: 100%;
}

/* Badges */
.bl-badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--sand, #ECE2D0);
	color: #5b4a38;
	font-size: 11px;
	font-weight: 600;
	margin: 0 0 8px;
}
.bl-badge--privat {
	background: var(--wp--preset--color--accent, #C15C3B);
	color: #fff;
}
.bl-badge--year {
	background: #F6E3DB;
	color: var(--wp--preset--color--accent-dark, #9C4830);
}
.bl-badge--b2b {
	background: var(--wp--preset--color--accent-b2b, #33616A);
	color: #fff;
}
.bl-badge--google {
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	color: var(--wp--preset--color--text, #211E1B);
}

/* Text-Links mit Pfeil */
.bl-link-arrow {
	margin: 8px 0 0;
}
.bl-link-arrow a {
	font-weight: 600;
	font-size: 14px;
}
.bl-link-arrow--b2b a {
	color: var(--wp--preset--color--accent-b2b, #33616A);
}
/* In Karten den Link unabhängig von der Textmenge auf eine gemeinsame
   Grundlinie schieben, statt ihn direkt unter dem Text schweben zu lassen */
.bl-card > .bl-link-arrow,
.bl-card__body > .bl-link-arrow,
.bl-audience-card > .bl-link-arrow,
.bl-audience-grid .bl-audience-card > .bl-link-arrow,
.bl-offer-grid .bl-card__body > .bl-link-arrow,
.bl-offer-grid .bl-card__body > .bl-card__meta {
	margin-top: auto;
}
/* Preis/Dauer + Link gemeinsam am unteren Kartenrand */
.bl-offer-grid .bl-card__body > .bl-card__meta + .bl-link-arrow {
	margin-top: 4px;
}

/* Testimonials */
.bl-testimonial {
	padding: 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.bl-testimonial__stars {
	color: var(--wp--preset--color--accent, #C15C3B);
	letter-spacing: 2px;
	margin: 0;
}
.bl-testimonial__source {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted, #6B655F);
	margin-top: auto;
}

/* CTA-Banner */
.bl-cta-banner {
	background: var(--wp--preset--color--surface, #FFFFFF);
	border-top: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	border-bottom: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	padding: 56px 5vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Header / Footer */
.bl-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5vw;
	height: 96px;
	background: var(--wp--preset--color--surface, #FFFFFF);
	border-bottom: 1px solid var(--wp--preset--color--sand, #ECE2D0);
}
/* blockGap-Fix: Navigation sonst 24px tiefer als das Logo (Screenshot 05.10.2026) */
.bl-header.wp-block-group > * {
	margin-block: 0;
}
.bl-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 32px 5vw;
	border-top: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	font-size: 13px;
	color: var(--wp--preset--color--text-muted, #6B655F);
}

/* Allgemeine Section-Abstände */
.bl-section {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 5vw 56px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* FAQ */
.bl-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	padding: 20px 0;
}

/* Zwei-Spalten-Layout (z. B. Infobox + Termine nebeneinander) */
.bl-two-col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}
@media (max-width: 700px) {
	.bl-two-col {
		grid-template-columns: 1fr;
	}
}

/* Infobox (Ort/Dauer/Preis) */
.bl-infobox {
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 320px;
}
.bl-infobox__row {
	margin: 0;
	font-size: 15px;
}

/* Termine */
.bl-termine {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* FAQ-Verweis-Box */
.bl-faq-verweis {
	background: var(--wp--preset--color--sand, #ECE2D0);
	border-radius: 16px;
	padding: 20px 24px;
	margin-top: 16px;
}

/* Fluent-Forms-Formulare (Kontakt, Unternehmen-Anfrage, Vormerken) */
.bl-form {
	width: 100%;
	max-width: 640px;
	scroll-margin-top: 24px;
}

/* Formular-Platzhalter */
.bl-form-placeholder {
	min-height: 220px;
	align-items: flex-start;
	text-align: left;
	padding: 32px;
}

/* Werdegang-Zeitleiste ("Über mich") */
.bl-timeline {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.bl-timeline__item {
	display: flex;
	gap: 20px;
	align-items: baseline;
	border-left: 2px solid var(--wp--preset--color--sand, #ECE2D0);
	padding-left: 20px;
}
.bl-timeline__year {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--accent, #C15C3B);
	min-width: 60px;
}

/* Partner-Liste */
.bl-partner-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 700px) {
	.bl-partner-grid {
		grid-template-columns: 1fr;
	}
}
.bl-partner-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #FFFFFF);
	border: 1px solid var(--wp--preset--color--sand, #ECE2D0);
	text-align: center;
	margin: 0;
}
.bl-partner-grid .bl-partner-card > * {
	margin-block: 0;
}
/* Logos auf einheitliche Höhe, Seitenverhältnis bleibt erhalten */
.bl-partner-card__logo {
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bl-partner-card__logo img {
	max-height: 96px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.bl-partner-note {
	font-size: 0.875rem;
	opacity: 0.8;
}

/* Button-Stil "Umriss" (sekundärer CTA) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent, #C15C3B);
	border: 1.5px solid var(--wp--preset--color--accent, #C15C3B);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent, #C15C3B);
	color: var(--wp--preset--color--surface, #FFFFFF);
}

/* Header: Kontakt als Button-artiger Menüpunkt */
.bl-nav-cta > a {
  background: var(--wp--preset--color--accent, #C15C3B);
  color: #fff !important;
  padding: 0.5em 1.1em;
  border-radius: 999px;
}
.bl-nav-cta > a:hover { background: var(--wp--preset--color--accent-dark, #9C4830); }