/* ----------------------------------------------------------------
	Canvas: ELEKTRO4YOU
	Bereichs-Theme für elektro4you.at - wird NACH css/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 ELEKTRO4YOU (aus dem Bereichs-Icon ausgelesen, siehe --c4y-elektro4you) */
	--cnvs-themecolor: #2c97c9;
	--cnvs-themecolor-rgb: 44, 151, 201;

	/* Text auf Bereichsfarbe (Farbbalken, Buttons, Leiste): laut Vorgabe weiß.
	   Auf Wunsch dunkel: --el-on-brand: var(--el-ink) (besserer Kontrast). */
	--el-ink: #2b2c2e;
	--el-on-brand: #fff;

	/* Markenblau für Menü-Hover, Icons und Kennzeichnungen. Fließtext-Links etwas tiefer (--el-link),
	   damit sie auf Weiß den Kontrast 4,5:1 erreichen; Menü/Icons bleiben im reinen Markenblau. */
	--el-brand-strong: var(--cnvs-themecolor);
	--el-link: #1b78a4;
	--el-brand-tint: #8fd3f4; /* helles Blau für Schrift/Icons auf dunklen Flächen */

	--el-gray: #636466;
	--el-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(--el-link);
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
	--cnvs-primary-menu-active-color: var(--cnvs-themecolor);
}

/* ---------- 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(--el-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(--el-ink);
}
/* Kontur-Button auf Orange-Flächen: weiße Kontur, beim Hover weiß gefüllt */
.el-btn-outline {
	background: transparent !important;
	border: 2px solid #fff !important;
	color: #fff !important;
	font-weight: 600;
}
.el-btn-outline:hover {
	background: #fff !important;
	color: var(--el-ink) !important;
}

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

/* ---------- Hauptmenü: aktive/Hover-Farbe im reinen Markenblau ---------- */
.primary-menu .menu-item.current > .menu-link,
.primary-menu .menu-item:hover > .menu-link,
.primary-menu .menu-item.current:hover > .menu-link {
	color: var(--cnvs-themecolor);
}
/* Unterstreichung des AKTIVEN Hauptmenüpunkts in der Bereichsfarbe (nicht bei
   reinem Hover - die Hover-Farbe oben bleibt, nur ohne Linie).
   Sitzt als box-shadow auf dem inneren <div>, nicht auf dem 100px hohen <a>,
   sonst würde die Linie weit unter dem Text statt direkt darunter erscheinen.
   width: fit-content hält die Linie wortbreit - auch im Burger-Menü, wo das
   div sonst auf 100% Breite gesetzt wird. */
.primary-menu .menu-container > .menu-item > .menu-link > div {
	width: fit-content;
}
.primary-menu .menu-container > .menu-item.current > .menu-link > div {
	box-shadow: inset 0 -3px 0 0 var(--cnvs-themecolor);
}

/* ---------- Untermenü: Hover-Farbe neutral statt Bereichsfarben-Reihenfolge des Hubs ---------- */
.c4y-submenu.el-submenu .menu-item:nth-child(n) .menu-link:hover {
	color: var(--cnvs-themecolor);
}
/* Dropdown-Untermenü: nur das Icon in Bereichsfarbe, Text bleibt dunkel,
   keine Unterstreichung (die Haupt-Regel oben trifft dank ">"-Kombinator
   ohnehin nur die obersten Menüpunkte, hier zur Klarheit explizit). */
.c4y-submenu.el-submenu .menu-link > div {
	box-shadow: none;
}
.c4y-submenu.el-submenu .menu-link { gap: 12px; }
.c4y-submenu.el-submenu .menu-link i {
	font-size: 20px;
	line-height: 1;
	width: 22px;
	text-align: center;
	color: var(--cnvs-themecolor);
	flex-shrink: 0;
}
/* Keine Zeilenumbrüche und keine Schriftgewicht-Änderung beim Hover (Text "sprang" in die nächste Zeile) */
.c4y-submenu.el-submenu .menu-link,
.c4y-submenu.el-submenu .menu-link:hover,
.c4y-submenu.el-submenu .menu-item:hover > .menu-link {
	white-space: nowrap;
	font-weight: 600;
}
@media (min-width: 992px) {
	.primary-menu .menu-container .c4y-submenu.el-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(--el-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(--el-ink);
}

/* ---------- Hero: Foto (Techniker bei der Arbeit) mit Markenverlauf und
   dezenten Leiterbahnen für Textkontrast ---------- */
.el-hero {
	position: relative;
	margin: 0;
	padding-top: 150px;
	padding-bottom: 135px;
	background: #123f57 url("../images/hero-elektro.jpg") center 22% / cover no-repeat;
	overflow: hidden;
}
.el-hero::before {
	/* Markenfarb-Verlauf über dem Foto, für Lesbarkeit des weißen Textes */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(13, 55, 79, .93) 0%, rgba(19, 94, 134, .87) 55%, rgba(44, 151, 201, .80) 100%);
}
.el-hero::after {
	/* dezente Leiterbahnen-Struktur, oben auf dem Verlauf */
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='white' stroke-opacity='.10' stroke-width='3'%3E%3Cpath d='M0 120H340L400 180H700'/%3E%3Cpath d='M0 470H220L290 400H560L600 440H900'/%3E%3Cpath d='M1600 90H1280L1220 150H1000'/%3E%3Cpath d='M1600 500H1330L1260 430H1010'/%3E%3Cpath d='M0 300H120'/%3E%3Cpath d='M1600 300H1480'/%3E%3C/g%3E%3Cg fill='none' stroke='white' stroke-opacity='.2' stroke-width='3'%3E%3Ccircle cx='712' cy='180' r='9'/%3E%3Ccircle cx='912' cy='440' r='9'/%3E%3Ccircle cx='988' cy='150' r='9'/%3E%3Ccircle cx='998' cy='430' r='9'/%3E%3Ccircle cx='132' cy='300' r='9'/%3E%3Ccircle cx='1468' cy='300' r='9'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.el-hero .container { position: relative; z-index: 2; }
.el-hero-kicker {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.el-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;
}
.el-hero-ways {
	color: var(--el-brand-tint);
	font-weight: 700;
	font-size: clamp(0.85rem, 1.4vw + 0.45rem, 1.2rem);
	letter-spacing: 0.4px;
	margin: 22px 0 0;
}
.el-hero-text {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.15rem;
	max-width: 660px;
	margin: 12px auto 32px;
}
/* Auf dem Blauverlauf: Haupt-Button weiß, damit er auch am hellen Ende sichtbar bleibt */
.el-hero .button:not(.button-border):not(.button-light) {
	background: #fff;
	color: var(--el-ink) !important;
}
.el-hero .button:not(.button-border):not(.button-light):hover {
	background: rgba(255, 255, 255, 0.88);
}
@media (max-width: 767px) {
	.el-hero { padding-top: 90px; padding-bottom: 80px; }
}

/* ---------- Leistungs-Kacheln (Startseite, Leistungsübersicht, "Weitere Leistungen") ---------- */
.el-service-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
}
.el-service {
	display: flex;
	flex-direction: column;
	flex: 1 1 240px;
	max-width: 320px;
	background: #fff;
	border: 1px solid var(--cnvs-contrast-200);
	border-radius: 8px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.el-service:hover {
	color: inherit;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.13);
	transform: translateY(-3px);
}
.el-service img { display: block; width: 100%; height: auto; }
.el-service-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 24px;
}
.el-service h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; }
.el-service p { margin: 0 0 14px; color: var(--cnvs-contrast-700); line-height: 1.55; font-size: 0.95rem; }
.el-service-link { margin-top: auto; font-weight: 700; color: var(--el-link); }
.el-service-link::after { content: " →"; }
@media (prefers-reduced-motion: reduce) {
	.el-service { transition: none; }
	.el-service:hover { transform: none; }
}

/* ---------- Leistungsseiten ---------- */
.el-page-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.el-sticky { align-self: flex-start; }
@media (min-width: 992px) { .el-sticky { position: sticky; top: 130px; } }
.el-kicker { font-weight: 700; color: var(--el-link); font-size: 1.05rem; margin-bottom: 6px; }
.el-check-list.is-single { columns: 1; }
.el-subhead { font-size: 1.15rem; font-weight: 800; margin: 30px 0 4px; }
.el-easyload-logo { display: inline-block; margin: 6px 0 4px; }
.el-easyload-logo img { display: block; width: 100%; max-width: 230px; height: auto; }
.el-note { color: var(--cnvs-contrast-700); font-size: 0.9rem; }


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

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

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

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

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

