/**
 * BS360 Energy Calculator - wizard styles.
 *
 * Alle Farbwerte kommen aus der offiziellen Betterspace-Farbpalette in
 * Confluence (Marketing > Webseite > Plugins > Farbpalette), nicht aus
 * frei gewählten Werten:
 * - "Sustainable Green" (Primärfarbe, Stufen 050-900)
 * - "Digital Gray" (Neutral/Text/Border, Stufen 050-900)
 * - "Innovative Bordeaux" (Akzentfarbe, Stufen 050-900)
 * - "Funktionsfarben" (Error/Warnung/Erfolg/Info, feste Einzelwerte)
 *
 * --bs360-color-primary (Green 500, #679D2E): Rahmen, Slider-Thumb,
 *   Fortschritts-Punkte - Nicht-Text-UI, braucht nur 3:1 (WCAG 1.4.11),
 *   erreicht 3,26:1 gegen Weiss.
 * --bs360-color-primary-contrast (Green 600, #527E25): Text auf grünem
 *   Grund (Buttons, Check-Icon, aktive Fortschritts-Labels, Slider-Wert).
 *   Text braucht 4,5:1 (WCAG 1.4.3); Stufe 500 kommt dort nur auf 3,26:1,
 *   Stufe 600 erreicht 4,81:1.
 * --bs360-color-primary-light (Green 300, #A4D571): heller Startpunkt für
 *   den Gradient im Slider-Fuell-Balken (300 -> 500, wie bei Preline's
 *   "Gradient track"-Variante, siehe advanced-range-slider.html).
 * --bs360-color-heading (Digital Gray 600, #323E44) / --bs360-color-text
 *   (Digital Gray 400, #5E737F): Überschriften vs. Fließtext, wie in der
 *   Digital-Gray-Beschreibung vorgegeben.
 * --bs360-color-muted (Digital Gray 300, #8297A3): sekundäre/kleinere
 *   Textelemente (Captions, Min/Max-Labels), heller als der Fließtext.
 * --bs360-color-border (Digital Gray 100, #D5DCE0): Rahmen und der helle
 *   Slider-Track-Hintergrund.
 * --bs360-color-surface (Digital Gray 050, #F5F6F7): Hintergrund für
 *   Context-Boxen.
 * --bs360-color-error (#D93025): offizielle Funktionsfarbe "Fehler".
 * --bs360-color-accent (Bordeaux 500, #AE1253): "Live"-Badge auf den
 *   Energieform-Buttons (Strom/Gas/Heizöl, 4.0.9). Weisser Text darauf
 *   erreicht 6,97:1 (WCAG AA bestanden, > 4,5:1). Bordeaux ist laut
 *   Confluence als Akzentfarbe "gezielt, nie flächig" gedacht - passt zu
 *   einem kleinen Badge, nicht zur Buttonfläche selbst.
 */

.bs360-ecp {
	--bs360-color-primary: #679D2E;
	--bs360-color-primary-light: #A4D571;
	--bs360-color-primary-contrast: #527E25;
	--bs360-color-result-bg: #F7FCF3;
	--bs360-color-surface: #F5F6F7;
	--bs360-color-border: #D5DCE0;
	--bs360-color-heading: #323E44;
	--bs360-color-text: #5E737F;
	--bs360-color-muted: #8297A3;
	--bs360-color-future: #D5DCE0;
	--bs360-color-error: #D93025;
	--bs360-color-accent: #AE1253;

	--bs360-ec-a: #00A651;
	--bs360-ec-b: #50B848;
	--bs360-ec-c: #BFD730;
	--bs360-ec-d: #FFF200;
	--bs360-ec-e: #FDB913;
	--bs360-ec-f: #F37021;
	--bs360-ec-g: #ED1C24;

	--bs360-footer-height: 96px; /* overwritten by calculator.js after first render */

	max-width: 1280px;
	margin: 0 auto;
	color: var(--bs360-color-text);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
	scroll-margin-top: 24px;
}

.bs360-ecp *,
.bs360-ecp *::before,
.bs360-ecp *::after {
	box-sizing: inherit;
}

.bs360-ecp .is-hidden {
	display: none !important;
}

/* ---------- Progress bar (concept 15.5a) ---------- */

.bs360-ecp__progress {
	margin-bottom: 2rem;
}

.bs360-ecp__progress-labels {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.bs360-ecp__progress-label {
	flex: 1;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: #ACBAC1; /* Digital Gray 200 - naeher am Grau des Tracks als --color-muted (300) */
}

.bs360-ecp__progress-label.is-active,
.bs360-ecp__progress-label.is-done {
	color: var(--bs360-color-primary-contrast);
}

/**
 * Track und Punkte teilen sich diese eine, relativ positionierte Zeile.
 * Die Hoehe der Zeile ergibt sich allein aus .progress-dots (normaler
 * Fluss); der Track ist absolut positioniert und vertikal zentriert -
 * dadurch liegen beide immer exakt auf einer Hoehe (Punkt 2), unabhaengig
 * von Label-Zeilenumbrüchen o.ä.
 */
.bs360-ecp__progress-track-row {
	position: relative;
}

.bs360-ecp__progress-dots {
	display: flex;
	position: relative;
	z-index: 1;
}

.bs360-ecp__progress-dot-col {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.bs360-ecp__progress-dot {
	width: 14px;
	height: 14px;
	flex: none;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--bs360-color-future);
	display: block;
	transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}

.bs360-ecp__progress-dot.is-done {
	border-color: var(--bs360-color-primary);
}

.bs360-ecp__progress-dot.is-active {
	border-color: var(--bs360-color-primary);
	width: 18px;
	height: 18px;
}

.bs360-ecp__progress-track {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 8px;
	background: var(--bs360-color-future);
	border-radius: 999px;
	overflow: hidden;
	/* 4 progress-step columns of equal width -> each dot's center sits at
	   half a column-width from the nearest edge (100% / (2*4) = 12.5%).
	   Insetting the track by that amount aligns its 0%/100% ends exactly
	   under the first/last dot, so the fill stops (0/33.33/66.67/100%)
	   land under every dot in between too. */
	left: 12.5%;
	right: 12.5%;
}

.bs360-ecp__progress-fill {
	height: 100%;
	background: var(--bs360-color-primary);
	border-radius: 999px;
	position: relative;
	overflow: hidden;
	transition: width 0.3s ease;
	width: 0%;
}

.bs360-ecp__progress-fill--step-1 { width: 0%; }
.bs360-ecp__progress-fill--step-2 { width: 33.33%; }
.bs360-ecp__progress-fill--step-3 { width: 66.67%; }
.bs360-ecp__progress-fill--step-4 { width: 100%; }

.bs360-ecp__progress-fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: bs360-shimmer 2.4s ease-in-out infinite;
}

@keyframes bs360-shimmer {
	from { transform: translateX(-100%); }
	to { transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce) {
	.bs360-ecp__progress-fill::after {
		animation: none;
	}
}

/* ---------- Layout grid (two columns from Step 2 onward) ---------- */

.bs360-ecp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 768px) {
	.bs360-ecp__grid {
		grid-template-columns: 65fr 35fr;
	}
}

.bs360-ecp__steps {
	min-width: 0;
}

/* Step 1 (4.0.18): das Ergebnispanel ist auf Step 1 per is-hidden auf
   display:none gesetzt (kein Preis/keine Branche gewaehlt, es waere nur
   ein Strichel-Platzhalter) - CSS Grid reserviert die 35fr-Spalte dafuer
   aber TROTZDEM, display:none aendert daran nichts (verifiziert). Die
   Branchenkarten blieben dadurch auf den linken 65% haengen, obwohl
   rechts nichts sichtbar war - schief wirkender Leerraum. Fix: wenn Step
   1 aktiv ist (per :has() am sichtbaren .bs360-ecp__step--1 erkannt,
   ohne dafuer eine eigene JS-Klasse einzufuehren), wird das Grid auf eine
   Spalte gestellt und .bs360-ecp__steps auf die BISHERIGE 65%-Breite
   begrenzt und zentriert - die Kachelbreite selbst bleibt also
   unveraendert, nur ihre Position auf der Seite aendert sich (mittig
   statt linksbuendig unter dem vollbreiten Fortschrittsbalken). */
@media (min-width: 768px) {
	.bs360-ecp__grid:has(.bs360-ecp__step--1:not(.is-hidden)) {
		grid-template-columns: 1fr;
	}

	.bs360-ecp__grid:has(.bs360-ecp__step--1:not(.is-hidden)) .bs360-ecp__steps {
		/* calc() statt einer reinen 65%-Naeherung: das urspruengliche
		   65fr-Grid hatte ein 2rem-Gap zwischen den Spalten, das bei der
		   Aufteilung von der verfuegbaren Breite abgezogen wird, bevor die
		   65/35-Aufteilung greift ((Containerbreite - Gap) * 0.65). Eine
		   reine max-width:65% wuerde das Gap ignorieren und die Kacheln
		   dadurch minimal breiter machen als vorher (ca. 20px bei
		   typischen Containerbreiten) - das widerspraeche der Vorgabe,
		   die Breite unveraendert zu lassen. */
		max-width: calc((100% - 2rem) * 0.65);
		margin: 0 auto;
	}
}

/* ---------- Generic step / field styles ---------- */

