/* UMSA aktive Theme-Erweiterungen (layered nach styles.css). Greift über die data-Attribute am -Element: data-cards="full" vollflächige Service-Karten */ /* SERVICE-KARTEN: VOLLFLÄCHIG */ :root[data-cards="full"] .service-card { padding: 0; overflow: hidden; position: relative; } :root[data-cards="full"] .service-image { max-width: none; width: 100%; aspect-ratio: 16/10; border-radius: 0; border: none; margin: 0; border-bottom: 1px solid var(--gray-200); } :root[data-cards="full"] .service-card-head { padding: 24px 28px 0; margin-bottom: 16px; order: -1; position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; background: transparent; } :root[data-cards="full"] .service-card .service-icon { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :root[data-cards="full"] .service-card .service-card-num { background: rgba(20, 24, 31, 0.78); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 11px; } :root[data-cards="full"] .service-card h3, :root[data-cards="full"] .service-card .desc, :root[data-cards="full"] .service-card .bullets, :root[data-cards="full"] .service-card .service-link { padding-left: 28px; padding-right: 28px; } :root[data-cards="full"] .service-card h3 { padding-top: 22px; } :root[data-cards="full"] .service-card .service-link { padding-bottom: 24px; padding-top: 4px; } /* PROZESS: VIER SCHRITTE FARBLICH ABGESTUFT Harmonischer Verlauf Blau, Grün, gleiche Helligkeit & Sättigung wie das Marken-Grün. Rot bleibt exklusiv dem Notfall vorbehalten. */ .process-step:nth-child(1) { --step: oklch(0.6 0.1 232); --step-text: oklch(0.47 0.1 232); --step-soft: oklch(0.95 0.028 232); } .process-step:nth-child(2) { --step: oklch(0.6 0.1 205); --step-text: oklch(0.47 0.1 205); --step-soft: oklch(0.95 0.028 205); } .process-step:nth-child(3) { --step: oklch(0.6 0.1 178); --step-text: oklch(0.47 0.1 178); --step-soft: oklch(0.95 0.028 178); } .process-step:nth-child(4) { --step: oklch(0.6 0.1 152); --step-text: oklch(0.47 0.1 152); --step-soft: oklch(0.95 0.028 152); } /* farbiges, gefülltes Icon */ .process-step .process-icon { background: var(--step); border-color: transparent; color: #fff; box-shadow: 0 6px 16px color-mix(in oklab, var(--step) 32%, transparent); } /* Schrittnummer in Stufenfarbe, als farbiger Chip */ .process-step .process-num { display: inline-block; color: var(--step-text); background: var(--step-soft); padding: 4px 10px; border-radius: 999px; } /* Verbindungslinie im Verlauf zur nächsten Stufe */ .process-step:nth-child(1) .process-line { background: linear-gradient(90deg, oklch(0.6 0.1 232), oklch(0.6 0.1 205)); opacity: 0.55; } .process-step:nth-child(2) .process-line { background: linear-gradient(90deg, oklch(0.6 0.1 205), oklch(0.6 0.1 178)); opacity: 0.55; } .process-step:nth-child(3) .process-line { background: linear-gradient(90deg, oklch(0.6 0.1 178), oklch(0.6 0.1 152)); opacity: 0.55; }