/* =========================================================================
   demo-elektro.css — Branding für Elektro Mustersberg (Meisterbetrieb)
   Farbschema: Technisches Schieferblau #0369a1 + Deep Slate #0f172a + Signal #0284c7
   ========================================================================= */

[data-demo="elektro"] {
	--c-accent: #0369a1;
	--c-accent-hover: #075985;
	--c-accent-soft: rgba(3, 105, 161, 0.08);
	--c-fg: #0f172a;
	--c-bg: #f8fafc;
	--c-surface: #ffffff;
	--c-border: #0f172a;
	--c-border-soft: rgba(15, 23, 42, 0.12);
}

[data-demo="elektro"] .site-nav__brand-mark {
	display: none;
}

[data-demo="elektro"] .site-nav__brand-logo {
	display: none;
}

/* Demo-Banner oben: Desktop exakt gleiche Höhe & Grundlinie */
[data-demo="elektro"] .demo-banner {
	background: #0f172a;
	color: #f8fafc;
	padding: 0.45rem var(--space-md);
	font-size: var(--fs-small);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-demo="elektro"] .demo-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	text-align: center;
	width: 100%;
}

@media (min-width: 768px) {
	[data-demo="elektro"] .demo-banner__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
}

[data-demo="elektro"] .demo-banner a {
	color: #38bdf8;
	text-decoration: underline;
	font-weight: var(--fw-bold);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

[data-demo="elektro"] .demo-banner a:hover {
	color: #ffffff;
}

/* Floating / Sticky 24h Notdienst Button (unten) */
[data-demo="elektro"] .floating-notdienst {
	position: fixed;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	right: calc(1rem + env(safe-area-inset-right, 0px));
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #0f172a;
	color: #ffffff;
	border: 1.5px solid #0369a1;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.25);
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	transform: translateZ(0);
	transition: transform var(--t-hover), background var(--t-hover), border-color var(--t-hover);
}

[data-demo="elektro"] .floating-notdienst svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0;
	color: #38bdf8;
	display: block;
}

[data-demo="elektro"] .floating-notdienst__text {
	display: none;
}

[data-demo="elektro"] .floating-notdienst:hover,
[data-demo="elektro"] .floating-notdienst:focus-visible {
	background: #0369a1;
	border-color: #38bdf8;
	color: #ffffff;
	transform: scale(1.05);
}

@media (min-width: 768px) {
	[data-demo="elektro"] .floating-notdienst {
		bottom: 1.5rem;
		right: 1.5rem;
		width: auto;
		height: 44px;
		border-radius: 9999px;
		padding: 0 1.25rem;
		gap: 0.5rem;
		font-size: 0.88rem;
		font-weight: var(--fw-bold);
	}

	[data-demo="elektro"] .floating-notdienst__text {
		display: inline;
		line-height: 1;
	}

	[data-demo="elektro"] .floating-notdienst:hover,
	[data-demo="elektro"] .floating-notdienst:focus-visible {
		transform: translateY(-2px);
	}
}

/* Back-to-top Button: Exakt DARÜBER auf der gleichen vertikalen Achse (gleicher right-Abstand) */
[data-demo="elektro"] .back-to-top {
	bottom: 4.25rem;
	right: 1rem;
	z-index: 98;
	-webkit-font-smoothing: antialiased;
	transform: translateZ(0);
}

[data-demo="elektro"] .back-to-top.is-visible {
	transform: translateY(0);
}

@media (min-width: 768px) {
	[data-demo="elektro"] .back-to-top {
		bottom: 4.75rem;
		right: 1.5rem;
	}
}

/* Hero-Bereich */
[data-demo="elektro"] .hero {
	min-height: calc(100vh - 100px);
	min-height: calc(100svh - 100px);
	min-height: calc(100dvh - 100px);
	padding-top: clamp(1.25rem, 3vh, 2.5rem);
	padding-bottom: clamp(1.5rem, 3.5vh, 3rem);
	border-bottom: var(--border-w-thick) solid #0369a1;
	background:
		linear-gradient(
			to bottom,
			rgba(248, 250, 252, 0.92) 15%,
			rgba(248, 250, 252, 0.45) 100%
		),
		url("../../demos/elektro-mustersberg/img/hero.webp") no-repeat center / cover;
}

@media (min-width: 768px) {
	[data-demo="elektro"] .hero {
		background:
			linear-gradient(
				to right,
				rgba(248, 250, 252, 0.95) 35%,
				rgba(248, 250, 252, 0.3) 100%
			),
			url("../../demos/elektro-mustersberg/img/hero.webp") no-repeat center / cover;
	}
}

[data-demo="elektro"] .hero__eyebrow {
	color: #0369a1;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
}

[data-demo="elektro"] .hero__title {
	color: #0f172a;
}

[data-demo="elektro"] .accent {
	color: #0369a1;
}

/* Badges & Trust-Pills */
[data-demo="elektro"] .badge {
	display: inline-block;
	font-size: var(--fs-tiny);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.55rem;
	background: rgba(3, 105, 161, 0.09);
	color: #0369a1;
	border-radius: var(--radius);
	margin-bottom: var(--space-xs);
	border: 1px solid rgba(3, 105, 161, 0.22);
}

[data-demo="elektro"] .trust-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	background: rgba(3, 105, 161, 0.08);
	border: 1px solid rgba(3, 105, 161, 0.28);
	color: #0369a1;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	border-radius: var(--radius);
}

/* Buttons */
[data-demo="elektro"] .btn--accent {
	background: #0369a1;
	border-color: #0369a1;
	color: #ffffff;
}