/* Step-Übergänge (4.0.22): animieren jetzt die komplette Seite
   (.bs360-ecp__grid, beide Spalten inkl. Ergebnispanel zusammen als ein
   Block) statt nur der einzelnen Step-Abschnitte (4.0.21) - bei
   Step-Level-Animation blieb das Ergebnispanel rechts unbewegt stehen,
   was den Uebergang halbherzig wirken liess. Da .bs360-ecp__grid selbst
   nie is-hidden bekommt (nur die einzelnen Steps darin togglen), kann
   hier nicht mehr der alte Trick genutzt werden, bei dem die
   Animation automatisch neu startet, wenn ein Element von display:none
   wieder sichtbar wird - JS steuert is-exiting/is-entering jetzt aktiv
   per Klassenwechsel (siehe goTo() in calculator.js), inklusive
   erzwungenem Reflow vor dem erneuten Hinzufuegen von is-entering, damit
   die Animation bei aufeinanderfolgenden Uebergaengen zuverlaessig neu
   startet. */
.bs360-ecp__grid.is-exiting {
	animation: bs360-grid-exit-left 0.2s ease forwards;
}

.bs360-ecp__grid.is-exiting.bs360-ecp__grid--reverse {
	animation: bs360-grid-exit-right 0.2s ease forwards;
}

.bs360-ecp__grid.is-entering {
	animation: bs360-grid-enter-right 0.3s ease;
}

.bs360-ecp__grid.is-entering.bs360-ecp__grid--reverse {
	animation: bs360-grid-enter-left 0.3s ease;
}

@keyframes bs360-grid-enter-right {
	from { opacity: 0; transform: translateX(40px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes bs360-grid-enter-left {
	from { opacity: 0; transform: translateX(-40px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes bs360-grid-exit-left {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(-40px); }
}

@keyframes bs360-grid-exit-right {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(40px); }
}

@media (prefers-reduced-motion: reduce) {
	.bs360-ecp__grid.is-exiting,
	.bs360-ecp__grid.is-exiting.bs360-ecp__grid--reverse,
	.bs360-ecp__grid.is-entering,
	.bs360-ecp__grid.is-entering.bs360-ecp__grid--reverse {
		animation: none;
	}
}

.bs360-ecp__heading {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	color: var(--bs360-color-heading);
	font-weight: 600;
}

.bs360-ecp__context-box {
	background: var(--bs360-color-surface);
	border: 1px solid var(--bs360-color-border);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.bs360-ecp__field {
	margin-bottom: 1.75rem;
}

/**
 * Step 3B's room-count/renovation-year fields start disabled until the
 * building-count slider has been touched (see calculator.js's
 * enable/disableAwaitingHouseCountFields(), since 4.2.0). The browser's
 * default :disabled rendering on custom-styled (appearance:none) sliders
 * is inconsistent and often barely visible, so this dims the whole field
 * explicitly via opacity rather than relying on native styling.
 *
 * @since 4.2.1
 */
.bs360-ecp__field[data-awaits-house-count] {
	opacity: 0.4;
	transition: opacity 0.2s ease;
}

.bs360-ecp__field[data-awaits-house-count]:has(input:not(:disabled)) {
	opacity: 1;
}

.bs360-ecp__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--bs360-color-heading);
}

.bs360-ecp__label-optional {
	font-weight: 400;
	color: var(--bs360-color-muted);
}

/**
 * Custom range slider (Punkte 1, 4, 7). Native appearance komplett
 * entfernt, damit Track und Thumb vollständig selbst gestaltet werden
 * können - das behebt nebenbei auch die Reichweite: mit nativer
 * Browser-Darstellung reservieren manche Browser/Betriebssysteme ein
 * paar Pixel Rand für die Kugel-Form am Anfang/Ende, mit appearance:none
 * zeichnen wir Track und Thumb selbst über die volle Breite des Inputs.
 *
 * @since 4.0.3
 */
.bs360-ecp__slider {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px; /* reserviert Platz für den 18px-Thumb, ohne Hover-Layout-Sprung */
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

/**
 * Track: heller Rest-Balken, davor ein gruener Fuell-Balken (Gradient
 * 300->500) bis zum aktuellen Wert. Der Fuellstand kommt ueber die
 * CSS-Variable --bs360-fill-pct, die calculator.js bei jeder
 * Wertaenderung setzt (auf dem Input selbst, sie vererbt sich in die
 * Pseudo-Elemente). WebKit hat kein natives "Fill"-Pseudo-Element,
 * deshalb der Gradient-Trick mit hartem Farbwechsel bei fill-pct;
 * Firefox hat mit ::-moz-range-progress ein echtes Pendant, dessen
 * Breite der Browser selbst passend zum Wert setzt.
 *
 * Masse und Thumb-Optik (weiss, 4px farbiger Rahmen, 18px) an
 * https://preline.co/docs/components/advanced-range-slider.html angelehnt.
 */
.bs360-ecp__slider {
	--bs360-fill-pct: 0%;
}

.bs360-ecp__slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--bs360-color-primary-light) 0%,
		var(--bs360-color-primary) var(--bs360-fill-pct),
		var(--bs360-color-border) var(--bs360-fill-pct),
		var(--bs360-color-border) 100%
	);
}

.bs360-ecp__slider::-moz-range-track {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--bs360-color-border);
}