/* ---------- Referenzen (derzeit nicht verwendet) ---------- */
.el-ref-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.el-ref-flex .c4y-ref-cell { flex: 0 0 20%; box-sizing: border-box; padding: 30px 18px; }
@media (max-width: 991px) { .el-ref-flex .c4y-ref-cell { flex-basis: 33.3333%; } }
@media (max-width: 575px) { .el-ref-flex .c4y-ref-cell { flex-basis: 50%; } }

/* ---------- Leistungen: Listen ---------- */
.el-check-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
}
@media (max-width: 767px) { .el-check-list { columns: 1; } }
.el-check-list li {
	position: relative;
	padding: 7px 0 7px 32px;
	break-inside: avoid;
}
.el-check-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 13px;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--el-brand-strong);
	border-bottom: 3px solid var(--el-brand-strong);
	transform: rotate(-45deg);
}

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

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

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

.el-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; }
/* Sicherheitsnetz gegen Bootstrap-Zeilen mit negativem Rand (z. B. Footer-Grid):
   "clip" reicht bei sehr kurzen Seiten (z. B. leerer/Fehlerzustand der Neuigkeiten)
   nicht immer aus, um scrollWidth auf den Viewport zu begrenzen. */
html, body { overflow-x: hidden; }

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

/* ---------- Neuigkeiten: live aus dem zentralen Google Sheet geladen,
   client-seitig auf BEREICH = ELEKTRO4YOU gefiltert (siehe news.html-Skript).
   Grid mit 3 Karten pro Zeile, wie auf css4you.at/news.html.
   Aufklappbare Karte per nativem <details>/<summary>, kein JS-Framework. ---------- */
.el-news-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: start;
}
@media (max-width: 991px) { .el-news-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .el-news-list { grid-template-columns: 1fr; } }
.el-news-status, .el-news-empty { grid-column: 1 / -1; }
.el-news-item {
	background: #fff;
	border: 1px solid var(--cnvs-contrast-200);
	border-left: 4px solid var(--cnvs-themecolor);
	border-radius: 4px;
	padding: 26px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.el-news-item summary {
	cursor: pointer;
	list-style: none;
}
.el-news-item summary::-webkit-details-marker { display: none; }
.el-news-item summary::marker { content: ""; }
.el-news-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.4px;
	color: var(--cnvs-themecolor);
}
.el-news-icon { display: block; flex-shrink: 0; }
.el-news-title { display: block; font-weight: 700; font-size: 1.05rem; margin: 10px 0 6px; }
.el-news-header { display: block; font-weight: 700; margin: 0 0 4px; }
.el-news-item summary::after {
	content: "weiterlesen ▾";
	display: block;
	margin-top: 10px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--el-link);
}
.el-news-item[open] summary::after { content: "weniger ▴"; }
.el-news-body {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--cnvs-contrast-200);
}
.el-news-body p { font-size: 0.9rem; color: var(--cnvs-contrast-600); margin: 0; }
.el-news-link { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--el-link); }
.el-news-status, .el-news-empty {
	text-align: center;
	color: var(--cnvs-contrast-700);
	padding: 30px 0;
}

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


/* ---------- Porträt beim Zitat ---------- */
.el-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);
}

/* Startseite: "Mehr zu ..."-Links der drei Schritte auf einer Linie */
.el-step.col-lg-4 { display: flex; flex-direction: column; align-items: flex-start; }
.el-step.col-lg-4 .el-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.el-footer .el-footer-parent { margin: 0 0 26px; }
#footer.el-footer .el-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.el-footer .el-footer-logo-sm { margin-bottom: 0; padding: 8px 14px; }
#footer.el-footer .el-footer-logo-sm img { max-height: 40px; width: auto; }
.el-parent-logo-link { display: inline-block; margin-bottom: 22px; }
.el-parent-logo { display: block; height: 52px; width: auto; }