:root { --radius: 1.25rem; }
html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01" 1, "ss02" 1; }
.navbar-blur { backdrop-filter: saturate(180%) blur(8px); background: color-mix(in oklab, var(--bs-body-bg), transparent 35%); }
.navbar.scrolled { background: var(--bs-body-bg) !important; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.hero {
    min-height: 78vh;
    display: grid; place-items: center;
    background: radial-gradient(1200px 800px at 85% -10%, rgba(13,110,253,.07), transparent 60%),
                radial-gradient(900px 600px at -10% 110%, rgba(32,201,151,.08), transparent 60%);
}
.section-pad { padding: 5rem 0; }
.pill { border-radius: 999px; }
.card-soft { border: 1px solid color-mix(in oklab, var(--bs-border-color), transparent 60%); border-radius: var(--radius); }
.icon-badge { width: 4rem; height: 3rem; border-radius: .9rem; display:grid;place-items:center; }
.lead-tight { font-size: 1.1rem; line-height: 1.6; }
.grid-3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(12, 1fr); }
.grid-3 > * { grid-column: span 12; }
@media (min-width: 992px) { .grid-3 > * { grid-column: span 6; } }
.step { position: relative; padding-left: 2.5rem; }
.step::before { content: ""; position: absolute; left: .625rem; top: 1.25rem; bottom: -1.25rem; width: 2px; background: color-mix(in oklab, var(--bs-primary), transparent 55%); }
.step:last-child::before { bottom: .35rem; }
.step .dot { position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in oklab, var(--bs-primary), white 60%); box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--bs-primary), transparent 80%); display: flex; align-items: center; justify-content: center; }
.muted-box { background: color-mix(in oklab, var(--bs-body-color), transparent 96%); border: 1px dashed color-mix(in oklab, var(--bs-border-color), transparent 35%); border-radius: var(--radius); }
footer a { text-decoration: none; }

/* Vorgehen section - make right column smaller for better spacing */
#vorgehen .col-lg-7 {
  flex: 0 0 calc(100% * 5 / 12);
  max-width: calc(100% * 5 / 12);
  margin-left: auto;
}

/* Reset margin on smaller screens */
@media (max-width: 991px) {
  #vorgehen .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
}