.bs360-ecp__slider::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient( to right, var(--bs360-color-primary-light), var(--bs360-color-primary) );
}

/* Thumb: weiss mit gruenem Rahmen (wie Preline), bei Hover 2x groesser (animiert, Punkt 4 letzte Runde) */
.bs360-ecp__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -5px; /* (18px Thumb - 8px Track) / 2, zentriert den Thumb auf dem Track */
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--bs360-color-primary);
	transition: transform 0.2s ease;
}

.bs360-ecp__slider:hover::-webkit-slider-thumb {
	transform: scale(2);
}

.bs360-ecp__slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--bs360-color-primary);
	transition: transform 0.2s ease;
}

.bs360-ecp__slider:hover::-moz-range-thumb {
	transform: scale(2);
}

.bs360-ecp__slider-scale {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	column-gap: 0.75rem;
	margin-top: 0.5rem;
}

.bs360-ecp__slider-scale-min,
.bs360-ecp__slider-scale-max {
	font-size: 0.75rem;
	color: var(--bs360-color-muted);
}

.bs360-ecp__slider-scale-max {
	text-align: right;
}

.bs360-ecp__slider-output {
	font-weight: 600;
	text-align: center;
	color: var(--bs360-color-primary-contrast);
}

.bs360-ecp__slider-output--standalone {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
}

.bs360-ecp__field input[type="number"] {
	width: 100%;
	max-width: 220px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--bs360-color-border);
	border-radius: 6px;
	font: inherit;
}

/**
 * Step 3A/3B's precise room-count field (4.1.1): a range slider (1er-
 * Schritte) with a coupled number input directly beside it - the slider
 * covers the branch's full min/max span at a glance, the number input
 * lets you jump straight to a large value (e.g. bis 2000 bei Kliniken)
 * without dragging through the whole range.
 */
.bs360-ecp__rooms-fine-row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.bs360-ecp__rooms-fine-row .bs360-ecp__slider {
	flex: 1;
}

.bs360-ecp__rooms-fine-row input[type="number"] {
	flex: 0 0 auto;
	width: 90px;
	max-width: 90px;
}

@media (max-width: 480px) {
	.bs360-ecp__rooms-fine-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.bs360-ecp__rooms-fine-row input[type="number"] {
		width: 100%;
		max-width: none;
	}
}

.bs360-ecp__subtext {
	margin: 0.4rem 0 0;
	color: var(--bs360-color-muted);
	font-size: 0.9rem;
}

/* ---------- Step 1: branch cards ---------- */

/* Punkt: an das Step-2-Energieform-Button-Styling angeglichen (4.0.15),
   Layout auf feste 2+3+3-Aufteilung umgestellt (4.0.16, user-specified,
   fixed at exactly 8 branches - not meant to adapt to a different count).
   6-Spalten-Basis: die ersten zwei Karten (Zeile 1) nehmen je 3 von 6
   Spalten ein (zusammen die volle Breite), die uebrigen sechs Karten
   (Zeile 2+3) je 2 von 6 Spalten (3 pro Zeile). Nur die 2/6-Karten
   bekommen aspect-ratio (dadurch quadratisch und sie bestimmen die
   Zeilenhoehe); die 3/6-Karten in Zeile 1 bekommen kein eigenes
   aspect-ratio, CSS Grid richtet sie automatisch auf die Hoehe der
   groessten Karte in ihrer Grid-Zeile aus - dadurch erben sie die Hoehe
   von Zeile 2, ohne selbst quadratisch zu sein (sie sind breiter als
   hoch, da sie sich die Breite von drei Kacheln auf nur zwei aufteilen).
*/
.bs360-ecp__branch-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.75rem;
	margin-bottom: 1rem;
	/* container-type: die Hoehenformel der ersten zwei Karten (siehe
	   .bs360-ecp__branch-card:nth-child(-n+2) unten) braucht die BREITE
	   dieses Grids als Referenz, nicht seine Hoehe (die selbst vom Inhalt
	   abhaengt - ein normales calc(100% - ...) wuerde sich faelschlich
	   auf die Grid-Hoehe beziehen). Container Queries (cqw = 1% der
	   Container-Breite) loesen das zirkulaere Problem. */
	container-type: inline-size;
}

.bs360-ecp__branch-card {
	position: relative;
	grid-column: span 2;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid var(--bs360-color-border);
	border-radius: 8px;
	background-color: #f6f7f7;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--bs360-color-text);
	overflow: hidden;
	transition: border-color 0.12s ease;
}

/* @changed 4.1.6: opacity in der transition-Liste ergaenzt - .has-bg-image
   ist spezifischer als das einfache .bs360-ecp__branch-card aus dem
   Hover-Dimm-Block weiter unten, transition wird also komplett ersetzt
   statt vereinigt. Ohne opacity hier wuerde der Dimm-Fade bei Bild-Karten
   hart springen statt weich einzublenden (identischer Fund/Fix wie bei
   .bs360-ecp__energy-button.has-bg-image). */
