/*
 * Verfahrenswaehler auf der neuen Startseite (Post 680).
 *
 * Elementors Atomic-Widgets kennen keine "aktiv/inaktiv"-Zustaende und keine
 * beliebigen Verlaufs-Hintergruende. Diese Datei uebernimmt genau diese zwei
 * Dinge, alles andere (Schrift, Abstaende, Grundfarben) steckt im generierten
 * Elementor-JSON. Nur auf der Seite "neu-startseite" eingebunden.
 */

/* Panel-Umschaltung: nur das aktive Verfahren ist sichtbar */
.vw-panel {
	display: none !important;
}
.vw-panel.is-active {
	display: grid !important;
}

/* Alle fuenf Panels gleich hoch wie das groesste (Textil, 720px) - sonst
   veraendert sich die Boxhoehe je nachdem, welches Verfahren ausgewaehlt ist. */
.vw-panel.is-active {
	min-height: 720px;
}

/* Aktiver Tab: Signalgruen statt der dunklen Standardflaeche */
.vw-tab {
	cursor: pointer;
}
.vw-tab.is-active {
	background-color: #a8e51f !important;
	border-color: #a8e51f !important;
}
.vw-tab.is-active .vw-tab-nummer,
.vw-tab.is-active .vw-tab-label {
	color: #1c231a !important;
}
.vw-tab.is-active .vw-tab-nummer {
	color: #3f6b12 !important;
}

/*
 * Schreibmaschinenschrift fuer Bildunterschriften und Tab-Nummern.
 *
 * Die Vorlage setzt hier "ui-monospace, monospace". Elementor schreibt jeden
 * Schriftfamilien-Wert in Anfuehrungszeichen ins CSS, also font-family:
 * "monospace". Damit sucht der Browser eine Schrift mit dem NAMEN monospace
 * statt das generische Schluesselwort zu nehmen - gemessen: identische
 * Textbreite wie bei einem frei erfundenen Schriftnamen. Deshalb steht die
 * Familie hier von Hand.
 */
.vw-mono,
.vw-tab-nummer {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Bildplatzhalter im Panel: Streifenmuster wie beim Panorama-Bild im Hero */
.vw-bildplatzhalter {
	background-color: #242830;
	background-image: repeating-linear-gradient(
		115deg,
		rgba(240, 241, 243, 0.05) 0px,
		rgba(240, 241, 243, 0.05) 2px,
		transparent 2px,
		transparent 14px
	);
}

@media (max-width: 900px) {
	/*
	 * Die fuenf Verfahren nebeneinander, jedes nur so breit wie sein Name.
	 * Ein festes Raster (frueher zwei gleich breite Spalten) verschenkt Platz:
	 * "3D Druck" braucht halb so viel wie "Gravur & Schnitt". Mit Umbruch
	 * passen je nach Bildschirmbreite zwei bis drei in eine Zeile.
	 */
	.vw-tabs {
		display: flex !important;
		flex-wrap: wrap !important;
		grid-template-columns: none !important;
		gap: 8px !important;
	}

	.vw-tabs > * {
		flex: 0 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
	}

	.vw-panel.is-active {
		display: flex !important;
		flex-direction: column;
	}
}