/*
 * Betonbohren Beller – Modernisierung 2026-07-21
 * Zentrales Stylesheet fuer Farb-/Typografie-System, Header, Buttons, Karten,
 * Vertrauensbereich, CTA-Boxen, Footer und responsive Korrekturen.
 * Aendert keine Divi-Core-Dateien, nur additive CSS-Regeln.
 */

/* ---------- Selbstgehostete Schriften (kein externer Request, DSGVO-konform) ---------- */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/montserrat-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/opensans-variable.woff2') format('woff2');
}

/* ---------- Farb-/Typografie-System (Premium-Designsystem 2026-07-21) ---------- */
:root {
	--bb-primary: #1F2A44;       /* Anthrazit */
	--bb-primary-dark: #161d30;
	--bb-surface: #F6F7F8;       /* Betongrau (sekundaer) */
	--bb-surface-alt: #EEF2F5;   /* alternative Abschnitte */
	--bb-section-white: #FFFFFF;
	--bb-border: #D8DEE4;
	--bb-gray: #6b7280;          /* mittleres Grau */
	--bb-text: #444444;
	--bb-accent: #F26A21;        /* Sicherheitsorange */
	--bb-accent-dark: #D95B17;   /* Hover */
	--bb-font-heading: 'Montserrat', Arial, sans-serif;
	--bb-font-body: 'Open Sans', Arial, sans-serif;

	/* Spacing-Skala */
	--bb-space-1: 8px;
	--bb-space-2: 16px;
	--bb-space-3: 24px;
	--bb-space-4: 32px;
	--bb-space-5: 48px;
	--bb-space-6: 64px;
	--bb-space-7: 96px;

	/* Karten/Radius/Schatten */
	--bb-radius: 12px;
	--bb-radius-sm: 8px;
	--bb-shadow: 0 2px 10px rgba(31, 42, 68, 0.07);
	--bb-shadow-hover: 0 10px 24px rgba(31, 42, 68, 0.12);
}

/* Sehr helles Betongrau statt reinem Weiss, kaum sichtbarer Verlauf oben->unten */
body { background: linear-gradient(180deg, #FFFFFF 0%, #F5F7F8 100%); background-attachment: fixed; }

body, .et_pb_text, p, li, input, textarea, select, button {
	font-family: var(--bb-font-body);
	font-weight: 400;
	color: var(--bb-text);
}
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5 {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-primary);
	line-height: 1.25;
}
h1 { font-size: clamp(1.9rem, 3.4vw + 1rem, 2.75rem); line-height: 1.18; }
h2 { font-size: clamp(1.4rem, 1.2vw + 1.1rem, 1.9rem); margin-top: 0.2em; }
h3 { font-size: clamp(1.15rem, 0.6vw + 1rem, 1.35rem); }
.et_pb_text p, .et_pb_text li { line-height: 1.7; }
.et_pb_text > p:first-of-type { max-width: 72ch; }
a { color: var(--bb-primary); }
a:hover { color: var(--bb-accent); }

/* Sichtbarer Fokus fuer Tastaturbedienung (Barrierearmut) */
a:focus-visible, button:focus-visible, .et_pb_button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--bb-accent);
	outline-offset: 2px;
}

/* ---------- Buttons (Divi-Button-Modul + eigene .bb-btn): vereinheitlicht, ~48px Hoehe, 8px Radius ---------- */
.et_pb_button, .bb-btn {
	background: var(--bb-accent) !important;
	border: 2px solid var(--bb-accent) !important;
	color: #fff !important;
	border-radius: var(--bb-radius-sm) !important;
	padding: 13px 30px !important; /* + 2x2px Border ≈ 48px Gesamthoehe */
	font-family: var(--bb-font-heading);
	font-weight: 600 !important;
	/* min. 14px/bold = WCAG "large text" Schwelle, damit ausreichend Kontrast (weiss auf Akzent-Orange) besteht */
	font-size: 1.05rem !important;
	letter-spacing: 0.02em;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.et_pb_button:hover, .bb-btn:hover {
	background: var(--bb-accent-dark) !important;
	border-color: var(--bb-accent-dark) !important;
	color: #fff !important;
}
.bb-btn-outline {
	background: transparent !important;
	border-color: #fff !important;
	color: #fff !important;
}
.bb-btn-outline:hover {
	background: rgba(255,255,255,0.15) !important;
	border-color: #fff !important;
}
.bb-btn-primary-dark {
	background: var(--bb-primary) !important;
	border-color: var(--bb-primary) !important;
}
.bb-btn-primary-dark:hover {
	background: var(--bb-primary-dark) !important;
	border-color: var(--bb-primary-dark) !important;
}
/* Sekundaerer Button (Anthrazit statt Orange), z. B. fuer "Leistungen ansehen" auf hellem Grund */
.bb-btn-secondary {
	background: var(--bb-primary) !important;
	border-color: var(--bb-primary) !important;
	color: #fff !important;
}
.bb-btn-secondary:hover {
	background: #33405e !important; /* helleres Anthrazit */
	border-color: #33405e !important;
}

/* ---------- Header: kompakter, hochwertiger, sticky, aktive Navigation ---------- */
#logo { max-height: 64px; width: auto; }
@media (max-width: 767px) { #logo { max-height: 46px; } }

/* ---------- Header-Layout: Logo links, Navigation rechts (Ueberarbeitung 2026-07-21) ----------
   Divi positioniert .logo_container per position:absolute OHNE expliziten "left"-Wert - das
   Element bleibt dadurch auf seiner urspruenglichen Stelle im Layout "haengen" und reagiert
   nicht auf normale Content-Aenderungen. Statt weiter gegen dieses absolute Positionierungs-
   system anzukaempfen, wird .logo_container hier komplett aus der absoluten Positionierung
   herausgenommen (position:static) und stattdessen wie die Navigation (die bereits
   "float:right" ist) per "float:left" nebeneinander gesetzt - ein robusteres, direkt
   nachvollziehbares Zwei-Spalten-Layout ohne Eingriff in die Navigation selbst.
   Container-Breite/-Abstand: volle Breite bis 1600px, mit einem fluiden (clamp-basierten statt
   fest kodierten) Innenabstand, der zwischen 12px (schmale Mobilgeraete) und 30px (breite
   Desktop-Bildschirme) skaliert - deckt die gewuenschten Bereiche 12-16px (mobil), 16-20px
   (Tablet) und 20-30px (Desktop) stufenlos ab, ohne feste Breakpoint-Werte. */
#main-header .et_menu_container {
	max-width: 1600px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(12px, 2vw, 30px) !important;
	padding-right: clamp(12px, 2vw, 30px) !important;
}
.logo_container {
	position: static !important;
	float: left !important;
	height: auto !important;
	width: auto !important;
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Zweizeiliger Schriftzug: "Beller" zentriert unter "Betonbohren" */
.beller-logo-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	line-height: 1.15;
}
.beller-logo-line1 {
	font-family: var(--bb-font-heading);
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--bb-primary);
	white-space: nowrap;
	letter-spacing: 0.01em;
}
.beller-logo-line2 {
	font-family: var(--bb-font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--bb-primary);
	white-space: nowrap;
	letter-spacing: 0.04em;
}
@media (max-width: 767px) { .beller-logo-text { display: none; } }