.bs360-ecp__branch-card.has-bg-image {
	filter: grayscale(1);
	transition: filter 0.15s ease, border-color 0.12s ease, opacity 0.2s ease;
}

/* Erste zwei Karten (Hotels, Pflege in der shipped-Reihenfolge): volle
   Breite auf zwei statt drei Kacheln aufgeteilt (span 3 von 6 statt 2).
   Wichtig: Zeile 1 (diese beiden Karten) und Zeile 2 (die quadratischen
   span-2-Karten) sind in CSS Grid ZWEI GETRENNTE Grid-Zeilen (2x span 3
   = 6 = eine volle Zeile, danach beginnt automatisch die naechste Zeile)
   - es gibt keine implizite Hoehen-Vererbung zwischen ihnen. Die Hoehe
   wird deshalb explizit per calc() aus der Containerbreite berechnet:
   die Formel bildet exakt die Breite (= Hoehe, wegen aspect-ratio 1/1)
   einer span-2-Kachel nach (2 Spaltenbreiten + 1 Gap dazwischen, bei 6
   Spalten und 5 Gaps insgesamt im Grid). */
.bs360-ecp__branch-card:nth-child(-n+2) {
	grid-column: span 3;
	aspect-ratio: auto;
	height: calc((100cqw - 5 * 0.75rem) / 6 * 2 + 0.75rem);
}

.bs360-ecp__branch-card.has-bg-image:hover,
.bs360-ecp__branch-card.has-bg-image:focus-visible,
.bs360-ecp__branch-card.has-bg-image.is-selected {
	filter: grayscale(0);
}

.bs360-ecp__branch-card:hover,
.bs360-ecp__branch-card:focus-visible {
	border-color: var(--bs360-color-primary);
}

.bs360-ecp__branch-card.is-selected {
	border-color: var(--bs360-color-primary);
}

/*
 * Punkt: beim Hover ueber eine Branchenkarte sollen alle anderen Karten im
 * Grid blasser werden, damit die gehoverte Karte optisch hervorsticht.
 *
 * @changed 4.1.5: vorher reagierte der Dimm-Effekt auf
 * :has(.branch-card:hover) - das griff nur, solange der Mauszeiger sich
 * exakt ueber einer Karte befand. Beim Wechsel zur naechsten Kachel
 * ueberquert die Maus zwangslaeufig kurz den Grid-Gap (0.75rem), wo keine
 * Karte gehovert ist; :has() wurde dabei fuer einen Frame false, alle
 * Karten sprangen zurueck auf volle Opazitaet und dann sofort wieder
 * zurueck - sichtbares Flackern. Fix: der Ein/Aus-Trigger ist jetzt
 * .bs360-ecp__branch-grid:hover selbst (der Gap liegt INNERHALB der
 * Grid-Container-Flaeche, die Maus verlaesst den Container beim Wechsel
 * zwischen Kacheln also nie) - :has() wird nur noch benutzt, um
 * zusaetzlich zu bestimmen, WELCHE Karte hell bleiben soll, nicht mehr OB
 * gedimmt wird.
 */
@media (hover: hover) {
	.bs360-ecp__branch-grid:hover .bs360-ecp__branch-card {
		opacity: 0.6;
		transition: opacity 0.2s ease, border-color 0.12s ease;
	}

	.bs360-ecp__branch-grid:has(.bs360-ecp__branch-card:hover):hover
		.bs360-ecp__branch-card:hover {
		opacity: 1;
	}
}

/* Mobile (4.0.17): das 2+3+3-Desktop-Sonderlayout (breite Zeile 1, dann
   3+3 quadratisch) macht auf schmalen Screens keinen Sinn mehr - bei nur
   2 Spalten gesamt wuerde "3 von 6 Spalten" das Grid sprengen. Stattdessen
   einheitlich 2 quadratische Spalten fuer alle 8 Karten. Feste 2 Spalten
   statt einer weiteren Breakpoint-Abstufung, siehe Nutzer-Entscheidung:
   erst mit 2 Spalten testen, ggf. spaeter feiner abstufen. */
@media (max-width: 767px) {
	.bs360-ecp__branch-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bs360-ecp__branch-card,
	.bs360-ecp__branch-card:nth-child(-n+2) {
		grid-column: span 1;
		aspect-ratio: 1 / 1;
		height: auto;
	}
}

