/* ----------------------------------------------------------------
	Canvas: BLITZ4YOU
	Bereichs-Theme für blitz4you.at - wird NACH demos/css4you/css4you.css
	geladen und überschreibt nur Farbe + bereichsspezifische Bausteine.
	Header, Utility-Bar, Bereichsauswahl, FAQ, Referenzraster usw.
	kommen unverändert aus dem gemeinsamen css4you.css.
-----------------------------------------------------------------*/

:root {
	/* Bereichsfarbe BLITZ4YOU (aus dem Bereichs-Icon ausgelesen, siehe --c4y-blitz4you) */
	--cnvs-themecolor: #fcd808;
	--cnvs-themecolor-rgb: 252, 216, 8;

	/* Text auf Bereichsfarbe (Farbbalken, Buttons, Leiste): bei Gelb ist Weiß nicht lesbar,
	   daher dunkle Schrift (siehe README-Marken-Vorlage, Abschnitt 3). */
	--bz-ink: #2b2c2e;
	--bz-on-brand: var(--bz-ink);

	/* Reines Markengelb ist als Text/Icon auf Weiß kaum lesbar (Kontrast). Für Links, Menü-Hover,
	   Icons und Kennzeichnungen daher ein dunkles Gold statt des reinen Bereichsgelb.
	   Kontrast gegen Weiß: 4.9:1 (WCAG AA für Fließtext bestanden). */
	--bz-orange-strong: #8a6d00;
	--bz-link: #8a6d00;

	--bz-gray: #636466;
	--bz-gray-dark: #4f5052;

	/* Header-Höhe = tatsächliche Höhe der Menüzeile (siehe #header-wrap .header-row unten) */
	--cnvs-header-height-sm: 100px;

	--cnvs-link-color: var(--bz-link);
	--cnvs-primary-menu-hover-color: var(--bz-link);
	--cnvs-primary-menu-active-color: var(--bz-link);
}

/* ---------- Header-Höhe korrigieren ----------
   Das Theme rechnet ab Desktop-Breite (>1300px) mit einer Header-Höhe von 60px, die
   Menüzeile war durch das Padding aus css4you.css aber 100px hoch. Folge: Die Menüzeile
   lag 40px über dem Seiteninhalt und schnitt bei den Farbbalken die Überschrift oben ab.
   Jetzt: Höhe 100px über die Variable, Padding entfällt (Logo bleibt mittig). */
@media (min-width: 1301px) {
	#header-wrap .header-row { padding: 0; }
}

/* ---------- Buttons ---------- */
.button:not(.button-border):not(.button-light):not(.button-dark) {
	color: var(--bz-on-brand);
	font-weight: 600;
}
.button:not(.button-border):not(.button-light):not(.button-dark):hover {
	color: #fff;
}
.button.button-border.button-light:hover {
	color: var(--bz-ink);
}
/* Kontur-Button auf Orange-Flächen: weiße Kontur, beim Hover weiß gefüllt */
.bz-btn-outline {
	background: transparent !important;
	border: 2px solid #fff !important;
	color: #fff !important;
	font-weight: 600;
}
.bz-btn-outline:hover {
	background: #fff !important;
	color: var(--bz-ink) !important;
}

/* ---------- Brand-Leiste, Farbbalken: dunkle Schrift auf Orange ---------- */
.c4y-brand-strip-msg { color: var(--bz-on-brand); }
.c4y-green-bar-title { color: var(--bz-on-brand); }
.c4y-green-bar p { color: var(--bz-on-brand) !important; }

/* ---------- Hauptmenü: aktive/Hover-Farbe lesbar (dunkleres Orange) ---------- */
.primary-menu .menu-item.current > .menu-link,
.primary-menu .menu-item:hover > .menu-link,
.primary-menu .menu-item.current:hover > .menu-link {
	color: var(--bz-link);
}

/* ---------- Untermenü: Hover-Farbe neutral statt Bereichsfarben-Reihenfolge des Hubs ---------- */
.c4y-submenu.bz-submenu .menu-item:nth-child(n) .menu-link:hover {
	color: var(--bz-link);
}
.c4y-submenu.bz-submenu .menu-link { gap: 12px; }
.c4y-submenu.bz-submenu .menu-link i {
	font-size: 20px;
	line-height: 1;
	width: 22px;
	text-align: center;
	color: var(--bz-link);
	flex-shrink: 0;
}

/* Menü-Hover/Aktiv: reines Markengelb ist als Schriftfarbe auf Weiß kaum lesbar (siehe --bz-link
   weiter oben) – eine schwarze Kontur um gelbe Schrift sieht unruhig aus. Sauberer: Schrift bleibt
   in der normalen dunklen Menüfarbe, Gelb kommt als kräftige Unterstreichung darunter zum Einsatz. */