/*
 * Divi setzt #main-header standardmaessig nicht auf position:sticky.
 * !important noetig, da Divis eigenes CSS je nach Header-Format hoehere
 * Selektor-Spezifitaet/spaetere Reihenfolge hat.
 */
#main-header { position: sticky !important; top: 0; z-index: 9999; }

/* Sprungziel Kontaktformular: Abstand nach oben, damit der sticky Header den Titel beim
   Ankersprung (Hauptmenue "Kontakt") nicht verdeckt. */
#nachricht-senden { scroll-margin-top: 100px; }

/* Aktiver Menuepunkt: Farbe UND Unterstreichung, nicht nur Farbe (Barrierearmut) */
#top-menu .current-menu-item > a,
#top-menu .current_page_item > a {
	color: var(--bb-accent) !important;
	font-weight: 700;
	border-bottom: 3px solid var(--bb-accent);
}

/* Telefonnummer + "Angebot anfragen"-Button im Hauptmenue (via wp_nav_menu_items) */
#top-menu .bb-nav-phone > a {
	color: var(--bb-primary) !important;
	font-weight: 600;
	white-space: nowrap;
}
#top-menu .bb-nav-cta > a {
	background: var(--bb-accent) !important;
	color: #fff !important;
	padding: 10px 22px !important;
	border-radius: 4px;
	font-weight: 700 !important;
	margin-left: 6px;
}
#top-menu .bb-nav-cta > a:hover { background: var(--bb-accent-dark) !important; }

/* ---------- Hover-Audit (2026-07-22): alle auswaehlbaren Elemente bekommen einen konsistenten,
   markenfarbigen Hover-Zustand statt Divis Standard-Verhalten (teils nur Opacity-Fade, teils gar
   keine eigene Regel). Divis eigene Hover-Regeln bleiben bestehen (z. B. Menue-Opacity-Fade),
   werden hier aber ueberschrieben - !important noetig, da Divis generierte CSS teils hoehere
   Spezifitaet/spaetere Reihenfolge hat (gleiches Muster wie beim Footer, siehe oben). */
#top-menu > li > a:hover { color: var(--bb-accent) !important; opacity: 1 !important; }
#top-menu .bb-nav-phone > a:hover { color: var(--bb-accent) !important; opacity: 1 !important; }
/* Unterer Footer-Bereich (Impressum/Datenschutz-Menue) hatte bislang nur Divis blassen
   Opacity-Fade-Hover, keine eigene Markenfarbe. */
#footer-bottom .bottom-nav a { color: #c7ccd3 !important; }
#footer-bottom .bottom-nav a:hover { color: var(--bb-accent) !important; opacity: 1 !important; }
/* Sidebar-/Suchformular-Buttons (z. B. "Suchen"-Schaltflaeche im Suchwidget) hatten Grundfarbe,
   aber keinen eigenen Hover-Zustand. */
.et_pb_widget button:hover, .et_pb_widget input[type="submit"]:hover { background: var(--bb-accent-dark) !important; }
/* Formularfelder: Rahmenfarbe reagiert schon auf Fokus, zusaetzlich dezent auch auf Hover
   (Maus-Feedback vor dem Klicken ins Feld). */
.bb-form-field input:hover, .bb-form-field select:hover, .bb-form-field textarea:hover { border-color: var(--bb-accent); }

/* ---------- Karten (Leistungen, Trust-Bar, Blurbs): einheitliches Kartensystem ---------- */
.bb-card {
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	padding: var(--bb-space-4) var(--bb-space-3);
	height: 100%;
	box-shadow: var(--bb-shadow);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	position: relative;
	overflow: hidden;
}
/* Orange Linie oben, blendet beim Hover ein statt eine harte Kante zu sein */
.bb-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--bb-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.bb-card:hover {
	box-shadow: var(--bb-shadow-hover);
	transform: translateY(-4px);
	border-color: var(--bb-accent);
}
.bb-card:hover::before { transform: scaleX(1); }
.bb-card h3 { margin: 0 0 var(--bb-space-1); font-size: 1.05rem; }
.bb-card p { margin: 0; color: var(--bb-gray); font-size: 0.92rem; }
.bb-card a.bb-card-link { display: inline-block; margin-top: var(--bb-space-2); font-weight: 600; color: var(--bb-accent); text-decoration: none; }
.bb-card a.bb-card-link:hover { text-decoration: underline; }
.bb-card-icon { width: 44px; height: 44px; margin-bottom: var(--bb-space-2); color: var(--bb-primary); transition: color .15s ease; }
.bb-card:hover .bb-card-icon { color: var(--bb-accent); }

/* Karten-Muster auch auf die weiteren kartenartigen Bausteine anwenden (Regionskarten Einsatzgebiet,
   Leistungs-Icon-Karten, Blog-Beitragskarten) - dieselbe Sprache: Radius, Schatten, Hover-Anhebung. */
.beller-region-card, .et_pb_post {
	border-radius: var(--bb-radius) !important;
	box-shadow: var(--bb-shadow) !important;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
.beller-region-card:hover, .et_pb_post:hover {
	box-shadow: var(--bb-shadow-hover) !important;
	transform: translateY(-4px);
	border-color: var(--bb-accent) !important;
}

.bb-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1024px) { .bb-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .bb-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .bb-grid-5 { grid-template-columns: 1fr; } }

/* Leistungs-Icon-Karten auf "Unsere Leistungen" (Kernbohrungen, Verbundanker, ...): Hover in
   derselben Akzentfarbe wie Buttons/Chips/Karten anderswo auf der Seite. Icons nutzen
   currentColor statt eines festen Hex-Werts, damit sie der Textfarbe beim Hover folgen. */