[data-demo="elektro"] .btn--accent:hover,
[data-demo="elektro"] .btn--accent:focus-visible {
	background: #075985;
	border-color: #075985;
	color: #ffffff;
}

[data-demo="elektro"] .btn--ghost {
	background: var(--c-surface);
	border-color: #0f172a;
	color: #0f172a;
}

[data-demo="elektro"] .btn--ghost:hover,
[data-demo="elektro"] .btn--ghost:focus-visible {
	background: #0f172a;
	color: #ffffff;
	border-color: #0f172a;
}

/* -------------------------------------------------------------------------
   Sektion 02: Kreative PV-Planungsstufen (Kein KI-Slop)
   ------------------------------------------------------------------------- */
[data-demo="elektro"] .pv-stage {
	background: var(--c-surface);
	border: var(--border-w) solid var(--c-border-soft);
	border-radius: var(--radius);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: border-color var(--t-hover), transform var(--t-hover), box-shadow var(--t-hover);
}

[data-demo="elektro"] .pv-stage:hover {
	border-color: #0369a1;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(3, 105, 161, 0.08);
}

[data-demo="elektro"] .pv-stage__head {
	margin-bottom: var(--space-md);
}

[data-demo="elektro"] .pv-stage__tag {
	font-family: var(--ff-mono);
	font-size: var(--fs-tiny);
	font-weight: var(--fw-bold);
	color: #0369a1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--space-2xs);
}

[data-demo="elektro"] .pv-stage__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-fg);
	margin: 0 0 var(--space-2xs) 0;
}

[data-demo="elektro"] .pv-stage__desc {
	font-size: 0.9rem;
	color: #475569;
	line-height: 1.45;
	margin: 0;
}

/* Autarkie-Meter */
[data-demo="elektro"] .pv-meter {
	margin-bottom: var(--space-md);
	background: rgba(241, 245, 249, 0.9);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius);
	border: 1px solid var(--c-border-soft);
}

[data-demo="elektro"] .pv-meter__label {
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-tiny);
	font-weight: var(--fw-bold);
	color: #0f172a;
	margin-bottom: 0.25rem;
}

[data-demo="elektro"] .pv-meter__bar {
	height: 6px;
	background: #e2e8f0;
	border-radius: 9999px;
	overflow: hidden;
}

[data-demo="elektro"] .pv-meter__fill {
	height: 100%;
	background: linear-gradient(90deg, #0369a1, #38bdf8);
	border-radius: 9999px;
}

/* Datenkacheln */
[data-demo="elektro"] .pv-data-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xs);
	border-top: 1px solid var(--c-border-soft);
	padding-top: var(--space-md);
}

[data-demo="elektro"] .pv-data-cell {
	background: #f8fafc;
	padding: 0.45rem 0.6rem;
	border-radius: var(--radius);
	border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-demo="elektro"] .pv-data-val {
	font-size: 0.92rem;
	font-weight: var(--fw-bold);
	color: #0f172a;
	display: block;
	line-height: 1.2;
}

[data-demo="elektro"] .pv-data-lbl {
	font-size: 0.75rem;
	color: #64748b;
	display: block;
	margin-top: 2px;
}

/* Karten & Boxen */
[data-demo="elektro"] .card {
	border-color: rgba(15, 23, 42, 0.18);
	background: var(--c-surface);
	border-radius: var(--radius);
}

[data-demo="elektro"] .card img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	transition: transform var(--t-hover);
}

@media (min-width: 768px) {
	[data-demo="elektro"] .card img {
		height: 300px;
	}
}

[data-demo="elektro"] .card:hover img {
	transform: scale(1.03);
}

[data-demo="elektro"] .card__caption {
	padding: var(--space-sm) var(--space-md);
	border-top: var(--border-w) solid var(--c-border-soft);
	font-size: var(--fs-small);
	color: var(--c-muted);
	line-height: var(--lh-snug);
}

/* Schweizer Datenbänder für Technische Fakten */
[data-demo="elektro"] .tech-list {
	border-bottom: 1px solid var(--c-border-soft);
	margin-top: var(--space-lg);
}

[data-demo="elektro"] .tech-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xs);
	padding-block: var(--space-md);
	border-top: 1px solid var(--c-border-soft);
}

@media (min-width: 768px) {
	[data-demo="elektro"] .tech-row {
		grid-template-columns: 280px 1fr;
		gap: var(--space-xl);
		align-items: baseline;
		padding-block: var(--space-lg);
	}
}

[data-demo="elektro"] .tech-row__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

[data-demo="elektro"] .tech-row__tag {
	font-size: var(--fs-tiny);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #0369a1;
}

[data-demo="elektro"] .tech-row__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-fg);
	margin: 0;
}

[data-demo="elektro"] .tech-row__text {
	margin: 0;
	color: var(--c-fg);
	line-height: 1.55;
	font-size: 0.95rem;
}

/* Map & Footer */
[data-demo="elektro"] .map {
	border-color: #0369a1;
	border-radius: var(--radius);
}

[data-demo="elektro"] .site-footer {
	background: #0f172a;
	color: #f8fafc;
	border-top: var(--border-w-thick) solid #0369a1;
}

[data-demo="elektro"] .site-footer a {
	color: #f8fafc;
}

[data-demo="elektro"] .site-footer a:hover {
	color: #38bdf8;
}

[data-demo="elektro"] section[id] {
	scroll-margin-top: 80px;
}

/* Burger-Menü: volle Breite auf Mobile */
@media (max-width: 767px) {
	[data-demo="elektro"] .site-nav__menu-list a {
		display: flex;
		width: 100%;
		padding: var(--space-xs) var(--space-sm);
	}
}