/* =========================================================================
   BTG Betonwerk – Child-Theme-CSS
   Ergänzt die Avada Global Options. Die Klassen (btg-…) werden im Avada
   Builder über das Feld „CSS Class“ an Container, Spalten und Elemente vergeben.
   ========================================================================= */

:root {
	/* Werte kommen aus der Avada Global Color Palette (Global Options → Colors); hier nur Aliasse */
	--btg-beton: var(--awb-custom15, #e4e2dd);
	--btg-beton-2: var(--awb-custom16, #d9d6cf);
	--btg-schalung: var(--awb-color1, #ffffff);
	--btg-nacht: var(--awb-custom18, #0e1f31);
	--btg-tiefbau: var(--awb-color7, #0058b1);
	--btg-rost: var(--awb-custom20, #b4441b);
	--btg-rost-hell: var(--awb-custom21, #e0703f);
	--btg-stahl: var(--awb-custom22, #46453f);
	--btg-stahl-2: var(--awb-custom23, #6e6c64);
	--btg-linie: var(--awb-custom17, #c6c2b8);
}


/* ---------- Bestand ---------- */

.wps-form { width: 100%; margin: 0 auto; }
.wps-form-row { display: flex; flex-direction: column; width: 100%; }
.wps-form-row .wpcf7-form-control { width: 100%; }
.wps-form-column { flex: 1; padding: 0.5rem 0; width: 100%; }
@media only screen and (min-width: 48em) {
	.wps-form-row { flex-direction: row; }
	.wps-form-column { padding: 0.5rem 1rem; }
}
/* Footermenü: eine Zeile ohne Avadas Winkelzeichen, gleichmäßige Abstände, aktive Seite weiß */
.fusion-footer-widget-area .widget_nav_menu ul.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.fusion-footer-widget-area .widget_nav_menu ul.menu li { display: block; margin: 0; padding: 0; border: 0; background: none; }
.fusion-footer-widget-area .widget_nav_menu ul.menu li a { display: inline-block; padding: 0; font-size: 0.9rem; line-height: 1.6; color: #93a4b3; text-decoration: none; }
.fusion-footer-widget-area .widget_nav_menu ul.menu li a::before { display: none; content: none; }
.fusion-footer-widget-area .widget_nav_menu ul.menu li a:hover { color: #fff; }
.fusion-footer-widget-area .widget_nav_menu ul.menu li.current-menu-item > a { color: #fff !important; box-shadow: inset 0 -1px var(--btg-rost-hell); }
/* Copyright schmal, Menü breit – damit die fünf Punkte in einer Zeile stehen */
@media (min-width: 801px) {
	.fusion-footer-widget-area .fusion-columns-2 > .fusion-column:first-child { width: 32%; }
	.fusion-footer-widget-area .fusion-columns-2 > .fusion-column.fusion-column-last { width: 68%; }
}
.fusion-footer-widget-area .widget_custom_html { color: #93a4b3; font-size: 0.9rem; }
@media (max-width: 800px) {
	.fusion-footer-widget-area .widget_nav_menu ul.menu { justify-content: flex-start; gap: 4px 22px; }
	.fusion-footer-widget-area .widget_nav_menu { text-align: left !important; }
}
h1, h2, h3, h4, h5, h6 { word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

/* ---------- Grundbausteine ---------- */

/* Rubrikzeile über Überschriften: „Produktionsbereich“, „Planung“, „Das Werk“ … */
.btg-rubrik,
.btg-rubrik h1, .btg-rubrik h2, .btg-rubrik h3, .btg-rubrik h4, .btg-rubrik h5, .btg-rubrik h6, .btg-rubrik p {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--btg-rost);
	line-height: 1.4;
	margin: 0 0 0.9em;
	hyphens: none;
}
.btg-rubrik.btg-hell, .btg-rubrik.btg-hell * { color: var(--btg-rost-hell); }

/* Roboto Mono für Wege und Kleintext: Brotkrumen, Links „Zum Element →“ */
.btg-mono, .btg-mono a, .btg-mono p { font-size: 0.78rem; letter-spacing: 0.05em; hyphens: none; }
.btg-mono a { color: var(--btg-tiefbau); text-decoration: none; }

/* Betonschraffur: 45°, Zeichnungskonvention für Beton im Schnitt.
   Fläche für Karten ohne Foto. */
.btg-schraffur {
	background-color: var(--btg-beton-2);
	background-image: repeating-linear-gradient(45deg, transparent 0 7px, rgba(70, 69, 63, 0.13) 7px 8px);
}

/* Weiße, umrandete Fläche (Karten, Detailkopf) */
.btg-flaeche {
	background: var(--btg-schalung);
	border: 1px solid var(--btg-linie);
}

/* Dunkler Block (Hero, Anfrage, Formular) */
.btg-nacht { background-color: var(--btg-nacht); color: #c9d3dc; }
.btg-nacht h1, .btg-nacht h2, .btg-nacht h3, .btg-nacht h4 { color: #fff; }
.btg-nacht p { color: #a9b8c6; }

/* Hilfsklassen */
.btg-fliesstext p { color: var(--btg-stahl-2); }
.btg-ohne-abstand p:last-child { margin-bottom: 0; }

/* ---------- Startseite ---------- */

/* Hero: Container mit Hintergrundbild, Verlauf von links für die Lesbarkeit */
.btg-hero { position: relative; overflow: hidden; }
.btg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(14, 31, 49, 0.88) 0%, rgba(14, 31, 49, 0.7) 38%, rgba(14, 31, 49, 0.2) 75%, rgba(14, 31, 49, 0.05) 100%);
}
.btg-hero > .fusion-builder-row { position: relative; z-index: 1; }
.btg-hero-claim, .btg-hero-claim * {
	font-size: clamp(1.4rem, 3vw, 2rem);
	letter-spacing: -0.015em;
	line-height: 1.05;
	color: #8fc0ee;
	margin: 0 0 0.5em;
}
.btg-hero h1 { color: #fff; max-width: 17ch; }
.btg-hero .btg-hero-sub p { color: #b7c4d0; font-size: 1.1rem; max-width: 58ch; }
.btg-hero .btg-hero-sub em { font-style: normal; font-weight: 500; color: var(--btg-rost-hell); }
.btg-hero-fakten, .btg-hero-fakten p {
	font-size: 0.76rem;
	color: #8da0b0;
	letter-spacing: 0.03em;
	border-top: 1px solid #24384b;
	padding-top: 1em;
	margin: 0;
}

/* Bereichskarten schieben sich in den Hero */
.btg-bereiche { position: relative; z-index: 2; margin-top: -76px; }
/* Fläche und Rahmen der Bereichskarte liegen auf .fusion-column-wrapper (siehe Startseite unten) */
.btg-karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.btg-karte h3 { font-size: 1.15rem; margin: 0 0 0.4em; }
.btg-karte p { font-size: 0.95rem; color: var(--btg-stahl-2); line-height: 1.55; margin: 0 0 0.8em; }
@media (max-width: 800px) { .btg-bereiche { margin-top: -40px; } }

/* Leistungen: Karten wie die Bereichskarten – Fläche, Rahmen, Spaltenabstand und Stretch sind
   Avada-Spalten-/Container-Optionen. Variante B (2 je Zeile) = Spaltentyp 1_2 statt 1_4. */
.btg-leistungen .btg-leistung h3 { font-size: 1.02rem; line-height: 1.24; }
.btg-leistungen .btg-leistung p { font-size: 0.85rem; line-height: 1.55; }
.btg-leistungen .btg-leistung .btg-rubrik p { font-size: 0.68rem; }
.btg-leistungen .btg-leistung .btg-leistung-link { margin-top: auto; padding-top: 12px; }

/* ---------- Übersichtskarten (Post Cards) ---------- */
/* Die Spalte der Post-Card-Vorlage ist die Karte (Avada macht daraus das <li>).
   Das Raster kommt aus CSS statt aus Avadas Isotope – kein Layoutsprung, gleiche Kartenhöhen. */
/* Gleiche Kartenhöhen kommen von Avada selbst: Post Cards → „Post Card Alignment: Stretch“
   (flex_align_items="stretch"). Hier nur: Karte füllt ihren Stretch-Container aus. */

.btg-element-karte.post-card > .fusion-column-wrapper {
	background: var(--btg-schalung);
	border: 1px solid var(--btg-linie);
	transition: transform 0.18s ease, border-color 0.18s ease;
}
.btg-element-karte.post-card:hover > .fusion-column-wrapper { transform: translateY(-3px); border-color: var(--btg-nacht); }
/* Bildfeld: Schraffur liegt unter dem Bild, greift ohne Beitragsbild automatisch */
.btg-element-karte .btg-element-bild {
	aspect-ratio: 4 / 3;
	flex: 0 0 auto; /* darf in der Flex-Spalte nicht schrumpfen */
	overflow: hidden;
	margin: 0;
	border-bottom: 1px solid var(--btg-linie);
	background-color: var(--btg-beton-2);
	background-image: repeating-linear-gradient(45deg, transparent 0 7px, rgba(70, 69, 63, 0.13) 7px 8px);
}
.btg-element-karte .btg-element-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btg-element-karte .btg-element-bild a, .btg-element-karte .btg-element-bild .fusion-image-wrapper { display: block; height: 100%; }
.btg-element-karte .btg-element-bild .fusion-placeholder-image { display: none; } /* Avadas grauer Platzhalter – die Schraffur übernimmt */
/* Avadas Stretch-Regel für die innere Zeile greift nur, wenn sie das einzige div in der Karte ist;
   hier steht das Bild davor, daher dieselbe Regel (flex: 1) mit weiterem Selektor. */
.btg-elemente .fusion-flex-align-items-stretch > .btg-element-karte > .fusion-column-wrapper > .fusion-builder-row-inner { flex: 1; }
.btg-element-karte .btg-element-body > .fusion-column-wrapper { display: flex; flex-direction: column; height: 100%; }
.btg-element-karte h3 { font-size: 1.05rem; line-height: 1.25; margin: 0; }
.btg-element-karte .btg-element-text p { font-size: 0.9rem; color: var(--btg-stahl-2); line-height: 1.55; }
.btg-element-karte .btg-element-go { margin-top: auto !important; padding-top: 0.8em; border-top: 1px solid var(--btg-linie); }
.btg-element-karte .btg-element-go h6 { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; margin: 0; }
.btg-element-karte .btg-element-go p { color: var(--btg-tiefbau); margin: 0; }

/* ---------- Detailseite Element ---------- */

.btg-crumb, .btg-crumb .fusion-breadcrumbs, .btg-crumb a, .btg-crumb span {
	font-size: 0.78rem;
	color: var(--btg-stahl-2);
	letter-spacing: 0.03em;
}
.btg-crumb .breadcrumb-leaf { color: var(--btg-stahl); }
.btg-detail-kopf h1 { font-size: clamp(1.7rem, 3.5vw, 2.2rem); margin: 0 0 0.4em; }
.btg-detail-kopf .btg-einleitung p { font-size: 1.05rem; line-height: 1.6; max-width: 58ch; }
.btg-detail-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--btg-linie); }
.btg-detail-text h2 { font-size: 1.3rem; }
.btg-detail-text p { max-width: 68ch; }
/* Bildleiste: Raster, Seitenverhältnis 4:3 und Rahmen kommen aus dem Avada-Galerie-Element */
.btg-bildleiste.fusion-gallery { margin-top: 10px; }

/* Anfrageformular auf dunklem Grund */
.btg-detail-form .wps-form-column label {
	font-size: 0.7rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #8da0b0;
	display: block;
	margin-bottom: 0.35em;
}
.btg-detail-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	width: 100%;
	background: #16293c;
	border: 1px solid #2a4058;
	color: #fff;
	border-radius: 3px;
	padding: 0.45em 0.7em;
	font-size: 0.95rem;
	min-height: 38px;
	height: 38px;
}
.btg-detail-form .wps-form-column .wpcf7-form-control.wpcf7-textarea { height: 96px; min-height: 96px; }
.btg-detail-form .wpcf7-form-control:focus { outline: 2px solid var(--btg-rost-hell); outline-offset: 2px; }
.btg-detail-form .wpcf7-form-control-wrap { display: block; margin-bottom: 1em; }
.btg-detail-form .wpcf7-file { padding: 0.4em 0; }
.btg-detail-form .wpcf7-not-valid-tip { color: var(--btg-rost-hell); font-size: 0.85rem; }
.btg-detail-form .wpcf7-response-output { border-color: var(--btg-rost-hell); color: #fff; margin: 1em 0 0; }
.btg-detail-form .wpcf7-acceptance { font-size: 0.85rem; line-height: 1.5; color: #a9b8c6; }
.btg-detail-form .wpcf7-acceptance a { color: #fff; }
.btg-detail-form .wpcf7-list-item { margin: 0; }
.btg-zurueck { margin-top: 24px !important; }
.btg-detail-form .btg-bezug {
	font-size: 0.76rem;
	color: var(--btg-rost-hell);
	border-top: 1px solid #24384b;
	padding-top: 0.8em;
	margin-top: 1em;
}
.btg-detail-form .btg-bezug p { color: var(--btg-rost-hell); margin: 0; }

/* ---------- Sparten ohne Detailseiten (Zisternen, Klärtechnik) ---------- */

.btg-produkt h2 { font-size: 1.4rem; margin: 0 0 0.5em; }
.btg-produkt p { max-width: 62ch; }
.btg-produkt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--btg-linie); }
.btg-produkt .btg-produkt-leer > .fusion-column-wrapper { aspect-ratio: 4 / 3; border: 1px solid var(--btg-linie); }
.btg-produkt .btg-download { margin-top: 14px; }
.btg-cta .fusion-button { margin: 0; }
@media (max-width: 800px) { .btg-produkt .btg-produkt-leer { display: none !important; } }

/* Startseite – Feinheiten zu den Klassen oben */
.btg-hero.fusion-fullwidth { background-color: var(--btg-nacht); }
.btg-hero .fusion-title h1 { color: #fff; max-width: 26ch; hyphens: manual; }
.btg-bereiche.fusion-fullwidth { margin-top: -76px !important; overflow: visible; }
.btg-bereiche.fusion-fullwidth > .fusion-builder-row { align-items: stretch !important; }
.btg-karte { display: flex; }
.btg-karte > .fusion-column-wrapper { background: var(--btg-schalung); border: 1px solid var(--btg-linie); height: 100%; transition: transform 0.18s ease, border-color 0.18s ease; }
.btg-karte:hover > .fusion-column-wrapper { transform: translateY(-3px); border-color: var(--btg-nacht); }
.btg-karte .fusion-imageframe { display: block; }
.btg-karte .fusion-imageframe img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.btg-karte h3 a { color: var(--btg-nacht); }
.btg-werk .btg-werk-rechts { border-left: 1px solid var(--btg-linie); }
@media (max-width: 1024px) { .btg-werk .btg-werk-rechts { border-left: none; } }

/* ---------- Kopfbereich (Avada Header v3) an den Entwurf angleichen ---------- */

.fusion-header-wrapper .fusion-secondary-header { font-size: 12px; border-bottom: 1px solid var(--btg-linie); }
.fusion-header-wrapper .fusion-secondary-header .fusion-contact-info { letter-spacing: 0.02em; }
.fusion-header-wrapper .fusion-header { border-bottom: 1px solid var(--btg-linie); }
.fusion-logo img { max-height: 44px; width: auto; }
.fusion-main-menu > ul > li > a { letter-spacing: 0; }
/* Aktiver Menüpunkt: blau, Rost-Unterstrich – wie im Entwurf */
.fusion-main-menu > ul > li.current-menu-item > a,
.fusion-main-menu > ul > li.current_page_item > a,
.fusion-main-menu > ul > li.current-menu-ancestor > a { color: var(--btg-tiefbau); }
.fusion-main-menu > ul > li.current-menu-item > a > .menu-text,
.fusion-main-menu > ul > li.current_page_item > a > .menu-text,
.fusion-main-menu > ul > li.current-menu-ancestor > a > .menu-text { box-shadow: inset 0 -2px var(--btg-rost); padding-bottom: 2px; }
.fusion-main-menu > ul > li > a .fusion-menu-highlight-bar { display: none; }

/* ---------- Maßstab des Entwurfs ---------- */

/* Startseite */
.btg-hero .fusion-title h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.03; letter-spacing: -0.022em; }
.btg-hero .btg-hero-sub p { font-size: 1.05rem; }
.btg-hero-claim, .btg-hero-claim * { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.btg-hero::before { background: linear-gradient(90deg, rgba(14, 31, 49, 0.9) 0%, rgba(14, 31, 49, 0.72) 40%, rgba(14, 31, 49, 0.4) 75%, rgba(14, 31, 49, 0.3) 100%); }
.btg-karte h3 { font-size: 1.04rem; line-height: 1.2; }
.btg-karte p { font-size: 0.85rem; line-height: 1.5; }
.btg-karte .btg-mono a { font-size: 0.72rem; }
.btg-leistungen-titel h2, .btg-werk h2 { font-size: 1.62rem; letter-spacing: -0.015em; }
.btg-werk p, .btg-cta p { font-size: 0.95rem; }
.btg-cta h2 { font-size: 1.45rem; }

/* Übersicht */
.btg-sparte-kopf h1 { font-size: clamp(1.7rem, 3.4vw, 2.15rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; }
.btg-sparte-kopf .btg-sparte-intro p { max-width: 56ch; }
.btg-element-karte h3 { font-size: 1rem; }
.btg-element-karte .btg-element-text p { font-size: 0.85rem; }

/* Detailseite */
.btg-detail-crumb.fusion-fullwidth { margin-bottom: 34px !important; }
.btg-detail-kopf h1 { font-size: 2rem; line-height: 1.08; }
.btg-detail-kopf .btg-einleitung p { font-size: 1rem; }
.btg-detail-text h2 { font-size: 1.2rem; }
.btg-detail-text p { font-size: 0.93rem; line-height: 1.68; }
.btg-zurueck a { display: inline-block; border: 1px solid var(--btg-linie); padding: 8px 13px; font-size: 0.76rem; }
.btg-zurueck a:hover { border-color: var(--btg-nacht); }
.btg-bildleiste.fusion-gallery:empty, .btg-bildleiste.fusion-gallery:not(:has(img)) { display: none !important; }
.btg-detail-form h2 { font-size: 1.32rem; }
.btg-detail-form p { font-size: 0.9rem; }

/* Sparten-Einzelseiten */
.btg-produkt h2 { font-size: 1.3rem; }
.btg-produkt p { font-size: 0.95rem; }

/* Seiten mit eigenem Aufbau: kein globaler Innenabstand von #main (8 %), die Container bringen ihren mit */
.single-btg_element #main, .page-id-1024 #main, .page-id-1042 #main, .page-id-1078 #main, .page-id-1096 #main { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page #main { padding-top: 0 !important; } /* alle Seiten haben den eigenen Kopf-Container */
.btg-detail-crumb.fusion-fullwidth { margin-top: 0 !important; }
.btg-leistung h3, .btg-karte h3, .btg-element-karte h3, .btg-produkt h2 { hyphens: manual; }

/* ---------- Detailseite: Karten (Kopf, Beschreibung, Formular) ----------
   Fläche, Rahmen und Innenabstand liegen auf der äußeren Spalte (Avada-Spaltenoptionen);
   die Container bleiben transparent. Hier nur der Spaltenabstand im Kopf und mobile Feinheiten. */
.btg-detail-form.fusion-fullwidth { margin-bottom: 0 !important; }
.btg-detail-karte .fusion-builder-row-inner > .fusion_builder_column_inner + .fusion_builder_column_inner > .fusion-column-wrapper { padding-left: 30px; }
@media (max-width: 800px) {
	.btg-detail-karte .fusion-builder-row-inner > .fusion_builder_column_inner + .fusion_builder_column_inner > .fusion-column-wrapper { padding-left: 0; padding-top: 20px; }
	.btg-detail-kopf .btg-detail-bild { max-width: 260px; }
}


/* Kachel ohne Detailseite: kein Ziel, also kein Hinweis und kein Hover-Effekt */
.btg-element-karte.btg-ohne-detail .btg-element-go { display: none; }
.btg-element-karte.btg-ohne-detail:hover > .fusion-column-wrapper { transform: none; border-color: var(--btg-linie); }