.beller-leistung-card { transition: color .2s ease; }
.beller-leistung-card > div { border-radius: var(--bb-radius) !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.beller-leistung-card:hover { color: var(--bb-accent); }
/* !important bei border-color noetig: der Kaesten-Rahmen ist als Inline-Style
   ("border:1px solid #D8DEE4") im Divi-Textmodul-Inhalt gesetzt - Inline-Styles gewinnen sonst
   immer gegen eine externe Regel, unabhaengig von deren Selektor-Spezifitaet. Das war der Grund,
   warum der Hover bislang bei allen Kaesten (u. a. "Durchbrueche") sichtbar nichts bewirkte. */
.beller-leistung-card:hover > div {
	border-color: var(--bb-accent) !important;
	box-shadow: var(--bb-shadow-hover);
	transform: translateY(-4px);
}
/* !important noetig: die Ueberschrift hat eine eigene Inline-Farbe (Divi-Textmodul-Inhalt),
   die sonst Vorrang vor der externen Regel haette. */
.beller-leistung-card:hover h3 { color: var(--bb-accent) !important; }

/* ---------- Vertrauensbereich (4 Punkte unter Hero) ---------- */
.bb-trustbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 767px) { .bb-trustbar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .bb-trustbar { grid-template-columns: 1fr; } }
.bb-trustbar-item { text-align: center; padding: 6px 10px; }
.bb-trustbar-item svg { width: 34px; height: 34px; color: var(--bb-accent); margin: 0 auto 10px; display: block; }
.bb-trustbar-item span { display: block; font-weight: 600; color: var(--bb-primary); font-size: 0.95rem; }

/* ---------- Checkliste ("Warum Betonbohren Beller?") ---------- */
.bb-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
@media (max-width: 600px) { .bb-checklist { grid-template-columns: 1fr; } }
.bb-checklist li { position: relative; padding-left: 32px; line-height: 1.5; }
.bb-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0; top: -1px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--bb-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 22px;
	text-align: center;
}

/* ---------- CTA-Box ---------- */
.bb-cta { background: var(--bb-primary); color: #fff; border-radius: 8px; padding: 48px 40px; text-align: center; }
.bb-cta h2, .bb-cta h3 { color: #fff; margin-top: 0; }
.bb-cta p { color: #dbe1ec; max-width: 60ch; margin-left: auto; margin-right: auto; }
.bb-cta .bb-cta-buttons { margin-top: 22px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Intro-/Hinweisbox (bereits bestehendes Muster vereinheitlicht) ---------- */
.bb-lede { border-left: 5px solid var(--bb-primary); background: var(--bb-surface); padding: 26px 32px; border-radius: 0 6px 6px 0; }

/* ---------- Einsatzgebiet: Regionskarten / Ortschips ---------- */
.bb-region-group { margin-bottom: 34px; }
.bb-region-group h2 { margin-bottom: 14px; }
.bb-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bb-chip-list li { margin: 0; }
.bb-chip-list a {
	display: inline-block;
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--bb-primary);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.bb-chip-list a:hover { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }

/* ---------- Blog: Beitraege als Karten, aufgeraeumte Sidebar ---------- */
.et_pb_post {
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: 8px;
	padding: 30px 34px;
	margin-bottom: 28px;
	box-shadow: 0 1px 3px rgba(20,30,50,0.05);
}
.et_pb_post .entry-title { margin-top: 0; }
.widget-title, .et_pb_widget h4 { font-family: var(--bb-font-heading); color: var(--bb-primary); font-size: 1.05rem; }
.et_pb_widget { margin-bottom: 30px; }
.et_pb_widget input[type="search"] { border: 1px solid var(--bb-border); border-radius: 4px; padding: 8px 12px; }
.et_pb_widget button, .et_pb_widget input[type="submit"] { background: var(--bb-accent); color: #fff; border: none; border-radius: 4px; padding: 8px 16px; font-weight: 700; }

/* ---------- Kontaktformular: mehr Weissraum, 8px Radius, oranger Fokus ---------- */
.bb-form { max-width: 560px; }
.bb-form-honeypot { position: absolute; left: -9999px; }
.bb-form-field { margin: 0 0 var(--bb-space-3); }
.bb-form-field label { display: block; font-weight: 600; margin-bottom: var(--bb-space-1); color: var(--bb-primary); }
.bb-form-field input, .bb-form-field select, .bb-form-field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius-sm);
	background: #fff;
	font-family: var(--bb-font-body);
	font-size: 1rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bb-form-field input:focus, .bb-form-field select:focus, .bb-form-field textarea:focus {
	outline: none;
	border-color: var(--bb-accent);
	box-shadow: 0 0 0 3px rgba(242, 106, 33, 0.18);
}
.bb-form-privacy { margin: 0 0 var(--bb-space-3); font-size: 0.88em; color: var(--bb-gray); }
.bb-form-notice { border-radius: var(--bb-radius-sm); padding: var(--bb-space-2) var(--bb-space-3); margin: 0 0 var(--bb-space-3); }
.bb-form-notice--success { background: #eef7ee; border: 1px solid #bfe2bf; color: #265426; }
.bb-form-notice--error { background: #fbeeee; border: 1px solid #e2bfbf; color: #542626; }

/* Sidebar-Widgets (z. B. "Neueste Beitraege"): das WordPress-Block-Widget "Neueste Beitraege"
   nutzt ein <h2>, das die obige ".et_pb_widget h4"-Regel nicht erfasst hat. Fuer Links galt
   bisher gar keine eigene Regel - sie folgten den globalen Divi-Standardfarben, die Divi je
   nach Seite unterschiedlich und teils erst NACH diesem Stylesheet ausgibt (gleiches Problem
   wie beim Footer, siehe oben) - deshalb hier mit ausreichender ID-Spezifitaet + !important
   direkt auf den Sidebar-Container (#sidebar) fixiert, unabhaengig von Divis Ausgabereihenfolge. */
#sidebar .et_pb_widget h2,
#sidebar .et_pb_widget h3 { font-family: var(--bb-font-heading); color: var(--bb-primary) !important; font-size: 1.05rem; }
#sidebar .et_pb_widget a { color: var(--bb-primary) !important; }
#sidebar .et_pb_widget a:hover { color: var(--bb-accent) !important; text-decoration: underline; }

/* Keine klassische Sidebar mehr auf Blog/Beitragsseiten - Beitragsspalte nutzt die volle Breite.
   (Regeln oben bleiben stehen, falls die Sidebar spaeter doch wieder reaktiviert werden soll -
   sie greifen dann automatisch wieder, ohne dass diese Zeilen angefasst werden muessen.) */
#sidebar { display: none !important; }
#left-area { width: 100% !important; float: none !important; }

/* ---------- Footer ----------
   Divi erzeugt fuer Footer-Widget-Ueberschriften mehrere eigene, unterschiedliche Farbregeln
   (u. a. sein Standard-Blau #2ea3f2 und - aus der globalen accent_color-Theme-Option - zusaetzlich
   #1c2b4a). Eine davon wird nachweislich NACH diesem Stylesheet ausgegeben (Divis dynamische
   Customizer-CSS steht nicht zuverlaessig vor externen Plugin-Stylesheets) und ueberschrieb die
   vorherige Regel ohne !important wieder mit dunklem Navy auf dem fast schwarzen Footer-
   Hintergrund (#main-footer{background-color:#222}) - praktisch unlesbar. Daher hier bewusst mit
   !important fixiert, ebenso fuer die Leistungs-Linkliste, da Divis eigene ".footer-widget li a"-
   Regel (hoehere Spezifitaet als ein einfaches ".footer-widget a") sonst ebenfalls gewinnen wuerde. */
#footer-widgets .footer-widget h4 { font-family: var(--bb-font-heading); color: #fff !important; }
#footer-widgets .footer-widget a,
#footer-widgets .footer-widget li a { color: #e3e7ec !important; }
#footer-widgets .footer-widget a:hover,
#footer-widgets .footer-widget li a:hover { color: var(--bb-accent) !important; }
#footer-widgets .footer-widget li:before { border-color: var(--bb-accent) !important; }
#footer-widgets .footer-widget p { color: #c7ccd3 !important; }

/* ---------- FAQ als Accordion-Karten (natives <details>/<summary>, kein JS noetig) ---------- */
.bb-faq-item {
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	margin: 0 0 var(--bb-space-2);
	box-shadow: var(--bb-shadow);
	overflow: hidden;
}
.bb-faq-question {
	cursor: pointer;
	list-style: none;
	padding: var(--bb-space-3) 50px var(--bb-space-3) var(--bb-space-4);
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-primary);
	position: relative;
	transition: color .15s ease;
}
.bb-faq-question::-webkit-details-marker { display: none; }
.bb-faq-question::after {
	content: "";
	position: absolute;
	right: var(--bb-space-3);
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--bb-accent);
	border-bottom: 2px solid var(--bb-accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.bb-faq-item[open] .bb-faq-question::after { transform: translateY(-30%) rotate(-135deg); }
.bb-faq-question:hover { color: var(--bb-accent); }
.bb-faq-question:focus-visible { outline: 3px solid var(--bb-accent); outline-offset: -3px; }
.bb-faq-answer { padding: 0 var(--bb-space-4) var(--bb-space-3); color: var(--bb-text); }
.bb-faq-answer p { margin: 0; line-height: 1.7; }

/* ---------- Section-Rhythmus: abwechselnd Weiss/Betongrau statt einer einzigen Weissflaeche ----------
   Die Website hat mehrere eigenstaendige Seiten statt einer einzigen Onepager-Struktur - eine
   1:1-Zuordnung "Hero weiss / Leistungen hellgrau / ..." laesst sich daher nicht auf einzelne
   Seiten abbilden. Stattdessen wird der gewuenschte Effekt ("Rhythmus" durch abwechselnde
   Flaechen, keine grossen durchgehenden Weissflaechen) seitenuebergreifend konsistent erzeugt:
   jede zweite Section einer Seite erhaelt den helleren Betongrau-Ton. Greift nur, wenn eine
   Section keine eigene (z. B. dunkle Bild-) Hintergrundfarbe gesetzt hat. */
.et_pb_section:nth-of-type(even) { background-color: var(--bb-surface); }
.et_pb_section:nth-of-type(odd) { background-color: var(--bb-section-white); }

/* ---------- Responsive Sicherheitsnetz: kein horizontales Scrollen ---------- */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* ---------- Einsatzgebiet-Seite (Redesign 2026-07-21) ---------- */

/* Kleines Label über der H1 als dezenter Orange-Akzent im Hero */
.beller-eyebrow {
	display: inline-block;
	color: var(--bb-accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	margin-bottom: 10px;
}

/* 2 Vertrauenspunkte im Hero (schmalere Variante der Trustbar-Optik) */
.beller-eg-trust { display: grid; grid-template-columns: repeat(2, minmax(200px, auto)); gap: 20px 32px; margin-top: 28px; }
.beller-eg-trust .bb-trustbar-item { text-align: left; }
.beller-eg-trust .bb-trustbar-item svg { margin: 0 0 8px; }
@media (max-width: 479px) { .beller-eg-trust { grid-template-columns: 1fr; } }

/* Regionskarten: 2 pro Zeile ab 900px, darunter 1 Spalte (genug Platz fuer lange Ortslisten) */
.beller-region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 26px; }
@media (max-width: 899px) { .beller-region-grid { grid-template-columns: 1fr; } }

.beller-region-card { padding: 32px; }
/* Regionsname bleibt semantisch H2 (SEO-Vorgabe), optisch aber wie eine Karten-Ueberschrift */
.beller-region-card h2 { font-size: 1.15rem; margin: 14px 0 8px; }
.beller-region-card > p { color: var(--bb-gray); font-size: 0.92rem; margin: 0 0 18px; }

/* Ortschips: keine Aufzaehlungspunkte, ausreichend grosse Klickflaeche, Fokus ueber globale a:focus-visible-Regel */
.beller-location-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.beller-location-chip {
	display: inline-flex;
	align-items: center;
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-radius: 999px;
	padding: 12px 18px;
	min-height: 44px;
	box-sizing: border-box;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--bb-primary);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.beller-location-chip:hover { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; }

/* Kompakter, horizontaler Leistungshinweis zwischen Regionskarten und CTA */
.beller-service-hint {
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-radius: 10px;
	padding: 28px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.beller-service-hint h2 { margin: 0 0 8px; font-size: 1.25rem; }
.beller-service-hint p { margin: 0; color: var(--bb-gray); }
.beller-service-hint .bb-btn { flex-shrink: 0; }
@media (max-width: 767px) {
	.beller-service-hint { flex-direction: column; align-items: stretch; text-align: left; }
	.beller-service-hint .bb-btn { text-align: center; }
}

/* ---------- Interaktive Einsatzgebiet-Karte (Geometrie-Korrektur 2026-07-22) ----------
   Landkreiskontur, Bodensee/Buesingen/Reichenau-Flaechen und alle Markerpositionen stammen aus
   echten OpenStreetMap-Geodaten (siehe einsatzgebiet-karte.php und MODERNISIERUNG.md, Abschnitt
   "23. Nachtrag" fuer Quelle/Lizenz/Projektionsmethode). Farbsystem unveraendert gegenueber der
   Vorversion: helles Betongrau fuer Land, Blau fuer Wasser, Anthrazit fuer Marker/Infobox,
   Orange fuer aktive/hervorgehobene Zustaende. */

.beller-map-wrap { margin: 8px 0 4px; }

.beller-map-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.beller-map-filter {
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: 999px;
	padding: 9px 18px;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--bb-primary);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.beller-map-filter:hover { border-color: var(--bb-accent); color: var(--bb-accent); }
.beller-map-filter.is-active { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }

.beller-map-layout { display: flex; gap: 32px; align-items: stretch; }
/* position:relative noetig, da der Tooltip (.beller-map-tooltip) relativ zu diesem Container
   positioniert wird, nicht relativ zur ganzen Seite. */
.beller-map-canvas { position: relative; flex: 0 0 65%; max-width: 65%; background: #fff; border: 1px solid var(--bb-border); border-radius: 12px; padding: 16px; }
.beller-map-info { flex: 1 1 35%; background: var(--bb-primary); color: #fff; border-radius: 12px; padding: 30px 28px; }
@media (max-width: 899px) {
	/* Mobil/Tablet: Karte oben, Info darunter */
	.beller-map-layout { flex-direction: column; }
	.beller-map-canvas, .beller-map-info { flex: 1 1 auto; max-width: 100%; }
}

.beller-map { width: 100%; height: auto; display: block; }

/* Landflaeche (Landkreis-Hauptkoerper + Buesingen-Exklave separat, siehe PHP): helles
   Betongrau, Konturlinie in dunklem Grau. */
.beller-map-land { fill: var(--bb-surface); stroke: #55606b; stroke-width: 1.6; }
.beller-map-land--exclave { stroke-width: 1.3; }
.beller-map-island { fill: var(--bb-surface); stroke: #55606b; stroke-width: 1; }

/* Bodensee/Untersee/Gnadensee/Zeller See: ruhiges, gedecktes Blau, ein zusammenhaengender
   Wasserkoerper aus der geclippten OSM-Kontur (siehe PHP-Kommentar zur Sutherland-Hodgman-
   Clipping-Methode). */
.beller-map-lake { fill: #9bc2d9; }

/* ----- Marker ----- */
.beller-map-marker { cursor: pointer; outline: none; }

/* Unsichtbare, aber ausreichend grosse Klickflaeche (r=12 -> 24px Durchmesser) */
.beller-map-marker__hit { fill: transparent; stroke: none; }

.beller-map-marker__ring {
	fill: none;
	stroke: var(--bb-primary);
	stroke-width: 1.4;
	opacity: 0.3;
	transition: r .18s ease, opacity .18s ease, stroke .18s ease, filter .18s ease;
}
.beller-map-marker__dot {
	fill: var(--bb-primary);
	stroke: #fff;
	stroke-width: 1.5;
	transition: transform .18s ease, fill .18s ease;
	transform-box: fill-box;
	transform-origin: center;
}

/* Groessere Staedte (Konstanz, Radolfzell, Singen, Stockach) etwas staerker markiert. Keine
   dauerhafte Beschriftung mehr (siehe Tooltip weiter unten) - bei den echten, teils eng
   beieinanderliegenden Koordinaten wuerden dauerhafte Labels an mehreren Stellen im Hegau
   ueberlappen (z. B. Hilzingen/Rielasingen-Worblingen/Gottmadingen/Singen liegen nur wenige
   Kartenpixel auseinander). Namen erscheinen daher grundsaetzlich nur im Tooltip bei Hover/Fokus. */
.beller-map-marker--major .beller-map-marker__dot { r: 7; }
.beller-map-marker--major .beller-map-marker__ring { r: 11; opacity: 0.45; }

/* HOVER/FOKUS: Marker waechst, oranger Glow. Der Ortsname erscheint NICHT mehr als SVG-Text
   neben dem Marker, sondern im mauszeiger-folgenden Tooltip (siehe unten) - dadurch nie
   abgeschnitten, auch nicht am Kartenrand. Marker sind echte <a>-Links (siehe
   einsatzgebiet-karte.php) - kein separater "aktiv"-Klick-Zustand mehr noetig. */
.beller-map-marker:hover .beller-map-marker__dot,
.beller-map-marker:focus-visible .beller-map-marker__dot {
	fill: var(--bb-accent);
	transform: scale(1.2);
}
.beller-map-marker:hover .beller-map-marker__ring,
.beller-map-marker:focus-visible .beller-map-marker__ring {
	stroke: var(--bb-accent);
	opacity: 0.7;
	r: 13;
	filter: drop-shadow(0 0 5px rgba(232, 89, 12, 0.6));
}

/* Sichtbarer Fokus zusaetzlich zu den o. g. Zustaenden (nicht nur Farbe, Barrierearmut) */
.beller-map-marker:focus-visible { outline: 3px solid var(--bb-accent); outline-offset: 3px; }

.beller-map-marker.is-dimmed { opacity: 0.25; }

/* Regionsfilter-Auswahl: Marker der gewaehlten Region werden zusaetzlich zum "nicht gedimmt"
   sichtbar umrandet (oranger Ring). Selektor bewusst zweiklassig, damit er auch die hoehere
   Spezifitaet von ".beller-map-marker--major .beller-map-marker__ring" zuverlaessig schlaegt. */
.beller-map-marker.is-region-active .beller-map-marker__ring {
	stroke: var(--bb-accent);
	opacity: 0.85;
	r: 12;
	filter: drop-shadow(0 0 4px rgba(232, 89, 12, 0.5));
}
.beller-map-marker.is-region-active .beller-map-marker__dot,
.beller-map-marker--hq.is-region-active .beller-map-marker__hq-square {
	fill: var(--bb-accent);
}

/* Standort-Marker (Allensbach): eigenes Quadrat-Symbol statt Punkt. */
.beller-map-marker__hq-square {
	fill: var(--bb-primary);
	stroke: #fff;
	stroke-width: 1.5;
	transition: transform .18s ease, fill .18s ease;
	transform-box: fill-box;
	transform-origin: center;
}
.beller-map-marker--hq:hover .beller-map-marker__hq-square,
.beller-map-marker--hq:focus-visible .beller-map-marker__hq-square {
	fill: var(--bb-accent);
	transform: scale(1.2);
}

/* ----- Tooltip: folgt dem Mauszeiger, ausschliesslich der Ortsname, blockiert den Zeiger
   nicht (pointer-events:none + Versatz), wird per JS innerhalb des Kartenbereichs geklemmt. ----- */
.beller-map-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	pointer-events: none;
	background: var(--bb-primary);
	color: #fff;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
	padding: 6px 12px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(2px);
	transition: opacity .12s ease, transform .12s ease;
}
.beller-map-tooltip:not([hidden]) { opacity: 1; transform: translateY(0); }

/* ----- Infobox rechts: statischer Hinweistext (Marker navigieren direkt, siehe
   einsatzgebiet-karte.php) ----- */
.beller-map-info h3 { color: #fff; margin: 0 0 10px; font-size: 1.15rem; }
.beller-map-info p { color: #dbe1ec; margin: 0; }

.beller-map-attribution { margin-top: 10px; font-size: 0.75rem; color: var(--bb-gray); }
.beller-map-attribution a { color: inherit; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.beller-map-marker__dot, .beller-map-marker__ring,
	.beller-map-marker__hq-square, .beller-map-filter, .beller-map-tooltip {
		transition: none;
	}
}

/* Mobil: die unsichtbare Klickflaeche vergroessern, da die Karte bei 780 SVG-Einheiten Breite
   auf einem 360-390px breiten Bildschirm stark verkleinert dargestellt wird (~0,42px je
   SVG-Einheit). r=16 statt 12 verbessert die Treffergenauigkeit beim Antippen spuerbar, bleibt
   aber unterhalb des kleinsten Marker-Abstands auf der Karte (~38 SVG-Einheiten, Reichenau/
   Allensbach), damit sich zwei Treffbereiche nicht ueberlappen. Volle 44px-Touch-Ziele (WCAG
   2.5.5) sind bei dieser Kartendichte auf so kleinen Bildschirmen physikalisch nicht ueberlappungs-
   frei erreichbar - siehe TESTPROTOKOLL.md fuer die Bewertung und einen Verbesserungsvorschlag. */
@media (max-width: 599px) {
	.beller-map-marker__hit { r: 16; }
}
/* ---------- Eingebettetes Bild im Fliesstext (Startseite, "Kernbohrgerät im Ueberkopf-Einsatz")
   ----------
   Das Bild lag bisher nur mit "max-width:100%" im Text - dadurch fuellte es die volle Breite der
   Textspalte (Portraitformat 3:4, 1200x1600px) und wirkte deutlich zu gross/unbearbeitet statt
   bewusst eingepasst. Jetzt als eigenstaendige, begrenzte Bildkarte im selben Kartensystem wie
   der Rest der Seite (Radius/Schatten/Rahmen aus den bb-Tokens), zentriert und auf eine ruhige,
   redaktionelle Groesse begrenzt statt auf voller Spaltenbreite. */
.bb-inline-figure {
	max-width: min(360px, 100%);
	margin: 32px auto 8px;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	overflow: hidden;
}
.bb-inline-figure img { display: block; width: 100%; height: auto; margin: 0; }
.bb-inline-figure figcaption {
	padding: 12px 16px;
	background: #fff;
	color: var(--bb-gray);
	font-size: 0.85rem;
	text-align: center;
}

/* ---------- Verbands-/Zertifikats-Logo im Fliesstext (Startseite, "Fachverband Betonbohren
   und -Saegen Deutschland e.V.") ----------
   Lag bisher mit "max-width:220px" im Text - bei einem breiten Signet (610x100px) war das
   Logo dadurch kaum noch lesbar. Groesser gesetzt (340px statt 220px), ohne Kartenrahmen/
   -schatten wie bei .bb-inline-figure, da ein Verbandslogo auf weissem Grund freistehend
   wirken soll statt in einer Bildkarte "eingesperrt" zu sein. */
.bb-logo-badge { max-width: min(340px, 100%); margin: 28px 0; }
.bb-logo-badge img { display: block; width: 100%; height: auto; }
.bb-logo-badge figcaption { font-size: 0.9rem; color: var(--bb-gray); margin-top: 8px; }

/* ---------- Startseite: Bild+Text nebeneinander ("Praezise Oeffnungen...", 2026-07-22) ----------
   Nutzt Divis eigene 1_2/1_2-Spaltenpreset (50/50, stapelt auf Mobil automatisch auf 100% -
   keine eigene Grid-/Flex-Logik noetig). Das Bild (Ueberkopf-Kernbohrung) ist dasselbe Motiv,
   das vorher klein in der Einleitung stand - hier bewusst groesser und mit Bezugstext daneben,
   damit es nicht mehr "dekorativ ohne Zusammenhang" wirkt. Bilddatei selbst unveraendert, nur
   die Darstellungsgroesse per CSS (object-fit) begrenzt, damit neben einem kurzen Textblock
   keine grosse leere Flaeche unter dem hochformatigen Foto entsteht. */
.bb-image-text-figure {
	margin: 0;
	border-radius: var(--bb-radius);
	overflow: hidden;
	box-shadow: var(--bb-shadow);
}
.bb-image-text-figure img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	object-position: center 30%;
}
@media (max-width: 980px) {
	.bb-image-text-figure img { max-height: 320px; }
}

/* ====================================================================================
   "Unsere Leistungen" (Seite-ID 10) – Editorial-Redesign 2026-07-22
   ====================================================================================
   Loest die vorherige, noch sehr "Divi-typische" Kartenoptik (getönter Hintergrund,
   farbiger linker Rahmenstreifen, gerahmte Bildkarte) durch eine ruhigere, gitterbasierte
   Komposition ab: kein Kastenhintergrund mehr, keine Kartenrahmen um die Bilder, Text und
   Bild teilen sich stattdessen eine gemeinsame Grundlinie (Bildoberkante = Ueberschrift-
   oberkante) und werden durch eine schmale Trennlinie (1px) zwischen den Bloecken statt
   durch Kaesten voneinander abgegrenzt.

   Scoping: wie bei der vorherigen Ueberarbeitung liefert diese Website CSS fuer alle
   Seiten aus einer gemeinsamen Datei aus - jede Regel hier ist daher zwingend mit
   ".page-id-10" (von body_class() ausschliesslich auf dieser Seite gesetzt) vorangestellt.
   Keine bestehende, seitenuebergreifend genutzte Basis-Klasse wird veraendert. */

/* ----- Block-Grundstruktur: kein Kasten mehr, nur Ausrichtung + einheitlicher Abstand.
   Trennung zwischen den Bloecken ueber eine einzelne Haarlinie (Gestaltgesetz der Naehe:
   Abstand + duenne Linie statt Flaeche/Kasten). ----- */
.page-id-10 .bb-lst-row.et_pb_row {
	display: flex;
	align-items: flex-start; /* Bildoberkante = Ueberschriftoberkante */
	padding-top: 44px;
	border-top: 1px solid var(--bb-border);
}
.page-id-10 .bb-lst-card--full {
	padding-top: 44px;
	border-top: 1px solid var(--bb-border);
}
/* Erster Leistungsblock (Kernbohrungen) ohne obere Trennlinie/Abstand - er folgt direkt auf
   die Prozessschritte, keine zusaetzliche Linie noetig. Bewusst ueber eine explizite
   Modifier-Klasse gesteuert (nicht ueber :nth-of-type-Positionsraten, da die genaue
   Divi-5-DOM-Verschachtelung der Sections nicht zuverlaessig bekannt ist). */
.page-id-10 .bb-lst-first.et_pb_row,
.page-id-10 .bb-lst-first.bb-lst-card--full {
	padding-top: 0;
	border-top: none;
}
.page-id-10 .bb-lst-card--text {
	padding-right: 28px;
}

.page-id-10 .bb-lst-card--text h2,
.page-id-10 .bb-lst-card--full h2 {
	margin: 0 0 14px;
	letter-spacing: 0.005em;
}
.page-id-10 .bb-lst-card--text p,
.page-id-10 .bb-lst-card--full p {
	line-height: 1.7;
	margin: 0 0 14px;
}
.page-id-10 .bb-lst-card--text p:last-of-type,
.page-id-10 .bb-lst-card--full p:last-of-type {
	margin-bottom: 0;
}
.page-id-10 .bb-lst-intro {
	font-family: var(--bb-font-heading);
	font-weight: 600;
	color: var(--bb-primary);
	line-height: 1.5;
	margin: 0 0 16px !important;
}

/* ----- Bilder: kein Kartenrahmen/-schatten mehr, feste, identische Seitenverhaeltnisse
   und Bildhoehe fuer alle Leistungsbilder dieser Seite. Bild wird Teil des Leistungs-
   blocks, nicht mehr eigenstaendige, umrahmte Komponente. ----- */
.page-id-10 .bb-lst-figure.bb-inline-figure {
	max-width: 100%;
	width: 100%;
	margin: 0 0 28px;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	overflow: hidden;
}
.page-id-10 .bb-lst-figure.bb-inline-figure:last-child {
	margin-bottom: 0;
}
.page-id-10 .bb-lst-figure.bb-inline-figure img {
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 4px;
	/* Sehr dezenter Tiefenschatten statt eines "UI-Karten"-Schattens - wirkt wie eine
	   hochwertige Fotoreproduktion, nicht wie ein Interface-Element. */
	box-shadow: 0 1px 3px rgba(20, 30, 50, 0.09);
}
/* Bildunterschrift: Titel + kurze Beschreibung, linksbuendig unter dem Bild, ohne eigene
   Kartenflaeche (loest die bisherige, weiss hinterlegte figcaption-Flaeche ab). */
.page-id-10 .bb-lst-figure figcaption {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
	padding: 14px 0 0;
	background: none;
}
.page-id-10 .bb-lst-figcaption-title {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-primary);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
}
.page-id-10 .bb-lst-figcaption-desc {
	color: var(--bb-gray);
	font-size: 0.86rem;
	line-height: 1.45;
}

/* ----- Feature-Liste statt klassischer Bulletpoints: Haken (Akzentfarbe) + Titel +
   Beschreibung, sauberer vertikaler Rhythmus (identischer Abstand zwischen den Punkten). ----- */
.page-id-10 .bb-lst-list {
	list-style: none;
	margin: 4px 0 18px;
	padding: 0;
}
.page-id-10 .bb-lst-list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 15px;
}
.page-id-10 .bb-lst-list li:last-child {
	margin-bottom: 0;
}
.page-id-10 .bb-lst-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--bb-accent);
	font-weight: 800;
	font-size: 0.92em;
}
.page-id-10 .bb-lst-list-title {
	display: block;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-primary);
	line-height: 1.4;
}
.page-id-10 .bb-lst-list-desc {
	display: block;
	color: var(--bb-text);
	font-size: 0.93em;
	line-height: 1.5;
}

/* ----- CTA: kleiner Text-Link mit Pfeil, gehoert optisch zum Block (kein Button, keine
   neue Flaeche), einheitlicher Abstand zum vorherigen Element in allen Bloecken. ----- */
.page-id-10 .bb-lst-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 22px;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	color: var(--bb-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 106, 33, 0.35);
	padding-bottom: 2px;
	transition: color .15s ease, border-color .15s ease;
}
.page-id-10 .bb-lst-cta:hover {
	color: var(--bb-accent-dark);
	border-color: var(--bb-accent-dark);
}
.page-id-10 .bb-lst-cta span {
	display: inline-block;
	transition: transform .15s ease;
}
.page-id-10 .bb-lst-cta:hover span {
	transform: translateX(3px);
}

/* ----- Responsive: Divis native Spaltenstapelung (3_5/2_5 -> je 100%) bleibt aktiv.
   Reihenfolge im Quellcode ist Text vor Bild, dadurch auf Mobil automatisch Text oben,
   Bild darunter, Bildunterschrift direkt anschliessend, CTA am Blockende - exakt die
   geforderte Lesereihenfolge. Nur Abstaende/Bildhoehe fuer die schmalere Darstellung
   angepasst. ----- */
@media (max-width: 980px) {
	.page-id-10 .bb-lst-row.et_pb_row {
		display: block;
	}
	.page-id-10 .bb-lst-card--text {
		padding-right: 0;
		margin-bottom: 26px;
	}
	.page-id-10 .bb-lst-figure.bb-inline-figure img {
		aspect-ratio: 16 / 10;
	}
}
@media (max-width: 479px) {
	.page-id-10 .bb-lst-figure.bb-inline-figure img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Mehrere Bilder nebeneinander im Fliesstext (z. B. Ortsseiten: Kernbohrung +
   Betonsaegen + Andrej Beller als Beispielfotos nebeneinander statt untereinander).
   Generische, seitenuebergreifend nutzbare Wrapper-Klasse - reine Anordnung, keine neue
   Bildkarten-Optik (nutzt weiterhin die bestehende .bb-inline-figure fuer Rahmen/Radius/
   Schatten/Bildunterschrift). Einheitliches Seitenverhaeltnis fuer alle Bilder in dieser Reihe
   noetig, da das Portraitfoto (718x1600, sehr hochformatig) sonst deutlich hoeher als die
   beiden Arbeitsfotos (jeweils ca. 3:4) waere. */
.bb-figure-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 28px 0 8px;
}
.bb-figure-row .bb-inline-figure {
	margin: 0;
	flex: 1 1 260px;
	max-width: 320px;
}
.bb-figure-row .bb-inline-figure img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 20%;
}

/* ---------- Blog-Uebersicht (neuer, von FAQ getrennter Bereich) ---------- */
.bb-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 28px 0 8px; }
@media (max-width: 899px) { .bb-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .bb-blog-grid { grid-template-columns: 1fr; } }
.bb-blog-grid .bb-card { height: auto; }

/* ---------- Rezensionen (Besucher-Bewertungen) ---------- */
.bb-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0; }
@media (max-width: 899px) { .bb-review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .bb-review-grid { grid-template-columns: 1fr; } }
.bb-review-card { display: flex; flex-direction: column; gap: 10px; }
.bb-review-stars { color: var(--bb-accent); font-size: 1.1rem; letter-spacing: 2px; }
.bb-review-text { color: var(--bb-text); font-size: 0.95rem; line-height: 1.6; margin: 0; flex-grow: 1; }
.bb-review-author { margin: 0; font-family: var(--bb-font-heading); font-weight: 700; color: var(--bb-primary); font-size: 0.9rem; }

/* ---------- "Unsere Leistungen": Ablauf-Sektion als klar erkennbare Schritt-Kette
   (Kontakt -> Terminvereinbarung -> Planung -> Umsetzung), 2026-07-23. Vorher vier optisch
   gleichwertige, unverbundene Karten ohne erkennbare Reihenfolge. Nummern-Badges (1-4) sind das
   primaere Ordnungssignal und funktionieren unabhaengig vom Viewport, auch wenn Divi die vier
   Spalten auf schmalen Bildschirmen untereinander stapelt. Die verbindende Linie zwischen den
   Icon-Kreisen wird bewusst nur ab 981px eingeblendet (Divis eigener Tablet-Breakpoint, siehe
   wp-content/themes/Divi/style.min.css) - gestapelt ergaebe eine horizontale Linie keinen Sinn.
   Klassische CSS-Stepper-Technik: pro Schritt je eine halbe Linie nach links/rechts bis zur
   Icon-Kante, dadurch entsteht ueber alle vier Spalten hinweg eine durchgehende Kette,
   unabhaengig von der exakten Spaltenbreite. */
.bb-ablauf-step { position: relative; }
.bb-ablauf-icon {
	position: relative;
	z-index: 1;
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--bb-surface-alt);
	border: 2px solid var(--bb-border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-ablauf-number {
	position: absolute;
	z-index: 2;
	top: -4px;
	left: calc(50% + 20px);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--bb-accent);
	color: #fff;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 26px;
	text-align: center;
	box-shadow: var(--bb-shadow);
}
@media (min-width: 981px) {
	.bb-ablauf-step::before,
	.bb-ablauf-step::after {
		content: "";
		position: absolute;
		top: 42px;
		height: 2px;
		width: calc(50% - 42px);
		background: var(--bb-border);
		z-index: 0;
	}
	.bb-ablauf-step::before { left: 0; }
	.bb-ablauf-step::after { right: 0; }
	.bb-ablauf-row .et_pb_column_1_4:first-child .bb-ablauf-step::before { display: none; }
	.bb-ablauf-row .et_pb_column_1_4:last-child .bb-ablauf-step::after { display: none; }
}

/* ---------- Startseite: Hero-Textblock nach rechts verschoben, 2026-07-23 ----------
   Hintergrund (Bild, Overlay-Gradient, background-position/-size, Sektionshoehe) bleibt
   vollstaendig unangetastet - der wird ausschliesslich ueber die eigenen Divi-Modul-Attribute
   (background_image/background_position/background_size/custom_css_main_element) gesteuert,
   hier nicht veraendert. Grund der Verschiebung: der Textblock lag teilweise ueber dem
   Bohrloch im Hero-Foto (zentrales Gestaltungselement, siehe Betreiber-Feedback).
   Korrektur (2026-07-23, zweiter Anlauf): Divis eigene, modulspezifische Regel
   ".et_pb_fullwidth_header .et_pb_fullwidth_header_container.left .header-content"
   (Spezifitaet 4 Klassen) setzt "margin-left:0" und gewann bisher gegen die hier gesetzte
   Regel (nur 2 Klassen) - der Text hat sich dadurch beim ersten Versuch sichtbar gar nicht
   bewegt. "!important" ist hier notwendig, um diese spezifischere Divi-Kernregel zuverlaessig
   zu ueberschreiben - exakt dasselbe Muster wie bereits bei den Leistungs-Karten
   (siehe ".beller-leistung-card:hover > div" weiter oben in dieser Datei) begruendet.
   content_max_width=560px war entgegen einer fruehen Fehleinschaetzung tatsaechlich bereits
   ueber eine modul-ID-spezifische Divi-Regel aktiv (nur in einer damals veralteten
   et-cache-Datei nicht sichtbar) - die max-width-Deklaration hier ist daher nur zur
   Konsistenz/Robustheit gegen Cache-Stand explizit mitgesetzt, nicht die eigentliche Ursache. */
.bb-hero .header-content {
	max-width: 460px !important;
	margin-left: -30px !important;
}
@media (max-width: 1300px) {
	.bb-hero .header-content { max-width: 420px !important; margin-left: -20px !important; }
}
@media (max-width: 899px) {
	.bb-hero .header-content { max-width: 360px !important; margin-left: -10px !important; }
}
@media (max-width: 599px) {
	/* Bohrung bei diesem Bildzuschnitt auf Mobil-Breite ohnehin nicht mehr das dominante
	   Bildelement (background-size:cover schneidet auf schmalen/hohen Viewports stark zu) -
	   Text daher wieder ohne Rechts-Versatz, volle verfuegbare Breite fuer beste Lesbarkeit. */
	.bb-hero .header-content { max-width: 100% !important; margin-left: 0 !important; }
}