/* ==========================================================================
   Smart Serve – Marketing-Komponenten (Startseite + Verkaufsseiten)
   Lädt nach theme.min.css, user.css und variant-modern.css.
   Basis: dunkles Marken-Blau. Akzente nur in Blau, damit alles in einer Farbfamilie bleibt:
   - Marken-Blau: Buttons, Links (alles, was man anklickt), Leuchten im Hintergrund
   - Eisblau #c4d8ff: das Fröhliche ohne neue Farbe (Strich, Schlusspunkt, Häkchen, Ziffern)
   - Motiv: der Blitz aus dem Logo, in Eisblau (im Konfetti nach einer Demo-Anfrage)
   Grün nur im Logo selbst und in echten Statusmeldungen. Bewusst kein Tennisball-Gelb
   und kein Tennisball-Motiv: das ist das Branding von mytennis.
   Rot nur in der Schweizer Flagge und bei Swiss Tennis.
   ========================================================================== */

:root {
    --ss-accent: var(--ss-blue-bright, #6f9bff);
    --ss-accent-soft: rgba(56,116,255,0.14);
    /* Eisblau für Akzente. Linien und Bilder als Tokens, damit der helle Prototyp dunklere Töne setzen kann */
    --ss-ice: #c4d8ff;
    --ss-ice-line: rgba(111,155,255,.34);
    --ss-check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cb8ff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --ss-flash-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 231 265'%3E%3Cpolygon points='0,265 176,134 231,0 227,152' fill='%23c4d8ff'/%3E%3C/svg%3E");
    --ss-swoosh-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15C70 7 170 4 296 10' fill='none' stroke='%23c4d8ff' stroke-opacity='.75' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M46 20C116 14 196 13 266 16' fill='none' stroke='%23c4d8ff' stroke-opacity='.75' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
    --ss-dot-bg: radial-gradient(circle at 34% 30%, #fff, #e6edfb 55%, #b7c7e8);
    --ss-ink: #f4f6fb;
    --ss-muted: rgba(229,234,245,0.68);
    /* Kleinschrift (Rollen, Logo-Zeile, Hinweise): .6 ergibt auf #0B0F1A 6,2:1, auf den Karten #121829/#161e31 6,0:1 bzw. 5,8:1
       (vorher .45 = 3,9:1, unter dem Minimum von 4,5:1) */
    --ss-faint: rgba(229,234,245,0.6);
    --ss-line: rgba(255,255,255,0.08);
    --ss-card: #121829;
    --ss-card-2: #161e31;
    --ss-radius: 22px;
    --ss-ease: cubic-bezier(.2,.7,.2,1);
}

.ss-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 992px) { .ss-container { padding: 0 32px; } }

.ss-section { padding: 88px 0; position: relative; }
.ss-section--tight { padding: 56px 0; }
/* Abgehobener Abschnitt: kein harter Farbwechsel, keine Linien – nur ein weicher Schimmer, der oben und unten ausläuft */
.ss-section--alt {
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(56,116,255,.06), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.018) 22%, rgba(255,255,255,.018) 78%, rgba(255,255,255,0) 100%);
}
@media (max-width: 767px) { .ss-section { padding: 64px 0; } .ss-section--tight { padding: 40px 0; } }

/* ---------- Typo ---------- */
.ss-eyebrow {
    display: inline-flex; align-items: center;
    font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ss-blue-bright, #6f9bff); margin-bottom: 1rem;
}
.ss-eyebrow--center { justify-content: center; }

.ss-h2 {
    font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem) !important;
    color: var(--ss-ink); margin: 0 0 1rem; text-wrap: balance;
}
.ss-h2 em, .ss-h3 em, .ss-hero2__title em { font-style: normal; color: var(--ss-blue-bright, #6f9bff); }
.ss-h3 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem) !important; color: var(--ss-ink); margin: 0 0 .9rem; text-wrap: balance; }
/* Überschriften ohne automatische Silbentrennung («Tennislehrer ge-worden»): user.css schaltet sie auf dem Handy für h1/h2 ein.
   Zu lange Wörter bricht weiterhin overflow-wrap aus user.css um. */
h1, h2, h3, .ss-h2, .ss-h3 { -webkit-hyphens: manual; hyphens: manual; }
.ss-lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); color: var(--ss-muted); line-height: 1.7; margin: 0; text-wrap: pretty; }
.ss-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.ss-head--left { margin-left: 0; text-align: left; }
@media (max-width: 767px) { .ss-head { margin-bottom: 40px; } }

