/* Schwiizerfranke Bausteine. Nur Klassen mit Praefix sf-. Farben nur aus sf-tokens.css */
@font-face{font-family:"SF Merriweather";src:url("/fonts/v1/merriweather-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SF Merriweather";src:url("/fonts/v1/merriweather-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"SF Merriweather";src:url("/fonts/v1/merriweather-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"SF Merriweather";src:url("/fonts/v1/merriweather-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"SF Montserrat";src:url("/fonts/v1/montserrat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SF Montserrat";src:url("/fonts/v1/montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"SF Montserrat";src:url("/fonts/v1/montserrat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

.sf-page{font-family:var(--sf-font-sans);color:var(--sf-text);line-height:1.7;-webkit-font-smoothing:antialiased}
.sf-page *,.sf-page *::before,.sf-page *::after{box-sizing:border-box}
.sf-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* Volle Breite aus einer schmaleren Spalte heraus. Seitlicher Ueberstand wird nur auf solchen Seiten abgeschnitten */
.sf-bleed{width:100vw;margin-inline:calc(50% - 50vw)}
html:has(.sf-bleed){overflow-x:clip}

.sf-kicker{font-family:var(--sf-font-sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-green-text)}
.sf-hero .sf-kicker{color:var(--sf-green)}
/* Titel in Satzform: Merriweather. Kurze Marken-Titel (2 bis 4 Woerter): Amatic SC */
.sf-h1,.sf-h2{font-family:var(--sf-font-serif);font-weight:700;line-height:1.2;margin:0;color:var(--sf-navy)}
.sf-h1{font-size:clamp(30px,4vw,44px)}
.sf-h2{font-size:clamp(24px,3vw,30px)}
.sf-title-brand{font-family:var(--sf-font-brand);font-weight:700;line-height:1.05;margin:0;font-size:clamp(40px,5vw,56px);color:var(--sf-navy)}
.sf-num{font-family:var(--sf-font-serif);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--sf-navy)}
.sf-lede{font-size:17px;line-height:1.7;color:var(--sf-muted)}

.sf-hero{background:var(--sf-hero);color:#fff}
.sf-hero .sf-h1,.sf-hero .sf-h2,.sf-hero .sf-title-brand{color:#fff}
.sf-hero .sf-lede{color:#d6e4f5}

.sf-card{background:var(--sf-white);border-radius:var(--sf-radius-l);box-shadow:var(--sf-shadow-card)}
.sf-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--sf-radius-xs);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--sf-sky);color:var(--sf-navy)}

.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:var(--sf-radius-s);background:var(--sf-navy);box-shadow:inset 0 -2px 0 var(--sf-navy-deep);color:#fff;font-family:var(--sf-font-sans);font-size:15px;font-weight:700;text-decoration:none;transition:background .15s}
.sf-btn:hover,.sf-btn:focus-visible{background:var(--sf-blue);color:#fff}
.sf-btn--light{background:#fff;color:var(--sf-navy);box-shadow:inset 0 -2px 0 var(--sf-line)}
.sf-btn--light:hover{background:var(--sf-sky-soft);color:var(--sf-navy)}
.sf-link{color:var(--sf-blue);font-weight:700;text-decoration:none}
.sf-link:hover{color:var(--sf-navy)}

@media (prefers-reduced-motion:reduce){.sf-btn{transition:none}}