#header .menu-item:hover > .menu-link > div,
#header .menu-item.current > .menu-link > div {
	color: var(--bz-ink);
	box-shadow: inset 0 -3px 0 0 var(--cnvs-themecolor);
	padding-bottom: 4px;
	width: fit-content; /* sonst zieht sich die Linie im Burger-Menü über die ganze Zeilenbreite */
}
#header .c4y-submenu .menu-item:hover > .menu-link > div {
	box-shadow: none;
	padding-bottom: 0;
}
#header .c4y-submenu .menu-item:hover > .menu-link i {
	color: var(--cnvs-themecolor);
}
/* Keine Zeilenumbrüche und keine Schriftgewicht-Änderung beim Hover (Text "sprang" in die nächste Zeile) */
.c4y-submenu.bz-submenu .menu-link,
.c4y-submenu.bz-submenu .menu-link:hover,
.c4y-submenu.bz-submenu .menu-item:hover > .menu-link {
	white-space: nowrap;
	font-weight: 600;
}
@media (min-width: 992px) {
	.primary-menu .menu-container .c4y-submenu.bz-submenu {
		width: max-content !important;
		min-width: 0 !important;
	}
}

/* ---------- Links im Inhalt ---------- */
#content p a:not(.button),
#content li a:not(.button),
#content td a:not(.button),
#content .heading-block span a {
	color: var(--bz-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
#content p a:not(.button):hover,
#content li a:not(.button):hover,
#content td a:not(.button):hover {
	color: var(--bz-ink);
}

/* ---------- Hero ---------- */
.bz-hero {
	position: relative;
	margin: 0;
	padding-top: 190px;
	padding-bottom: 170px;
	background: #2f3032 url("../images/blitz4you/blitz-hero.jpg") center 32% / cover no-repeat;
	overflow: hidden;
}
.bz-hero::before {
	/* Abdunkelung für die Lesbarkeit der weißen Schrift */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.42) 100%);
}
.bz-hero .container { position: relative; z-index: 2; }
.bz-hero-kicker {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.bz-hero h1 {
	color: #fff;
	font-weight: 800;
	font-size: clamp(1.9rem, 5vw + 0.8rem, 3.4rem);
	margin: 14px 0 0;
	line-height: 1.2;
}
.bz-hero-ways {
	color: var(--cnvs-themecolor);
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw + 0.5rem, 1.35rem);
	letter-spacing: 0.4px;
	margin: 22px 0 0;
}
.bz-hero-text {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.15rem;
	max-width: 640px;
	margin: 12px auto 32px;
}

/* ---------- Übertragungswege (Raster mit Haarlinien wie im Referenzraster) ---------- */
.bz-way-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) { .bz-way-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .bz-way-grid { grid-template-columns: 1fr; } }
.bz-way {
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 44px 30px 40px;
	border: 1px solid var(--cnvs-contrast-200);
	margin: -1px 0 0 -1px;
	color: inherit;
	text-decoration: none;
}
a.bz-way:hover { background: var(--cnvs-contrast-100); color: inherit; }
.bz-way img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 6px;
	margin: 0 0 20px;
}
.bz-way h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 10px; min-height: 2.6rem; }
.bz-way p { margin: 0; color: var(--cnvs-contrast-700); line-height: 1.6; flex-grow: 1; }

/* ---------- Ablauf: Planung → Errichtung → Betreuung (echte Reihenfolge) ---------- */
.bz-step-no {
	display: inline-block;
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--bz-gray);
	padding-bottom: 10px;
	margin-bottom: 18px;
	border-bottom: 5px solid var(--cnvs-themecolor);
}
.bz-step h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.bz-step .bz-step-lead { font-weight: 700; margin-bottom: 12px; }
.bz-step p { line-height: 1.65; }
.bz-more {
	font-weight: 700;
	color: var(--bz-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Dunkler Block: Vorteile ---------- */
.bz-dark {
	text-align: center;
	background: var(--bz-gray);
	color: #fff;
	margin: 0;
	padding: 100px 0;
}
.bz-dark h2 { color: #fff; font-weight: 800; }
.bz-dark h3 { color: #fff; font-weight: 800; font-size: 1.25rem; margin: 18px 0 8px; }
.bz-dark p { color: rgba(255, 255, 255, 0.92); line-height: 1.65; margin: 0; }
.bz-dark .bz-dark-icon { font-size: 44px; color: var(--cnvs-themecolor); line-height: 1; }

/* ---------- Kurz-Fakten unter dem Hero ---------- */
.bz-fact i { font-size: 32px; color: var(--bz-orange-strong); }
.bz-fact div { font-weight: 700; margin-top: 8px; }

/* ---------- Info-Leiste (Text links, Button rechts) ---------- */
.bz-cta-bar { text-align: left; }
.bz-cta-bar p { font-size: 1.15rem; line-height: 1.5; margin: 0; }

/* ---------- Zitate ---------- */
.bz-quote {
	font-weight: 400;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.6;
	color: var(--cnvs-contrast-800);
}
.bz-quote-sm { font-size: 1.2rem; }

/* ---------- Referenzen: freie Zeile mittig zentriert (7 Logos) ---------- */
.bz-ref-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.bz-ref-flex .c4y-ref-cell { flex: 0 0 20%; box-sizing: border-box; padding: 30px 18px; }
@media (max-width: 991px) { .bz-ref-flex .c4y-ref-cell { flex-basis: 33.3333%; } }
@media (max-width: 575px) { .bz-ref-flex .c4y-ref-cell { flex-basis: 50%; } }

/* ---------- Leistungen: Schritte, Listen, Arbeitsgebiete ---------- */
.bz-check-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
}
@media (max-width: 767px) { .bz-check-list { columns: 1; } }
.bz-check-list li {
	position: relative;
	padding: 7px 0 7px 32px;
	break-inside: avoid;
}
.bz-check-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 13px;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--bz-orange-strong);
	border-bottom: 3px solid var(--bz-orange-strong);
	transform: rotate(-45deg);
}
.bz-area h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 18px; }
.bz-area h4 {
	font-size: 1rem;
	font-weight: 800;
	color: var(--cnvs-themecolor);
	margin: 26px 0 8px;
}
.bz-area ul { list-style: none; margin: 0; padding: 0; }
.bz-area li { padding: 5px 0; border-bottom: 1px solid var(--cnvs-contrast-200); }
.bz-area-col { border-top: 5px solid var(--cnvs-themecolor); padding-top: 26px; }

/* ---------- Preistabelle ---------- */
.bz-price-table {
	width: 100%;
	border-collapse: collapse;
	margin: 30px 0 14px;
}
.bz-price-table th {
	text-align: left;
	font-weight: 700;
	color: var(--bz-gray);
	padding: 12px 16px;
	border-bottom: 3px solid var(--cnvs-themecolor);
}
.bz-price-table th:last-child,
.bz-price-table td:last-child { text-align: right; white-space: nowrap; }
.bz-price-table td {
	padding: 20px 16px;
	border-bottom: 1px solid var(--cnvs-contrast-200);
	vertical-align: middle;
}
.bz-price-table td:last-child { font-weight: 800; font-size: 1.15rem; }
.bz-price-table small { display: block; color: var(--cnvs-contrast-600); font-weight: 400; margin-top: 4px; }

/* ---------- Footer: Grau statt Orange (Lesbarkeit), Orange als Kante ---------- */
#footer.bz-footer {
	background: var(--bz-gray);
	border-top: 6px solid var(--cnvs-themecolor);
}
#footer.bz-footer .bz-footer-logo {
	display: inline-block;
	background: #fff;
	border-radius: 8px;
	padding: 10px 16px;
	margin-bottom: 26px;
}
#footer.bz-footer .bz-footer-logo img { display: block; max-height: 62px; }
#footer.bz-footer a:hover { color: var(--cnvs-themecolor) !important; }
#copyrights.bz-copyrights { background: var(--bz-gray-dark) !important; }

/* Tastatur-Fokus sichtbar */
a:focus-visible, .button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--bz-link);
	outline-offset: 3px;
}
.bz-dark a:focus-visible, #footer a:focus-visible, .bz-hero a:focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.c4y-logo-link, .c4y-area-icon { transition: none; }
}

@media (max-width: 767px) {
	.bz-hero { padding-top: 100px; padding-bottom: 90px; }
}
.bz-nowrap { white-space: nowrap; }

/* Bootstrap-Zeilen mit großen Abständen (g-5 / 6rem im Footer) ragen am Handy und knapp
   über 1200px minimal über den Rand: kein seitliches Scrollen zulassen. */
#wrapper { overflow-x: clip; }

/* Am Handy nie bündig zum Bildschirmrand: Inline-Paddings der Inhaltsbereiche
   (z. B. "padding: 80px 0") überschreiben sonst den Container-Innenabstand. */