.bs360-ecp__branch-card-label {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: 0.4rem 0.5rem;
	background: rgba(255, 255, 255, 0.85);
	color: var(--bs360-color-heading);
	font: inherit;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bs360-ecp__branch-card:not(.has-bg-image) .bs360-ecp__branch-card-label {
	position: static;
	inset: auto;
	background: none;
	padding: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-width: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Step 2: energy type buttons ---------- */

.bs360-ecp__energy-grid {
	display: grid;
	/* auto-fit + 1fr statt auto-fill + fester Maximalbreite (4.0.11): vorher
	   blieben die Spalten auf max. 140px begrenzt und das Grid linksbuendig,
	   dadurch blieb rechts sichtbarer Leerraum bei breiteren Containern -
	   die Buttons sollten aber die volle verfuegbare Breite ausfuellen und
	   ihre Hoehe (per aspect-ratio) daraus proportional ergeben, nicht
	   umgekehrt. minmax(90px, 1fr) haelt die Buttons auf sehr schmalen
	   Breiten trotzdem nutzbar gross (Umbruch in eine weitere Zeile statt
	   winziger Kacheln). */
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.bs360-ecp__energy-button {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-height: 200px;
	padding: 0;
	border: 2px solid var(--bs360-color-border);
	border-radius: 8px;
	background-color: #f6f7f7;
	background-size: cover;
	background-position: center;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.12s ease;
}

/* Buttons mit Hintergrundbild (Gas/Strom/Heizoel/Fernwaerme, kein Bild bei
   "Sonstiges/Eigenerzeugung", siehe Backend-Tab "Step 2"): Bild
   standardmaessig in Graustufen, nur bei Hover/Fokus/Auswahl in Farbe -
   macht den ausgewaehlten Zustand eindeutiger erkennbar.
   @changed: opacity in der transition-Liste ergaenzt - .has-bg-image ist
   spezifischer als das einfache .bs360-ecp__energy-button aus dem
   Hover-Dimm-Block weiter unten, transition wird also komplett ersetzt statt
   vereinigt. Ohne opacity hier wuerde der Dimm-Fade bei Bild-Buttons hart
   springen statt weich einzublenden. */
.bs360-ecp__energy-button.has-bg-image {
	filter: grayscale(1);
	transition: filter 0.15s ease, border-color 0.12s ease, opacity 0.2s ease;
}

.bs360-ecp__energy-button.has-bg-image:hover,
.bs360-ecp__energy-button.has-bg-image:focus-visible,
.bs360-ecp__energy-button.has-bg-image[aria-checked="true"] {
	filter: grayscale(0);
}

.bs360-ecp__energy-button[aria-checked="true"] {
	border-color: var(--bs360-color-primary);
}

/*
 * Punkt: gleicher Hover-Dimm-Effekt wie bei den Branchenkarten (Step 1,
 * .bs360-ecp__branch-grid weiter oben) - beim Hover ueber einen
 * Energieform-Button werden alle anderen Buttons blasser, damit der
 * gehoverte Button hervorsticht. Trigger liegt auf dem Grid-Container
 * selbst (:hover), nicht auf den einzelnen Buttons, damit das Ueberqueren
 * des Grid-Gaps zwischen zwei Buttons kein Flackern verursacht (siehe
 * 4.1.5-Fix bei den Branchenkarten fuer die ausfuehrliche Begruendung).
 */
@media (hover: hover) {
	.bs360-ecp__energy-grid:hover .bs360-ecp__energy-button {
		opacity: 0.6;
		transition: opacity 0.2s ease, border-color 0.12s ease;
	}

	.bs360-ecp__energy-grid:has(.bs360-ecp__energy-button:hover):hover
		.bs360-ecp__energy-button:hover {
		opacity: 1;
	}
}

/* Label-Text: bei Bild-Buttons unten mit halbtransparentem weissen
   Hintergrund fuer Lesbarkeit vor beliebigem Bildmotiv; bei Buttons ohne
   Bild (Fernwaerme, Sonstiges) einfach zentriert ohne eigenen Hintergrund. */
.bs360-ecp__energy-button-label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.4rem 0.5rem;
	background: rgba(255, 255, 255, 0.85);
	color: var(--bs360-color-heading);
	font: inherit;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}

.bs360-ecp__energy-button:not(.has-bg-image) .bs360-ecp__energy-button-label {
	position: static;
	inset: auto;
	background: none;
	padding: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* "Live"-Badge (4.0.9, Position korrigiert 4.0.10): kennzeichnet
   Energieformen mit Live-Preisquelle (Strom, Gas, Heizoel). Oben links auf
   dem Button positioniert, mit Abstand zum Rand statt darueber hinauszuragen
   (top/left positiv statt negativ). Bordeaux 500 als Akzentfarbe (siehe
   Farbvariablen-Kommentar oben), weisser Text fuer WCAG-AA-Kontrast
   (6,97:1). */
.bs360-ecp__live-badge {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background-color: var(--bs360-color-accent);
	color: #FFFFFF;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

/* Aufnahme-Punkt (4.0.11): dezentes Pulsieren per Opacity statt An/Aus, damit
   es wie eine "live"-Anzeige wirkt (Kamera-Aufnahme-Symbol), ohne im
   Formular abzulenken. prefers-reduced-motion respektiert. */
.bs360-ecp__live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #FFFFFF;
	flex-shrink: 0;
	animation: bs360-ecp-live-pulse 1.8s ease-in-out infinite;
}

@keyframes bs360-ecp-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.bs360-ecp__live-dot {
		animation: none;
	}
}

/* ---------- Navigation buttons ---------- */

.bs360-ecp__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.bs360-ecp__nav .bs360-ecp__button--secondary {
	flex: 0 0 auto;
}

.bs360-ecp__nav .bs360-ecp__button--primary {
	flex: 1 1 0%;
	justify-content: center;
}

.bs360-ecp__button {
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	border: 2px solid var(--bs360-color-primary-contrast);
	background: var(--bs360-color-primary-contrast);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.bs360-ecp__button--secondary {
	background: transparent;
	border-color: var(--bs360-color-primary-contrast);
	color: var(--bs360-color-primary-contrast);
}

.bs360-ecp__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bs360-ecp__link-button {
	display: inline-block;
	margin: 0 0 1rem;
	background: none;
	border: none;
	padding: 0;
	color: var(--bs360-color-primary-contrast);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

@media (min-width: 768px) {
	.bs360-ecp .bs360-ecp__nav {
		grid-column: 1 / -1;
	}
}

/* ---------- Step 4: contact form ---------- */

.bs360-ecp__form .bs360-ecp__field input[type="text"],
.bs360-ecp__form .bs360-ecp__field input[type="email"],
.bs360-ecp__form .bs360-ecp__field input[type="tel"],
.bs360-ecp__form .bs360-ecp__field select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--bs360-color-border);
	border-radius: 6px;
	font: inherit;
}

.bs360-ecp__field--consent {
	font-size: 0.9rem;
}

.bs360-ecp__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bs360-ecp__form-error {
	color: var(--bs360-color-error);
	font-weight: 600;
}

.bs360-ecp__spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bs360-spin 0.6s linear infinite;
}

@keyframes bs360-spin {
	to { transform: rotate(360deg); }
}

.bs360-ecp__success {
	background: var(--bs360-color-result-bg);
	border: 1px solid var(--bs360-color-primary);
	border-radius: 8px;
	padding: 1.5rem;
	font-weight: 600;
}

/* ---------- Result panel ---------- */

.bs360-ecp__result {
	background: var(--bs360-color-result-bg);
	border: 1px solid #E1F1D0;
	border-radius: 10px;
	padding: 1.5rem 1.5rem 2.5rem;
}

@media (min-width: 768px) {
	.bs360-ecp__result {
		position: sticky;
		top: var(--bs360-scroll-offset, 110px);
	}
}

.bs360-ecp__result-heading {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--bs360-color-heading);
	font-weight: 600;
}