/* ---------- Buttons ---------- */
.ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .95rem 1.5rem; border-radius: 14px; font-weight: 800; font-size: 1rem; line-height: 1;
    text-decoration: none !important; border: 1px solid transparent; cursor: pointer;
    transition: transform .2s var(--ss-ease), box-shadow .2s var(--ss-ease), background-color .2s, border-color .2s;
}
.ss-btn--primary { background: var(--ss-blue, #3874ff); color: #fff !important; box-shadow: 0 12px 30px rgba(56,116,255,.35); }
.ss-btn--primary:hover { transform: translateY(-2px); background: #4a82ff; box-shadow: 0 16px 38px rgba(56,116,255,.45); }
.ss-btn--ghost { background: rgba(255,255,255,.04); color: #fff !important; border-color: rgba(255,255,255,.16); }
.ss-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.ss-btn--lg { padding: 1.1rem 1.7rem; font-size: 1.05rem; }
.ss-btn:focus-visible { outline: 3px solid rgba(111,155,255,.6); outline-offset: 3px; }
/* Pfeil läuft beim Überfahren mit, Klick fühlt sich wie ein Druck an */
.ss-btn .uil-arrow-right { display: inline-block; transition: transform .25s var(--ss-ease); }
.ss-btn:hover .uil-arrow-right { transform: translateX(4px); }
.ss-btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

.ss-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 0; }
.ss-checks li { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--ss-muted); font-weight: 600; }
.ss-checks li::before {
    content: ""; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
    background: rgba(56,116,255,.18) var(--ss-check-img) center/10px no-repeat;
}

/* ---------- Tennisplatz-Linien als Hintergrund-Motiv ---------- */
.ss-court {
    position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.045) 2px, transparent 2px);
    background-size: 100% 33.333%, 25% 100%;
    background-position: 0 50%, 50% 0;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ss-hero2 { position: relative; padding: 72px 0 40px; overflow: hidden; }
.ss-hero2::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    width: 900px; height: 900px; top: -420px; right: -260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,116,255,.20), transparent 62%);
}
/* weicher Übergang zur nächsten Sektion statt abgeschnittener Farbfläche */
.ss-hero2::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(11,15,26,0), #0B0F1A);
}
.ss-hero2 > .ss-container { position: relative; z-index: 1; }
.ss-hero2__kicker {
    display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.2rem;
    padding: .45rem .9rem .45rem .5rem; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--ss-line);
    font-size: .82rem !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.2 !important;
    color: var(--ss-muted); font-family: "Nunito Sans", system-ui, sans-serif !important;
}
.ss-hero2__kicker .ss-flag { margin: 0; }
.ss-hero2__title { margin: 0; }
.ss-hero2__slogan {
    display: block; color: var(--ss-ink);
    font-size: clamp(2.6rem, 1.4rem + 5vw, 4.6rem); line-height: 1.0 !important; letter-spacing: -.045em;
    font-weight: 800;
}
.ss-hero2__slogan em { font-style: normal; color: var(--ss-blue-bright, #6f9bff); position: relative; white-space: nowrap; }
/* Handgezeichneter Strich in Eisblau, wird von links nach rechts «gezogen» */
.ss-hero2__slogan em::after {
    content: ""; position: absolute; z-index: -1; left: -1%; right: 3%; bottom: -.09em; height: .3em; pointer-events: none;
    background: var(--ss-swoosh-img) 0 0 / 100% 100% no-repeat;
    animation: ss-draw .8s .45s cubic-bezier(.25,1,.5,1) both;
}
@keyframes ss-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Grüner Schlusspunkt («Mehr Tennis●», «Zurück auf den Platz●»), springt wie ein Ball. Der Punkt bleibt als Text erhalten.
   Fällt einmal herein und springt aus; JS lässt ihn beim Überfahren hüpfen und startet Punkte weiter unten erst im Blickfeld. */
.ss-ball-dot {
    display: inline-block; position: relative; overflow: hidden; vertical-align: baseline;
    width: .3em; height: .3em; margin-left: .01em; border-radius: 50%;
    color: transparent; line-height: 0; font-size: inherit; cursor: default;
    background: var(--ss-dot-bg);
    transform-origin: 50% 100%;
    animation: ss-ball-drop 1.15s .95s both;
}
.ss-ball-dot.is-wait { animation: none; opacity: 0; }
.ss-ball-dot.is-go { animation: ss-ball-drop 1.15s .15s both; }
@keyframes ss-ball-drop {
    0%   { opacity: 0; transform: translateY(-1.7em) rotate(-120deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
    10%  { opacity: 1; }
    42%  { transform: translateY(0) scale(1.22,.78); animation-timing-function: cubic-bezier(0,.55,.45,1); }
    64%  { transform: translateY(-.5em) rotate(40deg) scale(.96,1.04); animation-timing-function: cubic-bezier(.55,0,1,.45); }
    82%  { transform: translateY(0) scale(1.1,.9); animation-timing-function: cubic-bezier(0,.55,.45,1); }
    91%  { transform: translateY(-.13em) rotate(60deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
    100% { opacity: 1; transform: rotate(60deg); }
}
.ss-hero2__lead { margin: 1.4rem 0 2rem; max-width: 34rem; }
.ss-hero2__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.3rem; }
.ss-hero2__proof { display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--ss-line); flex-wrap: nowrap; max-width: 34rem; }
.ss-avatars { display: inline-flex; }
.ss-avatars img, .ss-avatars span {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #0B0F1A;
    display: inline-flex; align-items: center; justify-content: center;
}
.ss-avatars > * + * { margin-left: -12px; }
/* Pill «10+ Schulen»: neutral (dunkles Grau, dünner heller Rahmen), damit sie nicht wie ein Button wirkt. Blau bleibt den Buttons vorbehalten. */
.ss-avatars span { background: var(--ss-card-2, #161e31); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ss-muted); font-size: .74rem; font-weight: 700; }
.ss-avatars { flex: 0 0 auto; align-items: center; }
.ss-avatars .ss-avatars__more { width: auto; padding: 0 .75rem 0 .9rem; border-radius: 999px; white-space: nowrap; font-size: .76rem; letter-spacing: .01em; cursor: default; }
.ss-hero2__proof-text { min-width: 0; }
.ss-hero2__proof-text { font-size: .88rem; color: var(--ss-muted); line-height: 1.35; }
.ss-hero2__proof-text strong { color: #fff; display: block; font-size: .95rem; }

/* Produkt-Screenshot im Browser-Rahmen */
.ss-browser {
    position: relative; border-radius: 16px; overflow: hidden;
    background: #0f1524; border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(56,116,255,.06);
}
.ss-browser__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; background: #151c2e; border-bottom: 1px solid rgba(255,255,255,.06); }
.ss-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); display: inline-block; }
.ss-browser__url {
    margin-left: .7rem; flex: 1; max-width: 260px; font-size: .72rem; color: var(--ss-faint);
    background: rgba(255,255,255,.05); border-radius: 7px; padding: .3rem .7rem; display: flex; align-items: center; gap: .35rem;
}
.ss-browser img { display: block; width: 100%; height: auto; }

.ss-float {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem;
    padding: .7rem .95rem; border-radius: 14px; background: rgba(18,24,41,.92);
    border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.45);
    font-size: .8rem; color: var(--ss-muted); line-height: 1.25; white-space: nowrap;
    animation: ss-float-in .8s .5s var(--ss-ease) both;
}
.ss-float strong { color: #fff; display: block; font-size: .86rem; }
.ss-float__icon { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: 0 0 32px; }
.ss-float__icon--blue { background: rgba(56,116,255,.16); color: var(--ss-blue-bright, #6f9bff); }
.ss-float--a { left: -28px; top: 18%; }
.ss-float--b { left: 8%; bottom: 6px; animation-delay: 1.1s; }
/* Die Karten kommen einmal wie eine Mitteilung herein und bleiben dann ruhig stehen (vorher endloses Schweben) */
@keyframes ss-float-in { from { opacity: 0; transform: translate3d(0,12px,0) scale(.94); } to { opacity: 1; transform: none; } }

@media (max-width: 991px) {
    .ss-hero2 { padding: 40px 0 24px; }
    .ss-float--a { left: -6px; }
}
@media (max-width: 575px) {
    .ss-hero2__cta .ss-btn { width: 100%; }
    .ss-float { font-size: .72rem; padding: .55rem .7rem; }
    .ss-float strong { font-size: .78rem; }
    .ss-float--a { top: 8%; }
}

/* Schweizer Flagge (klein) */
.ss-flag { width: 18px; height: 18px; border-radius: 4px; background: #e2382f; position: relative; display: inline-block; flex: 0 0 18px; }
.ss-flag::before, .ss-flag::after { content: ""; position: absolute; background: #fff; border-radius: 1px; }
.ss-flag::before { width: 10px; height: 3px; top: 7.5px; left: 4px; }
.ss-flag::after { width: 3px; height: 10px; top: 4px; left: 7.5px; }

/* ==========================================================================
   LOGO-LEISTE
   ========================================================================== */
.ss-logos { padding: 28px 0 8px; }
.ss-logos__label { text-align: center; font-size: .82rem; color: var(--ss-faint); font-weight: 700; letter-spacing: .02em; margin-bottom: 1.2rem; }
.ss-logos__row { display: flex; align-items: center; justify-content: center; gap: 18px 44px; flex-wrap: wrap; }
/* Kundenlogos etwas grösser und heller als vorher (40px, Deckkraft .7), weiterhin einfarbig */
.ss-logos__row img { height: 44px; width: auto; max-width: 165px; object-fit: contain; opacity: .85; filter: grayscale(1) brightness(1.8); transition: opacity .25s, filter .25s; }
.ss-logos__row img:hover { opacity: 1; filter: none; }
@media (max-width: 575px) { .ss-logos__row { gap: 16px 28px; } .ss-logos__row img { height: 34px; } }

/* ==========================================================================
   PRODUKT-TOUR
   ========================================================================== */
.ss-tour { display: flex; flex-direction: column; gap: 120px; }
.ss-tour__row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.ss-tour__row--flip .ss-tour__text { order: 2; }
.ss-tour__row--flip .ss-tour__media { order: 1; }
.ss-tour__step {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-blue-bright, #6f9bff);
}
.ss-tour__step b {
    width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-accent-soft); border: 1px solid var(--ss-ice-line); color: var(--ss-ice); font-size: .8rem; letter-spacing: 0;
}
.ss-tour__list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .85rem; }
.ss-tour__list li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ss-muted); font-size: .98rem; line-height: 1.5; }
.ss-tour__list li strong { color: #fff; font-weight: 700; }
.ss-tour__list li i {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(56,116,255,.12); color: var(--ss-accent); font-size: 1rem; margin-top: -2px;
}
.ss-tour__media { position: relative; }
.ss-tour__media::before {
    content: ""; position: absolute; inset: 10% 8%; z-index: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,116,255,.22), transparent 70%); filter: blur(30px);
}
.ss-tour__media > * { position: relative; z-index: 1; }
.ss-tour__note { margin-top: 1.4rem; font-size: .88rem; color: var(--ss-faint); }
.ss-tour__note a { color: var(--ss-blue-bright, #6f9bff); font-weight: 700; text-decoration: none; }
.ss-tour__note a:hover { text-decoration: underline; }
.ss-stores { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.ss-stores img { height: 42px; width: auto; transition: transform .2s; }
.ss-stores a:hover img { transform: translateY(-2px); }
@media (max-width: 991px) {
    .ss-tour { gap: 72px; }
    .ss-tour__row, .ss-tour__row--flip { grid-template-columns: 1fr; gap: 36px; }
    .ss-tour__row--flip .ss-tour__text, .ss-tour__row .ss-tour__text { order: 1; }
    .ss-tour__row--flip .ss-tour__media, .ss-tour__row .ss-tour__media { order: 2; }
}

/* ==========================================================================
   ZAHLEN
   ========================================================================== */
.ss-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--ss-radius); overflow: hidden; border: 1px solid var(--ss-line); background: var(--ss-card); }
.ss-stat { padding: 34px 26px; text-align: left; }
.ss-stat + .ss-stat { border-left: 1px solid var(--ss-line); }
.ss-stat__num { font-family: "Inter Tight", "Nunito Sans", sans-serif; font-weight: 800; font-size: clamp(2.1rem, 1.6rem + 1.6vw, 3rem); color: #fff; letter-spacing: -.04em; line-height: 1; }
.ss-stat__num small { font-size: .5em; color: var(--ss-blue-bright, #6f9bff); margin-left: .1em; }
.ss-stat__label { margin-top: .6rem; font-size: .9rem; color: var(--ss-muted); font-weight: 600; line-height: 1.4; }
/* Link «Beispielrechnung» in Kennzahl-Labels (/funktionen-Leiste, /tennisschulen-Profile) als Link erkennbar */
.ss-stat__label a { color: var(--ss-blue-bright, #6f9bff); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ss-stat__label a:hover { color: #fff; }
@media (max-width: 991px) {
    .ss-stats { grid-template-columns: repeat(2, 1fr); }
    .ss-stat:nth-child(3) { border-left: 0; }
    .ss-stat:nth-child(n+3) { border-top: 1px solid var(--ss-line); }
}
@media (max-width: 400px) { .ss-stat { padding: 24px 18px; } }

/* ==========================================================================
   REFERENZEN (Zitate)
   ========================================================================== */
.ss-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ss-quote {
    display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--ss-radius);
    background: linear-gradient(180deg, var(--ss-card-2), var(--ss-card)); border: 1px solid var(--ss-line);
    transition: transform .35s var(--ss-ease), border-color .35s, box-shadow .35s;
}
.ss-quote:hover { transform: translateY(-4px); border-color: rgba(111,155,255,.32); box-shadow: 0 24px 50px rgba(0,0,0,.3); }
.ss-quote blockquote { margin: 1rem 0 1.6rem; text-wrap: pretty; font-size: 1.04rem; line-height: 1.6; color: #e9edf7; font-weight: 500; flex: 1; }
.ss-quote blockquote:first-child { margin-top: 0; }
.ss-quote__person { display: flex; align-items: center; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--ss-line); }
.ss-quote__person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ss-quote__name { font-weight: 800; color: #fff; font-size: .95rem; }
.ss-quote__role { font-size: .82rem; color: var(--ss-faint); }
@media (max-width: 991px) { .ss-quotes { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }

/* ==========================================================================
   ANGEBOT-BAND (Swiss Tennis Label Schools)
   ========================================================================== */
/* Bewusst in Swiss-Tennis-Rot: die einzige Ausnahme vom blauen Akzent */
.ss-offer {
    --ss-st-red: #e3001b; --ss-st-red-light: #ff5a66;
    position: relative; overflow: hidden; border-radius: 28px; padding: 56px;
    background: linear-gradient(120deg, #1d1a2e 0%, #2a1520 50%, #4a0f19 100%);
    border: 1px solid rgba(227,0,27,.28);
    display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center;
}
.ss-offer::after {
    content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.07); box-shadow: 0 0 0 60px rgba(255,255,255,.02), 0 0 0 120px rgba(255,255,255,.015);
    pointer-events: none;
}
.ss-offer__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem) !important; color: #fff; margin: 0 0 .8rem; text-wrap: balance; }
.ss-offer__title em { font-style: normal; color: var(--ss-st-red-light); }
.ss-offer .ss-eyebrow { color: var(--ss-st-red-light); }
.ss-offer .ss-checks li::before {
    background-color: rgba(227,0,27,.18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a66' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.ss-offer .ss-btn--primary { background: var(--ss-st-red); box-shadow: 0 12px 30px rgba(227,0,27,.35); }
.ss-offer .ss-btn--primary:hover { background: #f5142e; box-shadow: 0 16px 38px rgba(227,0,27,.45); }
.ss-offer p { color: var(--ss-muted); margin: 0 0 1.2rem; max-width: 40rem; }
.ss-offer .ss-checks li { color: #dfe5f2; }
.ss-offer__cta { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }
@media (max-width: 991px) { .ss-offer { grid-template-columns: 1fr; padding: 36px 26px; } }

/* ==========================================================================
   WARUM SMART SERVE
   ========================================================================== */

.ss-why__icon {
    width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-blue-soft, rgba(56,116,255,.12)); color: var(--ss-blue-bright, #6f9bff); font-size: 1.35rem; margin-bottom: 1.1rem;
}

/* ==========================================================================
   DEMO / KONTAKT
   ========================================================================== */
.ss-demo2 {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0;
    border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
    background: var(--ss-card); box-shadow: 0 40px 90px rgba(0,0,0,.45);
}
.ss-demo2__info { padding: 48px 44px; background: linear-gradient(160deg, #18244a 0%, #121a30 70%); position: relative; }
.ss-demo2__form { padding: 48px 44px; }
/* Schritte einzeilig: «1 Anfrage senden · Termin innert 24 Stunden» */
.ss-demo2__steps { list-style: none; padding: 0; margin: 1.5rem 0 1.4rem; display: grid; gap: .6rem; counter-reset: ss-step; }
.ss-demo2__steps li { display: flex; gap: .8rem; align-items: center; counter-increment: ss-step; }
.ss-demo2__steps li::before {
    content: counter(ss-step); flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}
.ss-demo2__steps div { line-height: 1.4; }
.ss-demo2__steps strong { color: #fff; font-size: .95rem; }
.ss-demo2__steps span { font-size: .88rem; color: var(--ss-muted); }
.ss-demo2__steps span::before { content: " · "; }
.ss-person { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ss-person img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }
.ss-person__name { font-weight: 800; color: #fff; }
.ss-person__role { font-size: .84rem; color: var(--ss-muted); }
.ss-person__quote { margin: .4rem 0 0; font-size: .9rem; line-height: 1.45; font-style: italic; color: #dfe6f5; }
.ss-field { position: relative; margin-bottom: 14px; }
.ss-field label { display: block; font-size: .8rem; font-weight: 700; color: var(--ss-muted); margin-bottom: .4rem; }
.ss-field label span { color: var(--ss-faint); font-weight: 600; }
.ss-input {
    width: 100%; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1); color: #fff;
    padding: .85rem 1rem; border-radius: 12px; font-size: .97rem; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ss-input::placeholder { color: rgba(255,255,255,.35); }
.ss-input:focus { outline: none; border-color: var(--ss-blue, #3874ff); box-shadow: 0 0 0 4px rgba(56,116,255,.18); background: rgba(255,255,255,.06); }
textarea.ss-input { resize: vertical; min-height: 96px; }
.ss-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ss-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.ss-choice label { position: relative; cursor: pointer; margin: 0; }
.ss-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ss-choice span {
    display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--ss-muted); font-weight: 700; font-size: .9rem;
    transition: all .2s;
}
.ss-choice span i { color: var(--ss-blue-bright, #6f9bff); font-size: 1.1rem; }
.ss-choice input:checked + span { border-color: var(--ss-blue, #3874ff); background: rgba(56,116,255,.12); color: #fff; animation: ss-press .3s var(--ss-ease); }
@keyframes ss-press { from { transform: scale(.95); } to { transform: none; } }
.ss-choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(56,116,255,.25); }
.ss-form-note { font-size: .8rem; color: var(--ss-faint); margin: .9rem 0 0; text-align: center; }
.ss-form-note a { color: var(--ss-muted); }
.ss-alert { display: none; padding: .9rem 1rem; border-radius: 12px; margin-bottom: 14px; font-size: .9rem; }
.ss-alert.is-visible { display: block; }
.ss-alert--ok { background: rgba(46,194,122,.12); border: 1px solid rgba(46,194,122,.35); color: #8ff0bd; }
.ss-alert--err { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; }
.ss-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 991px) {
    .ss-demo2 { grid-template-columns: 1fr; }
    .ss-demo2__info, .ss-demo2__form { padding: 32px 22px; }
}
/* Handy: Eingabefelder untereinander. Die Auswahl (Ja/Nein, Online/Vor Ort) bleibt zweispaltig, sonst wären es 4 Zeilen. */
@media (max-width: 480px) {
    .ss-grid2 { grid-template-columns: 1fr; }
    .ss-choice span { height: 100%; padding: .75rem .85rem; gap: .45rem; }
}
@media (max-width: 360px) { .ss-choice span { padding: .7rem .65rem; font-size: .86rem; } }

/* --- Demo-Formular (partials/demo-form.php) --- */
/* «Ohne Risiko starten»: Block über der kompakten Vertrauensliste, Punkte untereinander, Häkchen oben bündig */
.ss-risk { margin-top: 20px; }
.ss-risk__title { margin: 0 0 .55rem; font-size: .95rem; color: #fff; }
.ss-risk__list { flex-direction: column; gap: .45rem; }
.ss-risk__list li { align-items: flex-start; font-size: .86rem; line-height: 1.45; }
.ss-risk__list li::before { margin-top: .1rem; }

/* Zeitwunsch «Wann passt es dir meistens?»: kompakte Chips statt 2er-Raster (auch unter 480 px in 1–2 Zeilen) */
.ss-choice--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-choice--chips span { padding: .55rem .95rem; font-size: .86rem; }

/* Erfolgsmeldung mit Finns Foto: Personenkarte ohne eigenen Rahmen im grünen Kasten, Text erbt die Alert-Farbe */
.ss-person--ok { padding: 0; background: none; border: 0; }
.ss-person--ok strong { display: block; font-size: 1rem; }
.ss-person--ok p { margin: .35rem 0 0; line-height: 1.5; }
.ss-alert:focus { outline: none; } /* JS fokussiert die Erfolgsmeldung (tabindex=-1) für Screenreader */

/* Handy/Tablet: Überschrift → Formular → Schritte, Finn, «Ohne Risiko», Vertrauensliste.
   .ss-demo2__info wird zum unsichtbaren Container, Kopf und Rest bekommen je den Verlauf.
   Passt zur /demo-Regel in ss-pages-b.css (.ss-demo2__form order:-1); Variablen vererben sich auch durch display:contents. */
@media (max-width: 991px) {
    .ss-demo2__info { display: contents; }
    .ss-demo2__head, .ss-demo2__more { padding: 32px 22px; background: linear-gradient(160deg, #18244a 0%, #121a30 70%); }
    .ss-demo2__head { order: -2; padding-bottom: 22px; }
    .ss-demo2__head .ss-lead { margin-bottom: 0; }
    .ss-demo2__form { order: -1; }
    .ss-demo2__more > .ss-demo2__steps { margin-top: 0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.ss-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.ss-faq details { border-radius: 16px; background: var(--ss-card); border: 1px solid var(--ss-line); transition: border-color .2s; }
.ss-faq details[open] { border-color: rgba(56,116,255,.35); }
.ss-faq summary {
    list-style: none; cursor: pointer; padding: 1.15rem 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-weight: 800; color: #fff; font-size: 1rem;
}
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary::after {
    content: "+"; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); color: var(--ss-blue-bright, #6f9bff); font-weight: 700; font-size: 1.2rem; transition: transform .2s;
}
.ss-faq details[open] summary::after { content: "–"; }
.ss-faq summary:focus-visible { outline: 3px solid rgba(111,155,255,.6); outline-offset: 2px; border-radius: 16px; }
.ss-faq__body { padding: 0 1.3rem 1.2rem; color: var(--ss-muted); line-height: 1.65; font-size: .96rem; }
/* Links in FAQ-Antworten (z. B. Datenschutzerklärung). Steht auch in ss-pages-b.css, die Startseite lädt aber nur diese Datei. */
.ss-faq__body a { color: var(--ss-blue-bright, #6f9bff); font-weight: 700; }

/* ==========================================================================
   CTA-BAND
   ========================================================================== */
.ss-cta-band {
    position: relative; overflow: hidden; text-align: center; border-radius: 28px; padding: 64px 28px;
    background: radial-gradient(ellipse at 50% 0%, rgba(56,116,255,.35), transparent 60%), #111a33;
    border: 1px solid rgba(255,255,255,.1);
}
.ss-cta-band .ss-h2 { max-width: 720px; margin-left: auto; margin-right: auto; }
.ss-cta-band .ss-lead { max-width: 560px; margin: 0 auto 1.8rem; }
.ss-cta-band__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ss-cta-band .ss-checks { justify-content: center; }

/* ==========================================================================
   SEITEN-HERO (Unterseiten)
   ========================================================================== */
.ss-page-hero { position: relative; padding: 72px 0 56px; overflow: hidden; text-align: center; }
.ss-page-hero::before {
    content: ""; position: absolute; width: 900px; height: 600px; left: 50%; top: -340px; transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(56,116,255,.22), transparent 65%); pointer-events: none;
}
.ss-page-hero > .ss-container { position: relative; z-index: 1; }
.ss-page-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.8rem) !important; color: #fff; margin: 0 auto 1.2rem; max-width: 900px; text-wrap: balance; }
.ss-page-hero h1 em { font-style: normal; color: var(--ss-blue-bright, #6f9bff); }
.ss-page-hero .ss-lead { max-width: 680px; margin: 0 auto 2rem; }
.ss-page-hero .ss-hero2__cta { justify-content: center; }
.ss-page-hero .ss-checks { justify-content: center; }
@media (max-width: 767px) { .ss-page-hero { padding: 44px 0 36px; } }

/* Demo-Seite (demo.php): «Nach dem Gespräch weisst du» unter H1 und Lead – schmaler, linksbündiger Block im zentrierten Hero */
.ss-outcome { max-width: 600px; margin: 0 auto 1.6rem; text-align: left; }
.ss-outcome__title { margin: 0; color: #fff; font-weight: 800; font-size: 1rem; }
.ss-outcome .ss-tour__list { margin-top: .75rem; gap: .55rem; }
.ss-outcome .ss-tour__list li { font-size: .95rem; }

/* Demo-Seite: «Nach der Demo» – vier Schritte. .ss-expect steht in ss-pages-b.css (lädt danach), darum doppelte Klasse. */
.ss-expect.ss-expect--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .ss-expect.ss-expect--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ss-expect.ss-expect--4 { grid-template-columns: 1fr; } }

/* Feature-Karten (Unterseiten) */
.ss-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ss-card { padding: 28px 26px; border-radius: var(--ss-radius); background: var(--ss-card); border: 1px solid var(--ss-line); transition: transform .25s var(--ss-ease), border-color .25s; }
.ss-card:hover { transform: translateY(-3px); border-color: rgba(56,116,255,.3); }
.ss-card h3 { font-size: 1.12rem !important; color: #fff; margin: 0 0 .55rem; letter-spacing: -.01em !important; line-height: 1.3 !important; }
.ss-card p { font-size: .93rem; color: var(--ss-muted); margin: 0; line-height: 1.6; }
.ss-card ul { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.ss-card ul li { font-size: .88rem; color: var(--ss-muted); display: flex; gap: .5rem; }
.ss-card ul li::before { content: "✓"; color: var(--ss-accent); font-weight: 800; }
@media (max-width: 991px) { .ss-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ss-cards { grid-template-columns: 1fr; } }

/* Vorher / Nachher Vergleich */
.ss-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-vs__col { border-radius: var(--ss-radius); padding: 30px 28px; border: 1px solid var(--ss-line); background: var(--ss-card); }
.ss-vs__col--good { border-color: rgba(56,116,255,.35); background: linear-gradient(180deg, rgba(56,116,255,.10), var(--ss-card) 60%); }
.ss-vs__col h3 { font-size: 1.15rem !important; color: #fff; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .5rem; }
.ss-vs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ss-vs__col li { display: flex; gap: .65rem; color: var(--ss-muted); font-size: .95rem; line-height: 1.5; }
.ss-vs__col--bad li::before { content: "✕"; color: var(--ss-faint); font-weight: 800; flex: 0 0 auto; }
.ss-vs__col--good li::before { content: "✓"; color: var(--ss-accent); font-weight: 800; flex: 0 0 auto; }
@media (max-width: 767px) { .ss-vs { grid-template-columns: 1fr; } }

/* ==========================================================================
   STICKY CTA
   ========================================================================== */
.ss-sticky {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1020;
    display: none; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .6rem .6rem .6rem 1rem; border-radius: 16px; background: rgba(18,24,41,.95);
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(140%); transition: transform .35s var(--ss-ease);
}
.ss-sticky.is-visible { transform: translateY(0); }
.ss-sticky__text { font-size: .82rem; color: var(--ss-muted); line-height: 1.25; }
.ss-sticky__text strong { color: #fff; display: block; font-size: .9rem; }
.ss-sticky .ss-btn { padding: .75rem 1rem; font-size: .9rem; white-space: nowrap; }
@media (max-width: 767px) {
    .ss-sticky { display: flex; }
    /* Am Seitenende bleiben Datenschutz und Impressum frei: Footer unten um Leistenhöhe (62px) + Abstand (12px) + Luft verlängert.
       !important nötig gegen die Utility-Klasse .pb-5 am Footer. */
    .ss-sticky ~ .ss-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important; }
}
body.ss-nav-open .ss-sticky { display: none; }

/* ==========================================================================
   SCROLL-REVEAL
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ss-ease), transform .7s var(--ss-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .ss-float, .ss-hero2__slogan em::after, .ss-choice input:checked + span, .ss-swap__after i { animation: none !important; }
    .ss-ball-dot, .ss-ball-dot.is-wait, .ss-ball-dot.is-go { animation: none; opacity: 1; transform: none; }
    .ss-feat:hover i, .ss-founder__points li:hover i, .ss-quote:hover { transform: none; }
}

@media (max-width: 420px) {
    .ss-hero2__proof { flex-wrap: wrap; }
}

/* Warum-Raster mit 6 Punkten */

/* Echte App-Bilder (freigestellte Handys) in der Produkt-Tour */
.ss-tour__media--phones { text-align: center; }
.ss-tour__media--phones img { width: 100%; max-width: 500px; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); }

/* Französisch: längerer Slogan («Moins de bureau.») soll zweizeilig bleiben */
@media (min-width: 992px) {
    html[lang="fr-CH"] .ss-hero2__slogan { font-size: clamp(2.6rem, 1.2rem + 3.4vw, 3.7rem); }
}

/* Ablauf in Phasen */

/* Vergleichs-Checkliste (Tabelle, mobil als Karten) */
.ss-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); overflow: hidden; background: var(--ss-card); }
.ss-table th, .ss-table td { padding: 16px 20px; text-align: left; vertical-align: top; font-size: .94rem; line-height: 1.5; border-bottom: 1px solid var(--ss-line); }
.ss-table thead th { background: #161e31; color: var(--ss-muted); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ss-table tbody tr:last-child td { border-bottom: 0; }
.ss-table td:first-child { color: #fff; font-weight: 700; width: 30%; }
.ss-table td:nth-child(2) { color: var(--ss-muted); width: 30%; }
.ss-table td:last-child { color: #e9edf7; }
.ss-table td:last-child::before { content: "✓ "; color: var(--ss-accent); font-weight: 800; }
@media (max-width: 767px) {
    .ss-table, .ss-table tbody, .ss-table tr, .ss-table td { display: block; width: 100% !important; }
    .ss-table thead { display: none; }
    .ss-table tr { padding: 14px 16px; border-bottom: 1px solid var(--ss-line); }
    .ss-table td { padding: 2px 0; border: 0; }
    .ss-table td:nth-child(2) { font-size: .86rem; margin-bottom: .4rem; }
}
.ss-stand { display: block; text-align: center; font-size: .8rem; color: var(--ss-faint); margin-top: 1.2rem; }

/* Fragen-Liste */
.ss-qlist { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; display: grid; gap: 10px; }
.ss-qlist li { display: flex; gap: .8rem; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--ss-card); border: 1px solid var(--ss-line); color: #e9edf7; font-weight: 600; }
.ss-qlist li i { color: var(--ss-blue-bright, #6f9bff); font-size: 1.2rem; }

/* Erklärte Screenshots: nummerierte Markierungen + Legende */
.ss-browser__shot { position: relative; }
.ss-pin {
    position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: #fff;
    background: var(--ss-blue, #3874ff); border: 2px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35); z-index: 2;
}
.ss-pin::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ss-blue, #3874ff); opacity: 0;
    animation: ss-pin 2.4s ease-out infinite;
}
@keyframes ss-pin { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.ss-legend { list-style: none; counter-reset: ss-leg; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.ss-legend li { counter-increment: ss-leg; display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--ss-muted); line-height: 1.45; }
.ss-legend li::before {
    content: counter(ss-leg); flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-blue, #3874ff); color: #fff; font-size: .72rem; font-weight: 800; margin-top: 1px;
}
@media (max-width: 575px) { .ss-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .ss-pin::after { animation: none; } }

/* Vertrauensleiste */
.ss-trust-sec { padding: 8px 0 0; }
.ss-trustbar {
    list-style: none; margin: 0; padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
    border-top: 1px solid var(--ss-line); border-bottom: 1px solid var(--ss-line);
}
.ss-trustbar li { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 700; color: var(--ss-muted); white-space: nowrap; }
.ss-trustbar li i { color: var(--ss-accent); opacity: .85; font-size: 1.1rem; }
@media (max-width: 575px) { .ss-trustbar { justify-content: flex-start; gap: 10px 18px; } .ss-trustbar li { white-space: normal; } }

/* FAQ: Fakten auf einen Blick + Suche */
.ss-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.ss-fact { padding: 18px 16px; border-radius: 16px; background: linear-gradient(180deg, var(--ss-card-2), var(--ss-card)); border: 1px solid var(--ss-line); text-align: center; }
.ss-fact i { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; background: var(--ss-blue-soft, rgba(56,116,255,.12)); color: var(--ss-blue-bright, #6f9bff); font-size: 1.2rem; margin-bottom: .6rem; }
.ss-fact strong { display: block; color: #fff; font-size: .98rem; line-height: 1.3; }
.ss-fact span { display: block; margin-top: .25rem; font-size: .82rem; color: var(--ss-muted); line-height: 1.4; }
.ss-faq-search { position: relative; max-width: 620px; margin: 0 auto; }
.ss-faq-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ss-faint); font-size: 1.15rem; }
.ss-faq-search input { width: 100%; padding: 1rem 1.1rem 1rem 3rem; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; font-size: 1rem; }
.ss-faq-search input:focus { outline: none; border-color: var(--ss-blue, #3874ff); box-shadow: 0 0 0 4px rgba(56,116,255,.18); }
.ss-faq-search input::placeholder { color: rgba(255,255,255,.4); }
.ss-faq-none { text-align: center; color: var(--ss-muted); margin: 18px 0 0; }
.ss-faq-none a { color: var(--ss-blue-bright, #6f9bff); }
@media (max-width: 991px) { .ss-facts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .ss-facts { grid-template-columns: 1fr 1fr; } .ss-fact:last-child { grid-column: 1 / -1; } }

/* ==========================================================================
   Startseite: Hero mit Foto, Vorher/Nachher-Liste, Foto-Band, Funktionsliste,
   Gründer-Abschnitt
   ========================================================================== */

/* Hero mit echtem Foto */
.ss-hero3 { position: relative; padding: 56px 0 40px; overflow: hidden; }
.ss-hero3__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ss-hero3 .ss-hero2__slogan { color: var(--ss-ink); }
.ss-hero3__visual { position: relative; }
/* Hero: ruhiger Neugier-Link neben dem Demo-Button, Vorteile untereinander */
.ss-hero2__lead strong { color: #fff; font-weight: 700; }
/* Gleiche Anordnung im Seitenanfang von /funktionen (.ssf-hero): Button und Textlink nebeneinander, vertikal zentriert */
.ss-hero3 .ss-hero2__cta, .ssf-hero .ss-hero2__cta { align-items: center; gap: .6rem 1.6rem; }
.ss-hero3__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .98rem; color: #c9d6ff !important; text-decoration: none; border-bottom: 1px solid rgba(111,155,255,.35); padding-bottom: 2px; transition: color .2s, border-color .2s, gap .2s; }
.ss-hero3__more:hover { color: #fff !important; border-color: #6f9bff; gap: .6rem; }
.ss-hero3__micro { margin: -.6rem 0 1.3rem; font-size: .86rem; color: var(--ss-muted); letter-spacing: .01em; }
.ss-hero3__finn { display: flex; align-items: flex-start; gap: 12px; margin: .2rem 0 .4rem; max-width: 500px; }
.ss-hero3__finn img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.18); }
.ss-hero3__finn blockquote { margin: 0 0 .25rem; font-size: .88rem; line-height: 1.5; color: var(--ss-muted); font-style: italic; }
.ss-hero3__finn figcaption { font-size: .78rem; color: var(--ss-faint); }
.ss-hero3__finn figcaption strong { color: var(--ss-muted); font-weight: 700; }
.ss-hero3__photo { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 70px rgba(15,23,41,.18); }
.ss-hero3__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.ss-hero3__phone { position: absolute; width: 30%; max-width: 190px; right: -6%; bottom: -8%; z-index: 2; filter: drop-shadow(0 24px 40px rgba(15,23,41,.28)); }
.ss-hero3 .ss-float--a { top: -6%; right: 4%; left: auto; bottom: auto; }
.ss-hero3 .ss-float--b { bottom: -12%; left: -8%; right: auto; top: auto; }
@media (max-width: 991px) {
    .ss-hero3__grid { grid-template-columns: 1fr; gap: 40px; }
    .ss-hero3__visual { max-width: 560px; margin: 0 auto; width: 100%; }
    .ss-hero3__phone { right: 2%; width: 28%; }
    .ss-hero3 .ss-float--a { right: 2%; }
    .ss-hero3 .ss-float--b { left: 2%; }
}
@media (max-width: 575px) {
    .ss-hero3 { padding-top: 32px; }
    .ss-hero3__photo { aspect-ratio: 4 / 3.6; border-radius: 22px; }
    .ss-hero3 .ss-float--b { display: none; }
}

/* Vorher / Mit Smart Serve – eine ruhige Liste statt vier Karten */
/* Vorher/Nachher: vier Spalten – oben das Problem (grau, gestrichelt), darunter die Lösung (blau) */
.ss-swap { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 18px; row-gap: 0; }
/* Unterraster: alle grauen und alle blauen Karten einer Zeile gleich hoch */
.ss-swap__row { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.ss-swap__before { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 24px; border: 1px dashed rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.015); color: var(--ss-faint); }
.ss-swap__before i { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: rgba(255,255,255,.04); color: var(--ss-faint); }
.ss-swap__before strong { display: block; color: var(--ss-muted); font-weight: 700; font-size: .98rem; line-height: 1.35; }
.ss-swap__before small { display: block; font-size: .86rem; line-height: 1.5; margin-top: 6px; }
/* Pfeil zwischen Problem und Lösung */
.ss-swap__after { position: relative; margin-top: 30px; display: flex; gap: 12px; align-items: flex-start; padding: 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(56,116,255,.2), rgba(56,116,255,.08)); border: 1px solid rgba(56,116,255,.4); box-shadow: 0 16px 40px rgba(20,40,110,.25); font-family: "Inter Tight", "Nunito Sans", sans-serif; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; color: #fff; align-items: center; }
.ss-swap__after::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 18px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(56,116,255,0), rgba(56,116,255,.8)); }
.ss-swap__after::after { content: ""; position: absolute; left: 50%; top: -8px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); border-right: 2px solid rgba(56,116,255,.9); border-bottom: 2px solid rgba(56,116,255,.9); }
/* Die Lösung bekommt ein Häkchen, das nacheinander aufploppt: der fröhliche Moment nach dem grauen Problem */
.ss-swap__after i { flex: 0 0 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--ss-blue, #3874ff); color: #fff; }
.ss-swap.is-in .ss-swap__after i { animation: ss-tick .5s var(--ss-ease) both; }
.ss-swap.is-in .ss-swap__row:nth-child(1) .ss-swap__after i { animation-delay: .45s; }
.ss-swap.is-in .ss-swap__row:nth-child(2) .ss-swap__after i { animation-delay: .6s; }
.ss-swap.is-in .ss-swap__row:nth-child(3) .ss-swap__after i { animation-delay: .75s; }
.ss-swap.is-in .ss-swap__row:nth-child(4) .ss-swap__after i { animation-delay: .9s; }
@keyframes ss-tick { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; transform: none; } }
/* Das Problem wirkt grau wie ein Regentag; beim Überfahren erscheint die Lösung etwas heller */
.ss-swap__after { transition: transform .3s var(--ss-ease), box-shadow .3s; }
.ss-swap__row:hover .ss-swap__after { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(20,40,110,.35); }
@media (max-width: 1099px) { .ss-swap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-swap__row:nth-child(n+3) .ss-swap__before { margin-top: 28px; } }
@media (max-width: 575px) {
    .ss-swap { grid-template-columns: 1fr; row-gap: 26px; }
    .ss-swap__row { display: flex; flex-direction: column; }
    .ss-swap__row:nth-child(n+3) .ss-swap__before { margin-top: 0; }
    .ss-swap__before { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; }
    .ss-swap__before i { flex: 0 0 36px; height: 36px; }
    .ss-swap__after { margin-top: 26px; padding: 16px 18px; }
}

/* Navigation auf dieselbe Breite wie der Seiteninhalt */
@media (min-width: 992px) {
    .ss-navbar > .navbar { max-width: 1200px; padding-inline: 20px !important; }
}

/* Foto-Band mit Zahlen: Text links auf dunklem Verlauf, Landschaft rechts sichtbar, Zahlen in einem ruhigen Panel */
.ss-band { position: relative; color: #fff; overflow: hidden; }
.ss-band__img { position: absolute; left: 0; top: 0; width: 112%; height: 100%; object-fit: cover; object-position: 30% 58%; }
.ss-band::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(10,14,25,.9) 0%, rgba(10,14,25,.75) 30%, rgba(10,14,25,.2) 55%, rgba(10,14,25,0) 80%),
                linear-gradient(0deg, rgba(10,14,25,.55) 0%, rgba(10,14,25,0) 45%); }
/* Sonnenlicht über der Wiese (nur Licht im Foto, keine Markenfarbe) */
.ss-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(ellipse 55% 85% at 86% 12%, rgba(255,226,190,.3), rgba(255,226,190,0) 70%); }
.ss-band__inner { position: relative; z-index: 2; padding-block: 72px 64px; }
.ss-band h2 { color: #fff !important; font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.6rem) !important; margin: 0 0 .7rem; max-width: 640px; text-wrap: balance; }
.ss-band p { color: rgba(255,255,255,.85); max-width: 440px; margin: 0 0 1.6rem; font-size: 1rem; }
.ss-band__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; background: rgba(10,14,25,.58); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ss-band__stats div { padding: 14px 18px; }
.ss-band__stats div:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
.ss-band__stats div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
.ss-band__stats b { display: block; font-family: "Inter Tight", "Nunito Sans", sans-serif; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: .35rem; color: #fff; font-variant-numeric: tabular-nums; }
.ss-band__stats span { display: block; font-size: .8rem; line-height: 1.4; color: rgba(255,255,255,.72); }
.ss-band__stats a { color: #9cb8ff; text-decoration: none; font-weight: 700; }
.ss-band__stats a:hover { text-decoration: underline; }
.ss-band__cta { margin-top: 18px; padding: .7rem 1.15rem !important; font-size: .9rem !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; }
.ss-band__cta:hover { background: rgba(255,255,255,.14) !important; }
@media (max-width: 767px) {
    .ss-band__img { width: 100%; object-position: 58% 50%; }
    .ss-band::before { background: rgba(10,14,25,.72); }
    .ss-band__inner { padding-block: 56px; }
    .ss-band__stats div { padding: 16px 18px; }
}

/* Funktionsliste ohne Kartenrahmen */
.ss-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
.ss-feat { display: flex; gap: 14px; align-items: flex-start; }
.ss-feat i { flex: 0 0 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ss-card); border: 1px solid var(--ss-line); box-shadow: var(--ss-shadow, none); color: var(--ss-accent); font-size: 1.2rem; transition: transform .35s var(--ss-ease), color .35s, border-color .35s; }
.ss-feat:hover i { transform: translateY(-3px) rotate(-8deg); color: var(--ss-ice); border-color: var(--ss-ice-line); }
.ss-feat strong { display: block; color: var(--ss-ink); font-size: 1rem; margin-bottom: .2rem; }
.ss-feat span { font-size: .92rem; color: var(--ss-muted); line-height: 1.55; }
@media (max-width: 991px) { .ss-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .ss-feats { grid-template-columns: 1fr; gap: 22px; } }

/* Gründer-Abschnitt: links Text mit kleinem Porträt, rechts drei Versprechen als Kacheln */
.ss-founder { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px 52px; align-items: center; max-width: 1060px; margin: 0 auto; background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: 24px; padding: 44px 48px; box-shadow: var(--ss-shadow, 0 30px 70px rgba(0,0,0,.25)); }
.ss-founder::before { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(56,116,255,.18), rgba(56,116,255,0) 70%); pointer-events: none; }
.ss-founder > * { position: relative; }
.ss-founder .ss-h2 { text-align: left; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem) !important; margin: .6rem 0 1rem; }
.ss-founder__text p { color: var(--ss-muted); font-size: 1rem; line-height: 1.65; margin: 0 0 .8rem; }
.ss-founder__sign { display: flex; align-items: center; gap: 14px; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--ss-line); }
.ss-founder__sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(111,155,255,.45); box-shadow: 0 0 0 4px rgba(56,116,255,.12); }
.ss-founder__sign b { display: block; color: var(--ss-ink); font-size: 1rem; }
.ss-founder__sign span { font-size: .86rem; color: var(--ss-muted); }
.ss-founder__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ss-founder__points li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--ss-line); }
.ss-founder__points li i { flex: 0 0 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--ss-accent-soft); color: var(--ss-accent); transition: transform .35s var(--ss-ease), color .35s, background-color .35s; }
.ss-founder__points li:hover i { transform: translateY(-2px) rotate(-8deg); color: var(--ss-ice); background: rgba(56,116,255,.22); }
.ss-founder__points li strong { display: block; color: var(--ss-ink); font-size: .95rem; }
.ss-founder__points li small { display: block; color: var(--ss-muted); font-size: .84rem; line-height: 1.45; margin-top: 2px; }
@media (max-width: 899px) {
    .ss-founder { grid-template-columns: 1fr; padding: 32px 26px; }
}
@media (max-width: 575px) { .ss-founder { padding: 26px 20px; } }

/* FAQ auf der Startseite: Titel links, Fragen rechts */
.ss-faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.ss-faq-split .ss-h2 { text-align: left; margin: .6rem 0 .8rem; }
.ss-faq-split__intro p { color: var(--ss-muted); margin: 0 0 1.6rem; max-width: 320px; }
.ss-faq-split .ss-faq { max-width: none; margin: 0; }
@media (max-width: 991px) { .ss-faq-split { grid-template-columns: 1fr; gap: 28px; } }

.ss-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; }

/* Erster Bildschirm der Startseite: Hero + Vertrauensleiste + Logos füllen das Fenster (Skalierung per partials/fold.php) */
/* Lichtkegel gehört zum ganzen ersten Bildschirm, damit über dem Hero keine Kante entsteht */
.ss-fold { position: relative; overflow: hidden; }
.ss-fold::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    width: 1100px; height: 1100px; top: -520px; right: -300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,116,255,.20), transparent 62%);
}
.ss-fold > * { position: relative; z-index: 1; }
.ss-fold .ss-hero3::before { display: none; }
@media (min-width: 992px) {
    .ss-fold { display: flex; flex-direction: column; justify-content: center; }
    .ss-fold > .ss-logos { padding-bottom: 28px; }
}