/* Startseite: Produkt-Auswahl. Desktop = grosse Karte tauschen, Mobil = Accordion.
   Nur Verhalten/Feinschliff, kein Redesign der Karten. */

.bwm-sel {
	cursor: pointer;
}

/* Detail-Link unter dem Bestell-Button – CI: Vertrauensblau, zurückhaltend, kein
   zweiter „Button", nur ein klarer Verweis. */
.bwm-detail-link {
	display: inline-block;
	color: #083957;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.bwm-detail-link::after {
	content: " \2192";
	text-decoration: none;
}

.bwm-detail-link:hover {
	color: #0a2b40;
}

/* "Bald verfügbar"-Pill auf der grossen Karte hell halten */
.bwm-stage .bwm-pill-soon {
	background-color: rgba(255, 255, 255, 0.9) !important;
	color: #4c75a0 !important;
	font-size: 12px;
}

/* ================================================================
   Desktop (≥ 960px): grosse linke Karte wird ausgetauscht
   ================================================================ */
@media (min-width: 960px) {

	.bwm-sel--active {
		box-shadow: 0 0 0 3px rgba(37, 61, 87, 0.28);
	}

	/* nur die aktive Stage-Karte zeigen */
	.bwm-stage:not(.bwm-stage--active) {
		display: none;
	}

	/* Gleiche Höhe wie die Auswahl-Spalte rechts → oben/unten bündig. */
	.bwm-stage.bwm-stage--active {
		min-height: var(--bwm-stage-h, 0);
		display: flex;
		flex-direction: column;
	}

	/* Produktkarte: Titel + Bild oben, Button + Link unten (füllt den Abstand).
	   `!important`, weil UIkit `.uk-margin-top` mit !important setzt. */
	.bwm-stage--product.bwm-stage--active > .uk-margin-top {
		margin-top: auto !important;
	}

	.bwm-stage--product.bwm-stage--active > .bwm-detail-link {
		margin-top: 12px;
	}

	/* "Bald verfügbar": Titel/Untertitel/Link mittig. */
	.bwm-stage--soon.bwm-stage--active {
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 14px;
	}

	.bwm-stage--soon > .el-title {
		margin: 0 !important;
		font-size: clamp(1.9rem, 2.6vw, 2.5rem);
		line-height: 1.15;
	}

	.bwm-stage--soon > .el-meta {
		margin: 0 !important;
		max-width: 30ch;
		font-size: 1.15rem;
	}

	.bwm-stage--soon > .bwm-detail-link {
		margin-top: 4px;
	}
}

/* ================================================================
   Mobil (< 960px): Karten klappen wie ein Accordion auf
   ================================================================ */
@media (max-width: 959px) {

	/* linke „grosse Karte"-Spalte entfällt – alles läuft über die Auswahl-Karten */
	.bwm-switch-stage-col {
		display: none;
	}

	.bwm-sel--accordion {
		cursor: pointer;
	}

	.bwm-sel--accordion .el-title {
		padding-right: 96px; /* Platz für die Pill oben rechts */
	}

	.bwm-reveal {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s ease;
	}

	/* die aufgeklappte Stage-Karte wird im Auswahl-Kärtchen „transparent" –
	   kein zweiter Rahmen, kein zweiter Hintergrund; Inhalt zentriert */
	.bwm-reveal > .bwm-stage {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		text-align: center;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 14px 0 2px !important;
		background: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* Titel/Untertitel/Pill stehen bereits auf der Karte selbst */
	.bwm-reveal .el-title,
	.bwm-reveal .el-meta,
	.bwm-reveal > .bwm-stage > .el-content {
		display: none;
	}

	/* Produktbild zentriert */
	.bwm-reveal picture {
		display: block;
		text-align: center;
	}

	.bwm-reveal .el-image {
		display: inline-block;
		max-width: 300px;
		width: 100%;
		height: auto;
	}

	.bwm-reveal .uk-margin-top {
		width: 100%;
	}

	.bwm-soon-note {
		margin: 0;
		color: #4c75a0;
		font-size: 0.95rem;
	}

	.bwm-reveal .bwm-detail-link {
		margin-top: 12px;
	}

	.bwm-sel--open {
		box-shadow: 0 0 0 3px rgba(37, 61, 87, 0.2);
	}
}