/* Admin-editierbarer Einleitungstext (4.0.19), direkt nach der
   Ueberschrift. Wird per JS befuellt (siehe updateResultIntro()) und
   bleibt leer/unsichtbar, solange kein Text im Backend hinterlegt ist -
   kein zusaetzlicher Leerraum ohne Inhalt. */
.bs360-ecp__result-intro {
	margin: 0 0 1rem;
	color: var(--bs360-color-text);
}

.bs360-ecp__result-intro:empty {
	display: none;
}

.bs360-ecp__result-intro p {
	margin: 0 0 0.5rem;
}

.bs360-ecp__result-intro p:last-child {
	margin-bottom: 0;
}

.bs360-ecp__result-placeholder {
	margin: 0;
	color: var(--bs360-color-muted);
}

.bs360-ecp__result-metrics {
	margin: 0 0 1.25rem;
}

.bs360-ecp__result-metric {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bs360-ecp__result-metric dt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	/* line-height:1 statt geerbtem Wert (4.0.21): SVGs sind
	   Inline-Elemente mit eigenem Baseline-Verhalten, das auch in einem
	   Flex-Container leicht zu einem 1-2px-Versatz gegenueber Text
	   fuehren kann, selbst mit align-items:center. line-height:1 auf dt
	   UND dd sorgt dafuer, dass beide Zeilenboxen exakt gleich hoch sind
	   und nicht durch geerbte, ggf. abweichende line-height-Werte
	   optisch verschoben wirken. */
	line-height: 1;
	color: var(--bs360-color-muted);
}

.bs360-ecp__result-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	/* display:block entfernt die SVG-Standard-Baseline-Ausrichtung
	   (Inline-Element), die sonst einen minimalen vertikalen Versatz
	   gegenueber dem Label-Text verursachen kann (4.0.21). */
	display: block;
}

.bs360-ecp__result-value {
	flex: 1 1 auto;
	line-height: 1;
	text-align: right;
	font-weight: 700;
}

.bs360-ecp__result-subheading {
	margin: 0 0 2.25rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--bs360-color-heading);
}

