.sff-finder-app {
  --sff-primary: #0c4a6e;
  --sff-accent: #f97316;
  --sff-navy: #082f49;
  --sff-muted: #5d7180;
  --sff-line: #d7e4ea;
  --sff-sky: #e7f5fb;
  color: #102a3a;
  font-family: inherit;
  line-height: 1.55;
}
.sff-finder-app * { box-sizing: border-box; }
.sff-finder-app h2, .sff-finder-app h3, .sff-finder-app h4 { color: var(--sff-navy); font-family: inherit; font-weight: 800; line-height: 1.08; }
.sff-hero { min-height: 590px; display: grid; grid-template-columns: 1fr; align-items: center; overflow: hidden; position: relative; isolation: isolate; padding: clamp(3rem, 7vw, 6rem); color: #fff; border-radius: 0 0 34px 34px; background-color: #06293e; }
.sff-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--sff-hero-image, url('../images/bootsfuehrerschein-hero.webp')); background-position: center 58%; background-size: cover; background-repeat: no-repeat; filter: brightness(var(--sff-hero-brightness, 108%)) saturate(var(--sff-hero-saturation, 110%)); transform: scale(1.002); }
.sff-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(var(--sff-overlay-angle, 90deg), rgb(4 35 53 / var(--sff-overlay-left, .55)) 0%, rgb(4 35 53 / var(--sff-overlay-left, .55)) var(--sff-overlay-start, 0%), rgb(4 43 65 / var(--sff-overlay-right, .08)) var(--sff-overlay-end, 65%), rgb(4 43 65 / var(--sff-overlay-right, .08)) 100%), linear-gradient(0deg, rgba(2,28,42,.18), transparent 55%); }
.sff-hero-copy { position: relative; z-index: 2; max-width: 790px; padding-top: 30px; }
.sff-hero h2 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(2.7rem, 6vw, 5.2rem); letter-spacing: -.055em; overflow-wrap: normal; word-break: normal; hyphens: auto; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.sff-hero-copy > p:not(.sff-eyebrow) { max-width: 650px; margin: 1.4rem 0 1.8rem; color: #d9edf5; font-size: clamp(1rem, 2vw, 1.25rem); }
.sff-eyebrow { margin: 0 0 .8rem !important; color: var(--sff-accent) !important; font-size: .78rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sff-hero ul { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; margin: 1.7rem 0 0; padding: 0; list-style: none; color: #d9edf5; font-size: .88rem; }
.sff-hero li::before { content: "✓"; margin-right: .45rem; color: #7dd3fc; font-weight: 800; }
.sff-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 0 1.25rem; border: 0; border-radius: 11px; font-weight: 800; text-decoration: none !important; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.sff-button:hover { transform: translateY(-2px); }
.sff-button-primary { color: #fff !important; background: var(--sff-accent) !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--sff-accent) 30%, transparent); }
.sff-button-ghost { color: var(--sff-primary) !important; border: 1px solid var(--sff-line) !important; background: #fff !important; }
.sff-hero-art { display: none; }
.sff-hero-art::before { content: ""; position: absolute; width: 380px; height: 380px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.sff-hero-art svg { position: relative; z-index: 1; width: min(520px, 100%); filter: drop-shadow(0 25px 28px rgba(0,0,0,.16)); }
.sff-sun { position: absolute; top: 1.5rem; right: 2.5rem; width: 72px; height: 72px; border-radius: 50%; background: var(--sff-accent); box-shadow: 0 0 55px color-mix(in srgb, var(--sff-accent) 50%, transparent); }
.sff-sail-back { fill: rgba(231,245,251,.95); }.sff-sail-front { fill: rgba(125,211,252,.78); }.sff-mast { stroke: #fff; stroke-width: 8; stroke-linecap: round; }.sff-boat { fill: #fff; }.sff-wave { fill: none; stroke: rgba(186,230,253,.75); stroke-width: 9; stroke-linecap: round; }
.sff-finder-section { max-width: 1040px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 1rem; }
.sff-section-heading { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.sff-section-heading h3, .sff-rules > h3 { margin: 0; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.045em; }
.sff-section-heading > p:last-child { color: var(--sff-muted); }
.sff-card { overflow: hidden; border: 1px solid rgba(12,74,110,.1); border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(8,47,73,.14); }
.sff-progress { padding: 1.25rem 2rem 1rem; border-bottom: 1px solid #e6eef2; background: #fbfdfe; }
.sff-progress > div { display: flex; justify-content: space-between; margin-bottom: .55rem; color: var(--sff-muted); font-size: .82rem; }.sff-progress strong { color: var(--sff-primary); }
.sff-progress-track { height: 7px; display: block; overflow: hidden; border-radius: 99px; background: #e8f0f4; }.sff-progress-track i { width: 33%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--sff-primary), #38bdf8); transition: width .25s ease; }
.sff-card form, .sff-results { padding: clamp(1.5rem, 4vw, 2.6rem); }
.sff-step { display: none; min-height: 340px; padding: 0; border: 0; }.sff-step.is-active { display: block; }
.sff-step legend { width: 100%; padding: 0; color: var(--sff-navy); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; }.sff-help { margin: .5rem 0 1.5rem; color: var(--sff-muted); }
.sff-options { display: grid; gap: .85rem; }.sff-options-four { grid-template-columns: repeat(2, 1fr); }.sff-options-three { grid-template-columns: repeat(3, 1fr); }
.sff-option { min-height: 116px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: 1.15rem; border: 1.5px solid var(--sff-line); border-radius: 16px; background: #fff; cursor: pointer; transition: all .18s ease; }.sff-option:hover { transform: translateY(-2px); border-color: #91c5da; box-shadow: 0 10px 25px rgba(8,47,73,.08); }.sff-option:has(input:checked) { border-color: var(--sff-primary); background: #f1faff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sff-primary) 10%, transparent); }
.sff-option input, .sff-license input { position: absolute; opacity: 0; pointer-events: none; }.sff-option-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--sff-primary); background: var(--sff-sky); font-size: 1.4rem; font-weight: 800; }.sff-option strong, .sff-option small { display: block; }.sff-option strong { color: var(--sff-navy); }.sff-option small { margin-top: .3rem; color: var(--sff-muted); line-height: 1.35; }.sff-option > i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #c8d8df; border-radius: 50%; color: transparent; font-style: normal; font-size: .8rem; }.sff-option:has(input:checked) > i { color: #fff; border-color: var(--sff-primary); background: var(--sff-primary); }
.sff-licenses { display: flex; flex-wrap: wrap; gap: .7rem; }.sff-license { min-height: 46px; display: inline-flex; align-items: center; padding: 0 1rem; border: 1.5px solid var(--sff-line); border-radius: 99px; color: #314c5d; background: #fff; cursor: pointer; font-weight: 600; }.sff-license:has(input:checked) { color: #fff; border-color: var(--sff-primary); background: var(--sff-primary); }.sff-license-none:has(input:checked) { color: var(--sff-navy); border-color: #fdba74; background: #fff7ed; }
.sff-online-learning{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;margin-top:1rem;padding:1rem;border:2px solid var(--sff-line);border-radius:16px;background:linear-gradient(145deg,#fff,#f7fbfd);cursor:pointer}.sff-online-learning input{position:absolute;opacity:0;pointer-events:none}.sff-online-learning strong,.sff-online-learning small{display:block}.sff-online-learning strong{color:var(--sff-navy)}.sff-online-learning small{margin-top:.25rem;color:var(--sff-muted)}.sff-online-learning>i{width:25px;height:25px;display:grid;place-items:center;border:1px solid #c8d8df;border-radius:50%;color:transparent;font-style:normal}.sff-online-learning:has(input:checked){border-color:var(--sff-accent);box-shadow:0 10px 24px rgba(249,115,22,.16)}.sff-online-learning:has(input:checked)>i{color:#fff;border-color:var(--sff-accent);background:var(--sff-accent)}
.sff-error { min-height: 1.4rem; margin: .8rem 0 0; color: #b42318; font-size: .88rem; font-weight: 700; }.sff-actions { display: flex; justify-content: space-between; margin-top: 1.4rem; padding-top: 1.35rem; border-top: 1px solid #e7eef2; }.sff-actions [data-next] { margin-left: auto; }
.sff-results > h3 { margin: .35rem 0 .6rem; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.04em; }.sff-result-kicker { margin: 0 !important; color: #087f5b !important; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.sff-results > p:not(.sff-result-kicker) { color: var(--sff-muted); }
.sff-note { display: flex; gap: .7rem; margin-top: .6rem; padding: .8rem 1rem; border: 1px solid #bce6d7; border-radius: 12px; color: #096448; background: #edfbf6; font-size: .9rem; }
.sff-course-results { display: grid; gap: .8rem; margin-top: 1.5rem; }.sff-course { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.1rem; border: 1px solid var(--sff-line); border-radius: 16px; background: #fff; }.sff-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--sff-primary); background: var(--sff-sky); font-weight: 800; }.sff-course h4 { margin: 0; font-size: 1.02rem; }.sff-course p { margin: .25rem 0 0; color: var(--sff-muted); font-size: .9rem; }.sff-course small { display: inline-block; margin-top: .45rem; padding: .2rem .45rem; border-radius: 5px; color: #92500c; background: #fff3de; font-weight: 800; text-transform: uppercase; }.sff-course > a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 .9rem; border-radius: 9px; color: #fff !important; background: var(--sff-primary); font-size: .84rem; font-weight: 800; text-decoration: none !important; white-space: nowrap; }
.sff-extra-results { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid #e7eef2; }.sff-extra-results > h4 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 2.5vw, 1.65rem); }.sff-extra-results > p { margin: 0 0 1rem; color: var(--sff-muted); font-size: .92rem; }.sff-extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }.sff-extra { min-height: 178px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .9rem; padding: 1.1rem; border: 1px solid var(--sff-line); border-radius: 16px; color: inherit !important; background: linear-gradient(145deg, #fff 0%, #f7fbfd 100%); text-decoration: none !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.sff-extra:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sff-accent) 55%, var(--sff-line)); box-shadow: 0 12px 28px rgba(8,47,73,.09); }.sff-extra-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--sff-primary); font-size: 1.15rem; font-weight: 800; }.sff-extra small, .sff-extra strong, .sff-extra span > span, .sff-extra b { display: block; }.sff-extra small { margin-bottom: .25rem; color: #b45309; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.sff-extra strong { color: var(--sff-navy); font-size: 1rem; line-height: 1.25; }.sff-extra span > span { margin-top: .35rem; color: var(--sff-muted); font-size: .86rem; line-height: 1.45; }.sff-extra b { margin-top: .65rem; color: var(--sff-primary); font-size: .8rem; }
.sff-result-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid #e7eef2; }.sff-result-actions > a { color: var(--sff-primary); font-weight: 800; text-decoration: none; }
.sff-learning-bridge { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.5rem; padding:1rem 1.1rem; border:2px solid var(--sff-accent); border-radius:16px; background:linear-gradient(145deg,#fff7ed,#fff); box-shadow:0 12px 26px rgba(249,115,22,.13); }.sff-learning-bridge small,.sff-learning-bridge strong{display:block}.sff-learning-bridge small{color:#b45309;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.sff-learning-bridge strong{margin-top:.2rem;color:var(--sff-navy)}
.sff-learning-bridge.is-preferred{background:linear-gradient(135deg,var(--sff-navy),#0c4a6e);box-shadow:0 16px 32px rgba(8,47,73,.2)}.sff-learning-bridge.is-preferred small{color:var(--sff-accent)}.sff-learning-bridge.is-preferred strong{color:#fff}
.sff-rules { padding: clamp(3.5rem, 7vw, 6rem); color: #fff; border-radius: 34px 34px 0 0; background: var(--sff-navy); }.sff-rules > h3 { max-width: 760px; color: #fff; }.sff-rules > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 2.5rem; }.sff-rules article { padding: 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(255,255,255,.06); }.sff-rules article > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: var(--sff-accent); font-weight: 800; }.sff-rules h4 { margin: 0 0 .5rem; color: #fff; }.sff-rules article p { margin: 0; color: #bfd6e1; font-size: .92rem; }.sff-rules > small { max-width: 850px; display: block; margin-top: 1.5rem; color: #91afbd; }
.sff-finder-app [hidden] { display: none !important; }
.sff-finder-app :focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
@media (max-width: 900px) { .sff-hero { min-height: 560px; } .sff-hero::before { background-position: 62% center; } .sff-hero::after { background: linear-gradient(var(--sff-overlay-angle, 90deg), rgb(4 35 53 / var(--sff-overlay-left, .55)) 0%, rgb(4 35 53 / var(--sff-overlay-left, .55)) var(--sff-overlay-start, 0%), rgb(4 43 65 / var(--sff-overlay-right, .08)) var(--sff-overlay-end, 65%), rgb(4 43 65 / var(--sff-overlay-right, .08)) 100%), linear-gradient(0deg, rgba(2,28,42,.20), transparent 55%); }.sff-options-three { grid-template-columns: 1fr; }.sff-rules > div { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sff-hero { min-height: 570px; padding: 2.25rem 1.25rem 3rem; border-radius: 0 0 22px 22px; } .sff-hero::before { background-position: 66% center; } .sff-hero::after { background: linear-gradient(var(--sff-overlay-angle, 90deg), rgb(3 31 47 / var(--sff-overlay-left, .55)) 0%, rgb(3 31 47 / var(--sff-overlay-left, .55)) var(--sff-overlay-start, 0%), rgb(3 31 47 / var(--sff-overlay-right, .08)) var(--sff-overlay-end, 65%), rgb(3 31 47 / var(--sff-overlay-right, .08)) 100%); }.sff-hero h2 { font-size: clamp(1.85rem, 8.2vw, 2.8rem); letter-spacing: -.04em; }.sff-options-four { grid-template-columns: 1fr; }.sff-step { min-height: 470px; }.sff-license { width: 100%; border-radius: 11px; }.sff-course { grid-template-columns: auto 1fr; align-items: start; }.sff-course > a { grid-column: 1 / -1; justify-content: center; }.sff-extra-grid { grid-template-columns: 1fr; }.sff-extra { min-height: 0; }.sff-learning-bridge,.sff-result-actions { align-items: stretch; flex-direction: column; text-align: center; }.sff-rules { padding: 3.5rem 1.25rem; border-radius: 22px 22px 0 0; } }
@media (prefers-reduced-motion: reduce) { .sff-finder-app *, .sff-finder-app *::before, .sff-finder-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }