/* Voith Referenzen: Ausgabe. Schriften und Farben aus der Website (Elementor-Einstellungen), mit Ersatzwerten. */
.vr-fokus, .vr-raster, .vr-praxis, .vr-filter {
	--vr-orange: var(--e-global-color-secondary, #ED7029);
	--vr-text: var(--e-global-color-text, #F5F7FB);
	--vr-leise: rgba(245, 247, 251, 0.72);
	--vr-linie: rgba(255, 255, 255, 0.10);
	--vr-titel: var(--e-global-typography-primary-font-family, "Montserrat"), sans-serif;
	--vr-schrift: var(--e-global-typography-text-font-family, "Poppins"), sans-serif;
	font-family: var(--vr-schrift);
}
.vr-fokus figure, .vr-karte figure { margin: 0; }
.vr-art { display: block; font-family: var(--vr-titel); font-size: 11.5px; font-weight: 700; line-height: 1.35; letter-spacing: 1.4px; text-transform: uppercase; color: var(--vr-orange); margin: 0; }
.vr-kunde { font-family: var(--vr-titel); font-weight: 700; color: var(--vr-text); margin: 0; }

/* Projekte im Fokus: Bild links groß, Text rechts */
.vr-fokus { display: grid; gap: 56px; }
.vr-fokus-eintrag { display: grid; grid-template-columns: 56fr 44fr; gap: 56px; align-items: center; }
.vr-fokus-eintrag img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--vr-linie); box-shadow: 0 40px 90px -50px rgba(237, 112, 41, 0.45); }
.vr-fokus-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vr-fokus-text .vr-kunde { font-size: 22px; line-height: 1.25; }
.vr-ort { margin: 0; font-size: 14px; color: var(--vr-leise); }
.vr-fokus-text dl { margin: 6px 0 0; display: grid; gap: 10px; }
.vr-fokus-text dt { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--vr-orange); }
.vr-fokus-text dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: rgba(245, 247, 251, 0.86); }
.vr-stimme { margin: 6px 0 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--vr-orange); font-size: 15px; line-height: 1.55; color: var(--vr-text); font-style: italic; }
.vr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.vr-tags span { font-size: 12px; line-height: 1.4; color: var(--vr-leise); border: 1px solid var(--vr-linie); border-radius: 999px; padding: 3px 10px; }
.vr-link { align-self: flex-start; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--vr-orange); text-decoration: none; }
.vr-link::after { content: " \2192"; }

/* Filter */
.vr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
/* [data-filter] macht die Regeln stärker als der Knopfstil der Website (.elementor-kit-68 button) */
.vr-filter button[data-filter] { font-family: var(--vr-schrift); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgba(245, 247, 251, 0.86); cursor: pointer; box-shadow: none; }
.vr-filter button[data-filter][aria-pressed="true"], .vr-filter button[data-filter]:hover, .vr-filter button[data-filter]:focus { border-color: var(--vr-orange); color: var(--vr-orange); background: rgba(237, 112, 41, 0.08); }

/* Karten: Raster auf der Referenzseite, Praxis auf den Leistungsseiten */
.vr-raster, .vr-praxis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vr-praxis.vr-spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vr-praxis.vr-spalten-1 { grid-template-columns: minmax(0, 560px); }
.vr-karte { display: flex; flex-direction: column; border: 1px solid var(--vr-linie); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.025); text-decoration: none; transition: border-color .2s, transform .2s; }
.vr-karte[hidden] { display: none !important; }
.vr-karte:hover { border-color: rgba(237, 112, 41, 0.55); transform: translateY(-2px); }
.vr-karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #0B0C10; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.vr-karte > div { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.vr-karte .vr-kunde { font-size: 16px; line-height: 1.3; }
.vr-zeile { font-size: 13.5px; line-height: 1.45; color: var(--vr-leise); }
.vr-raster .vr-cta-pc-2 { grid-column: span 2; }
.vr-raster .vr-cta-pc-3 { grid-column: span 3; }
.vr-cta { justify-content: center; background: linear-gradient(140deg, rgba(237, 112, 41, 0.16), rgba(237, 112, 41, 0.03)); border-color: rgba(237, 112, 41, 0.45); }
.vr-cta > div { padding: 26px; gap: 10px; }
.vr-cta .vr-kunde { font-size: 19px; }
.vr-knopf { align-self: flex-start; margin-top: 6px; font-family: var(--vr-titel); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0B0C10; background: var(--vr-orange); border-radius: 8px; padding: 11px 16px; }

@media (max-width: 1024px) {
	.vr-praxis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.vr-fokus { gap: 44px; }
	.vr-fokus-eintrag { grid-template-columns: 1fr; gap: 20px; }
	.vr-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.vr-raster .vr-cta.vr-cta-handy-1 { grid-column: span 1; }
	.vr-raster .vr-cta.vr-cta-handy-2 { grid-column: span 2; }
	.vr-raster .vr-karte > div { padding: 10px 12px 12px; }
	.vr-raster .vr-kunde { font-size: 14px; }
	.vr-raster .vr-zeile { font-size: 12.5px; }
	.vr-praxis, .vr-praxis.vr-spalten-2, .vr-praxis.vr-spalten-1 { grid-template-columns: 1fr; }
}