@media (max-width: 767px) {
	#content .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ---------- Abstände: Inhalt beginnt direkt unter dem Farbbalken ----------
   Das Theme setzt 5rem Innenabstand oben auf .content-wrap; zusammen mit dem
   Abstand der Inhaltsblöcke ergab das viel zu viel Weiß unter der Überschrift. */
.content-wrap { padding-top: 0 !important; }

/* ---------- Preistabelle: Textzelle in der Wertespalte (z. B. "nach Zeitaufwand") ---------- */
.bz-price-table td.bz-price-text {
	white-space: normal;
	font-size: 1rem;
	font-weight: 600;
	max-width: 240px;
}
.bz-price-table + .bz-price-table,
.bz-price-heading { margin-top: 50px; }
.bz-price-heading { margin-bottom: 0; }

/* ---------- Karte auf der Kontaktseite: kompakt ---------- */
.bz-map {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	height: 300px;
}
.bz-map iframe { display: block; width: 100%; height: 100%; border: 0; }


/* ---------- Porträt beim Zitat ---------- */
.bz-portrait {
	width: 100%;
	height: auto;
	max-width: 210px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* ---------- Arbeitsgebiete: Bild oben, Überschrift in einer Zeile ---------- */
.bz-area-col { border-top: 0; padding-top: 0; }
.bz-area-img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 22px;
}
.bz-area h3 { font-size: 1.2rem; }

/* Startseite: "Mehr zu ..."-Links der drei Schritte auf einer Linie */
.bz-step.col-lg-4 { display: flex; flex-direction: column; align-items: flex-start; }
.bz-step.col-lg-4 .bz-more { margin-top: auto; padding-top: 12px; }


/* ---------- Schmale Marken-Leiste ganz oben (ca. 28 px statt 49 px) ---------- */
.c4y-brand-strip { padding: 3px 0; }
.c4y-brand-strip-track { min-height: 1.8em; }


/* Größeres Logo (74 px): Menüzeile bleibt so hoch wie die Header-Höhe, kein Überlappen des Inhalts */
@media (max-width: 1300px) {
	#header-wrap .header-row { padding: 13px 0; }
}

/* Zwischen 1301 und 1399 px ist das Logo (74 px) mit Menü und Störungs-Button knapp:
   engerer Menüabstand, damit der Button nicht in eine zweite Zeile rutscht. */
@media (min-width: 1301px) and (max-width: 1399px) {
	.is-expanded-menu .primary-menu .menu-container > .menu-item > .menu-link { padding-left: 11px; padding-right: 11px; }
	.header-misc { margin-left: 14px; }
}


/* ---------- CSS4YOU als Muttermarke sichtbar machen ---------- */
#footer.bz-footer .bz-footer-parent { margin: 0 0 26px; }
#footer.bz-footer .bz-footer-parent span {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.9);
}
#footer.bz-footer .bz-footer-logo-sm { margin-bottom: 0; padding: 8px 14px; }
#footer.bz-footer .bz-footer-logo-sm img { max-height: 40px; width: auto; }
.bz-parent-logo-link { display: inline-block; margin-bottom: 22px; }
.bz-parent-logo { display: block; height: 52px; width: auto; }

/* ---------- Header-Stabilität beim Laden (kein Springen Burger-Menü/Button) ----------
   Rein per CSS-Media-Query abgesichert, unabhängig davon, wann das Theme-Skript die Klasse
   "is-expanded-menu" setzt: ab 1301px nie Burger-Button, Kopfzeile bricht nie um. */
@media (min-width: 1301px) {
	#header .primary-menu-trigger { display: none !important; }
	#header .header-row { flex-wrap: nowrap; }
}

/* ---------- News (Live aus Google Sheet, js/news.js) ---------- */
.bz-news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}
@media (max-width: 991px) { .bz-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .bz-news-grid { grid-template-columns: 1fr; } }
.bz-news-card {
	background: #fff;
	border-left: 4px solid var(--cnvs-themecolor);
	border-radius: 4px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
	text-align: left;
}
.bz-news-sum { display: block; padding: 24px 24px 22px; }
details.bz-news-card > summary.bz-news-sum { list-style: none; cursor: pointer; }
details.bz-news-card > summary.bz-news-sum::-webkit-details-marker { display: none; }
.bz-news-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--bz-link);
	margin-bottom: 18px;
}
.bz-news-icon { width: 24px; height: 24px; display: block; }
.bz-news-title {
	display: block;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bz-ink);
	margin-bottom: 10px;
}
.bz-news-header { display: block; font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--bz-ink); }
.bz-news-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--bz-link);
}
.bz-news-more::after {
	content: "";
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
	transition: transform .15s;
}
details.bz-news-card[open] .bz-news-more::after { transform: rotate(180deg); }
.bz-news-body { padding: 0 24px 24px; }
.bz-news-text { margin: 0 0 26px; font-size: .95rem; line-height: 1.7; color: var(--cnvs-contrast-600); }
.bz-news-text:last-child { margin-bottom: 0; }
.bz-news-link { margin: 0; font-weight: 700; }
.bz-news-link a { color: var(--bz-link); }
.bz-news-note { text-align: center; color: var(--cnvs-contrast-700); margin: 0; }
details.bz-news-card > summary.bz-news-sum:focus-visible { outline: 3px solid var(--bz-ink); outline-offset: 2px; }