/* ---------- Energy class scale (EU-EPBD A-G) ---------- */

.bs360-ecp__ec-scale {
	display: flex;
	gap: 2px;
	position: relative;
}

.bs360-ecp__ec-seg {
	flex: 1;
	position: relative;
	padding: 0.4rem 0.2rem;
	text-align: center;
	font-weight: 700;
	color: #fff;
	font-size: 0.8rem;
}

.bs360-ecp__ec-seg[data-class="A"] { background: var(--bs360-ec-a); }
.bs360-ecp__ec-seg[data-class="B"] { background: var(--bs360-ec-b); }
.bs360-ecp__ec-seg[data-class="C"] { background: var(--bs360-ec-c); }
.bs360-ecp__ec-seg[data-class="D"] { background: var(--bs360-ec-d); }
.bs360-ecp__ec-seg[data-class="E"] { background: var(--bs360-ec-e); }
.bs360-ecp__ec-seg[data-class="F"] { background: var(--bs360-ec-f); }
.bs360-ecp__ec-seg[data-class="G"] { background: var(--bs360-ec-g); }

/* Punkt 4: Rahmen um die aktuelle Klasse, zusaetzlich zum Pfeil-Label. */
.bs360-ecp__ec-seg--current {
	outline: 3px solid var(--bs360-color-heading);
	outline-offset: -3px;
	position: relative;
	z-index: 2;
}

.bs360-ecp__ec-marker {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--bs360-color-text);
	transition: left 0.3s ease;
}

.bs360-ecp__ec-marker::after {
	/* CSS-Unicode-Escape statt rohem UTF-8-Zeichen (4.0.11): ein direkt
	   eingebettetes "▼" wurde auf mind. einer Live-Umgebung als "â–¼"
	   dargestellt - typisches Mojibake, wenn Server oder Browser die Datei
	   ohne korrekten UTF-8-Charset-Hinweis ausliefern/interpretieren. Die
	   Escape-Schreibweise (\25bc = U+25BC BLACK DOWN-POINTING TRIANGLE) ist
	   reines ASCII und dadurch unabhaengig vom tatsaechlichen Datei- oder
	   Uebertragungs-Encoding korrekt. */
	content: "\25bc";
	display: block;
	text-align: center;
}

/* Punkt 4: Potenzial als eigenständiger Balken unter der Skala statt
   einem Pfeil auf einer Klasse. Position/Breite kommen per Inline-Style
   von updateEnergyClassMarkers() in calculator.js. */
.bs360-ecp__ec-potential {
	position: absolute;
	top: 100%;
	margin-top: 6px;
	text-align: center;
	transition: left 0.3s ease, width 0.3s ease;
}

.bs360-ecp__ec-potential-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--bs360-color-primary-contrast);
	margin-bottom: 2px;
}

.bs360-ecp__ec-potential-label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--bs360-color-primary-contrast);
	white-space: nowrap;
}

/* ---------- Price display (Step 3A/3B) ---------- */

.bs360-ecp__price-display {
	font-size: 0.9rem;
	color: var(--bs360-color-muted);
	margin-top: -0.5rem;
	margin-bottom: 1.5rem;
}

/* ---------- Mobile fixed footer panel (concept 20.3) ---------- */

.bs360-ecp__footer-panel {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--bs360-color-result-bg);
	border-top: 2px solid var(--bs360-color-primary);
	padding: 0.6rem 1rem env(safe-area-inset-bottom, 0px);
}

.bs360-ecp__footer-panel__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	text-align: center;
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.bs360-ecp__footer-panel__ec {
	display: flex;
	gap: 2px;
	height: 6px;
}

.bs360-ecp__footer-panel__ec-seg {
	flex: 1;
	opacity: 0.35;
}

.bs360-ecp__footer-panel__ec-seg[data-class="A"] { background: var(--bs360-ec-a); }
.bs360-ecp__footer-panel__ec-seg[data-class="B"] { background: var(--bs360-ec-b); }
.bs360-ecp__footer-panel__ec-seg[data-class="C"] { background: var(--bs360-ec-c); }
.bs360-ecp__footer-panel__ec-seg[data-class="D"] { background: var(--bs360-ec-d); }
.bs360-ecp__footer-panel__ec-seg[data-class="E"] { background: var(--bs360-ec-e); }
.bs360-ecp__footer-panel__ec-seg[data-class="F"] { background: var(--bs360-ec-f); }
.bs360-ecp__footer-panel__ec-seg[data-class="G"] { background: var(--bs360-ec-g); }

.bs360-ecp__footer-panel__ec-seg--current,
.bs360-ecp__footer-panel__ec-seg--potential {
	opacity: 1;
}

@media (max-width: 767px) {
	.bs360-ecp {
		padding-bottom: var(--bs360-footer-height);
	}

	.bs360-ecp__footer-panel.is-visible {
		display: block;
	}
}